dev en cours

angular.json

@@ -27,9 +27,9 @@
               }
             ],
             "styles": [
-              "src/styles.css",
               "node_modules/bootstrap/dist/css/bootstrap.min.css",
-              "node_modules/@fortawesome/fontawesome-free/css/all.css"
+              "node_modules/@fortawesome/fontawesome-free/css/all.css",
+              "src/styles.css"
               ],
             "scripts": [
               "node_modules/jquery/dist/jquery.min.js",

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

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

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

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

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

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

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

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

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

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

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

@@ -96,13 +96,13 @@
 				<div class="col-sm-10">
 					<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">
-							<option [value]="PS.EN_ATTENTE" selected>{{ PS.EN_ATTENTE }}</option>
-							<option [value]="PS.PAYE_CHEQUE">{{ PS.PAYE_CHEQUE }}</option>
-							<option [value]="PS.PAYE_ESPECES">{{ PS.PAYE_ESPECES }}</option>
-							<option [value]="PS.VIREMENT_BANCAIRE">{{ PS.VIREMENT_BANCAIRE }}</option>
-							<option [value]="PS.VIREMENT_PAYPAL">{{ PS.VIREMENT_PAYPAL }}</option>
-							<option [value]="PS.ORGA">{{ PS.ORGA }}</option>
-							<option [value]="PS.GUEST">{{ PS.GUEST }}</option>
+							<option value="EN_ATTENTE" selected>{{ PS.EN_ATTENTE }}</option>
+							<option value="PAYE_CHEQUE">{{ PS.PAYE_CHEQUE }}</option>
+							<option value="PAYE_ESPECES">{{ PS.PAYE_ESPECES }}</option>
+							<option value="VIREMENT_BANCAIRE">{{ PS.VIREMENT_BANCAIRE }}</option>
+							<option value="VIREMENT_PAYPAL">{{ PS.VIREMENT_PAYPAL }}</option>
+							<option value="ORGA">{{ PS.ORGA }}</option>
+							<option value="GUEST">{{ PS.GUEST }}</option>
 						</select>
 					</div>
 				</div>
@@ -180,11 +180,11 @@
 				<div class="col-sm-10">
 					<div class="form-group field-separate">
 						<select class="form-select form-select-sm" id="modePaiement" name="modePaiement" [(ngModel)]="participant.modePaiement" required #modePaiementRef="ngModel">
-							<option [value]="PMP.CHEQUE" selected>{{ PMP.CHEQUE }}</option>
-							<option [value]="PMP.VIREMENT">{{ PMP.VIREMENT }}</option>
-							<option [value]="PMP.PAYPAL">{{ PMP.PAYPAL }}</option>
-							<option [value]="PMP.ESPECES">{{ PMP.ESPECES }}</option>
-							<option [value]="PMP.AUTRE">{{ PMP.AUTRE }}</option>
+							<option value="CHEQUE">{{ PMP.CHEQUE }}</option>
+							<option value="VIREMENT">{{ PMP.VIREMENT }}</option>
+							<option value="PAYPAL">{{ PMP.PAYPAL }}</option>
+							<option value="ESPECES">{{ PMP.ESPECES }}</option>
+							<option value="AUTRE">{{ PMP.AUTRE }}</option>
 						</select>
 					</div>
 				</div>

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

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

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

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

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

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

src/app/participant.service.ts

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http'
 import { Observable } from 'rxjs';
-import { Participant } from './participant';
+import { Participant, ParticipantShort } from './participant';
 
 @Injectable({ providedIn: 'root' })
 
@@ -14,6 +14,8 @@ export class ParticipantService
   
   getListParticipant(): Observable<Participant[]>{ return this.httpClient.get<Participant[]>(`${this.baseURL}/list`); }
 
+  getOptionListParticipant(): Observable<ParticipantShort[]>{ return this.httpClient.get<ParticipantShort[]>(`${this.baseURL}/option-list`); }
+
   createParticipant(participant: Participant): Observable<Object>{ return this.httpClient.post(`${this.baseURL}/create`, participant); }
 
   getByIdParticipant(id: number): Observable<Participant>{ return this.httpClient.get<Participant>(`${this.baseURL}/form/${id}`); }

src/app/participant.ts

@@ -50,3 +50,11 @@ export class Participant
   sommeRecue: string = "";
   arrived: boolean = false;
 }
+
+export class ParticipantShort
+{
+  numeroParticipant: number = 0;
+  nom: string = "";
+  prenom: string = "";
+  pseudonyme: string = "";
+}

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

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

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

