dev en cours

angular.json

@@ -5,7 +5,7 @@
   "projects": {
     "demovote-frontend": {
       "projectType": "application",
-      "schematics": {},
+      "schematics": { "@schematics/angular": { "component": { "spec": false }, "module": { "spec": false }, "service": { "spec": false } } },
       "root": "",
       "sourceRoot": "src",
       "prefix": "app",

src/app/app.component.css

@@ -7,12 +7,33 @@ html {
   height: -webkit-fill-available;
 }
 
-main {
-  height: 100vh;
-  height: -webkit-fill-available;
-  max-height: 100vh;
-  overflow-x: auto;
-  overflow-y: auto;
+.dropdown-toggle { outline: 0; }
+
+#main {
+  margin-left: 60px; 
+  padding: 0px 10px;
 }
 
-.dropdown-toggle { outline: 0; }
+#sidenav {
+  height: 100%;
+  width: 60px;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background-color: #fff;
+  overflow-x: hidden;
+  padding-top: 0px;
+  border-right: 1px solid #ddd;
+  border-bottom: none;
+}
+
+#sidenav ul li {
+	border-bottom: 1px solid #ddd;
+}
+
+@media screen and (max-width: 500px) {
+  #sidenav { width: 100%; height: auto; position: relative; border-right: none; border-bottom: 1px solid #ddd; }
+  #sidenav ul { display: inline-block; }
+  #sidenav ul li { float: left; border-bottom: none; }
+  #main { margin-left: 0; }
+}

src/app/app.component.html

@@ -1,31 +1,27 @@
-<main>
-<div class="row">
-  <div class="d-flex flex-column flex-shrink-0 bg-body-tertiary" style="width: 4.5rem;">
-		<ul class="nav nav-pills nav-flush flex-column mb-auto text-center">
-			<li class="nav-item"><a href="#" class="nav-link active py-3 border-bottom rounded-0" aria-current="page" title="Accueil" data-bs-toggle="tooltip" data-bs-placement="right"> <i class="bi pe-none fa-solid fa-home" aria-label="Accueil"></i></a></li>
-		  <li class="dropdown border-top"> 
-			  <a href="#" class="d-flex align-items-center justify-content-center p-3 border-bottom rounded-0 link-body-emphasis text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> <i class="bi pe-none fa-solid fa-user" aria-label="Compte"></i></a>
-			  <ul class="dropdown-menu text-small shadow">
-				  <li><a class="dropdown-item" href="#">Se connecter...</a></li>
-				  <li><a class="dropdown-item" href="#">Profil</a></li>
-			  	<li><hr class="dropdown-divider"></li>
-	 	  		<li><a class="dropdown-item" href="#">Se déconnecter</a></li>
-	  		</ul>
-  		</li>
-			<li><a href="#" class="nav-link py-3 border-bottom rounded-0" title="Planning" data-bs-toggle="tooltip" data-bs-placement="right"> <i class="bi pe-none fa-solid fa-clock" aria-label="Planning"></i></a></li>
-			<li><a href="#" class="nav-link py-3 border-bottom rounded-0" title="Caméras" data-bs-toggle="tooltip" data-bs-placement="right"> <i class="bi pe-none fa-solid fa-eye" aria-label="Caméras"></i></a></li>
-			<li><a href="#" class="nav-link py-3 border-bottom rounded-0" title="Messagerie" data-bs-toggle="tooltip" data-bs-placement="right"> <i class="bi pe-none fa-solid fa-comments" aria-label="Messagerie"></i></a></li>
-			<li><a href="/participant-list" class="nav-link py-3 border-bottom rounded-0" title="Participants" data-bs-toggle="tooltip" data-bs-placement="right"> <i class="bi pe-none fa-solid fa-users" aria-label="Participants"></i></a></li>
-			<li><a href="/variable-list" class="nav-link py-3 border-bottom rounded-0" title="Paramétrages" data-bs-toggle="tooltip" data-bs-placement="right"> <i class="bi pe-none fa-solid fa-sliders-h" aria-label="Paramétrages"></i></a></li>
-			<li><a href="/categorie-list" class="nav-link py-3 border-bottom rounded-0" title="Catégories" data-bs-toggle="tooltip" data-bs-placement="right"> <i class="bi pe-none fa-solid fa-layer-group" aria-label="Catégories"></i></a></li>
-			<li><a href="/production-list" class="nav-link py-3 border-bottom rounded-0" title="Productions" data-bs-toggle="tooltip" data-bs-placement="right"> <i class="bi pe-none fa-solid fa-save" aria-label="Productions"></i></a></li>
-			<li><a href="#" class="nav-link py-3 border-bottom rounded-0" title="Présentations" data-bs-toggle="tooltip" data-bs-placement="right"> <i class="bi pe-none fa-solid fa-eye" aria-label="Présentations"></i></a></li>
-			<li><a href="#" class="nav-link py-3 border-bottom rounded-0" title="Voter" data-bs-toggle="tooltip" data-bs-placement="right"> <i class="bi pe-none fa-solid fa-vote-yea" aria-label="Voter"></i></a></li>
-			<li><a href="#" class="nav-link py-3 border-bottom rounded-0" title="Résultats" data-bs-toggle="tooltip" data-bs-placement="right"> <i class="bi pe-none fa-solid fa-trophy" aria-label="Résultats"></i></a></li>
-		</ul>
-	</div>
-	<div class="col">
-		<router-outlet></router-outlet>
-	</div>
+<div class="d-flex flex-column flex-shrink-0 bg-body-tertiary" id="sidenav">
+  <ul class="nav nav-pills nav-flush flex-column text-center">
+	 	<li><a href="#" class="nav-link rounded-0" #menu_home title="Accueil" data-bs-toggle="tooltip" data-bs-placement="right"> <i class="fa-solid fa-home" aria-label="Accueil"></i></a></li>
+
+		<li><a href="/login" class="nav-link rounded-0" #menu_login title="Login" data-bs-toggle="tooltip" data-bs-placement="right"> <i class="fa-solid fa-right-to-bracket" aria-label="Login"></i></a></li>
+		<li><a href="#" class="nav-link rounded-0" #menu_account title="Compte" data-bs-toggle="tooltip" data-bs-placement="right"> <i class="fa-solid fa-user" aria-label="Compte"></i></a></li>
+		<li><a href="/logout" class="nav-link rounded-0" #menu_logout title="Logout" data-bs-toggle="tooltip" data-bs-placement="right"> <i class="fa-solid fa-right-from-bracket" aria-label="Logout"></i></a></li>
+
+		<li><a href="#" class="nav-link rounded-0" #menu_agenda title="Planning" data-bs-toggle="tooltip" data-bs-placement="right"> <i class="fa-solid fa-clock" aria-label="Planning"></i></a></li>
+		<li><a href="#" class="nav-link rounded-0" #menu_webcams title="Caméras" data-bs-toggle="tooltip" data-bs-placement="right"> <i class="fa-solid fa-eye" aria-label="Caméras"></i></a></li>
+		<li><a href="#" class="nav-link rounded-0" #menu_chat title="Messagerie" data-bs-toggle="tooltip" data-bs-placement="right"> <i class="fa-solid fa-comments" aria-label="Messagerie"></i></a></li>
+
+		<li><a href="/participant-list" class="nav-link rounded-0" #menu_users title="Participants" data-bs-toggle="tooltip" data-bs-placement="right"> <i class="fa-solid fa-users" aria-label="Participants"></i></a></li>
+
+		<li><a href="/categorie-list" class="nav-link rounded-0" #menu_compos title="Catégories" data-bs-toggle="tooltip" data-bs-placement="right"> <i class="fa-solid fa-layer-group" aria-label="Catégories"></i></a></li>
+		<li><a href="/production-list" class="nav-link rounded-0" #menu_prods title="Productions" data-bs-toggle="tooltip" data-bs-placement="right"> <i class="fa-solid fa-save" aria-label="Productions"></i></a></li>
+
+		<li><a href="#" class="nav-link rounded-0" #menu_shows title="Présentations" data-bs-toggle="tooltip" data-bs-placement="right"> <i class="fa-solid fa-display" aria-label="Présentations"></i></a></li>
+		<li><a href="#" class="nav-link rounded-0" #menu_votes title="Voter" data-bs-toggle="tooltip" data-bs-placement="right"> <i class="fa-solid fa-vote-yea" aria-label="Voter"></i></a></li>
+		<li><a href="#" class="nav-link rounded-0" #menu_results title="Résultats" data-bs-toggle="tooltip" data-bs-placement="right"> <i class="fa-solid fa-trophy" aria-label="Résultats"></i></a></li>
+
+		<li><a href="/variable-list" class="nav-link rounded-0" #menu_params title="Paramétrages" data-bs-toggle="tooltip" data-bs-placement="right"> <i class="fa-solid fa-sliders-h" aria-label="Paramétrages"></i></a></li>
+	</ul>
+</div>
+<div id="main">
+	<router-outlet></router-outlet>
 </div>
-</main>

src/app/app.component.spec.ts

@@ -1,17 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { AppComponent } from './app.component';
-
-describe('AppComponent', () => {
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [AppComponent],
-    }).compileComponents();
-  });
-
-  it('should create the app', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app).toBeTruthy();
-  });
-
-});

src/app/app.component.ts

@@ -1,18 +1,63 @@
-import { Component } from '@angular/core';
+import { Component, OnInit, ViewChild, ElementRef, Renderer2 } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import { FormsModule} from '@angular/forms';
+import { Router } from '@angular/router';  
+import { AuthService } from './services/auth.service';  
 
 declare var $: any;
 
 @Component({ selector: 'app-root', imports: [RouterOutlet, FormsModule], templateUrl: './app.component.html', styleUrl: './app.component.css' })
 
