Notes

import { Component, OnInit, ElementRef } from '@angular/core';
import { Actions, Effect } from '@ngrx/effects';
import { Store } from '@ngrx/store';
import * as fromRoot from '@core/store';

import { DashboardWidget } from '@core/entities/dashboard-widget';
import { RouterService } from '@services/router.service';
import { WidgetActionTypes } from '@store/ui/widget/widget.actions';
import { WidgetActionRequest } from '@core/model/widget-action.model';
import * as moment from 'moment';

/**
* Enumerate the ID of the Color from JSON.
*/
enum ColorTask {
Blue,
Indigo,
Purple,
Pink,
Red,
Orange,
Yellow,
Green,
Teal,
Cyan
}

@Component({
selector: 'sdi-echarts-calendar-widget',
templateUrl: './echarts-calendar-widget.component.html',
styleUrls: [ './echarts-calendar-widget.component.scss' ]
})
export class EchartsCalendarWidgetComponent extends DashboardWidget implements OnInit {

private lastAction: WidgetActionRequest;
private rows: any;
days: string[] = ["L", "M", "M", "G", "V", "S", "D"];
daysOfMonth = new Array();
weeks = new Array();
height: any;
listTask = new Array();
listColor = new Array();

allColorOfDay = [];
allTaskOfDay = [];
allData: any;
saveTempListTask = [];

currentMonth = parseInt(moment().format('M'))-1;
counterCalendar: string;
counterCalendarSlash = 0;

filters = this.getColors();
selectedFilter = new Array();

constructor(
readonly store: Store<fromRoot.State>,
readonly actions$: Actions,
readonly routerService: RouterService,
readonly element: ElementRef
) {
super(store, actions$, element)
}

ngOnInit() {
super.ngOnInit();

this.resize();
this.createWeeks();

this.getConfig((config) => {
if (this.widget && this.widget.lazyData) {
const newAction = {
type: WidgetActionTypes.LoadWidgetData,
payload: {
id: this.widget.id,
idReq: this.widget.lazyData
}
};
this.setLastAction(newAction);
}
});

this.getDataWhenConfigIsReady(
data => {
if (data && data.data && data.data.rows) {
this.rows = data.data.rows;
this.getItems(data.data.rows);
} else {
this.getItems([]);
}
}
);
}

private resize() {
this.getSize(this.element);
this.height = this.size.height - 47 + 'px';
}

private getItems(data) {
this.listTask.length = 0;
var monthToTake = this.getMonthID();
this.allData = data;
const firstDay = parseInt(this.getFirstDay())==0 ? 6 : parseInt(this.getFirstDay())-1; //N.B. 0-sunday, FIXED
var counter: number;
var i = 0;

//First empty Days, if necessary
for(counter=0; counter<firstDay; counter++) {
this.listTask[counter] = new Array();
this.listColor[counter] = new Array();
}

//Fill other days
for (let i = 0; i < data.length; i++) {
var dateTask = moment(data[i][0]).utc().format("MM");
if (dateTask == monthToTake) {
var internalDays = parseInt(moment(data[i][0]).utc().format("DD"));
if (this.listTask[counter+internalDays-1] == undefined) {
this.listTask[counter+internalDays-1] = new Array(data[i][2]);
this.listColor[counter+internalDays-1] = new Array(ColorTask[data[i][3]]);
} else if(this.listTask[counter+internalDays-1].length < 3) {
this.listTask[counter+internalDays-1].push(data[i][2]);
this.listColor[counter+internalDays-1].push(ColorTask[data[i][3]]);
} else {
this.countTaskPerDay(internalDays.toString());
const countsColor = new Array(6).fill(0); //Red, Yellow, Green, Blue, Purple, undefined(default)

for (let i=0; i<this.allColorOfDay.length; i++) {
switch(this.allColorOfDay[i]) {
case ColorTask[0]:
countsColor[0]++;
break;
case ColorTask[1]:
countsColor[1]++;
break;
case ColorTask[2]:
countsColor[2]++;
break;
case ColorTask[3]:
countsColor[3]++;
break;
case ColorTask[4]:
countsColor[4]++;
break;
default:
countsColor[5]++;
break;
}
}
let cssTasks = document.getElementsByClassName('tasks') as HTMLCollectionOf<HTMLElement>;
let cssTasksSpace = document.getElementsByClassName('slash') as HTMLCollectionOf<HTMLElement>;
this.listTask[counter+internalDays-1] = new Array();
this.listColor[counter+internalDays-1] = new Array();

for (let i=0; i<countsColor.length; i++) {
if (countsColor[i] != 0) {
this.listTask[counter+internalDays-1].push(countsColor[i]);
this.listColor[counter+internalDays-1].push(ColorTask[i]);
}
if (i != countsColor.length-1) {
setTimeout(() => this.checkMultiTask(cssTasks, cssTasksSpace), 0);
}
}
}
}
}
//console.log("Data: "+moment(data[0][0]).utc().format("YYYY-MM-DD"));
//console.log("Task: "+data[0][2]);
//console.log("ID Color: "+data[0][3]);
}

private setLastAction(newAction: WidgetActionRequest) {
this.lastAction = newAction;
}

/**
* Create an array of all days of a specific month.
* @returns array of all days.
*/
getDaysArrayByMonth() {
var daysInMonth = moment().month(this.currentMonth).daysInMonth(); //Get days of a specific month.
var arrDays = [];
while(daysInMonth) {
var current = moment().month(this.currentMonth).date(daysInMonth);
arrDays.push(current);
daysInMonth--;
}
return arrDays.reverse();
}

createWeeks() {
this.daysOfMonth = [];
this.weeks = [];
var schedule = this.getDaysArrayByMonth();
const firstDay = parseInt(this.getFirstDay())==0 ? 6 : parseInt(this.getFirstDay())-1; //N.B. 0-sunday, FIXED
var counter = 0;
var i = 0;

//First row
for(; counter<firstDay; counter++) {
this.weeks[counter] = " ";
}

//All rows
for (var j=0; j<schedule.length; counter++, j++) {
this.weeks[counter%7] = schedule[j].format("DD");
if (counter!=0 && (this.weeks.length)%7 == 0) {
this.daysOfMonth[i] = this.weeks;
i++;
this.weeks = [];
}
}

//Last row
for (; (this.weeks.length)%7!=0; counter++) {
this.weeks[counter%7] = " ";
}
this.daysOfMonth[i] = this.weeks;
}

/**
* Loop the Data and find all task per day of a specific date.
* @param weekDay to find.
*/
countTaskPerDay(weekDay: string) {
this.allColorOfDay = [];
this.allTaskOfDay = [];
const monthInterestedIn = this.getMonthID();
for (let i = 0; i<this.allData.length; i++) {
var dayTask = moment(this.allData[i][0]).utc().format("DD")
var dateTask = moment(this.allData[i][0]).utc().format("MM");
if (dateTask == monthInterestedIn && dayTask == weekDay && this.selectedFilter.length == 0) {
this.allColorOfDay.push(ColorTask[this.allData[i][3]]);
this.allTaskOfDay.push(this.allData[i][2]);
} else if (dateTask == monthInterestedIn && dayTask == weekDay && this.selectedFilter.length !== 0 && this.selectedFilter.indexOf(this.allData[i][3]) !== -1) {
this.allColorOfDay.push(ColorTask[this.allData[i][3]]);
this.allTaskOfDay.push(this.allData[i][2]);
}
}
}

getMonth() {
return moment().month(this.currentMonth).format('MMMM');
}

getMonthID() {
return moment().month(this.currentMonth).format('MM');
}

/**
* Get the id of the first days of the week of the specific month.
* @returns id of the day of week.
*/
getFirstDay() {
return moment().month(this.currentMonth).startOf('month').format('d');
}

getYear() {
return moment().format('YYYY');
}

/**
* Method that display all task of the day
*/
displayTask(text: number, weekDay: string) {
this.countTaskPerDay(weekDay);
if (text < 7) {
this.closeAllPopup();
document.getElementById("popup_1000").style.display = "block";
} else if (text < 14) {
this.closeAllPopup();
document.getElementById("popup_1001").style.display = "block";
} else if (text < 21) {
this.closeAllPopup();
document.getElementById("popup_1002").style.display = "block";
} else if (text < 28) {
this.closeAllPopup();
document.getElementById("popup_1003").style.display = "block";
} else {
this.closeAllPopup();
document.getElementById("popup_1004").style.display = "block";
}
}

closeBox(id: number) {
document.getElementById(""+id).style.display = 'none';
}

/**
* Method to change the month to display.
* @param prevNext -1 to previous or 1 to next.
*/
changeMonth(next: number) {
this.closeAllPopup();
console.log(this.currentMonth)
if (!next) {
this.currentMonth = (this.currentMonth-1) < 0 ? 0 : this.currentMonth-1;
} else {
this.currentMonth = (this.currentMonth+1) > 11 ? 11 : this.currentMonth+1;
}
this.createWeeks();
this.getDataWhenConfigIsReady(
data => {
if (data && data.data && data.data.rows) {
this.rows = data.data.rows;
this.getItems(data.data.rows);
} else {
this.getItems([]);
}
}
);
}

/**
* Get all colors from Enum.
* @returns fill res with color.
*/
getColors() {
var res = [];
for (let i=0; i<Object.values(ColorTask).length; i++) {
if (ColorTask[i] != undefined) res.push(ColorTask[i]);
}
return res;
}

/**
* Method to apply filter to calendar.
* @param num of the filter to apply.
*/
applyFilter(num: number) {
this.selectedFilter.push(num);
if (this.saveTempListTask.length == 0) this.saveTempListTask = [...this.listTask];
this.listTask.length = 0;
this.listColor.length = 0;
var monthToTake = this.getMonthID();
const firstDay = parseInt(this.getFirstDay())==0 ? 6 : parseInt(this.getFirstDay())-1; //N.B. 0-sunday, FIXED
var counter: number;

//First empty Days, if necessary
for(counter=0; counter<firstDay; counter++) {
this.listTask[counter] = new Array();
this.listColor[counter] = new Array();
}

let cssTasks = document.getElementsByClassName('tasks') as HTMLCollectionOf<HTMLElement>;
let cssTasksSpace = document.getElementsByClassName('slash') as HTMLCollectionOf<HTMLElement>;

//Fill other days
for (let i = 0; i < this.allData.length; i++) {
var dateTask = moment(this.allData[i][0]).utc().format("MM");
if (dateTask == monthToTake) {
var internalDays = parseInt(moment(this.allData[i][0]).utc().format("DD"));
if (this.allData[i][3] == num || this.selectedFilter.indexOf(this.allData[i][3]) !== -1) {
if (this.listTask[counter+internalDays-1] == undefined) {
this.listTask[counter+internalDays-1] = new Array(this.allData[i][2]);
this.listColor[counter+internalDays-1] = new Array(ColorTask[this.allData[i][3]]);
} else if(this.listTask[counter+internalDays-1].length < 3) {
this.listTask[counter+internalDays-1].push(this.allData[i][2]);
this.listColor[counter+internalDays-1].push(ColorTask[this.allData[i][3]]);
} else {
this.countTaskPerDay(internalDays.toString());
const countsColor = new Array(6).fill(0); //Red, Yellow, Green, Blue, Purple, undefined(default)
for (let i=0; i<this.allColorOfDay.length; i++) {
switch(this.allColorOfDay[i]) {
case ColorTask[0]:
countsColor[0]++;
break;
case ColorTask[1]:
countsColor[1]++;
break;
case ColorTask[2]:
countsColor[2]++;
break;
case ColorTask[3]:
countsColor[3]++;
break;
case ColorTask[4]:
countsColor[4]++;
break;
default:
countsColor[5]++;
break;
}
}
this.listTask[counter+internalDays-1] = new Array();
this.listColor[counter+internalDays-1] = new Array();
for (let i=0; i<countsColor.length; i++) {
if (countsColor[i] != 0) {
this.listTask[counter+internalDays-1].push(countsColor[i]);
this.listColor[counter+internalDays-1].push(ColorTask[i]);
}
setTimeout(() => this.checkMultiTask(cssTasks, cssTasksSpace), 0);
}
}
}
}
}
this.closeAllPopup();
}

checkMultiTask(cssTasks: HTMLCollectionOf<HTMLElement>, cssTasksSpace: HTMLCollectionOf<HTMLElement>) {
const firstDay = parseInt(this.getFirstDay())==0 ? 6 : parseInt(this.getFirstDay())-1; //N.B. 0-sunday, FIXED
for(let a=0; a<45; a++) {
this.countTaskPerDay((a<10 ? "0"+a : a).toString());
const temp = (a+firstDay)<10 ? "0"+(a+firstDay) : (a+firstDay);
if (this.allTaskOfDay.length > 3) {
for (let x=0; x<100; x++) {
if (document.getElementById("tasks-"+(temp.toString())+(x<10 ? "0"+x : x))) {
cssTasks["tasks-"+(temp.toString())+(x<10 ? "0"+x : x)].style.width = "auto";
cssTasks["tasks-"+(temp.toString())+(x<10 ? "0"+x : x)].style.padding = "5px";
cssTasks["tasks-"+(temp.toString())+(x<10 ? "0"+x : x)].style.margin = "2px";
cssTasks["tasks-"+(temp.toString())+(x<10 ? "0"+x : x)].style.position = "relative";
if (document.getElementById("slash-"+(temp.toString())+(x<10 ? "0"+x : x))) cssTasksSpace["slash-"+(temp.toString())+(x<10 ? "0"+x : x)].style.display = "none";
}
}
}
}
}

applyFilterReset() {
this.closeAllPopup();
this.selectedFilter = [];
this.getItems(this.allData);
}

/**
* Fix the Bug on Opened Popup
*/
closeAllPopup() {
document.getElementById("popup_1000").style.display = "none";
document.getElementById("popup_1001").style.display = "none";
document.getElementById("popup_1002").style.display = "none";
document.getElementById("popup_1003").style.display = "none";
document.getElementById("popup_1004").style.display = "none";
}

getIdTasks(z: number, j: number, c: number) {
if (c<10) this.counterCalendar = "0"+c;
else this.counterCalendar = c.toString();
//console.log("Z: "+z+" J: "+j+" C: "+c+" COUNT: "+this.counterCalendar+" TOT: "+((z*7)+j+1)+this.counterCalendar)
return ((z*7)+j+1)+this.counterCalendar;
}

getIdSlash(z: number, j: number, c: number) {
if (c<10) this.counterCalendar = "0"+c;
else this.counterCalendar = c.toString();
//console.log("Z: "+z+" J: "+j+" C: "+c+" COUNT: "+this.counterCalendar+" TOT: "+((z*7)+j+1)+this.counterCalendar)
return ((z*7)+j+1)+this.counterCalendar;
}
}