dev en cours

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

@@ -92,6 +92,7 @@
 		</div>
 		<div class="card-footer hstack">
 			<button type="button" class="btn bg-gradient btn-success btn-sm text-left" #boutonUploader type="submit" [disabled]="formRef.invalid"><i class="fa-solid fa-plus"></i>&nbsp;<span i18n>Créer</span></button>
+			<div #messageUpload class="form-text" style="padding-left:7px;"></div>
 			<div #messageErreur class="form-text ms-auto text-danger" style="padding-right:7px;"></div>
 		</div>
 	</div>

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

@@ -21,10 +21,14 @@ export class ProductionCreateComponent implements OnInit
 
   @ViewChild('formRef') productionForm!: NgForm;
   @ViewChild('boutonUploader', {static: false}) boutonUploader!: ElementRef;
+  @ViewChild('messageUpload', {static: false}) messageUpload!: ElementRef;
   @ViewChild('messageErreur', {static: false}) messageErreur!: ElementRef;
 
   production: Production = new Production();
   uploaderFichier: boolean = false;
+  fichier!: any;
+  reliquat: number = 0;
+  chunkIndex = 0;
 
   constructor(
     private accountService : AccountService,
@@ -48,12 +52,11 @@ export class ProductionCreateComponent implements OnInit
     {
       const file = et.files[0];
 
-      this.production.nomArchive = file.name;
-      this.production.numeroVersion = 1;
+      this.production.nomArchive = "";
+      this.production.numeroVersion = 0;
 
-      reader.onloadend = async (e: any) => { if (e.target.result) { this.production.archive = e.target.result; this.uploaderFichier = true; } }
-
-      reader.readAsDataURL(file);
+      this.fichier = et.files[0];
+      this.uploaderFichier = true;
 		}
   }
 
@@ -72,17 +75,53 @@ export class ProductionCreateComponent implements OnInit
 		}
   }
 
+  async saveArchive(id: number)
+  {
+    const chunkSize = 1024 * 1024;
+    let start = 0;
+
+    this.chunkIndex = 0;
+    this.reliquat = 0;
+
+    try
+    {
+      while (start < this.fichier.size)
+      {
+        const chunk = this.fichier.slice(start, start + chunkSize);
+
+        await this.productionService.uploadChunk(id, chunk, this.chunkIndex, this.fichier.name);
+
+        this.reliquat += chunk.size;
+        this.setMessageUpload('&nbsp;' + Math.floor((this.reliquat*100)/this.fichier.size) + '%');
+
+        start += chunkSize;
+        this.chunkIndex++;
+      }
+    }
+    catch (err:any) { console.error(err); }
+    finally
+    {
+      this.productionService.mergeChunks(id, this.fichier.name, this.chunkIndex).subscribe({
+        next: (msg) => { this.setBoutonUploadEnd(); if (msg.erreur) { this.setMessageErreur(msg.erreur); } else { this.goToListProduction(); } },
+        error: (e:HttpErrorResponse) => { this.setBoutonUploadEnd(); this.setMessageErreur(e.error.message); },
+        complete: () => { }
+      });
+    }
+  }
   private saveProduction()
   {
-    this.uploadStart();
+    this.setBoutonUploadStart();
+
     this.productionService.createProduction(this.production).subscribe({
-      next: () => {},
-      error: (e:HttpErrorResponse) => { this.uploadEnd(); if (this.messageErreur) { this.renderer.setProperty(this.messageErreur.nativeElement, 'innerHTML', e.error.message); } else { alert(e.error.message); } },
-      complete: () => { this.uploadEnd(); this.goToListProduction(); }
+      next: async (ret) => { await this.saveArchive(Number('' + ret)); this.setBoutonUploadEnd(); this.goToListProduction(); },
+      error: (e:HttpErrorResponse) => { this.setBoutonUploadEnd(); this.setMessageErreur(e.error.message); },
+      complete: () => { }
     });
   }
