dev en cours

angular.json

@@ -28,7 +28,8 @@
             ],
             "styles": [
               "src/styles.css",
-              "node_modules/bootstrap/dist/css/bootstrap.min.css"
+              "node_modules/bootstrap/dist/css/bootstrap.min.css",
+              "node_modules/bootstrap-icons/font/bootstrap-icons.css"
             ],
             "scripts": [
               "node_modules/jquery/dist/jquery.min.js",

package-lock.json

@@ -17,6 +17,7 @@
         "@angular/platform-browser-dynamic": "^19.1.0",
         "@angular/router": "^19.1.0",
         "bootstrap": "^5.3.3",
+        "bootstrap-icons": "^1.11.3",
         "jquery": "^3.7.1",
         "ngx-bootstrap": "^19.0.2",
         "rxjs": "~7.8.0",
@@ -5820,6 +5821,22 @@
         "@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",

package.json

@@ -19,8 +19,8 @@
     "@angular/platform-browser-dynamic": "^19.1.0",
     "@angular/router": "^19.1.0",
     "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"

src/app/app.component.ts

@@ -8,6 +8,7 @@ import { FormsModule} from '@angular/forms';
   templateUrl: './app.component.html',
   styleUrl: './app.component.css'
 })
+
 export class AppComponent {
   title = 'demovote';
 }

src/app/app.routes.ts

@@ -2,19 +2,27 @@ import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { VariableListComponent } from './variable-list/variable-list.component';
 import { VariableCreateComponent } from './variable-create/variable-create.component';
-import { VariableUpdateComponent } from './variable-update/variable-update.component';
 import { VariableDetailsComponent } from './variable-details/variable-details.component';
+import { VariableUpdateComponent } from './variable-update/variable-update.component';
+import { CategorieListComponent } from './categorie-list/categorie-list.component';
+import { CategorieCreateComponent } from './categorie-create/categorie-create.component';
+import { CategorieDetailsComponent } from './categorie-details/categorie-details.component';
+import { CategorieUpdateComponent } from './categorie-update/categorie-update.component';
 
 export const routes: Routes = [  
+  {path: '', redirectTo: 'variable-list', pathMatch: 'full'},
   {path: 'variable-list', component: VariableListComponent},
   {path: 'variable-create', component: VariableCreateComponent},
-  {path: '', redirectTo: 'variable-list', pathMatch: 'full'},
+  {path: 'variable-details/:numeroVariable', component: VariableDetailsComponent},
   {path: 'variable-update/:numeroVariable', component: VariableUpdateComponent},
-  {path: 'variable-details/:numeroVariable', component: VariableDetailsComponent}
+  {path: 'categorie-list', component: CategorieListComponent},
+  {path: 'categorie-create', component: CategorieCreateComponent},
+  {path: 'categorie-details/:numeroCategorie', component: CategorieDetailsComponent},
+  {path: 'categorie-update/:numeroCategorie', component: CategorieUpdateComponent},
 ];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes)],                                                                                                                                                                                                                                                                                                          
+  imports: [RouterModule.forRoot(routes, { onSameUrlNavigation: 'reload' })],                                                                                                                                                                                                                                                                                                          
   exports: [RouterModule]
 })
 

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

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

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

@@ -0,0 +1,79 @@
+<br />
+<form (ngSubmit)="onSubmit()">
+	<div class="card">
+		<div class="card-header">
+			<button (click)="goToListCategorie()" class="btn btn-primary btn-sm"><i class="bi bi-x-lg"></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">
+				</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">
+				</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="available" [(ngModel)]="categorie.available" name="available"> 
+						<label class="form-check-label" for="available">Disponible</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="uploadable" [(ngModel)]="categorie.uploadable" name="uploadable"> 
+						<label class="form-check-label" for="uploadable">Téléversable</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="pollable" [(ngModel)]="categorie.pollable" name="pollable"> 
+						<label class="form-check-label" for="pollable">Vote ouvert</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="computed" [(ngModel)]="categorie.computed" name="computed"> 
+						<label class="form-check-label" for="computed">Vote calculé</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="displayable" [(ngModel)]="categorie.displayable" name="displayable"> 
+						<label class="form-check-label" for="displayable">Vote publié</label>
+					</div>
+				</div>
+			</div>
+
+		</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>
+		</div>
+	</div>
+</form>
+

