diff options
author | Simon Rettberg | 2017-04-13 13:29:25 +0200 |
---|---|---|
committer | Simon Rettberg | 2017-04-13 13:29:25 +0200 |
commit | 0fa526d0718e405f9ae07bdffbc0fdc1c793363c (patch) | |
tree | 175ee36091b4528c0101a781e15b9c695cd74777 /modules-available/locationinfo/templates | |
parent | [locationinfo] Sanitize html (diff) | |
download | slx-admin-0fa526d0718e405f9ae07bdffbc0fdc1c793363c.tar.gz slx-admin-0fa526d0718e405f9ae07bdffbc0fdc1c793363c.tar.xz slx-admin-0fa526d0718e405f9ae07bdffbc0fdc1c793363c.zip |
[locationinfo] Clean up config.html (and handling in php)
- De-javascript where reasonable
- Unify repeated calls
- Overhaul query builder
- ...
Diffstat (limited to 'modules-available/locationinfo/templates')
-rw-r--r-- | modules-available/locationinfo/templates/config.html | 716 |
1 files changed, 267 insertions, 449 deletions
diff --git a/modules-available/locationinfo/templates/config.html b/modules-available/locationinfo/templates/config.html index 104b1cf3..9d088d6c 100644 --- a/modules-available/locationinfo/templates/config.html +++ b/modules-available/locationinfo/templates/config.html @@ -16,15 +16,16 @@ </div> <div class="col-md-7"> <select class="form-control" name="serverid"> - <option id="serverOption-{{sid}}" value="0">{{lang_noServer}}</option> + <option value="0">{{lang_noServer}}</option> {{#serverlist}} - <option id="serverOption-{{sid}}" value="{{sid}}">{{sname}}</option> + <option value="{{sid}}" {{selected}}>{{servername}}</option> {{/serverlist}} </select> </div> <div class="col-md-2"> - <a class="btn btn-default" id="help-server" title="{{lang_serverTooltip}}"><span - class="glyphicon glyphicon-question-sign"></span></a> + <a class="btn btn-default helptext" title="{{lang_serverTooltip}}"> + <span class="glyphicon glyphicon-question-sign"></span> + </a> </div> </div> </div> @@ -38,8 +39,9 @@ <input class="form-control" name="serverroomid" id="serverroomid" value="{{serverroomid}}"> </div> <div class="col-md-2"> - <a class="btn btn-default" id="help-roomId" title="{{lang_roomIdTooltip}}"><span - class="glyphicon glyphicon-question-sign"></span></a> + <a class="btn btn-default helptext" title="{{lang_roomIdTooltip}}"> + <span class="glyphicon glyphicon-question-sign"></span> + </a> </div> </div> </div> @@ -48,522 +50,338 @@ </div> </div> - <div class="panel panel-default"> - <div class="panel-heading">{{lang_display}}</div> - <div class="panel-body"> - <div class="list-group"> - - <div class="list-group-item"> - <div class="row"> - <div class="col-md-3"> - <label>{{lang_language}}</label> - </div> - <div class="col-md-7"> - <select class="form-control" name="language" id="language" - onchange="modifyCustomUrl('&language=', this.value);"> - {{#languages}} - <option value="{{cc}}" id="lang-{{cc}}">{{name}}</option> - {{/languages}} - </select> - </div> - <div class="col-md-2"> - <a class="btn btn-default" id="help-language" title="{{lang_languageTooltip}}"><span - class="glyphicon glyphicon-question-sign"></span></a> + <div class="modify-inputs"> + <div class="panel panel-default"> + <div class="panel-heading">{{lang_display}}</div> + <div class="panel-body"> + <div class="list-group"> + + <div class="list-group-item"> + <div class="row"> + <div class="col-md-3"> + <label>{{lang_language}}</label> + </div> + <div class="col-md-7"> + <select class="form-control" name="language" id="language"> + {{#languages}} + <option value="{{cc}}" id="lang-{{cc}}" {{selected}}>{{name}}</option> + {{/languages}} + </select> + </div> + <div class="col-md-2"> + <a class="btn btn-default helptext" title="{{lang_languageTooltip}}"> + <span class="glyphicon glyphicon-question-sign"></span> + </a> + </div> </div> </div> - </div> - <div class="list-group-item"> - <div class="row"> - <div class="col-md-3"> - <label>{{lang_mode}}</label> - </div> - <div class="col-md-7"> - <select class="form-control" name="mode" id="mode" - onchange="modeChange(this.value);modifyCustomUrl('&mode=', this.value);"> - <option value="1" id="mode1">{{lang_mode1}}</option> - <option value="2" id="mode2">{{lang_mode2}}</option> - <option value="3" id="mode3">{{lang_mode3}}</option> - <option value="4" id="mode4">{{lang_mode4}}</option> - </select> - </div> - <div class="col-md-2"> - <a class="btn btn-default" id="help-mode" title="{{lang_modeTooltip}}"><span - class="glyphicon glyphicon-question-sign"></span></a> + <div class="list-group-item"> + <div class="row"> + <div class="col-md-3"> + <label>{{lang_mode}}</label> + </div> + <div class="col-md-7"> + <select class="form-control" name="mode" id="mode" onchange="modeChange()"> + <option value="1" id="mode1">{{lang_mode1}}</option> + <option value="2" id="mode2">{{lang_mode2}}</option> + <option value="3" id="mode3">{{lang_mode3}}</option> + <option value="4" id="mode4">{{lang_mode4}}</option> + </select> + </div> + <div class="col-md-2"> + <a class="btn btn-default helptext" title="{{lang_modeTooltip}}"> + <span class="glyphicon glyphicon-question-sign"></span> + </a> + </div> </div> </div> - </div> - <div class="list-group-item"> - <div class="row"> - <div class="col-md-3"> - <label>{{lang_ecoMode}}</label> - </div> - <div class="col-md-7"> - <input type="hidden" name="eco" value="{{eco}}" id="cb_input_eco"/> - <input class="bs-switch" id="cb_eco" type="checkbox"/> - </div> - <div class="col-md-2"> - <a class="btn btn-default" id="help-eco" title="{{lang_ecoTooltip}}"><span - class="glyphicon glyphicon-question-sign"></span></a> + <div class="list-group-item"> + <div class="row"> + <div class="col-md-3"> + <label>{{lang_ecoMode}}</label> + </div> + <div class="col-md-7"> + <input type="checkbox" name="eco" {{eco_checked}}> + </div> + <div class="col-md-2"> + <a class="btn btn-default helptext" title="{{lang_ecoTooltip}}"> + <span class="glyphicon glyphicon-question-sign"></span> + </a> + </div> </div> </div> - </div> + </div> </div> </div> - </div> - - <div class="panel panel-default" id="extra-div"> - <div class="panel-heading">{{lang_mode}}</div> - <div class="panel-body"> - <div class="list-group"> - <div class="list-group-item" id="item-vertical"> - <div class="row"> - <div class="col-md-3"> - <label>{{lang_vertical}}</label> - </div> - <div class="col-md-7"> - <input type="hidden" name="vertical" value="{{vertical}}" id="cb_input_vertical"/> - <input class="bs-switch" id="cb_vertical" type="checkbox"/> - </div> - <div class="col-md-2"> - <a class="btn btn-default" id="help-vertical" title="{{lang_verticalTooltip}}"><span - class="glyphicon glyphicon-question-sign"></span></a> + <div class="panel panel-default" id="extra-div"> + <div class="panel-heading">{{lang_mode}}</div> + <div class="panel-body"> + <div class="list-group"> + + <div class="list-group-item m1-s m2-h m3-h m4-h"> + <div class="row"> + <div class="col-md-3"> + <label>{{lang_vertical}}</label> + </div> + <div class="col-md-7"> + <input type="checkbox" name="vertical" {{vertical_checked}}> + </div> + <div class="col-md-2"> + <a class="btn btn-default helptext" title="{{lang_verticalTooltip}}"> + <span class="glyphicon glyphicon-question-sign"></span> + </a> + </div> </div> </div> - </div> - <div class="list-group-item" id="item-autoscale"> - <div class="row"> - <div class="col-md-3"> - <label>{{lang_autoScale}}</label> - </div> - <div class="col-md-7"> - <input type="hidden" name="autoscale" value="{{scaledaysauto}}" id="cb_input_autoScale"/> - <input class="bs-switch" id="cb_autoScale" type="checkbox"/> - </div> - <div class="col-md-2"> - <a class="btn btn-default" id="help-autoscale" title="{{lang_autoscaleTooltip}}"><span - class="glyphicon glyphicon-question-sign"></span></a> + <div class="list-group-item m1-s m2-s m3-h m4-s"> + <div class="row"> + <div class="col-md-3"> + <label>{{lang_autoScale}}</label> + </div> + <div class="col-md-7"> + <input id="scaledaysauto" type="checkbox" name="scaledaysauto" {{scaledaysauto_checked}}> + </div> + <div class="col-md-2"> + <a class="btn btn-default helptext" title="{{lang_autoscaleTooltip}}"> + <span class="glyphicon glyphicon-question-sign"></span> + </a> + </div> </div> </div> - </div> - <div class="list-group-item" id="item-daystoshow"> - <div class="row"> - <div class="col-md-3"> - <label>{{lang_daysToShow}}</label> - </div> - <div class="col-md-7"> - <select class="form-control" id="daystoshow" name="daystoshow" - onchange="modifyCustomUrl('&daystoshow=', this.value);"> - <option value="1" id="day1">1</option> - <option value="2" id="day2">2</option> - <option value="3" id="day3">3</option> - <option value="4" id="day4">4</option> - <option value="5" id="day5">5</option> - <option value="6" id="day6">6</option> - <option value="7" id="day7">7</option> - </select> - </div> - <div class="col-md-2"> - <a class="btn btn-default" id="help-daystoshow" title="{{lang_daysToShowTooltip}}"><span - class="glyphicon glyphicon-question-sign"></span></a> + <div class="list-group-item m1-s m2-s m3-h m4-s"> + <div class="row"> + <div class="col-md-3"> + <label>{{lang_daysToShow}}</label> + </div> + <div class="col-md-7"> + <select class="form-control" id="daystoshow" name="daystoshow"> + <option value="1">1</option> + <option value="2">2</option> + <option value="3">3</option> + <option value="4">4</option> + <option value="5">5</option> + <option value="6">6</option> + <option value="7">7</option> + </select> + </div> + <div class="col-md-2"> + <a class="btn btn-default helptext" title="{{lang_daysToShowTooltip}}"> + <span class="glyphicon glyphicon-question-sign"></span> + </a> + </div> </div> </div> - </div> - <div class="list-group-item" id="item-rotation"> - <div class="row"> - <div class="col-md-3"> - <label>{{lang_rotation}}</label> - </div> - <div class="col-md-7"> - <select class="form-control" id="rotation" name="rotation" - onchange="modifyCustomUrl('&rotation=', this.value);"> - <option value="0" id="rotation0">{{lang_rotation0}}</option> - <option value="3" id="rotation3">{{lang_rotation3}}</option> - <option value="2" id="rotation2">{{lang_rotation2}}</option> - <option value="1" id="rotation1">{{lang_rotation1}}</option> - </select> - </div> - <div class="col-md-2"> - <a class="btn btn-default" id="help-rotation" title="{{lang_rotationTooltip}}"><span - class="glyphicon glyphicon-question-sign"></span></a> + <div class="list-group-item m1-s m2-h m3-s m4-s"> + <div class="row"> + <div class="col-md-3"> + <label>{{lang_rotation}}</label> + </div> + <div class="col-md-7"> + <select class="form-control" id="rotation" name="rotation"> + <option value="0">{{lang_rotation0}}</option> + <option value="3">{{lang_rotation3}}</option> + <option value="2">{{lang_rotation2}}</option> + <option value="1">{{lang_rotation1}}</option> + </select> + </div> + <div class="col-md-2"> + <a class="btn btn-default helptext" title="{{lang_rotationTooltip}}"> + <span class="glyphicon glyphicon-question-sign"></span> + </a> + </div> </div> </div> - </div> - <div class="list-group-item" id="item-scale"> - <div class="row"> - <div class="col-md-3"> - <label>{{lang_scale}}</label> - </div> - <div class="col-md-7"> - <span id="scale">50 %</span> - <input name="scale" id="sl_scale" type="range" step="1" min="10" max="90" value="50" - oninput="showScaleValue(this.value)" - onchange="modifyCustomUrl('&scale=', this.value);"/> - </div> - <div class="col-md-2"> - <a class="btn btn-default" id="help-scale" title="{{lang_scaleTooltip}}"><span - class="glyphicon glyphicon-question-sign"></span></a> + <div class="list-group-item m1-s m2-h m3-h m4-h"> + <div class="row"> + <div class="col-md-3"> + <label>{{lang_scale}}</label> + </div> + <div class="col-md-7"> + <span><span class="range-display"></span> %</span> + <input name="scale" type="range" step="1" min="10" max="90" value="{{scale}}"> + </div> + <div class="col-md-2"> + <a class="btn btn-default helptext" title="{{lang_scaleTooltip}}"> + <span class="glyphicon glyphicon-question-sign"></span> + </a> + </div> </div> </div> - </div> - <div class="list-group-item" id="item-switchtime"> - <div class="row"> - <div class="col-md-3"> - <label>{{lang_switchTime}}</label> - </div> - <div class="col-md-7"> - <span id="switch">20 {{lang_sec}}</span> - <input name="switchtime" id="sl_switch" type="range" step="1" min="1" max="120" value="20" - oninput="showSwitchValue(this.value)" - onchange="modifyCustomUrl('&switchtime=', this.value);"/> - </div> - <div class="col-md-2"> - <a class="btn btn-default" id="help-switchtime" title="{{lang_switchTimeTooltip}}"><span - class="glyphicon glyphicon-question-sign"></span></a> + <div class="list-group-item m1-h m2-h m3-h m4-s"> + <div class="row"> + <div class="col-md-3"> + <label>{{lang_switchTime}}</label> + </div> + <div class="col-md-7"> + <span><span class="range-display"></span> {{lang_sec}}</span> + <input name="switchtime" type="range" step="1" min="1" max="120" value="{{switchtime}}"> + </div> + <div class="col-md-2"> + <a class="btn btn-default helptext" title="{{lang_switchTimeTooltip}}"> + <span class="glyphicon glyphicon-question-sign"></span> + </a> + </div> </div> </div> - </div> + </div> </div> </div> - </div> - - <div class="panel panel-default"> - <div class="panel-heading">{{lang_updateRates}}</div> - <div class="panel-body"> - <div class="list-group"> - <div class="list-group-item"> - <div class="row"> - <div class="col-md-3"> - <label>{{lang_calendar}}</label> - </div> - <div class="col-md-7"> - <input class="form-control" id="updateCalendar" name="calupdate" type="number" min="0" - max="1440" onchange="modifyCustomUrl('&calupdate=', this.value);"/> - </div> - <div class="col-md-2"> - <a class="btn btn-default" id="help-updatecalendar" title="{{lang_calupdateTooltip}}"><span - class="glyphicon glyphicon-question-sign"></span></a> + <div class="panel panel-default"> + <div class="panel-heading">{{lang_updateRates}}</div> + <div class="panel-body"> + <div class="list-group"> + + <div class="list-group-item"> + <div class="row"> + <div class="col-md-3"> + <label>{{lang_calendar}}</label> + </div> + <div class="col-md-7"> + <input class="form-control" name="calupdate" type="number" min="0" + max="1440" value="{{calupdate}}"> + </div> + <div class="col-md-2"> + <a class="btn btn-default helptext" title="{{lang_calupdateTooltip}}"> + <span class="glyphicon glyphicon-question-sign"></span> + </a> + </div> </div> </div> - </div> - <div class="list-group-item"> - <div class="row"> - <div class="col-md-3"> - <label>{{lang_room}}</label> - </div> - <div class="col-md-7"> - <input class="form-control" id="updateRoom" name="roomupdate" type="number" min="0" max="86400" - onchange="modifyCustomUrl('&roomupdate=', this.value);"/> - </div> - <div class="col-md-2"> - <a class="btn btn-default" id="help-updateroom" title="{{lang_roomupdateTooltip}}"><span - class="glyphicon glyphicon-question-sign"></span></a> + <div class="list-group-item"> + <div class="row"> + <div class="col-md-3"> + <label>{{lang_room}}</label> + </div> + <div class="col-md-7"> + <input class="form-control" name="roomupdate" type="number" min="0" + max="86400" value="{{roomupdate}}"> + </div> + <div class="col-md-2"> + <a class="btn btn-default helptext" title="{{lang_roomupdateTooltip}}"> + <span class="glyphicon glyphicon-question-sign"></span> + </a> + </div> </div> </div> - </div> - <div class="list-group-item"> - <div class="row"> - <div class="col-md-3"> - <label>{{lang_config}}</label> - </div> - <div class="col-md-7"> - <input class="form-control" id="updateConfig" name="configupdate" type="number" min="0" - max="1440" onchange="modifyCustomUrl('&configupdate=', this.value);"/> - </div> - <div class="col-md-2"> - <a class="btn btn-default" id="help-updateconfig" title="{{lang_configupdateTooltip}}"><span - class="glyphicon glyphicon-question-sign"></span></a> + <div class="list-group-item"> + <div class="row"> + <div class="col-md-3"> + <label>{{lang_config}}</label> + </div> + <div class="col-md-7"> + <input class="form-control" name="configupdate" type="number" min="0" + max="1440" value="{{configupdate}}"> + </div> + <div class="col-md-2"> + <a class="btn btn-default helptext" title="{{lang_configupdateTooltip}}"> + <span class="glyphicon glyphicon-question-sign"></span> + </a> + </div> </div> </div> - </div> + </div> </div> </div> </div> <div class="panel panel-default"> - <div class="panel-heading">{{lang_customUrl}}</div> + <div class="panel-heading"> + <a class="btn btn-default helptext pull-right" title="{{lang_customUrlTooltip}}"> + <span class="glyphicon glyphicon-question-sign"></span> + </a> + {{lang_customUrl}} + <div class="clearfix"></div> + </div> <div class="panel-body"> - <div class="list-group"> - - <div class="list-group-item"> - <div class="row"> - <div class="col-md-3"> - <label>{{lang_serverUrl}}</label> - </div> - <div class="col-md-7"> - <input readonly class="form-control" id="custom-url" type="text"/> - </div> - <div class="col-md-2"> - <a class="btn btn-default" id="help-customURL" title="{{lang_customUrlTooltip}}"><span - class="glyphicon glyphicon-question-sign"></span></a> - </div> - </div> - </div> - - </div> + <textarea rows="5" readonly class="form-control" id="custom-url"></textarea> </div> </div> </form> </div> -<script type="text/javascript"> +<script type="text/javascript"><!-- - var customURL = "http://" + window.location.hostname + "/slx-admin/modules-available/locationinfo/frontend/doorsign.html?id={{id}}"; + var customURL = window.location.protocol + "//" + window.location.hostname + "/slx-admin/modules/locationinfo/frontend/doorsign.html?id={{id}}"; $('#custom-url').val(customURL); - var autoscale = '{{scaledaysauto}}'; - initBootstrap(); + var $inputs = $('.modify-inputs input, .modify-inputs select'); + $('a.helptext').tooltip(); + $('input[type="range"]').change(function () { + $(this).siblings().find('.range-display').text($(this).val()); + }); loadValues(); - initCustomUrl(); + buildCustomUrl(); - /** - * Initialize the url preview. - */ - function initCustomUrl() { - $('#daystoshow').change(); - $('#rotation').change(); - $('#sl_scale').change(); - $('#sl_switch').change(); - $('#updateCalendar').change(); - $('#updateRoom').change(); - $('#updateConfig').change(); - $('#language').change(); - $('#mode').change(); - } + $inputs.change(function () { + $this = $(this); + if ($this.attr('type') === 'hidden') + return; + buildCustomUrl(); + }); /** * Modifies the url preview. */ - function modifyCustomUrl(parameter, value) { - if (!value) { - var reExp = new RegExp(parameter +"[0-9a-zA-Z]*"); - customURL = customURL.replace(reExp, ""); - } else if (customURL.search(parameter) > 0) { - var reExp = new RegExp(parameter +"[0-9a-zA-Z]*"); - customURL = customURL.replace(reExp, parameter + value); - } else { - customURL += parameter + value; - } - - $('#custom-url').val(customURL); - - console.log(customURL); - } - - /** - * Initialize the bootstrap elements. - */ - function initBootstrap() { - // Init Bootstrap stuff. - $('#help-updateroom').tooltip(); - $('#help-updateconfig').tooltip(); - $('#help-updatecalendar').tooltip(); - $('#help-daystoshow').tooltip(); - $('#help-rotation').tooltip(); - $('#help-server').tooltip(); - $('#help-roomId').tooltip(); - $('#help-language').tooltip(); - $('#help-mode').tooltip(); - $('#help-eco').tooltip(); - $('#help-vertical').tooltip(); - $('#help-autoscale').tooltip(); - $('#help-scale').tooltip(); - $('#help-switchtime').tooltip(); - $('#help-customURL').tooltip(); - } - - /** - * Converts an int value to bool. 1 = true else false - */ - function intToBool(int) { - if (int == 1) { - return true; - } else { - return false; - } - } - - /** - * Loads the Values in the config form elements. - */ - function loadValues() { - $("#lang-{{language}}").attr("selected", "selected"); - - $('#serverOption-{{serverid}}').attr("selected", "selected"); - - var mode = $("#{{mode}}"); - if (!mode.length) { - mode = $("#mode1"); - } - mode.attr("selected", "selected"); - - $('#cb_vertical').bootstrapSwitch({ - state: '{{vertical}}', - size: 'small' - }); - $('#cb_vertical').on('switchChange.bootstrapSwitch', function(e, value) { - if (value) { - $('#cb_input_vertical').val(1); - } else { - $('#cb_input_vertical').val(0); - } - modifyCustomUrl("&vertical=", value); - }); - - modifyCustomUrl("&vertical=", intToBool({{vertical}})); - - $('#cb_eco').bootstrapSwitch({ - state: '{{eco}}', - size: 'small' - }); - $('#cb_eco').on('switchChange.bootstrapSwitch', function(e, value) { - if (value) { - $('#cb_input_eco').val(1); - } else { - $('#cb_input_eco').val(0); - } - modifyCustomUrl("&eco=", value); - }); - modifyCustomUrl("&eco=", intToBool({{eco}})); - - $('#cb_autoScale').bootstrapSwitch({ - state: '{{scaledaysauto}}', - size: 'small' - }); - - $('#cb_autoScale').on('switchChange.bootstrapSwitch', function(e, value) { - if (value) { - $('#cb_input_autoScale').val(1); + function buildCustomUrl() { + var str = Array.prototype.reduce.call($inputs, function (acc, val) { + if (val.type && val.type === 'radio' && !val.checked) + return acc; + var v; + if (val.type && val.type === 'checkbox') { + v = val.checked ? val.value : ''; } else { - $('#cb_input_autoScale').val(0); + v = val.value; } - autoScaleChange(value); - modifyCustomUrl("&scaledaysauto=", value); - }); - modifyCustomUrl("&scaledaysauto=", intToBool({{scaledaysauto}})); - - var day = $("#{{daystoshow}}"); - if (!day.length) { - day = $("#day7"); - } - day.attr("selected", "selected"); - - var rotation = $("#{{rotation}}"); - if (!rotation.length) { - rotation = $("#rotation0"); - } - rotation.attr("selected", "selected"); - - var scaleVal = '{{scale}}'; - if (scaleVal == '') { - scaleVal = 50; - } - $('#sl_scale').attr('value', '{{scale}}'); - showScaleValue(scaleVal); - - var switchVal = '{{switchtime}}'; - if (switchVal == '') { - switchVal = 20; - } - $("#sl_switch").attr('value', switchVal); - showSwitchValue(switchVal); - - var calupdate = '{{calupdate}}'; - if (!calupdate.length) { - calupdate = 30; - } - $("#updateCalendar").attr("value", calupdate); - - var roomupdate = '{{roomupdate}}'; - if (!roomupdate.length) { - roomupdate = 30; - } - $("#updateRoom").attr("value", roomupdate); - - var configupdate = '{{configupdate}}'; - if (!configupdate.length) { - configupdate = 180; - } - $("#updateConfig").attr("value", configupdate); - - modeChange(mode.val()); - } + return acc + '&' + encodeURIComponent(val.name) + '=' + encodeURIComponent(v); + }, ''); - /** - * Updates the value from the scale slider. - * - * @param newValue The new value the scale slider was set to. - */ - function showScaleValue(newValue) { - $("#scale").text(newValue + " %"); + $('#custom-url').val(customURL + str); } /** - * Updates the value from the switchtime slider. - * - * @param newValue The new value the switchtime slider was set to. + * Loads the Values in the config form elements. */ - function showSwitchValue(newValue) { - $("#switch").text(newValue + " " + '{{lang_sec}}'); + function loadValues() { + $('.modify-inputs input[type="checkbox"]') + .bootstrapSwitch({size: 'small'}) + .on('switchChange.bootstrapSwitch', function () { + buildCustomUrl(); + if (this.name === 'scaledaysauto') { + $('#daystoshow').prop('disabled', this.checked); + } + }); + + $('#daystoshow option[value="{{daystoshow}}"]').attr("selected", "selected"); + $('#rotation option[value="{{rotation}}"]').attr("selected", "selected"); + $('#mode option[value="{{mode}}"]').attr("selected", "selected"); + + $('#daystoshow').prop('disabled', document.getElementById('scaledaysauto').checked); + + $('input[type="range"]').change(); + modeChange(); } /** * If the mode was changed the mode settings have to be adjusted. - * - * @param value The new mode that was set. 1-4 - */ - function modeChange(value) { - $('#item-vertical').hide(); - $('#item-autoscale').hide(); - $('#item-daystoshow').hide(); - $('#item-rotation').hide(); - $('#item-scale').hide(); - $('#item-switchtime').hide(); - - autoScaleChange(autoscale); - - if (value == "1") { - $('#item-vertical').show(); - $('#item-autoscale').show(); - $('#item-rotation').show(); - $('#item-scale').show(); - } else if (value == "2"){ - $('#item-autoscale').show(); - } else if (value == "3"){ - $('#item-rotation').show(); - $('#item-daystoshow').hide(); - } else if (value == "4"){ - $('#item-autoscale').show(); - $('#item-rotation').show(); - $('#item-switchtime').show(); - } - } - - /** - * If the auto scale changes the days to show must be shown / hided - * - * @param value The new value of the autoscale switch. */ - function autoScaleChange(value) { - autoscale = value; - if (value) { - $('#item-daystoshow').hide(); - } else { - $('#item-daystoshow').show(); - } + function modeChange() { + var value = $('#mode').val(); + $('.m' + value + '-h').hide(); + $('.m' + value + '-s').show(); } -</script> +//--></script> |