dev en cours

angular.json

@@ -29,8 +29,8 @@
             "styles": [
               "src/styles.css",
               "node_modules/bootstrap/dist/css/bootstrap.min.css",
-              "node_modules/bootstrap-icons/font/bootstrap-icons.css"
-            ],
+              "node_modules/@fortawesome/fontawesome-free/css/all.css"
+              ],
             "scripts": [
               "node_modules/jquery/dist/jquery.min.js",
               "node_modules/bootstrap/dist/js/bootstrap.min.js"]

package-lock.json

@@ -16,10 +16,9 @@
         "@angular/platform-browser": "^19.1.0",
         "@angular/platform-browser-dynamic": "^19.1.0",
         "@angular/router": "^19.1.0",
+        "@fortawesome/fontawesome-free": "^6.7.2",
         "bootstrap": "^5.3.3",
-        "bootstrap-icons": "^1.11.3",
         "jquery": "^3.7.1",
-        "ngx-bootstrap": "^19.0.2",
         "rxjs": "~7.8.0",
         "tslib": "^2.3.0",
         "zone.js": "~0.15.0"
@@ -2681,6 +2680,15 @@
         "node": ">=18"
       }
     },
+    "node_modules/@fortawesome/fontawesome-free": {
+      "version": "6.7.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.7.2.tgz",
+      "integrity": "sha512-JUOtgFW6k9u4Y+xeIaEiLr3+cjoUPiAuLXoyKOJSia6Duzb7pq+A76P9ZdPDoAoxHdHzq6gE9/jKBGXlZT8FbA==",
+      "license": "(CC-BY-4.0 AND OFL-1.1 AND MIT)",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@inquirer/checkbox": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/@inquirer/checkbox/-/checkbox-4.1.2.tgz",
@@ -5821,22 +5829,6 @@
         "@popperjs/core": "^2.11.8"
       }
     },
-    "node_modules/bootstrap-icons": {
-      "version": "1.11.3",
-      "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.11.3.tgz",
-      "integrity": "sha512-+3lpHrCw/it2/7lBL15VR0HEumaBss0+f/Lb6ZvHISn1mlK83jjFpooTLsMWbIjJMDjDjOExMsTxnXSIT4k4ww==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/twbs"
-        },
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/bootstrap"
-        }
-      ],
-      "license": "MIT"
-    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -10454,22 +10446,6 @@
       "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

@@ -18,8 +18,8 @@
     "@angular/platform-browser": "^19.1.0",
     "@angular/platform-browser-dynamic": "^19.1.0",
     "@angular/router": "^19.1.0",
+    "@fortawesome/fontawesome-free": "^6.7.2",
     "bootstrap": "^5.3.3",
-    "bootstrap-icons": "^1.11.3",
     "jquery": "^3.7.1",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",

src/app/app.routes.ts

@@ -8,6 +8,10 @@ import { CategorieListComponent } from './categorie-list/categorie-list.componen
 import { CategorieCreateComponent } from './categorie-create/categorie-create.component';
 import { CategorieDetailsComponent } from './categorie-details/categorie-details.component';
 import { CategorieUpdateComponent } from './categorie-update/categorie-update.component';