-  private uploadStart() { if (this.boutonUploader &&this.uploaderFichier) { this.renderer.setProperty(this.boutonUploader.nativeElement, 'innerHTML', '<i class="fa-solid fa-upload fa-fade"></i>&nbsp;' + $localize`Téléversement en cours`); } }
-  private uploadEnd() { if (this.boutonUploader) { this.renderer.setProperty(this.boutonUploader.nativeElement, 'innerHTML', '<i class="fa-solid fa-plus"></i>&nbsp;' + $localize`Créer`); }  }
+  private setMessageUpload(m: string) { if (this.messageUpload) { this.renderer.setProperty(this.messageUpload.nativeElement, 'innerHTML', m); } }
+  private setMessageErreur(m: string) { if (this.messageErreur) { this.renderer.setProperty(this.messageErreur.nativeElement, 'innerHTML', m); } }
+  private setBoutonUploadStart() { if (this.boutonUploader && this.uploaderFichier) { this.renderer.setProperty(this.boutonUploader.nativeElement, 'innerHTML', '<i class="fa-solid fa-upload fa-fade"></i>&nbsp;' + $localize`Téléversement en cours`); } }
+  private setBoutonUploadEnd() { if (this.boutonUploader) { this.renderer.setProperty(this.boutonUploader.nativeElement, 'innerHTML', '<i class="fa-solid fa-plus"></i>&nbsp;' + $localize`Créer`); }  }
 
   addProduction() { if (this.productionForm.valid) { this.saveProduction(); } }
 

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

@@ -30,9 +30,10 @@
 			</div>
 		</div>
 	</div>
-	<div class="hstack align-items-baseline prod_row">
+</div>
+	<div class="d-flex flex-wrap">
 		@for (production of productions; track production.numeroProduction) {
-			<div class="card shadow prod_item" style="max-width:17rem;">
+			<div class="card shadow prod_item inline-grid">
 				@if (production.vignette) { <img [src]="production.vignette" class="img-fluid card-img-top pointeur-souris" (click)="formProduction(production.numeroProduction)"> }
 				@else if (production.type === types[0].key) { <img src="default/executable.png" class="img-fluid card-img-top pointeur-souris" (click)="formProduction(production.numeroProduction)"> }
 				@else if (production.type === types[1].key) { <img src="default/graphe.png" class="img-fluid card-img-top pointeur-souris" (click)="formProduction(production.numeroProduction)"> }
@@ -58,4 +59,3 @@
 		}
 	</div>
 </div>
-</div>

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

