salix/modules/worker/front/time-control/index.html

<vn-crud-model
    vn-id="model"
    url="WorkerTimeControls/filter"
    filter="::$ctrl.filter" 
    data="$ctrl.hours">
</vn-crud-model>
<div class="main-with-right-menu">
    <vn-card class="vn-pa-lg vn-w-md">
        <vn-table model="model" auto-load="false">
            <vn-thead>
                <vn-tr>
                    <vn-td ng-repeat="weekday in $ctrl.weekDays"  center>
                        <div translate>{{::$ctrl.weekdayNames[$index].name}}</div>
                        <span>{{::weekday.dated | date: 'dd'}}</span>
                        <span title="{{::weekday.dated | date: 'MMMM' | translate}}" translate>
                            {{::weekday.dated | date: 'MMMM'}}
                        </span>
                    </vn-td>
                </vn-tr>
            </vn-thead>
            <vn-tbody>
                <vn-tr>
                    <vn-td ng-repeat="weekday in $ctrl.weekDays" class="hours vn-pa-none" center>
                        <section ng-repeat="hour in weekday.hours" center>
                            <vn-icon
                                icon="arrow_{{($index % 2) == 0 ? 'forward' : 'back'}}"
                                title="{{(($index % 2) == 0 ? 'In' : 'Out') | translate}}">
                            </vn-icon>
                            <span class="chip {{$ctrl.hourColor(hour)}}">{{hour.timed | date: 'HH:mm'}}</span>
                        </section>
                    </vn-td>
                </vn-tr>
            </vn-tbody>
            <vn-tfoot>
                <vn-tr>
                    <vn-td ng-repeat="weekday in $ctrl.weekDays" center>
                        {{$ctrl.getWeekdayTotalHours(weekday)}} h.
                    </vn-td>
                </vn-tr>
                <vn-tr>
                    <vn-td center ng-repeat="weekday in $ctrl.weekDays"> 
                        <vn-icon-button
                            icon="add_circle"
                            vn-tooltip="Add time"
                            ng-click="$ctrl.showAddTimeDialog(weekday)">
                        </vn-icon-button>
                    </vn-td>
                </vn-tr>
            </vn-tfoot>
        </vn-table>
    </vn-card>
    <vn-side-menu side="right">
        <div class="vn-pa-md">
            <div class="totalBox" style="text-align: center;">
                <h6 translate>Hours</h6>
                <vn-label-value 
                    label="Week total" 
                    value="{{$ctrl.weekTotalHours}} h.">
                </vn-label-value>
            </div>
            <vn-calendar
                class="vn-pt-md"
                ng-model="$ctrl.date"
                has-events="$ctrl.hasEvents($day)">
            </vn-calendar>
        </div>
    </vn-side-menu>
</div>
<vn-dialog
    vn-id="addTimeDialog"
    on-response="$ctrl.addTime(response)">
    <tpl-body>
        <div>
            <h5 style="text-align: center">
                <span translate>Add time</span>
            </h5>
            <vn-input-time
                vn-one
                ng-model="$ctrl.newTime"
                label="Hour"
                vn-focus>
            </vn-input-time>
        </div>
    </tpl-body>
    <tpl-buttons>
        <input type="button" response="CANCEL" translate-attr="{value: 'Cancel'}"/>
        <button response="ACCEPT" translate>Save</button>
    </tpl-buttons>
</vn-dialog>