src/app/categorie-create/categorie-create.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CategorieCreateComponent } from './categorie-create.component';
+
+describe('CategorieCreateComponent', () => {
+  let component: CategorieCreateComponent;
+  let fixture: ComponentFixture<CategorieCreateComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CategorieCreateComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(CategorieCreateComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,30 @@
+import { Component, OnInit } from '@angular/core';
+import { Categorie } from '../categorie';
+import { CategorieService } from '../categorie.service';
+import { Router } from '@angular/router';
+import { FormsModule } from '@angular/forms'; 
+
+@Component({ selector: 'app-categorie-create', imports: [FormsModule], templateUrl: './categorie-create.component.html', styleUrl: './categorie-create.component.css'})
+
+export class CategorieCreateComponent 
+{
+
+  categorie: Categorie = new Categorie();
+  
+  constructor(private categorieService: CategorieService, private router: Router) { }
+
+  ngOnInit(): void { }
+
+  saveCategorie() { this.categorieService.createCategorie(this.categorie).subscribe({
+        next: (params) => { console.log('params', params); this.goToListCategorie(); },
+        error: (err: any) => { console.log(err); },
+        complete: () => { }
+      }); }
+
+  onSubmit(){ console.log(this.categorie); this.saveCategorie(); }
+
+  goToListCategorie() {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; }
+
+}

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

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

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

@@ -0,0 +1,92 @@
+<br />
+<div class="card">
+	<div class="card-header">
+		<button (click)="goToListCategorie()" class="btn btn-primary btn-sm"><i class="bi bi-x-lg"></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)]="categorie.dateCreation" name="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>
+			</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>
+			</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>
+			</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="available" [(ngModel)]="categorie.available" name="available" disabled> 
+					<label class="form-check-label" for="available">Disponible</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="uploadable" [(ngModel)]="categorie.uploadable" name="uploadable" disabled> 
+					<label class="form-check-label" for="uploadable">Téléversable</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="pollable" [(ngModel)]="categorie.pollable" name="pollable" disabled> 
+					<label class="form-check-label" for="pollable">Vote ouvert</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="computed" [(ngModel)]="categorie.computed" name="computed" disabled> 
+					<label class="form-check-label" for="computed">Vote calculé</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="displayable" [(ngModel)]="categorie.displayable" name="displayable" disabled> 
+					<label class="form-check-label" for="displayable">Vote publié</label>
+				</div>
+			</div>
+		</div>
+
+	</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>
+	</div>
+</div>
+

src/app/categorie-details/categorie-details.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CategorieDetailsComponent } from './categorie-details.component';
+
+describe('CategorieDetailsComponent', () => {
+  let component: CategorieDetailsComponent;
+  let fixture: ComponentFixture<CategorieDetailsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CategorieDetailsComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(CategorieDetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,31 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Categorie } from '../categorie';
+import { CategorieService } from '../categorie.service';
+import { FormsModule } from '@angular/forms'; 
+
+@Component({ selector: 'app-categorie-details', imports: [FormsModule], templateUrl: './categorie-details.component.html', styleUrl: './categorie-details.component.css' })
+
+export class CategorieDetailsComponent implements OnInit 
+{
+
+  numeroCategorie: number = 0;
+
+  categorie: Categorie = new Categorie();
+  
+  constructor(private categorieService: CategorieService, private route: ActivatedRoute, private router: Router) { }
+
+  ngOnInit(): void 
+  {
+    this.numeroCategorie = this.route.snapshot.params['numeroCategorie'];
+    this.categorie = new Categorie();
+    this.categorieService.getByIdCategorie(this.numeroCategorie).subscribe( data => { this.categorie = data; });
+  }
+ 
+  updateCategorie(id: number) { this.router.navigate(['/categorie-update', id]); }
+  
+  goToListCategorie(){ 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; }
+
+}

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

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

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

@@ -0,0 +1,37 @@
+<br />
+<div class="card">
+	<div class="card-header">
+		<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>
+			</div>
+		</div>
+	</div>
+	<div class="card-body">
+		<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>
+				</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>
+				</tr>
+				}
+			</tbody>
+		</table>
+	</div>
+</div>

src/app/variable/variable.component.spec.ts → src/app/categorie-list/categorie-list.component.spec.ts

@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { VariableComponent } from './variable.component';
+import { CategorieListComponent } from './categorie-list.component';
 
-describe('VariableComponent', () => {
-  let component: VariableComponent;
-  let fixture: ComponentFixture<VariableComponent>;
+describe('CategorieListComponent', () => {
+  let component: CategorieListComponent;
+  let fixture: ComponentFixture<CategorieListComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [VariableComponent]
+      imports: [CategorieListComponent]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(VariableComponent);
+    fixture = TestBed.createComponent(CategorieListComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

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

@@ -0,0 +1,25 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { Categorie } from '../categorie';
+import { CategorieService } from '../categorie.service';
+
+@Component({ selector: 'app-categorie-list', imports: [], templateUrl: './categorie-list.component.html', styleUrl: './categorie-list.component.css'})
+
+export class CategorieListComponent implements OnInit 
+{
+
+  categories: Categorie[] = [];
+
+  constructor(private categorieService: CategorieService, private router: Router) { }
+
+  ngOnInit(): void { this.retreiveDatas(); }
+
+  private retreiveDatas() { this.categorieService.getListCategorie().subscribe(data => { this.categories = data; }); }
+
+  formCategorie(id: number) { this.router.navigate(['/categorie-details', id]); }
+ 
+  goToRefreshListCategorie(){ this.retreiveDatas(); }
+
+  goToNewCategorie(){ this.router.navigate(['/categorie-create']); }
+
+}

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

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

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

@@ -0,0 +1,125 @@
+<br />
+<form id="formVariable">
+<div class="card">
+	<div class="card-header">
+		<button (click)="goToListCategorie()" class="btn btn-primary btn-sm"><i class="bi bi-x-lg"></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)]="categorie.dateCreation" name="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>
+			</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">
+			</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">
+			</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="available" [(ngModel)]="categorie.available" name="available"> 
+					<label class="form-check-label" for="available">Disponible</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="uploadable" [(ngModel)]="categorie.uploadable" name="uploadable"> 
+					<label class="form-check-label" for="uploadable">Téléversable</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="pollable" [(ngModel)]="categorie.pollable" name="pollable"> 
+					<label class="form-check-label" for="pollable">Vote ouvert</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="computed" [(ngModel)]="categorie.computed" name="computed"> 
+					<label class="form-check-label" for="computed">Vote calculé</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="displayable" [(ngModel)]="categorie.displayable" name="displayable"> 
+					<label class="form-check-label" for="displayable">Vote publié</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"><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>
+	</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/categorie-update/categorie-update.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CategorieUpdateComponent } from './categorie-update.component';
+
+describe('CategorieUpdateComponent', () => {
+  let component: CategorieUpdateComponent;
+  let fixture: ComponentFixture<CategorieUpdateComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CategorieUpdateComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(CategorieUpdateComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,32 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Categorie } from '../categorie';
+import { CategorieService } from '../categorie.service';
+import { FormsModule } from '@angular/forms'; 
+
+@Component({ selector: 'app-categorie-update', imports: [FormsModule], templateUrl: './categorie-update.component.html', styleUrl: './categorie-update.component.css' })
+
+export class CategorieUpdateComponent implements OnInit
+{
+  
+  numeroCategorie: number = 0;
+  
+  categorie: Categorie = new Categorie();
+  
+  constructor(private categorieService: CategorieService, private route: ActivatedRoute, private router: Router) { }
+
+  ngOnInit(): void 
+  {
+    this.numeroCategorie = this.route.snapshot.params['numeroCategorie'];
+    this.categorieService.getByIdCategorie(this.numeroCategorie).subscribe(data => { this.categorie = data; });
+  }
+
+  updateConfirmed() { this.categorieService.updateCategorie(this.numeroCategorie, this.categorie).subscribe(() => { this.goToListCategorie(); }); }
+
+  deleteConfirmed() { this.categorieService.deleteCategorie(this.numeroCategorie).subscribe(() => { this.goToListCategorie(); }); }
+
+  goToListCategorie(){ 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; }
+
+}

src/app/categorie.service.ts

@@ -0,0 +1,25 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http'
+import { Observable } from 'rxjs';
+import { Categorie } from './categorie';
+
+@Injectable({ providedIn: 'root' })
+
+export class CategorieService 
+{
+
+  private baseURL = "http://localhost:8080/demovote-api/v1/categorie";
+
+  constructor(private httpClient: HttpClient) { }
+  
+  getListCategorie(): Observable<Categorie[]>{ return this.httpClient.get<Categorie[]>(`${this.baseURL}/list`); }
+
+  createCategorie(categorie: Categorie): Observable<Object>{ return this.httpClient.post(`${this.baseURL}/create`, categorie); }
+
+  getByIdCategorie(id: number): Observable<Categorie>{ return this.httpClient.get<Categorie>(`${this.baseURL}/form/${id}`); }
+
+  updateCategorie(id: number, categorie: Categorie): Observable<Object>{ return this.httpClient.put(`${this.baseURL}/update/${id}`, categorie); }
+
+  deleteCategorie(id: number): Observable<Object>{ return this.httpClient.delete(`${this.baseURL}/delete/${id}`); }
+  
+}

src/app/categorie.ts

@@ -0,0 +1,14 @@
+export class Categorie 
+{
+  dateCreation: string = "";
+  dateModification: string = "";
+  numeroCategorie: number = 0;
+  libelle: string = "";
+  numeroOrdre: number = 1;
+  available: boolean = false;
+  uploadable: boolean = true;
+  pollable: boolean = false;
+  computed: boolean = false;
+  nombreVotants: number = 0;
+  displayable: boolean = false;
+}

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

@@ -0,0 +1 @@
+<p>participant-create works!</p>

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ParticipantCreateComponent } from './participant-create.component';
+
+describe('ParticipantCreateComponent', () => {
+  let component: ParticipantCreateComponent;
+  let fixture: ComponentFixture<ParticipantCreateComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ParticipantCreateComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ParticipantCreateComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-participant-create',
+  imports: [],
+  templateUrl: './participant-create.component.html',
+  styleUrl: './participant-create.component.css'
+})
+export class ParticipantCreateComponent {
+
+}

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

@@ -0,0 +1 @@
+<p>participant-details works!</p>

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ParticipantDetailsComponent } from './participant-details.component';
+
+describe('ParticipantDetailsComponent', () => {
+  let component: ParticipantDetailsComponent;
+  let fixture: ComponentFixture<ParticipantDetailsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ParticipantDetailsComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ParticipantDetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-participant-details',
+  imports: [],
+  templateUrl: './participant-details.component.html',
+  styleUrl: './participant-details.component.css'
+})
+export class ParticipantDetailsComponent {
+
+}

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

@@ -0,0 +1 @@
+<p>participant-list works!</p>

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ParticipantListComponent } from './participant-list.component';
+
+describe('ParticipantListComponent', () => {
+  let component: ParticipantListComponent;
+  let fixture: ComponentFixture<ParticipantListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ParticipantListComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ParticipantListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-participant-list',
+  imports: [],
+  templateUrl: './participant-list.component.html',
+  styleUrl: './participant-list.component.css'
+})
+export class ParticipantListComponent {
+
+}

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

@@ -0,0 +1 @@
+<p>participant-update works!</p>

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ParticipantUpdateComponent } from './participant-update.component';
+
+describe('ParticipantUpdateComponent', () => {
+  let component: ParticipantUpdateComponent;
+  let fixture: ComponentFixture<ParticipantUpdateComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ParticipantUpdateComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ParticipantUpdateComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-participant-update',
+  imports: [],
+  templateUrl: './participant-update.component.html',
+  styleUrl: './participant-update.component.css'
+})
+export class ParticipantUpdateComponent {
+
+}

src/app/participant.service.ts

@@ -0,0 +1,25 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http'
+import { Observable } from 'rxjs';
+import { Participant } from './participant';
+
+@Injectable({ providedIn: 'root' })
+
+export class ParticipantService 
+{
+
+  private baseURL = "http://localhost:8080/demovote-api/v1/participant";
+
+  constructor(private httpClient: HttpClient) { }
+  
+  getListParticipant(): Observable<Participant[]>{ return this.httpClient.get<Participant[]>(`${this.baseURL}/list`); }
+
+  createParticipant(participant: Participant): Observable<Object>{ return this.httpClient.post(`${this.baseURL}/create`, participant); }
+
+  getByIdParticipant(id: number): Observable<Participant>{ return this.httpClient.get<Participant>(`${this.baseURL}/form/${id}`); }
+
+  updateParticipant(id: number, participant: Participant): Observable<Object>{ return this.httpClient.put(`${this.baseURL}/update/${id}`, participant); }
+
+  deleteParticipant(id: number): Observable<Object>{ return this.httpClient.delete(`${this.baseURL}/delete/${id}`); }
+  
+}

src/app/participant.ts

@@ -0,0 +1,61 @@
+
+export class ParticipantModePaiement
+{
+  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");
+}
+
+export class ParticipantStatus
+{
+  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");
+}
+
+export class Participant 
+{
+  dateCreation: string = "";
+  dateModification: string = "";
+  numeroParticipant: number = 0;
+  nom: string = "";
+  prenom: string = "";
+  pseudonyme: string = "";
+  groupe: string = "";
+  motDePasse: string = "";
+  passwordExpired: boolean = false;
+  dateExpiration: string = "";
+  delaiDeconnexion: number = 15;
+  adresse: string = "";
+  codePostal: string = "";
+  ville: string = "";
+  pays: string = "";
+  numeroTelephone: string = "";
+  email: string = "";
+  status: ParticipantStatus = ParticipantStatus.en_attente;
+  withMachine: boolean = true;
+  commentaire: string = "";
+  hereDay1: boolean = false;
+  hereDay2: boolean = false;
+  hereDay3: boolean = false;
+  sleepingOnSite: boolean = true;
+  useAmigabus: boolean = false;
+  modePaiement: ParticipantModePaiement = ParticipantModePaiement.autre;
+  dateInscription: string = "";
+  sommeRecue: string = "";
+  arrived: boolean = false;
+}

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

@@ -0,0 +1 @@
+<p>production-create works!</p>

src/app/production-create/production-create.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProductionCreateComponent } from './production-create.component';
+
+describe('ProductionCreateComponent', () => {
+  let component: ProductionCreateComponent;
+  let fixture: ComponentFixture<ProductionCreateComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ProductionCreateComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ProductionCreateComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-production-create',
+  imports: [],
+  templateUrl: './production-create.component.html',
+  styleUrl: './production-create.component.css'
+})
+export class ProductionCreateComponent {
+
+}

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

