Admin-panel: Redesigned config. Added helpboxes.

6 files changed, 484 insertions, 182 deletions

diff --git a/modules-available/locationinfo/lang/de/template-tags.json b/modules-available/locationinfo/lang/de/template-tags.json
index 75a945ce..973509da 100644
--- a/modules-available/locationinfo/lang/de/template-tags.json
+++ b/modules-available/locationinfo/lang/de/template-tags.json
@@ -4,7 +4,7 @@
     "lang_locationID": "ID",
     "lang_locationIsHidden": "Versteckt",
     "lang_locationIsHidden_title": "Wenn aktiv, dann liefert die API keine Informationen über diesen Raum.",
-    "lang_locationInUse": "In Benutzung / Gesamt",
+    "lang_locationInUse": "Rechner",
     "lang_locationSettings": "Einstellungen",
     "lang_locationConfig": "Config",
     "lang_pcID": "ID",
@@ -28,37 +28,47 @@
     "lang_sunday": "Sonntag",
     "lang_expertMode": "Experten Modus",
     "lang_expertMode_title": "Ermöglicht es dir Öffnungzeiten für jeden Tag zu Setzen.",
+    "lang_nameTooltip": "Legt den Namen des Servers fest.",
+    "lang_urlTooltip": "Server URL über den das backend versucht Kalender-daten zu holen.",
+    "lang_typeTooltip": "Legt fest um welchen Typ von Server es sich handelt.",
     "lang_language": "Sprache",
-    "lang_languageEn": "en",
-    "lang_languageDe": "de",
-    "lang_languagePt": "pt",
+    "lang_languageEn": "Englisch",
+    "lang_languageDe": "Deutsch",
+    "lang_languagePt": "Portugiesisch",
+    "lang_languageTooltip": "Die Sprache, welche vom Frontend benutzt wird.",
     "lang_mode": "Modus",
     "lang_mode1": "Kalender & Raum",
     "lang_mode2": "Kalender",
     "lang_mode3": "Raum",
     "lang_mode4": "Wechselnd",
-    "lang_ecoMode": "Eco modus (e-ink)",
-    "lang_daysToShow": "Tage im Kalender",
-    "lang_daysToShowTooltip": "[1-7] Zeigt die gewünschte Anzahl an Tagen im Kalender an.",
-    "lang_scale": "Skalierung",
-    "lang_scaleTooltip": "[10-90] Skaliert die Kalender breite in modus 1",
+    "lang_modeTooltip": "Die Anzeigemodi, welche das frontend unterstützt.",
+    "lang_ecoMode": "E-Ink modus",
+    "lang_ecoTooltip": "Anstelle der Farb-basierten PC-Status Bilder, werden Symbol-basierte PC Bilder verwendet.",
+    "lang_daysToShow": "Tage",
+    "lang_daysToShowTooltip": "Legt die gewünschte Anzahl an Tagen im Kalender fest.",
+    "lang_scale": "Kalender breite",
+    "lang_scaleTooltip": "[10-90] Legt die Kalenderbreite fest. (In Prozent)",
     "lang_switchTime": "Wechsel Zeit",
-    "lang_switchTimeTooltip": "[1-120] Die Zeit die vergeht bis ein wechsel erfolgt in modus 4 (in sekunden)",
+    "lang_switchTimeTooltip": "[1-120] Legt die Zeit fest, die vergeht bis ein wechsel erfolgt (in sekunden)",
     "lang_rotation": "Rotation",
     "lang_rotation0": "0°",
     "lang_rotation1": "90° ⟲",
     "lang_rotation2": "180°",
     "lang_rotation3": "90° ⟳",
-    "lang_vertical": "Vertikal",
-    "lang_calupdate": "Kalenderabfragrate",
-    "lang_calupdateTooltip": "Zeit nachdem der Kalender geupdated wird (in minutes)",
-    "lang_roomupdate": "Raumabfragrate",
+    "lang_rotationTooltip": "Rotiert den Raum.",
+    "lang_vertical": "Vertikaler Modus",
+    "lang_verticalTooltip": "Legt fest, ob der Kalender und der Raum übereinander angezeigt werden soll.",
+    "lang_updateRates": "Anfragraten",
+    "lang_calendar": "Kalender",
+    "lang_calupdateTooltip": "Zeit nachdem der Kalender geupdated wird (in minuten)",
+    "lang_room": "Raum",
     "lang_roomupdateTooltip": "Zeit nachder die Pcs geupdated werden (in sekunden)",
-    "lang_configupdate": "Einstellungsabfragrate",
+    "lang_config": "Einstellungen",
     "lang_configupdateTooltip": "Zeit nachder die Einstellungen geupdated werden (in minuten)",
     "lang_min": "min",
     "lang_sec": "sec",
-    "lang_autoScale": "Auto skalierung",
+    "lang_autoScale": "Auto Tage",
+    "lang_autoscaleTooltip": "Berechnet sich die optimale anzahl an Tagen, anhand der Bildschirmbreite, die der Kalender anzeigt.",
     "lang_deleteConfirmation": "Bist du sicher?",
     "lang_addServer": "Server",
     "lang_addServer_title": "Server hinzufügen",
