dev en cours

src/app/composants/poll-booth/poll-booth.component.css

@@ -1,3 +1,3 @@
-#selectionChosen, #selectionDiscarded { width: 360px; min-height: 400px; overflow-x: auto; }
+#selectionChosen, #selectionDiscarded { width: 360px; min-height: 400px; overflow-x: auto; padding: 0px; }
 
 .boutons { width: 90px; }

src/app/composants/poll-booth/poll-booth.component.html

@@ -16,9 +16,27 @@
   <div class="card-body"><div class="hstack align-items-start">
 
     <div class="col">
-      <select class="form-select-sm" size="16" id="selectionChosen" #selecteurChoisis (change)="changeEtatBoutonsChosen($event)">
+      <select class="form-select-sm" size="5" id="selectionChosen" #selecteurChoisis (change)="changeEtatBoutonsChosen($event)">
       {{ resetChiffre() }} @for (prod of chosenProductions; track prod.numeroProduction) {
-        <option [value]="prod.numeroProduction" [disabled]="nombreChoixRestant == -1">{{ nextChiffre() }} - {{ prod.titre }} - {{ prod.auteurs }} / {{ prod.groupes }}</option>
+        <option [value]="prod.numeroProduction" [disabled]="nombreChoixRestant == -1">
+          <div class="card text-truncate" style="margin:3px;">
+            <div class="row g-0">
+              <div class="col-md-4">
+                @if (prod.vignette) { <img [src]="prod.vignette" class="img-fluid card-img-top pointeur-souris"> }
+        				@else if (prod.type === types[0].key) { <img src="default/executable.png" class="img-fluid card-img-top pointeur-souris"> }
+        				@else if (prod.type === types[1].key) { <img src="default/graphe.png" class="img-fluid card-img-top pointeur-souris"> }
+        				@else if (prod.type === types[2].key) { <img src="default/musique.png" class="img-fluid card-img-top pointeur-souris"> }
+        				@else if (prod.type === types[3].key) { <img src="default/video.png" class="img-fluid card-img-top pointeur-souris"> }
+        				@else if (prod.type === types[4].key) { <img src="default/topic.png" class="img-fluid card-img-top pointeur-souris"> }
+        				@else if (prod.type === types[5].key) { <img src="default/autre.png" class="img-fluid card-img-top pointeur-souris"> }
+              </div>
+              <div class="col-md-8">
+                <div class="card-header">{{ nextChiffre() }} - {{ prod.titre }}</div>
+                <div class="card-body">{{ prod.auteurs }} / {{ prod.groupes }}</div>
+              </div>
+            </div>
+          </div>
+        </option>
       }
       </select>
     </div>
@@ -35,9 +53,27 @@
     </div>
 
     <div class="col">
-      <select class="form-select-sm" size="16" id="selectionDiscarded" #selecteurProposes (change)="changeEtatBoutonsDiscarded($event)">
+      <select class="form-select-sm" size="5" id="selectionDiscarded" #selecteurProposes (change)="changeEtatBoutonsDiscarded($event)">
       {{ resetLettre() }} @for (prod of linkedProductions; track prod.numeroProduction) {
-        <option [value]="prod.numeroProduction" [disabled]="dejaChoisi(prod.numeroProduction)" [selected]="(numeroProductionPropose === prod.numeroProduction) && (!dejaChoisi(prod.numeroProduction))">{{ nextLettre() }} - {{ prod.titre }} - {{ prod.auteurs }} / {{ prod.groupes }}</option>
+        <option [value]="prod.numeroProduction" [disabled]="dejaChoisi(prod.numeroProduction)" [selected]="(numeroProductionPropose === prod.numeroProduction) && (!dejaChoisi(prod.numeroProduction))">
+          <div class="card text-truncate" [class.opacity-25]="dejaChoisi(prod.numeroProduction)" style="margin:3px;">
+            <div class="row g-0">
+              <div class="col-md-4">
+                @if (prod.vignette) { <img [src]="prod.vignette" class="img-fluid card-img-top pointeur-souris"> }
+        				@else if (prod.type === types[0].key) { <img src="default/executable.png" class="img-fluid card-img-top pointeur-souris"> }
+        				@else if (prod.type === types[1].key) { <img src="default/graphe.png" class="img-fluid card-img-top pointeur-souris"> }
+        				@else if (prod.type === types[2].key) { <img src="default/musique.png" class="img-fluid card-img-top pointeur-souris"> }
+        				@else if (prod.type === types[3].key) { <img src="default/video.png" class="img-fluid card-img-top pointeur-souris"> }
+        				@else if (prod.type === types[4].key) { <img src="default/topic.png" class="img-fluid card-img-top pointeur-souris"> }
+        				@else if (prod.type === types[5].key) { <img src="default/autre.png" class="img-fluid card-img-top pointeur-souris"> }
+              </div>
+              <div class="col-md-8">
+                <div class="card-body">{{ nextLettre() }} - {{ prod.titre }}</div>
+                <div class="card-body">{{ prod.auteurs }} / {{ prod.groupes }}</div>
+              </div>
+            </div>
+          </div>
+        </option>
       }
       </select>
     </div>