-export class AppComponent 
+export class AppComponent implements OnInit
 {
   title = 'demovote';
 
+  @ViewChild('menu_home', {static: false}) menuItemHome!: ElementRef;
+  @ViewChild('menu_login', {static: false}) menuItemLogin!: ElementRef;
+  @ViewChild('menu_account', {static: false}) menuItemAccount!: ElementRef;
+  @ViewChild('menu_logout', {static: false}) menuItemLogout!: ElementRef;
+  @ViewChild('menu_agenda', {static: false}) menuItemAgenda!: ElementRef;
+  @ViewChild('menu_webcams', {static: false}) menuItemWebcams!: ElementRef;
+  @ViewChild('menu_chat', {static: false}) menuItemChat!: ElementRef;
+  @ViewChild('menu_users', {static: false}) menuItemUsers!: ElementRef;
+  @ViewChild('menu_compos', {static: false}) menuItemCompos!: ElementRef;
+  @ViewChild('menu_prods', {static: false}) menuItemProds!: ElementRef;
+  @ViewChild('menu_shows', {static: false}) menuItemShows!: ElementRef;
+  @ViewChild('menu_votes', {static: false}) menuItemVotes!: ElementRef;
+  @ViewChild('menu_results', {static: false}) menuItemResults!: ElementRef;
+  @ViewChild('menu_params', {static: false}) menuItemParams!: ElementRef;
+
+  tok!: string | null;  
+
+  constructor(private router: Router, private authService: AuthService, private renderer: Renderer2) { }  
+  
   ngOnInit() 
   {
     $(document).ready(function() { $('[data-bs-toggle="tooltip"]').tooltip();});
-  }
 
+    this.tok = localStorage.getItem('token');  
+	}
+
+  logout() 
+  {  
+    this.authService.deconnexion();  
+    this.router.navigate(['/']);  
+  } 
+  
+  menuActivateHome(): void { this.renderer.addClass(this.menuItemHome.nativeElement, "active"); }
+  menuActivateLogin(): void { this.renderer.addClass(this.menuItemLogin.nativeElement, "active"); } 
+  menuActivateAccount(): void { this.renderer.addClass(this.menuItemAccount.nativeElement, "active"); }
+  menuActivateLogout(): void { this.renderer.addClass(this.menuItemLogout.nativeElement, "active"); }
+  menuActivateAgenda(): void { this.renderer.addClass(this.menuItemAgenda.nativeElement, "active"); }
+  menuActivateWebcams(): void { this.renderer.addClass(this.menuItemWebcams.nativeElement, "active"); }
+  menuActivateChat(): void { this.renderer.addClass(this.menuItemChat.nativeElement, "active"); }
+  menuActivateUsers(): void { this.renderer.addClass(this.menuItemUsers.nativeElement, "active"); }
+  menuActivateCompos(): void { this.renderer.addClass(this.menuItemCompos.nativeElement, "active"); }
+  menuActivateProds(): void { this.renderer.addClass(this.menuItemProds.nativeElement, "active"); }
+  menuActivateShows(): void { this.renderer.addClass(this.menuItemShows.nativeElement, "active"); }
+  menuActivateVotes(): void { this.renderer.addClass(this.menuItemVotes.nativeElement, "active"); }
+  menuActivateResults(): void { this.renderer.addClass(this.menuItemResults.nativeElement, "active"); }
+  menuActivateParams(): void { this.renderer.addClass(this.menuItemParams.nativeElement, "active"); }
+  
 }
+

src/app/app.config.ts

@@ -3,6 +3,7 @@ import { provideRouter } from '@angular/router';
 import { routes } from './app.routes';
 import { provideHttpClient } from '@angular/common/http';
 
-export const appConfig: ApplicationConfig = {
+export const appConfig: ApplicationConfig = 
+{
   providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes), provideHttpClient()]
 };

src/app/app.routes.ts