@@ -0,0 +1 @@
+<p>production-details works!</p>

src/app/production-details/production-details.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProductionDetailsComponent } from './production-details.component';
+
+describe('ProductionDetailsComponent', () => {
+  let component: ProductionDetailsComponent;
+  let fixture: ComponentFixture<ProductionDetailsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ProductionDetailsComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ProductionDetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-production-details',
+  imports: [],
+  templateUrl: './production-details.component.html',
+  styleUrl: './production-details.component.css'
+})
+export class ProductionDetailsComponent {
+
+}

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

@@ -0,0 +1 @@
+<p>production-list works!</p>

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProductionListComponent } from './production-list.component';
+
+describe('ProductionListComponent', () => {
+  let component: ProductionListComponent;
+  let fixture: ComponentFixture<ProductionListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ProductionListComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ProductionListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-production-list',
+  imports: [],
+  templateUrl: './production-list.component.html',
+  styleUrl: './production-list.component.css'
+})
+export class ProductionListComponent {
+
+}

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

@@ -0,0 +1 @@
+<p>production-update works!</p>

src/app/production-update/production-update.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProductionUpdateComponent } from './production-update.component';
+
+describe('ProductionUpdateComponent', () => {
+  let component: ProductionUpdateComponent;
+  let fixture: ComponentFixture<ProductionUpdateComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ProductionUpdateComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ProductionUpdateComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-production-update',
+  imports: [],
+  templateUrl: './production-update.component.html',
+  styleUrl: './production-update.component.css'
+})
+export class ProductionUpdateComponent {
+
+}