src/app/composants/poll-booth/poll-booth.component.ts

@@ -5,8 +5,7 @@ import { FormsModule, NgForm } from '@angular/forms';
 import { MenuComponent } from '../menu/menu.component';
 import { Categorie } from '../../interfaces/categorie';
 import { CategorieService } from '../../services/categorie.service';
-import { ProductionItem, ProductionEnum } from '../../interfaces/production';
-import { PresentationService } from '../../services/presentation.service';
+import { ProductionChoice, ProductionEnum, ProductionTypeList } from '../../interfaces/production';
 import { BulletinService } from '../../services/bulletin.service';
 
 @Component({ selector: 'app-poll-booth', imports: [FormsModule, MenuComponent], templateUrl: './poll-booth.component.html', styleUrl: './poll-booth.component.css' })
@@ -25,17 +24,18 @@ export class PollBoothComponent  implements OnInit
   numeroCategorie: number = 0;
   categorie: Categorie = new Categorie();
 
+  types: ProductionEnum[] = ProductionTypeList;
+
   numeroProductionChoisie: number = 0;
-  chosenProductions: ProductionItem[] = [];
+  chosenProductions: ProductionChoice[] = [];
 
   numeroProductionPropose: number = 0;
-  linkedProductions: ProductionItem[] = [];
+  linkedProductions: ProductionChoice[] = [];
 
   nombreChoixRestant: number = 0;
 
   constructor(
     private categorieService: CategorieService,
-    private presentationService: PresentationService,
     private bulletinService: BulletinService,
     private route: ActivatedRoute,
     private router: Router,
@@ -56,7 +56,7 @@ export class PollBoothComponent  implements OnInit
 
   private retreiveDatas() { this.bulletinService.getRemainingChoices(this.numeroCategorie).subscribe(ret => { this.nombreChoixRestant = Number('' + ret); this.retreiveDatas1(); }); }
   private retreiveDatas1() { this.bulletinService.getChosenProductions(this.numeroCategorie).subscribe(data => { this.chosenProductions = data; this.retreiveDatas2(); }); }
-  private retreiveDatas2() { this.presentationService.getLinkedProductions(this.numeroCategorie).subscribe(data => { this.linkedProductions = data; this.resetSelections(); }); }
+  private retreiveDatas2() { this.bulletinService.getLinkedProductions(this.numeroCategorie).subscribe(data => { this.linkedProductions = data; this.resetSelections(); }); }
   private resetSelections() { if (this.selecteurProposes) { this.selecteurProposes.nativeElement.selectedIndex = -1; } }
 
   indexChiffre: number = 0;

src/app/composants/show-links/show-links.component.css

@@ -1,3 +1,3 @@
-#selectionLinked, #selectionUnlinked { width: 360px; min-height: 400px; overflow-x: auto; }
+#selectionLinked, #selectionUnlinked { width: 360px; min-height: 400px; overflow-x: auto; padding: 0px; }
 
 .boutons { width: 90px; }

src/app/interfaces/production.ts

@@ -71,6 +71,18 @@ export class ProductionItem
   numeroOrdre: number = 0;
 }
 
+export class ProductionChoice
+{
+  numeroProduction: number = 0;
+  type: string = "AUTRE";
+  titre: string = "";
+  auteurs: string = "";
+  groupes: string = "";
+  plateforme: string = "";
+  numeroOrdre: number = 0;
+  vignette!: string | any;
+}
+
 export class PresentationFile
 {
   numeroProduction: number = 0;

src/app/services/bulletin.service.ts

@@ -3,7 +3,7 @@ import { HttpClient, HttpParams } from '@angular/common/http'
 import { Observable } from 'rxjs';
 
 import { Environnement } from '../env';
-import { ProductionItem } from '../interfaces/production';
+import { ProductionChoice } from '../interfaces/production';
 import { Message } from '../interfaces/divers';
 
 @Injectable({ providedIn: 'root' })
@@ -19,7 +19,8 @@ export class BulletinService
 
   validateChoices(id: number): Observable<Message> { return this.httpClient.get<Message>(`${this.baseURL}/validate/${id}`); }
 
-  getChosenProductions(id: number): Observable<ProductionItem[]> { return this.httpClient.get<ProductionItem[]>(`${this.baseURL}/list/${id}`); }
+  getChosenProductions(id: number): Observable<ProductionChoice[]> { return this.httpClient.get<ProductionChoice[]>(`${this.baseURL}/list-chosen/${id}`); }
+  getLinkedProductions(id: number): Observable<ProductionChoice[]> { return this.httpClient.get<ProductionChoice[]>(`${this.baseURL}/list-linked/${id}`); }
 
   choisirProduction(id_cat: number, id_prod: number): Observable<Object>
   {