Projekt

Obecné

Profil

Stáhnout (2.93 KB) Statistiky
| Větev: | Tag: | Revize:
1
import {ChangeDetectionStrategy, Component, EventEmitter, Output} from '@angular/core';
2
import {CalendarEvent, CalendarView} from 'angular-calendar';
3
import {LocalizationService} from '../localization/localization.service';
4
import {VacationType} from '../enums/common.enum';
5
import {Calendar} from '../models/calendar.model';
6
import {DateToolsService} from '../services/util/date-tools.service';
7
import {Subject} from 'rxjs';
8

    
9
@Component({
10
  selector: 'app-day-picker',
11
  changeDetection: ChangeDetectionStrategy.OnPush,
12
  styleUrls: ['day-picker.component.sass'],
13
  templateUrl: 'day-picker.component.html'
14
})
15
export class DayPickerComponent {
16

    
17
  private locale;
18

    
19
  private vacationType = VacationType;
20

    
21
  private currentMonth: number;
22

    
23
  private currentYear: number;
24

    
25
  // Type of calendar (constant)
26
  view: CalendarView = CalendarView.Month;
27

    
28
  // Selected date for this component's purpose
29
  private viewDate: Date;
30

    
31
  // Events which are shown in calendar (title = VacationType)
32
  private events: CalendarEvent[] = [];
33

    
34
  // EventEmitter informing about changes of selected date
35
  @Output() selectedDate = new EventEmitter<Date>();
36

    
37
  // EventEmitter informing about changes of selected month (emits start of the selected month)
38
  @Output() selectedMonth = new EventEmitter<Date>();
39

    
40
  private refresh: Subject<any> = new Subject();
41

    
42
  constructor(
43
    private localizationService: LocalizationService,
44
    private dateToolsService: DateToolsService) {
45

    
46
    this.locale = localizationService.getCurrentLocale();
47
    localizationService.currentLanguageSubject
48
      .subscribe((data) => {
49
        this.locale = data;
50
      });
51

    
52
    this.viewDate = new Date();
53
    this.currentMonth = this.viewDate.getMonth();
54
    this.currentYear = this.viewDate.getFullYear();
55

    
56
    // Calendar component needs to be refreshed on language switch or else language switch doesn't have an effect
57
    this.localizationService.currentLanguageSubject.subscribe(e => this.refresh.next());
58
  }
59

    
60
  public setVacation(vacations: Calendar[]) {
61
    this.events = [];
62

    
63
    for (const vac of vacations) {
64
      this.events.push({
65
        start: this.dateToolsService.toDate(vac.date, vac.from),
66
        end: this.dateToolsService.toDate(vac.date, vac.to),
67
        title: vac.type
68
      });
69
    }
70

    
71
    this.refresh.next();
72
  }
73

    
74
  /**
75
   * Method that is invoked when user clicks on a day.
76
   * Sets selected date and emits event informing about new selected date.
77
   *
78
   * @param date Selected date
79
   */
80
  private dayClicked({ date }: { date: Date }): void {
81
    this.viewDate = date;
82
    this.selectedDate.emit(date);
83
  }
84

    
85
  private setMonth(newMonth: number): void {
86
    this.currentMonth = newMonth % 12;
87
    if (newMonth < 0) {
88
      this.currentMonth = 11;
89
      this.currentYear--;
90
    } else if (newMonth > 11) {
91
      this.currentMonth = 0;
92
      this.currentYear++;
93
    } else {
94
      this.currentMonth = newMonth;
95
    }
96

    
97
    this.selectedMonth.emit(new Date(this.currentYear, this.currentMonth, 1, 0, 0, 0));
98
  }
99
}
(3-3/4)