dev en cours

package-lock.json

@@ -22,6 +22,7 @@
         "bootstrap": "^5.3.3",
         "file-saver": "^2.0.5",
         "jquery": "^3.7.1",
+        "ngx-bootstrap": "^19.0.2",
         "popper.js": "^1.16.1",
         "rxjs": "~7.8.0",
         "tslib": "^2.3.0",
@@ -10481,6 +10482,22 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/ngx-bootstrap": {
+      "version": "19.0.2",
+      "resolved": "https://registry.npmjs.org/ngx-bootstrap/-/ngx-bootstrap-19.0.2.tgz",
+      "integrity": "sha512-DR5sA5e9k1bwtVeo8lQW4Yr8IgU7ba2pco5rlznnr7k91BJ3SNgrUSq+BQfigwARHGmgKCcw9lexu8ZWvefEXg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/animations": "^19.0.1",
+        "@angular/common": "^19.0.1",
+        "@angular/core": "^19.0.1",
+        "@angular/forms": "^19.0.1",
+        "rxjs": "^6.5.3 || ^7.4.0"
+      }
+    },
     "node_modules/node-addon-api": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-6.1.0.tgz",

package.json

@@ -24,6 +24,7 @@
     "bootstrap": "^5.3.3",
     "file-saver": "^2.0.5",
     "jquery": "^3.7.1",
+    "ngx-bootstrap": "^19.0.2",
     "popper.js": "^1.16.1",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",

src/app/app.component.css

@@ -21,7 +21,6 @@ html {
   top: 0;
   left: 0;
   background-color: #fff;
-  overflow-x: hidden;
   padding-top: 0px;
   border-right: 1px solid #ddd;
   border-bottom: none;
@@ -36,4 +35,4 @@ html {
   #sidenav ul { display: inline-block; }
   #sidenav ul li { float: left; border-bottom: none; }
   #main { margin-left: 0; }
-}
+}

src/app/app.component.html

@@ -1,28 +1,28 @@
 <div class="d-flex flex-column flex-shrink-0 bg-body-tertiary" id="sidenav">
   <ul class="nav nav-pills nav-flush flex-column text-center">
-	 	<li><a href="/home" class="nav-link rounded-0 bg-gradient" #menu_home title="Accueil" data-bs-toggle="tooltip" data-bs-placement="right"><i class="fa-solid fa-home" aria-label="Accueil"></i></a></li>
+	 	<li><a href="/home" class="nav-link rounded-0 bg-gradient" #menu_home tooltip="Accueil" placement="right" container="body"><i class="fa-solid fa-home"></i></a></li>
 @if (!this.logged) {
-		<li><a href="/login" class="nav-link rounded-0 bg-gradient" #menu_login title="Login" data-bs-toggle="tooltip" data-bs-placement="right"><i class="fa-solid fa-right-to-bracket" aria-label="Login"></i></a></li>
+		<li><a href="/login" class="nav-link rounded-0 bg-gradient" #menu_login tooltip="Login" placement="right" container="body"><i class="fa-solid fa-right-to-bracket"></i></a></li>
 }
 @if (this.logged) {		
-		<li><a href="#" class="nav-link rounded-0 bg-gradient" #menu_account title="Compte" data-bs-toggle="tooltip" data-bs-placement="right"><i class="fa-solid fa-user" aria-label="Compte"></i></a></li>
-		<li><a href="/logout" class="nav-link rounded-0 bg-gradient" #menu_logout title="Logout" data-bs-toggle="tooltip" data-bs-placement="right"><i class="fa-solid fa-right-from-bracket" aria-label="Logout"></i></a></li>
+		<li><a href="#" class="nav-link rounded-0 bg-gradient" #menu_account tooltip="Compte" placement="right" container="body"><i class="fa-solid fa-user"></i></a></li>
+		<li><a href="/logout" class="nav-link rounded-0 bg-gradient" #menu_logout tooltip="Logout" placement="right" container="body"><i class="fa-solid fa-right-from-bracket"></i></a></li>
 }
