path: root/modules-available/locations/templates/ajax-opening-location.html

<div>
	<h3>{{lang_openingTime}}</h3>
	{{^expertMode}}
	<div class="simple-mode">

		<div align="right" style="margin-bottom: 10px;">
			<a href="#" class="btn btn-default btn-sm btn-show-expert">{{lang_expertMode}}</a>
		</div>
		<div class="clearfix"></div>
		<table class="table table-condensed" style="margin-bottom:0">
			<tr>
				<th>{{lang_day}}</th>
				<th>{{lang_openingTime}}</th>
				<th>{{lang_closingTime}}</th>
			</tr>

			<tr class="tablerow">
				<td>{{lang_monTilFr}}</td>
				<td>
					<div class="input-group bootstrap-timepicker">
						<span class="input-group-addon">
							<span class="glyphicon glyphicon-time"></span>
						</span>
						<input type="text" class="form-control timepicker2 week-open" pattern="[0-9]{1,2}:[0-9]{2}">
					</div>
				</td>
				<td>
					<div class="input-group bootstrap-timepicker">
						<span class="input-group-addon">
							<span class="glyphicon glyphicon-time"></span>
						</span>
						<input type="text" class="form-control timepicker2 week-close" pattern="[0-9]{1,2}:[0-9]{2}">
					</div>
				</td>
			</tr>
			<tr class="tablerow">
				<td>{{lang_saturday}}</td>
				<td>
					<div class="input-group bootstrap-timepicker">
						<span class="input-group-addon">
							<span class="glyphicon glyphicon-time"></span>
						</span>
						<input type="text" class="form-control timepicker2 saturday-open" pattern="[0-9]{1,2}:[0-9]{2}">
					</div>
				</td>
				<td>
					<div class="input-group bootstrap-timepicker">
						<span class="input-group-addon">
							<span class="glyphicon glyphicon-time"></span>
						</span>
						<input type="text" class="form-control timepicker2 saturday-close" pattern="[0-9]{1,2}:[0-9]{2}">
					</div>
				</td>
			</tr>
			<tr class="tablerow">
				<td>{{lang_sunday}}</td>
				<td>
					<div class="input-group bootstrap-timepicker">
						<span class="input-group-addon">
							<span class="glyphicon glyphicon-time"></span>
						</span>
						<input type="text" class="form-control timepicker2 sunday-open" pattern="[0-9]{1,2}:[0-9]{2}">
					</div>
				</td>
				<td>
					<div class="input-group bootstrap-timepicker">
						<span class="input-group-addon">
							<span class="glyphicon glyphicon-time"></span>
						</span>
						<input type="text" class="form-control timepicker2 sunday-close" pattern="[0-9]{1,2}:[0-9]{2}">
					</div>
				</td>
			</tr>
		</table>
	</div>
	{{/expertMode}}

	<div class="expert-mode" style="{{^expertMode}}display:none{{/expertMode}}">
		<div class="clearfix"></div>
		<div class="expert-table">
			<div class="row">
				<div class="col-sm-6">{{lang_openingTime}}</div>
				<div class="col-sm-4">{{lang_closingTime}}</div>
				<div class="col-sm-2 text-right">{{lang_delete}}</div>
			</div>
		</div>
		<hr>
		<div style="text-align: center;">
			<a class="btn btn-success btn-sm new-openingtime">
				<span class="glyphicon glyphicon-plus-sign"></span>
				{{lang_openingTime}}
			</a>
		</div>
		<br>
	</div>
</div>

<div class="hidden expert-template">
	<div class="row expert-row">
		<hr>
		<div class="col-xs-12 days-box">
			<div class="pull-right checkbox checkbox-inline"><input type="checkbox" class="i-delete"><label><span class="glyphicon glyphicon-trash"></span></label></div>
			<div class="checkbox checkbox-inline"><input type="checkbox" class="i-Monday"><label>{{lang_shortMonday}}</label></div>
			<div class="checkbox checkbox-inline"><input type="checkbox" class="i-Tuesday"><label>{{lang_shortTuesday}}</label></div>
			<div class="checkbox checkbox-inline"><input type="checkbox" class="i-Wednesday"><label>{{lang_shortWednesday}}</label></div>
			<div class="checkbox checkbox-inline"><input type="checkbox" class="i-Thursday"><label>{{lang_shortThursday}}</label></div>
			<div class="checkbox checkbox-inline"><input type="checkbox" class="i-Friday"><label>{{lang_shortFriday}}</label></div>
			<div class="checkbox checkbox-inline"><input type="checkbox" class="i-Saturday"><label>{{lang_shortSaturday}}</label></div>
			<div class="checkbox checkbox-inline"><input type="checkbox" class="i-Sunday"><label>{{lang_shortSunday}}</label></div>
		</div>
		<div class="col-sm-6">
			<div class="input-group bootstrap-timepicker">
				<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
				<input type="text" class="form-control timepicker2 i-openingtime" pattern="[0-9]{1,2}:[0-9]{2}">
			</div>
		</div>
		<div class="col-sm-6">
			<div class="input-group bootstrap-timepicker">
				<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
				<input type="text" class="form-control timepicker2 i-closingtime" pattern="[0-9]{1,2}:[0-9]{2}">
			</div>
		</div>
	</div>
