aknuth/bizmatch-project
1
0
Fork 0
Code Issues 9 Pull Requests Packages Projects 5 Releases Wiki Activity

cropper & imageservice

Browse Source
This commit is contained in:
Andreas Knuth
2024-03-23 22:35:47 +01:00
parent d5210d3df4
commit a2c613c38f
11 changed files with 651 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
bizmatch/src/app/pages/listings/listings.component.html
View File

@@ -90,7 +90,7 @@
<div class="surface-card p-2" style="border-radius: 10px">
<article class="flex flex-column md:flex-row w-full gap-3 p-3 surface-card">
<div class="relative">
<img src="{{environment.apiBaseUrl}}/property/{{listing.id}}/1.avif" alt="Image" class="border-round w-full h-full md:w-12rem md:h-12rem">
<img src="{{environment.apiBaseUrl}}/property/{{listing.id}}/1.avif" alt="Image" class="border-round w-full h-full md:w-12rem md:h-9rem">
<p class="absolute px-2 py-1 border-round-lg text-sm font-normal text-white mt-0 mb-0" style="background-color: rgba(255, 255, 255, 0.3); backdrop-filter: blur(10px); top: 3%; left: 3%;">{{selectOptions.getState(listing.state)}}</p>
</div>
<div class="flex flex-column w-full gap-3">

37
bizmatch/src/app/pages/subscription/edit-listing/edit-listing.component.html
View File

@@ -1,9 +1,8 @@
<div class="surface-ground px-4 py-8 md:px-6 lg:px-8">
<div class="p-fluid flex flex-column lg:flex-row">
<menu-account></menu-account>
<p-toast></p-toast>
<div class="surface-card p-5 shadow-2 border-round flex-auto">
<div *ngIf="listing" class="surface-card p-5 shadow-2 border-round flex-auto">
<div class="text-900 font-semibold text-lg mt-3">{{mode==='create'?'New':'Edit'}} Listing</div>
<p-divider></p-divider>
<div class="flex gap-5 flex-column-reverse md:flex-row">
@@ -80,7 +79,15 @@
<div class="flex flex-column align-items-center flex-or">
<span class="font-medium text-900 mb-2">Property Picture</span>
<!-- <img [src]="propertyPictureUrl" (error)="setImageToFallback($event)" class="image"/> -->
<p-fileUpload mode="basic" chooseLabel="Upload" name="file" [url]="uploadUrl" accept="image/*" [maxFileSize]="maxFileSize" (onUpload)="onUploadPropertyPicture($event)" [auto]="true" styleClass="p-button-outlined p-button-plain p-button-rounded mt-4"></p-fileUpload>
<p-fileUpload mode="basic"
chooseLabel="Upload"
[customUpload]="true"
name="file"
accept="image/*"
[maxFileSize]="maxFileSize"
(onSelect)="select($event)"
styleClass="p-button-outlined p-button-plain p-button-rounded mt-4">
</p-fileUpload>
</div>
</div>
</div>
@@ -88,17 +95,14 @@
<ng-template let-image pTemplate="item">
<div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
<div class="mb-3">
<img src="{{environment.apiBaseUrl}}/property/{{listing.id}}/{{image.name}}" [alt]="image.name" class="w-6 shadow-2" />
<img src="{{environment.apiBaseUrl}}/property/{{listing.id}}/{{image.name}}" [alt]="image.name" class="w-11 shadow-2" />
</div>
<!-- <div>
<h4 class="mb-1">{{ product.name }}</h4>
<h6 class="mt-0 mb-3">{{ '$' + product.price }}</h6>
<p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)"></p-tag>
<div>
<div class="mt-5 flex align-items-center justify-content-center gap-2">
<p-button icon="pi pi-search" [rounded]="true" />
<p-button icon="pi pi-star-fill" [rounded]="true" severity="secondary" />
<p-button icon="pi pi-file-edit" [rounded]="true" />
<p-button icon="fa-solid fa-trash-can" [rounded]="true" severity="danger"></p-button>
</div>
</div> -->
</div>
</div>
</ng-template>
</p-carousel>
@@ -190,4 +194,13 @@
</div>
</div>
</div>
</div>
</div>
<p-dialog header="Edit Image" [visible]="imageUrl" [modal]="true" [style]="{ width: '50vw' }" [draggable]="false" [resizable]="false">
<!-- <app-cropper #cropper [imageUrl]="imageUrl"></app-cropper> -->
<angular-cropper #cropper [imageUrl]="imageUrl" [cropperOptions]="config"></angular-cropper>
<ng-template pTemplate="footer">
<p-button icon="pi" (click)="imageUrl = null" label="Cancel" [outlined]="true"></p-button>
<p-button icon="pi pi-check" (click)="sendImage()" label="Finish" pAutoFocus [autofocus]="true"></p-button>
</ng-template>
</p-dialog>

