dev en cours

src/app/app.component.css

@@ -6,33 +6,3 @@ body {
 html {
   height: -webkit-fill-available;
 }
-
-.dropdown-toggle { outline: 0; }
-
-#main {
-  margin-left: 60px; 
-  padding: 0px 10px;
-}
-
-#sidenav {
-  height: 100%;
-  width: 60px;
-  position: fixed;
-  top: 0;
-  left: 0;
-  background-color: #fff;
-  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,30 +1 @@
-<div class="d-flex flex-column flex-shrink-0 bg-body-tertiary" id="sidenav">
-  <ul class="nav nav-pills nav-flush flex-column text-center">
-	 	<li><a href="/home" class="nav-link rounded-0 bg-gradient" #menu_home tooltip="Accueil" placement="right" container="body"><i class="fa-solid fa-home"></i></a></li>
-@if (!this.logged) {
-		<li><a href="/login" class="nav-link rounded-0 bg-gradient" #menu_login tooltip="Login" placement="right" container="body"><i class="fa-solid fa-right-to-bracket"></i></a></li>
-}
-@if (this.logged) {		
-		<li><a href="#" class="nav-link rounded-0 bg-gradient" #menu_account tooltip="Compte" placement="right" container="body"><i class="fa-solid fa-user"></i></a></li>
-		<li><a href="#" (click)="signOut()" class="nav-link rounded-0 bg-gradient" #menu_logout tooltip="Logout" placement="right" container="body"><i class="fa-solid fa-right-from-bracket"></i></a></li>
-}
-		<li><a href="#" class="nav-link rounded-0 bg-gradient" #menu_agenda tooltip="Planning" placement="right" container="body"><i class="fa-solid fa-clock"></i></a></li>
-		<li><a href="#" class="nav-link rounded-0 bg-gradient" #menu_webcams tooltip="Caméras" placement="right" container="body"><i class="fa-solid fa-eye"></i></a></li>
-@if (this.logged) {		
-		<li><a href="#" class="nav-link rounded-0 bg-gradient" #menu_chat tooltip="Messagerie" placement="right" container="body"><i class="fa-solid fa-comments"></i></a></li>
-}
-		<li><a href="/participant-list" class="nav-link rounded-0 bg-gradient" #menu_users tooltip="Participants" placement="right" container="body"><i class="fa-solid fa-users"></i></a></li>
-
-		<li><a href="/categorie-list" class="nav-link rounded-0 bg-gradient" #menu_compos tooltip="Catégories" placement="right" container="body"><i class="fa-solid fa-layer-group"></i></a></li>
-		<li><a href="/production-list" class="nav-link rounded-0 bg-gradient" #menu_prods tooltip="Productions" placement="right" container="body"><i class="fa-solid fa-save"></i></a></li>
-
-		<li><a href="#" class="nav-link rounded-0 bg-gradient" #menu_shows tooltip="Présentations" placement="right" container="body"><i class="fa-solid fa-display"></i></a></li>
-		<li><a href="#" class="nav-link rounded-0 bg-gradient" #menu_votes tooltip="Voter" placement="right" container="body"><i class="fa-solid fa-vote-yea"></i></a></li>
-		<li><a href="#" class="nav-link rounded-0 bg-gradient" #menu_results tooltip="Résultats" placement="right" container="body"><i class="fa-solid fa-trophy"></i></a></li>
-
-		<li><a href="/variable-list" class="nav-link rounded-0 bg-gradient" #menu_param tooltip="Paramétrages" placement="right" container="body"><i class="fa-solid fa-sliders-h"></i></a></li>
-	</ul>
-</div>
-<div id="main">
-	<router-outlet></router-outlet>
-</div>
+<router-outlet></router-outlet>

src/app/app.component.ts

@@ -1,11 +1,8 @@
-import { Component, OnInit, ViewChild, ElementRef, Renderer2 } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
-import { FormsModule} from '@angular/forms';
-import { Router } from '@angular/router';  
 import { AccountService } from './services/account.service';  
-import { TooltipModule } from 'ngx-bootstrap/tooltip'; 
 
