diff --git a/package-lock.json b/package-lock.json index 1fbd63a..1934572 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1799,6 +1799,14 @@ "to-fast-properties": "^2.0.0" } }, + "@daypilot/daypilot-lite-angular": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/@daypilot/daypilot-lite-angular/-/daypilot-lite-angular-3.2.0.tgz", + "integrity": "sha512-tpxwGZOL7Jdm4ACvuHIdWUkEu0iMk4gKznRB+8BUsNeo+gfP+Wx4xEgoeuKEFdA4lSxsrufjjPjK3B6azgZUOg==", + "requires": { + "tslib": "^2.3.0" + } + }, "@discoveryjs/json-ext": { "version": "0.5.6", "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.6.tgz", diff --git a/package.json b/package.json index 1507a28..7f0e964 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "@angular/platform-browser": "~13.0.0", "@angular/platform-browser-dynamic": "~13.0.0", "@angular/router": "~13.0.0", + "@daypilot/daypilot-lite-angular": "^3.2.0", "bootstrap": "^5.1.3", "jwt-decode": "^3.1.2", "ngx-autofocus-fix": "^1.0.4", diff --git a/src/app/app.module.ts b/src/app/app.module.ts index d94d1cd..97b06f4 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -38,8 +38,7 @@ import { PageModifierContactComponent } from './pages/page-modifier-contact/page import { PageCreationTeamComponent } from './pages/page-creation-team/page-creation-team.component'; import { AutofocusFixModule } from 'ngx-autofocus-fix'; import { EmoticonComponent } from './emoticon/emoticon.component'; - - +import { DayPilot, DayPilotModule } from "@daypilot/daypilot-lite-angular"; @NgModule({ declarations: [ @@ -84,6 +83,7 @@ import { EmoticonComponent } from './emoticon/emoticon.component'; HttpClientModule, FormsModule, AutofocusFixModule.forRoot(), + DayPilotModule ], providers: [], bootstrap: [AppComponent], diff --git a/src/app/pages/page-agenda/page-agenda.component.html b/src/app/pages/page-agenda/page-agenda.component.html index 544f7ad..cbf6a17 100644 --- a/src/app/pages/page-agenda/page-agenda.component.html +++ b/src/app/pages/page-agenda/page-agenda.component.html @@ -1,13 +1,34 @@ + +
- AGENDA +
+
+ +
+
+
+ Previous + Today + Next +
+ + + +
+
-
\ No newline at end of file + diff --git a/src/app/pages/page-agenda/page-agenda.component.scss b/src/app/pages/page-agenda/page-agenda.component.scss index e69de29..6f92b30 100644 --- a/src/app/pages/page-agenda/page-agenda.component.scss +++ b/src/app/pages/page-agenda/page-agenda.component.scss @@ -0,0 +1,42 @@ +.wrap { + display: flex; + } + + .left { + margin-right: 10px; + } + + .main { + flex-grow: 1; + } + + .buttons { + margin-bottom: 10px; + } + + .buttons a { + display: inline-block; + text-align: center; + background-color: #3c78d8; + border: 1px solid #1155cc; + color: #fff; + padding: 6px 20px; + border-radius: 2px; + cursor: pointer; + margin-right: 5px; + width: 80px; + text-decoration: none; + } + + .main-body { + position: absolute; + left: 0px; + right: 0px; + top: 0px; + bottom: 0px; + overflow: hidden; + } + + .fullscreen { + position: absolute; top:90px; left: 0px; right: 0px; bottom: 0px; + } \ No newline at end of file diff --git a/src/app/pages/page-agenda/page-agenda.component.ts b/src/app/pages/page-agenda/page-agenda.component.ts index d0c98bc..14f64da 100644 --- a/src/app/pages/page-agenda/page-agenda.component.ts +++ b/src/app/pages/page-agenda/page-agenda.component.ts @@ -1,15 +1,244 @@ -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; + 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: 2, + skipMonths: 2, + 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; + }else{ + // + } + } + + 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()); + 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!') + } + ); + }, + 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()); + 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!') + }) + }, + 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 + }; + }); + 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(); + } } diff --git a/src/app/services/auth.service.ts b/src/app/services/auth.service.ts index 7075133..9ae5685 100644 --- a/src/app/services/auth.service.ts +++ b/src/app/services/auth.service.ts @@ -43,7 +43,7 @@ export class AuthService { map((x: any) => { console.log('Service : ', x.accessToken); // Modification à faire ici - localStorage.setItem(this.tokenKey, x.accessToken); + localStorage.setItem(this.tokenKey, x.token); return x; // permet de renvoyer la réponse à l'initiateur (page Signin) après le traitement du map }) ); diff --git a/src/app/services/evenement.service.spec.ts b/src/app/services/evenement.service.spec.ts new file mode 100644 index 0000000..04d41e1 --- /dev/null +++ b/src/app/services/evenement.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { EvenementService } from './evenement.service'; + +describe('EvenementService', () => { + let service: EvenementService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(EvenementService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/src/app/services/evenement.service.ts b/src/app/services/evenement.service.ts new file mode 100644 index 0000000..7c32dcf --- /dev/null +++ b/src/app/services/evenement.service.ts @@ -0,0 +1,36 @@ +import { HttpClient } from '@angular/common/http'; +import { Injectable } from '@angular/core'; +import { Observable } from 'rxjs'; +import { environment } from 'src/environments/environment'; + +@Injectable({ + providedIn: 'root' +}) +export class EvenementService { + apiUrl: string; + tokenKey: string; + + constructor(private http: HttpClient) { + // On se sert des variables d'environnement de notre application + this.apiUrl = environment.apiUrl; + this.tokenKey = environment.tokenKey; + } + + getEvenementsByIdTeam(id: any): Observable { + return this.http.get(`${this.apiUrl}/evenements/team/` + id); + } + + addEvenements(evenement: any): Observable { + console.log(evenement); + + return this.http.post(`${this.apiUrl}/evenements/add`, evenement); + } + + deleteEvenements(id: any): Observable { + return this.http.delete(`${this.apiUrl}/evenements/delete/`+id,{responseType: 'text'}); + } + + updateEvenements(evenement:any): Observable { + return this.http.put(`${this.apiUrl}/evenements/update/1`, evenement); + } +} diff --git a/src/environments/environment.ts b/src/environments/environment.ts index 90149fd..0a4331f 100644 --- a/src/environments/environment.ts +++ b/src/environments/environment.ts @@ -4,7 +4,7 @@ export const environment = { production: false, - apiUrl: 'http://localhost:8088', + apiUrl: 'http://localhost:8080', tokenKey: 'TOKEN-ORGANIZEE', }; diff --git a/src/index.html b/src/index.html index be52832..6ef67b9 100644 --- a/src/index.html +++ b/src/index.html @@ -6,6 +6,7 @@ +