@@ -71,10 +81,14 @@
     "lang_serverID": "Server ID",
     "lang_sID": "sID",
     "lang_server": "Server",
-    "lang_serverRoomId": "Server: Raum ID",
+    "lang_serverTooltip": "Legt fest, von welchem Server die Kalender Daten bezogen werden.",
+    "lang_roomId": "Raum ID",
+    "lang_roomIdTooltip": "Die ID vom Raum, welche der Server braucht, um die Kalender Daten abzurufen.",
     "lang_credentials": "Anmeldung",
     "lang_refresh_title": "Überprüft ob die Serververbindung gültig ist.",
     "lang_delete": "Löschen",
     "lang_refresh": "Aktualisieren",
-    "lang_general": "Allgemein"
+    "lang_general": "Allgemein",
+    "lang_server": "Server",
+    "lang_display": "Anzeige"
 }
diff --git a/modules-available/locationinfo/lang/en/template-tags.json b/modules-available/locationinfo/lang/en/template-tags.json
index ec0bae12..b7de3131 100644
--- a/modules-available/locationinfo/lang/en/template-tags.json
+++ b/modules-available/locationinfo/lang/en/template-tags.json
@@ -5,7 +5,7 @@
     "lang_locationID": "ID",
     "lang_locationIsHidden": "Hidden",
     "lang_locationIsHidden_title": "If checked the API doesn't return information about the room.",
-    "lang_locationInUse": "In use / total",
+    "lang_locationInUse": "Clients",
     "lang_locationSettings": "Settings",
     "lang_locationConfig": "Config",
 
@@ -33,37 +33,47 @@
     "lang_expertMode": "Expert mode",
     "lang_expertMode_title": "Allows you to set openingtimes for every day.",
 
+    "lang_nameTooltip": "Defines the name of the server.",
+    "lang_urlTooltip": "Server URL on which the backend trys to get the calendar data from.",
+    "lang_typeTooltip": "Defines on which type of server you want to connect to.",
     "lang_language": "Language",
-    "lang_languageEn": "en",
-    "lang_languageDe": "de",
-    "lang_languagePt": "pt",
+    "lang_languageEn": "English",
+    "lang_languageDe": "German",
+    "lang_languagePt": "Portugues",
+    "lang_languageTooltip": "The language the frontend uses.",
     "lang_mode": "Mode",
     "lang_mode1": "Calendar & Room",
     "lang_mode2": "Calendar",
     "lang_mode3": "Room",
     "lang_mode4": "Switching",
-    "lang_ecoMode": "Eco mode (e-ink)",
-    "lang_daysToShow": "Days to show",
-    "lang_daysToShowTooltip": "[1-7] Sets how many days the calendar shows",
-    "lang_scale": "Scale",
-    "lang_scaleTooltip": "[10-90] scales the calendar width in mode 1",
+    "lang_modeTooltip": "The display modes the frontend supports.",
+    "lang_ecoMode": "E-Ink mode",
+    "lang_ecoTooltip": "Symbolic based pc state pictures are used instead of the colour base ones.",
+    "lang_daysToShow": "Days",
+    "lang_daysToShowTooltip": "Defines the amount of days to show in the calendar",
+    "lang_scale": "Calendar width",
+    "lang_scaleTooltip": "[10-90] Defines the calendar width. (in percent)",
     "lang_switchTime": "Switchtime",
-    "lang_switchTimeTooltip": "[1-120] Sets the time between switching in mode 4 (in seconds)",
+    "lang_switchTimeTooltip": "[1-120] Sets the time between switching (in seconds)",
     "lang_rotation": "Rotation",
     "lang_rotation0": "0°",
     "lang_rotation1": "90° ⟲",
     "lang_rotation2": "180°",
     "lang_rotation3": "90° ⟳",
-    "lang_vertical": "Vertical",
-    "lang_calupdate": "Calendar update rate",
+    "lang_rotationTooltip": "Rotates the room.",
+    "lang_vertical": "Vertical mode",
+    "lang_verticalTooltip": "Defines whether the room and calendar are shown above each other.",
+    "lang_updateRates": "Update rates",
+    "lang_calendar": "Calendar",
     "lang_calupdateTooltip": "Time the calender querys for updates (in minutes)",
-    "lang_roomupdate": "Room update rate",
+    "lang_room": "Room",
     "lang_roomupdateTooltip": "Time the PCs in the room gets updated (in seconds)",
-    "lang_configupdate": "Config update",
+    "lang_config": "Config",
     "lang_configupdateTooltip": "Time interval the config gets updated (in minutes)",
     "lang_min": "min",
     "lang_sec": "sec",
-    "lang_autoScale": "Auto scale",
+    "lang_autoScale": "Auto Days",
+    "lang_autoscaleTooltip": "Calculates the optimum amount of days to show from the display width.",
     "lang_deleteConfirmation": "Are you sure?",
     "lang_addServer": "Server",
     "lang_addServer_title": "Add server",
