imagePath changed

This commit is contained in:
Andreas Knuth 2024-05-23 18:09:54 -05:00
parent c471629c6d
commit 5dc893da38
28 changed files with 209 additions and 172 deletions

View File

@ -56,3 +56,4 @@ pids
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
pictures
pictures_base

View File

@ -37,6 +37,7 @@
"cors": "^2.8.5",
"dotenv": "^16.4.5",
"drizzle-orm": "^0.30.8",
"fs-extra": "^11.2.0",
"handlebars": "^4.7.8",
"ky": "^1.2.0",
"nest-winston": "^1.9.4",

View File

@ -1,11 +1,13 @@
import 'dotenv/config';
import { drizzle } from 'drizzle-orm/node-postgres';
import { existsSync, readFileSync, readdirSync, statSync, unlinkSync } from 'fs';
import fs from 'fs-extra';
import { join } from 'path';
import pkg from 'pg';
import { rimraf } from 'rimraf';
import sharp from 'sharp';
import { BusinessListing, CommercialPropertyListing, User, UserData } from 'src/models/db.model.js';
import { emailToDirName } from 'src/models/main.model.js';
import * as schema from './schema.js';
const { Pool } = pkg;
@ -32,6 +34,11 @@ const targetPathProfile = `./pictures/profile`;
deleteFilesOfDir(targetPathProfile);
const targetPathLogo = `./pictures/logo`;
deleteFilesOfDir(targetPathLogo);
const targetPathProperty = `./pictures/property`;
deleteFilesOfDir(targetPathProperty);
fs.ensureDirSync(`./pictures/logo`);
fs.ensureDirSync(`./pictures/profile`);
fs.ensureDirSync(`./pictures/property`);
for (const userData of usersData) {
const user: User = { firstname: '', lastname: '', email: '' };
user.licensedIn = [];
@ -58,20 +65,21 @@ for (const userData of usersData) {
user.gender = userData.gender;
user.created = new Date();
user.updated = new Date();
const u = await db.insert(schema.users).values(user).returning({ insertedId: schema.users.id, gender: schema.users.gender });
generatedUserData.push(u[0].insertedId);
const u = await db.insert(schema.users).values(user).returning({ insertedId: schema.users.id, gender: schema.users.gender, email: schema.users.email });
generatedUserData.push(u[0]);
i++;
if (u[0].gender === 'male') {
male++;
const data = readFileSync(`./pictures/profile_base/Mann_${male}.jpg`);
await storeProfilePicture(data, u[0].insertedId);
const data = readFileSync(`./pictures_base/profile/Mann_${male}.jpg`);
await storeProfilePicture(data, emailToDirName(u[0].email));
} else {
female++;
const data = readFileSync(`./pictures/profile_base/Frau_${female}.jpg`);
await storeProfilePicture(data, u[0].insertedId);
const data = readFileSync(`./pictures_base/profile/Frau_${female}.jpg`);
await storeProfilePicture(data, emailToDirName(u[0].email));
}
const data = readFileSync(`./pictures/logos_base/${i}.jpg`);
await storeCompanyLogo(data, u[0].insertedId);
const data = readFileSync(`./pictures_base/logo/${i}.jpg`);
await storeCompanyLogo(data, emailToDirName(u[0].email));
}
//Business Listings
filePath = `./data/businesses.json`;
@ -82,7 +90,9 @@ for (const business of businessJsonData) {
delete business.id;
business.created = new Date(business.created);
business.updated = new Date(business.created);
business.userId = getRandomItem(generatedUserData);
const user = getRandomItem(generatedUserData);
business.userId = user.insertedId;
business.imageName = emailToDirName(user.email);
await db.insert(schema.businesses).values(business);
}
//Corporate Listings
@ -92,14 +102,20 @@ const commercialJsonData = JSON.parse(data) as CommercialPropertyListing[]; // E
for (const commercial of commercialJsonData) {
const id = commercial.id;
delete commercial.id;
const user = getRandomItem(generatedUserData);
commercial.imageOrder = getFilenames(id);
commercial.imagePath = id;
commercial.imagePath = emailToDirName(user.email);
const insertionDate = getRandomDateWithinLastYear();
commercial.created = insertionDate;
commercial.updated = insertionDate;
commercial.userId = getRandomItem(generatedUserData);
await db.insert(schema.commercials).values(commercial);
commercial.userId = user.insertedId;
const result = await db.insert(schema.commercials).values(commercial).returning();
//fs.ensureDirSync(`./pictures/property/${result[0].imagePath}/${result[0].serialId}`);
try {
fs.copySync(`./pictures_base/property/${id}`, `./pictures/property/${result[0].imagePath}/${result[0].serialId}`);
} catch (err) {
console.log(`----- No pictures available for ${id} ------`);
}
}
//End
@ -115,7 +131,7 @@ function getRandomItem<T>(arr: T[]): T {
}
function getFilenames(id: string): string[] {
try {
let filePath = `./pictures/property/${id}`;
let filePath = `./pictures_base/property/${id}`;
return readdirSync(filePath);
} catch (e) {
return null;
@ -141,14 +157,14 @@ async function storeProfilePicture(buffer: Buffer, userId: string) {
await sharp(output).toFile(`./pictures/profile/${userId}.avif`);
}
async function storeCompanyLogo(buffer: Buffer, userId: string) {
async function storeCompanyLogo(buffer: Buffer, adjustedEmail: string) {
let quality = 50;
const output = await sharp(buffer)
.resize({ width: 300 })
.avif({ quality }) // Verwende AVIF
//.webp({ quality }) // Verwende Webp
.toBuffer();
await sharp(output).toFile(`./pictures/logo/${userId}.avif`); // Ersetze Dateierweiterung
await sharp(output).toFile(`./pictures/logo/${adjustedEmail}.avif`); // Ersetze Dateierweiterung
// await fs.outputFile(`./pictures/logo/${userId}`, file.buffer);
}

View File

@ -28,6 +28,7 @@ CREATE TABLE IF NOT EXISTS "businesses" (
"reasonForSale" varchar(255),
"brokerLicencing" varchar(255),
"internals" text,
"imagePath" varchar(200),
"created" timestamp,
"updated" timestamp,
"visits" integer,

View File

@ -1,5 +1,5 @@
{
"id": "a27bba95-3910-4b41-b241-ce91f2201311",
"id": "fc58c59b-ac5c-406e-8fdb-b05de40aed17",
"prevId": "00000000-0000-0000-0000-000000000000",
"version": "5",
"dialect": "pg",
@ -147,6 +147,12 @@
"primaryKey": false,
"notNull": false
},
"imagePath": {
"name": "imagePath",
"type": "varchar(200)",
"primaryKey": false,
"notNull": false
},
"created": {
"name": "created",
"type": "timestamp",

View File

@ -5,8 +5,8 @@
{
"idx": 0,
"version": "5",
"when": 1716417232952,
"tag": "0000_melted_doomsday",
"when": 1716495198537,
"tag": "0000_burly_bruce_banner",
"breakpoints": true
}
]

View File

@ -49,6 +49,7 @@ export const businesses = pgTable('businesses', {
reasonForSale: varchar('reasonForSale', { length: 255 }),
brokerLicencing: varchar('brokerLicencing', { length: 255 }),
internals: text('internals'),
imageName: varchar('imagePath', { length: 200 }),
created: timestamp('created'),
updated: timestamp('updated'),
visits: integer('visits'),

View File

@ -20,6 +20,9 @@ export class FileService {
fs.ensureDirSync(`./pictures/logo`);
fs.ensureDirSync(`./pictures/property`);
}
// ############
// Subscriptions
// ############
private loadSubscriptions(): void {
const filePath = join(__dirname, '../..', 'assets', 'subscriptions.json');
const rawData = readFileSync(filePath, 'utf8');
@ -28,36 +31,43 @@ export class FileService {
getSubscriptions(): Subscription[] {
return this.subscriptions;
}
async storeProfilePicture(file: Express.Multer.File, userId: string) {
// ############
// Profile
// ############
async storeProfilePicture(file: Express.Multer.File, adjustedEmail: string) {
let quality = 50;
const output = await sharp(file.buffer)
.resize({ width: 300 })
.avif({ quality }) // Verwende AVIF
//.webp({ quality }) // Verwende Webp
.toBuffer();
await sharp(output).toFile(`./pictures/profile/${userId}.avif`);
await sharp(output).toFile(`./pictures/profile/${adjustedEmail}.avif`);
}
hasProfile(userId: string) {
return fs.existsSync(`./pictures/profile/${userId}.avif`);
hasProfile(adjustedEmail: string) {
return fs.existsSync(`./pictures/profile/${adjustedEmail}.avif`);
}
async storeCompanyLogo(file: Express.Multer.File, userId: string) {
// ############
// Logo
// ############
async storeCompanyLogo(file: Express.Multer.File, adjustedEmail: string) {
let quality = 50;
const output = await sharp(file.buffer)
.resize({ width: 300 })
.avif({ quality }) // Verwende AVIF
//.webp({ quality }) // Verwende Webp
.toBuffer();
await sharp(output).toFile(`./pictures/logo/${userId}.avif`); // Ersetze Dateierweiterung
await sharp(output).toFile(`./pictures/logo/${adjustedEmail}.avif`); // Ersetze Dateierweiterung
// await fs.outputFile(`./pictures/logo/${userId}`, file.buffer);
}
hasCompanyLogo(userId: string) {
return fs.existsSync(`./pictures/logo/${userId}.avif`) ? true : false;
hasCompanyLogo(adjustedEmail: string) {
return fs.existsSync(`./pictures/logo/${adjustedEmail}.avif`) ? true : false;
}
async getPropertyImages(listingId: string): Promise<string[]> {
// ############
// Property
// ############
async getPropertyImages(imagePath: string, serial: string): Promise<string[]> {
const result: string[] = [];
const directory = `./pictures/property/${listingId}`;
const directory = `./pictures/property/${imagePath}/${serial}`;
if (fs.existsSync(directory)) {
const files = await fs.readdir(directory);
files.forEach(f => {
@ -68,9 +78,9 @@ export class FileService {
return [];
}
}
async hasPropertyImages(listingId: string): Promise<boolean> {
async hasPropertyImages(imagePath: string, serial: string): Promise<boolean> {
const result: ImageProperty[] = [];
const directory = `./pictures/property/${listingId}`;
const directory = `./pictures/property/${imagePath}/${serial}`;
if (fs.existsSync(directory)) {
const files = await fs.readdir(directory);
return files.length > 0;
@ -78,15 +88,18 @@ export class FileService {
return false;
}
}
async storePropertyPicture(file: Express.Multer.File, listingId: string): Promise<string> {
async storePropertyPicture(file: Express.Multer.File, imagePath: string, serial: string): Promise<string> {
const suffix = file.mimetype.includes('png') ? 'png' : 'jpg';
const directory = `./pictures/property/${listingId}`;
const directory = `./pictures/property/${imagePath}/${serial}`;
fs.ensureDirSync(`${directory}`);
const imageName = await this.getNextImageName(directory);
//await fs.outputFile(`${directory}/${imageName}`, file.buffer);
await this.resizeImageToAVIF(file.buffer, 150 * 1024, imageName, directory);
return `${imageName}.avif`;
}
// ############
// utils
// ############
async getNextImageName(directory) {
try {
const files = await fs.readdir(directory);
@ -115,22 +128,22 @@ export class FileService {
let timeTaken = Date.now() - start;
this.logger.info(`Quality: ${quality} - Time: ${timeTaken} milliseconds`);
}
getProfileImagesForUsers(userids: string) {
const ids = userids.split(',');
let result = {};
for (const id of ids) {
result = { ...result, [id]: fs.existsSync(`./pictures/profile/${id}.avif`) };
}
return result;
}
getCompanyLogosForUsers(userids: string) {
const ids = userids.split(',');
let result = {};
for (const id of ids) {
result = { ...result, [id]: fs.existsSync(`./pictures/logo/${id}.avif`) };
}
return result;
}
// getProfileImagesForUsers(userids: string) {
// const ids = userids.split(',');
// let result = {};
// for (const id of ids) {
// result = { ...result, [id]: fs.existsSync(`./pictures/profile/${id}.avif`) };
// }
// return result;
// }
// getCompanyLogosForUsers(userids: string) {
// const ids = userids.split(',');
// let result = {};
// for (const id of ids) {
// result = { ...result, [id]: fs.existsSync(`./pictures/logo/${id}.avif`) };
// }
// return result;
// }
deleteImage(path: string) {
fs.unlinkSync(path);
}

View File

@ -17,58 +17,54 @@ export class ImageController {
@Inject(WINSTON_MODULE_PROVIDER) private readonly logger: Logger,
private selectOptions: SelectOptionsService,
) {}
@Post('uploadPropertyPicture/:imagePath')
// ############
// Property
// ############
@Post('uploadPropertyPicture/:imagePath/:serial')
@UseInterceptors(FileInterceptor('file'))
async uploadPropertyPicture(@UploadedFile() file: Express.Multer.File, @Param('imagePath') imagePath: string) {
const imagename = await this.fileService.storePropertyPicture(file, imagePath);
async uploadPropertyPicture(@UploadedFile() file: Express.Multer.File, @Param('imagePath') imagePath: string, @Param('serial') serial: string) {
const imagename = await this.fileService.storePropertyPicture(file, imagePath, serial);
await this.listingService.addImage(imagePath, imagename);
}
@Post('uploadProfile/:id')
@UseInterceptors(FileInterceptor('file'))
async uploadProfile(@UploadedFile() file: Express.Multer.File, @Param('id') id: string) {
await this.fileService.storeProfilePicture(file, id);
}
@Post('uploadCompanyLogo/:id')
@UseInterceptors(FileInterceptor('file'))
async uploadCompanyLogo(@UploadedFile() file: Express.Multer.File, @Param('id') id: string) {
await this.fileService.storeCompanyLogo(file, id);
}
@Get(':id')
async getPropertyImagesById(@Param('id') id: string): Promise<any> {
const result = await this.listingService.findById(id, commercials);
@Get(':email/:serial')
async getPropertyImagesById(@Param('email') adjustedEmail: string, @Param('serial') serial: string): Promise<any> {
const result = await this.listingService.findByImagePath(adjustedEmail);
const listing = result as CommercialPropertyListing;
if (listing.imageOrder) {
return listing.imageOrder;
} else {
const imageOrder = await this.fileService.getPropertyImages(id);
const imageOrder = await this.fileService.getPropertyImages(adjustedEmail, serial);
listing.imageOrder = imageOrder;
this.listingService.updateListing(listing.id, listing, commercials);
return imageOrder;
}
}
@Get('profileImages/:userids')
async getProfileImagesForUsers(@Param('userids') userids: string): Promise<any> {
return await this.fileService.getProfileImagesForUsers(userids);
@Delete('propertyPicture/:imagePath/:serial/:imagename')
async deletePropertyImagesById(@Param('imagePath') imagePath: string, @Param('serial') serial: string, @Param('imagename') imagename: string): Promise<any> {
this.fileService.deleteImage(`pictures/property/${imagePath}/${serial}/${imagename}`);
}
@Get('companyLogos/:userids')
async getCompanyLogosForUsers(@Param('userids') userids: string): Promise<any> {
return await this.fileService.getCompanyLogosForUsers(userids);
// ############
// Profile
// ############
@Post('uploadProfile/:email')
@UseInterceptors(FileInterceptor('file'))
async uploadProfile(@UploadedFile() file: Express.Multer.File, @Param('email') adjustedEmail: string) {
await this.fileService.storeProfilePicture(file, adjustedEmail);
}
@Delete('propertyPicture/:imagePath/:imagename')
async deletePropertyImagesById(@Param('imagePath') imagePath: string, @Param('imagename') imagename: string): Promise<any> {
this.fileService.deleteImage(`pictures/property/${imagePath}/${imagename}`);
@Delete('profile/:email/')
async deleteProfileImagesById(@Param('email') email: string): Promise<any> {
this.fileService.deleteImage(`pictures/profile/${email}.avif`);
}
@Delete('logo/:userid/')
async deleteLogoImagesById(@Param('userid') userid: string): Promise<any> {
this.fileService.deleteImage(`pictures/logo/${userid}.avif`);
// ############
// Logo
// ############
@Post('uploadCompanyLogo/:email')
@UseInterceptors(FileInterceptor('file'))
async uploadCompanyLogo(@UploadedFile() file: Express.Multer.File, @Param('email') adjustedEmail: string) {
await this.fileService.storeCompanyLogo(file, adjustedEmail);
}
@Delete('profile/:userid/')
async deleteProfileImagesById(@Param('userid') userid: string): Promise<any> {
this.fileService.deleteImage(`pictures/profile/${userid}.avif`);
@Delete('logo/:email/')
async deleteLogoImagesById(@Param('email') adjustedEmail: string): Promise<any> {
this.fileService.deleteImage(`pictures/logo/${adjustedEmail}.avif`);
}
}

View File

@ -61,6 +61,7 @@ export interface BusinessListing {
reasonForSale?: string;
brokerLicencing?: string;
internals?: string;
imageName?: string;
created?: Date;
updated?: Date;
visits?: number;

View File

@ -7,7 +7,7 @@ import * as schema from '../drizzle/schema.js';
import { PG_CONNECTION } from '../drizzle/schema.js';
import { FileService } from '../file/file.service.js';
import { User } from '../models/db.model.js';
import { ListingCriteria } from '../models/main.model.js';
import { ListingCriteria, emailToDirName } from '../models/main.model.js';
@Injectable()
export class UserService {
@ -33,8 +33,8 @@ export class UserService {
.from(schema.users)
.where(sql`email = ${email}`)) as User[];
const user = users[0];
user.hasCompanyLogo = this.fileService.hasCompanyLogo(user.id);
user.hasProfile = this.fileService.hasProfile(user.id);
user.hasCompanyLogo = this.fileService.hasCompanyLogo(emailToDirName(user.email));
user.hasProfile = this.fileService.hasProfile(emailToDirName(user.email));
return user;
}
async getUserById(id: string) {
@ -43,8 +43,8 @@ export class UserService {
.from(schema.users)
.where(sql`id = ${id}`)) as User[];
const user = users[0];
user.hasCompanyLogo = this.fileService.hasCompanyLogo(id);
user.hasProfile = this.fileService.hasProfile(id);
user.hasCompanyLogo = this.fileService.hasCompanyLogo(emailToDirName(user.email));
user.hasProfile = this.fileService.hasProfile(emailToDirName(user.email));
return user;
}
async saveUser(user: any): Promise<User> {

View File

@ -94,7 +94,7 @@
<div class="surface-border mb-4 col-12 flex align-items-center">
Listing by &nbsp;<a routerLink="/details-user/{{ listingUser.id }}" class="mr-2">{{ listingUser.firstname }} {{ listingUser.lastname }}</a>
@if(listingUser.hasCompanyLogo){
<img src="{{ env.imageBaseUrl }}/pictures/logo/{{ listingUser.id }}.avif?_ts={{ ts }}" class="mr-5 lg:mb-0" style="height: 30px; max-width: 100px" />
<img src="{{ env.imageBaseUrl }}/pictures/logo/{{ listing.imageName }}.avif?_ts={{ ts }}" class="mr-5 lg:mb-0" style="height: 30px; max-width: 100px" />
}
</div>
}

View File

@ -51,7 +51,7 @@
<div class="col-12 md:col-6">
<p-galleria [value]="propertyImages" [showIndicators]="true" [showThumbnails]="false" [responsiveOptions]="responsiveOptions" [containerStyle]="{ 'max-width': '640px' }" [numVisible]="5">
<ng-template pTemplate="item" let-item>
<img src="{{ env.imageBaseUrl }}/pictures/property/{{ listing.imagePath }}/{{ item }}" style="width: 100%" />
<img src="{{ env.imageBaseUrl }}/pictures/property/{{ listing.imagePath }}/{{ listing.serialId }}/{{ item }}" style="width: 100%" />
</ng-template>
</p-galleria>
@if (mailinfo){
@ -84,7 +84,7 @@
<div class="surface-border mb-4 col-12 flex align-items-center">
Listing by &nbsp;<a routerLink="/details-user/{{ listingUser.id }}" class="mr-2">{{ listingUser.firstname }} {{ listingUser.lastname }}</a>
@if(listingUser.hasCompanyLogo){
<img src="{{ env.imageBaseUrl }}/pictures/logo/{{ listingUser.id }}.avif?_ts={{ ts }}" class="mr-5 lg:mb-0" style="height: 30px; max-width: 100px" />
<img src="{{ env.imageBaseUrl }}/pictures/logo/{{ listing.imagePath }}.avif?_ts={{ ts }}" class="mr-5 lg:mb-0" style="height: 30px; max-width: 100px" />
}
</div>
}

View File

@ -10,6 +10,7 @@ import { CommercialPropertyListing, User } from '../../../../../../bizmatch-serv
import { ErrorResponse, KeycloakUser, ListingCriteria, MailInfo } from '../../../../../../bizmatch-server/src/models/main.model';
import { environment } from '../../../../environments/environment';
import { HistoryService } from '../../../services/history.service';
import { ImageService } from '../../../services/image.service';
import { ListingsService } from '../../../services/listings.service';
import { MailService } from '../../../services/mail.service';
import { SelectOptionsService } from '../../../services/select-options.service';
@ -67,6 +68,7 @@ export class DetailsCommercialPropertyListingComponent {
private sanitizer: DomSanitizer,
public historyService: HistoryService,
public keycloakService: KeycloakService,
private imageService: ImageService,
) {
this.mailinfo = { sender: {}, userId: '', email: '', url: environment.mailinfoUrl };
@ -77,7 +79,7 @@ export class DetailsCommercialPropertyListingComponent {
const token = await this.keycloakService.getToken();
this.user = map2User(token);
this.listing = await lastValueFrom(this.listingsService.getListingById(this.id, 'commercialProperty'));
this.propertyImages = await this.listingsService.getPropertyImages(this.listing.id);
this.propertyImages = await this.imageService.getPropertyImages(this.listing.imagePath, this.listing.serialId);
this.listingUser = await this.userService.getById(this.listing.userId);
this.description = this.sanitizer.bypassSecurityTrustHtml(this.listing.description);
}

View File

@ -6,7 +6,7 @@
<div class="flex align-items-start flex-column lg:flex-row lg:justify-content-between">
<div class="flex align-items-start flex-column md:flex-row">
@if(user.hasProfile){
<img src="{{ env.imageBaseUrl }}/pictures//profile/{{ user.id }}.avif?_ts={{ ts }}" class="mr-5 mb-3 lg:mb-0" style="width: 90px" />
<img src="{{ env.imageBaseUrl }}/pictures//profile/{{ emailToDirName(user.email) }}.avif?_ts={{ ts }}" class="mr-5 mb-3 lg:mb-0" style="width: 90px" />
} @else {
<img src="assets/images/person_placeholder.jpg" class="mr-5 mb-3 lg:mb-0" style="width: 90px" />
}
@ -30,7 +30,7 @@
<!-- <span class="font-medium text-500">Logo</span> -->
<div>
@if(user.hasCompanyLogo){
<img src="{{ env.imageBaseUrl }}/pictures/logo/{{ user.id }}.avif?_ts={{ ts }}" class="mr-5 lg:mb-0" style="height: 60px; max-width: 100px" />
<img src="{{ env.imageBaseUrl }}/pictures/logo/{{ emailToDirName(user.email) }}.avif?_ts={{ ts }}" class="mr-5 lg:mb-0" style="height: 60px; max-width: 100px" />
}
<!-- <img *ngIf="!user.hasCompanyLogo" src="assets/images/placeholder.png"
class="mr-5 lg:mb-0" style="height:60px;max-width:100px" /> -->

View File

@ -6,7 +6,7 @@ import { MessageService } from 'primeng/api';
import { GalleriaModule } from 'primeng/galleria';
import { Observable } from 'rxjs';
import { BusinessListing, CommercialPropertyListing, User } from '../../../../../../bizmatch-server/src/models/db.model';
import { KeycloakUser, ListingCriteria } from '../../../../../../bizmatch-server/src/models/main.model';
import { KeycloakUser, ListingCriteria, emailToDirName } from '../../../../../../bizmatch-server/src/models/main.model';
import { environment } from '../../../../environments/environment';
import { HistoryService } from '../../../services/history.service';
import { ImageService } from '../../../services/image.service';
@ -37,6 +37,7 @@ export class DetailsUserComponent {
offeredServices: SafeHtml;
ts = new Date().getTime();
env = environment;
emailToDirName = emailToDirName;
constructor(
private activatedRoute: ActivatedRoute,
private router: Router,

View File

@ -32,7 +32,7 @@
<div class="surface-card p-4 flex flex-column align-items-center md:flex-row md:align-items-stretch h-full">
<span>
@if(user.hasProfile){
<img src="{{ env.imageBaseUrl }}/pictures/profile/{{ user.id }}.avif?_ts={{ ts }}" class="w-5rem" />
<img src="{{ env.imageBaseUrl }}/pictures/profile/{{ emailToDirName(user.email) }}.avif?_ts={{ ts }}" class="w-5rem" />
} @else {
<img src="assets/images/person_placeholder.jpg" class="w-5rem" />
}
@ -45,7 +45,7 @@
</div>
<div class="px-4 py-3 text-right flex justify-content-between align-items-center">
@if(user.hasCompanyLogo){
<img src="{{ env.imageBaseUrl }}/pictures/logo/{{ user.id }}.avif?_ts={{ ts }}" class="rounded-image" />
<img src="{{ env.imageBaseUrl }}/pictures/logo/{{ emailToDirName(user.email) }}.avif?_ts={{ ts }}" class="rounded-image" />
} @else {
<img src="assets/images/placeholder.png" class="rounded-image" />
}

View File

@ -12,7 +12,7 @@ import { PaginatorModule } from 'primeng/paginator';
import { StyleClassModule } from 'primeng/styleclass';
import { ToggleButtonModule } from 'primeng/togglebutton';
import { BusinessListing, User } from '../../../../../../bizmatch-server/src/models/db.model';
import { ListingCriteria, ListingType } from '../../../../../../bizmatch-server/src/models/main.model';
import { ListingCriteria, ListingType, emailToDirName } from '../../../../../../bizmatch-server/src/models/main.model';
import { environment } from '../../../../environments/environment';
import { ImageService } from '../../../services/image.service';
import { ListingsService } from '../../../services/listings.service';
@ -60,7 +60,7 @@ export class BrokerListingsComponent {
ts = new Date().getTime();
env = environment;
public category: 'business' | 'commercialProperty' | 'professionals_brokers' | undefined;
emailToDirName = emailToDirName;
constructor(
public selectOptions: SelectOptionsService,
private listingsService: ListingsService,

View File

@ -51,7 +51,7 @@
@for (listing of listings; track listing.id) {
<div class="col-12 lg:col-3 p-3">
<div class="shadow-2 border-round surface-card h-full flex-column justify-content-between flex">
<div class="p-4 flex flex-column relative">
<div class="p-4 flex flex-column relative h-full">
<div class="flex align-items-center">
<span [class]="selectOptions.getBgColorType(listing.type)" class="inline-flex border-circle align-items-center justify-content-center mr-3" style="width: 38px; height: 38px">
<i [class]="selectOptions.getIconAndTextColorType(listing.type)" class="pi text-xl"></i>
@ -66,7 +66,7 @@
<p class="mt-0 mb-1 text-700 line-height-3">Established: {{ listing.established }}</p>
<div class="icon-pos">
<a routerLink="/details-user/{{ listing.userId }}" class="mr-2"
><img src="{{ env.imageBaseUrl }}/pictures/logo/{{ listing.userId }}.avif?_ts={{ ts }}" (error)="imageErrorHandler(listing)" class="rounded-image"
><img src="{{ env.imageBaseUrl }}/pictures/logo/{{ listing.imageName }}.avif?_ts={{ ts }}" (error)="imageErrorHandler(listing)" class="rounded-image"
/></a>
</div>
</div>

View File

@ -13,7 +13,7 @@ import { StyleClassModule } from 'primeng/styleclass';
import { ToggleButtonModule } from 'primeng/togglebutton';
import { TooltipModule } from 'primeng/tooltip';
import { BusinessListing } from '../../../../../../bizmatch-server/src/models/db.model';
import { ListingCriteria, ListingType } from '../../../../../../bizmatch-server/src/models/main.model';
import { ListingCriteria, ListingType, emailToDirName } from '../../../../../../bizmatch-server/src/models/main.model';
import { environment } from '../../../../environments/environment';
import { ImageService } from '../../../services/image.service';
import { ListingsService } from '../../../services/listings.service';
@ -58,7 +58,7 @@ export class BusinessListingsComponent {
rows: number = 12;
env = environment;
public category: 'business' | 'commercialProperty' | 'professionals_brokers' | undefined;
emailToDirName = emailToDirName;
constructor(
public selectOptions: SelectOptionsService,
private listingsService: ListingsService,

View File

@ -51,7 +51,11 @@
<article class="flex flex-column md:flex-row w-full gap-3 p-3 surface-card">
<div class="relative">
@if (listing.imageOrder?.length>0){
<img src="{{ env.imageBaseUrl }}/pictures/property/{{ listing.imagePath }}/{{ listing.imageOrder[0] }}?_ts={{ ts }}" alt="Image" class="border-round w-full h-full md:w-12rem md:h-9rem" />
<img
src="{{ env.imageBaseUrl }}/pictures/property/{{ listing.imagePath }}/{{ listing.serialId }}/{{ listing.imageOrder[0] }}?_ts={{ ts }}"
alt="Image"
class="border-round w-full h-full md:w-12rem md:h-9rem"
/>
} @else {
<img src="assets/images/placeholder_properties.jpg" alt="Image" class="border-round w-full h-full md:w-12rem md:h-9rem" />
}

View File

@ -13,7 +13,7 @@ import { FileUpload, FileUploadModule } from 'primeng/fileupload';
import { SelectButtonModule } from 'primeng/selectbutton';
import { lastValueFrom } from 'rxjs';
import { User } from '../../../../../../bizmatch-server/src/models/db.model';
import { AutoCompleteCompleteEvent, Invoice, Subscription } from '../../../../../../bizmatch-server/src/models/main.model';
import { AutoCompleteCompleteEvent, Invoice, Subscription, emailToDirName } from '../../../../../../bizmatch-server/src/models/main.model';
import { environment } from '../../../../environments/environment';
import { ImageCropperComponent, stateOptions } from '../../../components/image-cropper/image-cropper.component';
import { GeoService } from '../../../services/geo.service';
@ -80,8 +80,8 @@ export class AccountComponent {
}
this.userSubscriptions = await lastValueFrom(this.subscriptionService.getAllSubscriptions(this.user.id));
this.profileUrl = this.user.hasProfile ? `${this.env.imageBaseUrl}/pictures/profile/${this.user.id}.avif?_ts=${new Date().getTime()}` : `/assets/images/placeholder.png`;
this.companyLogoUrl = this.user.hasCompanyLogo ? `${this.env.imageBaseUrl}/pictures/logo/${this.user.id}.avif?_ts=${new Date().getTime()}` : `/assets/images/placeholder.png`;
this.profileUrl = this.user.hasProfile ? `${this.env.imageBaseUrl}/pictures/profile/${emailToDirName(this.user.email)}.avif?_ts=${new Date().getTime()}` : `/assets/images/placeholder.png`;
this.companyLogoUrl = this.user.hasCompanyLogo ? `${this.env.imageBaseUrl}/pictures/logo/${emailToDirName(this.user.email)}.avif?_ts=${new Date().getTime()}` : `/assets/images/placeholder.png`;
}
printInvoice(invoice: Invoice) {}
@ -92,11 +92,11 @@ export class AccountComponent {
onUploadCompanyLogo(event: any) {
const uniqueSuffix = '?_ts=' + new Date().getTime();
this.companyLogoUrl = `${this.env.imageBaseUrl}/pictures/logo/${this.user.id}${uniqueSuffix}`;
this.companyLogoUrl = `${this.env.imageBaseUrl}/pictures/logo/${emailToDirName(this.user.email)}${uniqueSuffix}`;
}
onUploadProfilePicture(event: any) {
const uniqueSuffix = '?_ts=' + new Date().getTime();
this.profileUrl = `${this.env.imageBaseUrl}/pictures/profile/${this.user.id}${uniqueSuffix}`;
this.profileUrl = `${this.env.imageBaseUrl}/pictures/profile/${emailToDirName(this.user.email)}${uniqueSuffix}`;
}
setImageToFallback(event: Event) {
(event.target as HTMLImageElement).src = `/assets/images/placeholder.png`; // Pfad zum Platzhalterbild
@ -132,30 +132,30 @@ export class AccountComponent {
ratioVariable: type === 'company' ? true : false,
},
header: 'Edit Image',
width: '50vw',
width: '30vw',
modal: true,
closeOnEscape: true,
keepInViewport: true,
closable: false,
breakpoints: {
'960px': '75vw',
'640px': '90vw',
},
// breakpoints: {
// '960px': '75vw',
// '640px': '90vw',
// },
});
this.dialogRef.onClose.subscribe(cropper => {
if (cropper) {
this.loadingService.startLoading('uploadImage');
cropper.getCroppedCanvas().toBlob(async blob => {
this.imageUploadService.uploadImage(blob, type === 'company' ? 'uploadCompanyLogo' : 'uploadProfile', this.user.id).subscribe(
this.imageUploadService.uploadImage(blob, type === 'company' ? 'uploadCompanyLogo' : 'uploadProfile', emailToDirName(this.user.email)).subscribe(
async event => {
if (event.type === HttpEventType.Response) {
this.loadingService.stopLoading('uploadImage');
if (this.type === 'company') {
this.user.hasCompanyLogo = true; //
this.companyLogoUrl = `${this.env.imageBaseUrl}/pictures/logo/${this.user.id}.avif?_ts=${new Date().getTime()}`;
this.companyLogoUrl = `${this.env.imageBaseUrl}/pictures/logo/${emailToDirName(this.user.email)}.avif?_ts=${new Date().getTime()}`;
} else {
this.user.hasProfile = true;
this.profileUrl = `${this.env.imageBaseUrl}/pictures/profile/${this.user.id}.avif?_ts=${new Date().getTime()}`;
this.profileUrl = `${this.env.imageBaseUrl}/pictures/profile/${emailToDirName(this.user.email)}.avif?_ts=${new Date().getTime()}`;
}
await this.userService.save(this.user);
}
@ -180,10 +180,10 @@ export class AccountComponent {
accept: async () => {
if (type === 'profile') {
this.user.hasProfile = false;
await Promise.all([this.imageService.deleteProfileImagesById(this.user.id), this.userService.save(this.user)]);
await Promise.all([this.imageService.deleteProfileImagesById(this.user.email), this.userService.save(this.user)]);
} else {
this.user.hasCompanyLogo = false;
await Promise.all([this.imageService.deleteLogoImagesById(this.user.id), this.userService.save(this.user)]);
await Promise.all([this.imageService.deleteLogoImagesById(this.user.email), this.userService.save(this.user)]);
}
this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'Image deleted' });
this.user = await this.userService.getById(this.user.id);

View File

@ -18,7 +18,7 @@ import { DialogService, DynamicDialogModule, DynamicDialogRef } from 'primeng/dy
import { EditorModule } from 'primeng/editor';
import { FileUpload, FileUploadModule } from 'primeng/fileupload';
import { BusinessListing, CommercialPropertyListing, User } from '../../../../../../bizmatch-server/src/models/db.model';
import { AutoCompleteCompleteEvent, ImageProperty } from '../../../../../../bizmatch-server/src/models/main.model';
import { AutoCompleteCompleteEvent, ImageProperty, emailToDirName } from '../../../../../../bizmatch-server/src/models/main.model';
import { environment } from '../../../../environments/environment';
import { InputNumberModule } from '../../../components/inputnumber/inputnumber.component';
import { ArrayToStringPipe } from '../../../pipes/array-to-string.pipe';
@ -62,7 +62,6 @@ export class EditBusinessListingComponent {
maxFileSize = 3000000;
uploadUrl: string;
environment = environment;
propertyImages: string[];
responsiveOptions = [
{
breakpoint: '1199px',
@ -123,14 +122,15 @@ export class EditBusinessListingComponent {
this.listing = await lastValueFrom(this.listingsService.getListingById(this.id, 'business'));
} else {
this.listing = createDefaultBusinessListing();
this.listing.userId = await this.userService.getId(keycloakUser.email);
const listingUser = await this.userService.getByMail(keycloakUser.email);
this.listing.userId = listingUser.id;
this.listing.imageName = emailToDirName(keycloakUser.email);
if (this.data) {
this.listing.title = this.data?.title;
this.listing.description = this.data?.description;
}
}
this.uploadUrl = `${environment.apiBaseUrl}/bizmatch/image/uploadPropertyPicture/${this.listing.id}`;
this.propertyImages = await this.listingsService.getPropertyImages(this.listing.id);
}
async save() {

View File

@ -116,7 +116,7 @@
@for (image of propertyImages; track image) {
<span cdkDropList mixedCdkDropList>
<div cdkDrag mixedCdkDragSizeHelper class="image-wrap">
<img src="{{ env.imageBaseUrl }}/pictures/property/{{ listing.imagePath }}/{{ image }}?_ts={{ ts }}" [alt]="image" class="shadow-2" cdkDrag />
<img src="{{ env.imageBaseUrl }}/pictures/property/{{ listing.imagePath }}/{{ listing.serialId }}/{{ image }}?_ts={{ ts }}" [alt]="image" class="shadow-2" cdkDrag />
<fa-icon [icon]="faTrash" (click)="deleteConfirm(image)"></fa-icon>
</div>
</span>

View File

@ -18,7 +18,6 @@ import { DialogModule } from 'primeng/dialog';
import { DialogService, DynamicDialogModule, DynamicDialogRef } from 'primeng/dynamicdialog';
import { EditorModule } from 'primeng/editor';
import { FileUpload, FileUploadModule } from 'primeng/fileupload';
import { v4 as uuidv4 } from 'uuid';
import { BusinessListing, CommercialPropertyListing, User } from '../../../../../../bizmatch-server/src/models/db.model';
import { AutoCompleteCompleteEvent, ImageProperty, emailToDirName } from '../../../../../../bizmatch-server/src/models/main.model';
import { environment } from '../../../../environments/environment';
@ -63,7 +62,6 @@ export class EditCommercialPropertyListingComponent {
private id: string | undefined = this.activatedRoute.snapshot.params['id'] as string | undefined;
user: User;
maxFileSize = 3000000;
uploadUrl: string;
environment = environment;
propertyImages: string[];
responsiveOptions = [
@ -131,15 +129,15 @@ export class EditCommercialPropertyListingComponent {
this.listing = await lastValueFrom(this.listingsService.getListingById(this.id, 'commercialProperty'));
} else {
this.listing = createDefaultCommercialPropertyListing();
this.listing.userId = await this.userService.getId(keycloakUser.email);
this.listing.imagePath = `${emailToDirName(keycloakUser.email)}_${uuidv4()}`;
const listingUser = await this.userService.getByMail(keycloakUser.email);
this.listing.userId = listingUser.id;
this.listing.imagePath = `${emailToDirName(keycloakUser.email)}`;
if (this.data) {
this.listing.title = this.data?.title;
this.listing.description = this.data?.description;
}
}
this.uploadUrl = `${environment.apiBaseUrl}/bizmatch/image/uploadPropertyPicture/${this.listing.id}`;
this.propertyImages = await this.listingsService.getPropertyImages(this.listing.id);
this.propertyImages = await this.imageService.getPropertyImages(this.listing.imagePath, this.listing.serialId);
}
async save() {
@ -176,12 +174,13 @@ export class EditCommercialPropertyListingComponent {
if (cropper) {
this.loadingService.startLoading('uploadImage');
cropper.getCroppedCanvas().toBlob(async blob => {
this.imageService.uploadImage(blob, 'uploadPropertyPicture', this.listing.imagePath).subscribe(
this.imageService.uploadImage(blob, 'uploadPropertyPicture', this.listing.imagePath, this.listing.serialId).subscribe(
async event => {
if (event.type === HttpEventType.Response) {
console.log('Upload abgeschlossen', event.body);
this.loadingService.stopLoading('uploadImage');
this.propertyImages = await this.listingsService.getPropertyImages(this.listing.id);
this.propertyImages = await this.imageService.getPropertyImages(this.listing.imagePath, this.listing.serialId);
this.listing = await lastValueFrom(this.listingsService.getListingById(this.id, 'commercialProperty'));
}
},
error => console.error('Fehler beim Upload:', error),
@ -205,9 +204,9 @@ export class EditCommercialPropertyListingComponent {
accept: async () => {
this.listing.imageOrder = this.listing.imageOrder.filter(item => item !== imageName);
await Promise.all([this.imageService.deleteListingImage(this.listing.imagePath, imageName), this.listingsService.save(this.listing, 'commercialProperty')]);
await Promise.all([this.imageService.deleteListingImage(this.listing.imagePath, this.listing.serialId, imageName), this.listingsService.save(this.listing, 'commercialProperty')]);
this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'Image deleted' });
this.propertyImages = await this.listingsService.getPropertyImages(this.listing.id);
this.propertyImages = await this.imageService.getPropertyImages(this.listing.imagePath, this.listing.serialId);
},
reject: () => {
// this.messageService.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected' });

View File

@ -1,7 +1,7 @@
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { lastValueFrom } from 'rxjs';
import { ImageType } from '../../../../bizmatch-server/src/models/main.model';
import { emailToDirName } from '../../../../bizmatch-server/src/models/main.model';
import { environment } from '../../environments/environment';
@Injectable({
@ -12,33 +12,32 @@ export class ImageService {
constructor(private http: HttpClient) {}
uploadImage(imageBlob: Blob, type: 'uploadPropertyPicture' | 'uploadCompanyLogo' | 'uploadProfile', imagePath: string) {
const uploadUrl = `${this.apiBaseUrl}/bizmatch/image/${type}/${imagePath}`;
uploadImage(imageBlob: Blob, type: 'uploadPropertyPicture' | 'uploadCompanyLogo' | 'uploadProfile', imagePath: string, serialId?: number) {
let uploadUrl = `${this.apiBaseUrl}/bizmatch/image/${type}/${imagePath}`;
if (type === 'uploadPropertyPicture') {
uploadUrl = `${this.apiBaseUrl}/bizmatch/image/${type}/${imagePath}/${serialId}`;
}
const formData = new FormData();
formData.append('file', imageBlob, 'image.png');
return this.http.post(uploadUrl, formData, {
// headers: this.headers,
//reportProgress: true,
observe: 'events',
});
}
async deleteUserImage(userid: string, type: ImageType, name?: string) {
return await lastValueFrom(this.http.delete<[]>(`${this.apiBaseUrl}/bizmatch/image/${type.delete}${userid}`));
async deleteListingImage(imagePath: string, serial: number, name?: string) {
return await lastValueFrom(this.http.delete<[]>(`${this.apiBaseUrl}/bizmatch/image/propertyPicture/${imagePath}/${serial}/${name}`));
}
async deleteListingImage(imagePath: string, name?: string) {
return await lastValueFrom(this.http.delete<[]>(`${this.apiBaseUrl}/bizmatch/image/propertyPicture/${imagePath}/${name}`));
async deleteLogoImagesById(email: string) {
const adjustedEmail = emailToDirName(email);
await lastValueFrom(this.http.delete<[]>(`${this.apiBaseUrl}/bizmatch/image/logo/${adjustedEmail}`));
}
async getProfileImagesForUsers(userids: string[]) {
return await lastValueFrom(this.http.get<[]>(`${this.apiBaseUrl}/bizmatch/image/profileImages/${userids.join(',')}`));
async deleteProfileImagesById(email: string) {
const adjustedEmail = emailToDirName(email);
await lastValueFrom(this.http.delete<[]>(`${this.apiBaseUrl}/bizmatch/image/profile/${adjustedEmail}`));
}
async getCompanyLogosForUsers(userids: string[]) {
return await lastValueFrom(this.http.get<[]>(`${this.apiBaseUrl}/bizmatch/image/companyLogos/${userids.join(',')}`));
}
async deleteLogoImagesById(userid: string) {
await lastValueFrom(this.http.delete<[]>(`${this.apiBaseUrl}/bizmatch/image/logo/${userid}`));
}
async deleteProfileImagesById(userid: string) {
await lastValueFrom(this.http.delete<[]>(`${this.apiBaseUrl}/bizmatch/image/profile/${userid}`));
async getPropertyImages(imagePath: string, serial: number): Promise<string[]> {
return await lastValueFrom(this.http.get<string[]>(`${this.apiBaseUrl}/bizmatch/image/${imagePath}/${serial}`));
}
}

View File

@ -40,10 +40,6 @@ export class ListingsService {
async deleteCommercialPropertyListing(id: string, imagePath: string) {
await lastValueFrom(this.http.delete<ListingType>(`${this.apiBaseUrl}/bizmatch/listings/commercialProperty/${id}/${imagePath}`));
}
async getPropertyImages(id: string): Promise<string[]> {
return await lastValueFrom(this.http.get<string[]>(`${this.apiBaseUrl}/bizmatch/image/${id}`));
}
async changeImageOrder(id: string, propertyImages: string[]): Promise<string[]> {
return await lastValueFrom(this.http.put<string[]>(`${this.apiBaseUrl}/bizmatch/listings/commercialProperty/imageOrder/${id}`, propertyImages));
}

View File

@ -33,13 +33,13 @@ export class UserService {
async getAllStates(): Promise<any> {
return await lastValueFrom(this.http.get<StatesResult[]>(`${this.apiBaseUrl}/bizmatch/user/states/all`));
}
async getId(email: string): Promise<string> {
if (sessionStorage.getItem('USERID')) {
return sessionStorage.getItem('USERID');
} else {
const user = await this.getByMail(email);
sessionStorage.setItem('USERID', user.id);
return user.id;
}
}
// async getId(email: string): Promise<string> {
// if (sessionStorage.getItem('USERID')) {
// return sessionStorage.getItem('USERID');
// } else {
// const user = await this.getByMail(email);
// sessionStorage.setItem('USERID', user.id);
// return user.id;
// }
// }
}