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

<vn-crud-model
    vn-id="model"
    url="/worker/api/WorkerTimeControls/filter"
    filter="::$ctrl.filter" 
    data="$ctrl.hours">
</vn-crud-model>
<div class="main-with-right-menu">
    <vn-card class="compact vn-pa-lg">
        <vn-horizontal>
            <vn-table model="model" auto-load="false" vn-one>
                <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 | dateTime: 'HH:mm'}}</span>
                            </section>
                        </vn-td>
                    </vn-tr>
                </vn-tbody>
                <vn-tfoot>
                <vn-tr>
                    <vn-td center ng-repeat="weekday in $ctrl.weekDays">
                        {{$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-horizontal>
    </vn-card>
    <vn-side-menu side="right">
        <vn-vertical class="vn-pa-sm">
            <vn-vertical class="totalBox">
                <h6 translate>Hours</h6>
                <vn-label-value 
                    label="Week total" 
                    value="{{$ctrl.weekTotalHours}} {{'Hours' | translate}}">
                </vn-label-value>
            </vn-vertical>
        </vn-vertical>
        <vn-calendar class="vn-pa-sm"
            data="$ctrl.currentWeek"
            default-date="$ctrl.defaultDate"
            on-selection="$ctrl.onSelection($days)"
            on-move-next="$ctrl.onMoveNext()"
            on-move-previous="$ctrl.onMovePrevious()">
        </vn-calendar>
    </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>