|
|
@@ -1,4 +1,6 @@
|
|
|
-import { Component, OnInit } from '@angular/core';
|
|
|
+import { Component, HostListener, OnInit } from '@angular/core';
|
|
|
+import { ResourcesService } from 'src/app/services/resources/resources.service';
|
|
|
+import { DomSanitizer } from '@angular/platform-browser';
|
|
|
|
|
|
@Component({
|
|
|
selector: 'app-test',
|
|
|
@@ -7,63 +9,132 @@ import { Component, OnInit } from '@angular/core';
|
|
|
})
|
|
|
export class TestComponent implements OnInit {
|
|
|
|
|
|
- public getMonthSelected: number;
|
|
|
- public getYearSelected: number;
|
|
|
+ public getDateSelected: Date;
|
|
|
+ public currentDate: Date;
|
|
|
public arrCalendarMonth: any[];
|
|
|
- public arrWeek: string[];
|
|
|
- constructor() {
|
|
|
- this.getMonthSelected = new Date().getMonth();
|
|
|
- this.getYearSelected = new Date().getFullYear();
|
|
|
-
|
|
|
+ public typeCalendar: 'Día' | 'Semana' | 'Mes';
|
|
|
+ public arrTimes: string[];
|
|
|
+ public arrWeek: Date[];
|
|
|
+ constructor(
|
|
|
+ public resourcesService: ResourcesService,
|
|
|
+ public sanitizer: DomSanitizer,
|
|
|
+ ) {
|
|
|
+ this.getDateSelected = new Date();
|
|
|
+ this.currentDate = new Date();
|
|
|
this.arrCalendarMonth = [];
|
|
|
- this.arrWeek = [
|
|
|
- 'Domingo',
|
|
|
- 'Lunes',
|
|
|
- 'Martes',
|
|
|
- 'Miercoles',
|
|
|
- 'Jueves',
|
|
|
- 'Viernes',
|
|
|
- 'Sábado',
|
|
|
- ]
|
|
|
+ this.arrTimes = [];
|
|
|
+ this.arrWeek = [];
|
|
|
+ this.typeCalendar = 'Semana';
|
|
|
+ this._generateTimes();
|
|
|
+
|
|
|
}
|
|
|
ngOnInit() {
|
|
|
- this.generateCalendar();
|
|
|
+ this.configTypeCalendar('Semana');
|
|
|
+ }
|
|
|
+
|
|
|
+ private _generateTimes() {
|
|
|
+ this.arrTimes = [ 'GMT-06' ];
|
|
|
+ let periodicidy: string = 'AM';
|
|
|
+ for (let hour = 1; hour < 13; hour++) {
|
|
|
+ this.arrTimes.push(`${hour} ${periodicidy}`)
|
|
|
+ if (periodicidy === 'AM' && hour === 12) {
|
|
|
+ hour = 1;
|
|
|
+ periodicidy = 'PM';
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.arrTimes.pop();
|
|
|
}
|
|
|
|
|
|
- public generateCalendar() {
|
|
|
- const YEAR_SLT: number = this.getYearSelected;
|
|
|
- const MONTH_SLT: number = this.getMonthSelected;
|
|
|
+ public configTypeCalendar(type: 'Día' | 'Semana' | 'Mes') {
|
|
|
+ this.typeCalendar = type;
|
|
|
+ switch (type) {
|
|
|
+ case 'Día':
|
|
|
+ break;
|
|
|
+ case 'Semana':
|
|
|
+ this._generateWeek();
|
|
|
+ break;
|
|
|
+ case 'Mes':
|
|
|
+ this._generateCalendar();
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ public returnToday() {
|
|
|
+ this.getDateSelected = new Date();
|
|
|
+ switch (this.typeCalendar) {
|
|
|
+ case 'Día':
|
|
|
+ break;
|
|
|
+ case 'Semana':
|
|
|
+ this._generateWeek();
|
|
|
+ break;
|
|
|
+ case 'Mes':
|
|
|
+ this._generateCalendar();
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ public previous() {
|
|
|
+ switch (this.typeCalendar) {
|
|
|
+ case 'Día':
|
|
|
+ this.getDateSelected.setDate(this.getDateSelected.getDate() - 1);
|
|
|
+ break;
|
|
|
+ case 'Semana':
|
|
|
+ this.getDateSelected.setDate(this.getDateSelected.getDate() - 7);
|
|
|
+ this._generateWeek();
|
|
|
+ break;
|
|
|
+ case 'Mes':
|
|
|
+ this.getDateSelected.setMonth(this.getDateSelected.getMonth() - 1);
|
|
|
+ this._generateCalendar();
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ public next() {
|
|
|
+ switch (this.typeCalendar) {
|
|
|
+ case 'Día':
|
|
|
+ this.getDateSelected.setDate(this.getDateSelected.getDate() + 1);
|
|
|
+ break;
|
|
|
+ case 'Semana':
|
|
|
+ this.getDateSelected.setDate(this.getDateSelected.getDate() + 7);
|
|
|
+ this._generateWeek();
|
|
|
+ break;
|
|
|
+ case 'Mes':
|
|
|
+ this.getDateSelected.setMonth(this.getDateSelected.getMonth() + 1);
|
|
|
+ this._generateCalendar();
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- let firstDateSelected: Date = new Date(YEAR_SLT, MONTH_SLT, 1);
|
|
|
- let lastDateSelected: Date = new Date(YEAR_SLT, MONTH_SLT+1, 0);
|
|
|
+ private _generateCalendar() {
|
|
|
+ const YEAR_SLT: number = this.getDateSelected.getFullYear();
|
|
|
+ const MONTH_SLT: number = this.getDateSelected.getMonth();
|
|
|
|
|
|
+ const FIRST_DATE: Date = new Date(YEAR_SLT, MONTH_SLT, 1);
|
|
|
+ const END_DATE: Date = new Date(YEAR_SLT, MONTH_SLT+1, 0);
|
|
|
|
|
|
let arrStartCalendar = [];
|
|
|
let arrEndCalendar = [];
|
|
|
for (let day = 0; day < 7; day++) {
|
|
|
- if (day < firstDateSelected.getDay()) {
|
|
|
- let diffDay = firstDateSelected.getDay() - day;
|
|
|
- let previuosDate = new Date(firstDateSelected);
|
|
|
- previuosDate.setDate(firstDateSelected.getDate() - diffDay);
|
|
|
+ if (day < FIRST_DATE.getDay()) {
|
|
|
+ let diffDay = FIRST_DATE.getDay() - day;
|
|
|
+ let previuosDate = new Date(FIRST_DATE);
|
|
|
+ previuosDate.setDate(FIRST_DATE.getDate() - diffDay);
|
|
|
arrStartCalendar.push(previuosDate);
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
- if (day > lastDateSelected.getDay()) {
|
|
|
- let diffDay = day - lastDateSelected.getDay();
|
|
|
- let nextDate = new Date(lastDateSelected);
|
|
|
- nextDate.setDate(lastDateSelected.getDate() + diffDay);
|
|
|
+ if (day > END_DATE.getDay()) {
|
|
|
+ let diffDay = day - END_DATE.getDay();
|
|
|
+ let nextDate = new Date(END_DATE);
|
|
|
+ nextDate.setDate(END_DATE.getDate() + diffDay);
|
|
|
arrEndCalendar.push(nextDate);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-
|
|
|
this.arrCalendarMonth = [];
|
|
|
let numWeeks = 0;
|
|
|
this.arrCalendarMonth[numWeeks] = [];
|
|
|
- for (let date = firstDateSelected.getDate(); date <= lastDateSelected.getDate(); date++) {
|
|
|
+ for (let date = FIRST_DATE.getDate(); date <= END_DATE.getDate(); date++) {
|
|
|
let DATE_MONTH: Date = new Date(YEAR_SLT, MONTH_SLT, date);
|
|
|
this.arrCalendarMonth[numWeeks].push(DATE_MONTH)
|
|
|
- if (DATE_MONTH.getDay() === 6) {
|
|
|
+ if (DATE_MONTH.getDay() === 6 && date < END_DATE.getDate() ) {
|
|
|
numWeeks++;
|
|
|
this.arrCalendarMonth[numWeeks] = [];
|
|
|
}
|
|
|
@@ -79,5 +150,24 @@ export class TestComponent implements OnInit {
|
|
|
}
|
|
|
this.arrCalendarMonth[numWeeks] = element;
|
|
|
}
|
|
|
+
|
|
|
+ }
|
|
|
+ private _generateWeek() {
|
|
|
+ this.arrWeek = [];
|
|
|
+ for (let day = 0; day < 7; day++) {
|
|
|
+ if (day < this.getDateSelected.getDay()) {
|
|
|
+ let diff = this.getDateSelected.getDay() - day;
|
|
|
+ let previuosDate = new Date(this.getDateSelected);
|
|
|
+ previuosDate.setDate(this.getDateSelected.getDate() - diff);
|
|
|
+ this.arrWeek.push(previuosDate);
|
|
|
+ } else if (day === this.getDateSelected.getDay()) {
|
|
|
+ this.arrWeek.push(this.getDateSelected);
|
|
|
+ } else {
|
|
|
+ let diff = day - this.getDateSelected.getDay();
|
|
|
+ let nextDate = new Date(this.getDateSelected);
|
|
|
+ nextDate.setDate(this.getDateSelected.getDate() + diff);
|
|
|
+ this.arrWeek.push(nextDate);
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