-@Component({ selector: 'app-root', imports: [RouterOutlet, FormsModule, TooltipModule], templateUrl: './app.component.html', styleUrl: './app.component.css' })
+@Component({ selector: 'app-root', imports: [RouterOutlet], templateUrl: './app.component.html', styleUrl: './app.component.css' })
 
 export class AppComponent implements OnInit 
 {
@@ -13,48 +10,12 @@ export class AppComponent implements OnInit
 
   logged: boolean = false;
 
-  @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;
-
-  constructor(private router: Router, private accountService: AccountService, private renderer: Renderer2) { }  
+  constructor(private accountService: AccountService) { }  
   
   ngOnInit() 
   { 
     this.logged = this.accountService.isLogged(); 
   }
   
-  signOut() 
-  {  
-    this.accountService.signOut();  
-    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.routes.ts

@@ -1,7 +1,10 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
+//import { MenuComponent } from './composants/menu/menu.component';    
 import { HomeComponent } from './composants/home/home.component';    
 import { LoginComponent } from './composants/login/login.component';    
+import { AccountDetailsComponent } from './composants/account-details/account-details.component';
+import { AccountUpdateComponent } from './composants/account-update/account-update.component';
 //import { LoggedGuard } from './guards/logged.guard';    
 import { VariableListComponent } from './composants/variable-list/variable-list.component';
 import { VariableCreateComponent } from './composants/variable-create/variable-create.component';
@@ -23,25 +26,27 @@ import { ProductionUploadComponent } from './composants/production-upload/produc
 
 export const routes: Routes = [  
   {path: '', redirectTo: 'home', pathMatch: 'full'},
-  {path: 'home', component: HomeComponent},
-  {path: 'login', component: LoginComponent},
-  {path: 'variable-list', component: VariableListComponent/*, canActivate: [LoggedGuard]*/},
-  {path: 'variable-create', component: VariableCreateComponent/*, canActivate: [LoggedGuard]*/},
-  {path: 'variable-details/:numeroVariable', component: VariableDetailsComponent/*, canActivate: [LoggedGuard]*/},
-  {path: 'variable-update/:numeroVariable', component: VariableUpdateComponent/*, canActivate: [LoggedGuard]*/},
-  {path: 'categorie-list', component: CategorieListComponent},
-  {path: 'categorie-create', component: CategorieCreateComponent},
-  {path: 'categorie-details/:numeroCategorie', component: CategorieDetailsComponent},
-  {path: 'categorie-update/:numeroCategorie', component: CategorieUpdateComponent},
-  {path: 'participant-list', component: ParticipantListComponent},
-  {path: 'participant-create', component: ParticipantCreateComponent},
-  {path: 'participant-details/:numeroParticipant', component: ParticipantDetailsComponent},
-  {path: 'participant-update/:numeroParticipant', component: ParticipantUpdateComponent},
-  {path: 'production-list', component: ProductionListComponent},
-  {path: 'production-create', component: ProductionCreateComponent},
-  {path: 'production-details/:numeroProduction', component: ProductionDetailsComponent},
-  {path: 'production-update/:numeroProduction', component: ProductionUpdateComponent},
-  {path: 'production-upload/:numeroProduction', component: ProductionUploadComponent},
+  {path: 'home', component: HomeComponent },
+  {path: 'login', component: LoginComponent },
+  {path: 'account-details', component: AccountDetailsComponent },
+  {path: 'account-update', component: AccountUpdateComponent },
+  {path: 'variable-list', component: VariableListComponent /*, canActivate: [LoggedGuard]*/},
+  {path: 'variable-create', component: VariableCreateComponent /*, canActivate: [LoggedGuard]*/},
+  {path: 'variable-details/:numeroVariable', component: VariableDetailsComponent /*, canActivate: [LoggedGuard]*/},
+  {path: 'variable-update/:numeroVariable', component: VariableUpdateComponent /*, canActivate: [LoggedGuard]*/},
+  {path: 'categorie-list', component: CategorieListComponent },
+  {path: 'categorie-create', component: CategorieCreateComponent },
+  {path: 'categorie-details/:numeroCategorie', component: CategorieDetailsComponent },
+  {path: 'categorie-update/:numeroCategorie', component: CategorieUpdateComponent },
+  {path: 'participant-list', component: ParticipantListComponent },
+  {path: 'participant-create', component: ParticipantCreateComponent },
+  {path: 'participant-details/:numeroParticipant', component: ParticipantDetailsComponent },
+  {path: 'participant-update/:numeroParticipant', component: ParticipantUpdateComponent },
+  {path: 'production-list', component: ProductionListComponent },
+  {path: 'production-create', component: ProductionCreateComponent },
+  {path: 'production-details/:numeroProduction', component: ProductionDetailsComponent },
+  {path: 'production-update/:numeroProduction', component: ProductionUpdateComponent },
+  {path: 'production-upload/:numeroProduction', component: ProductionUploadComponent },
 ];
 
 @NgModule({

src/app/composants/account-details/account-details.component.html

@@ -1,3 +1,5 @@
+<app-menu></app-menu>
+<div id="main">
 <div class="card shadow center">
 	<div class="card-header">Fiche d'un participant</div>
 	<div class="card-header shadow-sm">
@@ -186,3 +188,4 @@
 		<button type="button" (click)="updateProfil()" class="btn bg-gradient btn-primary btn-sm"><i class="fa-solid fa-pen"></i>&nbsp;Editer</button>
 	</div>
 </div>
+</div>

src/app/composants/account-details/account-details.component.ts

@@ -1,26 +1,26 @@
 import { Component, OnInit, AfterViewInit } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
-import { AppComponent } from '../../app.component';
+import { Router } from '@angular/router';
+import { MenuComponent } from '../menu/menu.component';
 import { Participant } from '../../interfaces/participant';
 import { AccountService } from '../../services/account.service' 
 import { FormsModule } from '@angular/forms'; 
 
-@Component({ selector: 'app-account-details', imports: [FormsModule], templateUrl: './account-details.component.html', styleUrl: './account-details.component.css' })
+@Component({ selector: 'app-account-details', imports: [FormsModule, MenuComponent], templateUrl: './account-details.component.html', styleUrl: './account-details.component.css' })
 
-export class ParticipantDetailsComponent implements OnInit, AfterViewInit 
+export class AccountDetailsComponent implements OnInit, AfterViewInit 
 {
  
   participant: Participant = new Participant();
   
-  constructor(private accountService : AccountService, private route: ActivatedRoute, private router: Router, private application: AppComponent) { }
+  constructor(private accountService : AccountService, private router: Router) { }
 
-  ngOnInit(): void 
+  ngOnInit() 
   {
     this.participant = new Participant();
     this.accountService.getProfil().subscribe( data => { this.participant = data; });
   }
   
-  ngAfterViewInit() { this.application.menuActivateUsers(); }
+  ngAfterViewInit() { }
  
   updateProfil() { this.router.navigate(['/account-update']); }
   

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

@@ -1,3 +1,5 @@
+<app-menu></app-menu>
+<div id="main">
 <form id="formParticipant" #formRef="ngForm" class="needs-validation">
 <div class="card shadow center">
 	<div class="card-header">Fiche d'un participant</div>
@@ -196,3 +198,4 @@
 		</div>
 	</div>
 </div>
+</div>

src/app/composants/account-update/account-update.component.ts

@@ -1,27 +1,24 @@
 import { Component, OnInit, AfterViewInit, ViewChild } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
-import { AppComponent } from '../../app.component';
+import { Router } from '@angular/router';
+import { MenuComponent } from '../menu/menu.component';
 import { Participant } from '../../interfaces/participant';
 import { AccountService } from '../../services/account.service' 
 import { FormsModule, NgForm } from '@angular/forms'; 
 
-@Component({ selector: 'app-account-update', imports: [FormsModule], templateUrl: './account-update.component.html', styleUrl: './account-update.component.css' })
+@Component({ selector: 'app-account-update', imports: [FormsModule, MenuComponent], templateUrl: './account-update.component.html', styleUrl: './account-update.component.css' })
 
-export class ParticipantUpdateComponent implements OnInit, AfterViewInit
+export class AccountUpdateComponent implements OnInit, AfterViewInit
 {
   
   @ViewChild('formRef') participantForm!: NgForm;
  
   participant: Participant = new Participant();
   
-  constructor(private accountService : AccountService, private route: ActivatedRoute, private router: Router, private application: AppComponent) { }
+  constructor(private accountService : AccountService, private router: Router) { }
 
-  ngOnInit(): void 
-  {
-    this.accountService.getProfil().subscribe(data => { this.participant = data; });
-  }
+  ngOnInit() { this.accountService.getProfil().subscribe(data => { this.participant = data; }); }
   
-  ngAfterViewInit() { this.application.menuActivateUsers(); }
+  ngAfterViewInit() { }
 
   updateConfirmed() { if (this.participantForm.valid) { this.accountService.updateProfil(this.participant).subscribe(() => { this.goToHome(); }); } }
 

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

@@ -1,3 +1,5 @@
+<app-menu></app-menu>
+<div id="main">
 <form  #formRef="ngForm" (ngSubmit)="addCategorie()" class="needs-validation">
 	<div class="card shadow center">
 	<div class="card-header">Fiche d'une catégorie</div>
@@ -76,4 +78,4 @@
 		</div>
 	</div>
 </form>
-
+</div>

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

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

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

@@ -1,3 +1,5 @@
+<app-menu></app-menu>
+<div id="main">
 <div class="card shadow center">
 	<div class="card-header">Fiche d'une catégorie</div>
 	<div class="card-header shadow-sm">
@@ -89,4 +91,4 @@
 		<button type="button" (click)="updateCategorie(categorie.numeroCategorie)" class="btn bg-gradient btn-primary btn-sm"><i class="fa-solid fa-pen"></i>&nbsp;Editer</button>
 	</div>
 </div>
-
+</div>

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

@@ -1,11 +1,11 @@
 import { Component, OnInit, AfterViewInit } from '@angular/core';
-import { AppComponent } from '../../app.component';
+import { MenuComponent } from '../menu/menu.component';
 import { ActivatedRoute, Router } from '@angular/router';
 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' })
+@Component({ selector: 'app-categorie-details', imports: [FormsModule, MenuComponent], templateUrl: './categorie-details.component.html', styleUrl: './categorie-details.component.css' })
 
 export class CategorieDetailsComponent implements OnInit, AfterViewInit 
 {
@@ -14,7 +14,7 @@ export class CategorieDetailsComponent implements OnInit, AfterViewInit
 
   categorie: Categorie = new Categorie();
   
-  constructor(private categorieService: CategorieService, private route: ActivatedRoute, private router: Router, private application: AppComponent) { }
+  constructor(private categorieService: CategorieService, private route: ActivatedRoute, private router: Router) { }
 
   ngOnInit(): void 
   {
@@ -23,7 +23,7 @@ export class CategorieDetailsComponent implements OnInit, AfterViewInit
     this.categorieService.getByIdCategorie(this.numeroCategorie).subscribe( data => { this.categorie = data; });
   }
 
-  ngAfterViewInit() { this.application.menuActivateCompos(); }
+  ngAfterViewInit() { }
  
   updateCategorie(id: number) { this.router.navigate(['/categorie-update', id]); }
   

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

@@ -1,3 +1,5 @@
+<app-menu></app-menu>
+<div id="main">
 <div class="card shadow">
 	<div class="card-header">Table des catégories</div>
 	<div class="card-header shadow-sm">
@@ -35,3 +37,4 @@
 		</table>
 	</div>
 </div>
+</div>

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

@@ -1,21 +1,21 @@
 import { Component, OnInit, AfterViewInit } from '@angular/core';
-import { AppComponent } from '../../app.component';
+import { MenuComponent } from '../menu/menu.component';
 import { Router } from '@angular/router';
 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'})
+@Component({ selector: 'app-categorie-list', imports: [MenuComponent], templateUrl: './categorie-list.component.html', styleUrl: './categorie-list.component.css'})
 
 export class CategorieListComponent implements OnInit, AfterViewInit 
 {
 
   categories: Categorie[] = [];
 
-  constructor(private categorieService: CategorieService, private router: Router, private application: AppComponent) { }
+  constructor(private categorieService: CategorieService, private router: Router) { }
 
   ngOnInit(): void { this.retreiveDatas(); }
 
-  ngAfterViewInit() { this.application.menuActivateCompos(); }
+  ngAfterViewInit() { }
 
   private retreiveDatas() { this.categorieService.getListCategorie().subscribe(data => { this.categories = data; }); }
 

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

@@ -1,3 +1,5 @@
+<app-menu></app-menu>
+<div id="main">
 <form id="formVariable" #formRef="ngForm" class="needs-validation">
 <div class="card shadow center">
 	<div class="card-header">Fiche d'une catégorie</div>
@@ -121,4 +123,4 @@
 		</div>
 	</div>
 </div>
-
+</div>

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

@@ -1,11 +1,11 @@
 import { Component, OnInit, AfterViewInit, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { AppComponent } from '../../app.component';
+import { MenuComponent } from '../menu/menu.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' })
+@Component({ selector: 'app-categorie-update', imports: [FormsModule, MenuComponent], templateUrl: './categorie-update.component.html', styleUrl: './categorie-update.component.css' })
 
 export class CategorieUpdateComponent implements OnInit, AfterViewInit
 {
@@ -15,7 +15,7 @@ export class CategorieUpdateComponent implements OnInit, AfterViewInit
   
   categorie: Categorie = new Categorie();
   
-  constructor(private categorieService: CategorieService, private route: ActivatedRoute, private router: Router, private application: AppComponent) { }
+  constructor(private categorieService: CategorieService, private route: ActivatedRoute, private router: Router) { }
 
   ngOnInit(): void 
   {
@@ -23,7 +23,7 @@ export class CategorieUpdateComponent implements OnInit, AfterViewInit
     this.categorieService.getByIdCategorie(this.numeroCategorie).subscribe(data => { this.categorie = data; });
   }
 
-  ngAfterViewInit() { this.application.menuActivateCompos(); }
+  ngAfterViewInit() { }
 
   updateConfirmed() { if (this.categorieForm.valid) { this.categorieService.updateCategorie(this.numeroCategorie, this.categorie).subscribe(() => { this.goToListCategorie(); }); } }
 

src/app/composants/home/home.component.html

@@ -1,3 +1,5 @@
+<app-menu></app-menu>
+<div id="main">
 <div class="center" style="min-width: 30rem;">
 
 <p class="fs-2 text-center">Bienvenue @if (this.logged) { {{ this.pseudonyme }} }</p>
@@ -11,5 +13,5 @@
 
 @if (!this.logged) { <div class="alert alert-info" role="alert">Merci de vous <a href="/login">connecter</a> pour accéder à plus de fonctionnalités.</div> }
 
-
-</div>
+</div>
+</div>

src/app/composants/home/home.component.ts

@@ -1,10 +1,10 @@
 import { Component, OnInit, AfterViewInit } from '@angular/core';
-import { AppComponent } from '../../app.component';
+import { MenuComponent } from '../menu/menu.component';
 import { Message } from '../../interfaces/divers';
 import { AccountService } from '../../services/account.service' 
 import { DiversService } from '../../services/divers.service' 
 
-@Component({ selector: 'app-home', imports: [], templateUrl: './home.component.html', styleUrl: './home.component.css' })
+@Component({ selector: 'app-home', imports: [MenuComponent], templateUrl: './home.component.html', styleUrl: './home.component.css' })
 
 export class HomeComponent implements OnInit, AfterViewInit 
 {
@@ -13,7 +13,7 @@ export class HomeComponent implements OnInit, AfterViewInit
   pseudonyme: string = "";
   message: Message = new Message();
   
-  constructor(private diversService: DiversService, private accountService: AccountService, private application: AppComponent) { }
+  constructor(private diversService: DiversService, private accountService: AccountService) { }
   
   ngOnInit() 
   { 
@@ -24,6 +24,6 @@ export class HomeComponent implements OnInit, AfterViewInit
     this.diversService.getMessage().subscribe(data => { this.message = data; });
   } 
   
-  ngAfterViewInit() { this.application.menuActivateHome(); }
+  ngAfterViewInit() { }
 
 }

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

@@ -1,4 +1,5 @@
-
+<app-menu></app-menu>
+<div id="main">
 <form #formRef="ngForm" (ngSubmit)="connexion()" class="needs-validation">
 	<div class="card shadow center" style="min-width: 30rem;">
 		<div class="card-header">S'identifier</div>
@@ -24,3 +25,4 @@
 		</div>
 	</div>
 </form>
+</div>

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

@@ -1,11 +1,11 @@
 import { Component, OnInit, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
 import { Router } from '@angular/router';  
-import { AppComponent } from '../../app.component';
+import { MenuComponent } from '../menu/menu.component';
 import { User } from '../../interfaces/user';  
 import { AccountService } from '../../services/account.service' 
 import { FormsModule, NgForm, NgModel } from '@angular/forms'; 
 
-@Component({ selector: 'app-login', imports: [FormsModule], templateUrl: './login.component.html', styleUrl: './login.component.css' })
+@Component({ selector: 'app-login', imports: [FormsModule, MenuComponent], templateUrl: './login.component.html', styleUrl: './login.component.css' })
 
 export class LoginComponent implements OnInit, AfterViewInit
 {
@@ -16,18 +16,17 @@ export class LoginComponent implements OnInit, AfterViewInit
 
   identifiants: User = new User();
  
-  constructor(private router : Router, private accountService : AccountService, private application: AppComponent) { }
+  constructor(private router : Router, private accountService : AccountService) { }
   
   ngOnInit() { } 
   
-  ngAfterViewInit() { this.application.menuActivateLogin(); }
- 
+  ngAfterViewInit() { }
+
   connexion()
   {  
     if (this.loginForm.valid) 
     {
-      this.accountService.signIn(this.identifiants).subscribe(data => { this.identifiants = data; if (this.identifiants.username === "") { this.userFieldf.nativeElement.focus(); } }); 
-      // if ok then this.router.navigate(['/']);  
+      this.accountService.signIn(this.identifiants).subscribe(data => { this.identifiants = data; if (this.identifiants.username === "") { this.userFieldf.nativeElement.focus(); } else if (this.identifiants.password === "<success@auth>") { this.router.navigate(['/']); } }); 
     }
   } 
   

src/app/composants/menu/menu.component.css

@@ -0,0 +1,21 @@
+#sidenav {
+  height: 100%;
+  width: 60px;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background-color: #fff;
+  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; }
+}

src/app/composants/menu/menu.component.html

@@ -0,0 +1,76 @@
+@if (!this.logged) {
+
+<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 routerLink="/home" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" tooltip="Accueil" placement="right" container="body"><i class="fa-solid fa-home"></i></a></li>
+		<li><a routerLink="/login" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" tooltip="Login" placement="right" container="body"><i class="fa-solid fa-right-to-bracket"></i></a></li>
+		<li><a routerLink="/event-list" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" tooltip="Planning" placement="right" container="body"><i class="fa-solid fa-clock"></i></a></li>
+		<li><a routerLink="/webcam-list" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" tooltip="Caméras" placement="right" container="body"><i class="fa-solid fa-eye"></i></a></li>
+	</ul>
+</div>
+
+} @else if (this.logged && (this.role === "USER")) {		
+
+<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 routerLink="/home" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" tooltip="Accueil" placement="right" container="body"><i class="fa-solid fa-home"></i></a></li>
+		<li><a routerLink="/account-details" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" tooltip="Compte" placement="right" container="body"><i class="fa-solid fa-user"></i></a></li>
+		<li><a (click)="signOut()" class="nav-link rounded-0 bg-gradient" tooltip="Logout" placement="right" container="body"><i class="fa-solid fa-right-from-bracket"></i></a></li>
+		<li><a routerLink="/event-list" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" tooltip="Planning" placement="right" container="body"><i class="fa-solid fa-clock"></i></a></li>
+		<li><a routerLink="/webcam-list" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" tooltip="Caméras" placement="right" container="body"><i class="fa-solid fa-eye"></i></a></li>
+		
+		<li><a routerLink="/chat" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" tooltip="Messagerie" placement="right" container="body"><i class="fa-solid fa-comments"></i></a></li>
+		
+		<li><a routerLink="/production-list" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" tooltip="Productions" placement="right" container="body"><i class="fa-solid fa-save"></i></a></li>
+
+		<li><a routerLink="/vote-list" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" tooltip="Voter" placement="right" container="body"><i class="fa-solid fa-vote-yea"></i></a></li>
+		<li><a routerLink="/result-list" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" tooltip="Résultats" placement="right" container="body"><i class="fa-solid fa-trophy"></i></a></li>
+
+	</ul>
+</div>
+
+} @else if (this.logged && (this.role === "ORGA")) {		
+
+<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 routerLink="/home" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" tooltip="Accueil" placement="right" container="body"><i class="fa-solid fa-home"></i></a></li>
+		<li><a routerLink="/account-details" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" tooltip="Compte" placement="right" container="body"><i class="fa-solid fa-user"></i></a></li>
+		<li><a (click)="signOut()" class="nav-link rounded-0 bg-gradient" tooltip="Logout" placement="right" container="body"><i class="fa-solid fa-right-from-bracket"></i></a></li>
+		<li><a routerLink="/event-list" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" tooltip="Planning" placement="right" container="body"><i class="fa-solid fa-clock"></i></a></li>
+		<li><a routerLink="/webcam-list" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" tooltip="Caméras" placement="right" container="body"><i class="fa-solid fa-eye"></i></a></li>
+		
+		<li><a routerLink="/chat" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" tooltip="Messagerie" placement="right" container="body"><i class="fa-solid fa-comments"></i></a></li>
+		
+		<li><a routerLink="/participant-list" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" tooltip="Participants" placement="right" container="body"><i class="fa-solid fa-users"></i></a></li>
+		
+		<li><a routerLink="/production-list" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" tooltip="Productions" placement="right" container="body"><i class="fa-solid fa-save"></i></a></li>
+		<li><a routerLink="/vote-list" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" tooltip="Voter" placement="right" container="body"><i class="fa-solid fa-vote-yea"></i></a></li>
+		<li><a routerLink="/result-list" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" tooltip="Résultats" placement="right" container="body"><i class="fa-solid fa-trophy"></i></a></li>
+	</ul>
+</div>
+
+} @else if (this.logged && (this.role === "ADMIN")) {		
+
+<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 routerLink="/home" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" tooltip="Accueil" placement="right" container="body"><i class="fa-solid fa-home"></i></a></li>
+		<li><a routerLink="/account-details" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" tooltip="Compte" placement="right" container="body"><i class="fa-solid fa-user"></i></a></li>
+		<li><a (click)="signOut()" class="nav-link rounded-0 bg-gradient" tooltip="Logout" placement="right" container="body"><i class="fa-solid fa-right-from-bracket"></i></a></li>
+		<li><a routerLink="/event-list" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" tooltip="Planning" placement="right" container="body"><i class="fa-solid fa-clock"></i></a></li>
+		<li><a routerLink="/webcam-list" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" tooltip="Caméras" placement="right" container="body"><i class="fa-solid fa-eye"></i></a></li>
+		
+		<li><a routerLink="/chat" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" tooltip="Messagerie" placement="right" container="body"><i class="fa-solid fa-comments"></i></a></li>
+		
+		<li><a routerLink="/participant-list" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" tooltip="Participants" placement="right" container="body"><i class="fa-solid fa-users"></i></a></li>
+		
+		<li><a routerLink="/categorie-list" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" tooltip="Catégories" placement="right" container="body"><i class="fa-solid fa-layer-group"></i></a></li>
+		<li><a routerLink="/production-list" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" tooltip="Productions" placement="right" container="body"><i class="fa-solid fa-save"></i></a></li>
+		<li><a routerLink="/show-list" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" tooltip="Présentations" placement="right" container="body"><i class="fa-solid fa-display"></i></a></li>
+		<li><a routerLink="/poll-list" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" tooltip="Voter" placement="right" container="body"><i class="fa-solid fa-vote-yea"></i></a></li>
+		<li><a routerLink="/result-list" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" tooltip="Résultats" placement="right" container="body"><i class="fa-solid fa-trophy"></i></a></li>
+		
+		<li><a routerLink="/variable-list" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" tooltip="Paramétrages" placement="right" container="body"><i class="fa-solid fa-sliders-h"></i></a></li>
+	</ul>
+</div>
+
+}

src/app/composants/menu/menu.component.ts

@@ -0,0 +1,27 @@
+import { Injectable, Component, OnInit } from '@angular/core';
+import { Router, RouterLink, RouterLinkActive } from '@angular/router';
+import { AccountService } from '../../services/account.service';  
+import { TooltipModule } from 'ngx-bootstrap/tooltip'; 
+
+@Component({ selector: 'app-menu', imports: [TooltipModule, RouterLink, RouterLinkActive], templateUrl: './menu.component.html', styleUrl: './menu.component.css' })
+
+@Injectable({ providedIn: 'root' })
+
+export class MenuComponent implements OnInit 
+{
+
+  logged: boolean = false;
+  
+  role: String = "";
+
+  constructor(private router: Router, private accountService: AccountService) {  }  
+  
+  ngOnInit() 
+  { 
+    this.logged = this.accountService.isLogged(); 
+    this.role = this.accountService.getRole();
+  }
+  
+  signOut() { this.accountService.signOut(); this.router.navigate(['/home']); } 
+  
+}

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

@@ -1,3 +1,5 @@
+<app-menu></app-menu>
+<div id="main">
 <form #formRef="ngForm" (ngSubmit)="addParticipant()" class="needs-validation">
 	<div class="card shadow center">
 		<div class="card-header">Fiche d'un participant</div>
@@ -202,3 +204,4 @@
 		</div>
 	</div>
 </form>
+</div>

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

@@ -1,11 +1,11 @@
 import { Component, OnInit, AfterViewInit, ViewChild } from '@angular/core';
-import { AppComponent } from '../../app.component';
+import { MenuComponent } from '../menu/menu.component';
 import { Participant, ParticipantEnum, ParticipantStatutList, ParticipantModePaiementList } from '../../interfaces/participant';
 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' })
+@Component({ selector: 'app-participant-create', imports: [FormsModule, MenuComponent], templateUrl: './participant-create.component.html', styleUrl: './participant-create.component.css' })
 
 export class ParticipantCreateComponent implements OnInit, AfterViewInit
 {
@@ -17,11 +17,11 @@ export class ParticipantCreateComponent implements OnInit, AfterViewInit
   
   participant: Participant = new Participant();
   
-  constructor(private participantService: ParticipantService, private router: Router, private application: AppComponent) { }
+  constructor(private participantService: ParticipantService, private router: Router) { }
 
   ngOnInit(): void { }
   
-  ngAfterViewInit() { this.application.menuActivateUsers(); }
+  ngAfterViewInit() { }
 
   private saveParticipant() { this.participantService.createParticipant(this.participant).subscribe({ next: () => { this.goToListParticipant(); }, error: (err: any) => { console.log(err); }, complete: () => { } }); }
 

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

@@ -1,3 +1,5 @@
+<app-menu></app-menu>
+<div id="main">
 <div class="card shadow center">
 	<div class="card-header">Fiche d'un participant</div>
 	<div class="card-header shadow-sm">
@@ -215,3 +217,4 @@
 		<button type="button" (click)="updateParticipant(participant.numeroParticipant)" class="btn bg-gradient btn-primary btn-sm"><i class="fa-solid fa-pen"></i>&nbsp;Editer</button>
 	</div>
 </div>
+</div>

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

@@ -1,11 +1,11 @@
 import { Component, OnInit, AfterViewInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { AppComponent } from '../../app.component';
+import { MenuComponent } from '../menu/menu.component';
 import { Participant, ParticipantEnum, ParticipantStatutList, 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' })
+@Component({ selector: 'app-participant-details', imports: [FormsModule, MenuComponent], templateUrl: './participant-details.component.html', styleUrl: './participant-details.component.css' })
 
 export class ParticipantDetailsComponent implements OnInit, AfterViewInit 
 {
@@ -17,7 +17,7 @@ export class ParticipantDetailsComponent implements OnInit, AfterViewInit
 
   participant: Participant = new Participant();
   
-  constructor(private participantService: ParticipantService, private route: ActivatedRoute, private router: Router, private application: AppComponent) { }
+  constructor(private participantService: ParticipantService, private route: ActivatedRoute, private router: Router) { }
 
   ngOnInit(): void 
   {
@@ -26,7 +26,7 @@ export class ParticipantDetailsComponent implements OnInit, AfterViewInit
     this.participantService.getByIdParticipant(this.numeroParticipant).subscribe( data => { this.participant = data; });
   }
   
-  ngAfterViewInit() { this.application.menuActivateUsers(); }
+  ngAfterViewInit() { }
  
   updateParticipant(id: number) { this.router.navigate(['/participant-update', id]); }
   

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

@@ -1,3 +1,5 @@
+<app-menu></app-menu>
+<div id="main">
 <div class="card shadow">
 	<div class="card-header">Table des participants</div>
 	<div class="card-header shadow-sm">
@@ -46,3 +48,4 @@
 		</table>
 	</div>
 </div>
+</div>

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

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

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

@@ -1,3 +1,5 @@
+<app-menu></app-menu>
+<div id="main">
 <form id="formParticipant" #formRef="ngForm" class="needs-validation">
 <div class="card shadow center">
 	<div class="card-header">Fiche d'un participant</div>
@@ -248,3 +250,4 @@
 		</div>
 	</div>
 </div>
+</div>

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

@@ -1,11 +1,11 @@
 import { Component, OnInit, AfterViewInit, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { AppComponent } from '../../app.component';
+import { MenuComponent } from '../menu/menu.component';
 import { Participant, ParticipantEnum, ParticipantStatutList, 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' })
+@Component({ selector: 'app-participant-update', imports: [FormsModule, MenuComponent], templateUrl: './participant-update.component.html', styleUrl: './participant-update.component.css' })
 
 export class ParticipantUpdateComponent implements OnInit, AfterViewInit
 {
@@ -19,7 +19,7 @@ export class ParticipantUpdateComponent implements OnInit, AfterViewInit
   
   participant: Participant = new Participant();
   
-  constructor(private participantService: ParticipantService, private route: ActivatedRoute, private router: Router, private application: AppComponent) { }
+  constructor(private participantService: ParticipantService, private route: ActivatedRoute, private router: Router) { }
 
   ngOnInit(): void 
   {
@@ -27,7 +27,7 @@ export class ParticipantUpdateComponent implements OnInit, AfterViewInit
     this.participantService.getByIdParticipant(this.numeroParticipant).subscribe(data => { this.participant = data; });
   }
   
-  ngAfterViewInit() { this.application.menuActivateUsers(); }
+  ngAfterViewInit() { }
 
   updateConfirmed() { if (this.participantForm.valid) { this.participantService.updateParticipant(this.numeroParticipant, this.participant).subscribe(() => { this.goToListParticipant(); }); } }
 

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

@@ -1,3 +1,5 @@
+<app-menu></app-menu>
+<div id="main">
 <form #formRef="ngForm" (ngSubmit)="addProduction()" class="needs-validation">
 	<div class="card shadow center">
 		<div class="card-header">Fiche d'une production</div>
@@ -92,3 +94,4 @@
 		</div>
 	</div>
 </form>
+</div>

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

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

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

@@ -1,3 +1,5 @@
+<app-menu></app-menu>
+<div id="main">
 <div class="card shadow center">
 	<div class="card-header">Fiche d'une production</div>
 	<div class="card-header shadow-sm">
@@ -101,3 +103,4 @@
 		<button type="button" (click)="updateProduction(production.numeroProduction)" class="btn bg-gradient btn-primary btn-sm"><i class="fa-solid fa-pen"></i>&nbsp;Editer</button>
 	</div>
 </div>
+</div>

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

@@ -1,11 +1,11 @@
 import { Component, OnInit, AfterViewInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { AppComponent } from '../../app.component';
+import { MenuComponent } from '../menu/menu.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' })
+@Component({ selector: 'app-production-details', imports: [FormsModule, MenuComponent], templateUrl: './production-details.component.html', styleUrl: './production-details.component.css' })
 
 export class ProductionDetailsComponent implements OnInit, AfterViewInit
 {
@@ -16,7 +16,7 @@ export class ProductionDetailsComponent implements OnInit, AfterViewInit
   
   production: ProductionShort = new ProductionShort();
   
-  constructor(private productionService: ProductionService, private route: ActivatedRoute, private router: Router, private application: AppComponent) { }
+  constructor(private productionService: ProductionService, private route: ActivatedRoute, private router: Router) { }
 
   ngOnInit(): void 
   { 
@@ -25,7 +25,7 @@ export class ProductionDetailsComponent implements OnInit, AfterViewInit
     this.productionService.getByIdProduction(this.numeroProduction).subscribe( data => { this.production = data; });
   }
   
-  ngAfterViewInit() { this.application.menuActivateProds(); }
+  ngAfterViewInit() { }
 
   updateArchive(id: number) { this.router.navigate(['/production-upload', id]); }
   

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

@@ -1,3 +1,5 @@
+<app-menu></app-menu>
+<div id="main">
 <div class="card shadow rounded-bottom-0">
 	<div class="card-header">Liste des productions</div>
 	<div class="card-header">
@@ -30,3 +32,4 @@
 		</div>
 	}
 </div>
+</div>

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

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

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

@@ -1,3 +1,5 @@
+<app-menu></app-menu>
+<div id="main">
 <form id="formProduction" #formRef="ngForm" class="needs-validation">
 	<div class="card shadow center">
 		<div class="card-header">Fiche d'une production</div>
@@ -130,3 +132,4 @@
 		</div>
 	</div>
 </div>
+</div>

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

@@ -1,13 +1,13 @@
 import { Component, OnInit, AfterViewInit, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { AppComponent } from '../../app.component';
+import { MenuComponent } from '../menu/menu.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' })
+@Component({ selector: 'app-production-update', imports: [FormsModule, MenuComponent], templateUrl: './production-update.component.html', styleUrl: './production-update.component.css' })
 
 export class ProductionUpdateComponent implements OnInit, AfterViewInit
 {
@@ -22,7 +22,7 @@ export class ProductionUpdateComponent implements OnInit, AfterViewInit
   
   numeroProduction: number = 0;
 
-  constructor(private productionService: ProductionService, private participantService: ParticipantService, private route: ActivatedRoute, private router: Router, private application: AppComponent) { }
+  constructor(private productionService: ProductionService, private participantService: ParticipantService, private route: ActivatedRoute, private router: Router) { }
 
   ngOnInit(): void 
   { 
@@ -31,7 +31,7 @@ export class ProductionUpdateComponent implements OnInit, AfterViewInit
     this.productionService.getByIdProduction(this.numeroProduction).subscribe(data => { this.production = data; });
   }
   
-  ngAfterViewInit() { this.application.menuActivateProds(); }
+  ngAfterViewInit() { }
 
   private retreiveParticipants() { this.participantService.getOptionListParticipant().subscribe(data => { this.participants = data; }); }
 

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

@@ -1,3 +1,5 @@
+<app-menu></app-menu>
+<div id="main">
 <form #formRef="ngForm" (ngSubmit)="addProductionFile()" class="needs-validation">
 	<div class="card shadow center">
 		<div class="card-header">Changement de l'archive d'une production</div>
@@ -26,3 +28,4 @@
 		</div>
 	</div>
 </form>
+</div>

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

@@ -1,11 +1,11 @@
 import { Component, OnInit, AfterViewInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { AppComponent } from '../../app.component';
+import { MenuComponent } from '../menu/menu.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' })
+@Component({ selector: 'app-production-upload', imports: [FormsModule, MenuComponent], templateUrl: './production-upload.component.html', styleUrl: './production-upload.component.css' })
 
 export class ProductionUploadComponent implements OnInit, AfterViewInit
 {
@@ -14,7 +14,7 @@ export class ProductionUploadComponent implements OnInit, AfterViewInit
   
   numeroProduction: number = 0;
 
-  constructor(private productionService: ProductionService, private route: ActivatedRoute, private router: Router, private application: AppComponent) { }
+  constructor(private productionService: ProductionService, private route: ActivatedRoute, private router: Router) { }
 
   ngOnInit(): void 
   { 
@@ -22,7 +22,7 @@ export class ProductionUploadComponent implements OnInit, AfterViewInit
     this.productionService.getByIdProductionFile(this.numeroProduction).subscribe(data => { this.production = data; });
   }
   
-  ngAfterViewInit() { this.application.menuActivateProds(); }
+  ngAfterViewInit() { }
 
   onArchiveSelected(event: any) 
   { 

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

@@ -1,3 +1,5 @@
+<app-menu></app-menu>
+<div id="main">
 <form #formRef="ngForm" (ngSubmit)="addVariable()" class="needs-validation">
 	<div class="card shadow center">
 		<div class="card-header">Fiche d'une variable</div>
@@ -40,3 +42,4 @@
 		</div>
 	</div>
 </form>
+</div>

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

@@ -1,11 +1,11 @@
 import { Component, OnInit, AfterViewInit, ViewChild } from '@angular/core';
-import { AppComponent } from '../../app.component';
 import { Router } from '@angular/router';
 import { Variable } from '../../interfaces/variable';
 import { VariableService } from '../../services/variable.service';
+import { MenuComponent } from '../menu/menu.component';
 import { FormsModule, NgForm, NgModel } from '@angular/forms'; 
 
-@Component({ selector: 'app-variable-create', imports: [FormsModule], templateUrl: './variable-create.component.html', styleUrl: './variable-create.component.css' })
+@Component({ selector: 'app-variable-create', imports: [FormsModule, MenuComponent], templateUrl: './variable-create.component.html', styleUrl: './variable-create.component.css' })
 
 export class VariableCreateComponent implements OnInit, AfterViewInit
 {
@@ -16,11 +16,11 @@ export class VariableCreateComponent implements OnInit, AfterViewInit
   
   variable: Variable = new Variable();
   
-  constructor(private variableService: VariableService, private router: Router, private application: AppComponent) { }
+  constructor(private variableService: VariableService, private router: Router) { }
 
   ngOnInit(): void { }
   
-  ngAfterViewInit() { this.application.menuActivateParams(); }
+  ngAfterViewInit() { }
 
   private saveVariable() { this.variableService.createVariable(this.variable).subscribe({ next: () => { this.goToListVariable(); }, error: (err: any) => { console.log(err); }, complete: () => { } }); }
 

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

@@ -1,3 +1,5 @@
+<app-menu></app-menu>
+<div id="main">
 <div class="card shadow center">
   <div class="card-header">Fiche d'une variable</div>
 	<div class="card-header shadow-sm">
@@ -53,3 +55,4 @@
 		<button type="button" (click)="updateVariable(variable.numeroVariable)" class="btn bg-gradient btn-primary btn-sm"><i class="fa-solid fa-pen"></i>&nbsp;Editer</button>
 	</div>
 </div>
+</div>

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

@@ -1,11 +1,11 @@
 import { Component, OnInit, AfterViewInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { AppComponent } from '../../app.component';
+import { MenuComponent } from '../menu/menu.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' })
+@Component({ selector: 'app-variable-details', imports: [FormsModule, MenuComponent], templateUrl: './variable-details.component.html', styleUrl: './variable-details.component.css' })
 
 export class VariableDetailsComponent implements OnInit, AfterViewInit
 {
@@ -14,7 +14,7 @@ export class VariableDetailsComponent implements OnInit, AfterViewInit
 
   variable: Variable = new Variable();
   
-  constructor(private variableService: VariableService, private route: ActivatedRoute, private router: Router, private application: AppComponent) { }
+  constructor(private variableService: VariableService, private route: ActivatedRoute, private router: Router) { }
 
   ngOnInit(): void 
   {
@@ -23,7 +23,7 @@ export class VariableDetailsComponent implements OnInit, AfterViewInit
     this.variableService.getByIdVariable(this.numeroVariable).subscribe( data => { this.variable = data; });
   }
   
-  ngAfterViewInit() { this.application.menuActivateParams(); }
+  ngAfterViewInit() { }
  
   updateVariable(id: number) { this.router.navigate(['/variable-update', id]); }
   

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

@@ -1,3 +1,5 @@
+<app-menu></app-menu>
+<div id="main">
 <div class="card shadow">
 	<div class="card-header">Table des variables</div>
 	<div class="card-header shadow-sm">
@@ -6,8 +8,8 @@
 				<button type="button" (click)="goToRefreshListVariable()" class="btn bg-gradient btn-primary btn-sm field-separate" style="margin-right: 5px;"><i class="fa-solid fa-rotate"></i>&nbsp;Actualiser</button>
 				<button type="button" (click)="goToNewVariable()" class="btn bg-gradient btn-primary btn-sm field-separate" style="margin-right: 5px;"><i class="fa-solid fa-plus"></i>&nbsp;Créer</button>
 			</div>
-			<div class="form-group col-sm-8">
-        <select class="form-select form-select-sm field-separate" (change)="filtrageParType($event)">
+			<div class="form-group col-sm-2">
+        <select class="form-select form-select-sm field-separate" id="select_type" (change)="filtrageParType($event)">
 					<option selected> </option>
           @for (type of types; track type) {
 					<option [value]="type.type">{{ type.type }}</option>
@@ -36,4 +38,5 @@
 			</tbody>
 		</table>
 	</div>
+</div>
 </div>

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

@@ -1,10 +1,10 @@
 import { Component, OnInit, AfterViewInit } from '@angular/core';
 import { Router } from '@angular/router';
-import { AppComponent } from '../../app.component';
+import { MenuComponent } from '../menu/menu.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' })
+@Component({ selector: 'app-variable-list', imports: [MenuComponent], templateUrl: './variable-list.component.html', styleUrl: './variable-list.component.css' })
 
 export class VariableListComponent implements OnInit, AfterViewInit
 {
@@ -13,11 +13,11 @@ export class VariableListComponent implements OnInit, AfterViewInit
   
   variables: Variable[] = [];
 
-  constructor(private variableService: VariableService, private router: Router, private application: AppComponent) { }
+  constructor(private variableService: VariableService, private router: Router) { }
 
   ngOnInit(): void { this.retreiveDatas(); this.retreiveParticipants(); }
   
-  ngAfterViewInit() { this.application.menuActivateParams(); }
+  ngAfterViewInit() { }
 
   private retreiveDatas() { this.variableService.getListVariable().subscribe(data => { this.variables = data; }); }
   private retreiveParticipants() { this.variableService.getOptionListVariableType().subscribe(data => { this.types = data; }); }

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

@@ -1,3 +1,5 @@
+<app-menu></app-menu>
+<div id="main">
 <form id="formVariable" #formRef="ngForm" class="needs-validation">
 	<div class="card shadow center">
 		<div class="card-header">Fiche d'une variable</div>
@@ -86,3 +88,4 @@
 		</div>
 	</div>
 </div>
+</div>

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

@@ -1,11 +1,11 @@
 import { Component, OnInit, AfterViewInit, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { AppComponent } from '../../app.component';
+import { MenuComponent } from '../menu/menu.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' })
+@Component({ selector: 'app-variable-update', imports: [FormsModule, MenuComponent], templateUrl: './variable-update.component.html', styleUrl: './variable-update.component.css' })
 
 export class VariableUpdateComponent implements OnInit, AfterViewInit
 {
@@ -16,7 +16,7 @@ export class VariableUpdateComponent implements OnInit, AfterViewInit
   
   variable: Variable = new Variable();
   
-  constructor(private variableService: VariableService, private route: ActivatedRoute, private router: Router, private application: AppComponent) { }
+  constructor(private variableService: VariableService, private route: ActivatedRoute, private router: Router) { }
 
   ngOnInit(): void 
   {
@@ -24,7 +24,7 @@ export class VariableUpdateComponent implements OnInit, AfterViewInit
     this.variableService.getByIdVariable(this.numeroVariable).subscribe(data => { this.variable = data; });
   }
   
-  ngAfterViewInit() { this.application.menuActivateParams(); }
+  ngAfterViewInit() { }
 
   updateConfirmed() { if (this.variableForm.valid) { this.variableService.updateVariable(this.numeroVariable, this.variable).subscribe(() => { this.goToListVariable(); }); } }
 

src/app/services/account.service.ts

@@ -1,5 +1,4 @@
 import { Injectable } from '@angular/core';
-import { Router } from '@angular/router';
 import { HttpClient } from '@angular/common/http';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
@@ -20,7 +19,7 @@ export class AccountService
   
   public user: Observable<User | null>;
 
-  constructor(private router: Router, private httpClient: HttpClient)
+  constructor(private httpClient: HttpClient)
   {
     this.userSubject = new BehaviorSubject(JSON.parse(localStorage.getItem('user')!));
     this.user = this.userSubject.asObservable();
@@ -28,12 +27,11 @@ export class AccountService
 
   public isLogged() { if (this.userSubject.value) { return true; } return false; }
   public getUsername() { if (this.userSubject.value) { return this.userSubject.value.username; } return ""; }
+  public getRole() { if (this.userSubject.value) { return this.userSubject.value.role; } return ""; }
   
-  signIn(user: User): Observable<User>
+  signIn(usr: User): Observable<User>
   {
-    return this.httpClient.post<User>(`${this.baseURLsig}/in`, user);
-    
-    //return this.httpClient.post<User>(`${this.baseURLlog}/in`, user).pipe(map(u => { alert(u); localStorage.setItem('user', JSON.stringify(u)); this.userSubject.next(u); return u; }));
+    return this.httpClient.post<User>(`${this.baseURLsig}/in`, usr).pipe(map(u => { localStorage.setItem('user', JSON.stringify(u)); this.userSubject.next(u); return u; }));
   }
 
   signOut() 
@@ -46,7 +44,7 @@ export class AccountService
 
   getListArrives(): Observable<User[]> { return this.httpClient.get<User[]>(`${this.baseURLsig}/list`); }
 
-  getProfil(): Observable<Participant>{ return this.httpClient.get<Participant>(`${this.baseURLacc}/form}`); }
+  getProfil(): Observable<Participant>{ return this.httpClient.get<Participant>(`${this.baseURLacc}/form`); }
 
   updateProfil(participant: Participant): Observable<Object>{ return this.httpClient.put(`${this.baseURLacc}/update`, participant); }
 

src/styles.css

@@ -15,3 +15,12 @@
   .center { position: absolute; left: 50%; top: 0; transform: translate(-50%, 0%); min-width: 50rem; }
   .scrollable { overflow-y: unset; overflow-x: unset; max-height: unset; }
 }
+
+#main {
+  margin-left: 60px; 
+  padding: 0px 10px;
+}
+
+@media screen and (max-width: 500px) {
+  #main { margin-left: 0; }
+}