@@ -76,10 +86,15 @@
     "lang_serverID": "Server ID",
     "lang_sID": "sID",
     "lang_server": "Server",
-    "lang_serverRoomId": "Server: Room ID",
+    "lang_serverTooltip": "Defines from which server the room queries the calendar data.",
+    "lang_roomId": "Room ID",
+    "lang_roomIdTooltip": "The ID of the room the server needs, for querying the calendar data.",
     "lang_credentials": "Login",
     "lang_refresh_title": "Checks if the server connection is valid.",
     "lang_delete": "Delete",
     "lang_refresh": "Refresh",
-    "lang_general": "General"
+    "lang_general": "General",
+
+    "lang_server": "Server",
+    "lang_display": "Display"
 }
diff --git a/modules-available/locationinfo/page.inc.php b/modules-available/locationinfo/page.inc.php
index ec024f48..9b6df0b6 100644
--- a/modules-available/locationinfo/page.inc.php
+++ b/modules-available/locationinfo/page.inc.php
@@ -101,6 +101,10 @@ class Page_LocationInfo extends Page
 		$serverid = Request::post('serverid', 0, 'int');
 		$serverroomid = Request::post('serverroomid','', 'string');
 
+		error_log("eco: " . $result['eco']);
+		error_log("vertical: " . $result['vertical']);
+		error_log("scaledaysauto: " . $result['scaledaysauto']);
+
 		Database::exec("INSERT INTO `location_info` (locationid, serverid, serverroomid, config) VALUES (:id, :serverid, :serverroomid, :config)
 		 ON DUPLICATE KEY UPDATE config=:config, serverid=:serverid, serverroomid=:serverroomid",
 		 array('id' => $locationid, 'config' => json_encode($result, true), 'serverid' => $serverid, 'serverroomid' => $serverroomid));
diff --git a/modules-available/locationinfo/templates/config.html b/modules-available/locationinfo/templates/config.html
index 3168c6a2..1b42ff34 100644
--- a/modules-available/locationinfo/templates/config.html
+++ b/modules-available/locationinfo/templates/config.html
@@ -4,105 +4,269 @@
 		<input type="hidden" name="action" value="updateConfig">
 		<input type="hidden" name="id" value="{{id}}">
 
