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-lg">
        <vn-table model="model" auto-load="false">
            <vn-thead>
                <vn-tr>
                    <vn-td ng-repeat="weekday in $ctrl.weekDays" center>
                        <div class="weekday" translate>{{::$ctrl.weekdayNames[$index].name}}</div>
                        <div>
                            <span>{{::weekday.dated | date: 'dd'}}</span>
                            <span title="{{::weekday.dated | date: 'MMMM' | translate}}" translate>
                                {{::weekday.dated | date: 'MMMM'}}
                            </span>
                        </div>
                        <vn-chip 
                            title="{{::weekday.event.name}}"
                            ng-class="{invisible: !weekday.event}">
                            <vn-avatar
                                ng-style="::{backgroundColor: weekday.event.color}">
                            </vn-avatar>
                            <div>
                                {{::weekday.event.name}}
                            </div>
                        </vn-chip>
                    </vn-td>
                </vn-tr>
            </vn-thead>
            <vn-tbody>
                <vn-tr>
                    <vn-td ng-repeat="weekday in $ctrl.weekDays" class="hours vn-pa-none" expand center>
                        <section ng-repeat="hour in weekday.hours" center>
                            <vn-icon
                                icon="{{
                                    ::hour.direction == 'in' ? 'arrow_forward'
                                    : hour.direction == 'out' ? 'arrow_back'
                                    : 'arrow_forward'
                                }}"
                                title="{{
                                    ::(hour.direction == 'in' ? 'In'
                                    : hour.direction == 'out' ? 'Out'
                                    : '') | translate
                                }}"
                                ng-class="::{'invisible': hour.direction == 'middle'}">
                            </vn-icon>
                            <vn-chip
                                ng-class="::{'colored': hour.manual}"
                                removable="::hour.manual"
                                translate-attr="{title: 'Category'}"
                                on-remove="$ctrl.showDeleteDialog(hour)">
                                {{::hour.timed | date: 'HH:mm'}}
                            </vn-chip>
                        </section>
                    </vn-td>
                </vn-tr>
            </vn-tbody>
            <vn-tfoot>
                <vn-tr>
                    <vn-td ng-repeat="weekday in $ctrl.weekDays" center>
                        {{$ctrl.formatHours(weekday.workedHours)}} 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 style="text-align: center;">
                <vn-label-value 
                    label="Finish at" 
                    value="{{$ctrl.getFinishTime()}}">
                </vn-label-value>
            </div>
            <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>
<vn-confirm
    vn-id="delete-entry-dialog"
    on-response="$ctrl.deleteTimeEntry(response)"
    message="This time entry will be deleted"
    question="Are you sure you want to delete this entry?">
</vn-confirm>