diff options
Diffstat (limited to 'modules-available/locationinfo/templates/page-config-panel.html')
| -rw-r--r-- | modules-available/locationinfo/templates/page-config-panel.html | 349 |
1 files changed, 349 insertions, 0 deletions
diff --git a/modules-available/locationinfo/templates/page-config-panel.html b/modules-available/locationinfo/templates/page-config-panel.html new file mode 100644 index 00000000..244b80c9 --- /dev/null +++ b/modules-available/locationinfo/templates/page-config-panel.html @@ -0,0 +1,349 @@ +<form method="post" action="?do=locationinfo" id="configForm"> + <input type="hidden" name="token" value="{{token}}"> + <input type="hidden" name="action" value="updateConfig"> + <input type="hidden" name="id" value="{{id}}"> + + <div class="row"> + <div class="col-md-6"> + <div class="modify-inputs 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-sm-3"> + <label>{{lang_language}}</label> + </div> + <div class="col-sm-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-sm-2"> + <a class="btn btn-default helptext" title="{{lang_languageTooltip}}"> + <span class="glyphicon glyphicon-question-sign"></span> + </a> + </div> + </div> + </div> + + <div class="list-group-item"> + <div class="row"> + <div class="col-sm-3"> + <label>{{lang_mode}}</label> + </div> + <div class="col-sm-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-sm-2"> + <a class="btn btn-default helptext" title="{{lang_modeTooltip}}"> + <span class="glyphicon glyphicon-question-sign"></span> + </a> + </div> + </div> + </div> + + <div class="list-group-item"> + <div class="row"> + <div class="col-sm-3"> + <label>{{lang_ecoMode}}</label> + </div> + <div class="col-sm-7"> + <input type="checkbox" name="eco" {{eco_checked}}> + </div> + <div class="col-sm-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="modify-inputs"> + <div class="row"> + <div class="col-md-6"> + <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-sm-3"> + <label>{{lang_vertical}}</label> + </div> + <div class="col-sm-7"> + <input type="checkbox" name="vertical" {{vertical_checked}}> + </div> + <div class="col-sm-2"> + <a class="btn btn-default helptext" title="{{lang_verticalTooltip}}"> + <span class="glyphicon glyphicon-question-sign"></span> + </a> + </div> + </div> + </div> + + <div class="list-group-item m1-s m2-s m3-h m4-s"> + <div class="row"> + <div class="col-sm-3"> + <label>{{lang_autoScale}}</label> + </div> + <div class="col-sm-7"> + <input id="scaledaysauto" type="checkbox" name="scaledaysauto" {{scaledaysauto_checked}}> + </div> + <div class="col-sm-2"> + <a class="btn btn-default helptext" title="{{lang_autoscaleTooltip}}"> + <span class="glyphicon glyphicon-question-sign"></span> + </a> + </div> + </div> + </div> + + <div class="list-group-item m1-s m2-s m3-h m4-s"> + <div class="row"> + <div class="col-sm-3"> + <label>{{lang_daysToShow}}</label> + </div> + <div class="col-sm-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-sm-2"> + <a class="btn btn-default helptext" title="{{lang_daysToShowTooltip}}"> + <span class="glyphicon glyphicon-question-sign"></span> + </a> + </div> + </div> + </div> + + <div class="list-group-item m1-s m2-h m3-s m4-s"> + <div class="row"> + <div class="col-sm-3"> + <label>{{lang_rotation}}</label> + </div> + <div class="col-sm-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-sm-2"> + <a class="btn btn-default helptext" title="{{lang_rotationTooltip}}"> + <span class="glyphicon glyphicon-question-sign"></span> + </a> + </div> + </div> + </div> + + <div class="list-group-item m1-s m2-h m3-h m4-h"> + <div class="row"> + <div class="col-sm-3"> + <label>{{lang_scale}}</label> + </div> + <div class="col-sm-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-sm-2"> + <a class="btn btn-default helptext" title="{{lang_scaleTooltip}}"> + <span class="glyphicon glyphicon-question-sign"></span> + </a> + </div> + </div> + </div> + + <div class="list-group-item m1-h m2-h m3-h m4-s"> + <div class="row"> + <div class="col-sm-3"> + <label>{{lang_switchTime}}</label> + </div> + <div class="col-sm-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-sm-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 class="col-md-6"> + <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-sm-3"> + <label>{{lang_calendar}}</label> + </div> + <div class="col-sm-7"> + <input class="form-control" name="calupdate" type="number" min="0" + max="1440" value="{{calupdate}}"> + </div> + <div class="col-sm-2"> + <a class="btn btn-default helptext" title="{{lang_calupdateTooltip}}"> + <span class="glyphicon glyphicon-question-sign"></span> + </a> + </div> + </div> + </div> + + <div class="list-group-item"> + <div class="row"> + <div class="col-sm-3"> + <label>{{lang_room}}</label> + </div> + <div class="col-sm-7"> + <input class="form-control" name="roomupdate" type="number" min="0" + max="86400" value="{{roomupdate}}"> + </div> + <div class="col-sm-2"> + <a class="btn btn-default helptext" title="{{lang_roomupdateTooltip}}"> + <span class="glyphicon glyphicon-question-sign"></span> + </a> + </div> + </div> + </div> + + <div class="list-group-item"> + <div class="row"> + <div class="col-sm-3"> + <label>{{lang_config}}</label> + </div> + <div class="col-sm-7"> + <input class="form-control" name="configupdate" type="number" min="0" + max="1440" value="{{configupdate}}"> + </div> + <div class="col-sm-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> + + <div class="panel panel-default"> + <div class="panel-heading"> + <a class="btn btn-sm 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"> + <textarea rows="5" readonly class="form-control" id="custom-url"></textarea> + </div> + </div> +</form> + +<script type="text/javascript"><!-- + // Get list of form elements which affect the generated custom URL + var $inputs = $('.modify-inputs input, .modify-inputs select'); + // Base for displaying the custom URL + var customURL = window.location.protocol + "//" + window.location.hostname + "/slx-admin/modules/locationinfo/frontend/doorsign.html?id={{id}}"; + // Initialize fancy tooltips + $('a.helptext').tooltip(); + // Add listener to range sliders so their label can be updated + $('input[type="range"]').change(function () { + $(this).siblings().find('.range-display').text($(this).val()); + }); + // Set state of input controls that aren't statically initialized server side + loadValues(); + // Update the custom URL + buildCustomUrl(); + // Add listener to all the elements affecting custom URL + $inputs.change(function () { + $this = $(this); + if ($this.attr('type') === 'hidden') + return; + buildCustomUrl(); + }); + + /** + * Modifies the url preview. + */ + 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 { + v = val.value; + } + return acc + '&' + encodeURIComponent(val.name) + '=' + encodeURIComponent(v); + }, ''); + + $('#custom-url').val(customURL + str); + } + + /** + * Loads the Values in the config form elements. + */ + 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. + */ + function modeChange() { + var value = $('#mode').val(); + $('.m' + value + '-h').hide(); + $('.m' + value + '-s').show(); + } + +//--></script> |