salix/modules/worker/front/calendar/index.html

<vn-crud-model
    url="AbsenceTypes"
    data="absenceTypes"
    auto-load="true">
</vn-crud-model>
<div ng-if="$ctrl.card.hasWorkCenter">
    <div class="vn-w-lg">
        <vn-card class="vn-pa-sm calendars">
            <vn-icon ng-if="::$ctrl.isSubordinate" icon="info" color-marginal
                vn-tooltip="To start adding absences, click an absence type from the right menu and then on the day you want to add an absence">
            </vn-icon>
            <vn-calendar
                ng-repeat="month in $ctrl.months"
                data="$ctrl.events"
                default-date="month"
                format-day="$ctrl.formatDay($day, $element)"
                display-controls="false"
                hide-contiguous="true"
                hide-year="true"
                on-selection="$ctrl.onSelection($event, $days)">
            </vn-calendar>
        </vn-card>
    </div>
</div>
<div
    ng-if="!$ctrl.card.hasWorkCenter"
    class="bg-title"
    translate>
    Autonomous worker
</div>
<vn-side-menu side="right">
    <div class="vn-pa-md">
        <div class="totalBox vn-mb-sm" style="text-align: center;">
            <h6>{{'Contract' | translate}} #{{$ctrl.businessId}}</h6>
            <div>
                {{'Used' | translate}} {{$ctrl.contractHolidays.holidaysEnjoyed || 0}}
                {{'of' | translate}} {{$ctrl.contractHolidays.totalHolidays || 0}} {{'days' | translate}}
            </div>
            <div>
                {{'Spent' | translate}} {{$ctrl.contractHolidays.hoursEnjoyed || 0}}
                {{'of' | translate}} {{$ctrl.contractHolidays.totalHours || 0}} {{'hours' | translate}}
            </div>
            <div>
                {{'Paid holidays' | translate}} {{$ctrl.contractHolidays.payedHolidays || 0}} {{'days' | translate}}
            </div>
        </div>

        <div class="totalBox" style="text-align: center;">
            <h6>{{'Year' | translate}} {{$ctrl.year}}</h6>
            <div>
                {{'Used' | translate}} {{$ctrl.yearHolidays.holidaysEnjoyed || 0}}
                {{'of' | translate}} {{$ctrl.yearHolidays.totalHolidays || 0}} {{'days' | translate}}
            </div>
            <div>
                {{'Spent' | translate}} {{$ctrl.yearHolidays.hoursEnjoyed || 0}}
                {{'of' | translate}} {{$ctrl.yearHolidays.totalHours || 0}} {{'hours' | translate}}
            </div>
        </div>

        <div class="vn-pt-md">
            <vn-autocomplete label="Year"
                data="$ctrl.yearFilter"
                ng-model="$ctrl.year"
                show-field="year"
                value-field="year"
                order="DESC">
            </vn-autocomplete>
            <vn-autocomplete label="Contract"
                url="Workers/{{$ctrl.$params.id}}/contracts"
                fields="['started', 'ended']"
                ng-model="$ctrl.businessId"
                search-function="{businessFk: $search}"
                show-field="businessFk"
                value-field="businessFk"
                order="businessFk DESC"
                limit="5">
                <tpl-item>
                    <div>#{{businessFk}}</div>
                    <div class="text-caption text-secondary">
                        {{started | date: 'dd/MM/yyyy'}} - {{ended ? (ended | date: 'dd/MM/yyyy') : 'Indef.'}}
                    </div>
                </tpl-item>
            </vn-autocomplete>
        </div>
    <div name="absenceTypes" class="input vn-py-md" style="overflow: hidden;">
        <vn-chip ng-repeat="absenceType in absenceTypes" ng-class="::{'selectable': $ctrl.isSubordinate}" ng-click="$ctrl.pick(absenceType)">
        <vn-avatar ng-style="{backgroundColor: absenceType.rgb}">
        <vn-icon class="check" icon="check" ng-if="absenceType.id == $ctrl.absenceType.id"></vn-icon>

    </vn-avatar>
    {{absenceType.name}}
</vn-chip>
</div>
<div class="vn-py-md">
    <vn-chip>
        <vn-avatar class="festive">
        </vn-avatar>
        <span translate>Festive</span>
    </vn-chip>
    <vn-chip>
        <vn-avatar class="today">
        </vn-avatar>
        <span translate>Current day</span>
    </vn-chip>
</div>
</div>
</vn-side-menu>

<vn-confirm
    vn-id="confirm"
    message="This item will be deleted"
    question="Are you sure you want to continue?">
</vn-confirm>