@@ -44,7 +44,6 @@ export class ProductionUploadComponent implements OnInit
   onArchiveSelected(event: any)
   {
     const et = event.target;
-    const reader = new FileReader();
 
     if (et.files && et.files.length > 0)
     {
@@ -55,13 +54,13 @@ export class ProductionUploadComponent implements OnInit
 
   async saveProduction()
   {
-    this.uploadStart();
+    this.setBoutonUploadStart();
 
     const chunkSize = 1024 * 1024;
     let start = 0;
     let chunkIndex = 0;
 
-    this.reliquat = this.fichier.size;
+    this.reliquat = 0;
 
     try
     {
@@ -71,8 +70,8 @@ export class ProductionUploadComponent implements OnInit
 
         await this.productionService.uploadChunk(this.numeroProduction, chunk, chunkIndex, this.fichier.name);
 
-        this.reliquat -= chunk.size;
-        if (this.messageUpload) { this.renderer.setProperty(this.messageUpload.nativeElement, 'innerHTML', '' +  this.reliquat); }
+        this.reliquat += chunk.size;
+        this.setMessageUpload(' ' + Math.floor((this.reliquat*100)/this.fichier.size) + '%');
 
         start += chunkSize;
         chunkIndex++;
@@ -82,14 +81,16 @@ export class ProductionUploadComponent implements OnInit
     finally
     {
       this.productionService.mergeChunks(this.numeroProduction, this.fichier.name, chunkIndex).subscribe({
-        next: (msg) => { this.uploadEnd(); if (msg.erreur) { if (this.messageErreur) { this.renderer.setProperty(this.messageErreur.nativeElement, 'innerHTML', msg.erreur); } } else { this.goToListProduction(); } },
-        error: (e:HttpErrorResponse) => { this.uploadEnd(); if (this.messageErreur) { this.renderer.setProperty(this.messageErreur.nativeElement, 'innerHTML', e.error.message); } else { alert(e.error.message); } },
+        next: (msg) => { this.setBoutonUploadEnd(); if (msg.erreur) { this.setMessageErreur(msg.erreur); } else { this.goToListProduction(); } },
+        error: (e:HttpErrorResponse) => { this.setBoutonUploadEnd(); this.setMessageErreur(e.error.message); },
         complete: () => { }
       });
     }
   }
-  private uploadStart() { if (this.boutonUploader) { this.renderer.setProperty(this.boutonUploader.nativeElement, 'innerHTML', '<i class="fa-solid fa-upload fa-fade"></i>&nbsp;' + $localize`Téléversement en cours`); } }
-  private uploadEnd() { if (this.boutonUploader) { this.renderer.setProperty(this.boutonUploader.nativeElement, 'innerHTML', '<i class="fa-solid fa-upload"></i>&nbsp;' + $localize`Téléverser`); }  }
+  private setMessageUpload(m: string) { if (this.messageUpload) { this.renderer.setProperty(this.messageUpload.nativeElement, 'innerHTML', m); } }
+  private setMessageErreur(m: string) { if (this.messageErreur) { this.renderer.setProperty(this.messageErreur.nativeElement, 'innerHTML', m); } }
+  private setBoutonUploadStart() { if (this.boutonUploader) { this.renderer.setProperty(this.boutonUploader.nativeElement, 'innerHTML', '<i class="fa-solid fa-upload fa-fade"></i>&nbsp;' + $localize`Téléversement en cours`); } }
+  private setBoutonUploadEnd() { if (this.boutonUploader) { this.renderer.setProperty(this.boutonUploader.nativeElement, 'innerHTML', '<i class="fa-solid fa-upload"></i>&nbsp;' + $localize`Téléverser`); }  }
 
   addProductionFile() { this.saveProduction(); }
 

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

@@ -65,15 +65,16 @@ export class ShowUploadComponent implements OnInit
 
   private saveMedia()
   {
-    this.uploadStart();
+    this.setBoutonUploadStart();
     this.presentationService.uploadMediaFile(this.numeroProduction, this.media).subscribe({
       next: () => {},
-      error: (e:HttpErrorResponse) => { this.uploadEnd(); if (this.messageErreur) { this.renderer.setProperty(this.messageErreur.nativeElement, 'innerHTML', e.error.message); } else { alert(e.error.message); } },
-      complete: () => { this.uploadEnd(); this.goToListPresentation(); }
+      error: (e:HttpErrorResponse) => { this.setBoutonUploadEnd(); this.setMessageErreur(e.error.message); },
+      complete: () => { this.setBoutonUploadEnd(); this.goToListPresentation(); }
     });
   }
-  private uploadStart() { if (this.boutonUploader && this.uploaderFichier) { this.renderer.setProperty(this.boutonUploader.nativeElement, 'innerHTML', '<i class="fa-solid fa-upload fa-fade"></i>&nbsp;' + $localize`Téléversement en cours`); } }
-  private uploadEnd() { if (this.boutonUploader) { this.renderer.setProperty(this.boutonUploader.nativeElement, 'innerHTML', '<i class="fa-solid fa-check"></i>&nbsp;' + $localize`Valider`); }  }
+  private setMessageErreur(m: string) { if (this.messageErreur) { this.renderer.setProperty(this.messageErreur.nativeElement, 'innerHTML', m); } }
+  private setBoutonUploadStart() { if (this.boutonUploader && this.uploaderFichier) { this.renderer.setProperty(this.boutonUploader.nativeElement, 'innerHTML', '<i class="fa-solid fa-upload fa-fade"></i>&nbsp;' + $localize`Téléversement en cours`); } }
+  private setBoutonUploadEnd() { if (this.boutonUploader) { this.renderer.setProperty(this.boutonUploader.nativeElement, 'innerHTML', '<i class="fa-solid fa-check"></i>&nbsp;' + $localize`Valider`); }  }
 
   addPresentationFile() { this.saveMedia(); }