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

<h2>
	{{#new}}{{lang_createPanel}}{{/new}}
	{{^new}}{{lang_editPanel}}{{/new}}
</h2>

<p>{{lang_editDefaultPanelHints}}</p>

<form method="post" action="?do=locationinfo" id="config-form">
	<input type="hidden" name="token" value="{{token}}">
	<input type="hidden" name="action" value="writePanelConfig">
	<input type="hidden" name="ptype" value="DEFAULT">
	<input type="hidden" name="uuid" value="{{uuid}}">

	<div class="row">

	</div>

	<div class="modify-inputs">
		<div class="row">
			<div class="col-md-6">
				<div class="panel panel-default">
					<div class="panel-heading">{{lang_generalSettings}}</div>
					<div class="panel-body">
						<div class="list-group">

							<div class="list-group-item">
								<div class="row">
									<div class="col-sm-3">
										<label for="panel-title">{{lang_displayName}}</label>
									</div>
									<div class="col-sm-7">
										<input class="form-control" name="name" id="panel-title" type="text" value="{{panelname}}">
									</div>
									<div class="col-sm-2">
										<p class="btn btn-static helptext" title="{{lang_displayNameTooltip}}">
											<span class="glyphicon glyphicon-question-sign"></span>
										</p>
									</div>
								</div>
							</div>

							<div class="list-group-item">
								<div class="row">
									<div class="col-sm-3">
										<label for="language">{{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">
										<p class="btn btn-static helptext" title="{{lang_languageTooltip}}">
											<span class="glyphicon glyphicon-question-sign"></span>
										</p>
									</div>
								</div>
							</div>

							<div class="list-group-item">
								<div class="row">
									<div class="col-sm-3">
										<label for="input-eco">{{lang_ecoMode}}</label>
									</div>
									<div class="col-sm-7">
										<input id="input-eco" type="checkbox" name="eco" {{eco_checked}}>
									</div>
									<div class="col-sm-2">
										<p class="btn btn-static helptext" title="{{lang_ecoTooltip}}">
											<span class="glyphicon glyphicon-question-sign"></span>
										</p>
									</div>
								</div>
							</div>

							<div class="list-group-item">
								<div class="row">
									<div class="col-sm-3">
										<label for="input-prettytime">{{lang_prettytime}}</label>
									</div>
									<div class="col-sm-7">
										<input id="input-prettytime" type="checkbox" name="prettytime" {{prettytime_checked}}>
									</div>
									<div class="col-sm-2">
										<p class="btn btn-static helptext" title="{{lang_prettytimeTooltip}}">
											<span class="glyphicon glyphicon-question-sign"></span>
										</p>
									</div>
								</div>
							</div>

							<div class="list-group-item">
								<div class="row">
									<div class="col-sm-3">
										<label for="input-calupdate">{{lang_calendarUpdate}}</label>
									</div>
									<div class="col-sm-7">
										<input class="form-control" name="calupdate" type="number" min="30" id="input-calupdate"
												 max="1440" value="{{calupdate}}" required>
									</div>
									<div class="col-sm-2">
										<p class="btn btn-static helptext" title="{{lang_calupdateTooltip}}">
											<span class="glyphicon glyphicon-question-sign"></span>
										</p>
									</div>
								</div>
							</div>

							<div class="list-group-item">
								<div class="row">
									<div class="col-sm-3">
										<label for="form-roomupdate">{{lang_roomUpdate}}</label>
									</div>
									<div class="col-sm-7">
										<input class="form-control" name="roomupdate" type="number" min="15" id="form-roomupdate"
												 max="86400" value="{{roomupdate}}" required>
									</div>
									<div class="col-sm-2">
										<p class="btn btn-static helptext" title="{{lang_roomupdateTooltip}}">
											<span class="glyphicon glyphicon-question-sign"></span>
										</p>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<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">
								<div class="row">
									<div class="col-sm-3">
										<label for="mode">{{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">
										<p class="btn btn-static helptext" title="{{lang_modeTooltip}}">
											<span class="glyphicon glyphicon-question-sign"></span>
										</p>
									</div>
								</div>
							</div>

							<div class="list-group-item">
								<div class="row">
									<div class="col-sm-3">
										<label for="input-roomplanner">{{lang_useRoomplanner}}</label>
									</div>
									<div class="col-sm-7">
										<select class="form-control" name="roomplanner" id="input-roomplanner">
											<option value="0" id="roomplanner0">{{lang_countIp}}</option>
											<option value="1" id="roomplanner1">{{lang_countRoomplan}}</option>
										</select>
									</div>
									<div class="col-sm-2">
										<p class="btn btn-static helptext" title="{{lang_roomplannerTooltip}}">
											<span class="glyphicon glyphicon-question-sign"></span>
										</p>
									</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 for="input-vertical">{{lang_vertical}}</label>
									</div>
									<div class="col-sm-7">
										<input id="input-vertical" type="checkbox" name="vertical" {{vertical_checked}}>
									</div>
									<div class="col-sm-2">
										<p class="btn btn-static helptext" title="{{lang_verticalTooltip}}">
											<span class="glyphicon glyphicon-question-sign"></span>
										</p>
									</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 for="scaledaysauto">{{lang_autoScale}}</label>
									</div>
									<div class="col-sm-7">
										<input id="scaledaysauto" type="checkbox" name="scaledaysauto" {{scaledaysauto_checked}}>
									</div>
									<div class="col-sm-2">
										<p class="btn btn-static helptext" title="{{lang_autoscaleTooltip}}">
											<span class="glyphicon glyphicon-question-sign"></span>
										</p>
									</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 for="daystoshow">{{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">
										<p class="btn btn-static helptext" title="{{lang_daysToShowTooltip}}">
											<span class="glyphicon glyphicon-question-sign"></span>
										</p>
									</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 for="rotation">{{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">
										<p class="btn btn-static helptext" title="{{lang_rotationTooltip}}">
											<span class="glyphicon glyphicon-question-sign"></span>
										</p>
									</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 for="input-scale">{{lang_scale}}</label>
									</div>
									<div class="col-sm-7">
										<span><span class="range-display"></span>&thinsp;%</span>
										<input id="input-scale" name="scale" type="range" step="1" min="10" max="90" value="{{scale}}">
									</div>
									<div class="col-sm-2">
										<p class="btn btn-static helptext" title="{{lang_scaleTooltip}}">
											<span class="glyphicon glyphicon-question-sign"></span>
										</p>
									</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 for="input-switchtime">{{lang_switchTime}}</label>
									</div>
									<div class="col-sm-7">
										<span><span class="range-display"></span>&thinsp;{{lang_sec}}</span>
										<input id="input-switchtime" name="switchtime" type="range" step="1" min="1" max="120" value="{{switchtime}}">
									</div>
									<div class="col-sm-2">
										<p class="btn btn-static helptext" title="{{lang_switchTimeTooltip}}">
											<span class="glyphicon glyphicon-question-sign"></span>
										</p>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-md-6">
				<div class="panel panel-default">
					<div class="panel-heading">{{lang_locations}}</div>
					<div class="panel-body">
						<input type="hidden" name="locationids" value="{{locationids}}" id="locationids">
						<p>{{lang_fourLocsHint}}</p>
						<ul id="selected-locations" class="list-unstyled">

						</ul>
						<div class="dropdown pull-right">
							<button id="addLocDdBtn" type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
								<span class="glyphicon glyphicon-plus"></span>
							</button>
							<ul class="dropdown-menu" id="location-list">
								{{#locations}}
									<li><a href="#" data-lid="{{locationid}}">{{locationpad}} <span class="name">{{locationname}}</span></a></li>
								{{/locations}}
							</ul>
						</div>
						<div class="clearfix"></div>
					</div>
				</div>
			</div>
		</div>

		<div class="row" id="overrideRoomConfigs">

		</div>

	</div>



	<div class="text-right">
		<a href="?do=locationinfo&amp;show=panels" class="btn btn-default">{{lang_cancel}}</a>
		<button type="submit" class="btn btn-primary">
			<span class="glyphicon glyphicon-floppy-disk"></span>
			{{lang_save}}
		</button>
	</div>
</form>

<div class="modal fade" id="no-locations-message" tabindex="-1" role="dialog">
	<div class="modal-dialog"> <!--style="min-width:600px;width:70%"-->

		<div class="modal-content">
			<div class="modal-header">{{lang_error}}</div>
			<div class="modal-body">
				{{lang_noLocationsWarning}}
			</div>
			<div class="modal-footer">
				<a class="btn btn-primary pull-right" data-dismiss="modal">{{lang_close}}</a>
				<div class="clearfix"></div>
			</div>
		</div>

	</div>
</div>

<script type="text/javascript"><!--

document.addEventListener("DOMContentLoaded", function () {
	var $selLocs = $('#selected-locations');
	var $locList = $('#location-list');
	var $locInput = $('#locationids');
	var $addLocDbBtn = $('#addLocDdBtn');
	var $owPanels = $('#overrideRoomConfigs');
	var overrides = {{{overrides}}}

	// Initialize fancy tooltips
	$('p.helptext').tooltip();
	// Add listener to range sliders so their label can be updated
	var $range = $('input[type="range"]');
	$range.change(function () {
		$(this).siblings().find('.range-display').text($(this).val());
	});
	// Set state of input controls that aren't statically initialized server side
	$('.modify-inputs input[type="checkbox"]')
			.bootstrapSwitch({size: 'small'})
			.on('switchChange.bootstrapSwitch', function () {
				if (this.name === 'scaledaysauto') {
					$('#daystoshow').prop('disabled', this.checked);
				}
			});


	var lids = $locInput.val().split(',');
	$selLocs.empty();
	for (var i = 0; i < lids.length; ++i) {
		var $name = $locList.find('a[data-lid="' + lids[i] + '"] .name');
		if ($name.length === 0) continue;
		addLocation(lids[i], $name.text());
	}

	$('#daystoshow option[value="{{daystoshow}}"]').attr("selected", "selected");
	$('#rotation option[value="{{rotation}}"]').attr("selected", "selected");
	$('#mode option[value="{{mode}}"]').attr("selected", "selected");
	$('#input-roomplanner option[value="{{roomplanner}}"]').attr("selected", "selected");

	$('#daystoshow').prop('disabled', document.getElementById('scaledaysauto').checked);

	$range.change();
	modeChange();

	// Adding/removing locations
	$locList.find('a').click(function(ev) {
		ev.preventDefault();
		ev.stopPropagation();
		var $this = $(this);
		var name = $this.find('.name').text();
		var id = $this.data('lid');
		addLocation(id, name);
		serializeLocs();
	});

	$('#config-form').submit(function(ev) {
		if ($locInput.val().length > 0) {
			return;
		}
		ev.preventDefault();
		$('#no-locations-message').modal('show');
	});

	function addLocation(id, name) {
		$selLocs.find('li[data-lid="' + id + '"]').remove();
		var delButton = $('<button style="margin-right: 5px;" class="btn btn-danger btn-xs" type="button">').append($('<span class="glyphicon glyphicon-remove">')).click(delParent);
		$selLocs.append($('<li style="margin-top: 5px;">').attr('data-lid', id).text(name).prepend(delButton));

		if ($selLocs.find('li').length >= 4) {
			$addLocDbBtn.prop("disabled",true);
			var $addLocBtnParent = $addLocDbBtn.parent();
			if ($addLocBtnParent.hasClass('open')) {
				$addLocBtnParent.removeClass('open');
			}
		}

		// Add Panel for overwriting room specific config
		$owPanels.find('#overrideRoom' + id).remove();
		$owPanels.append('<div class="col-md-6" id="overrideRoom' + id + '">' +
			'<div class="panel panel-default">' +
			'<div class="panel-heading clearfix">' +
			name + ' {{lang_configOverride}}' +
			'<div class="checkbox-inline pull-right">' +
			'<input type="checkbox" id="override' + id + '" name="override' + id + '"/>' +
			'</div></div><div class="panel-body"></div></div></div>');


		// Load content into panel
		var overrideSelect = $('#override' + id);
		overrideSelect
			.bootstrapSwitch({size: 'small'})
			.on('switchChange.bootstrapSwitch', function () {
				if (this.checked) {
					loadOverrideContent(id);
				} else {
					unloadOverrideContent(id);
				}
			});

		if (overrides !== null && overrides[id] !== undefined) {
			overrideSelect.bootstrapSwitch('state', true);
		}
	}

	function loadOverrideContent(id) {
		// 1. Build Content
		// $content.append($('<div class="list-group-item"><div class="row"><div class="col-sm-3"></div><div class="col-sm-7"></div><div class="col-sm-2"></div></div></div>'));
		var $content = $('<div class="list-group"></div>');
		$content.append($('<div class="list-group-item"><div class="row">' +
			'<div class="col-sm-3"><label for="override' + id + 'mode">{{lang_mode}}</label></div>' +
			'<div class="col-sm-7"><select class="form-control" id="override' + id + 'mode" name="override' + id + 'mode" onchange="modeChangeOverride(id)"><option value="1" id="override' + id + 'mode1">{{lang_mode1}}</option><option value="2" id="override' + id + 'mode2">{{lang_mode2}}</option><option value="3" id="override' + id + 'mode3">{{lang_mode3}}</option><option value="4" id="override' + id + 'mode4">{{lang_mode4}}</option></select></div>' +
			'<div class="col-sm-2"><p class="btn btn-static helptext" title="{{lang_modeTooltip}}"><span class="glyphicon glyphicon-question-sign"></span></p></div>' +
			'</div></div>'));
		$content.append($('<div class="list-group-item"><div class="row">' +
			'<div class="col-sm-3"><label for="override' + id + 'roomplanner">{{lang_useRoomplanner}}</label></div>' +
			'<div class="col-sm-7"><select class="form-control" name ="override' + id + 'roomplanner" id="override' + id + 'roomplanner"><option value="0" id="override' + id + 'roomplanner0">{{lang_countIp}}</option><option value="1" id="override' + id + 'roomplanner1">{{lang_countRoomplan}}</option></select></div>' +
			'<div class="col-sm-2"><p class="btn btn-static helptext" title="{{lang_roomplannerTooltip}}"><span class="glyphicon glyphicon-question-sign"></span></p></div>' +
			'</div></div>'));
		$content.append($('<div class="list-group-item om1-s om2-h om3-h om4-h"><div class="row">' +
			'<div class="col-sm-3"><label for="override' + id + 'vertical">{{lang_vertical}}</label></div>' +
			'<div class="col-sm-7"><input id="override' + id + 'vertical" name="override' + id + 'vertical" type="checkbox"></div>' +
			'<div class="col-sm-2"><p class="btn btn-static helptext" title="{{lang_verticalTooltip}}"><span class="glyphicon glyphicon-question-sign"></span></p></div>' +
			'</div></div>'));
		$content.append($('<div class="list-group-item om1-s om2-s om3-h om4-s"><div class="row">' +
			'<div class="col-sm-3"><label for="override' + id + 'scaledaysauto">{{lang_autoScale}}</label></div>' +
			'<div class="col-sm-7"><input id="override' + id + 'scaledaysauto" name="override' + id + 'scaledaysauto" type="checkbox"></div>' +
			'<div class="col-sm-2"><p class="btn btn-static helptext" title="{{lang_autoscaleTooltip}}"><span class="glyphicon glyphicon-question-sign"></span></p></div>' +
			'</div></div>'));
		$content.append($('<div class="list-group-item om1-s om2-s om3-h om4-s"><div class="row">' +
			'<div class="col-sm-3"><label for="override' + id + 'daystoshow">{{lang_daysToShow}}</label></div>' +
			'<div class="col-sm-7"><select class="form-control" id="override' + id + 'daystoshow" name="override' + id + '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"><p class="btn btn-static helptext" title="{{lang_daysToShowTooltip}}"><span class="glyphicon glyphicon-question-sign"></span></p></div>' +
			'</div></div>'));
		$content.append($('<div class="list-group-item om1-s om2-h om3-s om4-s"><div class="row">' +
			'<div class="col-sm-3"><label for="override' + id + 'rotation">{{lang_rotation}}</label></div>' +
			'<div class="col-sm-7"><select class="form-control" id="override' + id + 'rotation" name="override' + id + 'rotation"><option value="0">{{lang_rotation0}}</option><option value="1">{{lang_rotation1}}</option><option value="2">{{lang_rotation2}}</option><option value="3">{{lang_rotation3}}</option></select></div>' +
			'<div class="col-sm-2"><p class="btn btn-static helptext" title="{{lang_rotationTooltip}}"><span class="glyphicon glyphicon-question-sign"></span></p></div>' +
			'</div></div>'));
		$content.append($('<div class="list-group-item om1-s om2-h om3-h om4-h"><div class="row">' +
			'<div class="col-sm-3"><label for="override' + id + 'scale">{{lang_scale}}</label></div>' +
			'<div class="col-sm-7"><span><span class="range-display"></span> %</span><input id="override' + id + 'scale" name="override' + id + 'scale" type="range" step="1" min="10" max="90"></div>' +
			'<div class="col-sm-2"><p class="btn btn-static helptext" title="{{lang_scaleTooltip}}"><span class="glyphicon glyphicon-question-sign"></span></p></div>' +
			'</div></div>'));

		// 2. Load Content into Panel
		var $panelBody = $('#overrideRoom' + id).find('div.panel-body');
		$panelBody.append($content);

		$('.modify-inputs #overrideRoom' + id + ' input[type="checkbox"]')
			.bootstrapSwitch({size: 'small'})
			.on('switchChange.bootstrapSwitch', function () {
				if (this.id === 'override' + id + 'scaledaysauto') {
					$('#override' + id + 'daystoshow').prop('disabled', this.checked);
				}
			});

		// 3. Init parameters: Given parameters or global parameters if none given
		var scale = $('#override' + id + 'scale');
		if (overrides !== null && overrides[id] !== undefined) {
			$('#override' + id + 'mode').val(overrides[id].mode);
			$('#override' + id + 'roomplanner').val(overrides[id].roomplanner ? 1 : 0);
			if (overrides[id].vertical) $('#override' + id + 'vertical').bootstrapSwitch('state', true);
			if (overrides[id].scaledaysauto) $('#override' + id + 'scaledaysauto').bootstrapSwitch('state', true);
			$('#override' + id + 'daystoshow').val(overrides[id].daystoshow);
			$('#override' + id + 'rotation').val(overrides[id].rotation);
			scale.val(overrides[id].scale);
		} else {
			$('#override' + id + 'mode').val($('#mode').val());
			$('#override' + id + 'roomplanner').val($('#input-roomplanner').val());
			if ($('#input-vertical').bootstrapSwitch('state')) $('#override' + id + 'vertical').bootstrapSwitch('state', true);
			if ($('#scaledaysauto').bootstrapSwitch('state')) $('#override' + id + 'scaledaysauto').bootstrapSwitch('state', true);
			$('#override' + id + 'daystoshow').val($('#daystoshow').val());
			$('#override' + id + 'rotation').val($('#rotation').val());
			scale.val($('#input-scale').val());
		}

		scale.change(function () {
			$(this).siblings().find('.range-display').text($(this).val());
		});

		scale.change();
		modeChangeOverride('override' + id + 'mode');
	}

	function unloadOverrideContent(id) {
		var $panelBody = $('#overrideRoom' + id).find('div.panel-body');
		$panelBody.find('div.list-group').remove();
		if (overrides !== null && overrides[id] !== undefined) delete overrides[id]
	}

	function delParent() {
		var $id = $(this).parent().attr("data-lid");;
		$('#overrideRoom' + $id).remove();
		$(this).parent().remove();
		serializeLocs();
		if ($selLocs.find('li').length < 4) {
			$addLocDbBtn.prop("disabled",false);
		}
	}

	function serializeLocs() {
		var res = $selLocs.find('li[data-lid]').map( function() {
			return $(this).data('lid');
		}).get().join(',');
		$locInput.val(res);
	}
});

/**
 * 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();
}

function modeChangeOverride(id) {
	id = id.replace('override', '');
	id = id.replace('mode', '');
	var value = $('#override' + id + 'mode').val();
	$('#overrideRoom' + id + ' .om' + value + '-h').hide();
	$('#overrideRoom' + id + ' .om' + value + '-s').show();
}

//--></script>