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

import ngModule from '../module';
import './style.scss';

class Controller {
    constructor($element, $http) {
        this.element = $element[0];
        this.$http = $http;
        this.date = new Date();
        this.events = {};
    }

    get date() {
        return this._date;
    }

    set date(value) {
        this._date = value;
        value.setHours(0, 0, 0, 0);

        const started = new Date(value.getTime());
        started.setMonth(0);
        started.setDate(1);
        this.started = started;

        const ended = new Date(value.getTime());
        ended.setMonth(12);
        ended.setDate(0);
        this.ended = ended;

        this.months = new Array(12);

        for (let i = 0; i < this.months.length; i++) {
            const now = new Date(value.getTime());
            now.setDate(1);
            now.setMonth(i);
            this.months[i] = now;
        }
    }

    get worker() {
        return this._worker;
    }

    set worker(value) {
        this._worker = value;
        if (!value) return;

        let params = {
            workerFk: this.worker.id,
            started: this.started,
            ended: this.ended
        };
        this.$http.get(`WorkerCalendars/absences`, {params})
            .then(res => this.onData(res.data));
    }

    onData(data) {
        this.events = {};
        this.calendar = data.calendar;

        let addEvent = (day, event) => {
            this.events[new Date(day).getTime()] = event;
        };

        if (data.holidays) {
            data.holidays.forEach(holiday => {
                const holidayDetail = holiday.detail && holiday.detail.description;
                const holidayType = holiday.type && holiday.type.name;
                const holidayName = holidayDetail || holidayType;

                addEvent(holiday.dated, {
                    name: holidayName,
                    color: '#ff0'
                });
            });
        }
        if (data.absences) {
            data.absences.forEach(absence => {
                let type = absence.absenceType;
                addEvent(absence.dated, {
                    name: type.name,
                    color: type.rgb
                });
            });
        }

        this.repaint();
    }

    repaint() {
        let calendars = this.element.querySelectorAll('vn-calendar');
        for (let calendar of calendars)
            calendar.$ctrl.repaint();
    }

    formatDay(day, element) {
        let event = this.events[day.getTime()];
        if (!event) return;

        let dayNumber = element.firstElementChild;
        dayNumber.title = event.name;
        dayNumber.style.backgroundColor = event.color;
        dayNumber.style.color = 'rgba(0, 0, 0, 0.7)';
    }
}
Controller.$inject = ['$element', '$http'];

ngModule.component('vnWorkerCalendar', {
    template: require('./index.html'),
    controller: Controller,
    bindings: {
        worker: '<'
    }
});