+import { ParticipantListComponent } from './participant-list/participant-list.component';
+import { ParticipantCreateComponent } from './participant-create/participant-create.component';
+import { ParticipantDetailsComponent } from './participant-details/participant-details.component';
+import { ParticipantUpdateComponent } from './participant-update/participant-update.component';
 
 export const routes: Routes = [  
   {path: '', redirectTo: 'variable-list', pathMatch: 'full'},
@@ -19,6 +23,10 @@ export const routes: Routes = [
   {path: 'categorie-create', component: CategorieCreateComponent},
   {path: 'categorie-details/:numeroCategorie', component: CategorieDetailsComponent},
   {path: 'categorie-update/:numeroCategorie', component: CategorieUpdateComponent},
+  {path: 'participant-list', component: ParticipantListComponent},
+  {path: 'participant-create', component: ParticipantCreateComponent},
+  {path: 'participant-details/:numeroParticipant', component: ParticipantDetailsComponent},
+  {path: 'participant-update/:numeroParticipant', component: ParticipantUpdateComponent},
 ];
 
 @NgModule({

src/app/categorie-create/categorie-create.component.html

@@ -3,21 +3,21 @@
 	<div class="card shadow">
 	<div class="card-header">Fiche d'une catégorie</div>
 		<div class="card-header shadow-sm">
-			<button (click)="goToListCategorie()" class="btn btn-primary btn-sm"><i class="bi bi-x-lg"></i>&nbsp;Retour</button>
+			<button (click)="goToListCategorie()" class="btn btn-primary btn-sm"><i class="fa-solid fa-xmark"></i>&nbsp;Retour</button>
 		</div>
 		<div class="card-body">
 
 			<div class="form-group row">
 				<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Libellé</label>
 				<div class="col-sm-10">
-					<input type="text" class="form-control form-control-sm field-separate" id="libelle" [(ngModel)]="categorie.libelle" name="libelle" #libelleRef="ngModel" required [class.is-invalid]="libelleRef.invalid && libelleRef.touched">
+					<input type="text" class="form-control form-control-sm field-separate" id="libelle" name="libelle" [(ngModel)]="categorie.libelle" #libelleRef="ngModel" required [class.is-invalid]="libelleRef.invalid && libelleRef.touched">
 				</div>
 			</div>
 
 			<div class="form-group row">
 				<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Numéro d'ordre</label>
 				<div class="col-sm-10">
-					<input type="text" class="form-control form-control-sm field-separate" id="numeroOrdre" [(ngModel)]="categorie.numeroOrdre" name="numeroOrdre">
+					<input type="number" min="0" class="form-control form-control-sm field-separate" id="numeroOrdre" name="numeroOrdre" [(ngModel)]="categorie.numeroOrdre">
 				</div>
 			</div>
 
@@ -25,7 +25,7 @@
 				<div class="col-sm-2"></div>
 				<div class="col-sm-10">
 					<div class="form-check form-switch">
-						<input class="form-check-input field-separate" type="checkbox" id="available" [(ngModel)]="categorie.available" name="available"> 
+						<input class="form-check-input field-separate" type="checkbox" id="available" name="available" [(ngModel)]="categorie.available"> 
 						<label class="form-check-label" for="available">Disponible</label>
 					</div>
 				</div>
@@ -35,7 +35,7 @@
 				<div class="col-sm-2"></div>
 				<div class="col-sm-10">
 					<div class="form-check form-switch">
-						<input class="form-check-input field-separate" type="checkbox" id="uploadable" [(ngModel)]="categorie.uploadable" name="uploadable"> 
+						<input class="form-check-input field-separate" type="checkbox" id="uploadable" name="uploadable" [(ngModel)]="categorie.uploadable"> 
 						<label class="form-check-label" for="uploadable">Téléversable</label>
 					</div>
 				</div>
@@ -45,7 +45,7 @@
 				<div class="col-sm-2"></div>
 				<div class="col-sm-10">
 					<div class="form-check form-switch">
-						<input class="form-check-input field-separate" type="checkbox" id="pollable" [(ngModel)]="categorie.pollable" name="pollable"> 
+						<input class="form-check-input field-separate" type="checkbox" id="pollable" name="pollable" [(ngModel)]="categorie.pollable"> 
 						<label class="form-check-label" for="pollable">Vote ouvert</label>
 					</div>
 				</div>
@@ -55,7 +55,7 @@
 				<div class="col-sm-2"></div>
 				<div class="col-sm-10">
 					<div class="form-check form-switch">
-						<input class="form-check-input field-separate" type="checkbox" id="computed" [(ngModel)]="categorie.computed" name="computed"> 
+						<input class="form-check-input field-separate" type="checkbox" id="computed" name="computed" [(ngModel)]="categorie.computed"> 
 						<label class="form-check-label" for="computed">Vote calculé</label>
 					</div>
 				</div>
@@ -65,7 +65,7 @@
 				<div class="col-sm-2"></div>
 				<div class="col-sm-10">
 					<div class="form-check form-switch">
-						<input class="form-check-input field-separate" type="checkbox" id="displayable" [(ngModel)]="categorie.displayable" name="displayable"> 
+						<input class="form-check-input field-separate" type="checkbox" id="displayable" name="displayable" [(ngModel)]="categorie.displayable"> 
 						<label class="form-check-label" for="displayable">Vote publié</label>
 					</div>
 				</div>
@@ -73,7 +73,7 @@
 
 		</div>
 		<div class="card-footer">
-			<button type="button" class="btn btn-success btn-sm text-left" type="submit"><i class="bi bi-plus-lg"></i>&nbsp;Créer</button>
+			<button type="button" class="btn btn-success btn-sm text-left" type="submit" [disabled]="formRef.invalid"><i class="fa-solid fa-plus"></i>&nbsp;Créer</button>
 		</div>
 	</div>
 </form>

src/app/categorie-details/categorie-details.component.html

@@ -2,7 +2,7 @@
 <div class="card shadow">
 	<div class="card-header">Fiche d'une catégorie</div>
 	<div class="card-header shadow-sm">
-		<button (click)="goToListCategorie()" class="btn btn-primary btn-sm"><i class="bi bi-x-lg"></i>&nbsp;Retour</button>
+		<button (click)="goToListCategorie()" class="btn btn-primary btn-sm"><i class="fa-solid fa-xmark"></i>&nbsp;Retour</button>
 	</div>
 	<div class="card-body">
 
@@ -10,28 +10,28 @@
 		<div class="form-group row">
 			<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Créé le</label>
 			<div class="col-sm-10">
-				<input type="text" class="form-control form-control-sm field-separate" id="dateCreation" [(ngModel)]="categorie.dateCreation" name="dateCreation" disabled>
+				<input type="text" class="form-control form-control-sm field-separate" id="dateCreation" name="dateCreation" [(ngModel)]="categorie.dateCreation" disabled>
 			</div>
 		</div>
 
 		<div class="form-group row">
 			<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Modifié le</label>
 			<div class="col-sm-10">
-				<input type="text" class="form-control form-control-sm field-separate" id="dateModification" [(ngModel)]="categorie.dateModification" name="dateModification" disabled>
+				<input type="text" class="form-control form-control-sm field-separate" id="dateModification" name="dateModification" [(ngModel)]="categorie.dateModification" disabled>
 			</div>
 		</div>
 
 		<div class="form-group row">
 			<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Libellé</label>
 			<div class="col-sm-10">
-				<input type="text" class="form-control form-control-sm field-separate" id="libelle" [(ngModel)]="categorie.libelle" name="libelle" disabled>
+				<input type="text" class="form-control form-control-sm field-separate" id="libelle" name="libelle" [(ngModel)]="categorie.libelle" disabled>
 			</div>
 		</div>
 
 		<div class="form-group row">
 			<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Numéro d'ordre</label>
 			<div class="col-sm-10">
-				<input type="text" class="form-control form-control-sm field-separate" id="numeroOrdre" [(ngModel)]="categorie.numeroOrdre" name="numeroOrdre" disabled>
+				<input type="text" class="form-control form-control-sm field-separate" id="numeroOrdre" name="numeroOrdre" [(ngModel)]="categorie.numeroOrdre" disabled>
 			</div>
 		</div>
 
@@ -39,7 +39,7 @@
 			<div class="col-sm-2"></div>
 			<div class="col-sm-10">
 				<div class="form-check form-switch">
-					<input class="form-check-input field-separate" type="checkbox" id="available" [(ngModel)]="categorie.available" name="available" disabled> 
+					<input class="form-check-input field-separate" type="checkbox" id="available" name="available" [(ngModel)]="categorie.available" disabled> 
 					<label class="form-check-label" for="available">Disponible</label>
 				</div>
 			</div>
@@ -49,7 +49,7 @@
 			<div class="col-sm-2"></div>
 			<div class="col-sm-10">
 				<div class="form-check form-switch">
-					<input class="form-check-input field-separate" type="checkbox" id="uploadable" [(ngModel)]="categorie.uploadable" name="uploadable" disabled> 
+					<input class="form-check-input field-separate" type="checkbox" id="uploadable" name="uploadable" [(ngModel)]="categorie.uploadable" disabled> 
 					<label class="form-check-label" for="uploadable">Téléversable</label>
 				</div>
 			</div>
@@ -59,7 +59,7 @@
 			<div class="col-sm-2"></div>
 			<div class="col-sm-10">
 				<div class="form-check form-switch">
-					<input class="form-check-input field-separate" type="checkbox" id="pollable" [(ngModel)]="categorie.pollable" name="pollable" disabled> 
+					<input class="form-check-input field-separate" type="checkbox" id="pollable" name="pollable" [(ngModel)]="categorie.pollable" disabled> 
 					<label class="form-check-label" for="pollable">Vote ouvert</label>
 				</div>
 			</div>
@@ -69,7 +69,7 @@
 			<div class="col-sm-2"></div>
 			<div class="col-sm-10">
 				<div class="form-check form-switch">
-					<input class="form-check-input field-separate" type="checkbox" id="computed" [(ngModel)]="categorie.computed" name="computed" disabled> 
+					<input class="form-check-input field-separate" type="checkbox" id="computed" name="computed" [(ngModel)]="categorie.computed" disabled> 
 					<label class="form-check-label" for="computed">Vote calculé</label>
 				</div>
 			</div>
@@ -79,7 +79,7 @@
 			<div class="col-sm-2"></div>
 			<div class="col-sm-10">
 				<div class="form-check form-switch">
-					<input class="form-check-input field-separate" type="checkbox" id="displayable" [(ngModel)]="categorie.displayable" name="displayable" disabled> 
+					<input class="form-check-input field-separate" type="checkbox" id="displayable" name="displayable" [(ngModel)]="categorie.displayable" disabled> 
 					<label class="form-check-label" for="displayable">Vote publié</label>
 				</div>
 			</div>
@@ -87,7 +87,7 @@
 
 	</div>
 	<div class="card-footer">
-		<button type="button" (click)="updateCategorie(categorie.numeroCategorie)" class="btn btn-primary btn-sm"><i class="bi bi-pencil"></i>&nbsp;Editer</button>
+		<button type="button" (click)="updateCategorie(categorie.numeroCategorie)" class="btn btn-primary btn-sm"><i class="fa-solid fa-pen"></i>&nbsp;Editer</button>
 	</div>
 </div>
 

src/app/categorie-list/categorie-list.component.html

@@ -4,8 +4,8 @@
 	<div class="card-header shadow-sm">
 		<div class="row">
 			<div class="form-group col-sm-4">
-				<button type="button" (click)="goToRefreshListCategorie()" class="btn btn-primary btn-sm" style="margin-right: 5px;"><i class="bi bi-arrow-clockwise"></i>&nbsp;Actualiser</button>
-				<button type="button" (click)="goToNewCategorie()" class="btn btn-primary btn-sm" style="margin-right: 5px;"><i class="bi bi-plus-lg"></i>&nbsp;Créer</button>
+				<button type="button" (click)="goToRefreshListCategorie()" class="btn btn-primary btn-sm" style="margin-right: 5px;"><i class="fa-solid fa-rotate"></i>&nbsp;Actualiser</button>
+				<button type="button" (click)="goToNewCategorie()" class="btn btn-primary btn-sm" style="margin-right: 5px;"><i class="fa-solid fa-plus"></i>&nbsp;Créer</button>
 			</div>
 		</div>
 	</div>
@@ -13,23 +13,23 @@
 		<table class="table table-sm">
 			<thead class="thead-dark">
 				<tr>
-					<th>Libellé</th>
-					<th class="fs-6 fw-lighter">Disponible</th>
-					<th class="fs-6 fw-lighter">Téléversable</th>
-					<th class="fs-6 fw-lighter">Vote ouvert</th>
-					<th class="fs-6 fw-lighter">Vote terminé</th>
-					<th class="fs-6 fw-lighter">Vote publié</th>
+					<th><h6>Libellé</h6></th>
+					<th><h6>Disponible</h6></th>
+					<th><h6>Téléversable</h6></th>
+					<th><h6>Vote ouvert</h6></th>
+					<th><h6>Vote terminé</h6></th>
+					<th><h6>Vote publié</h6></th>
 				</tr>
 			</thead>
 			<tbody>
 				@for (categorie of categories; track categorie.numeroCategorie) {
 				<tr>
 					<td class="label-nobr"><a (click)="formCategorie(categorie.numeroCategorie)" class="link-primary pointeur-souris text-decoration-none">{{ categorie.libelle }}</a>&nbsp;&nbsp;</td>
-					<td>@if (categorie.available) { <i class="bi bi-check-circle-fill text-success"></i> } @else { <i class="bi bi-x-circle-fill text-danger"></i> }&nbsp;&nbsp;</td>
-					<td>@if (categorie.uploadable) { <i class="bi bi-check-circle-fill text-success"></i> } @else { <i class="bi bi-x-circle-fill text-danger"></i> }&nbsp;&nbsp;</td>
-					<td>@if (categorie.pollable) { <i class="bi bi-check-circle-fill text-success"></i> } @else { <i class="bi bi-x-circle-fill text-danger"></i> }&nbsp;&nbsp;</td>
-					<td>@if (categorie.computed) { <i class="bi bi-check-circle-fill text-success"></i> } @else { <i class="bi bi-x-circle-fill text-danger"></i> }&nbsp;&nbsp;</td>
-					<td>@if (categorie.displayable) { <i class="bi bi-check-circle-fill text-success"></i> } @else { <i class="bi bi-x-circle-fill text-danger"></i> }&nbsp;&nbsp;</td>
+					<td>@if (categorie.available) { <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>@if (categorie.uploadable) { <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>@if (categorie.pollable) { <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>@if (categorie.computed) { <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>@if (categorie.displayable) { <i class="fa-solid fa-circle-check text-success"></i> } @else { <i class="fa-solid fa-circle-xmark text-danger"></i> }&nbsp;&nbsp;</td>
 				</tr>
 				}
 			</tbody>

src/app/categorie-list/categorie-list.component.ts

@@ -16,10 +16,12 @@ export class CategorieListComponent implements OnInit
 
   private retreiveDatas() { this.categorieService.getListCategorie().subscribe(data => { this.categories = data; }); }
 
-  formCategorie(id: number) { this.router.navigate(['/categorie-details', id]); }
- 
-  goToRefreshListCategorie(){ this.retreiveDatas(); }
+  goToRefreshListCategorie(){ this.router.navigate(['/categorie-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; }
 
   goToNewCategorie(){ this.router.navigate(['/categorie-create']); }
 
+  formCategorie(id: number) { this.router.navigate(['/categorie-details', id]); }
+
 }

src/app/categorie-update/categorie-update.component.html

@@ -1,9 +1,9 @@
 <br />
-<form id="formVariable">
+<form id="formVariable" #formRef="ngForm" class="needs-validation">
 <div class="card shadow">
 	<div class="card-header">Fiche d'une catégorie</div>
 	<div class="card-header shadow-sm">
-		<button (click)="goToListCategorie()" class="btn btn-primary btn-sm"><i class="bi bi-x-lg"></i>&nbsp;Retour</button>
+		<button (click)="goToListCategorie()" class="btn btn-primary btn-sm"><i class="fa-solid fa-xmark"></i>&nbsp;Retour</button>
 	</div>
 	<div class="card-body">
 
@@ -31,7 +31,7 @@
 		<div class="form-group row">
 			<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Numéro d'ordre</label>
 			<div class="col-sm-10">
-				<input type="text" class="form-control form-control-sm field-separate" id="numeroOrdre" [(ngModel)]="categorie.numeroOrdre" name="numeroOrdre">
+				<input type="number" min="0" class="form-control form-control-sm field-separate" id="numeroOrdre" name="numeroOrdre" [(ngModel)]="categorie.numeroOrdre">
 			</div>
 		</div>
 
@@ -39,7 +39,7 @@
 			<div class="col-sm-2"></div>
 			<div class="col-sm-10">
 				<div class="form-check form-switch">
-					<input class="form-check-input field-separate" type="checkbox" id="available" [(ngModel)]="categorie.available" name="available"> 
+					<input class="form-check-input field-separate" type="checkbox" id="available" name="available" [(ngModel)]="categorie.available"> 
 					<label class="form-check-label" for="available">Disponible</label>
 				</div>
 			</div>
@@ -49,7 +49,7 @@
 			<div class="col-sm-2"></div>
 			<div class="col-sm-10">
 				<div class="form-check form-switch">
-					<input class="form-check-input field-separate" type="checkbox" id="uploadable" [(ngModel)]="categorie.uploadable" name="uploadable"> 
+					<input class="form-check-input field-separate" type="checkbox" id="uploadable" name="uploadable" [(ngModel)]="categorie.uploadable"> 
 					<label class="form-check-label" for="uploadable">Téléversable</label>
 				</div>
 			</div>
@@ -59,7 +59,7 @@
 			<div class="col-sm-2"></div>
 			<div class="col-sm-10">
 				<div class="form-check form-switch">
-					<input class="form-check-input field-separate" type="checkbox" id="pollable" [(ngModel)]="categorie.pollable" name="pollable"> 
+					<input class="form-check-input field-separate" type="checkbox" id="pollable" name="pollable" [(ngModel)]="categorie.pollable"> 
 					<label class="form-check-label" for="pollable">Vote ouvert</label>
 				</div>
 			</div>
@@ -69,7 +69,7 @@
 			<div class="col-sm-2"></div>
 			<div class="col-sm-10">
 				<div class="form-check form-switch">
-					<input class="form-check-input field-separate" type="checkbox" id="computed" [(ngModel)]="categorie.computed" name="computed"> 
+					<input class="form-check-input field-separate" type="checkbox" id="computed" name="computed" [(ngModel)]="categorie.computed"> 
 					<label class="form-check-label" for="computed">Vote calculé</label>
 				</div>
 			</div>
@@ -79,7 +79,7 @@
 			<div class="col-sm-2"></div>
 			<div class="col-sm-10">
 				<div class="form-check form-switch">
-					<input class="form-check-input field-separate" type="checkbox" id="displayable" [(ngModel)]="categorie.displayable" name="displayable"> 
+					<input class="form-check-input field-separate" type="checkbox" id="displayable" name="displayable" [(ngModel)]="categorie.displayable"> 
 					<label class="form-check-label" for="displayable">Vote publié</label>
 				</div>
 			</div>
@@ -87,8 +87,8 @@
 
 	</div>
 	<div class="card-footer">
-			<button type="button" class="btn btn-warning btn-sm" data-bs-toggle="modal" data-bs-target="#modalModifier"><i class="bi bi-check-lg"></i>&nbsp;Modifier</button>
-			<button type="button" class="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#modalEffacer" style="float: right;"><i class="bi bi-trash"></i>&nbsp;Effacer</button>
+			<button type="button" class="btn btn-warning btn-sm" data-bs-toggle="modal" data-bs-target="#modalModifier" [disabled]="formRef.invalid"><i class="fa-solid fa-check"></i>&nbsp;Modifier</button>
+			<button type="button" class="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#modalEffacer" style="float: right;"><i class="fa-solid fa-trash"></i>&nbsp;Effacer</button>
 	</div>
 </div>
 </form>

src/app/participant-create/participant-create.component.css

@@ -0,0 +1,2 @@
+.label-nobr { white-space: nowrap; }
+.field-separate { margin-bottom: 2px; }

src/app/participant-create/participant-create.component.html

@@ -1 +1,215 @@
-<p>participant-create works!</p>
+<br />
+<form #formRef="ngForm" (ngSubmit)="addParticipant()" class="needs-validation">
+	<div class="card shadow">
+		<div class="card-header">Fiche d'un participant</div>
+		<div class="card-header shadow-sm">
+			<button (click)="goToListParticipant()" class="btn btn-primary btn-sm"><i class="fa-solid fa-xmark"></i>&nbsp;Retour</button>
+		</div>
+		<div class="card-body">
+
+			<div class="form-group row">
+				<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Nom</label>
+				<div class="col-sm-10">
+					<input type="text" class="form-control form-control-sm field-separate" id="nom" name="nom" [(ngModel)]="participant.nom" #nomRef="ngModel" required [class.is-invalid]="nomRef.invalid && nomRef.touched">
+				</div>
+			</div>
+
+			<div class="form-group row">
+				<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Prénom</label>
+				<div class="col-sm-10">
+					<input type="text" class="form-control form-control-sm field-separate" id="prenom" name="prenom" [(ngModel)]="participant.prenom">
+				</div>
+			</div>
+
+			<div class="form-group row">
+				<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Pseudonyme</label>
+				<div class="col-sm-10">
+					<input type="text" class="form-control form-control-sm field-separate" id="pseudonyme" name="pseudonyme" [(ngModel)]="participant.pseudonyme" #pseudonymeRef="ngModel" required [class.is-invalid]="pseudonymeRef.invalid && pseudonymeRef.touched">
+				</div>
+			</div>
+
+			<div class="form-group row">
+				<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Groupe</label>
+				<div class="col-sm-10">
+					<input type="text" class="form-control form-control-sm field-separate" id="groupe" name="groupe" [(ngModel)]="participant.groupe">
+				</div>
+			</div>
+
+			<div class="form-group row">
+				<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Mot de passe</label>
+				<div class="col-sm-10">
+					<input type="password" class="form-control form-control-sm field-separate" id="motDePasse" name="motDePasse" [(ngModel)]="participant.motDePasse">
+				</div>
+			</div>
+
+			<div class="form-group row">
+				<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Délai avant déconnexion</label>
+				<div class="col-sm-10">
+					<input type="text" class="form-control form-control-sm field-separate" id="delaiDeconnexion" name="delaiDeconnexion" [(ngModel)]="participant.delaiDeconnexion">
+				</div>
+			</div>
+
+			<div class="form-group row">
+				<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Adresse</label>
+				<div class="col-sm-10">
+					<input type="text" class="form-control form-control-sm field-separate" id="adresse" name="adresse" [(ngModel)]="participant.adresse">
+				</div>
+			</div>
+
+			<div class="form-group row">
+				<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Code postal</label>
+				<div class="col-sm-10">
+					<input type="text" class="form-control form-control-sm field-separate" id="codePostal" name="codePostal" [(ngModel)]="participant.codePostal">
+				</div>
+			</div>
+
+			<div class="form-group row">
+				<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Ville</label>
+				<div class="col-sm-10">
+					<input type="text" class="form-control form-control-sm field-separate" id="ville" name="ville" [(ngModel)]="participant.ville">
+				</div>
+			</div>
+
+			<div class="form-group row">
+				<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Pays</label>
+				<div class="col-sm-10">
+					<input type="text" class="form-control form-control-sm field-separate" id="pays" name="pays" [(ngModel)]="participant.pays">
+				</div>
+			</div>
+
+			<div class="form-group row">
+				<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Numéro de téléphone</label>
+				<div class="col-sm-10">
+					<input type="text" class="form-control form-control-sm field-separate" id="numeroTelephone" name="numeroTelephone" [(ngModel)]="participant.numeroTelephone">
+				</div>
+			</div>
+
+			<div class="form-group row">
+				<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Adresse email</label>
+				<div class="col-sm-10">
+					<input type="email" class="form-control form-control-sm field-separate" id="email" name="email" [(ngModel)]="participant.email">
+				</div>
+			</div>
+
+			<div class="form-group row">
+				<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Status</label>
+				<div class="col-sm-10">
+					<div class="form-group field-separate">
+						<select class="form-select form-select-sm" id="status" name="status" [(ngModel)]="participant.status">
+							<option value="EN_ATTENTE" selected>{{ PS.EN_ATTENTE }}</option>
+							<option value="PAYE_CHEQUE">{{ PS.PAYE_CHEQUE }}</option>
+							<option value="PAYE_ESPECES">{{ PS.PAYE_ESPECES }}</option>
+							<option value="VIREMENT_BANCAIRE">{{ PS.VIREMENT_BANCAIRE }}</option>
+							<option value="VIREMENT_PAYPAL">{{ PS.VIREMENT_PAYPAL }}</option>
+							<option value="ORGA">{{ PS.ORGA }}</option>
+							<option value="GUEST">{{ PS.GUEST }}</option>
+						</select>
+					</div>
+				</div>
+			</div>
+
+			<div class="form-group row">
+				<div class="col-sm-2"></div>
+				<div class="col-sm-10">
+					<div class="form-check form-switch">
+						<input class="form-check-input field-separate" type="checkbox" id="withMachine" name="withMachine" [(ngModel)]="participant.withMachine"> 
+						<label class="form-check-label" for="withMachine">Avec machine</label>
+					</div>
+				</div>
+			</div>
+
+			<div class="form-group row">
+				<div class="col-sm-2"></div>
+				<div class="col-sm-10">
+					<div class="form-check form-switch">
+						<input class="form-check-input field-separate" type="checkbox" id="hereDay1" name="hereDay1" [(ngModel)]="participant.hereDay1"> 
+						<label class="form-check-label" for="hereDay1">Jour 1</label>
+					</div>
+				</div>
+			</div>
+
+			<div class="form-group row">
+				<div class="col-sm-2"></div>
+				<div class="col-sm-10">
+					<div class="form-check form-switch">
+						<input class="form-check-input field-separate" type="checkbox" id="hereDay2" name="hereDay2" [(ngModel)]="participant.hereDay2"> 
+						<label class="form-check-label" for="hereDay2">Jour 2</label>
+					</div>
+				</div>
+			</div>
+
+			<div class="form-group row">
+				<div class="col-sm-2"></div>
+				<div class="col-sm-10">
+					<div class="form-check form-switch">
+						<input class="form-check-input field-separate" type="checkbox" id="hereDay3" name="hereDay3" [(ngModel)]="participant.hereDay3"> 
+						<label class="form-check-label" for="hereDay3">Jour 3</label>
+					</div>
+				</div>
+			</div>
+
+			<div class="form-group row">
+				<div class="col-sm-2"></div>
+				<div class="col-sm-10">
+					<div class="form-check form-switch">
+						<input class="form-check-input field-separate" type="checkbox" id="sleepingOnSite" name="sleepingOnSite" [(ngModel)]="participant.sleepingOnSite"> 
+						<label class="form-check-label" for="sleepingOnSite">Dort sur place</label>
+					</div>
+				</div>
+			</div>
+
+			<!-- <div class="form-group row">
+				<div class="col-sm-2"></div>
+				<div class="col-sm-10">
+					<div class="form-check form-switch">
+						<input class="form-check-input field-separate" type="checkbox" id="useAmigabus" name="useAmigabus" [(ngModel)]="participant.useAmigabus"> 
+						<label class="form-check-label" for="useAmigabus">Vient en Amigabus</label>
+					</div>
+				</div>
+			</div> -->
+
+			<div class="form-group row">
+				<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Commentaire</label>
+				<div class="col-sm-10">
+					<textarea class="form-control form-control-sm field-separate" id="commentaire" name="commentaire" [(ngModel)]="participant.commentaire"></textarea>
+				</div>
+			</div>
+
+			<div class="form-group row">
+				<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Mode de paiement</label>
+				<div class="col-sm-10">
+					<div class="form-group field-separate">
+						<select class="form-select form-select-sm" id="modePaiement" name="modePaiement" [(ngModel)]="participant.modePaiement">
+							<option value="CHEQUE" selected>{{ PMP.CHEQUE }}</option>
+							<option value="VIREMENT">{{ PMP.VIREMENT }}</option>
+							<option value="PAYPAL">{{ PMP.PAYPAL }}</option>
+							<option value="ESPECES">{{ PMP.ESPECES }}</option>
+							<option value="AUTRE">{{ PMP.AUTRE }}</option>
+						</select>
+					</div>
+				</div>
+			</div>
+
+			<div class="form-group row">
+				<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Somme reçue</label>
+				<div class="col-sm-10">
+					<input type="text" class="form-control form-control-sm field-separate" id="sommeRecue" name="sommeRecue" [(ngModel)]="participant.sommeRecue">
+				</div>
+			</div>
+
+			<div class="form-group row">
+				<div class="col-sm-2"></div>
+				<div class="col-sm-10">
+					<div class="form-check form-switch">
+						<input class="form-check-input field-separate" type="checkbox" id="arrived" name="arrived" [(ngModel)]="participant.arrived" checked> 
+						<label class="form-check-label" for="arrived">Arrivé</label>
+					</div>
+				</div>
+			</div>
+
+		</div>
+		<div class="card-footer">
+			<button type="button" class="btn btn-success btn-sm text-left" type="submit" [disabled]="formRef.invalid"><i class="fa-solid fa-plus"></i>&nbsp;Créer</button>
+		</div>
+	</div>
+</form>

src/app/participant-create/participant-create.component.ts

@@ -1,11 +1,35 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-participant-create',
-  imports: [],
-  templateUrl: './participant-create.component.html',
-  styleUrl: './participant-create.component.css'
-})
-export class ParticipantCreateComponent {
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { Participant, ParticipantStatusEnum, ParticipantModePaiementEnum } from '../participant';
+import { ParticipantService } from '../participant.service';
+import { Router } from '@angular/router';
+import { FormsModule, NgForm } from '@angular/forms'; 
+
+@Component({ selector: 'app-participant-create', imports: [FormsModule], templateUrl: './participant-create.component.html', styleUrl: './participant-create.component.css' })
+
+export class ParticipantCreateComponent implements OnInit
+{
+  
+  PS = ParticipantStatusEnum;
+  PMP = ParticipantModePaiementEnum;
+
+  @ViewChild('formRef') participantForm!: NgForm;
+  
+  participant: Participant = new Participant();
+  
+  constructor(private participantService: ParticipantService, private router: Router) { }
+
+  ngOnInit(): void 
+  { 
+    this.participant.status = this.PS.EN_ATTENTE;
+    this.participant.modePaiement = this.PMP.AUTRE;
+  }
+
+  private saveParticipant() { this.participantService.createParticipant(this.participant).subscribe({ next: () => { this.goToListParticipant(); }, error: (err: any) => { console.log(err); }, complete: () => { } }); }
+
+  addParticipant() { if (this.participantForm.valid) { this.saveParticipant(); } }
+
+  goToListParticipant() {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/participant-details/participant-details.component.css

@@ -0,0 +1,2 @@
+.label-nobr { white-space: nowrap; }
+.field-separate { margin-bottom: 2px; }

src/app/participant-details/participant-details.component.html

@@ -1 +1,228 @@
-<p>participant-details works!</p>
+<br />
+<div class="card shadow">
+	<div class="card-header">Fiche d'un participant</div>
+	<div class="card-header shadow-sm">
+		<button (click)="goToListParticipant()" class="btn btn-primary btn-sm"><i class="fa-solid fa-xmark"></i>&nbsp;Retour</button>
+	</div>
+	<div class="card-body">
+
+		<div class="form-group row">
+			<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Créé le</label>
+			<div class="col-sm-10">
+				<input type="text" class="form-control form-control-sm field-separate" id="dateCreation" name="dateCreation" [(ngModel)]="participant.dateCreation" disabled>
+			</div>
+		</div>
+
+		<div class="form-group row">
+			<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Modifié le</label>
+			<div class="col-sm-10">
+				<input type="text" class="form-control form-control-sm field-separate" id="dateModification" name="dateModification" [(ngModel)]="participant.dateModification" disabled>
+			</div>
+		</div>
+
+		<div class="form-group row">
+			<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Nom</label>
+			<div class="col-sm-10">
+				<input type="text" class="form-control form-control-sm field-separate" id="nom" name="nom" [(ngModel)]="participant.nom" disabled>
+			</div>
+		</div>
+
+		<div class="form-group row">
+			<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Prénom</label>
+			<div class="col-sm-10">
+				<input type="text" class="form-control form-control-sm field-separate" id="prenom" name="prenom" [(ngModel)]="participant.prenom" disabled>
+			</div>
+		</div>
+
+		<div class="form-group row">
+			<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Pseudonyme</label>
+			<div class="col-sm-10">
+				<input type="text" class="form-control form-control-sm field-separate" id="pseudonyme" name="pseudonyme" [(ngModel)]="participant.pseudonyme" disabled>
+			</div>
+		</div>
+
+		<div class="form-group row">
+			<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Groupe</label>
+			<div class="col-sm-10">
+				<input type="text" class="form-control form-control-sm field-separate" id="groupe" name="groupe" [(ngModel)]="participant.groupe" disabled>
+			</div>
+		</div>
+
+		<div class="form-group row">
+			<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Mot de passe</label>
+			<div class="col-sm-10">
+				<input type="password" class="form-control form-control-sm field-separate" id="motDePasse" name="motDePasse" [(ngModel)]="participant.motDePasse" disabled>
+			</div>
+		</div>
+
+		<div class="form-group row">
+			<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Délai avant déconnexion</label>
+			<div class="col-sm-10">
+				<input type="text" class="form-control form-control-sm field-separate" id="delaiDeconnexion" name="delaiDeconnexion" [(ngModel)]="participant.delaiDeconnexion" disabled>
+			</div>
+		</div>
+
+		<div class="form-group row">
+			<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Adresse</label>
+			<div class="col-sm-10">
+				<input type="text" class="form-control form-control-sm field-separate" id="adresse" name="adresse" [(ngModel)]="participant.adresse" disabled>
+			</div>
+		</div>
+
+		<div class="form-group row">
+			<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Code postal</label>
+			<div class="col-sm-10">
+				<input type="text" class="form-control form-control-sm field-separate" id="codePostal" name="codePostal" [(ngModel)]="participant.codePostal" disabled>
+			</div>
+		</div>
+
+		<div class="form-group row">
+			<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Ville</label>
+			<div class="col-sm-10">
+				<input type="text" class="form-control form-control-sm field-separate" id="ville" name="ville" [(ngModel)]="participant.ville" disabled>
+			</div>
+		</div>
+
+		<div class="form-group row">
+			<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Pays</label>
+			<div class="col-sm-10">
+				<input type="text" class="form-control form-control-sm field-separate" id="pays" name="pays" [(ngModel)]="participant.pays" disabled>
+			</div>
+		</div>
+
+		<div class="form-group row">
+			<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Numéro de téléphone</label>
+			<div class="col-sm-10">
+				<input type="text" class="form-control form-control-sm field-separate" id="numeroTelephone" name="numeroTelephone" [(ngModel)]="participant.numeroTelephone" disabled>
+			</div>
+		</div>
+
+		<div class="form-group row">
+			<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Adresse email</label>
+			<div class="col-sm-10">
+				<input type="email" class="form-control form-control-sm field-separate" id="email" name="email" [(ngModel)]="participant.email" disabled>
+			</div>
+		</div>
+
+		<div class="form-group row">
+			<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Status</label>
+			<div class="col-sm-10">
+				<div class="form-group field-separate">
+					<select class="form-select form-select-sm" id="status" name="status" [(ngModel)]="participant.status" disabled>
+						<option value="EN_ATTENTE" selected>{{ PS.EN_ATTENTE }}</option>
+						<option value="PAYE_CHEQUE">{{ PS.PAYE_CHEQUE }}</option>
+						<option value="PAYE_ESPECES">{{ PS.PAYE_ESPECES }}</option>
+						<option value="VIREMENT_BANCAIRE">{{ PS.VIREMENT_BANCAIRE }}</option>
+						<option value="VIREMENT_PAYPAL">{{ PS.VIREMENT_PAYPAL }}</option>
+						<option value="ORGA">{{ PS.ORGA }}</option>
+						<option value="GUEST">{{ PS.GUEST }}</option>
+					</select>
+				</div>
+			</div>
+		</div>
+
+		<div class="form-group row">
+			<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Inscrit le</label>
+			<div class="col-sm-10">
+				<input type="text" class="form-control form-control-sm field-separate" id="dateInscription" name="dateInscription" [(ngModel)]="participant.dateInscription" disabled>
+			</div>
+		</div>
+
+		<div class="form-group row">
+			<div class="col-sm-2"></div>
+			<div class="col-sm-10">
+				<div class="form-check form-switch">
+					<input class="form-check-input field-separate" type="checkbox" id="withMachine" name="withMachine" [(ngModel)]="participant.withMachine" disabled> <label class="form-check-label" for="withMachine">Avec machine</label>
+				</div>
+			</div>
+		</div>
+
+		<div class="form-group row">
+			<div class="col-sm-2"></div>
+			<div class="col-sm-10">
+				<div class="form-check form-switch">
+					<input class="form-check-input field-separate" type="checkbox" id="hereDay1" name="hereDay1" [(ngModel)]="participant.hereDay1" disabled> <label class="form-check-label" for="hereDay1">Jour 1</label>
+				</div>
+			</div>
+		</div>
+
+		<div class="form-group row">
+			<div class="col-sm-2"></div>
+			<div class="col-sm-10">
+				<div class="form-check form-switch">
+					<input class="form-check-input field-separate" type="checkbox" id="hereDay2" name="hereDay2" [(ngModel)]="participant.hereDay2" disabled> <label class="form-check-label" for="hereDay2">Jour 2</label>
+				</div>
+			</div>
+		</div>
+
+		<div class="form-group row">
+			<div class="col-sm-2"></div>
+			<div class="col-sm-10">
+				<div class="form-check form-switch">
+					<input class="form-check-input field-separate" type="checkbox" id="hereDay3" name="hereDay3" [(ngModel)]="participant.hereDay3" disabled> <label class="form-check-label" for="hereDay3">Jour 3</label>
+				</div>
+			</div>
+		</div>
+
+		<div class="form-group row">
+			<div class="col-sm-2"></div>
+			<div class="col-sm-10">
+				<div class="form-check form-switch">
+					<input class="form-check-input field-separate" type="checkbox" id="sleepingOnSite" name="sleepingOnSite" [(ngModel)]="participant.sleepingOnSite" disabled> <label class="form-check-label" for="sleepingOnSite">Dort sur place</label>
+				</div>
+			</div>
+		</div>
+
+		<!-- <div class="form-group row">
+				<div class="col-sm-2"></div>
+				<div class="col-sm-10">
+					<div class="form-check form-switch">
+						<input class="form-check-input field-separate" type="checkbox" id="useAmigabus" name="useAmigabus" [(ngModel)]="participant.useAmigabus" disabled> 
+						<label class="form-check-label" for="useAmigabus">Vient en Amigabus</label>
+					</div>
+				</div>
+			</div> -->
+
+		<div class="form-group row">
+			<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Commentaire</label>
+			<div class="col-sm-10">
+				<textarea class="form-control form-control-sm field-separate" id="commentaire" name="commentaire" [(ngModel)]="participant.commentaire" disabled></textarea>
+			</div>
+		</div>
+
+		<div class="form-group row">
+			<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Mode de paiement</label>
+			<div class="col-sm-10">
+				<div class="form-group field-separate">
+					<select class="form-select form-select-sm" id="modePaiement" name="modePaiement" [(ngModel)]="participant.modePaiement" disabled>
+						<option value="CHEQUE" selected>{{ PMP.CHEQUE }}</option>
+						<option value="VIREMENT">{{ PMP.VIREMENT }}</option>
+						<option value="PAYPAL">{{ PMP.PAYPAL }}</option>
+						<option value="ESPECES">{{ PMP.ESPECES }}</option>
+						<option value="AUTRE">{{ PMP.AUTRE }}</option>
+					</select>
+				</div>
+			</div>
+		</div>
+
+		<div class="form-group row">
+			<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Somme reçue</label>
+			<div class="col-sm-10">
+				<input type="text" class="form-control form-control-sm field-separate" id="sommeRecue" name="sommeRecue" [(ngModel)]="participant.sommeRecue" disabled>
+			</div>
+		</div>
+
+		<div class="form-group row">
+			<div class="col-sm-2"></div>
+			<div class="col-sm-10">
+				<div class="form-check form-switch">
+					<input class="form-check-input field-separate" type="checkbox" id="arrived" name="arrived" [(ngModel)]="participant.arrived" disabled> <label class="form-check-label" for="arrived">Arrivé</label>
+				</div>
+			</div>
+		</div>
+
+	</div>
+	<div class="card-footer">
+		<button type="button" (click)="updateParticipant(participant.numeroParticipant)" class="btn btn-primary btn-sm"><i class="fa-solid fa-pen"></i>&nbsp;Editer</button>
+	</div>
+</div>

src/app/participant-details/participant-details.component.ts

@@ -1,11 +1,34 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-participant-details',
-  imports: [],
-  templateUrl: './participant-details.component.html',
-  styleUrl: './participant-details.component.css'
-})
-export class ParticipantDetailsComponent {
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Participant, ParticipantStatusEnum, ParticipantModePaiementEnum } from '../participant';
+import { ParticipantService } from '../participant.service';
+import { FormsModule } from '@angular/forms'; 
+
+@Component({ selector: 'app-participant-details', imports: [FormsModule], templateUrl: './participant-details.component.html', styleUrl: './participant-details.component.css' })
+
+export class ParticipantDetailsComponent implements OnInit 
+{
+  
+  PS = ParticipantStatusEnum;
+  PMP = ParticipantModePaiementEnum;
+
+  numeroParticipant: number = 0;
+
+  participant: Participant = new Participant();
+  
+  constructor(private participantService: ParticipantService, private route: ActivatedRoute, private router: Router) { }
+
+  ngOnInit(): void 
+  {
+    this.numeroParticipant = this.route.snapshot.params['numeroParticipant'];
+    this.participant = new Participant();
+    this.participantService.getByIdParticipant(this.numeroParticipant).subscribe( data => { this.participant = data; });
+  }
+ 
+  updateParticipant(id: number) { this.router.navigate(['/participant-update', id]); }
+  
+  goToListParticipant(){ 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/participant-list/participant-list.component.css

@@ -0,0 +1,2 @@
+.label-nobr { white-space: nowrap; }
+.pointeur-souris { cursor: pointer; }

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

@@ -1 +1,32 @@
-<p>participant-list works!</p>
+<br />
+<div class="card shadow">
+	<div class="card-header">Table des participants</div>
+	<div class="card-header shadow-sm">
+		<div class="row">
+			<div class="form-group col-sm-4">
+				<button type="button" (click)="goToRefreshListParticipant()" class="btn btn-primary btn-sm" style="margin-right: 5px;"><i class="fa-solid fa-rotate"></i>&nbsp;Actualiser</button>
+				<button type="button" (click)="goToNewParticipant()" class="btn btn-primary btn-sm" style="margin-right: 5px;"><i class="fa-solid fa-plus"></i>&nbsp;Créer</button>
+			</div>
+		</div>
+	</div>
+	<div class="card-body">
+		<table class="table table-sm">
+			<thead class="thead-dark">
+				<tr>
+					<th><h6>Nom</h6></th>
+					<th><h6>Pseudonyme</h6></th>
+					<th><h6>Arrivé</h6></th>
+				</tr>
+			</thead>
+			<tbody>
+				@for (participant of participants; track participant.numeroParticipant) {
+				<tr>
+					<td class="label-nobr">{{ participant.nom }}&nbsp;{{ participant.prenom }}&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>@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>
+				</tr>
+				}
+			</tbody>
+		</table>
+	</div>
+</div>

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

@@ -1,11 +1,27 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-participant-list',
-  imports: [],
-  templateUrl: './participant-list.component.html',
-  styleUrl: './participant-list.component.css'
-})
-export class ParticipantListComponent {
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { Participant } from '../participant';
+import { ParticipantService } from '../participant.service';
+
+@Component({ selector: 'app-participant-list', imports: [], templateUrl: './participant-list.component.html', styleUrl: './participant-list.component.css' })
+
+export class ParticipantListComponent implements OnInit  
+{
+    
+  participants: Participant[] = [];
+
+  constructor(private participantService: ParticipantService, private router: Router) { }
+
+  ngOnInit(): void { this.retreiveDatas(); }
+
+  private retreiveDatas() { this.participantService.getListParticipant().subscribe(data => { this.participants = data; }); }
+
+  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; }
+
+  goToNewParticipant(){ this.router.navigate(['/participant-create']); }
+
+  formParticipant(id: number) { this.router.navigate(['/participant-details', id]); }
 
 }

src/app/participant-update/participant-update.component.css

@@ -0,0 +1,2 @@
+.label-nobr { white-space: nowrap; }
+.field-separate { margin-bottom: 2px; }

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

@@ -1 +1,261 @@
-<p>participant-update works!</p>
+<br />
+<form id="formParticipant" #formRef="ngForm" class="needs-validation">
+<div class="card shadow">
+	<div class="card-header">Fiche d'un participant</div>
+	<div class="card-header shadow-sm">
+		<button (click)="goToListParticipant()" class="btn btn-primary btn-sm"><i class="fa-solid fa-xmark"></i>&nbsp;Retour</button>
+	</div>
+	<div class="card-body">
+
+		<div class="form-group row">
+			<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Créé le</label>
+			<div class="col-sm-10">
+				<input type="text" class="form-control form-control-sm field-separate" id="dateCreation" name="dateCreation" [(ngModel)]="participant.dateCreation" disabled>
+			</div>
+		</div>
+
+		<div class="form-group row">
+			<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Modifié le</label>
+			<div class="col-sm-10">
+				<input type="text" class="form-control form-control-sm field-separate" id="dateModification" name="dateModification" [(ngModel)]="participant.dateModification" disabled>
+			</div>
+		</div>
+
+		<div class="form-group row">
+			<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Nom</label>
+			<div class="col-sm-10">
+				<input type="text" class="form-control form-control-sm field-separate" id="nom" name="nom" [(ngModel)]="participant.nom" #nomRef="ngModel" required [class.is-invalid]="nomRef.invalid && nomRef.touched">
+			</div>
+		</div>
+
+		<div class="form-group row">
+			<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Prénom</label>
+			<div class="col-sm-10">
+				<input type="text" class="form-control form-control-sm field-separate" id="prenom" name="prenom" [(ngModel)]="participant.prenom">
+			</div>
+		</div>
+
+		<div class="form-group row">
+			<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Pseudonyme</label>
+			<div class="col-sm-10">
+				<input type="text" class="form-control form-control-sm field-separate" id="pseudonyme" name="pseudonyme" [(ngModel)]="participant.pseudonyme" #pseudonymeRef="ngModel" required [class.is-invalid]="pseudonymeRef.invalid && pseudonymeRef.touched">
+			</div>
+		</div>
+
+		<div class="form-group row">
+			<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Groupe</label>
+			<div class="col-sm-10">
+				<input type="text" class="form-control form-control-sm field-separate" id="groupe" name="groupe" [(ngModel)]="participant.groupe">
+			</div>
+		</div>
+
+		<div class="form-group row">
+			<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Mot de passe</label>
+			<div class="col-sm-10">
+				<input type="password" class="form-control form-control-sm field-separate" id="motDePasse" name="motDePasse" [(ngModel)]="participant.motDePasse">
+			</div>
+		</div>
+
+		<div class="form-group row">
+			<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Délai avant déconnexion</label>
+			<div class="col-sm-10">
+				<input type="text" class="form-control form-control-sm field-separate" id="delaiDeconnexion" name="delaiDeconnexion" [(ngModel)]="participant.delaiDeconnexion">
+			</div>
+		</div>
+
+		<div class="form-group row">
+			<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Adresse</label>
+			<div class="col-sm-10">
+				<input type="text" class="form-control form-control-sm field-separate" id="adresse" name="adresse" [(ngModel)]="participant.adresse">
+			</div>
+		</div>
+
+		<div class="form-group row">
+			<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Code postal</label>
+			<div class="col-sm-10">
+				<input type="text" class="form-control form-control-sm field-separate" id="codePostal" name="codePostal" [(ngModel)]="participant.codePostal">
+			</div>
+		</div>
+
+		<div class="form-group row">
+			<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Ville</label>
+			<div class="col-sm-10">
+				<input type="text" class="form-control form-control-sm field-separate" id="ville" name="ville" [(ngModel)]="participant.ville">
+			</div>
+		</div>
+
+		<div class="form-group row">
+			<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Pays</label>
+			<div class="col-sm-10">
+				<input type="text" class="form-control form-control-sm field-separate" id="pays" name="pays" [(ngModel)]="participant.pays">
+			</div>
+		</div>
+
+		<div class="form-group row">
+			<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Numéro de téléphone</label>
+			<div class="col-sm-10">
+				<input type="text" class="form-control form-control-sm field-separate" id="numeroTelephone" name="numeroTelephone" [(ngModel)]="participant.numeroTelephone">
+			</div>
+		</div>
+
+		<div class="form-group row">
+			<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Adresse email</label>
+			<div class="col-sm-10">
+				<input type="email" class="form-control form-control-sm field-separate" id="email" name="email" [(ngModel)]="participant.email">
+			</div>
+		</div>
+
+		<div class="form-group row">
+			<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Status</label>
+			<div class="col-sm-10">
+				<div class="form-group field-separate">
+					<select class="form-select form-select-sm" id="status" name="status" [(ngModel)]="participant.status">
+						<option value="EN_ATTENTE" selected>{{ PS.EN_ATTENTE }}</option>
+						<option value="PAYE_CHEQUE">{{ PS.PAYE_CHEQUE }}</option>
+						<option value="PAYE_ESPECES">{{ PS.PAYE_ESPECES }}</option>
+						<option value="VIREMENT_BANCAIRE">{{ PS.VIREMENT_BANCAIRE }}</option>
+						<option value="VIREMENT_PAYPAL">{{ PS.VIREMENT_PAYPAL }}</option>
+						<option value="ORGA">{{ PS.ORGA }}</option>
+						<option value="GUEST">{{ PS.GUEST }}</option>
+					</select>
+				</div>
+			</div>
+		</div>
+
+		<div class="form-group row">
+			<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Inscrit le</label>
+			<div class="col-sm-10">
+				<input type="text" class="form-control form-control-sm field-separate" id="dateInscription" name="dateInscription" [(ngModel)]="participant.dateInscription">
+			</div>
+		</div>
+
+		<div class="form-group row">
+			<div class="col-sm-2"></div>
+			<div class="col-sm-10">
+				<div class="form-check form-switch">
+					<input class="form-check-input field-separate" type="checkbox" id="withMachine" name="withMachine" [(ngModel)]="participant.withMachine"> <label class="form-check-label" for="withMachine">Avec machine</label>
+				</div>
+			</div>
+		</div>
+
+		<div class="form-group row">
+			<div class="col-sm-2"></div>
+			<div class="col-sm-10">
+				<div class="form-check form-switch">
+					<input class="form-check-input field-separate" type="checkbox" id="hereDay1" name="hereDay1" [(ngModel)]="participant.hereDay1"> <label class="form-check-label" for="hereDay1">Jour 1</label>
+				</div>
+			</div>
+		</div>
+
+		<div class="form-group row">
+			<div class="col-sm-2"></div>
+			<div class="col-sm-10">
+				<div class="form-check form-switch">
+					<input class="form-check-input field-separate" type="checkbox" id="hereDay2" name="hereDay2" [(ngModel)]="participant.hereDay2"> <label class="form-check-label" for="hereDay2">Jour 2</label>
+				</div>
+			</div>
+		</div>
+
+		<div class="form-group row">
+			<div class="col-sm-2"></div>
+			<div class="col-sm-10">
+				<div class="form-check form-switch">
+					<input class="form-check-input field-separate" type="checkbox" id="hereDay3" name="hereDay3" [(ngModel)]="participant.hereDay3"> <label class="form-check-label" for="hereDay3">Jour 3</label>
+				</div>
+			</div>
+		</div>
+
+		<div class="form-group row">
+			<div class="col-sm-2"></div>
+			<div class="col-sm-10">
+				<div class="form-check form-switch">
+					<input class="form-check-input field-separate" type="checkbox" id="sleepingOnSite" name="sleepingOnSite" [(ngModel)]="participant.sleepingOnSite"> <label class="form-check-label" for="sleepingOnSite">Dort sur place</label>
+				</div>
+			</div>
+		</div>
+
+		<!-- <div class="form-group row">
+				<div class="col-sm-2"></div>
+				<div class="col-sm-10">
+					<div class="form-check form-switch">
+						<input class="form-check-input field-separate" type="checkbox" id="useAmigabus" name="useAmigabus" [(ngModel)]="participant.useAmigabus"> 
+						<label class="form-check-label" for="useAmigabus">Vient en Amigabus</label>
+					</div>
+				</div>
+			</div> -->
+
+		<div class="form-group row">
+			<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Commentaire</label>
+			<div class="col-sm-10">
+				<textarea class="form-control form-control-sm field-separate" id="commentaire" name="commentaire" [(ngModel)]="participant.commentaire"></textarea>
+			</div>
+		</div>
+
+		<div class="form-group row">
+			<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Mode de paiement</label>
+			<div class="col-sm-10">
+				<div class="form-group field-separate">
+					<select class="form-select form-select-sm" id="modePaiement" name="modePaiement" [(ngModel)]="participant.modePaiement">
+						<option value="CHEQUE" selected>{{ PMP.CHEQUE }}</option>
+						<option value="VIREMENT">{{ PMP.VIREMENT }}</option>
+						<option value="PAYPAL">{{ PMP.PAYPAL }}</option>
+						<option value="ESPECES">{{ PMP.ESPECES }}</option>
+						<option value="AUTRE">{{ PMP.AUTRE }}</option>
+					</select>
+				</div>
+			</div>
+		</div>
+
+		<div class="form-group row">
+			<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Somme reçue</label>
+			<div class="col-sm-10">
+				<input type="text" class="form-control form-control-sm field-separate" id="sommeRecue" name="sommeRecue" [(ngModel)]="participant.sommeRecue">
+			</div>
+		</div>
+
+		<div class="form-group row">
+			<div class="col-sm-2"></div>
+			<div class="col-sm-10">
+				<div class="form-check form-switch">
+					<input class="form-check-input field-separate" type="checkbox" id="arrived" name="arrived" [(ngModel)]="participant.arrived"> <label class="form-check-label" for="arrived">Arrivé</label>
+				</div>
+			</div>
+		</div>
+
+		</div>
+		<div class="card-footer">
+			<button type="button" class="btn btn-warning btn-sm" data-bs-toggle="modal" data-bs-target="#modalModifier" [disabled]="formRef.invalid"><i class="fa-solid fa-check"></i>&nbsp;Modifier</button>
+			<button type="button" class="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#modalEffacer" style="float: right;"><i class="fa-solid fa-trash"></i>&nbsp;Effacer</button>
+		</div>
+	</div>
+</form>
+
+<div class="modal fade" id="modalModifier" tabindex="-1" aria-labelledby="modalModifierTitre" aria-hidden="true">
+	<div class="modal-dialog modal-dialog-centered" role="document">
+		<div class="modal-content">
+			<div class="modal-header">
+				<h5 class="modal-title" id="modalModifierTitre">Modification</h5>
+			</div>
+			<div class="modal-body">Actualiser cet enregistrement ?</div>
+			<div class="modal-footer">
+				<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Annuler</button>
+				<button type="button" class="btn btn-warning btn-sm" (click)="updateConfirmed()" data-bs-dismiss="modal">Confirmer</button>
+			</div>
+		</div>
+	</div>
+</div>
+
+<div class="modal fade" id="modalEffacer" tabindex="-1" aria-labelledby="modalEffacerTitre" aria-hidden="true">
+	<div class="modal-dialog modal-dialog-centered" role="document">
+		<div class="modal-content">
+			<div class="modal-header">
+				<h5 class="modal-title text-danger" id="modalEffacerTitre">Suppression</h5>
+			</div>
+			<div class="modal-body">Effacer cet enregistrement ?</div>
+			<div class="modal-footer">
+				<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Annuler</button>
+				<button type="button" class="btn btn-danger btn-sm" (click)="deleteConfirmed()" data-bs-dismiss="modal">Confirmer</button>
+			</div>
+		</div>
+	</div>
+</div>

src/app/participant-update/participant-update.component.ts

@@ -1,11 +1,37 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-participant-update',
-  imports: [],
-  templateUrl: './participant-update.component.html',
-  styleUrl: './participant-update.component.css'
-})
-export class ParticipantUpdateComponent {
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Participant, ParticipantStatusEnum, ParticipantModePaiementEnum } from '../participant';
+import { ParticipantService } from '../participant.service';
+import { FormsModule, NgForm } from '@angular/forms'; 
+
+@Component({ selector: 'app-participant-update', imports: [FormsModule], templateUrl: './participant-update.component.html', styleUrl: './participant-update.component.css' })
+
+export class ParticipantUpdateComponent implements OnInit
+{
+  
+  PS = ParticipantStatusEnum;
+  PMP = ParticipantModePaiementEnum;
+
+  @ViewChild('formRef') participantForm!: NgForm;
+
+  numeroParticipant: number = 0;
+  
+  participant: Participant = new Participant();
+  
+  constructor(private participantService: ParticipantService, private route: ActivatedRoute, private router: Router) { }
+
+  ngOnInit(): void 
+  {
+    this.numeroParticipant = this.route.snapshot.params['numeroParticipant'];
+    this.participantService.getByIdParticipant(this.numeroParticipant).subscribe(data => { this.participant = data; });
+  }
+
+  updateConfirmed() { if (this.participantForm.valid) { this.participantService.updateParticipant(this.numeroParticipant, this.participant).subscribe(() => { this.goToListParticipant(); }); } }
+
+  deleteConfirmed() { this.participantService.deleteParticipant(this.numeroParticipant).subscribe(() => { this.goToListParticipant(); }); }
+
+  goToListParticipant(){ 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/participant.ts

@@ -1,30 +1,21 @@
-
-export class ParticipantModePaiement
+export enum ParticipantStatusEnum
 {
-  constructor(public value:string) { }
-
-  toString() { return this.value; }
-
-  static cheque = new ParticipantModePaiement("Chèque");
-  static virement = new ParticipantModePaiement("Virement");
-  static paypal = new ParticipantModePaiement("Paypal");
-  static especes = new ParticipantModePaiement("Espèces");
-  static autre = new ParticipantModePaiement("Autre");
+  EN_ATTENTE = "En attente", 
+  PAYE_CHEQUE = "Payé chèque", 
+  PAYE_ESPECES = "Payé espèces", 
+  VIREMENT_BANCAIRE = "Virement bancaire", 
+  VIREMENT_PAYPAL = "Virement Paypal", 
+  ORGA = "Orga", 
+  GUEST = "Guest",
 }
 
-export class ParticipantStatus
+export enum ParticipantModePaiementEnum
 {
-  constructor(public value:string) { }
-
-  toString() { return this.value; }
-
-  static en_attente = new ParticipantStatus("En attente");
-  static paye_cheque = new ParticipantStatus("Payé chèque");
-  static paye_especes = new ParticipantStatus("Payé espèces");
-  static virement_bancaire = new ParticipantStatus("Virement bancaire");
-  static virement_paypal = new ParticipantStatus("Virement Paypal");
-  static orga = new ParticipantStatus("Orga");
-  static guest = new ParticipantStatus("Guest");
+  CHEQUE = "Chèque",
+  VIREMENT = "Virement", 
+  PAYPAL = "Paypal", 
+  ESPECES = "Espèces", 
+  AUTRE = "Autre",
 }
 
 export class Participant 
@@ -46,7 +37,7 @@ export class Participant
   pays: string = "";
   numeroTelephone: string = "";
   email: string = "";
-  status: ParticipantStatus = ParticipantStatus.en_attente;
+  status: ParticipantStatusEnum = ParticipantStatusEnum.EN_ATTENTE;
   withMachine: boolean = true;
   commentaire: string = "";
   hereDay1: boolean = false;
@@ -54,7 +45,7 @@ export class Participant
   hereDay3: boolean = false;
   sleepingOnSite: boolean = true;
   useAmigabus: boolean = false;
-  modePaiement: ParticipantModePaiement = ParticipantModePaiement.autre;
+  modePaiement: ParticipantModePaiementEnum = ParticipantModePaiementEnum.CHEQUE;
   dateInscription: string = "";
   sommeRecue: string = "";
   arrived: boolean = false;

src/app/variable-create/variable-create.component.html

@@ -3,7 +3,7 @@
 	<div class="card shadow">
 		<div class="card-header">Fiche d'une variable</div>
 		<div class="card-header shadow-sm">
-			<button (click)="goToListVariable()" class="btn btn-primary btn-sm"><i class="bi bi-x-lg"></i>&nbsp;Retour</button>
+			<button (click)="goToListVariable()" class="btn btn-primary btn-sm"><i class="fa-solid fa-xmark"></i>&nbsp;Retour</button>
 		</div>
 		<div class="card-body">
 
@@ -37,7 +37,7 @@
 
 		</div>
 		<div class="card-footer">
-			<button type="button" class="btn btn-success btn-sm text-left" type="submit"><i class="bi bi-plus-lg"></i>&nbsp;Créer</button>
+			<button type="button" class="btn btn-success btn-sm text-left" type="submit" [disabled]="formRef.invalid"><i class="fa-solid fa-plus"></i>&nbsp;Créer</button>
 		</div>
 	</div>
 </form>

src/app/variable-create/variable-create.component.ts

@@ -2,13 +2,16 @@ import { Component, OnInit, ViewChild } from '@angular/core';
 import { Variable } from '../variable';
 import { VariableService } from '../variable.service';
 import { Router } from '@angular/router';
-import { FormsModule, NgForm } from '@angular/forms'; 
+import { FormsModule, NgForm, NgModel } from '@angular/forms'; 
 
 @Component({ selector: 'app-variable-create', imports: [FormsModule], templateUrl: './variable-create.component.html', styleUrl: './variable-create.component.css' })
 
 export class VariableCreateComponent implements OnInit
 {
+
   @ViewChild('formRef') variableForm!: NgForm;
+  @ViewChild('typeRef') typeField!: NgModel;
+  @ViewChild('codeRef') codeField!: NgModel;
   
   variable: Variable = new Variable();
   

src/app/variable-details/variable-details.component.html

@@ -2,42 +2,42 @@
 <div class="card shadow">
   <div class="card-header">Fiche d'une variable</div>
 	<div class="card-header shadow-sm">
-		<button type="button" (click)="goToListVariable()" class="btn btn-primary btn-sm"><i class="bi bi-x-lg"></i>&nbsp;Retour</button>
+		<button type="button" (click)="goToListVariable()" class="btn btn-primary btn-sm"><i class="fa-solid fa-xmark"></i>&nbsp;Retour</button>
 	</div>
 	<div class="card-body">
 
 		<div class="form-group row">
 			<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Créé le</label>
 			<div class="col-sm-10">
-				<input type="text" class="form-control form-control-sm field-separate" id="dateCreation" [(ngModel)]="variable.dateCreation" name="dateCreation" disabled>
+				<input type="text" class="form-control form-control-sm field-separate" id="dateCreation" name="dateCreation" [(ngModel)]="variable.dateCreation" disabled>
 			</div>
 		</div>
 
 		<div class="form-group row">
 			<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Modifié le</label>
 			<div class="col-sm-10">
-				<input type="text" class="form-control form-control-sm field-separate" id="dateModification" [(ngModel)]="variable.dateModification" name="dateModification" disabled>
+				<input type="text" class="form-control form-control-sm field-separate" id="dateModification" name="dateModification" [(ngModel)]="variable.dateModification" disabled>
 			</div>
 		</div>
 
 		<div class="form-group row">
 			<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Type</label>
 			<div class="col-sm-10">
-				<input type="text" class="form-control form-control-sm field-separate" id="type" [(ngModel)]="variable.type" name="type" disabled>
+				<input type="text" class="form-control form-control-sm field-separate" id="type" name="type" [(ngModel)]="variable.type" disabled>
 			</div>
 		</div>
 
 		<div class="form-group row">
 			<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Code</label>
 			<div class="col-sm-10">
-				<input type="text" class="form-control form-control-sm field-separate" id="code" [(ngModel)]="variable.code" name="code" disabled>
+				<input type="text" class="form-control form-control-sm field-separate" id="code" name="code" [(ngModel)]="variable.code" disabled>
 			</div>
 		</div>
 
 		<div class="form-group row">
 			<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Valeur</label>
 			<div class="col-sm-10">
-				<input type="text" class="form-control form-control-sm field-separate" id="valeur" [(ngModel)]="variable.valeur" name="valeur" disabled>
+				<input type="text" class="form-control form-control-sm field-separate" id="valeur" name="valeur" [(ngModel)]="variable.valeur" disabled>
 			</div>
 		</div>
 
@@ -51,6 +51,6 @@
 
 	</div>
 	<div class="card-footer">
-		<button type="button" (click)="updateVariable(variable.numeroVariable)" class="btn btn-primary btn-sm"><i class="bi bi-pencil"></i>&nbsp;Editer</button>
+		<button type="button" (click)="updateVariable(variable.numeroVariable)" class="btn btn-primary btn-sm"><i class="fa-solid fa-pen"></i>&nbsp;Editer</button>
 	</div>
 </div>

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

@@ -4,8 +4,8 @@
 	<div class="card-header shadow-sm">
 		<div class="row">
 			<div class="form-group col-sm-4">
-				<button type="button" (click)="goToRefreshListVariable()" class="btn btn-primary btn-sm" style="margin-right: 5px;"><i class="bi bi-arrow-clockwise"></i>&nbsp;Actualiser</button>
-				<button type="button" (click)="goToNewVariable()" class="btn btn-primary btn-sm" style="margin-right: 5px;"><i class="bi bi-plus-lg"></i>&nbsp;Créer</button>
+				<button type="button" (click)="goToRefreshListVariable()" class="btn 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 btn-primary btn-sm" 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">
@@ -21,9 +21,9 @@
 		<table class="table table-sm">
 			<thead class="thead-dark">
 				<tr>
-					<th>Type</th>
-					<th>Code</th>
-					<th>Valeur</th>
+					<th><h6>Type</h6></th>
+					<th><h6>Code</h6></th>
+					<th><h6>Valeur</h6></th>
 					<th></th>
 				</tr>
 			</thead>

src/app/variable-list/variable-list.component.ts

@@ -25,7 +25,9 @@ export class VariableListComponent implements OnInit
     });
   }
 
-  goToRefreshListVariable(){ this.retreiveDatas(); }
+  goToRefreshListVariable(){ this.router.navigate(['/variable-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; }
 
   goToNewVariable(){ this.router.navigate(['/variable-create']); }
 

src/app/variable-update/variable-update.component.html

@@ -3,21 +3,21 @@
 	<div class="card shadow">
 		<div class="card-header">Fiche d'une variable</div>
 		<div class="card-header shadow-sm">
-			<button type="button" (click)="goToListVariable()" class="btn btn-primary btn-sm"><i class="bi bi-x-lg"></i>&nbsp;Retour</button>
+			<button type="button" (click)="goToListVariable()" class="btn btn-primary btn-sm"><i class="fa-solid fa-xmark"></i>&nbsp;Retour</button>
 		</div>
 		<div class="card-body">
 
 			<div class="form-group row">
 				<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Créé le</label>
 				<div class="col-sm-10">
-					<input type="text" class="form-control form-control-sm field-separate" id="dateCreation" [(ngModel)]="variable.dateCreation" name="dateCreation" disabled>
+					<input type="text" class="form-control form-control-sm field-separate" id="dateCreation" name="dateCreation" [(ngModel)]="variable.dateCreation" disabled>
 				</div>
 			</div>
 
 			<div class="form-group row">
 				<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Modifié le</label>
 				<div class="col-sm-10">
-					<input type="text" class="form-control form-control-sm field-separate" id="dateModification" [(ngModel)]="variable.dateModification" name="dateModification" disabled>
+					<input type="text" class="form-control form-control-sm field-separate" id="dateModification" name="dateModification" [(ngModel)]="variable.dateModification" disabled>
 				</div>
 			</div>
 
@@ -38,7 +38,7 @@
 			<div class="form-group row">
 				<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Valeur</label>
 				<div class="col-sm-10">
-					<input type="text" class="form-control form-control-sm field-separate" id="valeur" [(ngModel)]="variable.valeur" name="valeur">
+					<input type="text" class="form-control form-control-sm field-separate" id="valeur" name="valeur" [(ngModel)]="variable.valeur">
 				</div>
 			</div>
 
@@ -52,8 +52,8 @@
 
 		</div>
 		<div class="card-footer">
-			<button type="button" class="btn btn-warning btn-sm" data-bs-toggle="modal" data-bs-target="#modalModifier"><i class="bi bi-check-lg"></i>&nbsp;Modifier</button>
-			<button type="button" class="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#modalEffacer" style="float: right;"><i class="bi bi-trash"></i>&nbsp;Effacer</button>
+			<button type="button" class="btn btn-warning btn-sm" data-bs-toggle="modal" data-bs-target="#modalModifier" [disabled]="formRef.invalid"><i class="fa-solid fa-check"></i>&nbsp;Modifier</button>
+			<button type="button" class="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#modalEffacer" style="float: right;"><i class="fa-solid fa-trash"></i>&nbsp;Effacer</button>
 		</div>
 	</div>
 </form>

src/app/variable-update/variable-update.component.ts

@@ -8,6 +8,7 @@ import { FormsModule, NgForm } from '@angular/forms';
 
 export class VariableUpdateComponent implements OnInit
 {
+
   @ViewChild('formRef') variableForm!: NgForm;
 
   numeroVariable: number = 0;