src/app/custom_modules/calendar/calendar.component.ts

/*
******************************************************************************
* Copyright © 2018 PTA GmbH.
* All rights reserved. This program and the accompanying materials
* are made available under the terms of the Eclipse Public License v1.0
* which accompanies this distribution, and is available at
*
*     http://www.eclipse.org/legal/epl-v10.html
*
******************************************************************************
*/
import { Component, OnInit, ViewChild, TemplateRef } from '@angular/core';
import { GridMeasureService } from './../../services/grid-measure.service';
import { GridMeasure } from './../../model/grid-measure';

import {
  startOfDay,
  endOfDay,
  subDays,
  addDays,
  endOfMonth,
  isSameDay,
  isSameMonth,
  addHours
} from 'date-fns';
import {
  CalendarEvent,
  CalendarEventAction,
  CalendarEventTimesChangedEvent,
  CalendarDateFormatter
} from 'angular-calendar';
import { Subject } from 'rxjs/Subject';
import { UndoRedoStackComponent } from '../undo-redo-stack/undo-redo-stack.component';
import { CustomDateFormatter } from './custom-date-formatter-provider';
import { Router } from '@angular/router';
import { ModeValidator } from '../helpers/mode-validator';

const colors: any = {
  red: {
    primary: '#ad2121',
    secondary: '#FAE3E3'
  },
  blue: {
    primary: '#1e90ff',
    secondary: '#D1E8FF'
  },
  yellow: {
    primary: '#e3bc08',
    secondary: '#FDF1BA'
  }
};
@Component({
  selector: 'app-custom-calendar',
  templateUrl: './calendar.component.html',
  styleUrls: ['./calendar.component.css'],
  providers: [
    {
      provide: CalendarDateFormatter,
      useClass: CustomDateFormatter
    }
  ]
})
export class CustomCalendarComponent implements OnInit {

  @ViewChild('modalContent') modalContent: TemplateRef<any>;
  weekStartsOn = 1;
  locale = 'de';
  undoRedoStack = new UndoRedoStackComponent();
  eventTypes = colors;
  eventTypeKeys = ['blue', 'red', 'yellow'];

  activeDayIsOpen = true;
  refresh: Subject<any> = new Subject();

  modalData: {
    action: string;
    event: CalendarEvent;
  };

  view: any = 'week';
  currDate: Date = new Date();
  currentEditEventStart: Date = new Date();
  currentEditEventEnd: Date = new Date();
  currentEditEvent: CalendarEvent;

  events = new Array<CalendarEvent>();

  constructor(
    private gridMeasureService: GridMeasureService,
    private router: Router,
    public modeValidator: ModeValidator) { }

  ngOnInit() {

    this.gridMeasureService.getCalender()
      .subscribe(singleGridMeasures => {
        const editAction = <CalendarEventAction>{
          label: '<span class="glyphicon glyphicon-pencil"></span>',
          onClick: ({ event }: { event: CalendarEvent }): void => {
            this.eventClicked('edit', event);
          }
        };
        const viewAction = <CalendarEventAction>{
          label: '<span class="glyphicon glyphicon-eye-open"></span>',
          onClick: ({ event }: { event: CalendarEvent }): void => {
            this.eventClicked('view', event);
          }
        };
        singleGridMeasures.forEach(singleGM => {
          if (!singleGM.plannedStarttimSinglemeasure || !singleGM.plannedEndtimeSinglemeasure) {
            console.log('No valide date values for ' + singleGM.singleGridMeasureTitle);
            console.log('Planned End Time Gridmeasure ' + singleGM.plannedEndtimeSinglemeasure);
            console.log('Start Time First Sequence: ' + singleGM.plannedStarttimSinglemeasure);
          } else {
            this.events.push(<CalendarEvent><GridMeasure>{
              id: singleGM.gridMeasureId,
              title: singleGM.singleGridMeasureTitle || 'TITLE NOT DEFINED',
              start: new Date(singleGM.plannedStarttimSinglemeasure),
              end: new Date(singleGM.plannedEndtimeSinglemeasure),
              color: colors.red,
              draggable: false,
              actions: [this.modeValidator.isEditModeAllowed(singleGM.gridMeasureStatusId) ? editAction : viewAction],
              resizable: {
                beforeStart: false,
                afterEnd: false
              },
              meta: singleGM
            });
          }
        });

        this.currDate = new Date();
        this.showGridMeasuresIfThere();
      });
  }

  private showGridMeasuresIfThere() {
    const numberOfGMsInActualDay = this.events.filter(evt =>
      (evt.start.getDate() <= this.currDate.getDate() && evt.end.getDate() >= this.currDate.getDate()));

    this.activeDayIsOpen = numberOfGMsInActualDay.length > 0;
  }

  dayClicked({ date, events }: { date: Date; events: CalendarEvent[] }): void {
    this.currentEditEvent = null;
    if (isSameMonth(date, this.currDate)) {
      if (
        (isSameDay(this.currDate, date) && this.activeDayIsOpen === true) ||
        events.length === 0
      ) {
        this.activeDayIsOpen = false;
      } else {
        this.activeDayIsOpen = true;
        this.currDate = date;
      }
    }
  }

  eventClicked(action: string, event: CalendarEvent<GridMeasure>): void {
    const isEditModeAllowed = this.modeValidator.isEditModeAllowed(event.meta.statusId);
    this.router.navigate(['/gridMeasureDetail/', event.id, isEditModeAllowed ? 'edit' : 'view']);
  }

  eventTimesChanged(eventchanged: CalendarEventTimesChangedEvent): void {
    const event = <CalendarEvent><GridMeasure>eventchanged.event;
    event.meta.plannedStarttimSinglemeasure = eventchanged.newStart;
    event.meta.plannedEndtimeSinglemeasure = eventchanged.newEnd;

    event.start = eventchanged.newStart;
    event.end = eventchanged.newEnd;
    this.refresh.next();
  }

  addEvent(): void {
    this.events.push({
      title: 'New event',
      start: startOfDay(new Date()),
      end: endOfDay(new Date()),
      color: colors.red,
      draggable: true,
      resizable: {
        beforeStart: true,
        afterEnd: true
      }
    });
    this.refresh.next();
  }
}