engelsystem/resources/views/pages/user-shifts.html

<form class="form-inline" action="">
    <input type="hidden" name="p" value="user_shifts">
    <div class="row">
        <div class="col-md-6">
            <h1>%title%</h1>
            <div class="form-group">%start_select%</div>
            <div class="form-group">
                <div class="input-group time">
                    <input
                        type="time" class="form-control" id="start_time" name="start_time" size="5"
                        pattern="^\d{1,2}:\d{2}$" placeholder="HH:MM" maxlength="5" value="%start_time%"
                    >
                    <div class="input-group-btn">
                        <button class="btn btn-secondary" title="Now" type="button">
                            <span class="bi bi-clock"></span>
                        </button>
                    </div>
                </div>
            </div>
            &#8211;
            <div class="form-group">%end_select%</div>
            <div class="form-group">
                <div class="input-group time">
                    <input
                        type="time" class="form-control" id="end_time" name="end_time" size="5"
                        pattern="^\d{1,2}:\d{2}$" placeholder="HH:MM" maxlength="5" value="%end_time%"
                    >
                    <div class="input-group-btn">
                        <button class="btn btn-secondary" title="Now" type="button">
                            <span class="bi bi-clock"></span>
                        </button>
                    </div>
                </div>
            </div>
            <div class="form-group hidden-print" style="margin-top: .5em">
                <div class="btn-group">
                    <a href="javascript:setDay(-1)" class="btn btn-secondary ">%set_yesterday%</a>
                    <a href="javascript:setDay()" class="btn btn-secondary ">%set_today%</a>
                    <a href="javascript:setDay(1)" class="btn btn-secondary ">%set_tomorrow%</a>
                </div>
                <div class="btn-group">
                    <a href="javascript:setHours(-8)" class="btn btn-secondary ">%set_last_8h%</a>
                    <a href="javascript:setHours(-4)" class="btn btn-secondary ">%set_last_4h%</a>
                    <a href="javascript:setHours(4)" class="btn btn-secondary ">%set_next_4h%</a>
                    <a href="javascript:setHours(8)" class="btn btn-secondary ">%set_next_8h%</a>
                </div>
            </div>
            <div class="form-group hidden-print" style="margin-top: .5em">
                <div class="btn-group">
                    %buttons%
                </div>
            </div>
            <div class="row hidden-print">
                <div class="col-md-12">
                    <input class="btn btn-primary" type="submit" style="width:100%; margin: 1em 0" value="%filter%">
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <button class="btn btn-info btn-sm hidden-print" style="margin-top: 20px; margin-bottom:10px" type="button"
                    data-toggle="collapse"
                    data-target="#collapseShiftsFilterSelect" aria-expanded="true"
                    aria-controls="collapseShiftsFilterSelect"
            >
                collapse/show filters
            </button>
            <div class="collapse in" id="collapseShiftsFilterSelect">
                <div class="row">
                    <div class="col-xs-4 col-xxs-12">%room_select%</div>
                    <div class="col-xs-4 col-xxs-12">%type_select%</div>
                    <div class="col-xs-4 col-xxs-12">%filled_select%</div>
                </div>
                <div class="row hidden-print">
                    <div class="col-md-12" style="margin: 1em 0">
                        <p>%task_notice%</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

%shifts_table%

<div class="hidden-print">
    %ical_text%
</div>