-		<li><a href="#" class="nav-link rounded-0 bg-gradient" #menu_agenda title="Planning" data-bs-toggle="tooltip" data-bs-placement="right"><i class="fa-solid fa-clock" aria-label="Planning"></i></a></li>
-		<li><a href="#" class="nav-link rounded-0 bg-gradient" #menu_webcams title="Caméras" data-bs-toggle="tooltip" data-bs-placement="right"><i class="fa-solid fa-eye" aria-label="Caméras"></i></a></li>
+		<li><a href="#" class="nav-link rounded-0 bg-gradient" #menu_agenda tooltip="Planning" placement="right" container="body"><i class="fa-solid fa-clock"></i></a></li>
+		<li><a href="#" class="nav-link rounded-0 bg-gradient" #menu_webcams tooltip="Caméras" placement="right" container="body"><i class="fa-solid fa-eye"></i></a></li>
 @if (this.logged) {		
-		<li><a href="#" class="nav-link rounded-0 bg-gradient" #menu_chat title="Messagerie" data-bs-toggle="tooltip" data-bs-placement="right"><i class="fa-solid fa-comments" aria-label="Messagerie"></i></a></li>
+		<li><a href="#" class="nav-link rounded-0 bg-gradient" #menu_chat tooltip="Messagerie" placement="right" container="body"><i class="fa-solid fa-comments"></i></a></li>
 }
-		<li><a href="/participant-list" class="nav-link rounded-0 bg-gradient" #menu_users title="Participants" data-bs-toggle="tooltip" data-bs-placement="right"><i class="fa-solid fa-users" aria-label="Participants"></i></a></li>
+		<li><a href="/participant-list" class="nav-link rounded-0 bg-gradient" #menu_users tooltip="Participants" placement="right" container="body"><i class="fa-solid fa-users"></i></a></li>
 
-		<li><a href="/categorie-list" class="nav-link rounded-0 bg-gradient" #menu_compos title="Catégories" data-bs-toggle="tooltip" data-bs-placement="right"><i class="fa-solid fa-layer-group" aria-label="Catégories"></i></a></li>
-		<li><a href="/production-list" class="nav-link rounded-0 bg-gradient" #menu_prods title="Productions" data-bs-toggle="tooltip" data-bs-placement="right"><i class="fa-solid fa-save" aria-label="Productions"></i></a></li>
+		<li><a href="/categorie-list" class="nav-link rounded-0 bg-gradient" #menu_compos tooltip="Catégories" placement="right" container="body"><i class="fa-solid fa-layer-group"></i></a></li>
+		<li><a href="/production-list" class="nav-link rounded-0 bg-gradient" #menu_prods tooltip="Productions" placement="right" container="body"><i class="fa-solid fa-save"></i></a></li>
 
-		<li><a href="#" class="nav-link rounded-0 bg-gradient" #menu_shows title="Présentations" data-bs-toggle="tooltip" data-bs-placement="right"><i class="fa-solid fa-display" aria-label="Présentations"></i></a></li>
-		<li><a href="#" class="nav-link rounded-0 bg-gradient" #menu_votes title="Voter" data-bs-toggle="tooltip" data-bs-placement="right"><i class="fa-solid fa-vote-yea" aria-label="Voter"></i></a></li>
-		<li><a href="#" class="nav-link rounded-0 bg-gradient" #menu_results title="Résultats" data-bs-toggle="tooltip" data-bs-placement="right"><i class="fa-solid fa-trophy" aria-label="Résultats"></i></a></li>
+		<li><a href="#" class="nav-link rounded-0 bg-gradient" #menu_shows tooltip="Présentations" placement="right" container="body"><i class="fa-solid fa-display"></i></a></li>
+		<li><a href="#" class="nav-link rounded-0 bg-gradient" #menu_votes tooltip="Voter" placement="right" container="body"><i class="fa-solid fa-vote-yea"></i></a></li>
+		<li><a href="#" class="nav-link rounded-0 bg-gradient" #menu_results tooltip="Résultats" placement="right" container="body"><i class="fa-solid fa-trophy"></i></a></li>
 
-		<li><a href="/variable-list" class="nav-link rounded-0 bg-gradient" #menu_params title="Paramétrages" data-bs-toggle="tooltip" data-bs-placement="right"><i class="fa-solid fa-sliders-h" aria-label="Paramétrages"></i></a></li>
+		<li><a href="/variable-list" class="nav-link rounded-0 bg-gradient" #menu_param tooltip="Paramétrages" placement="right" container="body"><i class="fa-solid fa-sliders-h"></i></a></li>
 	</ul>
 </div>
 <div id="main">

