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

120 lines
4.4 KiB
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-md">
<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' : 'arrow_back'
}}"
title="{{
::(hour.direction == 'in' ? 'In' : '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 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
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-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-accept="$ctrl.deleteTimeEntry()"
message="This time entry will be deleted"
question="Are you sure you want to delete this entry?">
</vn-confirm>