[locationinfo] slxadmin part done, todo: frontend+api

6 files changed, 555 insertions, 412 deletions

diff --git a/modules-available/locationinfo/templates/page-config-panel-default.html b/modules-available/locationinfo/templates/page-config-panel-default.html
new file mode 100644
index 00000000..450b29e9
--- /dev/null
+++ b/modules-available/locationinfo/templates/page-config-panel-default.html
@@ -0,0 +1,418 @@
+<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="uuid" value="{{uuid}}">
+
+	<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 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">
+									<a class="btn btn-default helptext" title="{{lang_displayNameTooltip}}">
+										<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 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">
+									<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 for="mode">{{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 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">
+									<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 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 for="input-calupdate">{{lang_calendar}}</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">
+									<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 for="form-roomupdate">{{lang_room}}</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">
+									<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 for="configupdate">{{lang_config}}</label>
+								</div>
+								<div class="col-sm-7">
+									<input id="configupdate" class="form-control" name="configupdate" type="number" min="10"
+											 max="1440" value="{{configupdate}}" required>
+								</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 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 for="input-vertical">{{lang_vertical}}</label>
+									</div>
+									<div class="col-sm-7">
+										<input id="input-vertical" 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 for="scaledaysauto">{{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 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">
+										<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 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">
+										<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 for="input-scale">{{lang_scale}}</label>
+									</div>
+									<div class="col-sm-7">
+										<span><span class="range-display"></span>&thinsp;%</span>
+										<input id="input-scale" 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 for="input-switchtime">{{lang_switchTime}}</label>
+									</div>
+									<div class="col-sm-7">
+										<span><span class="range-display"></span>&thinsp;{{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">
+										<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_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 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>
+	<button type="submit" class="btn btn-primary">{{lang_save}}</button>
+	<a href="?do=locationinfo&amp;show=panels" class="btn btn-default">{{lang_cancel}}</a>
+</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>
+			</form>
+		</div>
+
+	</div>
+</div>
+
+<script type="text/javascript"><!--
+
+document.addEventListener("DOMContentLoaded", function () {
+	var $selLocs = $('#selected-locations');
+	var $locList = $('#location-list');
+	var $locInput = $('#locationids');
+
+	// 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
+	$('.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());
+	}
+
+	$('#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();
+
+	// Adding/removing locations
+	$locList.find('a').click(function(ev) {
+		ev.preventDefault();
+		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 class="btn btn-danger btn-xs" type="button">').append($('<span class="glyphicon glyphicon-remove">')).click(delParent);
+		$selLocs.append($('<li>').attr('data-lid', id).text(name).prepend(delButton));
+	}
+
+	function delParent() {
+		$(this).parent().remove();
+		serializeLocs();
+	}
+
+	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() {
+	var value = $('#mode').val();
+	$('.m' + value + '-h').hide();
+	$('.m' + value + '-s').show();
+}
+
+//--></script>
diff --git a/modules-available/locationinfo/templates/page-config-panel.html b/modules-available/locationinfo/templates/page-config-panel.html
deleted file mode 100644
index 244b80c9..00000000
--- a/modules-available/locationinfo/templates/page-config-panel.html
+++ /dev/null
@@ -1,349 +0,0 @@
-<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>&thinsp;%</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>&thinsp;{{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>
diff --git a/modules-available/locationinfo/templates/page-locations.html b/modules-available/locationinfo/templates/page-locations.html
index 27c2d9a2..3eafa7bf 100644
--- a/modules-available/locationinfo/templates/page-locations.html
+++ b/modules-available/locationinfo/templates/page-locations.html
@@ -1,17 +1,25 @@
-<h4>{{lang_buildingTable}}</h4>
-<table class="table table-condensed table-hover" style="margin-bottom:0">
+<h2>{{lang_locationsTable}}</h2>
 
+<p>{{lang_locationsTableHints}}</p>
+
+<table class="table table-condensed table-hover">
+	<thead>
 	<tr>
 		<th>{{lang_locationName}}</th>
-		<th>{{lang_openingTime}}</th>
-		<th>{{lang_locationSettings}}</th>
+		<th>{{lang_backend}}</th>
+		<th>{{lang_openingtimes}}</th>
 	</tr>
+	</thead>
 
+	<tbody>
 	{{#list}}
 		<tr>
 			<td>
 				<div style="display:inline-block;width:{{depth}}em"></div>
-				<a href="#" class="loc-name {{^depth}}slx-bold{{/depth}}" data-locationid="{{locationid}}">{{locationname}}</a>
+				<a href="#" class="loc-name {{^depth}}slx-bold{{/depth}}" data-locationid="{{locationid}}">
+					{{locationname}}
+					<span class="glyphicon glyphicon-edit"></span>
+				</a>
 			</td>
 			<td>
 				{{backend}}
@@ -20,8 +28,8 @@
 				<span class="glyphicon glyphicon-{{openingGlyph}}"></span>
 			</td>
 		</tr>
-
 	{{/list}}
+	</tbody>
 </table>
 
 <div class="modal fade" id="location-modal" tabindex="-1" role="dialog">
diff --git a/modules-available/locationinfo/templates/page-panels.html b/modules-available/locationinfo/templates/page-panels.html
new file mode 100644
index 00000000..e4894571
--- /dev/null
+++ b/modules-available/locationinfo/templates/page-panels.html
@@ -0,0 +1,57 @@
+<h2>{{lang_panelsTable}}</h2>
+
+<p>{{lang_panelsTableHints}}</p>
+
+<table class="table table-hover">
+	<thead>
+	<tr>
+		<th>{{lang_panel}}</th>
+		<th>{{lang_panelType}}</th>
+		<th>{{lang_locations}}</th>
+		<th width="1"></th>
+		<th width="1"></th>
+	</tr>
+	</thead>
+	<tbody>
+	<form method="post" action="?do=locationinfo" onsubmit="return confirm('{{lang_areYouSure}}')">
+		<input type="hidden" name="token" value="{{token}}">
+		<input type="hidden" name="action" value="deletePanel">
+		{{#panels}}
+			<tr>
+				<td>
+					{{panelname}}
+				</td>
+				<td>
+					{{paneltype}}
+				</td>
+				<td>
+					{{locations}}
+				</td>
+				<td>
+					<a class="btn btn-default btn-xs" href="?do=locationinfo&amp;show=edit-panel&amp;uuid={{paneluuid}}">
+						<span class="glyphicon glyphicon-cog"></span>
+						{{lang_edit}}
+					</a>
+				</td>
+				<td>
+					<button type="submit" name="uuid" value="{{paneluuid}}" class="btn btn-danger btn-xs">
+						<span class="glyphicon glyphicon-trash"></span>
+						{{lang_delete}}
+					</button>
+				</td>
+			</tr>
+		{{/panels}}
+	</form>
+	</tbody>
+</table>
+
+<div>
+	<a class="btn btn-sm btn-success" href="?do=locationinfo&amp;show=edit-panel&amp;uuid=new-default">
+		<span class="glyphicon glyphicon-plus"></span>
+		{{lang_defaultPanel}}
+	</a>
+	<a class="btn btn-sm btn-success" href="?do=locationinfo&amp;show=edit-panel&amp;uuid=new-summary">
+		<span class="glyphicon glyphicon-plus"></span>
+		{{lang_summaryPanel}}
+	</a>
+</div>
\ No newline at end of file
diff --git a/modules-available/locationinfo/templates/page-servers.html b/modules-available/locationinfo/templates/page-servers.html
index 2dfe63e1..eefb1ed5 100644
--- a/modules-available/locationinfo/templates/page-servers.html
+++ b/modules-available/locationinfo/templates/page-servers.html
@@ -1,69 +1,72 @@
-<div>
-	<h1>{{lang_mainHeader}}</h1>
-
-	<h4>{{lang_serverTable}}</h4>
-
-	<table class="table table-hover">
+<h2>{{lang_serverTable}}</h2>
+
+<p>{{lang_serverTableHints}}</p>
+
+<table class="table table-hover">
+	<thead>
+	<tr>
+		<th width="1">{{lang_serverType}}</th>
+		<th>{{lang_locationName}}</th>
+		<th width="1"></th>
+		<th width="1"></th>
+	</tr>
+	</thead>
+	<tbody>
+	{{#serverlist}}
+	<form method="post" action="?do=locationinfo">
+		<input type="hidden" name="token" value="{{token}}">
+		<input type="hidden" name="serverid" value="{{serverid}}">
 		<tr>
-			<th width="1">{{lang_serverType}}</th>
-			<th>{{lang_locationName}}</th>
-			<th width="1"></th>
-			<th width="1"></th>
+			<td nowrap>{{typename}}</td>
+			<td nowrap>{{servername}}</td>
+
+			<td align="center" nowrap>
+				<button class="btn btn-xs {{^autherror}}btn-default{{/autherror}}{{#autherror}}btn-danger{{/autherror}}"
+						data-server-edit="{{serverid}}" {{disabled}} type="button">
+					<span class="glyphicon glyphicon-cog"></span>
+					{{lang_edit}}
+				</button>
+				<button class="btn btn-xs btn-primary server-check" {{disabled}} name="action" value="checkConnection"
+						type="submit">
+					<span class="glyphicon glyphicon-refresh"></span>
+					{{lang_checkConnection}}
+				</button>
+			</td>
+			<td align="center" nowrap>
+				<button class="btn btn-xs btn-danger server-delete" type="submit" name="action" value="deleteServer">
+					<span class="glyphicon glyphicon-trash"></span>
+					{{lang_delete}}
+				</button>
+			</td>
 		</tr>
-		{{#serverlist}}
-		<form method="post" action="?do=locationinfo">
-			<input type="hidden" name="token" value="{{token}}">
-			<input type="hidden" name="serverid" value="{{serverid}}">
-			<tr>
-				<td nowrap>{{typename}}</td>
-				<td nowrap>{{servername}}</td>
-
-				<td align="center" nowrap>
-					<button class="btn btn-sm {{^autherror}}btn-success{{/autherror}}{{#autherror}}btn-danger{{/autherror}}"
-							data-server-edit="{{serverid}}" {{disabled}} type="button">
-						<span style="margin-right: 5px;" class="glyphicon glyphicon-cog"></span>
-						{{lang_locationSettings}}
-					</button>
-					<button class="btn btn-sm btn-primary server-check" {{disabled}} name="action" value="checkConnection"
-							type="submit">
-						<span style="margin-right: 5px;" class="glyphicon glyphicon-refresh"></span>
-						{{lang_checkConnection}}
-					</button>
-				</td>
-				<td align="center" nowrap>
-					<button class="btn btn-sm btn-danger server-delete" type="submit" name="action" value="deleteServer">
-						<span style="margin-right: 5px;" class="glyphicon glyphicon-remove"></span>
-						{{lang_delete}}
-					</button>
-				</td>
-			</tr>
-		</form>
-		{{/serverlist}}
-	</table>
-
-	<div>
-		<button class="btn btn-sm btn-success" id="addServerButton" onclick="addServer()">
-			<span style="margin-right: 5px;" class="glyphicon glyphicon-plus"></span>
-			{{lang_addServer}}
-		</button>
-	</div>
+	</form>
+	{{/serverlist}}
+	</tbody>
+</table>
+
+<div>
+	<button class="btn btn-sm btn-success" id="addServerButton" onclick="addServer()">
+		<span class="glyphicon glyphicon-plus"></span>
+		{{lang_addServer}}
+	</button>
+</div>
 
-	<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
-		<div class="modal-dialog">
+<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
+	<div class="modal-dialog">
 
-			<div class="modal-content">
-				<div class="modal-header" id="myModalHeader"></div>
-				<div class="modal-body" id="myModalBody"></div>
-				<div class="modal-footer">
-					<button type="submit" id="myModalSubmitButton" class="btn btn-primary" form="">{{lang_save}}</button>
+		<div class="modal-content">
+			<div class="modal-header" id="myModalHeader"></div>
+			<div class="modal-body" id="myModalBody"></div>
+			<div class="modal-footer">
+				<button type="submit" id="myModalSubmitButton" class="btn btn-primary" form="">{{lang_save}}</button>
 
-					<a class="btn btn-primary" data-dismiss="modal">{{lang_close}}</a>
-				</div>
+				<a class="btn btn-primary" data-dismiss="modal">{{lang_close}}</a>
 			</div>
-
 		</div>
+
 	</div>
 </div>
+
 <script type="text/javascript"><!--
 
 	document.addEventListener("DOMContentLoaded", function () {
diff --git a/modules-available/locationinfo/templates/page-tabs.html b/modules-available/locationinfo/templates/page-tabs.html
new file mode 100644
index 00000000..ed3f01fd
--- /dev/null
+++ b/modules-available/locationinfo/templates/page-tabs.html
@@ -0,0 +1,6 @@
+<ul class="nav nav-tabs">
+	<li class="{{class-}}"><a href="?do=locationinfo">{{lang_panels}}</a></li>
+	<li class="{{class-locations}}"><a href="?do=locationinfo&amp;show=locations">{{lang_locationSettings}}</a></li>
+	<li class="{{class-backends}}"><a href="?do=locationinfo&amp;show=backends">{{lang_backends}}</a></li>
+</ul>
+<br>
\ No newline at end of file