@@ -12,12 +12,12 @@
 				<div class="col-sm-10">
 					<div class="form-group field-separate">
 						<select class="form-select form-select-sm" id="type" name="type" [(ngModel)]="production.type">
-							<option [value]="PT.EXECUTABLE" selected>{{ PT.EXECUTABLE }}</option>
-							<option [value]="PT.GRAPHE">{{ PT.GRAPHE }}</option>
-							<option [value]="PT.MUSIQUE">{{ PT.MUSIQUE }}</option>
-							<option [value]="PT.VIDEO">{{ PT.VIDEO }}</option>
-							<option [value]="PT.TOPIC">{{ PT.TOPIC }}</option>
-							<option [value]="PT.AUTRE">{{ PT.AUTRE }}</option>
+							<option value="EXECUTABLE" selected>{{ PT.EXECUTABLE }}</option>
+							<option value="GRAPHE">{{ PT.GRAPHE }}</option>
+							<option value="MUSIQUE">{{ PT.MUSIQUE }}</option>
+							<option value="VIDEO">{{ PT.VIDEO }}</option>
+							<option value="TOPIC">{{ PT.TOPIC }}</option>
+							<option value="AUTRE">{{ PT.AUTRE }}</option>
 						</select>
 					</div>
 				</div>
@@ -66,16 +66,29 @@
 			</div>
 
 			<div class="form-group row">
-				<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Archive&nbsp;<sup><span class="text-danger">*</span></sup></label>
+				<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">
-					<input type="file" class="form-control form-control-sm field-separate" id="archive" name="archive" [(ngModel)]="production.archive" #archiveRef="ngModel" required [class.is-invalid]="archiveRef.invalid && archiveRef.touched">
+					<div class="form-group field-separate">
+						<select class="form-select form-select-sm" id="numeroParticipant" name="numeroParticipant" [(ngModel)]="production.numeroParticipant">
+				    @for (participant of participants; track participant.numeroParticipant) {
+							<option [ngValue]="participant.numeroParticipant">{{ participant.pseudonyme }} = {{ participant.nom }}&nbsp;{{ participant.prenom }}</option>
+				    }
+						</select>
+					</div>
+				</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">
+					<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&nbsp;<sup><span class="text-danger">*</span></sup></label>
+				<label class="col-sm-2 col-form-label col-form-label-sm label-nobr">Vignette</label>
 				<div class="col-sm-10">
-					<input type="file" class="form-control form-control-sm field-separate" id="vignette" name="vignette" [(ngModel)]="production.vignette" #vignetteRef="ngModel" required [class.is-invalid]="vignetteRef.invalid && vignetteRef.touched">
+					<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

@@ -1,6 +1,8 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { Production, ProductionTypeEnum } from '../production';
 import { ProductionService } from '../production.service';
+import { ParticipantShort } from '../participant';
+import { ParticipantService } from '../participant.service';
 import { Router } from '@angular/router';
 import { FormsModule, NgForm } from '@angular/forms'; 
 
@@ -9,19 +11,56 @@ import { FormsModule, NgForm } from '@angular/forms';
 export class ProductionCreateComponent implements OnInit 
 {
   
+  participants: ParticipantShort[] = [];
+
   PT = ProductionTypeEnum;
 
   @ViewChild('formRef') productionForm!: NgForm;
   
   production: Production = new Production();
   
-  constructor(private productionService: ProductionService, private router: Router) { }
+  constructor(private productionService: ProductionService, private participantService: ParticipantService, private router: Router) { }
 
   ngOnInit(): void 
   { 
     this.production.type = this.PT.EXECUTABLE;
+    this.retreiveParticipants();
   }
 
+  private retreiveParticipants() { this.participantService.getOptionListParticipant().subscribe(data => { this.participants = data; }); }
+
+  onArchiveSelected(event: any) 
+  { 
+    const et = event.target;
+    const reader = new FileReader();
+
+    if (et.files && et.files.length > 0) 
+    {
+      const file = et.files[0];
+ 
+      this.production.nomArchive = file.name;
+      
+      reader.onloadend = async (e: any) => { if (e.target.result) { this.production.archive = e.target.result; } }
+
+      reader.readAsDataURL(file);
+		}
+  }
+
+  onVignetteSelected(event: any) 
+  { 
+    const et = event.target;
+    const reader = new FileReader();
+
+    if (et.files && et.files.length > 0) 
+    {
+      const file = et.files[0];
+     
+      reader.onloadend = async (e: any) => { if (e.target.result) { this.production.vignette = e.target.result; } }
+
+      reader.readAsDataURL(file);
+		}
+  }
+ 
   private saveProduction() { this.productionService.createProduction(this.production).subscribe({ next: () => { this.goToListProduction(); }, error: (err: any) => { console.log(err); }, complete: () => { } }); }
 
   addProduction() { if (this.productionForm.valid) { this.saveProduction(); } }

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

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

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

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

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

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

src/app/production.ts

@@ -22,9 +22,10 @@ export class Production
   plateforme: string = "";
   commentaire: string = "";
   informationsPrivees: string = "";
+  numeroParticipant: number = 0;
   nomArchive: string = "";
-  archive: string = "";
-  vignette: string = "";
+  archive!: string | any;
+  vignette!: string | any;
   numeroVersion: number = 1;
 }
 

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

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

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

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

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

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

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

