mise à jour de la page horaires avec la mise en place de la mise à jour des données

src/app/components/home/workspace/hours/hours.component.css

@@ -1,7 +1,34 @@
-table, th, td {
+.container {
+	/* display: flex; */
+	/*background-color: #b8b8b8;*/
+	margin-bottom: 100px;
+	overflow-x: hidden;
+	overflow-y: auto;
+}
+
+.process {
+	width: 100%;
+	height: 75%;
+}
+
+table {
+	table-layout: fixed;
+	align: center;
+	width: 80%;
 	border: 1px solid #cccccc;
 }
 
-tr {
-	margin: 1rem;
+td {
+	text-align: center;
+	font-size: normal;
+}
+
+tr {
+	text-align: center;
+	font-size: 0.78em;
+}
+
+button {
+	margin-top: 1rem;
+	width: 80%;
 }

src/app/components/home/workspace/hours/hours.component.html

@@ -1,18 +1,25 @@
-<ng-container *ngIf="(schedules$ | async) as sched">
+<div *ngIf="isProcessing" class="process"
+	fxLayout="column"
+	fxLayoutAlign="space-around center">
+	<mat-spinner></mat-spinner>
+</div>
+<div *ngIf="!isProcessing" class="container"
+	fxLayout="column"
+	fxLayoutAlign="space-around center">
 	<table border="0" cellspacing="1" cellpadding="1">
 		<thead>
 			<tr>
 				<th></th>
-				<ng-container *ngFor="let day of sched">
+				<ng-container *ngFor="let day of schedule">
 					<th>{{day.name}}</th>
 				</ng-container>
 			</tr>
 		</thead>
 			<tr *ngFor="let i of [].constructor(schedRows); let r = index">
-				<td>{{sched[0].horaires[r].name}}</td>
-				<td *ngFor="let j of [].constructor(schedCols); let s = index" [ngStyle]="{'background-color': sched[s].horaires[r].state? 'green':'red'}" (click)="updateCell(sched[s], sched[s].horaires[r])">
+				<td>{{schedule[0].horaires[r].name}}</td>
+				<td *ngFor="let j of [].constructor(schedCols); let s = index" [ngStyle]="{'background-color': schedule[s].horaires[r].state? 'green':'red'}" (click)="updateCell(s, r)">
 			</tr>
 	</table>
 
-	<button type="button" (click)="update()">Mise à jour</button>
-</ng-container>
+	<button mat-raised-button color="primary" (click)="onUpdate()">Mise à jour</button>
+</div>

src/app/components/home/workspace/hours/hours.component.ts

@@ -12,41 +12,49 @@ import { catchError, map, startWith } from 'rxjs/operators';
 	styleUrls: ['./hours.component.css']
 })
 export class HoursComponent implements OnInit {
-	schedules$:Observable<Scheduler[]>|null=null;
+	schedule:Scheduler[];
+	isProcessing:boolean = true;
 	schedCols:number = 0;
 	schedRows:number = 0;
+	colorFlag:string = 'red';
 
 	constructor( private bs:BackendService,
-		     private router:Router,
-		     private toast:ToastrService ) { }
+				 private router:Router,
+				 private toast:ToastrService ) { }
 
 	ngOnInit(): void {
-		this.schedules$ = this.bs.retreiveSchedulers().pipe(
-			map(datas => {
-				//console.log("scheduler OK ...", datas);
-				//console.log("length: ", Object.keys(datas).length);
-				//console.log("horaires ...",datas[0].horaires);
-				//console.log("length: ", Object.keys(datas[0].horaires).length);
+		this.bs.retreiveSchedulers().subscribe(
+			(datas:Scheduler[]) => {
+				this.schedule = datas;
 				this.schedCols = Object.keys(datas).length;
 				this.schedRows = Object.keys(datas[0].horaires).length;
-				return datas;
-			}),
-			catchError(err => {
-				if(err.status == 401) {
-					console.log("error: ", err);
-					this.router.navigateByUrl("/login");
-				}
-				return throwError(err);
-			})
+				this.isProcessing = false;
+			}, err => {
+				this.toast.error("Erreur de récupération des horaires");
+				this.isProcessing = false;
+			}
 		);
 	}
 
-	update(): void {
-
+	onUpdate(): void {
+		this.bs.updateSchedulers(this.schedule).subscribe(
+			data => {
+				this.toast.success("Mise à jour des horaires réussie");
+			}, err => {
+				if(err.status == 401) {
+					this.router.navigateByUrl("/login");
+				} else {
+					this.toast.error("Erreur de mise à jour des horaires");
+				}
+			}
+		);
 	}
 
-	updateCell(sched: Scheduler, hour: Horaire): void {
-		console.log("sched: ", sched);
-		console.log("hour: ", hour);
+	updateCell(col: number, row: number): void {
+		if(this.schedule[col].horaires[row].state == 1) {
+			this.schedule[col].horaires[row].state = 0;
+		} else {
+			this.schedule[col].horaires[row].state = 1;
+		}
 	}
 }

src/app/models/scheduler.model.ts

@@ -1,6 +1,6 @@
 export interface Horaire {
 	name:string;
-	state:boolean;
+	state:number;
 }
 
 export interface Scheduler {

src/app/services/backend/backend.service.ts

@@ -81,17 +81,6 @@ export class BackendService {
 		return this.http.get<Parameters>(host+"/api/configurateur/params", options);
 	}
 
-	retreiveSchedulers():Observable<Scheduler[]> {
-		let host=environment.host;
-		const options = {
-			headers: new HttpHeaders({
-				'Content-Type' : 'application/json',
-			}),
-			withCredentials: true
-		};
-		return this.http.get<Scheduler[]>(host+"/api/configurateur/scheduler", options);
-	}
-
 	updateParams(val:Parameters):Observable<any> {
 		let host=environment.host;
 		const options = {
@@ -103,4 +92,27 @@ export class BackendService {
 
 		return this.http.post<any>(host+"/api/configurateur/update_params", val, options);
 	}
+
+	retreiveSchedulers():Observable<Scheduler[]> {
+		let host=environment.host;
+		const options = {
+			headers: new HttpHeaders({
+				'Content-Type' : 'application/json',
+			}),
+			withCredentials: true
+		};
+		return this.http.get<Scheduler[]>(host+"/api/configurateur/scheduler", options);
+	}
+
+	updateSchedulers(val:Scheduler[]):Observable<any> {
+		let host=environment.host;
+		const options = {
+			headers: new HttpHeaders({
+				'Content-Type' : 'application/json',
+			}),
+			withCredentials: true
+		};
+
+		return this.http.post<any>(host+"/api/configurateur/update_schedulers", val, options);
+	}
 }