src/app/app.component.ts

@@ -3,12 +3,11 @@ import { RouterOutlet } from '@angular/router';
 import { FormsModule} from '@angular/forms';
 import { Router } from '@angular/router';  
 import { AccountService } from './services/account.service';  
+import { TooltipModule } from 'ngx-bootstrap/tooltip'; 
 
-declare var $: any;
+@Component({ selector: 'app-root', imports: [RouterOutlet, FormsModule, TooltipModule], templateUrl: './app.component.html', styleUrl: './app.component.css' })
 
-@Component({ selector: 'app-root', imports: [RouterOutlet, FormsModule], templateUrl: './app.component.html', styleUrl: './app.component.css' })
-
-export class AppComponent implements OnInit
+export class AppComponent implements OnInit 
 {
   title = 'demovote';
 
@@ -32,12 +31,10 @@ export class AppComponent implements OnInit
   constructor(private router: Router, private accountService: AccountService, private renderer: Renderer2) { }  
   
   ngOnInit() 
-  {
-    $(document).ready(function() { $('[data-bs-toggle="tooltip"]').tooltip();});
-
-    this.logged = this.accountService.isLogged();
-	}
-
+  { 
+    this.logged = this.accountService.isLogged(); 
+  }
+  
   logout() 
   {  
     this.accountService.logout();  

src/app/composants/participant-list/participant-list.component.html

@@ -16,13 +16,15 @@
 					<th class="fs-6 label-nobr"><small>Pseudonyme</small></th>
 					<th class="fs-6 label-nobr"><small>Status</small></th>
 					<th class="fs-6 label-nobr"><small>Arrivé</small></th>
+					<th class="fs-6 label-nobr"><small>Journées</small></th>
+					<th class="fs-6 label-nobr"><small>email</small></th>
 				</tr>
 			</thead>
 			<tbody>
 				@for (participant of participants; track participant.numeroParticipant) {
 				<tr>
-					<td class="label-nobr"><a (click)="formParticipant(participant.numeroParticipant)" class="link-primary pointeur-souris text-decoration-none">{{ participant.nom }}&nbsp;{{ participant.prenom }}</a>&nbsp;&nbsp;</td>
-					<td class="label-nobr"><a (click)="formParticipant(participant.numeroParticipant)" class="link-primary pointeur-souris text-decoration-none">{{ participant.pseudonyme }}</a>&nbsp;&nbsp;</td>
+					<td class="label-nobr text-truncate" style="max-width:200px;"><a (click)="formParticipant(participant.numeroParticipant)" class="link-primary pointeur-souris text-decoration-none">{{ participant.nom }}&nbsp;{{ participant.prenom }}</a>&nbsp;&nbsp;</td>
+					<td class="label-nobr text-truncate" style="max-width:200px;"><a (click)="formParticipant(participant.numeroParticipant)" class="link-primary pointeur-souris text-decoration-none">{{ participant.pseudonyme }}</a>@if (participant.groupe) { / {{ participant.groupe }} }&nbsp;&nbsp;</td>
 					<td>
 					  @if (participant.statut === PS[0].key) { <i class="fa-solid fa-circle-xmark text-danger" title="{{ PS[0].value }}"></i> }
 					  @else if (participant.statut === PS[1].key) { <i class="fa-solid fa-circle-check text-success" title="{{ PS[1].value }}"></i> }  
@@ -31,11 +33,13 @@
 					  @else if (participant.statut === PS[4].key) { <i class="fa-solid fa-circle-check text-success" title="{{ PS[4].value }}"></i> }  
 					  @else if (participant.statut === PS[5].key) { <i class="fa-solid fa-circle-check text-primary" title="{{ PS[5].value }}"></i> }  
 					  @else if (participant.statut === PS[6].key) { <i class="fa-solid fa-circle-check text-primary" title="{{ PS[6].value }}"></i> } 
-					 </td>
+					</td>
 					<td>
 					  @if (participant.arrived) { <i class="fa-solid fa-circle-check text-success"></i> } 
 					  @else { <i class="fa-solid fa-circle-xmark text-danger"></i> }&nbsp;&nbsp;
 					</td>
+					<td>{{ getNombreJours(participant.hereDay1, participant.hereDay2, participant.hereDay3) }} @if(participant.sleepingOnSite) { + <i class="fa-solid fa-bed"></i> }</td>
+					<td class="label-nobr">{{ participant.email }}&nbsp;&nbsp;</td>
 				</tr>
 				}
 			</tbody>

src/app/composants/participant-list/participant-list.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit, AfterViewInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { AppComponent } from '../../app.component';
-import { Participant, ParticipantEnum, ParticipantStatutList } from '../../interfaces/participant';
+import { ParticipantList, ParticipantEnum, ParticipantStatutList } from '../../interfaces/participant';
 import { ParticipantService } from '../../services/participant.service';
 
 @Component({ selector: 'app-participant-list', imports: [], templateUrl: './participant-list.component.html', styleUrl: './participant-list.component.css' })
@@ -11,7 +11,7 @@ export class ParticipantListComponent implements OnInit, AfterViewInit
     
   PS: ParticipantEnum[] = ParticipantStatutList;
 
-  participants: Participant[] = [];
+  participants: ParticipantList[] = [];
 
   constructor(private participantService: ParticipantService, private router: Router, private application: AppComponent) { }
 
@@ -21,6 +21,15 @@ export class ParticipantListComponent implements OnInit, AfterViewInit
 
   private retreiveDatas() { this.participantService.getListParticipant().subscribe(data => { this.participants = data; }); }
 
+  getNombreJours(j1: boolean, j2: boolean, j3: boolean) 
+  { 
+    var nbjours: number = 0; 
+    if (j1) { nbjours++; } 
+    if (j2) { nbjours++; } 
+    if (j3) { nbjours++; } 
+  	return nbjours;
+  }
+  
   goToRefreshListParticipant(){ this.router.navigate(['/participant-list'], { queryParams: { 'refresh': this.getRandomInteger(1, 100000) } }); }
 
   private getRandomInteger(min: number, max: number) { min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (max - min)) + min; }

src/app/composants/participant-update/participant-update.component.html

@@ -118,7 +118,7 @@
 		<div class="form-group row">
 			<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Inscrit le</label>
 			<div class="col-sm-8">
-				<input type="text" class="form-control form-control-sm field-separate" id="dateInscription" name="dateInscription" [(ngModel)]="participant.dateInscription">
+				<input type="text" class="form-control form-control-sm field-separate" id="dateInscription" name="dateInscription" [(ngModel)]="participant.dateInscription" disabled>
 			</div>
 		</div>
 

src/app/composants/production-list/production-list.component.html

@@ -24,8 +24,8 @@
 				 <small class="text-warning">{{ production.informationsPrivees }}</small>
        </div>
 			<div class="card-footer d-flex justify-content-between">
-			  <i class="fa-solid fa-download text-primary pointeur-souris" (click)="getFile(production.numeroProduction, production.nomArchive)" title="{{ production.nomArchive }} (v{{ production.numeroVersion }})"></i>
-				<i class="fa-solid fa-user-tie text-dark" style="margin-left:7px;" title="géré par {{ production.nomGestionnaire }}"></i>
+			  <i class="fa-solid fa-download text-primary pointeur-souris" (click)="getFile(production.numeroProduction, production.nomArchive)" tooltip="{{ production.nomArchive }} (v{{ production.numeroVersion }})" placement="top" container="body"></i>
+				<i class="fa-solid fa-user-tie text-muted" style="margin-left:7px;" tooltip="géré par {{ production.nomGestionnaire }}" placement="top" container="body"></i>
 			</div>
 		</div>
 	}

