Admin-panel: Redesigned config. Added helpboxes.

3 files changed, 416 insertions, 147 deletions

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);
 		});
 	}