From a0b42aa257d0a6c56cd4a099aa0a2cea4a8dc2c9 Mon Sep 17 00:00:00 2001
From: Simon Rettberg
Date: Sat, 10 Jun 2017 16:15:22 +0200
Subject: [locationinfo] Started rewrite for panel-based approach

---
 .../templates/ajax-config-location.html            | 178 ++++++++++
 .../locationinfo/templates/ajax-config-server.html |  99 ++++++
 .../locationinfo/templates/config.html             | 395 ---------------------
 .../locationinfo/templates/location-info.html      | 219 ------------
 .../locationinfo/templates/page-config-panel.html  | 349 ++++++++++++++++++
 .../locationinfo/templates/page-locations.html     |  98 +++++
 .../locationinfo/templates/page-servers.html       | 113 ++++++
 .../locationinfo/templates/server-settings.html    |  99 ------
 .../locationinfo/templates/timetable.html          | 216 -----------
 9 files changed, 837 insertions(+), 929 deletions(-)
 create mode 100644 modules-available/locationinfo/templates/ajax-config-location.html
 create mode 100644 modules-available/locationinfo/templates/ajax-config-server.html
 delete mode 100644 modules-available/locationinfo/templates/config.html
 delete mode 100644 modules-available/locationinfo/templates/location-info.html
 create mode 100644 modules-available/locationinfo/templates/page-config-panel.html
 create mode 100644 modules-available/locationinfo/templates/page-locations.html
 create mode 100644 modules-available/locationinfo/templates/page-servers.html
 delete mode 100644 modules-available/locationinfo/templates/server-settings.html
 delete mode 100644 modules-available/locationinfo/templates/timetable.html

(limited to 'modules-available/locationinfo/templates')