@@ -8,10 +8,10 @@
 				<button type="button" (click)="goToNewVariable()" class="btn btn-primary btn-sm" 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">
+				<select class="form-select form-select-sm" (change)="filtrageParType($event)">
 					<option selected> </option>
           @for (type of types; track type) {
-					<option value="{{ type }}">{{ type }}</option>
+					<option [value]="type.type">{{ type.type }}</option>
 				  }
 				</select>
 			</div>

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

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
-import { Variable } from '../variable';
+import { Variable, VariableType } from '../variable';
 import { VariableService } from '../variable.service';
 
 @Component({ selector: 'app-variable-list', imports: [], templateUrl: './variable-list.component.html', styleUrl: './variable-list.component.css' })
@@ -8,23 +8,19 @@ import { VariableService } from '../variable.service';
 export class VariableListComponent implements OnInit
 {
   
-  types = new Set();
+  types: VariableType[] = [];
   
   variables: Variable[] = [];
 
   constructor(private variableService: VariableService, private router: Router) { }
 
-  ngOnInit(): void { this.retreiveDatas(); }
+  ngOnInit(): void { this.retreiveDatas(); this.retreiveParticipants(); }
 
-  private retreiveDatas() 
-  { 
-    this.variableService.getListVariable().subscribe(data => {
-      this.variables = data; 
-      
-      data.forEach((element: any) => { if (!this.types.has(element.type)) { this.types.add(element.type); } });
-    });
-  }
+  private retreiveDatas() { this.variableService.getListVariable().subscribe(data => { this.variables = data; }); }
+  private retreiveParticipants() { this.variableService.getOptionListVariableType().subscribe(data => { this.types = data; }); }
 
+  filtrageParType(event: any) { this.router.navigate(['/variable-list'], { queryParams: { 'refresh': this.getRandomInteger(1, 100000), 'type': event.target.value } }); }
+  
   goToRefreshListVariable(){ this.router.navigate(['/variable-list'], { queryParams: { 'refresh': this.getRandomInteger(1, 100000) } }); }
 
   private getRandomInteger(min: number, max: number) { min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (max - min)) + min; }

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

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

src/app/variable.service.ts

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http'
 import { Observable } from 'rxjs';
-import { Variable } from './variable';
+import { Variable, VariableType } from './variable';
 
 @Injectable({ providedIn: 'root' })
 
@@ -14,6 +14,8 @@ export class VariableService
   
   getListVariable(): Observable<Variable[]>{ return this.httpClient.get<Variable[]>(`${this.baseURL}/list`); }
 
+  getOptionListVariableType(): Observable<VariableType[]>{ return this.httpClient.get<VariableType[]>(`${this.baseURL}/option-list`); }
+
   createVariable(variable: Variable): Observable<Object>{ return this.httpClient.post(`${this.baseURL}/create`, variable); }
 
   getByIdVariable(id: number): Observable<Variable>{ return this.httpClient.get<Variable>(`${this.baseURL}/form/${id}`); }

src/app/variable.ts

@@ -7,4 +7,9 @@ export class Variable
   code: string = "";
   valeur: string = "";
   notes: string = "";
-}
+}
+
+export class VariableType
+{
+  type: string = "";
+}

src/styles.css

@@ -1 +1,4 @@
-/* You can add global styles to this file, and also import other style files */
+.label-nobr { white-space: nowrap; }
+.pointeur-souris { cursor: pointer; }
+.field-separate { margin-bottom: 2px; }
+.card-header, .card-body, .card-footer { padding: 7px; }