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

<div>

	<div align="right">
		<label for="CB_1" title="{{lang_expertMode_title}}">{{lang_expertMode}}</label>
		<input class="bs-switch" name="1" id="CB_1" type="checkbox" {{#expertMode}}checked="checked"{{/expertMode}}>
	</div>
	<br>

	<div id="easyMode" style="{{#expertMode}}display: none;{{/expertMode}}">
		<form method="post" action="?do=locationinfo" id="timeForm">
			<input type="hidden" name="token" value="{{token}}">
			<input type="hidden" name="action" value="updateOpeningTimeEasy">
			<input type="hidden" name="id" value="{{id}}">
			<input type="hidden" name="easyMode" value="{{easyMode}}">

			<table class="table table-condensed locations" 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" name="openingtime[]" id="openingtimepicker"
									 pattern="[0-9]{1,2}:[0-9]{2}" value="{{openingtime0}}">
						</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" name="closingtime[]" id="openingtimepicker"
									 pattern="[0-9]{1,2}:[0-9]{2}" value="{{closingtime0}}">
						</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" name="openingtime[]" id="openingtimepicker"
									 pattern="[0-9]{1,2}:[0-9]{2}" value="{{openingtime1}}">
						</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" name="closingtime[]" id="openingtimepicker"
									 pattern="[0-9]{1,2}:[0-9]{2}" value="{{closingtime1}}">
						</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" name="openingtime[]" id="openingtimepicker"
									 pattern="[0-9]{1,2}:[0-9]{2}" value="{{openingtime2}}">
						</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" name="closingtime[]" id="openingtimepicker"
									 pattern="[0-9]{1,2}:[0-9]{2}" value="{{closingtime2}}">
						</div>
					</td>
				</tr>
			</table>

			<br>
			<br>
			<br>
			<button type="submit" class="btn btn-primary">{{lang_save}}</button>
			<br>
		</form>
	</div>

	<div id="expertMode" style="{{#easyMode}}display: none;{{/easyMode}}">
		<form method="post" action="?do=locationinfo" id="timeForm">
			<input type="hidden" name="token" value="{{token}}">
			<input type="hidden" name="action" value="updateOpeningTimeExpert">
			<input type="hidden" name="id" value="{{id}}">
			<input type="hidden" name="easyMode" value="{{easyMode}}">


			<table class="table table-condensed locations" style="margin-bottom:0">
				<tr>
					<th>{{lang_day}}</th>
					<th>{{lang_openingTime}}</th>
					<th>{{lang_closingTime}}</th>
					<th>{{lang_delete}}</th>
				</tr>

				{{#openingtimes}}
				<tr class=tablerow>
					<td>{{days}}</td>
					<td>{{openingtime}}</td>
					<td>{{closingtime}}</td>
					<td align="center"><input type="checkbox" name="delete[]" value="{{index}}"></td>
				</tr>
				{{/openingtimes}}

				<tr id="lastOpenTimesTableElement"></tr>
			</table>

			<br>
			<a class="btn btn-success btn-sm" onclick=newOpeningTime()><span class="glyphicon glyphicon-plus-sign"></span>
				{{lang_openingTime}}</a>
			<br>
			<br>
			<button type="submit" class="btn btn-primary">{{lang_save}}</button>
			<br>
		</form>
	</div>
</div>

<script>
	setTimepicker();
	$('#CB_1').bootstrapSwitch();
	$('#CB_1').on('switchChange.bootstrapSwitch', function (e, data) {

		if (data == false) {
			$('#expertMode').hide();
			$('#easyMode').show();
		} else {
			$('#easyMode').hide();
			$('#expertMode').show();
		}
	});

	/**
	 * Sets the timepicker element.
	 */
	function setTimepicker() {
		$('.timepicker2').timepicker({
			minuteStep: 1,
			template: 'modal',
			appendWidgetTo: 'body',
			showSeconds: false,
			showMeridian: false,
			defaultTime: false
		});
	}

	/**
	 * Adds a new opening time to the table in expert mode.
	 */
	function newOpeningTime() {
		$('#lastOpenTimesTableElement').before('<tr>\
      <td>\
      <div class="form-group options">\
        <label><input required type="checkbox" name="days[]" value="Monday">{{lang_shortMonday}}</label>\
        <label><input required type="checkbox" name="days[]" value="Tuesday">{{lang_shortTuesday}}</label>\
        <label><input required type="checkbox" name="days[]" value="Wednesday">{{lang_shortWednesday}}</label>\
        <label><input required type="checkbox" name="days[]" value="Thursday">{{lang_shortThursday}}</label>\
        <label><input required type="checkbox" name="days[]" value="Friday">{{lang_shortFriday}}</label>\
        <label><input required type="checkbox" name="days[]" value="Saturday">{{lang_shortSaturday}}</label>\
        <label><input required type="checkbox" name="days[]" value="Sunday">{{lang_shortSunday}}</label>\
      </div>\
        <input type="hidden" name="days[]" value="-">\
        </td>\
        <td>\
        <div class="input-group bootstrap-timepicker">\
        		<span class="input-group-addon">\
        			<span class="glyphicon glyphicon-time"></span>\
        		</span>\
        	<input required type="text" class="form-control timepicker2" name="openingtime[]" id="openingtimepicker" pattern="[0-9]{1,2}:[0-9]{2}" value="8:00">\
        </div>\
        \
        </td>\
        <td>\
        \
        <div class="input-group bootstrap-timepicker">\
        		<span class="input-group-addon">\
        			<span class="glyphicon glyphicon-time"></span>\
        		</span>\
        	<input required type="text" class="form-control timepicker2" name="closingtime[]" id="closingtimepicker" pattern="[0-9]{1,2}:[0-9]{2}" value="18:00">\
        </div>\
        \
        </td>\
        <td align="center">\
          <input type="checkbox" name="dontadd[]" value="dontadd"\
          </td>\
          </tr>');
		setTimepicker();

		$(function () {
			var requiredCheckboxes = $('.options :checkbox[required]');
			requiredCheckboxes.change(function () {
				if (requiredCheckboxes.is(':checked')) {
					requiredCheckboxes.removeAttr('required');
				} else {
					requiredCheckboxes.attr('required', 'required');
				}
			});
		});
	}

</script>