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

<div>

<div align="right">
  <label for="CB_1">{{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>
          <!--<td><button class="btn btn-sm btn-danger">X</button></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>
      <!--<a class="btn btn-danger btn-sm" onclick=>{{lang_deleteAll}}</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();
  }
});

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

  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');
        }
      });
    });
  };
  // <!--<button type="submit" class="btn btn-success btn-sm" onclick=>✓</button>-->\
  //         <input type="time" name="openingtime[]">\
  //         <input type="time" name="closingtime[]">\



</script>