src/app/production.service.ts

@@ -0,0 +1,25 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http'
+import { Observable } from 'rxjs';
+import { Production } from './production';
+
+@Injectable({ providedIn: 'root' })
+
+export class ProductionService 
+{
+
+  private baseURL = "http://localhost:8080/demovote-api/v1/production";
+
+  constructor(private httpClient: HttpClient) { }
+  
+  getListProduction(): Observable<Production[]>{ return this.httpClient.get<Production[]>(`${this.baseURL}/list`); }
+
+  createProduction(production: Production): Observable<Object>{ return this.httpClient.post(`${this.baseURL}/create`, production); }
+
+  getByIdProduction(id: number): Observable<Production>{ return this.httpClient.get<Production>(`${this.baseURL}/form/${id}`); }
+
+  updateProduction(id: number, production: Production): Observable<Object>{ return this.httpClient.put(`${this.baseURL}/update/${id}`, production); }
+
+  deleteProduction(id: number): Observable<Object>{ return this.httpClient.delete(`${this.baseURL}/delete/${id}`); }
+  
+}

src/app/production.ts

@@ -0,0 +1,34 @@
+
+export class ProductionType
+{
+  constructor(public value:string) { }
+
+  toString() { return this.value; }
+
+  static executable = new ProductionType("Exécutable");
+  static graphe = new ProductionType("Graphe");
+  static musique = new ProductionType("Musique");
+  static video = new ProductionType("Vidéo");
+  static topic = new ProductionType("Topic");
+  static autre = new ProductionType("Autre");
+}
+
+export class Production 
+{
+  dateCreation: string = "";
+  dateModification: string = "";
+  numeroVariable: number = 0;
+  adresseIP: string = "";
+  type: ProductionType = ProductionType.executable;
+  titre: string = "";
+  auteurs: string = "";
+  groupes: string = "";
+  plateforme: string = "";
+  commentaire: string = "";
+  informationsPrivees: string = "";
+  nomArchive: string = "";
+  archive: string = "";
+  vignette: string = "";
+  numeroVersion: number = 1;
+}
+

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

