Store hours

store-hours.twig

<form method="post" accept-charset="UTF-8" enctype="multipart/form-data">
      {{ actionInput('users/save-user') }}
      {{ csrfInput() }}
      {{ hiddenInput('userId', currentUser.id) }}
      <div class="grid-x grid-margin-x">
        <div
          class="cell small-12 large-6 weekdays">
          {# Show all days with Monday first #}
          {% set range = currentUser.openingHours.getRange(1, 0) %}
          {% for day in range %}
            <div class="{{ day.name }}">
              <label class="dc">
                <input type="checkbox" name="{{ day.name }} time-set" class="time-set" {{ not day.isBlank ? 'checked' }}>
                {{ day.name }}
                {% set hours = [
                  '12:00 AM',
                  '1:00 AM',
                  '2:00 AM',
                  '3:00 AM',
                  '4:00 AM',
                  '5:00 AM',
                  '6:00 AM',
                  '7:00 AM',
                  '8:00 AM',
                  '9:00 AM',
                  '10:00 AM',
                  '11:00 AM',
                  '12:00 PM',
                  '1:00 PM',
                  '2:00 PM',
                  '3:00 PM',
                  '4:00 PM',
                  '5:00 PM',
                  '6:00 PM',
                  '7:00 PM',
                  '8:00 PM',
                  '9:00 PM',
                  '10:00 PM',
                  '11:00 PM',
                 ] %}

                <span class="checkmark"></span>
              </label>
              <p>
                <input type="hidden" name="fields[openingHours][{{ loop.index }}][open][time]">
                <select name="fields[openingHours][{{ loop.index }}][open][time]" class="start-time-{{ loop.index }}" {{ day.isBlank ? 'disabled' }}>
                  {% for hour in hours %}
                    <option value="{{ hour }}" {% if day.morningOpen|date('g:i A') == hour|date("g:i A") %} selected {% endif %}>{{ hour|date("H:i") }}</option>
                  {% endfor %}
                </select>

                -
                <input type="hidden" name="fields[openingHours][{{ loop.index }}][close][time]">
                <select name="fields[openingHours][{{ loop.index }}][close][time]" class="end-time-{{ loop.index }}" {{ day.isBlank ? 'disabled' }}>
                  {% for hour in hours %}
                    <option value="{{ hour }}" {% if day.morningClose|date('g:i A') == hour|date("g:i A") %} selected {% endif %}>{{ hour|date("H:i") }}</option>
                  {% endfor %}
                </select>
                und
                <br class="mobile-break"/>
                <input type="hidden" name="fields[openingHours][{{ loop.index }}][slot0][time]">
                <select name="fields[openingHours][{{ loop.index }}][slot0][time]" class="start-time-2" {{ day.isBlank ? 'disabled' }}>
                  <option value="">--</option>
                  {% for hour in hours %}
                    <option value="{{ hour }}" {% if day.afternoonOpeningTime|date('g:i A') == hour|date("g:i A") %} selected {% endif %}>{{ hour|date("H:i") }}</option>
                  {% endfor %}
                </select>

                -
                <input type="hidden" name="fields[openingHours][{{ loop.index }}][slot1][time]">
                <select name="fields[openingHours][{{ loop.index }}][slot1][time]" class="end-time-2" {{ day.isBlank ? 'disabled' }}>
                  <option value="">--</option>
                  {% for hour in hours %}
                    <option value="{{ hour }}" {% if day.afternoonClosingTime|date('g:i A') == hour|date("g:i A") %} selected {% endif %}>{{ hour|date("H:i") }}</option>
                  {% endfor %}
                </select>
              </p>
            </div>
          {% endfor %}
          <div class="cell flex-child-grow">
            <label class="dc special-note-input">
              {{ hiddenInput('fields[outsideOpeningHours]', '') }}
              <input type="checkbox" name="fields[outsideOpeningHours]" {% if currentUser.outsideOpeningHours == true %} checked {% endif %}>
              Sowie außerhalb der Geschäftszeiten nach Vereinbarung
              <span class="checkmark"></span>
            </label>
          </div>
          <div class="cell save-b-wrap">
            <button class="button primary save-button">Speichern</button>
          </div>
        </div>
      </div>
    </form>