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>
<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>
                    <section ng-repeat="hour in weekday.hours">
                        <vn-icon
                            icon="{{
                                ::hour.direction == 'in' ? 'arrow_forward' : 'arrow_back'
                            }}"
                            title="{{
                                ::(hour.direction == 'in' ? 'In' : 'Out') | translate
                            }}"
                            ng-class="::{'invisible': hour.direction == 'middle'}">
                        </vn-icon>
                        <vn-chip
                            ng-class="::{'colored': hour.manual, 'clickable': true}"
                            removable="::hour.manual"
                            on-remove="$ctrl.showDeleteDialog($event, hour)"
                            ng-click="$ctrl.edit($event, hour)"
                            >
                            <prepend>
                                <vn-icon icon="edit"
                                    vn-tooltip="Edit">
                                </vn-icon>
                            </prepend>
                            {{::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-button-bar class="vn-pa-xs vn-w-lg"> 
    <vn-button 
        label="Satisfied" 
        ng-click="$ctrl.isSatisfied()">
    </vn-button>
    <vn-button 
        label="Not satisfied" 
        ng-click="reason.show()">
    </vn-button>
</vn-button-bar>
    
<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>
            <vn-label-value 
                label="Finish at" 
                value="{{$ctrl.getFinishTime()}}">
            </vn-label-value>
        </div>
        <vn-calendar
            vn-id="calendar"
            class="vn-pt-md"
            ng-model="$ctrl.date"
            has-events="$ctrl.hasEvents($day)">
        </vn-calendar>
    </div>
</vn-side-menu>
<vn-dialog
    vn-id="addTimeDialog"
    on-accept="$ctrl.addTime()"
    message="Add time">
    <tpl-body>
        <vn-input-time
            vn-one
            vn-focus
            ng-model="$ctrl.newTimeEntry.timed"
            label="Hour"
            required="true">
        </vn-input-time>
        <vn-autocomplete
            label="Type"
            ng-model="$ctrl.newTimeEntry.direction"
            data="$ctrl.entryDirections"
            select-fields="['code','description']"
            show-field="description"
            value-field="code"
            required="true">
        </vn-autocomplete>
    </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-accept="$ctrl.deleteTimeEntry()"
    message="This time entry will be deleted"
    question="Are you sure you want to delete this entry?">
</vn-confirm>

<!-- Edit entry Popover -->
<vn-popover vn-id="editEntry">
    <vn-horizontal class="vn-pa-sm edit-time-entry">
        <vn-autocomplete class="dense"
            ng-model="$ctrl.selectedRow.direction"
            data="$ctrl.entryDirections"
            select-fields="['code','description']"
            show-field="description"
            value-field="code">
        </vn-autocomplete>
        <vn-icon-button vn-none
            icon="check"
            vn-tooltip="Save"
            ng-click="$ctrl.save()">
        </vn-icon-button>
    </vn-horizontal>
</vn-popover>

<vn-dialog
    vn-id="reason"
    on-accept="$ctrl.isUnsatisfied()">
    <tpl-body>
        <vn-textarea
            label="Reason"
            ng-model="$ctrl.reason"
            required="true"
            rows="3">
        </vn-textarea>
    </tpl-body>
    <tpl-buttons>
        <input type="button" response="cancel" translate-attr="{value: 'Cancel'}"/>
        <button response="accept" translate>Save</button>
    </tpl-buttons>
</vn-dialog>