@@ -2,7 +2,7 @@
 <form (ngSubmit)="onSubmit()">
 	<div class="card">
 		<div class="card-header">
-			<button (click)="goToListVariable()" class="btn btn-primary btn-sm">Retour</button>
+			<button (click)="goToListVariable()" class="btn btn-primary btn-sm"><i class="bi bi-x-lg"></i>&nbsp;Retour</button>
 		</div>
 		<div class="card-body">
 
@@ -36,7 +36,7 @@
 
 		</div>
 		<div class="card-footer">
-			<button type="button" class="btn btn-success btn-sm text-left" type="submit">Créer</button>
+			<button type="button" class="btn btn-success btn-sm text-left" type="submit"><i class="bi bi-plus-lg"></i>&nbsp;Créer</button>
 		</div>
 	</div>
 </form>

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

@@ -21,8 +21,10 @@ export class VariableCreateComponent implements OnInit
         complete: () => { }
       }); }
 
-  goToListVariable() {this.router.navigate(['/variable-list']); }
-  
   onSubmit(){ console.log(this.variable); this.saveVariable(); }
 
+  goToListVariable() {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; }
+
 }

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

@@ -1,7 +1,7 @@
 <br />
 <div class="card">
 	<div class="card-header">
-		<button type="button" (click)="goToListVariable()" class="btn btn-primary btn-sm">Retour</button>
+		<button type="button" (click)="goToListVariable()" class="btn btn-primary btn-sm"><i class="bi bi-x-lg"></i>&nbsp;Retour</button>
 	</div>
 	<div class="card-body">
 