@@ -1,25 +1,28 @@
 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 { 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';
-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';
-import { ProductionListComponent } from './production-list/production-list.component';
-import { ProductionCreateComponent } from './production-create/production-create.component';
-import { ProductionDetailsComponent } from './production-details/production-details.component';
-import { ProductionUpdateComponent } from './production-update/production-update.component';
-import { ProductionUploadComponent } from './production-upload/production-upload.component';
+import { LoginComponent } from './composants/login/login.component';    
+import { AuthGuard } from './guards/auth.guard';    
+import { VariableListComponent } from './composants/variable-list/variable-list.component';
+import { VariableCreateComponent } from './composants/variable-create/variable-create.component';
+import { VariableDetailsComponent } from './composants/variable-details/variable-details.component';
+import { VariableUpdateComponent } from './composants/variable-update/variable-update.component';
+import { CategorieListComponent } from './composants/categorie-list/categorie-list.component';
+import { CategorieCreateComponent } from './composants/categorie-create/categorie-create.component';
+import { CategorieDetailsComponent } from './composants/categorie-details/categorie-details.component';
+import { CategorieUpdateComponent } from './composants/categorie-update/categorie-update.component';
+import { ParticipantListComponent } from './composants/participant-list/participant-list.component';
+import { ParticipantCreateComponent } from './composants/participant-create/participant-create.component';
+import { ParticipantDetailsComponent } from './composants/participant-details/participant-details.component';
+import { ParticipantUpdateComponent } from './composants/participant-update/participant-update.component';
+import { ProductionListComponent } from './composants/production-list/production-list.component';
+import { ProductionCreateComponent } from './composants/production-create/production-create.component';
+import { ProductionDetailsComponent } from './composants/production-details/production-details.component';
+import { ProductionUpdateComponent } from './composants/production-update/production-update.component';
+import { ProductionUploadComponent } from './composants/production-upload/production-upload.component';
 
 export const routes: Routes = [  
   {path: '', redirectTo: 'production-list', pathMatch: 'full'},
+  {path: 'login', component: LoginComponent},
   {path: 'variable-list', component: VariableListComponent},
   {path: 'variable-create', component: VariableCreateComponent},
   {path: 'variable-details/:numeroVariable', component: VariableDetailsComponent},
@@ -41,7 +44,8 @@ export const routes: Routes = [
 
 @NgModule({
   imports: [RouterModule.forRoot(routes, { onSameUrlNavigation: 'reload' })],                                                                                                                                                                                                                                                                                                          
-  exports: [RouterModule]
+  exports: [RouterModule],
+  providers: [AuthGuard]
 })
 
 export class AppRoutingModule { }

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

@@ -1,23 +0,0 @@
-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-details/categorie-details.component.spec.ts

@@ -1,23 +0,0 @@
-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-list/categorie-list.component.spec.ts

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

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

@@ -1,23 +0,0 @@
-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-create/categorie-create.component.html → src/app/composants/categorie-create/categorie-create.component.html

@@ -1,5 +1,5 @@
 <form  #formRef="ngForm" (ngSubmit)="addCategorie()" class="needs-validation">
-	<div class="card shadow">
+	<div class="card shadow center" style="min-width:40rem;">
 	<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="fa-solid fa-xmark"></i>&nbsp;Retour</button>
@@ -7,22 +7,22 @@
 		<div class="card-body">
 
 			<div class="form-group row">
-				<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Libellé&nbsp;<sup><span class="text-danger">*</span></sup></label>
-				<div class="col-sm-10">
+				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Libellé&nbsp;<sup><span class="text-danger">*</span></sup></label>
+				<div class="col-sm-8">
 					<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">
+				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Numéro d'ordre</label>
+				<div class="col-sm-8">
 					<input type="number" min="0" class="form-control form-control-sm field-separate" id="numeroOrdre" name="numeroOrdre" [(ngModel)]="categorie.numeroOrdre">
 				</div>
 			</div>
 
 			<div class="form-group row">
-				<div class="col-sm-2"></div>
-				<div class="col-sm-10">
+				<div class="col-sm-4"></div>
+				<div class="col-sm-8">
 					<div class="form-check form-switch">
 						<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>
@@ -31,8 +31,8 @@
 			</div>
 
 			<div class="form-group row">
-				<div class="col-sm-2"></div>
-				<div class="col-sm-10">
+				<div class="col-sm-4"></div>
+				<div class="col-sm-8">
 					<div class="form-check form-switch">
 						<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>
@@ -41,8 +41,8 @@
 			</div>
 
 			<div class="form-group row">
-				<div class="col-sm-2"></div>
-				<div class="col-sm-10">
+				<div class="col-sm-4"></div>
+				<div class="col-sm-8">
 					<div class="form-check form-switch">
 						<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>
@@ -51,8 +51,8 @@
 			</div>
 
 			<div class="form-group row">
-				<div class="col-sm-2"></div>
-				<div class="col-sm-10">
+				<div class="col-sm-4"></div>
+				<div class="col-sm-8">
 					<div class="form-check form-switch">
 						<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>
@@ -61,8 +61,8 @@
 			</div>
 
 			<div class="form-group row">
-				<div class="col-sm-2"></div>
-				<div class="col-sm-10">
+				<div class="col-sm-4"></div>
+				<div class="col-sm-8">
 					<div class="form-check form-switch">
 						<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>

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

@@ -1,21 +1,24 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
-import { Categorie } from '../categorie';
-import { CategorieService } from '../categorie.service';
+import { Component, OnInit, AfterViewInit, ViewChild } from '@angular/core';
+import { AppComponent } from '../../app.component';
+import { Categorie } from '../../interfaces/categorie';
+import { CategorieService } from '../../services/categorie.service';
 import { Router } from '@angular/router';
 import { FormsModule, NgForm } from '@angular/forms'; 
 
 @Component({ selector: 'app-categorie-create', imports: [FormsModule], templateUrl: './categorie-create.component.html', styleUrl: './categorie-create.component.css'})
 
-export class CategorieCreateComponent implements OnInit
+export class CategorieCreateComponent implements OnInit, AfterViewInit
 {
   @ViewChild('formRef') categorieForm!: NgForm;
 
   categorie: Categorie = new Categorie();
   
-  constructor(private categorieService: CategorieService, private router: Router) { }
+  constructor(private categorieService: CategorieService, private router: Router, private application: AppComponent) { }
 
   ngOnInit(): void { }
 
+  ngAfterViewInit() { this.application.menuActivateCompos(); }
+
   private saveCategorie() { this.categorieService.createCategorie(this.categorie).subscribe({ next: () => { this.goToListCategorie(); }, error: (err: any) => { console.log(err); }, complete: () => { } }); }
 
   addCategorie() { if (this.categorieForm.valid) { this.saveCategorie(); } }

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

@@ -1,4 +1,4 @@
-<div class="card shadow">
+<div class="card shadow center" style="min-width:40rem;">
 	<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="fa-solid fa-xmark"></i>&nbsp;Retour</button>
@@ -7,36 +7,36 @@
 
 
 		<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">
+			<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Créé le</label>
+			<div class="col-sm-8">
 				<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">
+			<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Modifié le</label>
+			<div class="col-sm-8">
 				<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">
+			<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Libellé</label>
+			<div class="col-sm-8">
 				<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">
+			<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Numéro d'ordre</label>
+			<div class="col-sm-8">
 				<input type="text" class="form-control form-control-sm field-separate" id="numeroOrdre" name="numeroOrdre" [(ngModel)]="categorie.numeroOrdre" disabled>
 			</div>
 		</div>
 
 		<div class="form-group row">
-			<div class="col-sm-2"></div>
-			<div class="col-sm-10">
+			<div class="col-sm-4"></div>
+			<div class="col-sm-8">
 				<div class="form-check form-switch">
 					<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>
@@ -45,8 +45,8 @@
 		</div>
 
 		<div class="form-group row">
-			<div class="col-sm-2"></div>
-			<div class="col-sm-10">
+			<div class="col-sm-4"></div>
+			<div class="col-sm-8">
 				<div class="form-check form-switch">
 					<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>
@@ -55,8 +55,8 @@
 		</div>
 
 		<div class="form-group row">
-			<div class="col-sm-2"></div>
-			<div class="col-sm-10">
+			<div class="col-sm-4"></div>
+			<div class="col-sm-8">
 				<div class="form-check form-switch">
 					<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>
@@ -65,8 +65,8 @@
 		</div>
 
 		<div class="form-group row">
-			<div class="col-sm-2"></div>
-			<div class="col-sm-10">
+			<div class="col-sm-4"></div>
+			<div class="col-sm-8">
 				<div class="form-check form-switch">
 					<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>
@@ -75,8 +75,8 @@
 		</div>
 
 		<div class="form-group row">
-			<div class="col-sm-2"></div>
-			<div class="col-sm-10">
+			<div class="col-sm-4"></div>
+			<div class="col-sm-8">
 				<div class="form-check form-switch">
 					<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>

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

@@ -1,19 +1,20 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, AfterViewInit } from '@angular/core';
+import { AppComponent } from '../../app.component';
 import { ActivatedRoute, Router } from '@angular/router';
-import { Categorie } from '../categorie';
-import { CategorieService } from '../categorie.service';
+import { Categorie } from '../../interfaces/categorie';
+import { CategorieService } from '../../services/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 
+export class CategorieDetailsComponent implements OnInit, AfterViewInit 
 {
 
   numeroCategorie: number = 0;
 
   categorie: Categorie = new Categorie();
   
-  constructor(private categorieService: CategorieService, private route: ActivatedRoute, private router: Router) { }
+  constructor(private categorieService: CategorieService, private route: ActivatedRoute, private router: Router, private application: AppComponent) { }
 
   ngOnInit(): void 
   {
@@ -21,6 +22,8 @@ export class CategorieDetailsComponent implements OnInit
     this.categorie = new Categorie();
     this.categorieService.getByIdCategorie(this.numeroCategorie).subscribe( data => { this.categorie = data; });
   }
+
+  ngAfterViewInit() { this.application.menuActivateCompos(); }
  
   updateCategorie(id: number) { this.router.navigate(['/categorie-update', id]); }
   

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

@@ -1,19 +1,22 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, AfterViewInit } from '@angular/core';
+import { AppComponent } from '../../app.component';
 import { Router } from '@angular/router';
-import { Categorie } from '../categorie';
-import { CategorieService } from '../categorie.service';
+import { Categorie } from '../../interfaces/categorie';
+import { CategorieService } from '../../services/categorie.service';
 
 @Component({ selector: 'app-categorie-list', imports: [], templateUrl: './categorie-list.component.html', styleUrl: './categorie-list.component.css'})
 
-export class CategorieListComponent implements OnInit 
+export class CategorieListComponent implements OnInit, AfterViewInit 
 {
 
   categories: Categorie[] = [];
 
-  constructor(private categorieService: CategorieService, private router: Router) { }
+  constructor(private categorieService: CategorieService, private router: Router, private application: AppComponent) { }
 
   ngOnInit(): void { this.retreiveDatas(); }
 
+  ngAfterViewInit() { this.application.menuActivateCompos(); }
+
   private retreiveDatas() { this.categorieService.getListCategorie().subscribe(data => { this.categories = data; }); }
 
   goToRefreshListCategorie(){ this.router.navigate(['/categorie-list'], { queryParams: { 'refresh': this.getRandomInteger(1, 100000) } }); }

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

@@ -1,5 +1,5 @@
 <form id="formVariable" #formRef="ngForm" class="needs-validation">
-<div class="card shadow">
+<div class="card shadow center" style="min-width:40rem;">
 	<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="fa-solid fa-xmark"></i>&nbsp;Retour</button>
@@ -7,36 +7,36 @@
 	<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">
+			<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Créé le</label>
+			<div class="col-sm-8">
 				<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">
+			<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Modifié le</label>
+			<div class="col-sm-8">
 				<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é&nbsp;<sup><span class="text-danger">*</span></sup></label>
-			<div class="col-sm-10">
+ 	  	<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Libellé&nbsp;<sup><span class="text-danger">*</span></sup></label>
+			<div class="col-sm-8">
 				<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">
 			</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">
+			<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Numéro d'ordre</label>
+			<div class="col-sm-8">
 				<input type="number" min="0" class="form-control form-control-sm field-separate" id="numeroOrdre" name="numeroOrdre" [(ngModel)]="categorie.numeroOrdre">
 			</div>
 		</div>
 
 		<div class="form-group row">
-			<div class="col-sm-2"></div>
-			<div class="col-sm-10">
+			<div class="col-sm-4"></div>
+			<div class="col-sm-8">
 				<div class="form-check form-switch">
 					<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>
@@ -45,8 +45,8 @@
 		</div>
 
 		<div class="form-group row">
-			<div class="col-sm-2"></div>
-			<div class="col-sm-10">
+			<div class="col-sm-4"></div>
+			<div class="col-sm-8">
 				<div class="form-check form-switch">
 					<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>
@@ -55,8 +55,8 @@
 		</div>
 
 		<div class="form-group row">
-			<div class="col-sm-2"></div>
-			<div class="col-sm-10">
+			<div class="col-sm-4"></div>
+			<div class="col-sm-8">
 				<div class="form-check form-switch">
 					<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>
@@ -65,8 +65,8 @@
 		</div>
 
 		<div class="form-group row">
-			<div class="col-sm-2"></div>
-			<div class="col-sm-10">
+			<div class="col-sm-4"></div>
+			<div class="col-sm-8">
 				<div class="form-check form-switch">
 					<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>
@@ -75,8 +75,8 @@
 		</div>
 
 		<div class="form-group row">
-			<div class="col-sm-2"></div>
-			<div class="col-sm-10">
+			<div class="col-sm-4"></div>
+			<div class="col-sm-8">
 				<div class="form-check form-switch">
 					<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>

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

@@ -1,12 +1,13 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, AfterViewInit, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { Categorie } from '../categorie';
-import { CategorieService } from '../categorie.service';
+import { AppComponent } from '../../app.component';
+import { Categorie } from '../../interfaces/categorie';
+import { CategorieService } from '../../services/categorie.service';
 import { FormsModule, NgForm } 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
+export class CategorieUpdateComponent implements OnInit, AfterViewInit
 {
   @ViewChild('formRef') categorieForm!: NgForm;
 
@@ -14,7 +15,7 @@ export class CategorieUpdateComponent implements OnInit
   
   categorie: Categorie = new Categorie();
   
-  constructor(private categorieService: CategorieService, private route: ActivatedRoute, private router: Router) { }
+  constructor(private categorieService: CategorieService, private route: ActivatedRoute, private router: Router, private application: AppComponent) { }
 
   ngOnInit(): void 
   {
@@ -22,6 +23,8 @@ export class CategorieUpdateComponent implements OnInit
     this.categorieService.getByIdCategorie(this.numeroCategorie).subscribe(data => { this.categorie = data; });
   }
 
+  ngAfterViewInit() { this.application.menuActivateCompos(); }
+
   updateConfirmed() { if (this.categorieForm.valid) { this.categorieService.updateCategorie(this.numeroCategorie, this.categorie).subscribe(() => { this.goToListCategorie(); }); } }
 
   deleteConfirmed() { this.categorieService.deleteCategorie(this.numeroCategorie).subscribe(() => { this.goToListCategorie(); }); }

src/app/composants/login/login.component.html

@@ -0,0 +1,26 @@
+
+<form #formRef="ngForm" (ngSubmit)="connexion()" class="needs-validation">
+	<div class="card shadow center" style="min-width: 30rem;">
+		<div class="card-header">S'identifier</div>
+		<div class="card-body">
+
+			<div class="form-group row">
+				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Pseudonyme&nbsp;<sup><span class="text-danger">*</span></sup></label>
+				<div class="col-sm-8">
+					<input type="text" class="form-control form-control-sm field-separate" id="userid" name="userid" [(ngModel)]="identifiants.userid" #userRef="ngModel" required [class.is-invalid]="userRef.invalid && userRef.touched">
+				</div>
+			</div>
+
+			<div class="form-group row">
+				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Mot de passe&nbsp;<sup><span class="text-danger">*</span></sup></label>
+				<div class="col-sm-8">
+					<input type="password" class="form-control form-control-sm field-separate" id="userpwd" name="userpwd" [(ngModel)]="identifiants.userpwd" #passRef="ngModel" required [class.is-invalid]="passRef.invalid && passRef.touched">
+				</div>
+			</div>
+
+		</div>
+		<div class="card-footer" #menu_login>
+			<button type="button" class="btn btn-success btn-sm text-left" type="submit" [disabled]="formRef.invalid"><i class="fa-solid fa-right-to-bracket"></i>&nbsp;Login</button>
+		</div>
+	</div>
+</form>

src/app/composants/login/login.component.ts

@@ -0,0 +1,38 @@
+import { Component, OnInit, AfterViewInit, ViewChild } from '@angular/core';
+import { Router } from '@angular/router';  
+import { AppComponent } from '../../app.component';
+import { Login } from '../../interfaces/login';  
+import { AuthService } from '../../services/auth.service' 
+import { FormsModule, NgForm, NgModel } from '@angular/forms'; 
+
+@Component({ selector: 'app-login', imports: [FormsModule], templateUrl: './login.component.html', styleUrl: './login.component.css' })
+
+export class LoginComponent implements OnInit, AfterViewInit
+{
+
+  @ViewChild('formRef') loginForm!: NgForm;
+  @ViewChild('userRef') userField!: NgModel;
+  @ViewChild('passRef') passField!: NgModel;
+
+  identifiants: Login = { userid: "", userpwd: "" }
+ 
+  constructor(private router : Router, private authService : AuthService, private application: AppComponent) { }
+  
+  ngOnInit() { this.authService.deconnexion(); } 
+  
+  ngAfterViewInit() { this.application.menuActivateLogin(); }
+ 
+  connexion()
+  {  
+    if (this.loginForm.valid) 
+    {
+      this.authService.connexion(this.identifiants);  
+      
+      localStorage.setItem('isConnecte', "true");  
+      localStorage.setItem('token', "from_API_javaspring");  
+      
+      this.router.navigate(['/']);  
+    }
+  } 
+  
+}

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

@@ -1,98 +1,98 @@
 <form #formRef="ngForm" (ngSubmit)="addParticipant()" class="needs-validation">
-	<div class="card shadow">
+	<div class="card shadow center">
 		<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="card-body scrollable">
 
 			<div class="form-group row">
-				<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Nom&nbsp;<sup><span class="text-danger">*</span></sup></label>
-				<div class="col-sm-10">
+				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Nom&nbsp;<sup><span class="text-danger">*</span></sup></label>
+				<div class="col-sm-8">
 					<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">
+				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Prénom</label>
+				<div class="col-sm-8">
 					<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&nbsp;<sup><span class="text-danger">*</span></sup></label>
-				<div class="col-sm-10">
+				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Pseudonyme&nbsp;<sup><span class="text-danger">*</span></sup></label>
+				<div class="col-sm-8">
 					<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">
+				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Groupe</label>
+				<div class="col-sm-8">
 					<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">
+				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Mot de passe</label>
+				<div class="col-sm-8">
 					<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">
+				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Délai avant déconnexion</label>
+				<div class="col-sm-8">
 					<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">
+				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Adresse</label>
+				<div class="col-sm-8">
 					<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">
+				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Code postal</label>
+				<div class="col-sm-8">
 					<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">
+				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Ville</label>
+				<div class="col-sm-8">
 					<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">
+				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Pays</label>
+				<div class="col-sm-8">
 					<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">
+				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Numéro de téléphone</label>
+				<div class="col-sm-8">
 					<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">
+				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Adresse email</label>
+				<div class="col-sm-8">
 					<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">
+				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Status</label>
+				<div class="col-sm-8">
 					<div class="form-group field-separate">
 						<select class="form-select form-select-sm" id="status" name="status" [(ngModel)]="participant.status" required #statusRef="ngModel" [class.is-invalid]="statusRef.invalid && statusRef.touched">
 							@for (ps of PS; track ps.key) { <option [value]="ps.key">{{ ps.value }}</option> }
@@ -102,8 +102,8 @@
 			</div>
 
 			<div class="form-group row">
-				<div class="col-sm-2"></div>
-				<div class="col-sm-10">
+				<div class="col-sm-4"></div>
+				<div class="col-sm-8">
 					<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>
@@ -112,8 +112,8 @@
 			</div>
 
 			<div class="form-group row">
-				<div class="col-sm-2"></div>
-				<div class="col-sm-10">
+				<div class="col-sm-4"></div>
+				<div class="col-sm-8">
 					<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>
@@ -122,8 +122,8 @@
 			</div>
 
 			<div class="form-group row">
-				<div class="col-sm-2"></div>
-				<div class="col-sm-10">
+				<div class="col-sm-4"></div>
+				<div class="col-sm-8">
 					<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>
@@ -132,8 +132,8 @@
 			</div>
 
 			<div class="form-group row">
-				<div class="col-sm-2"></div>
-				<div class="col-sm-10">
+				<div class="col-sm-4"></div>
+				<div class="col-sm-8">
 					<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>
@@ -142,8 +142,8 @@
 			</div>
 
 			<div class="form-group row">
-				<div class="col-sm-2"></div>
-				<div class="col-sm-10">
+				<div class="col-sm-4"></div>
+				<div class="col-sm-8">
 					<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>
@@ -152,8 +152,8 @@
 			</div>
 
 			<!-- <div class="form-group row">
-				<div class="col-sm-2"></div>
-				<div class="col-sm-10">
+				<div class="col-sm-4"></div>
+				<div class="col-sm-8">
 					<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>
@@ -162,15 +162,15 @@
 			</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">
+				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Commentaire</label>
+				<div class="col-sm-8">
 					<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">
+				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Mode de paiement</label>
+				<div class="col-sm-8">
 					<div class="form-group field-separate">
 						<select class="form-select form-select-sm" id="modePaiement" name="modePaiement" [(ngModel)]="participant.modePaiement" required #modePaiementRef="ngModel">
 							@for (pmp of PMP; track pmp.key) { <option [value]="pmp.key">{{ pmp.value }}</option> }
@@ -180,15 +180,15 @@
 			</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">
+				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Somme reçue</label>
+				<div class="col-sm-8">
 					<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="col-sm-4"></div>
+				<div class="col-sm-8">
 					<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>

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

@@ -1,12 +1,13 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
-import { Participant, ParticipantEnum, ParticipantStatusList, ParticipantModePaiementList } from '../participant';
-import { ParticipantService } from '../participant.service';
+import { Component, OnInit, AfterViewInit, ViewChild } from '@angular/core';
+import { Participant, ParticipantEnum, ParticipantStatusList, ParticipantModePaiementList } from '../../interfaces/participant';
+import { AppComponent } from '../../app.component';
+import { ParticipantService } from '../../services/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
+export class ParticipantCreateComponent implements OnInit, AfterViewInit
 {
   
   PS: ParticipantEnum[] = ParticipantStatusList;
@@ -16,9 +17,11 @@ export class ParticipantCreateComponent implements OnInit
   
   participant: Participant = new Participant();
   
-  constructor(private participantService: ParticipantService, private router: Router) { }
+  constructor(private participantService: ParticipantService, private router: Router, private application: AppComponent) { }
 
   ngOnInit(): void { }
+  
+  ngAfterViewInit() { this.application.menuActivateUsers(); }
 
   private saveParticipant() { this.participantService.createParticipant(this.participant).subscribe({ next: () => { this.goToListParticipant(); }, error: (err: any) => { console.log(err); }, complete: () => { } }); }
 

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

@@ -1,111 +1,111 @@
-<div class="card shadow">
+<div class="card shadow center" style="min-width:40rem;">
 	<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="card-body scrollable">
 
 		<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">
+			<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Créé le</label>
+			<div class="col-sm-8">
 				<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">
+			<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Modifié le</label>
+			<div class="col-sm-8">
 				<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">
+			<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Nom</label>
+			<div class="col-sm-8">
 				<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">
+			<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Prénom</label>
+			<div class="col-sm-8">
 				<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">
+			<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Pseudonyme</label>
+			<div class="col-sm-8">
 				<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">
+			<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Groupe</label>
+			<div class="col-sm-8">
 				<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">
+			<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Mot de passe</label>
+			<div class="col-sm-8">
 				<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">
+			<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Délai avant déconnexion</label>
+			<div class="col-sm-8">
 				<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">
+			<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Adresse</label>
+			<div class="col-sm-8">
 				<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">
+			<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Code postal</label>
+			<div class="col-sm-8">
 				<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">
+			<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Ville</label>
+			<div class="col-sm-8">
 				<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">
+			<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Pays</label>
+			<div class="col-sm-8">
 				<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">
+			<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Numéro de téléphone</label>
+			<div class="col-sm-8">
 				<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">
+			<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Adresse email</label>
+			<div class="col-sm-8">
 				<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">
+			<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Status</label>
+			<div class="col-sm-8">
 				<div class="form-group field-separate">
 					<select class="form-select form-select-sm" id="status" name="status" [(ngModel)]="participant.status" disabled>
 							@for (ps of PS; track ps.key) { <option [value]="ps.key">{{ ps.value }}</option> }
@@ -115,15 +115,15 @@
 		</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">
+			<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Inscrit le</label>
+			<div class="col-sm-8">
 				<input type="text" class="form-control form-control-sm field-separate" id="dateInscription" name="dateInscription" [(ngModel)]="participant.dateInscription" disabled>
 			</div>
 		</div>
 
 		<div class="form-group row">
-			<div class="col-sm-2"></div>
-			<div class="col-sm-10">
+			<div class="col-sm-4"></div>
+			<div class="col-sm-8">
 				<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>
@@ -131,8 +131,8 @@
 		</div>
 
 		<div class="form-group row">
-			<div class="col-sm-2"></div>
-			<div class="col-sm-10">
+			<div class="col-sm-4"></div>
+			<div class="col-sm-8">
 				<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>
@@ -140,8 +140,8 @@
 		</div>
 
 		<div class="form-group row">
-			<div class="col-sm-2"></div>
-			<div class="col-sm-10">
+			<div class="col-sm-4"></div>
+			<div class="col-sm-8">
 				<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>
@@ -149,8 +149,8 @@
 		</div>
 
 		<div class="form-group row">
-			<div class="col-sm-2"></div>
-			<div class="col-sm-10">
+			<div class="col-sm-4"></div>
+			<div class="col-sm-8">
 				<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>
@@ -158,8 +158,8 @@
 		</div>
 
 		<div class="form-group row">
-			<div class="col-sm-2"></div>
-			<div class="col-sm-10">
+			<div class="col-sm-4"></div>
+			<div class="col-sm-8">
 				<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>
@@ -167,8 +167,8 @@
 		</div>
 
 		<!-- <div class="form-group row">
-				<div class="col-sm-2"></div>
-				<div class="col-sm-10">
+				<div class="col-sm-4"></div>
+				<div class="col-sm-8">
 					<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>
@@ -177,15 +177,15 @@
 			</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">
+			<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Commentaire</label>
+			<div class="col-sm-8">
 				<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">
+			<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Mode de paiement</label>
+			<div class="col-sm-8">
 				<div class="form-group field-separate">
 					<select class="form-select form-select-sm" id="modePaiement" name="modePaiement" [(ngModel)]="participant.modePaiement" disabled>
 							@for (pmp of PMP; track pmp.key) { <option [value]="pmp.key">{{ pmp.value }}</option> }
@@ -195,15 +195,15 @@
 		</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">
+			<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Somme reçue</label>
+			<div class="col-sm-8">
 				<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="col-sm-4"></div>
+			<div class="col-sm-8">
 				<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>

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

@@ -1,12 +1,13 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, AfterViewInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { Participant, ParticipantEnum, ParticipantStatusList, ParticipantModePaiementList } from '../participant';
-import { ParticipantService } from '../participant.service';
+import { AppComponent } from '../../app.component';
+import { Participant, ParticipantEnum, ParticipantStatusList, ParticipantModePaiementList } from '../../interfaces/participant';
+import { ParticipantService } from '../../services/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 
+export class ParticipantDetailsComponent implements OnInit, AfterViewInit 
 {
   
   PS: ParticipantEnum[] = ParticipantStatusList;
@@ -16,7 +17,7 @@ export class ParticipantDetailsComponent implements OnInit
 
   participant: Participant = new Participant();
   
-  constructor(private participantService: ParticipantService, private route: ActivatedRoute, private router: Router) { }
+  constructor(private participantService: ParticipantService, private route: ActivatedRoute, private router: Router, private application: AppComponent) { }
 
   ngOnInit(): void 
   {
@@ -24,6 +25,8 @@ export class ParticipantDetailsComponent implements OnInit
     this.participant = new Participant();
     this.participantService.getByIdParticipant(this.numeroParticipant).subscribe( data => { this.participant = data; });
   }
+  
+  ngAfterViewInit() { this.application.menuActivateUsers(); }
  
   updateParticipant(id: number) { this.router.navigate(['/participant-update', id]); }
   

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

@@ -1,20 +1,23 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, AfterViewInit } from '@angular/core';
 import { Router } from '@angular/router';
-import { Participant, ParticipantEnum, ParticipantStatusList } from '../participant';
-import { ParticipantService } from '../participant.service';
+import { AppComponent } from '../../app.component';
+import { Participant, ParticipantEnum, ParticipantStatusList } from '../../interfaces/participant';
+import { ParticipantService } from '../../services/participant.service';
 
 @Component({ selector: 'app-participant-list', imports: [], templateUrl: './participant-list.component.html', styleUrl: './participant-list.component.css' })
 
-export class ParticipantListComponent implements OnInit  
+export class ParticipantListComponent implements OnInit, AfterViewInit
 {
     
   PS: ParticipantEnum[] = ParticipantStatusList;
 
   participants: Participant[] = [];
 
-  constructor(private participantService: ParticipantService, private router: Router) { }
+  constructor(private participantService: ParticipantService, private router: Router, private application: AppComponent) { }
 
   ngOnInit(): void { this.retreiveDatas(); }
+  
+  ngAfterViewInit() { this.application.menuActivateUsers(); }
 
   private retreiveDatas() { this.participantService.getListParticipant().subscribe(data => { this.participants = data; }); }
 

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

@@ -1,112 +1,112 @@
 <form id="formParticipant" #formRef="ngForm" class="needs-validation">
-<div class="card shadow">
+<div class="card shadow center" style="min-width:40rem;">
 	<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="card-body scrollable">
 
 		<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">
+			<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Créé le</label>
+			<div class="col-sm-8">
 				<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">
+			<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Modifié le</label>
+			<div class="col-sm-8">
 				<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&nbsp;<sup><span class="text-danger">*</span></sup></label>
-			<div class="col-sm-10">
+			<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Nom&nbsp;<sup><span class="text-danger">*</span></sup></label>
+			<div class="col-sm-8">
 				<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">
+			<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Prénom</label>
+			<div class="col-sm-8">
 				<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&nbsp;<sup><span class="text-danger">*</span></sup></label>
-			<div class="col-sm-10">
+			<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Pseudonyme&nbsp;<sup><span class="text-danger">*</span></sup></label>
+			<div class="col-sm-8">
 				<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">
+			<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Groupe</label>
+			<div class="col-sm-8">
 				<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">
+			<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Mot de passe</label>
+			<div class="col-sm-8">
 				<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">
+			<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Délai avant déconnexion</label>
+			<div class="col-sm-8">
 				<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">
+			<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Adresse</label>
+			<div class="col-sm-8">
 				<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">
+			<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Code postal</label>
+			<div class="col-sm-8">
 				<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">
+			<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Ville</label>
+			<div class="col-sm-8">
 				<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">
+			<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Pays</label>
+			<div class="col-sm-8">
 				<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">
+			<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Numéro de téléphone</label>
+			<div class="col-sm-8">
 				<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">
+			<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Adresse email</label>
+			<div class="col-sm-8">
 				<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">
+			<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Status</label>
+			<div class="col-sm-8">
 				<div class="form-group field-separate">
 					<select class="form-select form-select-sm" id="status" name="status" [(ngModel)]="participant.status">
 							@for (ps of PS; track ps.key) { <option [value]="ps.key">{{ ps.value }}</option> }
@@ -116,15 +116,15 @@
 		</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">
+			<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Inscrit le</label>
+			<div class="col-sm-8">
 				<input type="text" class="form-control form-control-sm field-separate" id="dateInscription" name="dateInscription" [(ngModel)]="participant.dateInscription">
 			</div>
 		</div>
 
 		<div class="form-group row">
-			<div class="col-sm-2"></div>
-			<div class="col-sm-10">
+			<div class="col-sm-4"></div>
+			<div class="col-sm-8">
 				<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>
@@ -132,8 +132,8 @@
 		</div>
 
 		<div class="form-group row">
-			<div class="col-sm-2"></div>
-			<div class="col-sm-10">
+			<div class="col-sm-4"></div>
+			<div class="col-sm-8">
 				<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>
@@ -141,8 +141,8 @@
 		</div>
 
 		<div class="form-group row">
-			<div class="col-sm-2"></div>
-			<div class="col-sm-10">
+			<div class="col-sm-4"></div>
+			<div class="col-sm-8">
 				<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>
@@ -150,8 +150,8 @@
 		</div>
 
 		<div class="form-group row">
-			<div class="col-sm-2"></div>
-			<div class="col-sm-10">
+			<div class="col-sm-4"></div>
+			<div class="col-sm-8">
 				<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>
@@ -159,8 +159,8 @@
 		</div>
 
 		<div class="form-group row">
-			<div class="col-sm-2"></div>
-			<div class="col-sm-10">
+			<div class="col-sm-4"></div>
+			<div class="col-sm-8">
 				<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>
@@ -168,8 +168,8 @@
 		</div>
 
 		<!-- <div class="form-group row">
-				<div class="col-sm-2"></div>
-				<div class="col-sm-10">
+				<div class="col-sm-4"></div>
+				<div class="col-sm-8">
 					<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>
@@ -178,15 +178,15 @@
 			</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">
+			<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Commentaire</label>
+			<div class="col-sm-8">
 				<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">
+			<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Mode de paiement</label>
+			<div class="col-sm-8">
 				<div class="form-group field-separate">
 					<select class="form-select form-select-sm" id="modePaiement" name="modePaiement" [(ngModel)]="participant.modePaiement">
 							@for (pmp of PMP; track pmp.key) { <option [value]="pmp.key">{{ pmp.value }}</option> }
@@ -196,15 +196,15 @@
 		</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">
+			<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Somme reçue</label>
+			<div class="col-sm-8">
 				<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="col-sm-4"></div>
+			<div class="col-sm-8">
 				<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>

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

@@ -1,12 +1,13 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, AfterViewInit, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { Participant, ParticipantEnum, ParticipantStatusList, ParticipantModePaiementList } from '../participant';
-import { ParticipantService } from '../participant.service';
+import { AppComponent } from '../../app.component';
+import { Participant, ParticipantEnum, ParticipantStatusList, ParticipantModePaiementList } from '../../interfaces/participant';
+import { ParticipantService } from '../../services/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
+export class ParticipantUpdateComponent implements OnInit, AfterViewInit
 {
   
   PS: ParticipantEnum[] = ParticipantStatusList;
@@ -18,13 +19,15 @@ export class ParticipantUpdateComponent implements OnInit
   
   participant: Participant = new Participant();
   
-  constructor(private participantService: ParticipantService, private route: ActivatedRoute, private router: Router) { }
+  constructor(private participantService: ParticipantService, private route: ActivatedRoute, private router: Router, private application: AppComponent) { }
 
   ngOnInit(): void 
   {
     this.numeroParticipant = this.route.snapshot.params['numeroParticipant'];
     this.participantService.getByIdParticipant(this.numeroParticipant).subscribe(data => { this.participant = data; });
   }
+  
+  ngAfterViewInit() { this.application.menuActivateUsers(); }
 
   updateConfirmed() { if (this.participantForm.valid) { this.participantService.updateParticipant(this.numeroParticipant, this.participant).subscribe(() => { this.goToListParticipant(); }); } }
 

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

@@ -1,5 +1,5 @@
 <form #formRef="ngForm" (ngSubmit)="addProduction()" class="needs-validation">
-	<div class="card shadow">
+	<div class="card shadow center" style="min-width:40rem;">
 		<div class="card-header">Fiche d'une production</div>
 		<div class="card-header shadow-sm">
 			<button (click)="goToListProduction()" class="btn btn-primary btn-sm"><i class="fa-solid fa-xmark"></i>&nbsp;Retour</button>
@@ -7,8 +7,8 @@
 		<div class="card-body">
 
 			<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">
+				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Type</label>
+				<div class="col-sm-8">
 					<div class="form-group field-separate">
 						<select class="form-select form-select-sm" id="type" name="type" [(ngModel)]="production.type">
 							@for (type of types; track type.key) { <option [value]="type.key">{{ type.value }}</option> }
@@ -18,50 +18,50 @@
 			</div>
 
 			<div class="form-group row">
-				<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Titre&nbsp;<sup><span class="text-danger">*</span></sup></label>
-				<div class="col-sm-10">
+				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Titre&nbsp;<sup><span class="text-danger">*</span></sup></label>
+				<div class="col-sm-8">
 					<input type="text" class="form-control form-control-sm field-separate" id="titre" name="titre" [(ngModel)]="production.titre" #titreRef="ngModel" required [class.is-invalid]="titreRef.invalid && titreRef.touched">
 				</div>
 			</div>
 
 			<div class="form-group row">
-				<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Auteur(s)&nbsp;<sup><span class="text-danger">*</span></sup></label>
-				<div class="col-sm-10">
+				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Auteur(s)&nbsp;<sup><span class="text-danger">*</span></sup></label>
+				<div class="col-sm-8">
 					<input type="text" class="form-control form-control-sm field-separate" id="auteurs" name="auteurs" [(ngModel)]="production.auteurs" #auteursRef="ngModel" required [class.is-invalid]="auteursRef.invalid && auteursRef.touched">
 				</div>
 			</div>
 
 			<div class="form-group row">
-				<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Groupe(s)</label>
-				<div class="col-sm-10">
+				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Groupe(s)</label>
+				<div class="col-sm-8">
 					<input type="text" class="form-control form-control-sm field-separate" id="groupes" name="groupes" [(ngModel)]="production.groupes">
 				</div>
 			</div>
 
 			<div class="form-group row">
-				<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Plateforme</label>
-				<div class="col-sm-10">
+				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Plateforme</label>
+				<div class="col-sm-8">
 					<input type="text" class="form-control form-control-sm field-separate" id="plateforme" name="plateforme" [(ngModel)]="production.plateforme">
 				</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">
+				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Commentaire</label>
+				<div class="col-sm-8">
 					<textarea class="form-control form-control-sm field-separate" id="commentaire" name="commentaire" [(ngModel)]="production.commentaire"></textarea>
 				</div>
 			</div>
 
 			<div class="form-group row">
-				<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Informations privées</label>
-				<div class="col-sm-10">
+				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Informations privées</label>
+				<div class="col-sm-8">
 					<textarea class="form-control form-control-sm field-separate" id="informationsPrivees" name="informationsPrivees" [(ngModel)]="production.informationsPrivees"></textarea>
 				</div>
 			</div>
 
 			<div class="form-group row">
-				<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Gestionnaire&nbsp;<sup><span class="text-danger">*</span></sup></label>
-				<div class="col-sm-10">
+				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Gestionnaire&nbsp;<sup><span class="text-danger">*</span></sup></label>
+				<div class="col-sm-8">
 					<div class="form-group">
 						<select class="form-select form-select-sm field-separate" id="numeroParticipant" name="numeroParticipant" [(ngModel)]="production.numeroParticipant">
 				    @for (participant of participants; track participant.numeroParticipant) {
@@ -73,15 +73,15 @@
 			</div>
 
 			<div class="form-group row">
-				<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Archive</label>
-				<div class="col-sm-10">
+				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Archive</label>
+				<div class="col-sm-8">
 					<input type="file" class="form-control form-control-sm field-separate" id="archive" name="archive" accept="application/zip" (change)="onArchiveSelected($event)">
 				</div>
 			</div>
 
 			<div class="form-group row">
-				<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Vignette</label>
-				<div class="col-sm-10">
+				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Vignette</label>
+				<div class="col-sm-8">
 					<input type="file" class="form-control form-control-sm field-separate" id="vignette" name="vignette" accept="image/png, image/gif, image/jpeg" (change)="onVignetteSelected($event)">
 				</div>
 			</div>

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

@@ -1,14 +1,15 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
-import { Production, ProductionEnum, ProductionTypeList } from '../production';
-import { ProductionService } from '../production.service';
-import { ParticipantShort } from '../participant';
-import { ParticipantService } from '../participant.service';
+import { Component, OnInit, AfterViewInit, ViewChild } from '@angular/core';
+import { AppComponent } from '../../app.component';
+import { Production, ProductionEnum, ProductionTypeList } from '../../interfaces/production';
+import { ProductionService } from '../../services/production.service';
+import { ParticipantShort } from '../../interfaces/participant';
+import { ParticipantService } from '../../services/participant.service';
 import { Router } from '@angular/router';
 import { FormsModule, NgForm } from '@angular/forms'; 
 
 @Component({ selector: 'app-production-create', imports: [FormsModule], templateUrl: './production-create.component.html', styleUrl: './production-create.component.css' })
 
-export class ProductionCreateComponent implements OnInit 
+export class ProductionCreateComponent implements OnInit, AfterViewInit 
 {
   
   participants: ParticipantShort[] = [];
@@ -19,12 +20,11 @@ export class ProductionCreateComponent implements OnInit
   
   production: Production = new Production();
   
-  constructor(private productionService: ProductionService, private participantService: ParticipantService, private router: Router) { }
+  constructor(private productionService: ProductionService, private participantService: ParticipantService, private router: Router, private application: AppComponent) { }
 
-  ngOnInit(): void 
-  { 
-    this.retreiveParticipants();
-  }
+  ngOnInit(): void { this.retreiveParticipants(); }
+  
+  ngAfterViewInit() { this.application.menuActivateProds(); }
 
   private retreiveParticipants() { this.participantService.getOptionListParticipant().subscribe(data => { this.participants = data; }); }
 

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

@@ -1,4 +1,4 @@
-<div class="card shadow">
+<div class="card shadow center" style="min-width:40rem;">
 	<div class="card-header">Fiche d'une production</div>
 	<div class="card-header shadow-sm">
 		<button (click)="goToListProduction()" class="btn btn-primary btn-sm">
@@ -8,22 +8,22 @@
 	<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">
+			<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Créé le</label>
+			<div class="col-sm-8">
 				<input type="text" class="form-control form-control-sm field-separate" id="dateCreation" name="dateCreation" [(ngModel)]="production.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">
+			<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Modifié le</label>
+			<div class="col-sm-8">
 				<input type="text" class="form-control form-control-sm field-separate" id="dateModification" name="dateModification" [(ngModel)]="production.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">
+			<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Type</label>
+			<div class="col-sm-8">
 				<div class="form-group field-separate">
 					<select class="form-select form-select-sm" id="type" name="type" [(ngModel)]="production.type" disabled> 
 					  @for (type of types; track type.key) { <option [value]="type.key">{{ type.value }}</option> }
@@ -33,65 +33,65 @@
 		</div>
 
 		<div class="form-group row">
-			<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Titre</label>
-			<div class="col-sm-10">
+			<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Titre</label>
+			<div class="col-sm-8">
 				<input type="text" class="form-control form-control-sm field-separate" id="titre" name="titre" [(ngModel)]="production.titre" disabled>
 			</div>
 		</div>
 
 		<div class="form-group row">
-			<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Auteur(s)</label>
-			<div class="col-sm-10">
+			<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Auteur(s)</label>
+			<div class="col-sm-8">
 				<input type="text" class="form-control form-control-sm field-separate" id="auteurs" name="auteurs" [(ngModel)]="production.auteurs" disabled>
 			</div>
 		</div>
 
 		<div class="form-group row">
-			<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Groupe(s)</label>
-			<div class="col-sm-10">
+			<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Groupe(s)</label>
+			<div class="col-sm-8">
 				<input type="text" class="form-control form-control-sm field-separate" id="groupes" name="groupes" [(ngModel)]="production.groupes" disabled>
 			</div>
 		</div>
 
 		<div class="form-group row">
-			<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Plateforme</label>
-			<div class="col-sm-10">
+			<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Plateforme</label>
+			<div class="col-sm-8">
 				<input type="text" class="form-control form-control-sm field-separate" id="plateforme" name="plateforme" [(ngModel)]="production.plateforme" disabled>
 			</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">
+			<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Commentaire</label>
+			<div class="col-sm-8">
 				<textarea class="form-control form-control-sm field-separate" id="commentaire" name="commentaire" [(ngModel)]="production.commentaire" disabled></textarea>
 			</div>
 		</div>
 
 		<div class="form-group row">
-			<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Informations privées</label>
-			<div class="col-sm-10">
+			<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Informations privées</label>
+			<div class="col-sm-8">
 				<textarea class="form-control form-control-sm field-separate" id="informationsPrivees" name="informationsPrivees" [(ngModel)]="production.informationsPrivees" disabled></textarea>
 			</div>
 		</div>
 
 		<div class="form-group row">
-			<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Gestionnaire</label>
-			<div class="col-sm-10">
+			<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Gestionnaire</label>
+			<div class="col-sm-8">
 				<input type="text" class="form-control form-control-sm field-separate" id="plateforme" name="plateforme" [(ngModel)]="production.nomGestionnaire" disabled>
 			</div>
 		</div>
 
 		<div class="form-group row">
-			<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Archive</label>
-			<div class="col-sm-10">
+			<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Archive</label>
+			<div class="col-sm-8">
 				<button type="button" (click)="updateArchive(production.numeroProduction)" class="btn btn-primary btn-sm field-separate"><i class="fa-solid fa-upload"></i>&nbsp;Téléverser</button>
 				<small class="text-muted">&nbsp;&nbsp;déjà enregistré : {{ production.nomArchive }} (v{{ production.numeroVersion }})</small>
 			</div>
 		</div>
 
 		<div class="form-group row">
-			<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Vignette</label>
-			<div class="col-sm-10">
+			<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Vignette</label>
+			<div class="col-sm-8">
 				<img src="{{ production.vignette }}" alt="" class="img-fluid rounded-2">
 			</div>
 		</div>

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

@@ -1,12 +1,13 @@
-import { Component } from '@angular/core';
+import { Component, OnInit, AfterViewInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { ProductionShort, ProductionEnum, ProductionTypeList } from '../production';
-import { ProductionService } from '../production.service';
+import { AppComponent } from '../../app.component';
+import { ProductionShort, ProductionEnum, ProductionTypeList } from '../../interfaces/production';
+import { ProductionService } from '../../services/production.service';
 import { FormsModule } from '@angular/forms'; 
 
 @Component({ selector: 'app-production-details', imports: [FormsModule], templateUrl: './production-details.component.html', styleUrl: './production-details.component.css' })
 
-export class ProductionDetailsComponent 
+export class ProductionDetailsComponent implements OnInit, AfterViewInit
 {
   
   numeroProduction: number = 0;
@@ -15,7 +16,7 @@ export class ProductionDetailsComponent
   
   production: ProductionShort = new ProductionShort();
   
-  constructor(private productionService: ProductionService, private route: ActivatedRoute, private router: Router) { }
+  constructor(private productionService: ProductionService, private route: ActivatedRoute, private router: Router, private application: AppComponent) { }
 
   ngOnInit(): void 
   { 
@@ -23,6 +24,8 @@ export class ProductionDetailsComponent
     this.production = new ProductionShort();
     this.productionService.getByIdProduction(this.numeroProduction).subscribe( data => { this.production = data; });
   }
+  
+  ngAfterViewInit() { this.application.menuActivateProds(); }
 
   updateArchive(id: number) { this.router.navigate(['/production-upload', id]); }
   

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

@@ -1,5 +1,5 @@
 <div class="card shadow">
-	<div class="card-header">Table des productions</div>
+	<div class="card-header">Liste des productions</div>
 	<div class="card-header shadow-sm">
 		<div class="row">
 			<div class="form-group col-sm-4 label-nobr">

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

@@ -1,21 +1,24 @@
-import { Component } from '@angular/core';
+import { Component, OnInit, AfterViewInit } from '@angular/core';
 import { Router } from '@angular/router';
-import { ProductionShort, ProductionEnum, ProductionTypeList } from '../production';
-import { ProductionService } from '../production.service';
+import { AppComponent } from '../../app.component';
+import { ProductionShort, ProductionEnum, ProductionTypeList } from '../../interfaces/production';
+import { ProductionService } from '../../services/production.service';
 import { saveAs } from 'file-saver';
 
 @Component({ selector: 'app-production-list', imports: [], templateUrl: './production-list.component.html', styleUrl: './production-list.component.css' })
 
-export class ProductionListComponent 
+export class ProductionListComponent implements OnInit, AfterViewInit
 {
   
   productions: ProductionShort[] = [];
 
   types: ProductionEnum[] = ProductionTypeList;
 
-  constructor(private productionService: ProductionService, private router: Router) { }
+  constructor(private productionService: ProductionService, private router: Router, private application: AppComponent) { }
 
   ngOnInit(): void { this.retreiveDatas(); }
+  
+  ngAfterViewInit() { this.application.menuActivateProds(); }
 
   private retreiveDatas() { this.productionService.getListProduction().subscribe(data => { this.productions = data; }); }
 

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

@@ -1,5 +1,5 @@
 <form id="formProduction" #formRef="ngForm" class="needs-validation">
-	<div class="card shadow">
+	<div class="card shadow center" style="min-width:40rem;">
 		<div class="card-header">Fiche d'une production</div>
 		<div class="card-header shadow-sm">
 			<button (click)="goToListProduction()" class="btn btn-primary btn-sm">
@@ -9,22 +9,22 @@
 		<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">
+				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Créé le</label>
+				<div class="col-sm-8">
 					<input type="text" class="form-control form-control-sm field-separate" id="dateCreation" name="dateCreation" [(ngModel)]="production.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">
+				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Modifié le</label>
+				<div class="col-sm-8">
 					<input type="text" class="form-control form-control-sm field-separate" id="dateModification" name="dateModification" [(ngModel)]="production.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">
+				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Type</label>
+				<div class="col-sm-8">
 					<div class="form-group field-separate">
 						<select class="form-select form-select-sm" id="type" name="type" [(ngModel)]="production.type"> @for (type of types; track type.key) {
 							<option [value]="type.key">{{ type.value }}</option> }
@@ -34,50 +34,50 @@
 			</div>
 
 			<div class="form-group row">
-				<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Titre&nbsp;<sup><span class="text-danger">*</span></sup></label>
-				<div class="col-sm-10">
+				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Titre&nbsp;<sup><span class="text-danger">*</span></sup></label>
+				<div class="col-sm-8">
 					<input type="text" class="form-control form-control-sm field-separate" id="titre" name="titre" [(ngModel)]="production.titre" #titreRef="ngModel" required [class.is-invalid]="titreRef.invalid && titreRef.touched">
 				</div>
 			</div>
 
 			<div class="form-group row">
-				<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Auteur(s)&nbsp;<sup><span class="text-danger">*</span></sup></label>
-				<div class="col-sm-10">
+				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Auteur(s)&nbsp;<sup><span class="text-danger">*</span></sup></label>
+				<div class="col-sm-8">
 					<input type="text" class="form-control form-control-sm field-separate" id="auteurs" name="auteurs" [(ngModel)]="production.auteurs" #auteursRef="ngModel" required [class.is-invalid]="auteursRef.invalid && auteursRef.touched">
 				</div>
 			</div>
 
 			<div class="form-group row">
-				<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Groupe(s)</label>
-				<div class="col-sm-10">
+				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Groupe(s)</label>
+				<div class="col-sm-8">
 					<input type="text" class="form-control form-control-sm field-separate" id="groupes" name="groupes" [(ngModel)]="production.groupes">
 				</div>
 			</div>
 
 			<div class="form-group row">
-				<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Plateforme</label>
-				<div class="col-sm-10">
+				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Plateforme</label>
+				<div class="col-sm-8">
 					<input type="text" class="form-control form-control-sm field-separate" id="plateforme" name="plateforme" [(ngModel)]="production.plateforme">
 				</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">
+				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Commentaire</label>
+				<div class="col-sm-8">
 					<textarea class="form-control form-control-sm field-separate" id="commentaire" name="commentaire" [(ngModel)]="production.commentaire"></textarea>
 				</div>
 			</div>
 
 			<div class="form-group row">
-				<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Informations privées</label>
-				<div class="col-sm-10">
+				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Informations privées</label>
+				<div class="col-sm-8">
 					<textarea class="form-control form-control-sm field-separate" id="informationsPrivees" name="informationsPrivees" [(ngModel)]="production.informationsPrivees"></textarea>
 				</div>
 			</div>
 
 			<div class="form-group row">
-				<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Gestionnaire&nbsp;<sup><span class="text-danger">*</span></sup></label>
-				<div class="col-sm-10">
+				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Gestionnaire&nbsp;<sup><span class="text-danger">*</span></sup></label>
+				<div class="col-sm-8">
 						<select class="form-select form-select-sm field-separate" id="numeroParticipant" name="numeroParticipant" [(ngModel)]="production.numeroGestionnaire">
 				    @for (participant of participants; track participant.numeroParticipant) {
 							<option [ngValue]="participant.numeroParticipant">{{ participant.pseudonyme }} = {{ participant.nom }}&nbsp;{{ participant.prenom }}</option>
@@ -87,8 +87,8 @@
 			</div>
 
 			<div class="form-group row">
-				<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Vignette</label>
-				<div class="col-sm-10">
+				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Vignette</label>
+				<div class="col-sm-8">
 					<input type="file" class="form-control form-control-sm field-separate" id="vignette" name="vignette" accept="image/png, image/gif, image/jpeg" (change)="onVignetteSelected($event)">
 				</div>
 			</div>

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

@@ -1,14 +1,15 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, AfterViewInit, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { ProductionShort, ProductionEnum, ProductionTypeList } from '../production';
-import { ProductionService } from '../production.service';
-import { ParticipantShort } from '../participant';
-import { ParticipantService } from '../participant.service';
+import { AppComponent } from '../../app.component';
+import { ProductionShort, ProductionEnum, ProductionTypeList } from '../../interfaces/production';
+import { ProductionService } from '../../services/production.service';
+import { ParticipantShort } from '../../interfaces/participant';
+import { ParticipantService } from '../../services/participant.service';
 import { FormsModule, NgForm } from '@angular/forms'; 
 
 @Component({ selector: 'app-production-update', imports: [FormsModule], templateUrl: './production-update.component.html', styleUrl: './production-update.component.css' })
 
-export class ProductionUpdateComponent implements OnInit
+export class ProductionUpdateComponent implements OnInit, AfterViewInit
 {
   
   participants: ParticipantShort[] = [];
@@ -21,14 +22,16 @@ export class ProductionUpdateComponent implements OnInit
   
   numeroProduction: number = 0;
 
-  constructor(private productionService: ProductionService, private participantService: ParticipantService, private route: ActivatedRoute, private router: Router) { }
+  constructor(private productionService: ProductionService, private participantService: ParticipantService, private route: ActivatedRoute, private router: Router, private application: AppComponent) { }
 
   ngOnInit(): void 
   { 
     this.retreiveParticipants();
     this.numeroProduction = this.route.snapshot.params['numeroProduction'];
     this.productionService.getByIdProduction(this.numeroProduction).subscribe(data => { this.production = data; });
- }
+  }
+  
+  ngAfterViewInit() { this.application.menuActivateProds(); }
 
   private retreiveParticipants() { this.participantService.getOptionListParticipant().subscribe(data => { this.participants = data; }); }
 

src/app/production-upload/production-upload.component.html → src/app/composants/production-upload/production-upload.component.html

@@ -1,5 +1,5 @@
 <form #formRef="ngForm" (ngSubmit)="addProductionFile()" class="needs-validation">
-	<div class="card shadow">
+	<div class="card shadow center" style="min-width:40rem;"col-sm-4>
 		<div class="card-header">Changement de l'archive d'une production</div>
 		<div class="card-header shadow-sm">
 			<button (click)="goToListProduction()" class="btn btn-primary btn-sm"><i class="fa-solid fa-xmark"></i>&nbsp;Retour</button>
@@ -7,15 +7,15 @@
 		<div class="card-body">
 
 			<div class="form-group row">
-				<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Titre</label>
-				<div class="col-sm-10">
+				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Titre</label>
+				<div class="col-sm-8">
 					<input type="text" class="form-control form-control-sm field-separate" id="titre" name="titre" [(ngModel)]="production.titre" disabled>
 				</div>
 			</div>
 
 			<div class="form-group row">
-				<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Archive</label>
-				<div class="col-sm-10">
+				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Archive</label>
+				<div class="col-sm-8">
 					<input type="file" class="form-control form-control-sm field-separate" id="archive" name="archive" accept="application/zip" (change)="onArchiveSelected($event)">
 				</div>
 			</div>

src/app/production-upload/production-upload.component.ts → src/app/composants/production-upload/production-upload.component.ts

@@ -1,25 +1,28 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, AfterViewInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { ProductionFile } from '../production';
-import { ProductionService } from '../production.service';
+import { AppComponent } from '../../app.component';
+import { ProductionFile } from '../../interfaces/production';
+import { ProductionService } from '../../services/production.service';
 import { FormsModule } from '@angular/forms'; 
 
 @Component({ selector: 'app-production-upload', imports: [FormsModule], templateUrl: './production-upload.component.html', styleUrl: './production-upload.component.css' })
 
-export class ProductionUploadComponent implements OnInit 
+export class ProductionUploadComponent implements OnInit, AfterViewInit
 {
 
   production: ProductionFile = new ProductionFile();
   
   numeroProduction: number = 0;
 
-  constructor(private productionService: ProductionService, private route: ActivatedRoute, private router: Router) { }
+  constructor(private productionService: ProductionService, private route: ActivatedRoute, private router: Router, private application: AppComponent) { }
 
   ngOnInit(): void 
   { 
     this.numeroProduction = this.route.snapshot.params['numeroProduction'];
     this.productionService.getByIdProductionFile(this.numeroProduction).subscribe(data => { this.production = data; });
   }
+  
+  ngAfterViewInit() { this.application.menuActivateProds(); }
 
   onArchiveSelected(event: any) 
   { 

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

@@ -1,5 +1,5 @@
 <form #formRef="ngForm" (ngSubmit)="addVariable()" class="needs-validation">
-	<div class="card shadow">
+	<div class="card shadow center" style="min-width:40rem;">
 		<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="fa-solid fa-xmark"></i>&nbsp;Retour</button>
@@ -7,29 +7,29 @@
 		<div class="card-body">
 
 			<div class="form-group row">
-				<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Type&nbsp;<sup><span class="text-danger">*</span></sup></label>
-				<div class="col-sm-10">
+				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Type&nbsp;<sup><span class="text-danger">*</span></sup></label>
+				<div class="col-sm-8">
 					<input type="text" class="form-control form-control-sm field-separate" id="type" name="type" [(ngModel)]="variable.type" #typeRef="ngModel" required [class.is-invalid]="typeRef.invalid && typeRef.touched">
 				</div>
 			</div>
 
 			<div class="form-group row">
-				<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Code&nbsp;<sup><span class="text-danger">*</span></sup></label>
-				<div class="col-sm-10">
+				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Code&nbsp;<sup><span class="text-danger">*</span></sup></label>
+				<div class="col-sm-8">
 					<input type="text" class="form-control form-control-sm field-separate" id="code" name="code" [(ngModel)]="variable.code" #codeRef="ngModel" required [class.is-invalid]="codeRef.invalid && codeRef.touched">
 				</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">
+				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Valeur</label>
+				<div class="col-sm-8">
 					<input type="text" class="form-control form-control-sm field-separate" id="valeur" name="valeur" [(ngModel)]="variable.valeur">
 				</div>
 			</div>
 
 			<div class="form-group row">
-				<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Notes</label>
-				<div class="col-sm-10">
+				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Notes</label>
+				<div class="col-sm-8">
 					<textarea class="form-control form-control-sm field-separate" id="notes" name="notes" [(ngModel)]="variable.notes"></textarea>
 				</div>
 			</div>

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

@@ -1,12 +1,13 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
-import { Variable } from '../variable';
-import { VariableService } from '../variable.service';
+import { Component, OnInit, AfterViewInit, ViewChild } from '@angular/core';
+import { Variable } from '../../interfaces/variable';
+import { VariableService } from '../../services/variable.service';
+import { AppComponent } from '../../app.component';
 import { Router } from '@angular/router';
 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
+export class VariableCreateComponent implements OnInit, AfterViewInit
 {
 
   @ViewChild('formRef') variableForm!: NgForm;
@@ -15,9 +16,11 @@ export class VariableCreateComponent implements OnInit
   
   variable: Variable = new Variable();
   
-  constructor(private variableService: VariableService, private router: Router) { }
+  constructor(private variableService: VariableService, private router: Router, private application: AppComponent) { }
 
   ngOnInit(): void { }
+  
+  ngAfterViewInit() { this.application.menuActivateParams(); }
 
   private saveVariable() { this.variableService.createVariable(this.variable).subscribe({ next: () => { this.goToListVariable(); }, error: (err: any) => { console.log(err); }, complete: () => { } }); }
 

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

@@ -1,4 +1,4 @@
-<div class="card shadow">
+<div class="card shadow center" style="min-width:40rem;">
   <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="fa-solid fa-xmark"></i>&nbsp;Retour</button>
@@ -6,43 +6,43 @@
 	<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">
+			<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Créé le</label>
+			<div class="col-sm-8">
 				<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">
+			<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Modifié le</label>
+			<div class="col-sm-8">
 				<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">
+			<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Type</label>
+			<div class="col-sm-8">
 				<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">
+			<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Code</label>
+			<div class="col-sm-8">
 				<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">
+			<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Valeur</label>
+			<div class="col-sm-8">
 				<input type="text" class="form-control form-control-sm field-separate" id="valeur" name="valeur" [(ngModel)]="variable.valeur" disabled>
 			</div>
 		</div>
 
 		<div class="form-group row">
-			<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Notes</label>
-			<div class="col-sm-10">
+			<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Notes</label>
+			<div class="col-sm-8">
 				<textarea class="form-control form-control-sm field-separate" id="notes" name="notes" [(ngModel)]="variable.notes" disabled></textarea>
 			</div>
 		</div>

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

@@ -1,19 +1,20 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, AfterViewInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { Variable } from '../variable';
-import { VariableService } from '../variable.service';
+import { AppComponent } from '../../app.component';
+import { Variable } from '../../interfaces/variable';
+import { VariableService } from '../../services/variable.service';
 import { FormsModule } from '@angular/forms'; 
 
 @Component({ selector: 'app-variable-details', imports: [FormsModule], templateUrl: './variable-details.component.html', styleUrl: './variable-details.component.css' })
 
-export class VariableDetailsComponent implements OnInit 
+export class VariableDetailsComponent implements OnInit, AfterViewInit
 {
 
   numeroVariable: number = 0;
 
   variable: Variable = new Variable();
   
-  constructor(private variableService: VariableService, private route: ActivatedRoute, private router: Router) { }
+  constructor(private variableService: VariableService, private route: ActivatedRoute, private router: Router, private application: AppComponent) { }
 
   ngOnInit(): void 
   {
@@ -21,6 +22,8 @@ export class VariableDetailsComponent implements OnInit
     this.variable = new Variable();
     this.variableService.getByIdVariable(this.numeroVariable).subscribe( data => { this.variable = data; });
   }
+  
+  ngAfterViewInit() { this.application.menuActivateParams(); }
  
   updateVariable(id: number) { this.router.navigate(['/variable-update', id]); }
   

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

@@ -1,20 +1,23 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, AfterViewInit } from '@angular/core';
 import { Router } from '@angular/router';
-import { Variable, VariableType } from '../variable';
-import { VariableService } from '../variable.service';
+import { AppComponent } from '../../app.component';
+import { Variable, VariableType } from '../../interfaces/variable';
+import { VariableService } from '../../services/variable.service';
 
 @Component({ selector: 'app-variable-list', imports: [], templateUrl: './variable-list.component.html', styleUrl: './variable-list.component.css' })
 
-export class VariableListComponent implements OnInit
+export class VariableListComponent implements OnInit, AfterViewInit
 {
   
   types: VariableType[] = [];
   
   variables: Variable[] = [];
 
-  constructor(private variableService: VariableService, private router: Router) { }
+  constructor(private variableService: VariableService, private router: Router, private application: AppComponent) { }
 
   ngOnInit(): void { this.retreiveDatas(); this.retreiveParticipants(); }
+  
+  ngAfterViewInit() { this.application.menuActivateParams(); }
 
   private retreiveDatas() { this.variableService.getListVariable().subscribe(data => { this.variables = data; }); }
   private retreiveParticipants() { this.variableService.getOptionListVariableType().subscribe(data => { this.types = data; }); }

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

@@ -1,5 +1,5 @@
 <form id="formVariable" #formRef="ngForm" class="needs-validation">
-	<div class="card shadow">
+	<div class="card shadow center" style="min-width:40rem;">
 		<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="fa-solid fa-xmark"></i>&nbsp;Retour</button>
@@ -7,43 +7,43 @@
 		<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">
+				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Créé le</label>
+				<div class="col-sm-8">
 					<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">
+				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Modifié le</label>
+				<div class="col-sm-8">
 					<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&nbsp;<sup><span class="text-danger">*</span></sup></label>
-				<div class="col-sm-10">
+				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Type&nbsp;<sup><span class="text-danger">*</span></sup></label>
+				<div class="col-sm-8">
 					<input type="text" class="form-control form-control-sm field-separate" id="type" name="type" [(ngModel)]="variable.type" #typeRef="ngModel" required [class.is-invalid]="typeRef.invalid && typeRef.touched">
 				</div>
 			</div>
 
 			<div class="form-group row">
-				<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Code&nbsp;<sup><span class="text-danger">*</span></sup></label>
-				<div class="col-sm-10">
+				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Code&nbsp;<sup><span class="text-danger">*</span></sup></label>
+				<div class="col-sm-8">
 					<input type="text" class="form-control form-control-sm field-separate" id="code" name="code" [(ngModel)]="variable.code" #codeRef="ngModel" required [class.is-invalid]="codeRef.invalid && codeRef.touched">
 				</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">
+				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Valeur</label>
+				<div class="col-sm-8">
 					<input type="text" class="form-control form-control-sm field-separate" id="valeur" name="valeur" [(ngModel)]="variable.valeur">
 				</div>
 			</div>
 
 			<div class="form-group row">
-				<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Notes</label>
-				<div class="col-sm-10">
+				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Notes</label>
+				<div class="col-sm-8">
 					<textarea class="form-control form-control-sm field-separate" id="notes" name="notes" [(ngModel)]="variable.notes"></textarea>
 				</div>
 			</div>

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

@@ -1,12 +1,13 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, AfterViewInit, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { Variable } from '../variable';
-import { VariableService } from '../variable.service';
+import { AppComponent } from '../../app.component';
+import { Variable } from '../../interfaces/variable';
+import { VariableService } from '../../services/variable.service';
 import { FormsModule, NgForm } from '@angular/forms'; 
 
 @Component({ selector: 'app-variable-update', imports: [FormsModule], templateUrl: './variable-update.component.html', styleUrl: './variable-update.component.css' })
 
-export class VariableUpdateComponent implements OnInit
+export class VariableUpdateComponent implements OnInit, AfterViewInit
 {
 
   @ViewChild('formRef') variableForm!: NgForm;
@@ -15,13 +16,15 @@ export class VariableUpdateComponent implements OnInit
   
   variable: Variable = new Variable();
   
-  constructor(private variableService: VariableService, private route: ActivatedRoute, private router: Router) { }
+  constructor(private variableService: VariableService, private route: ActivatedRoute, private router: Router, private application: AppComponent) { }
 
   ngOnInit(): void 
   {
     this.numeroVariable = this.route.snapshot.params['numeroVariable'];
     this.variableService.getByIdVariable(this.numeroVariable).subscribe(data => { this.variable = data; });
   }
+  
+  ngAfterViewInit() { this.application.menuActivateParams(); }
 
   updateConfirmed() { if (this.variableForm.valid) { this.variableService.updateVariable(this.numeroVariable, this.variable).subscribe(() => { this.goToListVariable(); }); } }
 

src/app/guards/auth.guard.ts

@@ -0,0 +1,28 @@
+import { Injectable } from '@angular/core';      
+import { ActivatedRouteSnapshot, RouterStateSnapshot, CanActivate, Router } from '@angular/router';      
+import { Observable } from 'rxjs';      
+
+@Injectable({ providedIn: 'root' })
+
+export class AuthGuard implements CanActivate 
+{      
+ 
+  constructor(private router: Router) { }
+  
+  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean 
+  {      
+    if (this.isLoggedIn()) { return true; }
+    
+    this.router.navigate(['/']);      
+
+    return false;      
+  }
+  
+  public isLoggedIn(): boolean 
+  {
+    let status = false;      
+    if (localStorage.getItem('isConnecte') == "true") { status = true; } else { status = false; }      
+    return status;      
+  }
+  
+}    

src/app/interfaces/login.ts

@@ -0,0 +1,6 @@
+
+export class Login 
+{      
+  userid: string = "";    
+  userpwd: string = "";    
+}  

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

@@ -1,23 +0,0 @@
-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-details/participant-details.component.spec.ts

@@ -1,23 +0,0 @@
-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-list/participant-list.component.spec.ts

@@ -1,23 +0,0 @@
-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-update/participant-update.component.spec.ts

@@ -1,23 +0,0 @@
-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/production-create/production-create.component.spec.ts

@@ -1,23 +0,0 @@
-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-details/production-details.component.spec.ts

@@ -1,23 +0,0 @@
-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-list/production-list.component.spec.ts

@@ -1,23 +0,0 @@
-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-update/production-update.component.spec.ts

@@ -1,23 +0,0 @@
-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-upload/production-upload.component.spec.ts

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

src/app/services/auth.service.ts

@@ -0,0 +1,25 @@
+import { Injectable } from '@angular/core';
+import { Login } from '../interfaces/login';
+import { HttpClient } from '@angular/common/http'
+
+@Injectable({ providedIn: 'root'})
+
+export class AuthService 
+{
+
+  private baseURL = "http://localhost:8080/demovote-api/v1/variable";
+
+  constructor(private httpClient: HttpClient) { }
+ 
+  connexion(identifiants: Login): void
+  {
+    
+  }
+  
+  deconnexion(): void 
+  {
+    localStorage.setItem('isLoggedIn','false');    
+    localStorage.removeItem('token');    
+  }
+  
+}

src/app/categorie.service.ts → src/app/services/categorie.service.ts

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http'
 import { Observable } from 'rxjs';
-import { Categorie } from './categorie';
+import { Categorie } from '../interfaces/categorie';
 
 @Injectable({ providedIn: 'root' })
 

src/app/participant.service.ts → src/app/services/participant.service.ts

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http'
 import { Observable } from 'rxjs';
-import { Participant, ParticipantShort } from './participant';
+import { Participant, ParticipantShort } from '../interfaces/participant';
 
 @Injectable({ providedIn: 'root' })
 

src/app/production.service.ts → src/app/services/production.service.ts

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { HttpClient, HttpHeaders, HttpResponse } from '@angular/common/http'
 import { Observable } from 'rxjs';
-import { Production, ProductionShort, ProductionFile } from './production';
+import { Production, ProductionShort, ProductionFile } from '../interfaces/production';
 
 @Injectable({ providedIn: 'root' })
 

src/app/variable.service.ts → src/app/services/variable.service.ts

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http'
 import { Observable } from 'rxjs';
-import { Variable, VariableType } from './variable';
+import { Variable, VariableType } from '../interfaces/variable';
 
 @Injectable({ providedIn: 'root' })
 

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

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

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

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

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

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

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

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

src/styles.css

@@ -3,3 +3,10 @@
 .field-separate { margin-bottom: 2px; }
 .card-header, .card-body, .card-footer { padding: 7px; }
 .card { margin: 7px; }
+.center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); min-width:50rem; }
+.scrollable { overflow-y: scroll; overflow-x: hidden; max-height: 600px; }
+
+@media screen and (max-width: 900px) {
+  .center { position: unset; left: unset; top: unset; transform: unset; min-width: unset; }
+  .scrollable { overflow-y: unset; overflow-x: unset; max-height: unset; }
+}