-
-		<div style="float: left;">
-			<Label>{{lang_server}}</Label><br>
-			<select name="serverid">
-				{{#serverlist}}
-				<option id="serverOption-{{sid}}" value="{{sid}}">{{sname}}</option>
-				{{/serverlist}}
-			</select>
-		</div>
-
-		<div style="float: left; margin-left: 15px;">
-			<Label>{{lang_serverRoomId}}</Label><br>
-			<input name="serverroomid" id="serverroomid" value="{{serverroomid}}"
-					 style="width: 250px; text-align: center;">
-		</div>
-
-
-		<br><br><br><br>
-
-		<div style="float: left;">
-			<Label>{{lang_language}}</Label><br>
-			<select name="language">
-				<option value="en" id="en">{{lang_languageEn}}</option>
-				<option value="de" id="de">{{lang_languageDe}}</option>
-				<option value="pt" id="pt">{{lang_languagePt}}</option>
-			</select>
-		</div>
-		<div style="float: left; margin-left: 15px;">
-			<Label>{{lang_mode}}</Label><br>
-			<select name="mode" onchange="vertical_cb(this.value);">
-				<option value="1" id="mode1">{{lang_mode1}}</option>
-				<option value="2" id="mode2">{{lang_mode2}}</option>
-				<option value="3" id="mode3">{{lang_mode3}}</option>
-				<option value="4" id="mode4">{{lang_mode4}}</option>
-			</select>
-		</div>
-		<div style="float: left; margin-left: 15px;">
-			<input name="vertical" id="cb_vertical" type="checkbox"/> {{lang_vertical}}<br>
-			<input name="eco" id="cb_eco" type="checkbox"/> {{lang_ecoMode}}<br>
-			<input name="autoscale" id="cb_autoScale" type="checkbox"/> {{lang_autoScale}}
-		</div>
-
-		<div style="float: left; margin-left: 15px;">
-			<Label data-toggle="tooltip" title="{{lang_daysToShowTooltip}}">{{lang_daysToShow}}</Label><br>
-			<select name="daystoshow">
-				<option value="1" id="day1">1</option>
-				<option value="2" id="day2">2</option>
-				<option value="3" id="day3">3</option>
-				<option value="4" id="day4">4</option>
-				<option value="5" id="day5">5</option>
-				<option value="6" id="day6">6</option>
-				<option value="7" id="day7">7</option>
-			</select>
-		</div>
-
-		<div style="float: left; margin-left: 15px;">
-			<Label>{{lang_rotation}}</Label><br>
-			<select name="rotation">
-				<option value="0" id="rotation0">{{lang_rotation0}}</option>
-				<option value="3" id="rotation3">{{lang_rotation3}}</option>
-				<option value="2" id="rotation2">{{lang_rotation2}}</option>
-				<option value="1" id="rotation1">{{lang_rotation1}}</option>
-			</select>
-		</div>
-
-		<br><br><br><br>
-
-		<Label data-toggle="tooltip" title="{{lang_scaleTooltip}}">{{lang_scale}}</Label><br>
-		<span id="scale">50 %</span><input name="scale" id="sl_scale" type="range" step="1" min="10" max="90" value="50"
-													  style="width: 300px;" oninput="showScaleValue(this.value)"/>
-
-		<br><br>
-
-		<Label data-toggle="tooltip" title="{{lang_switchTimeTooltip}}">{{lang_switchTime}}</Label><br>
-		<span id="switch">20 {{lang_sec}}</span><input name="switchtime" id="sl_switch" type="range" step="1" min="1"
-																	  max="120" value="20" style="width: 300px;"
-																	  oninput="showSwitchValue(this.value)"/>
-
-		<br><br>
-
-		<div>
-			<div style="float: left;">
-				<Label data-toggle="tooltip" title="{{lang_calupdateTooltip}}">{{lang_calupdate}}</Label><br>
-				<input id="updateCalendar" name="calupdate" type="number" style="width: 50px; text-align: center;" min="0"
-						 max="1440"/> {{lang_min}}
-			</div>
-			<div style="float: left; margin-left: 15px;">
-				<Label data-toggle="tooltip" title="{{lang_roomupdateTooltip}}">{{lang_roomupdate}}</Label><br>
-				<input id="updateRoom" name="roomupdate" type="number" style="width: 50px; text-align: center;" min="0"
-						 max="86400"/> {{lang_sec}}
-			</div>
-			<div style="float: left; margin-left: 15px;">
-				<Label data-toggle="tooltip" title="{{lang_configupdateTooltip}}">{{lang_configupdate}}</Label><br>
-				<input id="updateConfig" name="configupdate" type="number" style="width: 50px; text-align: center;" min="0"
-						 max="1440"/> {{lang_min}}
-			</div>
-		</div>
-
-		<br><br><br><br>
+		<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-md-3" >
+										<label>{{lang_server}}</label>
+									</div>
+									<div class="col-md-7">
+										<select class="form-control" name="serverid">
+											{{#serverlist}}
+											<option id="serverOption-{{sid}}" value="{{sid}}">{{sname}}</option>
+											{{/serverlist}}
+										</select>
+									</div>
+									<div class="col-md-2">
+										<a class="btn btn-default" id="help-server" title="{{lang_serverTooltip}}"><span class="glyphicon glyphicon-question-sign"></span></a>
+									</div>
+								</div>
+							</div>
+
+							<div class="list-group-item">
+								<div class="row">
+									<div class="col-md-3" >
+										<label>{{lang_roomId}}</label>
+									</div>
+									<div class="col-md-7">
+										<input class="form-control" name="serverroomid" id="serverroomid" value="{{serverroomid}}">
+									</div>
+									<div class="col-md-2">
+										<a class="btn btn-default" id="help-roomId" title="{{lang_roomIdTooltip}}"><span class="glyphicon glyphicon-question-sign"></span></a>
+									</div>
+								</div>
+							</div>
+
+						</div>
+					</div>
+				</div>
+
+				<div class="panel panel-default">
+					<div class="panel-heading">{{lang_display}}</div>
+					<div class="panel-body">
+						<div class="list-group">
+
+							<div class="list-group-item">
+								<div class="row">
+									<div class="col-md-3" >
+										<label>{{lang_language}}</label>
+									</div>
+									<div class="col-md-7">
+										<select class="form-control" name="language">
+											<option value="en" id="en">{{lang_languageEn}}</option>
+											<option value="de" id="de">{{lang_languageDe}}</option>
+											<option value="pt" id="pt">{{lang_languagePt}}</option>
+										</select>
+									</div>
+									<div class="col-md-2">
+										<a class="btn btn-default" id="help-language" title="{{lang_languageTooltip}}"><span class="glyphicon glyphicon-question-sign"></span></a>
+									</div>
+								</div>
+							</div>
+
+							<div class="list-group-item">
+								<div class="row">
+									<div class="col-md-3" >
+										<label>{{lang_mode}}</label>
+									</div>
+									<div class="col-md-7">
+										<select class="form-control" name="mode" onchange="modeChange(this.value);">
+											<option value="1" id="mode1">{{lang_mode1}}</option>
+											<option value="2" id="mode2">{{lang_mode2}}</option>
+											<option value="3" id="mode3">{{lang_mode3}}</option>
+											<option value="4" id="mode4">{{lang_mode4}}</option>
+										</select>
+									</div>
+									<div class="col-md-2">
+										<a class="btn btn-default" id="help-mode" title="{{lang_modeTooltip}}"><span class="glyphicon glyphicon-question-sign"></span></a>
+									</div>
+								</div>
+							</div>
+
+							<div class="list-group-item">
+								<div class="row">
+									<div class="col-md-3">
+										<label>{{lang_ecoMode}}</label>
+									</div>
+									<div class="col-md-7">
+										<input type="hidden" name="eco" value="{{eco}}" id="cb_input_eco"/>
+										<input class="bs-switch" id="cb_eco" type="checkbox"/>
+									</div>
+									<div class="col-md-2">
+										<a class="btn btn-default" id="help-eco" title="{{lang_ecoTooltip}}"><span class="glyphicon glyphicon-question-sign"></span></a>
+									</div>
+								</div>
+							</div>
+
+						</div>
+					</div>
+				</div>
+
+
+				<div class="panel panel-default" id="extra-div">
+					<div class="panel-heading">{{lang_mode}}</div>
+					<div class="panel-body">
+						<div class="list-group">
+
+							<div class="list-group-item" id="item-vertical">
+								<div class="row">
+									<div class="col-md-3" >
+										<label>{{lang_vertical}}</label>
+									</div>
+									<div class="col-md-7" >
+										<input type="hidden" name="vertical" value="{{vertical}}" id="cb_input_vertical"/>
+										<input class="bs-switch" id="cb_vertical" type="checkbox"/>
+									</div>
+									<div class="col-md-2">
+										<a class="btn btn-default" id="help-vertical" title="{{lang_verticalTooltip}}"><span class="glyphicon glyphicon-question-sign"></span></a>
+									</div>
+								</div>
+							</div>
+
+							<div class="list-group-item" id="item-autoscale">
+								<div class="row">
+									<div class="col-md-3" >
+										<label>{{lang_autoScale}}</label>
+									</div>
+									<div class="col-md-7" >
+										<input type="hidden" name="autoscale" value="{{scaledaysauto}}" id="cb_input_autoScale"/>
+										<input class="bs-switch" id="cb_autoScale" type="checkbox"/>
+									</div>
+									<div class="col-md-2">
+										<a class="btn btn-default" id="help-autoscale" title="{{lang_autoscaleTooltip}}"><span class="glyphicon glyphicon-question-sign"></span></a>
+									</div>
+								</div>
+							</div>
+
+							<div class="list-group-item" id="item-daystoshow">
+								<div class="row">
+									<div class="col-md-3" >
+										<label>{{lang_daysToShow}}</label>
+									</div>
+									<div class="col-md-7" >
+										<select class="form-control" name="daystoshow">
+											<option value="1" id="day1">1</option>
+											<option value="2" id="day2">2</option>
+											<option value="3" id="day3">3</option>
+											<option value="4" id="day4">4</option>
+											<option value="5" id="day5">5</option>
+											<option value="6" id="day6">6</option>
+											<option value="7" id="day7">7</option>
+										</select>
+									</div>
+									<div class="col-md-2">
+										<a class="btn btn-default" id="help-daystoshow" title="{{lang_daysToShowTooltip}}"><span class="glyphicon glyphicon-question-sign"></span></a>
+									</div>
+								</div>
+							</div>
+
+							<div class="list-group-item" id="item-rotation">
+								<div class="row">
+									<div class="col-md-3" >
+										<label>{{lang_rotation}}</label>
+									</div>
+									<div class="col-md-7">
+										<select class="form-control" name="rotation">
+											<option value="0" id="rotation0">{{lang_rotation0}}</option>
+											<option value="3" id="rotation3">{{lang_rotation3}}</option>
+											<option value="2" id="rotation2">{{lang_rotation2}}</option>
+											<option value="1" id="rotation1">{{lang_rotation1}}</option>
+										</select>
+									</div>
+									<div class="col-md-2">
+										<a class="btn btn-default" id="help-rotation" title="{{lang_rotationTooltip}}"><span class="glyphicon glyphicon-question-sign"></span></a>
+									</div>
+								</div>
+							</div>
+
+							<div class="list-group-item" id="item-scale">
+								<div class="row">
+									<div class="col-md-3" >
+										<label>{{lang_scale}}</label>
+									</div>
+									<div class="col-md-7" >
+										<span id="scale">50 %</span>
+										<input name="scale" id="sl_scale" type="range" step="1" min="10" max="90" value="50" oninput="showScaleValue(this.value)"/>
+									</div>
+									<div class="col-md-2">
+										<a class="btn btn-default" id="help-scale" title="{{lang_scaleTooltip}}"><span class="glyphicon glyphicon-question-sign"></span></a>
+									</div>
+								</div>
+							</div>
+
+							<div class="list-group-item" id="item-switchtime">
+								<div class="row">
+									<div class="col-md-3" >
+										<label>{{lang_switchTime}}</label>
+									</div>
+									<div class="col-md-7" >
+										<span id="switch">20 {{lang_sec}}</span>
+										<input name="switchtime" id="sl_switch" type="range" step="1" min="1" max="120" value="20" oninput="showSwitchValue(this.value)"/>
+									</div>
+									<div class="col-md-2">
+										<a class="btn btn-default" id="help-switchtime" title="{{lang_switchTimeTooltip}}"><span class="glyphicon glyphicon-question-sign"></span></a>
+									</div>
+								</div>
+							</div>
+
+						</div>
+					</div>
+				</div>
+
+				<div class="panel panel-default">
+					<div class="panel-heading">{{lang_updateRates}}</div>
+					<div class="panel-body">
+						<div class="list-group">
+
+							<div class="list-group-item">
+								<div class="row">
+									<div class="col-md-3" >
+										<label>{{lang_calendar}}</label>
+									</div>
+									<div class="col-md-7" >
+										<input class="form-control" id="updateCalendar" name="calupdate" type="number" min="0" max="1440"/>
+									</div>
+									<div class="col-md-2">
+										<a class="btn btn-default" id="help-updatecalendar" title="{{lang_calupdateTooltip}}"><span class="glyphicon glyphicon-question-sign"></span></a>
+									</div>
+								</div>
+							</div>
+
+							<div class="list-group-item">
+								<div class="row">
+									<div class="col-md-3" >
+										<label>{{lang_room}}</label>
+									</div>
+									<div class="col-md-7" >
+										<input class="form-control" id="updateRoom" name="roomupdate" type="number" min="0" max="86400"/>
+									</div>
+									<div class="col-md-2">
+										<a class="btn btn-default" id="help-updateroom" title="{{lang_roomupdateTooltip}}"><span class="glyphicon glyphicon-question-sign"></span></a>
+									</div>
+								</div>
+							</div>
+
+							<div class="list-group-item">
+								<div class="row">
+									<div class="col-md-3" >
+										<label>{{lang_config}}</label>
+									</div>
+									<div class="col-md-7" >
+										<input class="form-control" id="updateConfig" name="configupdate" type="number" min="0" max="1440"/>
+									</div>
+									<div class="col-md-2">
+										<a class="btn btn-default" id="help-updateconfig" title="{{lang_configupdateTooltip}}"><span class="glyphicon glyphicon-question-sign"></span></a>
+									</div>
+								</div>
+							</div>
+
+						</div>
+					</div>
+				</div>
 
 		<button type="submit" class="btn btn-primary">{{lang_save}}</button>
 
@@ -110,8 +274,30 @@
 </div>
 
 <script type="text/javascript">
+
+	var autoscale = '{{scaledaysauto}}';
+	initBootstrap();
 	loadValues();
 
+
+	function initBootstrap() {
+		// Init Bootstrap stuff.
+		$('#help-updateroom').tooltip();
+		$('#help-updateconfig').tooltip();
+		$('#help-updatecalendar').tooltip();
+		$('#help-daystoshow').tooltip();
+		$('#help-rotation').tooltip();
+		$('#help-server').tooltip();
+		$('#help-roomId').tooltip();
+		$('#help-language').tooltip();
+		$('#help-mode').tooltip();
+		$('#help-eco').tooltip();
+		$('#help-vertical').tooltip();
+		$('#help-autoscale').tooltip();
+		$('#help-scale').tooltip();
+		$('#help-switchtime').tooltip();
+	}
+
 	function loadValues() {
 		$("#{{language}}").attr("selected", "selected");
 
@@ -122,17 +308,44 @@
 			mode = $("#mode1");
 		}
 		mode.attr("selected", "selected");
-		vertical_cb(mode.val());
-		if ('{{vertical}}' == true) {
-			$("#cb_vertical").prop("checked", true);
-		}
-		if ('{{eco}}' == true) {
-			$("#cb_eco").prop("checked", true);
-		}
 
-		if ('{{scaledaysauto}}' == true) {
-			$("#cb_autoScale").prop("checked", true);
-		}
+		$('#cb_vertical').bootstrapSwitch({
+			state: '{{vertical}}',
+			size: 'small'
+		});
+		$('#cb_vertical').on('switchChange.bootstrapSwitch', function(e, value) {
+			if (value) {
+				$('#cb_input_vertical').val(1);
+			} else {
+				$('#cb_input_vertical').val(0);
+			}
+		});
+
+		$('#cb_eco').bootstrapSwitch({
+			state: '{{eco}}',
+			size: 'small'
+		});
+		$('#cb_eco').on('switchChange.bootstrapSwitch', function(e, value) {
+			if (value) {
+				$('#cb_input_eco').val(1);
+			} else {
+				$('#cb_input_eco').val(0);
+			}
+		});
+
+		$('#cb_autoScale').bootstrapSwitch({
+			state: '{{scaledaysauto}}',
+			size: 'small'
+		});
+
+		$('#cb_autoScale').on('switchChange.bootstrapSwitch', function(e, value) {
+			if (value) {
+				$('#cb_input_autoScale').val(1);
+			} else {
+				$('#cb_input_autoScale').val(0);
+			}
+			autoScaleChange(value);
+		});
 
 		var day = $("#{{daystoshow}}");
 		if (!day.length) {
@@ -177,6 +390,8 @@
 			configupdate = 180;
 		}
 		$("#updateConfig").attr("value", configupdate);
+
+		modeChange(mode.val());
 	}
 
 	function showScaleValue(newValue) {
@@ -187,13 +402,40 @@
 		$("#switch").text(newValue + " " + '{{lang_sec}}');
 	}
 
-	function vertical_cb(value) {
-		var cb = $("#cb_vertical");
-		if (value == 1) {
-			cb.prop("disabled", false);
+	function modeChange(value) {
+		$('#item-vertical').hide();
+		$('#item-autoscale').hide();
+		$('#item-daystoshow').hide();
+		$('#item-rotation').hide();
+		$('#item-scale').hide();
+		$('#item-switchtime').hide();
+
+		autoScaleChange(autoscale);
+
+		if (value == "1") {
+			$('#item-vertical').show();
+			$('#item-autoscale').show();
+			$('#item-rotation').show();
+			$('#item-scale').show();
+		} else if (value == "2"){
+			$('#item-autoscale').show();
+		} else if (value == "3"){
+			$('#item-rotation').show();
+			$('#item-daystoshow').hide();
+		} else if (value == "4"){
+			$('#item-autoscale').show();
+			$('#item-rotation').show();
+			$('#item-switchtime').show();
+		}
+	}
+
+	function autoScaleChange(value) {
+		autoscale = value;
+		if (value) {
+			$('#item-daystoshow').hide();
 		} else {
-			cb.prop("disabled", true);
-			cb.prop("checked", false);
+			$('#item-daystoshow').show();
 		}
 	}
+
 </script>
diff --git a/modules-available/locationinfo/templates/location-info.html b/modules-available/locationinfo/templates/location-info.html
index d494ebdc..86d30260 100644
--- a/modules-available/locationinfo/templates/location-info.html
+++ b/modules-available/locationinfo/templates/location-info.html
@@ -95,11 +95,11 @@
 			}
 			cb.addEventListener("click", function() { cbClick(this, {{locationid}}); });
 			</script>
-			<td onclick="event.cancelBubble = true;"><a class="btn btn-sm btn-default" role="button"
-																	  onclick="loadTimeModal({{locationid}}, '{{locationname}}');"><span style="margin-right: 5px;" class="glyphicon glyphicon-time"></span>{{lang_openingTime}}</a>
+			<td onclick="event.cancelBubble = true;"><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 onclick="event.cancelBubble = true;"><a class="btn btn-sm btn-default" role="button"
-																	  onclick="loadConfigModal({{locationid}}, '{{locationname}}');"><span style="margin-right: 5px;" class="glyphicon glyphicon-cog"></span>{{lang_locationSettings}}</a>
+			<td onclick="event.cancelBubble = true;"><a class="btn btn-sm btn-default" role="button" style="width: 100%;"
+																	  onclick="loadConfigModal({{locationid}}, '{{locationname}}');"><span style="margin-right: 5px;" class="glyphicon glyphicon-cog"></span></a>
 			</td>
 		</tr>
 
diff --git a/modules-available/locationinfo/templates/server-settings.html b/modules-available/locationinfo/templates/server-settings.html
index b42f4c15..f885c0c1 100644
--- a/modules-available/locationinfo/templates/server-settings.html
+++ b/modules-available/locationinfo/templates/server-settings.html
@@ -15,9 +15,12 @@
 							<div class="col-md-3" >
 								<label>{{lang_locationName}}</label>
 							</div>
-							<div class="col-md-8">
+							<div class="col-md-7">
 								<input required class="form-control" id="input-name-{{id}}" name="name" type="text" value="{{name}}"></input>
 							</div>
+							<div class="col-md-2">
+								<a class="btn btn-default" id="help-name" title="{{lang_nameTooltip}}"><span class="glyphicon glyphicon-question-sign"></span></a>
+							</div>
 						</div>
 					</div>
 
@@ -26,9 +29,12 @@
 							<div class="col-md-3">
 								<label>{{lang_serverUrl}}</label>
 							</div>
-							<div class="col-md-8">
+							<div class="col-md-7">
 								<input required class="form-control" id="input-url-{{id}}" name="url" type="text" value="{{url}}" ></input>
 							</div>
+							<div class="col-md-2">
+								<a class="btn btn-default" id="help-url" title="{{lang_urlTooltip}}"><span class="glyphicon glyphicon-question-sign"></span></a>
+							</div>
 						</div>
 					</div>
 
@@ -37,14 +43,15 @@
 							<div class="col-md-3">
 								<label>{{lang_serverType}}</label>
 							</div>
-							<div class="col-md-8">
-
-							<select class="form-control" id="input-type-{{id}}" name="type" value="{{typ}}" onchange="servertype_changed(this.value);">
+							<div class="col-md-7">
+								<select class="form-control" id="input-type-{{id}}" name="type" value="{{typ}}" onchange="servertype_changed(this.value);">
 									{{#backendList}}
-									<option id="{{typ}}" value="{{typ}}" {{#active}}selected{{/active}}>{{display}}
+										<option id="{{typ}}" value="{{typ}}" {{#active}}selected{{/active}}>{{display}}
 									{{/backendList}}
-							</select>
-
+								</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>
@@ -71,8 +78,17 @@
 	if (type == "") {
 		type = $('#input-type-{{id}}').val();
 	}
+
 	loadCredentials();
-	function loadCredentials() {
+	initalizeBootstrap();
+
+	function initalizeBootstrap() {
+		$('#help-name').tooltip();
+		$('#help-url').tooltip();
+		$('#help-type').tooltip();
+	}
+
+	function loadCredentials(useValue = true) {
 		// {{name}} name of auth {{type}} type of auth (string, int etc.) {{value}} value from the db
 		{{#backendList}}
 		if (type == "{{typ}}") {
@@ -81,33 +97,44 @@
 
 			if ("{{type}}" == "string") {
 				$("#credentials-list").append('<div class="list-group-item"><div class="row">\
-				<div class="col-md-3"><label title="{{title}}">{{name}}</label></div>\
-				<div class="col-md-8">\
-				<input required class="form-control" {{#mask}}type="password"{{/mask}}{{^mask}}type="text"{{/mask}} name="{{uid}}" value="{{value}}" form="settingsForm">\
-				</div></div></div>');
+				<div class="col-md-3"><label>{{name}}</label></div>\
+				<div class="col-md-7">\
+				<input required class="form-control" id="input-{{uid}}" {{#mask}}type="password"{{/mask}}{{^mask}}type="text"{{/mask}} name="{{uid}}" value="{{value}}" form="settingsForm"></div>\
+				<div class="col-md-2"><a class="btn btn-default" id="help-{{uid}}" title="{{title}}"><span class="glyphicon glyphicon-question-sign"></span></a></div>\
+				</div></div>');
 			} else if ("{{type}}" == "int") {
 				$("#credentials-list").append('<div class="list-group-item"><div class="row">\
-				<div class="col-md-3"><label title="{{title}}">{{name}}</label></div>\
-				<div class="col-md-8">\
-				<input required class="form-control" {{#mask}}type="password" pattern="[0-9]*"{{/mask}}{{^mask}}type="number"{{/mask}} name="{{uid}}" value="{{value}}" form="settingsForm">\
-				</div></div></div>');
+				<div class="col-md-3"><label>{{name}}</label></div>\
+				<div class="col-md-7">\
+				<input required class="form-control" id="input-{{uid}}" {{#mask}}type="password" pattern="[0-9]*"{{/mask}}{{^mask}}type="number"{{/mask}} name="{{uid}}" value="{{value}}" form="settingsForm"></div>\
+				<div class="col-md-2"><a class="btn btn-default" id="help-{{uid}}" title="{{title}}"><span class="glyphicon glyphicon-question-sign"></span></a></div>\
+				</div></div>');
 			} else if ("{{type}}" == "bool") {
 				$("#credentials-list").append('<div class="list-group-item"><div class="row">\
-				<div class="col-md-3"><label title="{{title}}">{{name}}</label></div>\
-				<div class="col-md-8">\
-				<input class="bs-switch" id="bs-{{uid}}" type="checkbox" name="{{uid}}" value="true" form="settingsForm" {{#value}}checked{{/value}}>\
-				</div></div></div>');
-				$('#bs-{{uid}}').bootstrapSwitch();
+				<div class="col-md-3"><label>{{name}}</label></div>\
+				<div class="col-md-7">\
+				<input class="bs-switch" id="input-{{uid}}" type="checkbox" name="{{uid}}" value="true" form="settingsForm" {{#value}}checked{{/value}}></div>\
+				<div class="col-md-2"><a class="btn btn-default" id="help-{{uid}}" title="{{title}}"><span class="glyphicon glyphicon-question-sign"></span></a></div>\
+				</div></div>');
+				$('#bs-{{uid}}').bootstrapSwitch({
+					size: "small"
+				});
 			} else if ("{{type}}" == "array") {
 				$("#credentials-list").append('<div class="list-group-item"><div class="row">\
-				<div class="col-md-3"><label title="{{title}}">{{name}}</label></div>\
-				<div class="col-md-8">\
-				<select class="form-control" name="{{uid}}" form="settingsForm">\
+				<div class="col-md-3"><label>{{name}}</label></div>\
+				<div class="col-md-7">\
+				<select class="form-control" id="input-{{uid}}" name="{{uid}}" form="settingsForm">\
 				{{#array}}\
 				<option value="{{option}}" {{#active}}selected{{/active}}>{{option}}</option>\
 				{{/array}}\
-				</select>\
-				</div></div></div>');
+				</select></div>\
+				<div class="col-md-2"><a class="btn btn-default" id="help-{{uid}}" title="{{title}}"><span class="glyphicon glyphicon-question-sign"></span></a></div>\
+				</div></div>');
+			}
+
+			$('#help-{{uid}}').tooltip();
+			if (!useValue) {
+				$('#input-{{uid}}').val("");
 			}
 			{{/credentials}}
 			{{^credentials}}
@@ -122,7 +149,7 @@
 		type = value;
 		$('#credentials-div').fadeOut('fast', function() {
 			$('#credentials-list').empty();
-			loadCredentials();
+			loadCredentials(false);
 		});
 	}