path: root/modules-available/locationinfo/templates/config.html

<div>
	<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="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">
											<option id="serverOption-{{sid}}" value="0">{{lang_noServer}}</option>
											{{#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" id="language" onchange="modifyCustomUrl('&amp;language=', this.value);">
											<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" id="mode" onchange="modeChange(this.value);modifyCustomUrl('&amp;mode=', 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" id="daystoshow" name="daystoshow" onchange="modifyCustomUrl('&amp;daystoshow=', this.value);">
											<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" id="rotation" name="rotation" onchange="modifyCustomUrl('&amp;rotation=', this.value);">
											<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)" onchange="modifyCustomUrl('&amp;scale=', 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)" onchange="modifyCustomUrl('&amp;switchtime=', 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" onchange="modifyCustomUrl('&amp;calupdate=', this.value);"/>
									</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" onchange="modifyCustomUrl('&amp;roomupdate=', this.value);"/>
									</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" onchange="modifyCustomUrl('&amp;configupdate=', this.value);"/>
									</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>

				<div class="panel panel-default">
					<div class="panel-heading">{{lang_customUrl}}</div>
					<div class="panel-body">
						<div class="list-group">

							<div class="list-group-item">
								<div class="row">
									<div class="col-md-3" >
										<label>{{lang_serverUrl}}</label>
									</div>
									<div class="col-md-7" >
										<input readonly class="form-control" id="custom-url" type="text"/>
									</div>
									<div class="col-md-2">
										<a class="btn btn-default" id="help-customURL" title="{{lang_customUrlTooltip}}"><span class="glyphicon glyphicon-question-sign"></span></a>
									</div>
								</div>
							</div>

						</div>
					</div>
				</div>
	</form>
</div>

<script type="text/javascript">

	var customURL = "http://" + window.location.hostname + "/slx-admin/modules-available/locationinfo/frontend/doorsign.html?id={{id}}";
	$('#custom-url').val(customURL);
	var autoscale = '{{scaledaysauto}}';
	initBootstrap();
	loadValues();
	initCustomUrl();

	/**
	 * Initialize the url preview.
	 */
	function initCustomUrl() {
		$('#daystoshow').change();
		$('#rotation').change();
		$('#sl_scale').change();
		$('#sl_switch').change();
		$('#updateCalendar').change();
		$('#updateRoom').change();
		$('#updateConfig').change();
		$('#language').change();
		$('#mode').change();
	}

	/**
	 * Modifies the url preview.
	 */
	function modifyCustomUrl(parameter, value) {
		if (!value) {
			var reExp = new RegExp(parameter +"[0-9a-zA-Z]*");
			customURL = customURL.replace(reExp, "");
		} else if (customURL.search(parameter) > 0) {
			var reExp = new RegExp(parameter +"[0-9a-zA-Z]*");
			customURL = customURL.replace(reExp, parameter + value);
		} else {
			customURL += parameter + value;
		}

		$('#custom-url').val(customURL);

		console.log(customURL);
	}

	/**
	 * Initialize the bootstrap elements.
	 */
	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();
		$('#help-customURL').tooltip();
	}

	/**
	 * Converts an int value to bool. 1 = true else false
	 */
	function intToBool(int) {
		if (int == 1) {
			return true;
		} else {
			return false;
		}
	}

	/**
	 * Loads the Values in the config form elements.
	 */
	function loadValues() {
		$("#{{language}}").attr("selected", "selected");

		$('#serverOption-{{serverid}}').attr("selected", "selected");

		var mode = $("#{{mode}}");
		if (!mode.length) {
			mode = $("#mode1");
		}
		mode.attr("selected", "selected");

		$('#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);
			}
			modifyCustomUrl("&vertical=", value);
		});

		modifyCustomUrl("&vertical=", intToBool({{vertical}}));

		$('#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);
			}
			modifyCustomUrl("&eco=", value);
		});
		modifyCustomUrl("&eco=", intToBool({{eco}}));

		$('#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);
			modifyCustomUrl("&scaledaysauto=", value);
		});
		modifyCustomUrl("&scaledaysauto=", intToBool({{scaledaysauto}}));

		var day = $("#{{daystoshow}}");
		if (!day.length) {
			day = $("#day7");
		}
		day.attr("selected", "selected");

		var rotation = $("#{{rotation}}");
		if (!rotation.length) {
			rotation = $("#rotation0");
		}
		rotation.attr("selected", "selected");

		var scaleVal = '{{scale}}';
		if (scaleVal == '') {
			scaleVal = 50;
		}
		$('#sl_scale').attr('value', '{{scale}}');
		showScaleValue(scaleVal);

		var switchVal = '{{switchtime}}';
		if (switchVal == '') {
			switchVal = 20;
		}
		$("#sl_switch").attr('value', switchVal);
		showSwitchValue(switchVal);

		var calupdate = '{{calupdate}}';
		if (!calupdate.length) {
			calupdate = 30;
		}
		$("#updateCalendar").attr("value", calupdate);

		var roomupdate = '{{roomupdate}}';
		if (!roomupdate.length) {
			roomupdate = 30;
		}
		$("#updateRoom").attr("value", roomupdate);

		var configupdate = '{{configupdate}}';
		if (!configupdate.length) {
			configupdate = 180;
		}
		$("#updateConfig").attr("value", configupdate);

		modeChange(mode.val());
	}

	/**
	 * Updates the value from the scale slider.
	 *
	 * @param newValue The new value the scale slider was set to.
	 */
	function showScaleValue(newValue) {
		$("#scale").text(newValue + " %");
	}

	/**
	 * Updates the value from the switchtime slider.
	 *
	 * @param newValue The new value the switchtime slider was set to.
	 */
	function showSwitchValue(newValue) {
		$("#switch").text(newValue + " " + '{{lang_sec}}');
	}

	/**
	 * If the mode was changed the mode settings have to be adjusted.
	 *
	 * @param value The new mode that was set. 1-4
	 */
	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();
		}
	}

	/**
	 * If the auto scale changes the days to show must be shown / hided
	 *
	 * @param value The new value of the autoscale switch.
	 */
	function autoScaleChange(value) {
		autoscale = value;
		if (value) {
			$('#item-daystoshow').hide();
		} else {
			$('#item-daystoshow').show();
		}
	}

</script>