56
bizmatch/src/app/pages/subscription/edit-listing/edit-listing.component.ts
View File

@@ -1,4 +1,4 @@
import { Component } from '@angular/core';
import { Component, ViewChild } from '@angular/core';
import { ButtonModule } from 'primeng/button';
import { CheckboxModule } from 'primeng/checkbox';
import { InputTextModule } from 'primeng/inputtext';
@@ -29,19 +29,25 @@ import { AutoCompleteCompleteEvent, BusinessListing, CommercialPropertyListing,
import { GeoResult, GeoService } from '../../../services/geo.service';
import { InputNumberComponent, InputNumberModule } from '../../../components/inputnumber/inputnumber.component';
import { environment } from '../../../../environments/environment';
import { FileUploadModule } from 'primeng/fileupload';
import { FileUpload, FileUploadModule } from 'primeng/fileupload';
import { CarouselModule } from 'primeng/carousel';
import { v4 as uuidv4 } from 'uuid';
import { DialogModule } from 'primeng/dialog';
import { AngularCropperjsModule, CropperComponent } from 'angular-cropperjs';
import { HttpClient, HttpEventType } from '@angular/common/http';
import {ImageService} from '../../../services/image.service'
import { LoadingService } from '../../../services/loading.service';
@Component({
selector: 'create-listing',
standalone: true,
imports: [SharedModule,ArrayToStringPipe, InputNumberModule,FileUploadModule,CarouselModule],
imports: [SharedModule,ArrayToStringPipe, InputNumberModule,CarouselModule,DialogModule,AngularCropperjsModule,FileUploadModule],
providers:[MessageService],
templateUrl: './edit-listing.component.html',
styleUrl: './edit-listing.component.scss'
})
export class EditListingComponent {
@ViewChild(CropperComponent) public angularCropper: CropperComponent;
@ViewChild(FileUpload) public fileUpload: FileUpload;
listingCategory:'Business'|'Commercial Property';
category:string;
location:string;
@@ -50,7 +56,7 @@ export class EditListingComponent {
listing:ListingType
private id: string | undefined = this.activatedRoute.snapshot.params['id'] as string | undefined;
user:User;
maxFileSize=1000000;
maxFileSize=3000000;
uploadUrl:string;
environment=environment;
propertyImages:ImageProperty[]
@@ -70,14 +76,18 @@ export class EditListingComponent {
numVisible: 1,
numScroll: 1
}
];
];
imageUrl
config={aspectRatio: 16 / 9}
constructor(public selectOptions:SelectOptionsService,
private router: Router,
private activatedRoute: ActivatedRoute,
private listingsService:ListingsService,
public userService: UserService,
private messageService: MessageService,
private geoService:GeoService){
private geoService:GeoService,
private imageUploadService: ImageService,
private loadingService:LoadingService){
this.user=this.userService.getUser();
// Abonniere Router-Events, um den aktiven Link zu ermitteln
this.router.events.subscribe(event => {
@@ -102,6 +112,7 @@ export class EditListingComponent {
this.uploadUrl = `${environment.apiBaseUrl}/bizmatch/image/uploadPropertyPicture/${this.listing.id}`;
this.propertyImages=await this.listingsService.getPropertyImages(this.listing.id)
}
async save(){
sessionStorage.removeItem('uuid')
await this.listingsService.save(this.listing,this.listing.listingsCategory);
@@ -115,13 +126,30 @@ export class EditListingComponent {
this.suggestions = result.map(r=>r.city).slice(0,5);
}
setImageToFallback(event: Event) {
(event.target as HTMLImageElement).src = `/assets/images/placeholder.png`; // Pfad zum Platzhalterbild
select(event:any){
this.imageUrl = URL.createObjectURL(event.files[0]);
}
async onUploadPropertyPicture(event:any){
// (<CommercialPropertyListing>this.listing).images=[];
// (<CommercialPropertyListing>this.listing).images.push(this.listing.id);
// await this.listingsService.save(this.listing)
this.propertyImages=await this.listingsService.getPropertyImages(this.listing.id)
sendImage(){
this.imageUrl=null
this.loadingService.startLoading('uploadImage');
this.angularCropper.cropper.getCroppedCanvas().toBlob(async(blob) => {
this.imageUploadService.uploadImage(blob).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);
// Hier könntest du die Ladeanimation ausblenden
this.propertyImages=await this.listingsService.getPropertyImages(this.listing.id)
this.fileUpload.clear();
this.loadingService.stopLoading('uploadImage');
}
}, error => console.error('Fehler beim Upload:', error));
// this.fileUpload.upload();
}, 'image/png');
}
}