diff --git a/src/app/pages/page-agenda/page-agenda.component.ts b/src/app/pages/page-agenda/page-agenda.component.ts index d0c98bc..291b1e0 100644 --- a/src/app/pages/page-agenda/page-agenda.component.ts +++ b/src/app/pages/page-agenda/page-agenda.component.ts @@ -1,15 +1,269 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, AfterViewInit, ViewChild } from '@angular/core'; +import { DayPilot, DayPilotCalendarComponent, DayPilotNavigatorComponent } from "@daypilot/daypilot-lite-angular"; +import { EvenementService } from 'src/app/services/evenement.service'; +import { environment } from 'src/environments/environment'; +import jwt_decode from 'jwt-decode'; @Component({ selector: 'app-page-agenda', templateUrl: './page-agenda.component.html', styleUrls: ['./page-agenda.component.scss'] }) -export class PageAgendaComponent implements OnInit { +export class PageAgendaComponent implements AfterViewInit { - constructor() { } + userId : any; + teamId : any; + role:any; + isShow: boolean; + alert:any; - ngOnInit(): void { + @ViewChild("navigator") navigator!: DayPilotNavigatorComponent; + @ViewChild("calendar") calendar!: DayPilotCalendarComponent; + + constructor(private evenementService:EvenementService) { + this.isShow = false; + this.alert = ""; } + get date(): DayPilot.Date { + return this.config.startDate as DayPilot.Date; + } + + set date(value: DayPilot.Date) { + this.config.startDate = value; + } + + navigatorConfig: DayPilot.NavigatorConfig = { + showMonths: 1, + skipMonths: 1, + locale: "fr-fr", + selectMode: "Week", + cellWidth: 30, + cellHeight: 30, + dayHeaderHeight: 30, + titleHeight: 30 + }; + + events: DayPilot.EventData[] = []; + + onClickCloseAlert(){ + console.log('fermeture'); + this.isShow = ! this.isShow; + } + + ngAfterViewInit(): void { + } + + ngOnInit(): void { + const token = localStorage.getItem(environment.tokenKey); + if(token) { + const decodedToken = jwt_decode(token); + this.userId = decodedToken.userId; + this.teamId = decodedToken.teamId; + this.role = decodedToken.auth[0].authority; + }else{ + // + } + } + + // petite triche pour eviter la repetition du nom dans le RDV + rdvSplit(rdv:any){ + let titleRDV = rdv.split('\r'); + console.log(titleRDV[0]); + return titleRDV[0]; + } + + config: DayPilot.CalendarConfig = { + startDate: DayPilot.Date.today(), + locale: "fr-fr", + viewType: "Week", + //heightSpec: "Parent100Pct", + cellHeight: 30, + headerHeight: 30, + hourWidth: 60, + onEventMoved: (args) => { + console.log("Event moved:"+args.e.id()+" - "+args.e.text()+" - "+args.e.end()+" - "+args.e.start()+' - '+args.e.data.tags.membre); + let event = { + start: args.e.start(), + end: args.e.end(), + id: args.e.id(), + barColor: "#555555", + text: this.rdvSplit(args.e.text()), + membre: {id:args.e.data.tags.membre}, + team: {id:this.teamId} + } + if( (args.e.data.tags.membre == this.userId) || (this.role == 'ROLE_PARENT')){ // mettre role parent en variable + this.evenementService.updateEvenements(event).subscribe( + { + next: result => { + this.viewChange(); + this.alert={"type":"success", "content":"L'évènement à bien été modifié"}; + this.isShow = true; + }, + error: err => { + this.viewChange(); + this.alert={"type":"danger", "content":"Problème lors de la modification de l'évenment"}; + this.isShow = true; + }, + complete: () => console.log('DONE!') + } + ); + }else{ + this.viewChange(); + this.alert={"type":"danger", "content":"Vous ne pouvez pas modifié cet évènement !"}; + this.isShow = true; + } + + }, + onTimeRangeSelected: async (args) => { + const modal = await DayPilot.Modal.prompt("Create a new event:", "Nouveau RDV"); + const dp = args.control; + dp.clearSelection(); + if (!modal.result) { return; } + let event = { + start: args.start, + end: args.end, + id: DayPilot.guid(), + barColor: "#555555", + text: modal.result + } + dp.events.add(event); + Object.assign(event, {id: ""}); + Object.assign(event, {membre: {id:this.userId}}); + Object.assign(event, {team: {id:this.teamId}}); + console.log("Event added: " + event); + // let data = dp.events; + // Object.keys(data).map(function(key, index) { + // data[key] = { + // barColor:data[key].membre.couleur, + // //backColor:data[key].membre.couleur, + // "id": data[key].id, + // "start": data[key].start, + // "end": data[key].end, + // "text": data[key].text + // }; + // }); + this.evenementService.addEvenements(event).subscribe({ + next: result => { + this.viewChange(); + this.alert={"type":"success", "content":"L'évènement à été correctement ajouté au calendrier"}; + this.isShow = true; + }, + error: err => { + this.viewChange(); + this.alert={"type":"danger", "content":"Problème lors de l'ajout de l'évenment"}; + this.isShow = true; + }, + complete: () => console.log('DONE!') + }); + }, + eventDeleteHandling: "Update", + onEventDeleted: (args) => { + console.log("Event deleted: " + args.e.id()); + if( (args.e.data.tags.membre == this.userId) || (this.role == 'ROLE_PARENT')){ // mettre role parent en variable + this.evenementService.deleteEvenements(Number(args.e.id())).subscribe({ + next: result => { + this.viewChange(); + this.alert={"type":"success", "content":"L'évènement à été correctement supprimé du calendrier"}; + this.isShow = true; + }, + error: err => { + this.viewChange(); + this.alert={"type":"danger", "content":"Problème lors de la suppression de l'évenment"}; + this.isShow = true; + }, + complete: () => console.log('DONE!') + }) + }else{ + this.viewChange(); + this.alert={"type":"danger", "content":"Vous ne pouvez pas suprimé cet évènement !"}; + this.isShow = true; + } + }, + eventResizeHandling: "Update", + onEventResized: (args) => { + console.log("Event resized: " + args.e.id()); + let event = { + start: args.e.start(), + end: args.e.end(), + id: args.e.id(), + barColor: "#555555", + text: args.e.text(), + membre: {id:this.userId}, + team: {id:this.teamId} + } + this.evenementService.updateEvenements(event).subscribe( + { + next: result => { + this.viewChange(); + this.alert={"type":"success", "content":"L'évènement à bien été modifié"}; + this.isShow = true; + }, + error: err => { + this.viewChange(); + this.alert={"type":"danger", "content":"Problème lors de la modification de l'évenment"}; + this.isShow = true; + }, + complete: () => console.log('DONE!') + } + ); + } + } + + adjust(color:string, amount:number) { + return '#' + color.replace(/^#/, '').replace(/../g, color => + ('0' + Math.min(255, Math.max(0, parseInt(color, 16) + amount)).toString(16)).substr(-2)); + } + + viewChange(): void { + var from = this.calendar.control.visibleStart(); + var to = this.calendar.control.visibleEnd(); + + console.log("viewChange(): " + from + " " + to); + + // this.ds.getEvents(from, to).subscribe(result => { + //this.events = this.evenements; + this.evenementService.getEvenementsByIdTeam(this.teamId).subscribe((data: any) => { + // this.events = [{ + // "id": data[0].id, + // "start": data[0].eventDebut, + // "end": data[0].eventFin, + // "text": data[0].libelle, + // barColor: data[0].membre.couleur, + // //cssClass: "toto" + // }]; + Object.keys(data).map((key, index) => { + data[key] = { + barColor:data[key].membre.couleur, + backColor: this.adjust(data[key].membre.couleur, 90), + id: data[key].id, + start: data[key].start, + end: data[key].end, + text: data[key].text.toUpperCase()+'\r('+data[key].membre.prenom+')', + tags : { + membre: data[key].membre.id + } + }; + }); + this.events = data; + console.log(data); + console.log(this.events); + }); + // }); + } + + navigatePrevious(event: MouseEvent): void { + event.preventDefault(); + this.config.startDate = (this.config.startDate as DayPilot.Date).addDays(-7); + } + + navigateNext(event: MouseEvent): void { + event.preventDefault(); + this.config.startDate = (this.config.startDate as DayPilot.Date).addDays(7); + } + + navigateToday(event: MouseEvent): void { + event.preventDefault(); + this.config.startDate = DayPilot.Date.today(); + } }