src/app/composants/production-list/production-list.component.ts

@@ -4,8 +4,9 @@ import { AppComponent } from '../../app.component';
 import { ProductionShort, ProductionEnum, ProductionTypeList } from '../../interfaces/production';
 import { ProductionService } from '../../services/production.service';
 import { saveAs } from 'file-saver';
+import { TooltipModule } from 'ngx-bootstrap/tooltip'; 
 
-@Component({ selector: 'app-production-list', imports: [], templateUrl: './production-list.component.html', styleUrl: './production-list.component.css' })
+@Component({ selector: 'app-production-list', imports: [TooltipModule], templateUrl: './production-list.component.html', styleUrl: './production-list.component.css' })
 
 export class ProductionListComponent implements OnInit, AfterViewInit
 {
@@ -16,13 +17,10 @@ export class ProductionListComponent implements OnInit, AfterViewInit
 
   constructor(private productionService: ProductionService, private router: Router, private application: AppComponent) { }
 
-  ngOnInit(): void 
-  {
-    this.retreiveDatas(); 
-  }
+  ngOnInit() { this.retreiveDatas(); }
   
   ngAfterViewInit() 
-  {
+  { 
     this.application.menuActivateProds(); 
   }
 

src/app/composants/variable-list/variable-list.component.html

@@ -3,11 +3,11 @@
 	<div class="card-header shadow-sm">
 		<div class="row">
 			<div class="form-group col-sm-4 label-nobr">
-				<button type="button" (click)="goToRefreshListVariable()" class="btn bg-gradient btn-primary btn-sm" style="margin-right: 5px;"><i class="fa-solid fa-rotate"></i>&nbsp;Actualiser</button>
-				<button type="button" (click)="goToNewVariable()" class="btn bg-gradient btn-primary btn-sm" style="margin-right: 5px;"><i class="fa-solid fa-plus"></i>&nbsp;Créer</button>
+				<button type="button" (click)="goToRefreshListVariable()" class="btn bg-gradient btn-primary btn-sm field-separate" style="margin-right: 5px;"><i class="fa-solid fa-rotate"></i>&nbsp;Actualiser</button>
+				<button type="button" (click)="goToNewVariable()" class="btn bg-gradient btn-primary btn-sm field-separate" style="margin-right: 5px;"><i class="fa-solid fa-plus"></i>&nbsp;Créer</button>
 			</div>
 			<div class="form-group col-sm-8">
-				<select class="form-select form-select-sm" (change)="filtrageParType($event)">
+        <select class="form-select form-select-sm field-separate" (change)="filtrageParType($event)">
 					<option selected> </option>
           @for (type of types; track type) {
 					<option [value]="type.type">{{ type.type }}</option>
@@ -30,7 +30,7 @@
 				<tr>
 					<td class="label-nobr"><small>{{ variable.type }}&nbsp;&nbsp;</small></td>
 					<td class="label-nobr"><a (click)="formVariable(variable.numeroVariable)" class="link-primary pointeur-souris text-decoration-none">{{ variable.code }}</a>&nbsp;&nbsp;</td>
-					<td>{{ variable.valeur }}&nbsp;&nbsp;</td>
+					<td class="text-truncate" style="max-width:400px;">{{ variable.valeur }}&nbsp;&nbsp;</td>
 				</tr>
 				}
 			</tbody>

src/app/interfaces/participant.ts

@@ -58,3 +58,19 @@ export class ParticipantShort
   nom: string = "";
   prenom: string = "";
 }
+
+export class ParticipantList 
+{
+  numeroParticipant: number = 0;
+  nom: string = "";
+  prenom: string = "";
+  pseudonyme: string = "";
+  groupe: string = "";
+  email: string = "";
+  statut: string = "EN_ATTENTE";
+  hereDay1: boolean = false;
+  hereDay2: boolean = false;
+  hereDay3: boolean = false;
+  sleepingOnSite: boolean = true;
+  arrived: boolean = false;
+}

src/app/services/participant.service.ts

@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http'
 import { Observable } from 'rxjs';
 import { Environnement } from '../env';
-import { Participant, ParticipantShort } from '../interfaces/participant';
+import { Participant, ParticipantList, ParticipantShort } from '../interfaces/participant';
 
 @Injectable({ providedIn: 'root' })
 
@@ -13,7 +13,7 @@ export class ParticipantService
 
   constructor(private httpClient: HttpClient) { }
   
-  getListParticipant(): Observable<Participant[]>{ return this.httpClient.get<Participant[]>(`${this.baseURL}/list`); }
+  getListParticipant(): Observable<ParticipantList[]>{ return this.httpClient.get<Participant[]>(`${this.baseURL}/list`); }
 
   getOptionListParticipant(): Observable<ParticipantShort[]>{ return this.httpClient.get<ParticipantShort[]>(`${this.baseURL}/option-list`); }