broker direcrtory renewed, imageservice updated, demo data

bizmatch/src/app/pages/subscription/account/account.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, Component } from '@angular/core';
+import { ChangeDetectorRef, Component, ViewChild } from '@angular/core';
 import { ButtonModule } from 'primeng/button';
 import { CheckboxModule } from 'primeng/checkbox';
 import { InputTextModule } from 'primeng/inputtext';
@@ -15,56 +15,72 @@ import { ChipModule } from 'primeng/chip';
 import { MenuAccountComponent } from '../../menu-account/menu-account.component';
 import { DividerModule } from 'primeng/divider';
 import { TableModule } from 'primeng/table';
-import { HttpClient } from '@angular/common/http';
+import { HttpClient, HttpEventType } from '@angular/common/http';
 import { UserService } from '../../../services/user.service';
 import { SharedModule } from '../../../shared/shared/shared.module';
 import { SubscriptionsService } from '../../../services/subscriptions.service';
 import { lastValueFrom } from 'rxjs';
 import { MessageService } from 'primeng/api';
 import { environment } from '../../../../environments/environment';
-import { FileUploadModule } from 'primeng/fileupload';
-import { AutoCompleteCompleteEvent, Invoice, Subscription, User } from '../../../../../../common-models/src/main.model';
+import { FileUpload, FileUploadModule } from 'primeng/fileupload';
+import { AutoCompleteCompleteEvent, Invoice, KeyValue, KeyValueRatio, Subscription, User } from '../../../../../../common-models/src/main.model';
 import { GeoService } from '../../../services/geo.service';
 import { ChangeDetectionStrategy } from '@angular/compiler';
