<h2>
{{#new}}{{lang_createPanel}}{{/new}}
{{^new}}{{lang_editPanel}}{{/new}}
</h2>
<p>{{lang_editDefaultPanelHints}}</p>
<form method="post" action="?do=locationinfo" id="config-form">
<input type="hidden" name="token" value="{{token}}">
<input type="hidden" name="action" value="writePanelConfig">
<input type="hidden" name="ptype" value="DEFAULT">
<input type="hidden" name="uuid" value="{{uuid}}">
<div class="row">
</div>
<div class="modify-inputs">
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">{{lang_generalSettings}}</div>
<div class="panel-body">
<div class="list-group">
<div class="list-group-item">
<div class="row">
<div class="col-sm-3">
<label for="panel-title">{{lang_displayName}}</label>
</div>
<div class="col-sm-7">
<input class="form-control" name="name" id="panel-title" type="text" value="{{panelname}}">
</div>
<div class="col-sm-2">
<p class="btn btn-static helptext" title="{{lang_displayNameTooltip}}">
<span class="glyphicon glyphicon-question-sign"></span>
</p>
</div>
</div>
</div>
<div class="list-group-item">
<div class="row">
<div class="col-sm-3">
<label for="language">{{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">
<p class="btn btn-static helptext" title="{{lang_languageTooltip}}">
<span class="glyphicon glyphicon-question-sign"></span>
</p>
</div>
</div>
</div>
<div class="list-group-item">
<div class="row">
<div class="col-sm-3">
<label for="input-eco">{{lang_ecoMode}}</label>
</div>
<div class="col-sm-7">
<input id="input-eco" type="checkbox" name="eco" {{eco_checked}}>
</div>
<div class="col-sm-2">
<p class="btn btn-static helptext" title="{{lang_ecoTooltip}}">
<span class="glyphicon glyphicon-question-sign"></span>
</p>
</div>
</div>
</div>
<div class="list-group-item">
<div class="row">
<div class="col-sm-3">
<label for="input-prettytime">{{lang_prettytime}}</label>
</div>
<div class="col-sm-7">
<input id="input-prettytime" type="checkbox" name="prettytime" {{prettytime_checked}}>
</div>
<div class="col-sm-2">
<p class="btn btn-static helptext" title="{{lang_prettytimeTooltip}}">
<span class="glyphicon glyphicon-question-sign"></span>
</p>
</div>
</div>
</div>
<div class="list-group-item">
<div class="row">
<div class="col-sm-3">
<label for="input-calupdate">{{lang_calendarUpdate}}</label>
</div>
<div class="col-sm-7">
<input class="form-control" name="calupdate" type="number" min="30" id="input-calupdate"
max="1440" value="{{calupdate}}" required>
</div>
<div class="col-sm-2">
<p class="btn btn-static helptext" title="{{lang_calupdateTooltip}}">
<span class="glyphicon glyphicon-question-sign"></span>
</p>
</div>
</div>
</div>
<div class="list-group-item">
<div class="row">
<div class="col-sm-3">
<label for="form-roomupdate">{{lang_roomUpdate}}</label>
</div>
<div class="col-sm-7">
<input class="form-control" name="roomupdate" type="number" min="15" id="form-roomupdate"
max="86400" value="{{roomupdate}}" required>
</div>
<div class="col-sm-2">
<p class="btn btn-static helptext" title="{{lang_roomupdateTooltip}}">
<span class="glyphicon glyphicon-question-sign"></span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<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" id="overridableConfigs">
<div class="list-group-item">
<div class="row">
<div class="col-sm-3">
<label for="mode">{{lang_mode}}</label>
</div>
<div class="col-sm-7">
<select class="form-control" name="mode" id="mode" onchange="modeChange(id)">
<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">
<p class="btn btn-static helptext" title="{{lang_modeTooltip}}">
<span class="glyphicon glyphicon-question-sign"></span>
</p>
</div>
</div>
</div>
<div class="list-group-item">
<div class="row">
<div class="col-sm-3">
<label for="input-roomplanner">{{lang_useRoomplanner}}</label>
</div>
<div class="col-sm-7">
<select class="form-control" name="roomplanner" id="input-roomplanner">
<option value="0" id="roomplanner0">{{lang_countIp}}</option>
<option value="1" id="roomplanner1">{{lang_countRoomplan}}</option>
</select>
</div>
<div class="col-sm-2">
<p class="btn btn-static helptext" title="{{lang_roomplannerTooltip}}">
<span class="glyphicon glyphicon-question-sign"></span>
</p>
</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 for="input-vertical">{{lang_vertical}}</label>
</div>
<div class="col-sm-7">
<input id="input-vertical" class="btstrpCheckbox" type="checkbox" name="vertical" {{vertical_checked}}>
</div>
<div class="col-sm-2">
<p class="btn btn-static helptext" title="{{lang_verticalTooltip}}">
<span class="glyphicon glyphicon-question-sign"></span>
</p>
</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 for="startday">{{lang_startDay}}</label>
</div>
<div class="col-sm-7">
<select class="form-control" id="startday" name="startday">
<option value="0">{{lang_currentDay}}</option>
<option value="1">{{lang_monday}}</option>
<option value="2">{{lang_thuesday}}</option>
<option value="3">{{lang_wednesday}}</option>
<option value="4">{{lang_thursday}}</option>
<option value="5">{{lang_friday}}</option>
<option value="6">{{lang_saturday}}</option>
<option value="7">{{lang_sunday}}</option>
</select>
</div>
<div class="col-sm-2">
<p class="btn btn-static helptext" title="{{lang_startDayTooltip}}">
<span class="glyphicon glyphicon-question-sign"></span>
</p>
</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 for="scaledaysauto">{{lang_autoScale}}</label>
</div>
<div class="col-sm-7">
<input id="scaledaysauto" class="btstrpCheckbox" type="checkbox" name="scaledaysauto" {{scaledaysauto_checked}}>
</div>
<div class="col-sm-2">
<p class="btn btn-static helptext" title="{{lang_autoscaleTooltip}}">
<span class="glyphicon glyphicon-question-sign"></span>
</p>
</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 for="daystoshow">{{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">
<p class="btn btn-static helptext" title="{{lang_daysToShowTooltip}}">
<span class="glyphicon glyphicon-question-sign"></span>
</p>
</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 for="rotation">{{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">
<p class="btn btn-static helptext" title="{{lang_rotationTooltip}}">
<span class="glyphicon glyphicon-question-sign"></span>
</p>
</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 for="input-scale">{{lang_scale}}</label>
</div>
<div class="col-sm-7">
<span><span class="range-display"></span> %</span>
<input id="input-scale" name="scale" type="range" step="1" min="10" max="90" value="{{scale}}">
</div>
<div class="col-sm-2">
<p class="btn btn-static helptext" title="{{lang_scaleTooltip}}">
<span class="glyphicon glyphicon-question-sign"></span>
</p>
</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 for="input-switchtime">{{lang_switchTime}}</label>
</div>
<div class="col-sm-7">
<span><span class="range-display"></span> {{lang_sec}}</span>
<input id="input-switchtime" name="switchtime" type="range" step="1" min="1" max="120" value="{{switchtime}}">
</div>
<div class="col-sm-2">
<p class="btn btn-static helptext" title="{{lang_switchTimeTooltip}}">
<span class="glyphicon glyphicon-question-sign"></span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">{{lang_locations}}</div>
<div class="panel-body">
<input type="hidden" name="locationids" value="{{locationids}}" id="locationids">
<p>{{lang_fourLocsHint}}</p>
<ul id="selected-locations" class="list-unstyled">
</ul>
<div class="dropdown pull-right">
<button id="addLocDdBtn" type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-plus"></span>
</button>
<ul class="dropdown-menu" id="location-list">
{{#locations}}
<li><a href="#" data-lid="{{locationid}}">{{locationpad}} <span class="name">{{locationname}}</span></a></li>
{{/locations}}
</ul>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
<div class="row" id="overrideRoomConfigs">
</div>
</div>
<div class="text-right">
<a href="?do=locationinfo&show=panels" class="btn btn-default">{{lang_cancel}}</a>
<button type="submit" class="btn btn-primary">
<span class="glyphicon glyphicon-floppy-disk"></span>
{{lang_save}}
</button>
</div>
</form>
<div class="modal fade" id="no-locations-message" tabindex="-1" role="dialog">
<div class="modal-dialog"> <!--style="min-width:600px;width:70%"-->
<div class="modal-content">
<div class="modal-header">{{lang_error}}</div>
<div class="modal-body">
{{lang_noLocationsWarning}}
</div>
<div class="modal-footer">
<a class="btn btn-primary pull-right" data-dismiss="modal">{{lang_close}}</a>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
<script type="text/javascript"><!--
document.addEventListener("DOMContentLoaded", function () {
var $selLocs = $('#selected-locations');
var $locList = $('#location-list');
var $locInput = $('#locationids');
var $addLocDbBtn = $('#addLocDdBtn');
var $owPanels = $('#overrideRoomConfigs');
var overrides = {{{overrides}}}
// Initialize fancy tooltips
$('p.helptext').tooltip();
// Add listener to range sliders so their label can be updated
var $range = $('input[type="range"]');
$range.change(function () {
$(this).siblings().find('.range-display').text($(this).val());
});
// Set state of input controls that aren't statically initialized server side
$('.modify-inputs input[type="checkbox"]')
.bootstrapSwitch({size: 'small'})
.on('switchChange.bootstrapSwitch', function () {
if (this.name === 'scaledaysauto') {
$('#daystoshow').prop('disabled', this.checked);
}
});
var lids = $locInput.val().split(',');
$selLocs.empty();
for (var i = 0; i < lids.length; ++i) {
var $name = $locList.find('a[data-lid="' + lids[i] + '"] .name');
if ($name.length === 0) continue;
addLocation(lids[i], $name.text());
}
$('#startday option[value="{{startday}}"]').attr("selected", "selected");
$('#daystoshow option[value="{{daystoshow}}"]').attr("selected", "selected");
$('#rotation option[value="{{rotation}}"]').attr("selected", "selected");
$('#mode option[value="{{mode}}"]').attr("selected", "selected");
$('#input-roomplanner option[value="{{roomplanner}}"]').attr("selected", "selected");
$('#daystoshow').prop('disabled', document.getElementById('scaledaysauto').checked);
$range.change();
modeChange('mode');
// Adding/removing locations
$locList.find('a').click(function(ev) {
ev.preventDefault();
ev.stopPropagation();
var $this = $(this);
var name = $this.find('.name').text();
var id = $this.data('lid');
addLocation(id, name);
serializeLocs();
});
$('#config-form').submit(function(ev) {
if ($locInput.val().length > 0) {
return;
}
ev.preventDefault();
$('#no-locations-message').modal('show');
});
function addLocation(id, name) {
$selLocs.find('li[data-lid="' + id + '"]').remove();
var delButton = $('<button style="margin-right: 5px;" class="btn btn-danger btn-xs" type="button">').append($('<span class="glyphicon glyphicon-remove">')).click(delParent);
$selLocs.append($('<li style="margin-top: 5px;">').attr('data-lid', id).text(name).prepend(delButton));
if ($selLocs.find('li').length >= 4) {
$addLocDbBtn.prop("disabled",true);
var $addLocBtnParent = $addLocDbBtn.parent();
if ($addLocBtnParent.hasClass('open')) {
$addLocBtnParent.removeClass('open');
}
}
// Add Panel for overwriting room specific config
$owPanels.find('#overrideRoom' + id).remove();
$owPanels.append('<div class="col-md-6" id="overrideRoom' + id + '">' +
'<div class="panel panel-default">' +
'<div class="panel-heading clearfix">' +
name + ' {{lang_configOverride}}' +
'<div class="checkbox-inline pull-right">' +
'<input type="checkbox" id="override' + id + '" name="override' + id + '"/>' +
'</div></div><div class="panel-body"></div></div></div>');
// Load content into panel
var overrideSelect = $('#override' + id);
overrideSelect
.bootstrapSwitch({size: 'small'})
.on('switchChange.bootstrapSwitch', function () {
if (this.checked) {
loadOverrideContent(id);
} else {
unloadOverrideContent(id);
}
});
if (overrides !== null && overrides[id] !== undefined) {
overrideSelect.bootstrapSwitch('state', true);
}
}
function loadOverrideContent(locId) {
// Do we have override values (edit menu)?
var overVal = false;
if (overrides !== null && overrides[locId] !== undefined) overVal = true;
// Make Bootstrap switches to normal checkboxes to be able to clone them correctly
var btstrpCheckboxes = $('.modify-inputs input[class="btstrpCheckbox"]');
btstrpCheckboxes.bootstrapSwitch('destroy');
// Clone needed content
var $contentCopy = $('#overridableConfigs').clone(true);
$contentCopy.closest('#overridableConfigs').prop('id', '');
// Change labels
$contentCopy.find('label').each(function() {
var oldFor = $( this ).attr('for');
$( this ).attr('for', 'override' + locId + oldFor);
});
// Change selects
$contentCopy.find('select').each(function() {
var oldId = $( this ).attr('id');
var oldName = $( this ).attr('name');
$( this ).attr('id', 'override' + locId + oldId);
$( this ).attr('name', 'override' + locId + oldName);
$( this ).val(overVal ? overrides[locId][oldName] : $('#' + oldId).val());
// TODO: Save 'roomplanner' mode (0, 1, ...) instead of true/false to get rid of special case
if (oldId === 'input-roomplanner' && overVal) $( this ).val(overrides[locId].roomplanner ? 1 : 0);
});
// Change options of selects
$contentCopy.find('option').each(function() {
var oldId = $( this ).attr('id');
$( this ).attr('id', 'override' + locId + oldId);
});
// Change inputs
$contentCopy.find('input').each(function() {
var oldId = $( this ).attr('id');
var oldName = $( this ).attr('name');
$( this ).attr('id', 'override' + locId + oldId);
$( this ).attr('name', 'override' + locId + oldName);
$( this ).removeClass('btstrpCheckbox');
if ($( this ).attr('type') === 'range') $( this ).val(overVal ? overrides[locId][oldName] : $('#' + oldId).val());
else if ($( this ).attr('type') === 'checkbox') {
$( this )
.bootstrapSwitch({size: 'small'})
.on('switchChange.bootstrapSwitch', function () {
var regex = RegExp('[a-b0-9]*scaledaysauto');
var substr = this.name.substring(0, this.name.length - 13);
if (regex.test(this.name)) {
$('#' + substr + 'daystoshow').prop('disabled', this.checked);
}
});
$( this ).bootstrapSwitch('state', overVal ? overrides[locId][oldName] : $('#' + oldId).val());
}
});
// Append copied content to location specific <div>
var $panelBody = $('#overrideRoom' + locId).find('div.panel-body');
$panelBody.append($contentCopy);
// Specific extra stuff needed
// De-/activate daystoshow based on scaledaysauto on/off
$('#override' + locId + 'daystoshow').prop('disabled', document.getElementById('override' + locId + 'scaledaysauto').checked);
// Call modeChange once to correctly show/hide fields
modeChange('override'+ locId + 'mode');
// Recreate Bootstrap switches from checkboxes
btstrpCheckboxes
.bootstrapSwitch({size: 'small'})
.on('switchChange.bootstrapSwitch', function () {
var regex = RegExp('[a-b0-9]*scaledaysauto');
var substr = this.name.substring(0, this.name.length - 13);
if (regex.test(this.name)) {
$('#' + substr + 'daystoshow').prop('disabled', this.checked);
}
});
// Add listener to range inputs for updating value text
var range = $('input[type="range"]');
range.change(function () {
$(this).siblings().find('.range-display').text($(this).val());
});
range.change();
}
function unloadOverrideContent(id) {
var $panelBody = $('#overrideRoom' + id).find('div.panel-body');
$panelBody.find('div.list-group').remove();
if (overrides !== null && overrides[id] !== undefined) delete overrides[id]
}
function delParent() {
var $id = $(this).parent().attr("data-lid");;
$('#overrideRoom' + $id).remove();
$(this).parent().remove();
serializeLocs();
if ($selLocs.find('li').length < 4) {
$addLocDbBtn.prop("disabled",false);
}
}
function serializeLocs() {
var res = $selLocs.find('li[data-lid]').map( function() {
return $(this).data('lid');
}).get().join(',');
$locInput.val(res);
}
});
/**
* If the mode was changed the mode settings have to be adjusted.
*/
function modeChange(id) {
var isOverride = (id !== 'mode');
if (isOverride) id = id.replace('override', '').replace('mode', '');
var value = $('#' + (isOverride ? 'override' + id : '') + 'mode').val();
$('#' + (isOverride ? 'overrideRoom' + id : 'extra-div') + ' .m' + value + '-h').hide();
$('#' + (isOverride ? 'overrideRoom' + id : 'extra-div') + ' .m' + value + '-s').show();
}
//--></script>