bonsoir, je souhaite trier dans ma vue les plages d'horaires, mais je ne sais pas comment le faire correctement,
voici mon composant:
Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99 import { Component, OnInit } from '@angular/core'; import { CalendarModel } from '../calendar-model'; import { Injectable } from '@angular/core'; import { SemaineComponent } from '../semaine/semaine.component'; import { CalendarService } from '../calendar.service'; @Injectable() @Component({ selector: 'app-heure', templateUrl: './heure.component.html', styleUrls: ['./heure.component.css'] }) export class HeureComponent implements OnInit { parTranche: number = 3600; //par tranche d'une heure 3600 seconde trancheDeb: number = 8;//la journée commence à 8H trancheFin: number = 17;//la journée se termine à 17H plageJour = this.trancheFin - this.trancheDeb; plageHeure = new Array();// = this._semaine.courrantSemaine; si elle est vide pas d'affichage avec ngIf != 0 debJ0H;//sauvegarde le jour J finJour;//fin de la journée constructor(private _calendar: CalendarModel, private _semaine: SemaineComponent, private _calendarService: CalendarService) { this.debJ0H = this._semaine.courrantSemaine[this._semaine.iBoucle]; //console.log("0=>" + this._semaine.iBoucle); let resultat; this.isDayFree();//est ce que dans la journé il y a des RDV ? this._semaine.iBoucle++;//important d'ajouter cette incrémentation console.log(this.plageHeure + "UNSORT===="); this.plageHeure.sort(function (a, b) { return a.afficheH - b.afficheH }); console.log(this.plageHeure + "====SORT"); } ngOnInit() { } isDayFree()//on vérifie si la journée est libre si true toute la journée dispo, si false on scan toutes les plage { //console.log(this._semaine.iBoucle + "==>" + this.debJ0H['debJour0H']); this.debJ0H['debJour0H'] + this.trancheDeb * this.parTranche; //le début de la journée this.finJour = this.debJ0H['debJour0H'] + this.trancheFin * this.parTranche; //on ajouter la fin de la journée pour toucheFin //console.log("DEBUT J=>" + this.debJ0H['debJour0H'] + "FIN J =>" + finJour); this._calendarService.dispoWbsRdv(this.debJ0H['debJour0H'], this.finJour).subscribe(data => { //on récupère les rendez-vous s'il y en a, s'il y en a pas il sera filtré avec le ngIF = 0 console.log("array push plageHoraire---------------" + data); //data = false; //data = true la journée est libre, data = false la journée est pris afficher les plages d'horaire data ? this.plageHoraire() : this.pushFalse();//data = false journée dispo on passe à la suivante, data = true il faut analyser la journée //on affiche les plages d'horaires de la journée // this._semaine.iBoucle++;//important d'ajouter cette incrémentation }, (error) => { }); } pushFalse(): void { console.log("journee libre , analyse terminé !!!"); this.plageHeure.push( { "afficheH": this.trancheDeb, "unavailable": false //on check si une des plage son indiponible } ); } //on décompose la plage sur une journée en paramètre l'indice de chaque jour dans _semaine courrantSemaine plageHoraire(): void { console.log("analyse plage horaire ....."); for (let i = 0; i < this.plageJour; i++) { //i est le cran this.isPlageReserver(this.debJ0H['debJour0H'], i).subscribe(data => { this.plageHeure.push( { "afficheH": this.trancheDeb + i, "unavailable": data //on check si une des plage son indiponible } ); }); } } isPlageReserver(debutJ0, cran) {//debutJO est le timestamps du jours à 0H qu'on test , cran et la tranche d'1 heure //timestamps depart = debut jour à 0H + démarrage journée 8H + la tranche d'heure x 1H let debutPlage = debutJ0 + (this.trancheDeb * this.parTranche) + (cran * this.parTranche); //timestamp final = debutPlage + la tranche d'heure de la plage de la journée let finPlage = debutPlage + this.parTranche; //la fin de la tranche et le début de la tranche + la tranche ici 1H //console.log(cran+"DEB=>" + debutPlage + "***FIN=>" + finPlage); return this._calendarService.dispoWbsRdv(this.debJ0H['debJour0H'], this.finJour); //return true; } }
Le résultat de ma vue
j'obtiens mes heures comme ceci:
Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36 fil de la semaine Mar - 1524520800 la journée est libre Mer - 1524607200 8 - 9 9 - 10 10 - 11 11 - 12 13 - 14//doit être à 12 -13 12 - 13 16 - 17 15 - 16 14 - 15 Jeu - 1524693600 la journée est libre Ven - 1524780000 la journée est libre Sam - 1524866400 la journée est libre Dim - 1524952800 la journée est libre Lun - 1525039200 la journée est libre
je prends juste afficheH, et j'ajoute 1 pour avoir ma plage horaire,
le but est donc uniquement heure.trier afficheH
Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part {{heure.afficheH}} - {{heure.afficheH + 1}}
voici ma vue en html:
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10 <ul> <li class="heure" *ngFor="let heure of plageHeure" [ngClass]="{ odd: (heure%2 == 0), even: heure %2 == 1 } "> <a *ngIf="heure.unavailable==true" [ngClass]="{ red : heure.unavailable }"> {{heure.afficheH}} - {{heure.afficheH + 1}} </a> <a *ngIf="heure.unavailable==false" [ngClass]="{ red : heure.unavailable }"> la journée est libre </a> </li> </ul>
les plages d' horaires ne sont pas trié par ordre chronologique, je pense que c'est du à la réception aléatoire des résultats.
j'ai essayer cela,mais cela n'a pas fonctionné:
Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6 console.log(this.plageHeure + "UNSORT===="); this.plageHeure.sort(function (a, b) { return a.afficheH - b.afficheH }); console.log(this.plageHeure + "====SORT");
mes console.log:
Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15 UNSORT==== heure.component.ts:32:9 ====SORT heure.component.ts:36:9 UNSORT==== heure.component.ts:32:9 ====SORT heure.component.ts:36:9 UNSORT==== heure.component.ts:32:9 ====SORT heure.component.ts:36:9 UNSORT==== heure.component.ts:32:9 ====SORT heure.component.ts:36:9 UNSORT==== heure.component.ts:32:9 ====SORT heure.component.ts:36:9 UNSORT==== heure.component.ts:32:9 ====SORT heure.component.ts:36:9 UNSORT==== heure.component.ts:32:9 ====SORT heure.component.ts:36:9 array push plageHoraire---------------true
comment je dois m'y prendre pour trier correctement mes plages horaires ? merci d'avance pour vos idées.
Partager