|
|
<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{{/expertMode}}>
</div>
<br>
<div id="easyMode" style="{{#expertMode}}display: none;{{/expertMode}}">
<form method="post" action="?do=locationinfo" id="timeFormEasy">
<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>
</form>
</div>
<div id="expertMode" style="{{#easyMode}}display: none;{{/easyMode}}">
<form method="post" action="?do=locationinfo" id="timeFormExpert">
<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>
</form>
</div>
</div>
<script>
setTimepicker();
$('#CB_1').bootstrapSwitch();
$('#CB_1').on('switchChange.bootstrapSwitch', function (e, data) {
if (data == false) {
$('#expertMode').hide();
$('#easyMode').show();
$('#myModalSubmitButton').attr("Form", "timeFormEasy");
} else {
$('#easyMode').hide();
$('#expertMode').show();
$('#myModalSubmitButton').attr("Form", "timeFormExpert");
}
});
if ('{{easyMode}}' == true) {
$('#myModalSubmitButton').attr("Form", "timeFormEasy");
} else if ('{{expertMode}}' == true) {
$('#myModalSubmitButton').attr("Form", "timeFormExpert");
}
/**
* 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>
|
