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

cropper & imageservice

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
bizmatch-server/src/file/file.service.ts
View File

@ -96,7 +96,7 @@ export class FileService {
let quality = 50; // AVIF kann mit niedrigeren Qualitätsstufen gute Ergebnisse erzielen let quality = 50; // AVIF kann mit niedrigeren Qualitätsstufen gute Ergebnisse erzielen
let output; let output;
let start = Date.now(); let start = Date.now();
do { // do {
output = await sharp(buffer) output = await sharp(buffer)
.resize({ width: 1500 }) .resize({ width: 1500 })
.avif({ quality }) // Verwende AVIF .avif({ quality }) // Verwende AVIF
@ -106,10 +106,10 @@ export class FileService {
if (output.byteLength > maxSize) { if (output.byteLength > maxSize) {
quality -= 5; // Justiere Qualität in feineren Schritten quality -= 5; // Justiere Qualität in feineren Schritten
} }
} while (output.byteLength > maxSize && quality > 0); // } while (output.byteLength > maxSize && quality > 0);
await sharp(output).toFile(`${directory}/${imageName}.avif`); // Ersetze Dateierweiterung
let timeTaken = Date.now() - start; let timeTaken = Date.now() - start;
this.logger.info(`Quality: ${quality} - Time: ${timeTaken} milliseconds`) this.logger.info(`Quality: ${quality} - Time: ${timeTaken} milliseconds`)
await sharp(output).toFile(`${directory}/${imageName}.avif`); // Ersetze Dateierweiterung
} }
} }

2
bizmatch/package.json
View File

@ -28,7 +28,9 @@
"@fortawesome/free-regular-svg-icons": "^6.5.1", "@fortawesome/free-regular-svg-icons": "^6.5.1",
"@fortawesome/free-solid-svg-icons": "^6.5.1", "@fortawesome/free-solid-svg-icons": "^6.5.1",
"@types/uuid": "^9.0.8", "@types/uuid": "^9.0.8",
"angular-cropperjs": "^14.0.1",
"browser-bunyan": "^1.8.0", "browser-bunyan": "^1.8.0",
"cropperjs": "^1.6.1",
"express": "^4.18.2", "express": "^4.18.2",
"jwt-decode": "^4.0.0", "jwt-decode": "^4.0.0",
"keycloak-js": "^23.0.7", "keycloak-js": "^23.0.7",

16
bizmatch/src/app/components/cropper/cropper.component.html Normal file
View File

@ -0,0 +1,16 @@
<!-- CROPPER WRAPPER -->
<div class="cropper-wrapper">
<!-- LOADING -->
<div class="loading-block" *ngIf="isLoading">
<div class="spinner"></div>
</div>
<!-- LOAD ERROR -->
<div class="alert alert-warning" *ngIf="loadError">{{ loadImageErrorText }}</div>
<!-- CROPPER -->
<div class="cropper">
<img #image alt="image" [src]="imageUrl" (load)="imageLoaded($event)" (error)="imageLoadError($event)" />
</div>
</div>

356
bizmatch/src/app/components/cropper/cropper.component.scss Normal file
View File