@@ -50,6 +50,6 @@
 
 	</div>
 	<div class="card-footer">
-		<button type="button" (click)="updateVariable(variable.numeroVariable)" class="btn btn-primary btn-sm">Editer</button>
+		<button type="button" (click)="updateVariable(variable.numeroVariable)" class="btn btn-primary btn-sm"><i class="bi bi-pencil"></i>&nbsp;Editer</button>
 	</div>
 </div>

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

@@ -24,6 +24,8 @@ export class VariableDetailsComponent implements OnInit
  
   updateVariable(id: number) { this.router.navigate(['/variable-update', id]); }
   
-  goToListVariable(){ this.router.navigate(['/variable-list']); }
+  goToListVariable(){ 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; }
 
 }

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

@@ -3,8 +3,8 @@
 	<div class="card-header">
 		<div class="row">
 			<div class="form-group col-sm-4">
-				<button type="button" (click)="goToListVariable()" class="btn btn-primary btn-sm" style="margin-right: 5px;">Actualiser</button>
-				<button type="button" (click)="goToNewVariable()" class="btn btn-primary btn-sm" style="margin-right: 5px;">Créer</button>
+				<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>
 			</div>
 			<div class="form-group col-sm-8">
 				<select class="form-select form-select-sm">
@@ -30,7 +30,7 @@
 				@for (variable of variables; track variable.numeroVariable) {
 				<tr>
 					<td class="label-nobr">{{ variable.type }}&nbsp;&nbsp;</td>
-					<td class="label-nobr"><a (click)="formVariable(variable.numeroVariable)" class="link-primary pointeur-souris">{{ variable.code }}</a>&nbsp;&nbsp;</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>
 				</tr>
 				}

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