</div>

{{#rebootcontrol}}
<hr>
<div class="row wol">
	<div class="col-sm-4">
		<div class="checkbox checkbox-inline">
			<input id="wol-check-{{id}}" name="wol" type="checkbox" {{#wol}}checked{{/wol}}>
			<label for="wol-check-{{id}}">{{lang_wakeonlan}}</label>
		</div>
	</div>
	<div class="col-sm-8">
		<div class="input-group">
			<input disabled type="number" id="wol-offset-{{id}}" name="wol-offset" class="form-control"
					 value="{{wol-options.wol-offset}}" placeholder="0" min="0" max="15">
			<span class="input-group-addon slx-ga2">
				<label for="wol-offset-{{id}}">{{lang_offsetEarly}}</label>
			</span>
		</div>
	</div>
</div>
<div class="row shutdown">
	<div class="col-sm-4">
		<div class="checkbox checkbox-inline">
			<input id="sd-check-{{id}}" name="sd" type="checkbox" {{#sd}}checked{{/sd}}>
			<label for="sd-check-{{id}}">{{lang_shutdown}}</label>
		</div>
	</div>
	<div class="col-sm-8">
		<div class="input-group">
			<input disabled type="number" id="sd-offset-{{id}}" name="sd-offset" class="form-control"
					 value="{{sd-options.sd-offset}}" placeholder="0" min="0" max="15">
			<span class="input-group-addon slx-ga2">
					<label for="sd-offset-{{id}}">{{lang_offsetLate}}</label>
				</span>
		</div>
	</div>
</div>
{{/rebootcontrol}}

<script type="application/javascript">
	(function() {

		var $loc = $('#openingTimesModal{{id}}');
		var $wol = $loc.find('.wol');
		var $sd = $loc.find('.shutdown');

		var sync = function($div) {
			$div.find('input[type="number"]').prop('disabled',
				!$div.find('input[type="checkbox"]').is(':checked'));
		};
		sync($wol);
		sync($sd);
		$wol.find('input[type="checkbox"]').on('change', function() { sync($wol); });
		$sd.find('input[type="checkbox"]').on('change', function() { sync($sd); });

		var scheduleData = {{{schedule_data}}};

		{{#expertMode}}
			for (var i = 0; i < scheduleData.length; ++i) {
				newOpeningTime($loc, scheduleData[i]);
			}
		{{/expertMode}}
		{{^expertMode}}
			for (var i = 0; i < scheduleData.length; ++i) {
				if (scheduleData[i].days.length === 5) {
					$loc.find('.week-open').val(scheduleData[i]['openingtime']);
					$loc.find('.week-close').val(scheduleData[i]['closingtime']);
				} else if (scheduleData[i].days.length === 1 && scheduleData[i].days[0] === 'Saturday') {
					$loc.find('.saturday-open').val(scheduleData[i]['openingtime']);
					$loc.find('.saturday-close').val(scheduleData[i]['closingtime']);
				} else if (scheduleData[i].days.length === 1 && scheduleData[i].days[0] === 'Sunday') {
					$loc.find('.sunday-open').val(scheduleData[i]['openingtime']);
					$loc.find('.sunday-close').val(scheduleData[i]['closingtime']);
				}
			}
		{{/expertMode}}

		setTimepicker($loc.find('.timepicker2'));

		$loc.find('.new-openingtime').click(function (e) {
			e.preventDefault();
			setTimepicker(newOpeningTime($loc, {}).find('.timepicker2'));
		});

		$loc.find('.btn-show-expert').click(function (e) {
			e.preventDefault();
			scheduleData = simpleToExpert($loc);
			for (var i = 0; i < scheduleData.length; ++i) {
				setTimepicker(newOpeningTime($loc, scheduleData[i]).find('.timepicker2'));
			}
			$loc.find('.simple-mode').remove();
			$loc.find('.expert-mode').show();
		});

		$loc.find('form').submit(validateOpeningTimes);
	})();

</script>