@ -0,0 +1,356 @@
:host {
display: block
}
.cropper img {
max-width: 100%;
max-height: 100%;
height: auto;
}
.cropper-wrapper {
position: relative;
min-height: 80px
}
.cropper-wrapper .loading-block {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%
}
.cropper-wrapper .loading-block .spinner {
width: 31px;
height: 31px;
margin: 0 auto;
border: 2px solid rgba(97, 100, 193, .98);
border-radius: 50%;
border-left-color: transparent;
border-right-color: transparent;
-webkit-animation: cssload-spin 425ms infinite linear;
position: absolute;
top: calc(50% - 15px);
left: calc(50% - 15px);
animation: cssload-spin 425ms infinite linear
}
@-webkit-keyframes cssload-spin {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg)
}
}
@keyframes cssload-spin {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg)
}
}
/*!
* Cropper.js v1.4.1
* https://fengyuanchen.github.io/cropperjs
*
* Copyright 2015-present Chen Fengyuan
* Released under the MIT license
*
* Date: 2018-07-15T09:54:43.167Z
*/
.cropper-container {
direction: ltr;
font-size: 0;
line-height: 0;
position: relative;
-ms-touch-action: none;
touch-action: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.cropper-container img {
display: block;
height: 100%;
image-orientation: 0deg;
max-height: none !important;
max-width: none !important;
min-height: 0 !important;
min-width: 0 !important;
width: 100%;
}
.cropper-wrap-box,
.cropper-canvas,
.cropper-drag-box,
.cropper-crop-box,
.cropper-modal {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
}
.cropper-wrap-box,
.cropper-canvas {
overflow: hidden;
}
.cropper-drag-box {
background-color: #fff;
opacity: 0;
}
.cropper-modal {
background-color: #000;
opacity: .5;
}
.cropper-view-box {
display: block;
height: 100%;
outline-color: rgba(51, 153, 255, 0.75);
outline: 1px solid #39f;
overflow: hidden;
width: 100%;
}
.cropper-dashed {
border: 0 dashed #eee;
display: block;
opacity: .5;
position: absolute;
}
.cropper-dashed.dashed-h {
border-bottom-width: 1px;
border-top-width: 1px;
height: calc(100% / 3);
left: 0;
top: calc(100% / 3);
width: 100%;
}
.cropper-dashed.dashed-v {
border-left-width: 1px;
border-right-width: 1px;
height: 100%;
left: calc(100% / 3);
top: 0;
width: calc(100% / 3);
}
.cropper-center {
display: block;
height: 0;
left: 50%;
opacity: .75;
position: absolute;
top: 50%;
width: 0;
}
.cropper-center:before,
.cropper-center:after {
background-color: #eee;
content: ' ';
display: block;
position: absolute;
}
.cropper-center:before {
height: 1px;
left: -3px;
top: 0;
width: 7px;
}
.cropper-center:after {
height: 7px;
left: 0;
top: -3px;
width: 1px;
}
.cropper-face,
.cropper-line,
.cropper-point {
display: block;
height: 100%;
opacity: .1;
position: absolute;
width: 100%;
}
.cropper-face {
background-color: #fff;
left: 0;
top: 0;
}
.cropper-line {
background-color: #39f;
}
.cropper-line.line-e {
cursor: ew-resize;
right: -3px;
top: 0;
width: 5px;
}
.cropper-line.line-n {
cursor: ns-resize;
height: 5px;
left: 0;
top: -3px;
}
.cropper-line.line-w {
cursor: ew-resize;
left: -3px;
top: 0;
width: 5px;
}
.cropper-line.line-s {
bottom: -3px;
cursor: ns-resize;
height: 5px;
left: 0;
}
.cropper-point {
background-color: #39f;
height: 5px;
opacity: .75;
width: 5px;
}
.cropper-point.point-e {
cursor: ew-resize;
margin-top: -3px;
right: -3px;
top: 50%;
}
.cropper-point.point-n {
cursor: ns-resize;
left: 50%;
margin-left: -3px;
top: -3px;
}
.cropper-point.point-w {
cursor: ew-resize;
left: -3px;
margin-top: -3px;
top: 50%;
}
.cropper-point.point-s {
bottom: -3px;
cursor: s-resize;
left: 50%;
margin-left: -3px;
}
.cropper-point.point-ne {
cursor: nesw-resize;
right: -3px;
top: -3px;
}
.cropper-point.point-nw {
cursor: nwse-resize;
left: -3px;
top: -3px;
}
.cropper-point.point-sw {
bottom: -3px;
cursor: nesw-resize;
left: -3px;
}
.cropper-point.point-se {
bottom: -3px;
cursor: nwse-resize;
height: 20px;
opacity: 1;
right: -3px;
width: 20px;
}
@media (min-width: 768px) {
.cropper-point.point-se {
height: 15px;
width: 15px;
}
}
@media (min-width: 992px) {
.cropper-point.point-se {
height: 10px;
width: 10px;
}
}
@media (min-width: 1200px) {
.cropper-point.point-se {
height: 5px;
opacity: .75;
width: 5px;
}
}
.cropper-point.point-se:before {
background-color: #39f;
bottom: -50%;
content: ' ';
display: block;
height: 200%;
opacity: 0;
position: absolute;
right: -50%;
width: 200%;
}
.cropper-invisible {
opacity: 0;
}
.cropper-bg {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');
}
.cropper-hide {
display: block;
height: 0;
position: absolute;
width: 0;
}
.cropper-hidden {
display: none !important;
}
.cropper-move {
cursor: move;
}
.cropper-crop {
cursor: crosshair;
}
.cropper-disabled .cropper-drag-box,
.cropper-disabled .cropper-face,
.cropper-disabled .cropper-line,
.cropper-disabled .cropper-point {
cursor: not-allowed;
}

179
bizmatch/src/app/components/cropper/cropper.component.ts Normal file
View File

@ -0,0 +1,179 @@
import { CommonModule } from "@angular/common";
import {
Component,
OnInit,
ViewEncapsulation,
ElementRef,
ViewChild,
Input,
EventEmitter,
Output,
OnDestroy,
} from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import Cropper from "cropperjs";
export interface ImageCropperSetting {
width: number;
height: number;
}
export interface ImageCropperResult {
imageData: Cropper.ImageData;
cropData: Cropper.CropBoxData;
blob?: Blob;
dataUrl?: string;
}
@Component({
selector: 'app-cropper',
standalone: true,
imports: [CommonModule, FormsModule],
templateUrl: './cropper.component.html',
styleUrl: './cropper.component.scss'
})
export class SCropperComponent implements OnInit, OnDestroy {
@ViewChild("image", { static: true }) image: ElementRef;
@Input() imageUrl: any;
@Input() settings: ImageCropperSetting;
@Input() cropbox: Cropper.CropBoxData;
@Input() loadImageErrorText: string;
@Input() cropperOptions: any = {};
@Output() export = new EventEmitter<ImageCropperResult>();
@Output() ready = new EventEmitter();
public isLoading: boolean = true;
public cropper: Cropper;
public imageElement: HTMLImageElement;
public loadError: any;
constructor() {}
ngOnInit() {}
ngOnDestroy() {
if (this.cropper) {
this.cropper.destroy();
this.cropper = null;
}
}
/**
* Image loaded
* @param ev
*/
imageLoaded(ev: Event) {
//
// Unset load error state
this.loadError = false;
//
// Setup image element
const image = ev.target as HTMLImageElement;
this.imageElement = image;
//
// Add crossOrigin?
if (this.cropperOptions.checkCrossOrigin)
image.crossOrigin = "anonymous";
//
// Image on ready event
image.addEventListener("ready", () => {
//
// Emit ready
this.ready.emit(true);
//
// Unset loading state
this.isLoading = false;
//
// Validate cropbox existance
if (this.cropbox) {
//
// Set cropbox data
this.cropper.setCropBoxData(this.cropbox);
}
});
//
// Setup aspect ratio according to settings
let aspectRatio = NaN;
this.settings={width:300,height:100}
if (this.settings) {
const { width, height } = this.settings;
aspectRatio = width / height;
}
//
// Set crop options
// extend default with custom config
this.cropperOptions = {
...{
aspectRatio,
checkCrossOrigin: true,
},
...this.cropperOptions,
};
//
// Set cropperjs
if (this.cropper) {
this.cropper.destroy();
this.cropper = undefined;
}
this.cropper = new Cropper(image, this.cropperOptions);
}
/**
* Image load error
* @param event
*/
imageLoadError(event: any) {
//
// Set load error state
this.loadError = true;
//
// Unset loading state
this.isLoading = false;
}
/**
* Export canvas
* @param base64
*/
exportCanvas(base64?: any) {
//
// Get and set image, crop and canvas data
const imageData = this.cropper.getImageData();
const cropData = this.cropper.getCropBoxData();
const canvas = this.cropper.getCroppedCanvas();
const data = { imageData, cropData };
//
// Create promise to resolve canvas data
const promise = new Promise((resolve) => {
//
// Validate base64
if (base64) {
//
// Resolve promise with dataUrl
return resolve({
dataUrl: canvas.toDataURL("image/png"),
});
}
canvas.toBlob((blob) => resolve({ blob }));
});
//
// Emit export data when promise is ready
promise.then((res: any) => {
this.export.emit({ ...data, ...res });
});
}
}

15
bizmatch/src/app/interceptors/loading.interceptor.ts
View File

@ -4,21 +4,6 @@ import { Observable, tap } from 'rxjs';
import { v4 } from 'uuid'; import { v4 } from 'uuid';
import { LoadingService } from '../services/loading.service'; import { LoadingService } from '../services/loading.service';
// export const loadingInterceptor: HttpInterceptorFn = (req, next) => {
// const loadingService = inject(LoadingService);
// const requestId = `HTTP-${v4()}`;
// loadingService.startLoading(requestId);
// return next(req).pipe(
// tap({
// finalize: () => loadingService.stopLoading(requestId),
// error: () => loadingService.stopLoading(requestId),
// complete: () => loadingService.stopLoading(requestId),
// })
// );
// };
@Injectable() @Injectable()
export class LoadingInterceptor implements HttpInterceptor { export class LoadingInterceptor implements HttpInterceptor {
constructor(private loadingService:LoadingService) { } constructor(private loadingService:LoadingService) { }

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"> <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"> <article class="flex flex-column md:flex-row w-full gap-3 p-3 surface-card">
<div class="relative"> <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> <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>
<div class="flex flex-column w-full gap-3"> <div class="flex flex-column w-full gap-3">

35
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="surface-ground px-4 py-8 md:px-6 lg:px-8">
<div class="p-fluid flex flex-column lg:flex-row"> <div class="p-fluid flex flex-column lg:flex-row">
<menu-account></menu-account> <menu-account></menu-account>
<p-toast></p-toast> <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> <div class="text-900 font-semibold text-lg mt-3">{{mode==='create'?'New':'Edit'}} Listing</div>
<p-divider></p-divider> <p-divider></p-divider>
<div class="flex gap-5 flex-column-reverse md:flex-row"> <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"> <div class="flex flex-column align-items-center flex-or">
<span class="font-medium text-900 mb-2">Property Picture</span> <span class="font-medium text-900 mb-2">Property Picture</span>
<!-- <img [src]="propertyPictureUrl" (error)="setImageToFallback($event)" class="image"/> --> <!-- <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> </div>
</div> </div>
@ -88,17 +95,14 @@
<ng-template let-image pTemplate="item"> <ng-template let-image pTemplate="item">
<div class="border-1 surface-border border-round m-2 text-center py-5 px-3"> <div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
<div class="mb-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>
<!-- <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 class="mt-5 flex align-items-center justify-content-center gap-2"> <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-file-edit" [rounded]="true" />
<p-button icon="pi pi-star-fill" [rounded]="true" severity="secondary" /> <p-button icon="fa-solid fa-trash-can" [rounded]="true" severity="danger"></p-button>
</div> </div>
</div> --> </div>
</div> </div>
</ng-template> </ng-template>
</p-carousel> </p-carousel>
@ -191,3 +195,12 @@
</div> </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 { ButtonModule } from 'primeng/button';
import { CheckboxModule } from 'primeng/checkbox'; import { CheckboxModule } from 'primeng/checkbox';
import { InputTextModule } from 'primeng/inputtext'; import { InputTextModule } from 'primeng/inputtext';
@ -29,19 +29,25 @@ import { AutoCompleteCompleteEvent, BusinessListing, CommercialPropertyListing,
import { GeoResult, GeoService } from '../../../services/geo.service'; import { GeoResult, GeoService } from '../../../services/geo.service';
import { InputNumberComponent, InputNumberModule } from '../../../components/inputnumber/inputnumber.component'; import { InputNumberComponent, InputNumberModule } from '../../../components/inputnumber/inputnumber.component';
import { environment } from '../../../../environments/environment'; import { environment } from '../../../../environments/environment';
import { FileUploadModule } from 'primeng/fileupload'; import { FileUpload, FileUploadModule } from 'primeng/fileupload';
import { CarouselModule } from 'primeng/carousel'; import { CarouselModule } from 'primeng/carousel';
import { v4 as uuidv4 } from 'uuid'; 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({ @Component({
selector: 'create-listing', selector: 'create-listing',
standalone: true, standalone: true,
imports: [SharedModule,ArrayToStringPipe, InputNumberModule,FileUploadModule,CarouselModule], imports: [SharedModule,ArrayToStringPipe, InputNumberModule,CarouselModule,DialogModule,AngularCropperjsModule,FileUploadModule],
providers:[MessageService], providers:[MessageService],
templateUrl: './edit-listing.component.html', templateUrl: './edit-listing.component.html',
styleUrl: './edit-listing.component.scss' styleUrl: './edit-listing.component.scss'
}) })
export class EditListingComponent { export class EditListingComponent {
@ViewChild(CropperComponent) public angularCropper: CropperComponent;
@ViewChild(FileUpload) public fileUpload: FileUpload;
listingCategory:'Business'|'Commercial Property'; listingCategory:'Business'|'Commercial Property';
category:string; category:string;
location:string; location:string;
@ -50,7 +56,7 @@ export class EditListingComponent {
listing:ListingType listing:ListingType
private id: string | undefined = this.activatedRoute.snapshot.params['id'] as string | undefined; private id: string | undefined = this.activatedRoute.snapshot.params['id'] as string | undefined;
user:User; user:User;
maxFileSize=1000000; maxFileSize=3000000;
uploadUrl:string; uploadUrl:string;
environment=environment; environment=environment;
propertyImages:ImageProperty[] propertyImages:ImageProperty[]
@ -70,14 +76,18 @@ export class EditListingComponent {
numVisible: 1, numVisible: 1,
numScroll: 1 numScroll: 1
} }
]; ];
imageUrl
config={aspectRatio: 16 / 9}
constructor(public selectOptions:SelectOptionsService, constructor(public selectOptions:SelectOptionsService,
private router: Router, private router: Router,
private activatedRoute: ActivatedRoute, private activatedRoute: ActivatedRoute,
private listingsService:ListingsService, private listingsService:ListingsService,
public userService: UserService, public userService: UserService,
private messageService: MessageService, private messageService: MessageService,
private geoService:GeoService){ private geoService:GeoService,
private imageUploadService: ImageService,
private loadingService:LoadingService){
this.user=this.userService.getUser(); this.user=this.userService.getUser();
// Abonniere Router-Events, um den aktiven Link zu ermitteln // Abonniere Router-Events, um den aktiven Link zu ermitteln
this.router.events.subscribe(event => { this.router.events.subscribe(event => {
@ -102,6 +112,7 @@ export class EditListingComponent {
this.uploadUrl = `${environment.apiBaseUrl}/bizmatch/image/uploadPropertyPicture/${this.listing.id}`; this.uploadUrl = `${environment.apiBaseUrl}/bizmatch/image/uploadPropertyPicture/${this.listing.id}`;
this.propertyImages=await this.listingsService.getPropertyImages(this.listing.id) this.propertyImages=await this.listingsService.getPropertyImages(this.listing.id)
} }
async save(){ async save(){
sessionStorage.removeItem('uuid') sessionStorage.removeItem('uuid')
await this.listingsService.save(this.listing,this.listing.listingsCategory); 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); this.suggestions = result.map(r=>r.city).slice(0,5);
} }
setImageToFallback(event: Event) { select(event:any){
(event.target as HTMLImageElement).src = `/assets/images/placeholder.png`; // Pfad zum Platzhalterbild this.imageUrl = URL.createObjectURL(event.files[0]);
} }
async onUploadPropertyPicture(event:any){ sendImage(){
// (<CommercialPropertyListing>this.listing).images=[]; this.imageUrl=null
// (<CommercialPropertyListing>this.listing).images.push(this.listing.id); this.loadingService.startLoading('uploadImage');
// await this.listingsService.save(this.listing) this.angularCropper.cropper.getCroppedCanvas().toBlob(async(blob) => {
this.propertyImages=await this.listingsService.getPropertyImages(this.listing.id)
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');
} }
} }

23
bizmatch/src/app/services/image.service.ts Normal file
View File

@ -0,0 +1,23 @@
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class ImageService {
private uploadUrl = 'http://localhost:3000/bizmatch/image/uploadPropertyPicture/1a4b800e-793c-4c47-b987-7bf634060a4e';
constructor(private http: HttpClient) { }
uploadImage(imageBlob: Blob) {
const formData = new FormData();
formData.append('file', imageBlob, 'image.png');
return this.http.post(this.uploadUrl, formData,{
// headers: this.headers,
reportProgress: true,
observe: 'events',
});
}
}

6
bizmatch/src/app/services/loading.service.ts
View File

@ -12,15 +12,15 @@ export class LoadingService {
public isLoading$ = this.loading$.asObservable().pipe( public isLoading$ = this.loading$.asObservable().pipe(
map((loading) => loading.length > 0), map((loading) => loading.length > 0),
debounceTime(200), debounceTime(100),
distinctUntilChanged(), distinctUntilChanged(),
shareReplay(1) shareReplay(1)
); );
public startLoading(type: string,request:string): void { public startLoading(type: string,request?:string): void {
if (!this.loading$.value.includes(type)) { if (!this.loading$.value.includes(type)) {
this.loading$.next(this.loading$.value.concat(type)); this.loading$.next(this.loading$.value.concat(type));
if (request.includes('uploadPropertyPicture')) { if (type==='uploadImage' || request?.includes('uploadPropertyPicture')) {
this.loadingTextSubject.next("Please wait - we're processing your image..."); this.loadingTextSubject.next("Please wait - we're processing your image...");
} else { } else {
this.loadingTextSubject.next(null); this.loadingTextSubject.next(null);