@@ -25,10 +25,10 @@ export class VariableListComponent implements OnInit
     });
   }
 
-  formVariable(id: number) { this.router.navigate(['/variable-details', id]); }
- 
-  goToListVariable(){ this.router.navigate(['/variable-list']); }
+  goToRefreshListVariable(){ this.retreiveDatas(); }
 
   goToNewVariable(){ this.router.navigate(['/variable-create']); }
 
+  formVariable(id: number) { this.router.navigate(['/variable-details', id]); }
+
 }

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

@@ -2,7 +2,7 @@
 <form id="formVariable">
 	<div class="card">
 		<div class="card-header">
-			<button type="button" (click)="goToListVariable()" class="btn btn-primary btn-sm">Retour</button>
+			<button type="button" (click)="goToListVariable()" class="btn btn-primary btn-sm"><i class="bi bi-x-lg"></i>&nbsp;Retour</button>
 		</div>
 		<div class="card-body">
 
@@ -51,13 +51,13 @@
 
 		</div>
 		<div class="card-footer">
-			<button type="button" class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#modalModifier">Modifier</button>
-			<button type="button" class="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#modalEffacer" style="float: right;">Effacer</button>
+			<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>
 		</div>
 	</div>
 </form>
 
-<div class="modal fade" #domModalModifier id="modalModifier" tabindex="-1" aria-labelledby="modalModifierTitre" aria-hidden="true">
+<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">
@@ -66,13 +66,13 @@
 			<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-primary btn-sm" (click)="updateConfirmed(variable.numeroVariable)" data-bs-dismiss="modal">Confirmer</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" #domModalEffacer id="modalEffacer" tabindex="-1" aria-labelledby="modalEffacerTitre" aria-hidden="true">
+<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">
@@ -81,7 +81,7 @@
 			<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(variable.numeroVariable)" data-bs-dismiss="modal">Confirmer</button>
+				<button type="button" class="btn btn-danger btn-sm" (click)="deleteConfirmed()" data-bs-dismiss="modal">Confirmer</button>
 			</div>
 		</div>
 	</div>

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

@@ -18,13 +18,15 @@ export class VariableUpdateComponent implements OnInit
   ngOnInit(): void 
   {
     this.numeroVariable = this.route.snapshot.params['numeroVariable'];
-    this.variableService.getByIdVariable(this.numeroVariable).subscribe(data => { this.variable = data; }, error => console.log(error));
+    this.variableService.getByIdVariable(this.numeroVariable).subscribe(data => { this.variable = data; });
   }
 
-  updateConfirmed(id: number) { this.variableService.updateVariable(this.numeroVariable, this.variable).subscribe(data => { this.goToListVariable(); }, error => console.log(error)); }
+  updateConfirmed() { this.variableService.updateVariable(this.numeroVariable, this.variable).subscribe(() => { this.goToListVariable(); }); }
 
-  deleteConfirmed(id: number) { this.variableService.deleteVariable(id).subscribe(data => { console.log(data); }, error => console.log(error)); this.goToListVariable(); }
+  deleteConfirmed() { this.variableService.deleteVariable(this.numeroVariable).subscribe(() => { this.goToListVariable(); }); }
 
-  goToListVariable(){ this.router.navigate(['/variable-list']); }
+  goToListVariable(){ 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; }
 
 }

src/app/variable/variable.component.html

@@ -1 +0,0 @@
-<br/>

src/app/variable/variable.component.ts

@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-variable',
-  standalone: false,
-  templateUrl: './variable.component.html',
-  styleUrl: './variable.component.css'
-})
-export class VariableComponent {
-
-}

src/index.html

@@ -1,8 +1,8 @@
 <!doctype html>
-<html lang="en">
+<html lang="fr">
 <head>
   <meta charset="utf-8">
-  <title>DemovoteFrontend</title>
+  <title>Demovote</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">