dev en cours

angular.json

@@ -33,7 +33,8 @@
               ],
             "scripts": [
               "node_modules/jquery/dist/jquery.min.js",
-              "node_modules/bootstrap/dist/js/bootstrap.min.js"]
+              "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
+              ]
           },
           "configurations": {
             "production": {

package-lock.json

@@ -18,9 +18,11 @@
         "@angular/router": "^19.1.0",
         "@fortawesome/fontawesome-free": "^6.7.2",
         "@ng-select/ng-select": "^14.2.2",
+        "@popperjs/core": "^2.11.8",
         "bootstrap": "^5.3.3",
         "file-saver": "^2.0.5",
         "jquery": "^3.7.1",
+        "popper.js": "^1.16.1",
         "rxjs": "~7.8.0",
         "tslib": "^2.3.0",
         "zone.js": "~0.15.0"
@@ -4434,7 +4436,6 @@
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
       "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
       "license": "MIT",
-      "peer": true,
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/popperjs"
@@ -11386,6 +11387,17 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/popper.js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
+      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
+      "deprecated": "You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.4.49",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz",

package.json

@@ -20,9 +20,11 @@
     "@angular/router": "^19.1.0",
     "@fortawesome/fontawesome-free": "^6.7.2",
     "@ng-select/ng-select": "^14.2.2",
+    "@popperjs/core": "^2.11.8",
     "bootstrap": "^5.3.3",
     "file-saver": "^2.0.5",
     "jquery": "^3.7.1",
+    "popper.js": "^1.16.1",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.15.0"

src/app/app.component.css

@@ -0,0 +1,18 @@
+body {
+  min-height: 100vh;
+  min-height: -webkit-fill-available;
+}
+
+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; }

src/app/app.component.html

@@ -1,3 +1,31 @@
-<div class = "container">
-    <router-outlet></router-outlet>
+<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>
+</main>

src/app/app.component.ts

@@ -2,13 +2,17 @@ import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import { FormsModule} from '@angular/forms';
 
-@Component({
-  selector: 'app-root',
-  imports: [RouterOutlet, FormsModule],
-  templateUrl: './app.component.html',
-  styleUrl: './app.component.css'
-})
-
-export class AppComponent {
+declare var $: any;
+
+@Component({ selector: 'app-root', imports: [RouterOutlet, FormsModule], templateUrl: './app.component.html', styleUrl: './app.component.css' })
+
+export class AppComponent 
+{
   title = 'demovote';
+
+  ngOnInit() 
+  {
+    $(document).ready(function() { $('[data-bs-toggle="tooltip"]').tooltip();});
+  }
+
 }

src/app/app.routes.ts

@@ -19,7 +19,7 @@ import { ProductionUpdateComponent } from './production-update/production-update
 import { ProductionUploadComponent } from './production-upload/production-upload.component';
 
 export const routes: Routes = [  
-  {path: '', redirectTo: 'variable-list', pathMatch: 'full'},
+  {path: '', redirectTo: 'production-list', pathMatch: 'full'},
   {path: 'variable-list', component: VariableListComponent},
   {path: 'variable-create', component: VariableCreateComponent},
   {path: 'variable-details/:numeroVariable', component: VariableDetailsComponent},

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

@@ -1,4 +1,3 @@
-<br />
 <form  #formRef="ngForm" (ngSubmit)="addCategorie()" class="needs-validation">
 	<div class="card shadow">
 	<div class="card-header">Fiche d'une catégorie</div>

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

@@ -1,4 +1,3 @@
-<br />
 <div class="card shadow">
 	<div class="card-header">Fiche d'une catégorie</div>
 	<div class="card-header shadow-sm">

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

@@ -1,4 +1,3 @@
-<br />
 <div class="card shadow">
 	<div class="card-header">Table des catégories</div>
 	<div class="card-header shadow-sm">

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

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

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

@@ -1,4 +1,3 @@
-<br />
 <form #formRef="ngForm" (ngSubmit)="addParticipant()" class="needs-validation">
 	<div class="card shadow">
 		<div class="card-header">Fiche d'un participant</div>

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

@@ -1,4 +1,3 @@
-<br />
 <div class="card shadow">
 	<div class="card-header">Fiche d'un participant</div>
 	<div class="card-header shadow-sm">

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

@@ -1,4 +1,3 @@
-<br />
 <div class="card shadow">
 	<div class="card-header">Table des participants</div>
 	<div class="card-header shadow-sm">

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

@@ -1,4 +1,3 @@
-<br />
 <form id="formParticipant" #formRef="ngForm" class="needs-validation">
 <div class="card shadow">
 	<div class="card-header">Fiche d'un participant</div>

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

@@ -1,4 +1,3 @@
-<br />
 <form #formRef="ngForm" (ngSubmit)="addProduction()" class="needs-validation">
 	<div class="card shadow">
 		<div class="card-header">Fiche d'une production</div>

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

@@ -1,4 +1,3 @@
-<br />
 <div class="card shadow">
 	<div class="card-header">Fiche d'une production</div>
 	<div class="card-header shadow-sm">

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

@@ -1,4 +1,3 @@
-<br />
 <div class="card shadow">
 	<div class="card-header">Table des productions</div>
 	<div class="card-header shadow-sm">

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

@@ -1,4 +1,3 @@
-<br />
 <form id="formProduction" #formRef="ngForm" class="needs-validation">
 	<div class="card shadow">
 		<div class="card-header">Fiche d'une production</div>

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

@@ -1,4 +1,3 @@
-<br />
 <form #formRef="ngForm" (ngSubmit)="addProductionFile()" class="needs-validation">
 	<div class="card shadow">
 		<div class="card-header">Changement de l'archive d'une production</div>

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

@@ -1,4 +1,3 @@
-<br />
 <form #formRef="ngForm" (ngSubmit)="addVariable()" class="needs-validation">
 	<div class="card shadow">
 		<div class="card-header">Fiche d'une variable</div>

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

@@ -1,4 +1,3 @@
-<br />
 <div class="card shadow">
   <div class="card-header">Fiche d'une variable</div>
 	<div class="card-header shadow-sm">

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

@@ -1,4 +1,3 @@
-<br />
 <div class="card shadow">
 	<div class="card-header">Table des variables</div>
 	<div class="card-header shadow-sm">

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

@@ -1,4 +1,3 @@
-<br />
 <form id="formVariable" #formRef="ngForm" class="needs-validation">
 	<div class="card shadow">
 		<div class="card-header">Fiche d'une variable</div>

src/styles.css

@@ -2,3 +2,4 @@
 .pointeur-souris { cursor: pointer; }
 .field-separate { margin-bottom: 2px; }
 .card-header, .card-body, .card-footer { padding: 7px; }
+.card { margin: 7px; }