diff --git a/modules-available/locationinfo/templates/ajax-config-location.html b/modules-available/locationinfo/templates/ajax-config-location.html
new file mode 100644
index 00000000..2cbad89d
--- /dev/null
+++ b/modules-available/locationinfo/templates/ajax-config-location.html
@@ -0,0 +1,178 @@
+<input type="hidden" name="locationid" value="{{id}}">
+<div id="settings-outer">
+	<h3>{{lang_openingTime}}</h3>
+	{{^expertMode}}
+	<div id="simple-mode">
+
+		<div align="right">
+			<a href="#" class="btn btn-default btn-sm" id="btn-show-expert">{{lang_expertMode}}</a>
+		</div>
+		<div class="clearfix"></div>
+
+		<table class="table table-condensed" style="margin-bottom:0">
+			<tr>
+				<th>{{lang_day}}</th>
+				<th>{{lang_openingTime}}</th>
+				<th>{{lang_closingTime}}</th>
+			</tr>
+
+			<tr class="tablerow">
+				<td>{{lang_monTilFr}}</td>
+				<td>
+					<div class="input-group bootstrap-timepicker">
+						<span class="input-group-addon">
+							<span class="glyphicon glyphicon-time"></span>
+						</span>
+						<input type="text" class="form-control timepicker2" id="week-open" pattern="[0-9]{1,2}:[0-9]{2}">
+					</div>
+				</td>
+				<td>
+					<div class="input-group bootstrap-timepicker">
+						<span class="input-group-addon">
+							<span class="glyphicon glyphicon-time"></span>
+						</span>
+						<input type="text" class="form-control timepicker2" id="week-close" pattern="[0-9]{1,2}:[0-9]{2}">
+					</div>
+				</td>
+			</tr>
+			<tr class="tablerow">
+				<td>{{lang_saturday}}</td>
+				<td>
+					<div class="input-group bootstrap-timepicker">
+						<span class="input-group-addon">
+							<span class="glyphicon glyphicon-time"></span>
+						</span>
+						<input type="text" class="form-control timepicker2" id="saturday-open" pattern="[0-9]{1,2}:[0-9]{2}">
+					</div>
+				</td>
+				<td>
+					<div class="input-group bootstrap-timepicker">
+						<span class="input-group-addon">
+							<span class="glyphicon glyphicon-time"></span>
+						</span>
+						<input type="text" class="form-control timepicker2" id="saturday-close" pattern="[0-9]{1,2}:[0-9]{2}">
+					</div>
+				</td>
+			</tr>
+			<tr class="tablerow">
+				<td>{{lang_sunday}}</td>
+				<td>
+					<div class="input-group bootstrap-timepicker">
+						<span class="input-group-addon">
+							<span class="glyphicon glyphicon-time"></span>
+						</span>
+						<input type="text" class="form-control timepicker2" id="sunday-open" pattern="[0-9]{1,2}:[0-9]{2}">
+					</div>
+				</td>
+				<td>
+					<div class="input-group bootstrap-timepicker">
+						<span class="input-group-addon">
+							<span class="glyphicon glyphicon-time"></span>
+						</span>
+						<input type="text" class="form-control timepicker2" id="sunday-close" pattern="[0-9]{1,2}:[0-9]{2}">
+					</div>
+				</td>
+			</tr>
+		</table>
+	</div>
+	{{/expertMode}}
+
+	<div id="expert-mode" style="{{^expertMode}}display:none{{/expertMode}}">
+		<div class="pull-right">
+			<a class="btn btn-success btn-sm" id="new-openingtime">
+				<span class="glyphicon glyphicon-plus-sign"></span>
+				{{lang_openingTime}}
+			</a>
+		</div>
+		<div class="clearfix"></div>
+		<div id="expert-table">
+			<div class="row">
+				<div class="col-xs-9">{{lang_day}}</div>
+				<div class="col-xs-3 text-right">{{lang_delete}}</div>
+				<div class="col-sm-6">{{lang_openingTime}}</div>
+				<div class="col-sm-6">{{lang_closingTime}}</div>
+			</div>
+		</div>
+	</div>
+</div>
+
+<h3>{{lang_remoteSchedule}}</h3>
+<div class="row">
+	<div class="col-sm-3">
+		{{lang_server}}
+	</div>
+	<div class="col-sm-7">
+		<select class="form-control" name="serverid">
+			<option value="0">{{lang_noServer}}</option>
+			{{#serverlist}}
+				<option value="{{serverid}}" {{selected}}>{{servername}}</option>
+			{{/serverlist}}
+		</select>
+	</div>
+	<div class="col-sm-2">
+		<a class="btn btn-default helptext" title="{{lang_serverTooltip}}">
+			<span class="glyphicon glyphicon-question-sign"></span>
+		</a>
+	</div>
+</div>
+<div class="row">
+	<div class="col-sm-3">
+		{{lang_roomId}}
+	</div>
+	<div class="col-sm-7">
+		<input class="form-control" name="serverlocationid" id="serverlocationid" value="{{serverlocationid}}">
+	</div>
+	<div class="col-sm-2">
+		<a class="btn btn-default helptext" title="{{lang_roomIdTooltip}}">
+			<span class="glyphicon glyphicon-question-sign"></span>
+		</a>
+	</div>
+</div>
+
+<script type="application/javascript"><!--
+	(function() {
+
+		var scheduleData = {{{schedule_data}}};
+
+		{{#expertMode}}
+			for (var i = 0; i < scheduleData.length; ++i) {
+				newOpeningTime(scheduleData[i]);
+			}
+		{{/expertMode}}
+		{{^expertMode}}
+			for (var i = 0; i < scheduleData.length; ++i) {
+				if (scheduleData[i].days.length === 5) {
+					$('#week-open').val(scheduleData[i]['openingtime']);
+					$('#week-close').val(scheduleData[i]['closingtime']);
+				} else if (scheduleData[i].days.length === 1 && scheduleData[i].days[0] === 'Saturday') {
+					$('#saturday-open').val(scheduleData[i]['openingtime']);
+					$('#saturday-close').val(scheduleData[i]['closingtime']);
+				} else if (scheduleData[i].days.length === 1 && scheduleData[i].days[0] === 'Sunday') {
+					$('#sunday-open').val(scheduleData[i]['openingtime']);
+					$('#sunday-close').val(scheduleData[i]['closingtime']);
+				}
+			}
+		{{/expertMode}}
+
+		setTimepicker($('#settings-outer').find('.timepicker2'));
+
+		$('a.helptext').tooltip();
+
+		$('#new-openingtime').click(function (e) {
+			e.preventDefault();
+			setTimepicker(newOpeningTime({}).find('.timepicker2'));
+		})
+
+		$('#btn-show-expert').click(function (e) {
+			e.preventDefault();
+			scheduleData = simpleToExpert();
+			for (var i = 0; i < scheduleData.length; ++i) {
+				setTimepicker(newOpeningTime(scheduleData[i]).find('.timepicker2'));
+			}
+			$('#simple-mode').remove();
+			$('#expert-mode').show();
+		});
+
+	})();
+
+//--></script>
diff --git a/modules-available/locationinfo/templates/ajax-config-server.html b/modules-available/locationinfo/templates/ajax-config-server.html
new file mode 100644
index 00000000..940bc55a
--- /dev/null
+++ b/modules-available/locationinfo/templates/ajax-config-server.html
@@ -0,0 +1,99 @@
+<div class="panel panel-default">
+	<div class="panel-heading">{{lang_general}}</div>
+	<div class="panel-body">
+		<div class="list-group">
+			<div class="list-group-item">
+				<div class="row">
+					<div class="col-md-3">
+						<label>{{lang_entryName}}</label>
+					</div>
+					<div class="col-md-7">
+						<input required class="form-control" name="name" type="text" value="{{name}}" id="name-input"
+								 form="form-{{currentbackend}}">
+					</div>
+					<div class="col-md-2">
+						<a class="btn btn-default" title="{{lang_nameTooltip}}">
+							<span class="glyphicon glyphicon-question-sign"></span>
+						</a>
+					</div>
+				</div>
+			</div>
+			<div class="list-group-item">
+				<div class="row">
+					<div class="col-md-3">
+						<label>{{lang_serverType}}</label>
+					</div>
+					<div class="col-md-7">
+						<select class="form-control" onchange="servertype_changed(this.value)">
+							{{#defaultBlank}}
+								<option value="" selected>{{lang_pleaseSelect}}</option>
+							{{/defaultBlank}}
+							{{#backendList}}
+								<option value="{{backendtype}}" {{#active}}selected{{/active}}>{{display}}</option>
+							{{/backendList}}
+						</select>
+					</div>
+					<div class="col-md-2">
+						<a class="btn btn-default" id="help-type" title="{{lang_typeTooltip}}">
+							<span class="glyphicon glyphicon-question-sign"></span>
+						</a>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+
+{{#backendList}}
+<div id="formwrapper-{{backendtype}}" {{^active}}class="collapse"{{/active}}>
+	<form method="post" action="?do=locationinfo" id="form-{{backendtype}}">
+		<input type="hidden" name="token" value="{{token}}">
+		<input type="hidden" name="action" value="updateServerSettings">
+		<input type="hidden" name="id" value="{{id}}">
+		<input type="hidden" name="type" value="{{backendtype}}">
+		<input type="text" name="prevent_autofill" id="prevent_autofill" value="" style="position:absolute;top:-2000px" tabindex="-1">
+		<input type="password" name="password_fake" id="password_fake" value=""   style="position:absolute;top:-2000px" tabindex="-1">
+
+
+		<div class="panel panel-default">
+			<div class="panel-heading">{{lang_credentials}}</div>
+			<div class="panel-body">
+				<div class="list-group">
+					{{#credentials}}
+					{{{credentialsHtml}}}
+					{{/credentials}}
+				</div>
+			</div>
+		</div>
+	</form>
+</div>
+{{/backendList}}
+<script type="text/javascript">
+	var currentBackend = "{{currentbackend}}";
+
+	/**
+	 * Show proper form after switching backend type
+	 *
+	 * @param {string} value The new currentBackend of the server which credentials needs to be loaded.
+	 */
+	function servertype_changed(value) {
+		if (value === currentBackend)
+			return;
+		var newBackend = value;
+		var fadeIn = function() {
+			$('#formwrapper-' + newBackend).fadeIn('fast');
+			$('#myModalSubmitButton, #name-input').attr('form', 'form-' + newBackend);
+		};
+		if (currentBackend) {
+			$('#formwrapper-' + currentBackend).fadeOut('fast', fadeIn);
+		} else {
+			fadeIn();
+		}
+		currentBackend = value;
+	}
+
+	$('a.btn[title]').tooltip();
+	$('#myModalSubmitButton').attr('form', 'form-' + currentBackend);
+	$('.settings-bs-switch').bootstrapSwitch({size:'small'});
+
+</script>
diff --git a/modules-available/locationinfo/templates/config.html b/modules-available/locationinfo/templates/config.html
deleted file mode 100644
index cce63de1..00000000
--- a/modules-available/locationinfo/templates/config.html
+++ /dev/null
@@ -1,395 +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="panel panel-default">
-				<div class="panel-heading">{{lang_server}}</div>
-				<div class="panel-body">
-					<div class="list-group">
-						<div class="list-group-item">
-							<div class="row">
-								<div class="col-sm-3">
-									<label>{{lang_server}}</label>
-								</div>
-								<div class="col-sm-7">
-									<select class="form-control" name="serverid">
-										<option value="0">{{lang_noServer}}</option>
-										{{#serverlist}}
-											<option value="{{serverid}}" {{selected}}>{{servername}}</option>
-										{{/serverlist}}
-									</select>
-								</div>
-								<div class="col-sm-2">
-									<a class="btn btn-default helptext" title="{{lang_serverTooltip}}">
-										<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_roomId}}</label>
-								</div>
-								<div class="col-sm-7">
-									<input class="form-control" name="serverlocationid" id="serverlocationid" value="{{serverlocationid}}">
-								</div>
-								<div class="col-sm-2">
-									<a class="btn btn-default helptext" title="{{lang_roomIdTooltip}}">
-										<span class="glyphicon glyphicon-question-sign"></span>
-									</a>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-
-		<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/location-info.html b/modules-available/locationinfo/templates/location-info.html
deleted file mode 100644
index e2ee2960..00000000
--- a/modules-available/locationinfo/templates/location-info.html
+++ /dev/null
@@ -1,219 +0,0 @@
-<div>
-	<h1>{{lang_mainHeader}}</h1>
-
-	<h4>{{lang_serverTable}}</h4>
-
-	<table class="table table-hover">
-		<tr>
-			<th width="1">{{lang_serverType}}</th>
-			<th>{{lang_locationName}}</th>
-			<th width="1"></th>
-			<th width="1"></th>
-		</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>
-
-	<h4>{{lang_buildingTable}}</h4>
-	<table class="table table-condensed table-hover" style="margin-bottom:0">
-
-		<tr>
-			<th>{{lang_locationName}}</th>
-			<th width="50" title="{{lang_locationIsHidden_title}}">{{lang_locationIsHidden}}</th>
-			<th width="50">{{lang_openingTime}}</th>
-			<th width="50">{{lang_locationSettings}}</th>
-		</tr>
-
-		{{#list}}
-		<tr id="row{{locationid}}">
-			<td>
-				<div style="display:inline-block;width:{{depth}}em"></div>
-				<a href="modules/locationinfo/frontend/doorsign.html?id={{locationid}}" target="_blank">{{locationname}}</a>
-			</td>
-			<td align="center">
-				<div class="checkbox" style="margin:0">
-					<input class="hidden-toggle" type="checkbox" data-locationid="{{locationid}}" {{hidden_checked}}>
-					<label></label>
-				</div>
-			</td>
-			<td>
-				<a class="btn btn-sm btn-default" role="button" style="width: 100%"
-					onclick="loadTimeModal({{locationid}}, '{{locationname}}');">
-					<span style="margin-right: 5px;" class="glyphicon glyphicon-time"></span>
-				</a>
-			</td>
-			<td>
-				<a class="btn btn-sm btn-default" role="button" style="width: 100%;"
-					onclick="loadLocationConfigModal({{locationid}}, '{{locationname}}');">
-					<span style="margin-right: 5px;" class="glyphicon glyphicon-cog"></span>
-				</a>
-			</td>
-		</tr>
-
-		{{/list}}
-	</table>
-
-	<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>
-
-					<a class="btn btn-primary" data-dismiss="modal">{{lang_close}}</a>
-				</div>
-			</div>
-
-		</div>
-	</div>
-</div>
-<script type="text/javascript"><!--
-
-	document.addEventListener("DOMContentLoaded", function () {
-
-		/**
-		 * React to click on a "hidden" checkbox.
-		 */
-		$('.hidden-toggle').change(function() {
-			$input = $(this);
-			$.ajax({
-				type: 'POST',
-				url: '?do=locationinfo&action=hide',
-				data: {locationid: $input.data('locationid'), hidden: $input[0].checked ? 1 : 0, token: TOKEN },
-				dataType: 'json'
-			}).done(function(data) {
-				if (data && $.isArray(data.changed)) {
-					markBoxes(data.changed);
-				} else {
-					$input.replaceWith('ERROR');
-				}
-			}).fail(function () {
-				$input.replaceWith('ERROR');
-			});
-		}).parent().click(function() {
-			$this = $(this);
-			$box = $this.find('input');
-			if (!$this.is($box)) {
-				$box.click();
-			}
-		});
-
-		/**
-		 * Confirm deleting a server.
-		 */
-		$('.server-delete').click(function(ev) {
-			var del = confirm("{{lang_deleteConfirmation}}");
-			if (!del) ev.preventDefault();
-		});
-
-		/**
-		 * Animate refresh icon while page is loading
-		 */
-		$('.server-check').click(function() {
-			$(this).find('.glyphicon').addClass('slx-rotation');
-		});
-
-		$('button[data-server-edit]').click(function() {
-			var id = $(this).data('server-edit');
-			loadServerSettingsModal(id);
-		});
-
-	});
-
-	/**
-	 * Gets a status array delivered by backend's ajaxHideLocation()
-	 * and sets the checkbox states accordingly.
-	 */
-	function markBoxes(boxArray) {
-		for (var i = 0; i < boxArray.length; ++i) {
-			if (boxArray[i].locationid) {
-				var lid = parseInt(boxArray[i].locationid);
-				$('input.hidden-toggle[data-locationid="' + lid + '"]').prop('checked', !!boxArray[i].hidden);
-			}
-		}
-	}
-
-	/**
-	 * Loads the settings modal of a server.
-	 *
-	 * @param serverid The id of the server.
-	 */
-	function loadServerSettingsModal(serverid) {
-		$('#myModalHeader').text("{{lang_locationSettings}}").css("font-weight", "Bold");
-		$('#myModal .modal-dialog').css('width', '');
-		$('#myModal').modal('show');
-		$('#myModalBody').load("?do=locationinfo&action=serverSettings&id=" + serverid);
-	}
-
-	/**
-	 * Load a opening time modal of a location.
-	 *
-	 * @param locationId The id of the location.
-	 * @param locationName The name of the location.
-	 */
-	function loadTimeModal(locationId, locationName) {
-		$('#myModalHeader').text("[" + locationId + "] " + locationName).css("font-weight", "Bold");
-		$('#myModal .modal-dialog').css('width', '');
-		$('#myModal').modal('show');
-		$('#myModalBody').load("?do=locationinfo&action=timetable&id=" + locationId);
-	}
-
-	/**
-	 * Loads the config modal of a location.
-	 *
-	 * @param locationId The id of the location
-	 * @param locationName the name of the location
-	 */
-	function loadLocationConfigModal(locationId, locationName) {
-		$('#myModalHeader').text("[" + locationId + "] " + locationName).css("font-weight", "Bold");
-		$('#myModalSubmitButton').attr("form", "configForm");
-		$('#myModal .modal-dialog').css('width', '90%');
-		$('#myModal').modal('show');
-		$('#myModalBody').load("?do=locationinfo&action=config&id=" + locationId);
-	}
-
-	// ########### Server Table ###########
-
-	/**
-	 * Loads a new / empty server settings modal.
-	 */
-	function addServer() {
-		loadServerSettingsModal(0);
-	}
-//--></script>
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>&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
new file mode 100644
index 00000000..436aa8d5
--- /dev/null
+++ b/modules-available/locationinfo/templates/page-locations.html
@@ -0,0 +1,98 @@
+<h4>{{lang_buildingTable}}</h4>
+<table class="table table-condensed table-hover" style="margin-bottom:0">
+
+	<tr>
+		<th>{{lang_locationName}}</th>
+		<th width="50">{{lang_openingTime}}</th>
+		<th width="50">{{lang_locationSettings}}</th>
+	</tr>
+
+	{{#list}}
+		<tr>
+			<td>
+				<div style="display:inline-block;width:{{depth}}em"></div>
+				<a href="#" class="loc-name" data-locationid="{{locationid}}">{{locationname}}</a>
+			</td>
+			<td>
+				<a class="btn btn-sm btn-default" role="button" style="width: 100%"
+					onclick="loadTimeModal({{locationid}}, '{{locationname}}');">
+					<span style="margin-right: 5px;" class="glyphicon glyphicon-time"></span>
+				</a>
+			</td>
+			<td>
+				<a class="btn btn-sm btn-default" role="button" style="width: 100%;"
+					onclick="loadLocationConfigModal({{locationid}}, '{{locationname}}');">
+					<span style="margin-right: 5px;" class="glyphicon glyphicon-cog"></span>
+				</a>
+			</td>
+		</tr>
+
+	{{/list}}
+</table>
+
+<div class="modal fade" id="location-modal" tabindex="-1" role="dialog">
+	<div class="modal-dialog"> <!--style="min-width:600px;width:70%"-->
+
+		<div class="modal-content">
+			<form method="post" action="?do=locationinfo" id="settings-form">
+				<input type="hidden" name="token" value="{{token}}">
+				<input type="hidden" name="action" value="writeLocationConfig">
+				<input type="hidden" name="openingtimes" id="json-openingtimes" value="">
+				<div class="modal-header"><h2 id="location-modal-header"></h2></div>
+				<div class="modal-body"></div>
+				<div class="modal-footer">
+					<button type="submit" class="btn btn-primary">{{lang_save}}</button>
+					<a class="btn btn-primary" data-dismiss="modal">{{lang_close}}</a>
+				</div>
+			</form>
+		</div>
+
+	</div>
+</div>
+
+<div class="hidden" id="expert-template">
+	<div class="row expert-row" style="margin-top:1em;border-top:1px solid #ddd">
+		<div class="col-xs-9 days-box">
+			<label><input type="checkbox" class="i-Monday">{{lang_shortMonday}}</label> |
+			<label><input type="checkbox" class="i-Tuesday">{{lang_shortTuesday}}</label> |
+			<label><input type="checkbox" class="i-Wednesday">{{lang_shortWednesday}}</label> |
+			<label><input type="checkbox" class="i-Thursday">{{lang_shortThursday}}</label> |
+			<label><input type="checkbox" class="i-Friday">{{lang_shortFriday}}</label> |
+			<label><input type="checkbox" class="i-Saturday">{{lang_shortSaturday}}</label> |
+			<label><input type="checkbox" class="i-Sunday">{{lang_shortSunday}}</label>
+		</div>
+		<div class="col-xs-3 text-right">
+			<label><input type="checkbox" class="i-delete"><span class="glyphicon glyphicon-trash"></span></label>
+		</div>
+		<div class="col-sm-6">
+			<div class="input-group bootstrap-timepicker">
+				<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
+				<input type="text" class="form-control timepicker2 i-openingtime" pattern="[0-9]{1,2}:[0-9]{2}">
+			</div>
+		</div>
+		<div class="col-sm-6">
+			<div class="input-group bootstrap-timepicker">
+				<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
+				<input type="text" class="form-control timepicker2 i-closingtime" pattern="[0-9]{1,2}:[0-9]{2}">
+			</div>
+		</div>
+	</div>
+</div>
+
+<script type="text/javascript"><!--
+
+document.addEventListener("DOMContentLoaded", function () {
+	/**
+	 * Load a opening time modal of a location.
+	 */
+	$('.loc-name').click(function (e) {
+		e.preventDefault();
+		var locationId = $(this).data('locationid');
+		var locationName = $(this).text();
+		$('#location-modal-header').text("[" + locationId + "] " + locationName);
+		$('#location-modal').modal('show').find('.modal-body').load("?do=locationinfo&action=config-location&id=" + locationId);
+	});
+	$('#settings-form').submit(submitLocationSettings);
+});
+
+//--></script>
\ No newline at end of file
diff --git a/modules-available/locationinfo/templates/page-servers.html b/modules-available/locationinfo/templates/page-servers.html
new file mode 100644
index 00000000..2dfe63e1
--- /dev/null
+++ b/modules-available/locationinfo/templates/page-servers.html
@@ -0,0 +1,113 @@
+<div>
+	<h1>{{lang_mainHeader}}</h1>
+
+	<h4>{{lang_serverTable}}</h4>
+
+	<table class="table table-hover">
+		<tr>
+			<th width="1">{{lang_serverType}}</th>
+			<th>{{lang_locationName}}</th>
+			<th width="1"></th>
+			<th width="1"></th>
+		</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>
+
+	<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>
+
+					<a class="btn btn-primary" data-dismiss="modal">{{lang_close}}</a>
+				</div>
+			</div>
+
+		</div>
+	</div>
+</div>
+<script type="text/javascript"><!--
+
+	document.addEventListener("DOMContentLoaded", function () {
+
+		/**
+		 * Confirm deleting a server.
+		 */
+		$('.server-delete').click(function(ev) {
+			var del = confirm("{{lang_deleteConfirmation}}");
+			if (!del) ev.preventDefault();
+		});
+
+		/**
+		 * Animate refresh icon while page is loading
+		 */
+		$('.server-check').click(function() {
+			$(this).find('.glyphicon').addClass('slx-rotation');
+		});
+
+		$('button[data-server-edit]').click(function() {
+			var id = $(this).data('server-edit');
+			loadServerSettingsModal(id);
+		});
+
+	});
+
+	/**
+	 * Loads the settings modal of a server.
+	 *
+	 * @param serverid The id of the server.
+	 */
+	function loadServerSettingsModal(serverid) {
+		$('#myModalHeader').text("{{lang_locationSettings}}").css("font-weight", "Bold");
+		$('#myModal .modal-dialog').css('width', '');
+		$('#myModal').modal('show');
+		$('#myModalBody').load("?do=locationinfo&action=serverSettings&id=" + serverid);
+	}
+
+	// ########### Server Table ###########
+
+	/**
+	 * Loads a new / empty server settings modal.
+	 */
+	function addServer() {
+		loadServerSettingsModal(0);
+	}
+//--></script>
diff --git a/modules-available/locationinfo/templates/server-settings.html b/modules-available/locationinfo/templates/server-settings.html
deleted file mode 100644
index 940bc55a..00000000
--- a/modules-available/locationinfo/templates/server-settings.html
+++ /dev/null
@@ -1,99 +0,0 @@
-<div class="panel panel-default">
-	<div class="panel-heading">{{lang_general}}</div>
-	<div class="panel-body">
-		<div class="list-group">
-			<div class="list-group-item">
-				<div class="row">
-					<div class="col-md-3">
-						<label>{{lang_entryName}}</label>
-					</div>
-					<div class="col-md-7">
-						<input required class="form-control" name="name" type="text" value="{{name}}" id="name-input"
-								 form="form-{{currentbackend}}">
-					</div>
-					<div class="col-md-2">
-						<a class="btn btn-default" title="{{lang_nameTooltip}}">
-							<span class="glyphicon glyphicon-question-sign"></span>
-						</a>
-					</div>
-				</div>
-			</div>
-			<div class="list-group-item">
-				<div class="row">
-					<div class="col-md-3">
-						<label>{{lang_serverType}}</label>
-					</div>
-					<div class="col-md-7">
-						<select class="form-control" onchange="servertype_changed(this.value)">
-							{{#defaultBlank}}
-								<option value="" selected>{{lang_pleaseSelect}}</option>
-							{{/defaultBlank}}
-							{{#backendList}}
-								<option value="{{backendtype}}" {{#active}}selected{{/active}}>{{display}}</option>
-							{{/backendList}}
-						</select>
-					</div>
-					<div class="col-md-2">
-						<a class="btn btn-default" id="help-type" title="{{lang_typeTooltip}}">
-							<span class="glyphicon glyphicon-question-sign"></span>
-						</a>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-</div>
-
-{{#backendList}}
-<div id="formwrapper-{{backendtype}}" {{^active}}class="collapse"{{/active}}>
-	<form method="post" action="?do=locationinfo" id="form-{{backendtype}}">
-		<input type="hidden" name="token" value="{{token}}">
-		<input type="hidden" name="action" value="updateServerSettings">
-		<input type="hidden" name="id" value="{{id}}">
-		<input type="hidden" name="type" value="{{backendtype}}">
-		<input type="text" name="prevent_autofill" id="prevent_autofill" value="" style="position:absolute;top:-2000px" tabindex="-1">
-		<input type="password" name="password_fake" id="password_fake" value=""   style="position:absolute;top:-2000px" tabindex="-1">
-
-
-		<div class="panel panel-default">
-			<div class="panel-heading">{{lang_credentials}}</div>
-			<div class="panel-body">
-				<div class="list-group">
-					{{#credentials}}
-					{{{credentialsHtml}}}
-					{{/credentials}}
-				</div>
-			</div>
-		</div>
-	</form>
-</div>
-{{/backendList}}
-<script type="text/javascript">
-	var currentBackend = "{{currentbackend}}";
-
-	/**
-	 * Show proper form after switching backend type
-	 *
-	 * @param {string} value The new currentBackend of the server which credentials needs to be loaded.
-	 */
-	function servertype_changed(value) {
-		if (value === currentBackend)
-			return;
-		var newBackend = value;
-		var fadeIn = function() {
-			$('#formwrapper-' + newBackend).fadeIn('fast');
-			$('#myModalSubmitButton, #name-input').attr('form', 'form-' + newBackend);
-		};
-		if (currentBackend) {
-			$('#formwrapper-' + currentBackend).fadeOut('fast', fadeIn);
-		} else {
-			fadeIn();
-		}
-		currentBackend = value;
-	}
-
-	$('a.btn[title]').tooltip();
-	$('#myModalSubmitButton').attr('form', 'form-' + currentBackend);
-	$('.settings-bs-switch').bootstrapSwitch({size:'small'});
-
-</script>
diff --git a/modules-available/locationinfo/templates/timetable.html b/modules-available/locationinfo/templates/timetable.html
deleted file mode 100644
index 91a80877..00000000
--- a/modules-available/locationinfo/templates/timetable.html
+++ /dev/null
@@ -1,216 +0,0 @@
-<div>
-	<div align="right">
-		<label for="CB_1">{{lang_expertMode}}</label>
-		<input class="bs-switch" name="1" id="CB_1" type="checkbox" {{#expertMode}}checked{{/expertMode}}>
-	</div>
-	<br>
-
-	<div id="easyMode" style="{{#expertMode}}display: none;{{/expertMode}}">
-		<form method="post" action="?do=locationinfo" id="timeFormEasy">
-			<input type="hidden" name="token" value="{{token}}">
-			<input type="hidden" name="action" value="updateOpeningTimeEasy">
-			<input type="hidden" name="id" value="{{id}}">
-			<input type="hidden" name="easyMode" value="{{easyMode}}">
-
-			<table class="table table-condensed locations" style="margin-bottom:0">
-				<tr>
-					<th>{{lang_day}}</th>
-					<th>{{lang_openingTime}}</th>
-					<th>{{lang_closingTime}}</th>
-				</tr>
-
-				<tr class="tablerow">
-					<td>{{lang_monTilFr}}</td>
-					<td>
-						<div class="input-group bootstrap-timepicker">
-							<span class="input-group-addon">
-								<span class="glyphicon glyphicon-time"></span>
-							</span>
-							<input type="text" class="form-control timepicker2" name="openingtime[]" id="openingtimepicker"
-									 pattern="[0-9]{1,2}:[0-9]{2}" value="{{openingtime0}}">
-						</div>
-					</td>
-					<td>
-						<div class="input-group bootstrap-timepicker">
-							<span class="input-group-addon">
-								<span class="glyphicon glyphicon-time"></span>
-							</span>
-							<input type="text" class="form-control timepicker2" name="closingtime[]" id="openingtimepicker"
-									 pattern="[0-9]{1,2}:[0-9]{2}" value="{{closingtime0}}">
-						</div>
-					</td>
-				</tr>
-				<tr class="tablerow">
-					<td>{{lang_saturday}}</td>
-					<td>
-						<div class="input-group bootstrap-timepicker">
-							<span class="input-group-addon">
-								<span class="glyphicon glyphicon-time"></span>
-							</span>
-							<input type="text" class="form-control timepicker2" name="openingtime[]" id="openingtimepicker"
-									 pattern="[0-9]{1,2}:[0-9]{2}" value="{{openingtime1}}">
-						</div>
-					</td>
-					<td>
-						<div class="input-group bootstrap-timepicker">
-							<span class="input-group-addon">
-								<span class="glyphicon glyphicon-time"></span>
-							</span>
-							<input type="text" class="form-control timepicker2" name="closingtime[]" id="openingtimepicker"
-									 pattern="[0-9]{1,2}:[0-9]{2}" value="{{closingtime1}}">
-						</div>
-					</td>
-				</tr>
-				<tr class="tablerow">
-					<td>{{lang_sunday}}</td>
-					<td>
-						<div class="input-group bootstrap-timepicker">
-							<span class="input-group-addon">
-								<span class="glyphicon glyphicon-time"></span>
-							</span>
-							<input type="text" class="form-control timepicker2" name="openingtime[]" id="openingtimepicker"
-									 pattern="[0-9]{1,2}:[0-9]{2}" value="{{openingtime2}}">
-						</div>
-					</td>
-					<td>
-						<div class="input-group bootstrap-timepicker">
-							<span class="input-group-addon">
-								<span class="glyphicon glyphicon-time"></span>
-							</span>
-							<input type="text" class="form-control timepicker2" name="closingtime[]" id="openingtimepicker"
-									 pattern="[0-9]{1,2}:[0-9]{2}" value="{{closingtime2}}">
-						</div>
-					</td>
-				</tr>
-			</table>
-		</form>
-	</div>
-
-	<div id="expertMode" style="{{#easyMode}}display: none;{{/easyMode}}">
-		<form method="post" action="?do=locationinfo" id="timeFormExpert">
-			<input type="hidden" name="token" value="{{token}}">
-			<input type="hidden" name="action" value="updateOpeningTimeExpert">
-			<input type="hidden" name="id" value="{{id}}">
-			<input type="hidden" name="easyMode" value="{{easyMode}}">
-
-
-			<table class="table table-condensed locations" style="margin-bottom:0">
-				<tr>
-					<th>{{lang_day}}</th>
-					<th>{{lang_openingTime}}</th>
-					<th>{{lang_closingTime}}</th>
-					<th>{{lang_delete}}</th>
-				</tr>
-
-				{{#openingtimes}}
-				<tr class=tablerow>
-					<td>{{days}}</td>
-					<td>{{openingtime}}</td>
-					<td>{{closingtime}}</td>
-					<td align="center"><input type="checkbox" name="delete[]" value="{{index}}"></td>
-				</tr>
-				{{/openingtimes}}
-
-				<tr id="lastOpenTimesTableElement"></tr>
-			</table>
-
-			<br>
-			<a class="btn btn-success btn-sm" onclick=newOpeningTime()>
-				<span class="glyphicon glyphicon-plus-sign"></span>
-				{{lang_openingTime}}
-			</a>
-		</form>
-	</div>
-</div>
-
-<script>
-	setTimepicker();
-	$('#CB_1').bootstrapSwitch();
-	$('#CB_1').on('switchChange.bootstrapSwitch', function (e, data) {
-
-		if (data == false) {
-			$('#expertMode').hide();
-			$('#easyMode').show();
-			$('#myModalSubmitButton').attr("Form", "timeFormEasy");
-		} else {
-			$('#easyMode').hide();
-			$('#expertMode').show();
-			$('#myModalSubmitButton').attr("Form", "timeFormExpert");
-		}
-	});
-
-	if ('{{easyMode}}' == true) {
-		$('#myModalSubmitButton').attr("Form", "timeFormEasy");
-	} else if ('{{expertMode}}' == true) {
-		$('#myModalSubmitButton').attr("Form", "timeFormExpert");
-	}
-
-	/**
-	 * Sets the timepicker element.
-	 */
-	function setTimepicker() {
-		$('.timepicker2').timepicker({
-			minuteStep: 1,
-			template: 'modal',
-			appendWidgetTo: 'body',
-			showSeconds: false,
-			showMeridian: false,
-			defaultTime: false
-		});
-	}
-
-	/**
-	 * Adds a new opening time to the table in expert mode.
-	 */
-	function newOpeningTime() {
-		$('#lastOpenTimesTableElement').before('<tr>\
-      <td>\
-      <div class="form-group options">\
-        <label><input required type="checkbox" name="days[]" value="Monday">{{lang_shortMonday}}</label>\
-        <label><input required type="checkbox" name="days[]" value="Tuesday">{{lang_shortTuesday}}</label>\
-        <label><input required type="checkbox" name="days[]" value="Wednesday">{{lang_shortWednesday}}</label>\
-        <label><input required type="checkbox" name="days[]" value="Thursday">{{lang_shortThursday}}</label>\
-        <label><input required type="checkbox" name="days[]" value="Friday">{{lang_shortFriday}}</label>\
-        <label><input required type="checkbox" name="days[]" value="Saturday">{{lang_shortSaturday}}</label>\
-        <label><input required type="checkbox" name="days[]" value="Sunday">{{lang_shortSunday}}</label>\
-      </div>\
-        <input type="hidden" name="days[]" value="-">\
-        </td>\
-        <td>\
-        <div class="input-group bootstrap-timepicker">\
-        		<span class="input-group-addon">\
-        			<span class="glyphicon glyphicon-time"></span>\
-        		</span>\
-        	<input required type="text" class="form-control timepicker2" name="openingtime[]" id="openingtimepicker" pattern="[0-9]{1,2}:[0-9]{2}" value="8:00">\
-        </div>\
-        \
-        </td>\
-        <td>\
-        \
-        <div class="input-group bootstrap-timepicker">\
-        		<span class="input-group-addon">\
-        			<span class="glyphicon glyphicon-time"></span>\
-        		</span>\
-        	<input required type="text" class="form-control timepicker2" name="closingtime[]" id="closingtimepicker" pattern="[0-9]{1,2}:[0-9]{2}" value="18:00">\
-        </div>\
-        \
-        </td>\
-        <td align="center">\
-          <input type="checkbox" name="dontadd[]" value="dontadd"\
-          </td>\
-          </tr>');
-		setTimepicker();
-
-		$(function () {
-			var requiredCheckboxes = $('.options :checkbox[required]');
-			requiredCheckboxes.change(function () {
-				if (requiredCheckboxes.is(':checked')) {
-					requiredCheckboxes.removeAttr('required');
-				} else {
-					requiredCheckboxes.attr('required', 'required');
-				}
-			});
-		});
-	}
-
-</script>
-- 
cgit v1.2.3-55-g7522