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

---
 .../locationinfo/templates/page-config-panel.html  | 349 +++++++++++++++++++++
 1 file changed, 349 insertions(+)
 create mode 100644 modules-available/locationinfo/templates/page-config-panel.html

(limited to 'modules-available/locationinfo/templates/page-config-panel.html')

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>
-- 
cgit v1.2.3-55-g7522