TypeScript code sample

calendar-active.component.ts

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import {
    Frame, ScopeService, Event, DataService, EntityType,
    SchedulerItem, SchedulerItemData, EventType, Lookup, Group, ContextFactory,
    ColorUtils
} from 'app.index';

@Component({
    moduleId: module.id,
    selector: 'q-calendar-active',
    templateUrl: 'calendar-active.html',
    styleUrls: ['calendar-active.css'],
    encapsulation: ViewEncapsulation.None
})
export class CalendarActiveComponent implements OnInit {

    items: Promise<ReadonlyArray<SchedulerItem<Event>>> | ReadonlyArray<SchedulerItem<Event>> = Object.freeze([]);

    date: Date;

    private getRole: (id: string) => Promise<Group>;

    constructor(private _scope: ScopeService, private _dataService: DataService, private _contextFactory: ContextFactory) {

        this.getRole = _.memoize((id: string) => this.loadRole(id));
    }

    async ngOnInit() {

        this._scope.post<Frame>(ScopeService.EVENT_ACTIVE)
            .subscribe(async o => {
                this.items = this.createItems();
                this.date = o.after.inclusiveStart;
            });

        this.items = this.createItems();
        this.date = this._scope.active.inclusiveStart;
    }

    async loadRole(id: string): Promise<Group> {
        if (!id) {
            return null;
        }
        let context = await this._contextFactory.create();
        let role = (await context.reload(new Group({ id: id, type: EntityType.Group })))[0];
        return <Group>role;
    }

    toDate(date: Date | moment.Moment): Date {
        if (!date) {
            return null;
        }

        if (date instanceof Date) {
            return date;
        } else {
            return date.toDate();
        }
    }

    async generateTestData() {

        let context = await this._contextFactory.create();

        let roles = (await context.fetch({ audience: [EntityType.Group] })).results;

        let locations = (await context.fetch({ audience: [EntityType.Location] })).results;

        let events = [];

        for (let i of _.range(1, 10, 1)) {

            let role = <Group>roles[_.random(0, roles.length - 1, false)];
            let location = locations[_.random(0, locations.length - 1, false)];

            let start = moment.localNoTZ().add(_.random(-3, 3, false), 'day').hour(_.random(1, 15, false)).freeze();

            let end = start.add(_.random(8, 12, false), 'hour');

            let event = new Event({
                type: EntityType.Event,
                label: 'event ' + i,
                location: location,
                //assignments: null,
                eventType: EventType.Demand,
                role: new Lookup(role),
                inclusiveStart: start.toDate(),
                exclusiveEnd: end.toDate()
            });

            events.push(event);
        }

        await this._dataService.add(...events);

        this.items = await this.createItems();
    }


    private async createItems(): Promise<ReadonlyArray<SchedulerItem<Event>>> {
        let result = await this._dataService.query(this._scope.active, EntityType.Event);

        let filteredResult = result
            .filter(v => (<Event>v).eventType === EventType.Demand);

        let items = await Promise.all(filteredResult
            .map((v) => this.createSchedulerItem(<Event>v)));

        return Object.freeze(items);
    }


    private async createSchedulerItem(event: Event): Promise<SchedulerItem<Event>> {

        let schedulerItemData: SchedulerItemData<Event> = {
            id: event.id,
            start: this.toDate(event.inclusiveStart),
            end: this.toDate(event.exclusiveEnd),
            isAllDay: false,
            title: event.label,
            additionalData: event
        };

        if (event.role && event.role.value) {
            let role = await this.getRole(<string>event.role.value);
            if (role.color) {
                let color = ColorUtils.transformHsl(role.color, (hsl) => {
                    // if it's not gray, then desaturate ang light
                    if (hsl.s > 10) {
                        hsl.s = 61;
                        hsl.l = 77;
                    }
                    return hsl;
                });
                schedulerItemData = { ...schedulerItemData, ...{ backgroundColor: color } };
            }
        }

        return Object.freeze(schedulerItemData);
    }
}