-
-
+import { EditorModule } from 'primeng/editor';
+import { LoadingService } from '../../../services/loading.service';
+import { AngularCropperjsModule, CropperComponent } from 'angular-cropperjs';
+import { ImageService } from '../../../services/image.service';
+import { DialogModule } from 'primeng/dialog';
+import { SelectButtonModule } from 'primeng/selectbutton';
 @Component({
   selector: 'app-account',
   standalone: true,
-  // imports: [CommonModule, StyleClassModule, MenuAccountComponent, DividerModule,ButtonModule, TableModule, InputTextModule, DropdownModule, FormsModule, ChipModule,InputTextareaModule ],
-  imports: [SharedModule,FileUploadModule],
+  imports: [SharedModule,FileUploadModule,EditorModule,AngularCropperjsModule,DialogModule,SelectButtonModule],
   providers:[MessageService],
   templateUrl: './account.component.html',
   styleUrl: './account.component.scss'
 })
 export class AccountComponent {
+  @ViewChild(CropperComponent) public angularCropper: CropperComponent;
+  @ViewChild('companyUpload') public companyUpload: FileUpload;
+  @ViewChild('profileUpload') public profileUpload: FileUpload;
+  private id: string | undefined = this.activatedRoute.snapshot.params['id'] as string | undefined;
   user:User;
   subscriptions:Array<Subscription>;
   userSubscriptions:Array<Subscription>=[];
-  uploadProfileUrl:string;
-  uploadCompanyUrl:string;
   maxFileSize=1000000;
   companyLogoUrl:string;
   profileUrl:string;
+  imageUrl;
+  type:'company'|'profile'
+  stateOptions:KeyValueRatio[]=[
+                {label:'16/9',value:16/9},
+                {label:'1/1',value:1},
+                {label:'2/3',value:2/3},
+              ]
+  value:number = this.stateOptions[0].value;
+  config={aspectRatio: this.value}
+  environment=environment
   constructor(public userService: UserService, 
               private subscriptionService: SubscriptionsService,
               private messageService: MessageService,
               private geoService:GeoService,
               public selectOptions:SelectOptionsService,
-              private cdref:ChangeDetectorRef) {
-			this.user=this.userService.getUser()
+              private cdref:ChangeDetectorRef,
+              private activatedRoute: ActivatedRoute,
+              private loadingService:LoadingService,
+              private imageUploadService: ImageService) {
+			
 	}
   async ngOnInit(){
-
+    this.user=await this.userService.getById(this.id);
     this.userSubscriptions=await lastValueFrom(this.subscriptionService.getAllSubscriptions());
-    this.uploadProfileUrl = `${environment.apiBaseUrl}/bizmatch/image/uploadProfile/${this.user.id}`;
-    this.uploadCompanyUrl = `${environment.apiBaseUrl}/bizmatch/image/uploadCompanyLogo/${this.user.id}`;
     if (!this.user.licensedIn || this.user.licensedIn?.length===0){
       this.user.licensedIn = [{name:'',value:''}]
     }
     this.user=await this.userService.getById(this.user.id);
-    this.profileUrl = this.user.hasProfile?`${environment.apiBaseUrl}/profile/${this.user.id}`:`/assets/images/placeholder.png`
-    this.companyLogoUrl = this.user.hasCompanyLogo?`${environment.apiBaseUrl}/logo/${this.user.id}`:`/assets/images/placeholder.png`
+    this.profileUrl = this.user.hasProfile?`${environment.apiBaseUrl}/profile/${this.user.id}.avif`:`/assets/images/placeholder.png`
+    this.companyLogoUrl = this.user.hasCompanyLogo?`${environment.apiBaseUrl}/logo/${this.user.id}.avif`:`/assets/images/placeholder.png`
   }
   printInvoice(invoice:Invoice){}
 
@@ -99,4 +115,60 @@ export class AccountComponent {
   removeLicence(){
     this.user.licensedIn.splice(this.user.licensedIn.length-2,1);
   }
+
+  select(event:any,type:'company'|'profile'){
+    this.imageUrl = URL.createObjectURL(event.files[0]);
+    this.type=type
+    this.config={aspectRatio: type==='company'?this.stateOptions[0].value:this.stateOptions[2].value}
+  }
+  sendImage(){
+    this.imageUrl=null
+    this.loadingService.startLoading('uploadImage');
+    this.angularCropper.cropper.getCroppedCanvas().toBlob(async(blob) => {
+      if (this.type==='company'){
+        this.imageUploadService.uploadCompanyLogo(blob,this.user.id).subscribe(async(event) => {
+          if (event.type === HttpEventType.UploadProgress) {
+            // Berechne und zeige den Fortschritt basierend auf event.loaded und event.total
+            const progress = event.total ? event.loaded / event.total : 0;
+            console.log(`Upload-Fortschritt: ${progress * 100}%`);
+            // Hier könntest du beispielsweise eine Fortschrittsanzeige aktualisieren
+          } else if (event.type === HttpEventType.Response) {
+            console.log('Upload abgeschlossen', event.body);
+            this.companyUpload.clear();
+            this.loadingService.stopLoading('uploadImage');
+            this.companyLogoUrl=`${environment.apiBaseUrl}/logo/${this.user.id}.avif?_ts=${new Date().getTime()}`
+          }
+        }, error => console.error('Fehler beim Upload:', error));  
+      } else {
+        this.imageUploadService.uploadProfileImage(blob,this.user.id).subscribe(async(event) => {
+          if (event.type === HttpEventType.UploadProgress) {
+            // Berechne und zeige den Fortschritt basierend auf event.loaded und event.total
+            const progress = event.total ? event.loaded / event.total : 0;
+            console.log(`Upload-Fortschritt: ${progress * 100}%`);
+            // Hier könntest du beispielsweise eine Fortschrittsanzeige aktualisieren
+          } else if (event.type === HttpEventType.Response) {
+            console.log('Upload abgeschlossen', event.body);
+            this.profileUpload.clear();
+            this.loadingService.stopLoading('uploadImage');
+            this.profileUrl=`${environment.apiBaseUrl}/profile/${this.user.id}.avif?_ts=${new Date().getTime()}`
+          }
+        }, error => console.error('Fehler beim Upload:', error));          
+      }
+    
+      
+      // this.fileUpload.upload();
+    }, 'image/png');
+  }  
+  cancelUpload(){
+    this.imageUrl=null
+    if (this.type==='company'){
+      this.companyUpload.clear();
+    } else {
+      this.profileUpload.clear();
+    }
+  }
+  changeAspectRation(ratio:number){
+    this.config={aspectRatio: ratio}
+    this.angularCropper.cropper.setAspectRatio(ratio);
+  }
 }