231 lines
12 KiB
HTML
231 lines
12 KiB
HTML
<div class="container mx-auto p-4">
|
|
<!-- Breadcrumbs for SEO and Navigation -->
|
|
<app-breadcrumbs [breadcrumbs]="breadcrumbs"></app-breadcrumbs>
|
|
|
|
<div class="bg-white drop-shadow-custom-bg-mobile md:drop-shadow-custom-bg rounded-lg overflow-hidden">
|
|
@if(listing){
|
|
<div class="p-6 relative">
|
|
<h1 class="text-3xl font-bold mb-4 break-words">{{ listing?.title }}</h1>
|
|
<button (click)="historyService.goBack()" aria-label="Go back"
|
|
class="print:hidden absolute top-4 right-4 bg-red-500 text-white rounded-full w-10 h-10 flex items-center justify-center hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
<div class="flex flex-col lg:flex-row">
|
|
<div class="w-full lg:w-1/2 pr-0 lg:pr-4">
|
|
<p class="mb-4 break-words" [innerHTML]="description"></p>
|
|
|
|
<div class="space-y-2">
|
|
<div *ngFor="let detail of propertyDetails; let i = index" class="flex flex-col sm:flex-row"
|
|
[ngClass]="{ 'bg-neutral-100': i % 2 === 0 }">
|
|
<div class="w-full sm:w-1/3 font-semibold p-2">{{ detail.label }}</div>
|
|
|
|
<!-- Standard Text -->
|
|
<div class="w-full sm:w-2/3 p-2 break-words" *ngIf="!detail.isHtml && !detail.isListingBy">{{ detail.value
|
|
}}</div>
|
|
|
|
<!-- HTML Content (nicht für RouterLink) -->
|
|
<div class="w-full sm:w-2/3 p-2 flex space-x-2 break-words" [innerHTML]="detail.value"
|
|
*ngIf="detail.isHtml && !detail.isListingBy"></div>
|
|
|
|
<!-- Speziell für Listing By mit RouterLink -->
|
|
<div class="w-full sm:w-2/3 p-2 flex space-x-2" *ngIf="detail.isListingBy && detail.user">
|
|
<a [routerLink]="['/details-user', detail.user.id]"
|
|
class="text-primary-600 dark:text-primary-500 hover:underline"> {{ detail.user.firstname }} {{
|
|
detail.user.lastname }} </a>
|
|
<div class="relative w-[100px] h-[30px] mr-5 lg:mb-0" *ngIf="detail.user.hasCompanyLogo">
|
|
<img [ngSrc]="detail.imageBaseUrl + '/pictures/logo/' + detail.imagePath + '.avif?_ts=' + detail.ts"
|
|
fill class="object-contain"
|
|
alt="Company logo for {{ detail.user.firstname }} {{ detail.user.lastname }}" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="py-4 print:hidden">
|
|
@if(listing && listingUser && (listingUser?.email===user?.email || (authService.isAdmin() | async))){
|
|
<div class="inline">
|
|
<button class="share share-edit text-white font-bold text-xs py-1.5 px-2 inline-flex items-center"
|
|
[routerLink]="['/editCommercialPropertyListing', listing.id]">
|
|
<i class="fa-regular fa-pen-to-square"></i>
|
|
<span class="ml-2">Edit</span>
|
|
</button>
|
|
</div>
|
|
} @if(user){
|
|
<div class="inline">
|
|
<button class="share share-save text-white font-bold text-xs py-1.5 px-2 inline-flex items-center"
|
|
(click)="toggleFavorite()">
|
|
<i class="fa-regular fa-heart"></i>
|
|
@if(listing.favoritesForUser.includes(user.email)){
|
|
<span class="ml-2">Saved ...</span>
|
|
}@else {
|
|
<span class="ml-2">Save</span>
|
|
}
|
|
</button>
|
|
</div>
|
|
}
|
|
<share-button button="print" showText="true" (click)="createEvent('print')"></share-button>
|
|
<!-- <share-button button="email" showText="true"></share-button> -->
|
|
<div class="inline">
|
|
<button class="share share-email text-white font-bold text-xs py-1.5 px-2 inline-flex items-center"
|
|
(click)="showShareByEMail()">
|
|
<i class="fa-solid fa-envelope"></i>
|
|
<span class="ml-2">Email</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="inline">
|
|
<button type="button"
|
|
class="share share-facebook text-white font-bold text-xs py-1.5 px-2 inline-flex items-center"
|
|
(click)="shareToFacebook()">
|
|
<i class="fab fa-facebook"></i>
|
|
<span class="ml-2">Facebook</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="inline">
|
|
<button type="button"
|
|
class="share share-twitter text-white font-bold text-xs py-1.5 px-2 inline-flex items-center"
|
|
(click)="shareToTwitter()">
|
|
<i class="fab fa-x-twitter"></i>
|
|
<span class="ml-2">X</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="inline">
|
|
<button type="button"
|
|
class="share share-linkedin text-white font-bold text-xs py-1.5 px-2 inline-flex items-center"
|
|
(click)="shareToLinkedIn()">
|
|
<i class="fab fa-linkedin"></i>
|
|
<span class="ml-2">LinkedIn</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Karte hinzufügen, wenn Straße vorhanden ist -->
|
|
<div *ngIf="listing.location.latitude && listing.location.longitude" class="mt-6">
|
|
<h2 class="text-lg font-semibold mb-2">Location Map</h2>
|
|
<!-- <div style="height: 300px" leaflet [leafletOptions]="mapOptions" [leafletLayers]="mapLayers" [leafletCenter]="mapCenter" [leafletZoom]="mapZoom"></div> -->
|
|
<div style="height: 400px" leaflet [leafletOptions]="mapOptions" [leafletLayers]="mapLayers"
|
|
[leafletCenter]="mapCenter" [leafletZoom]="mapZoom" (leafletMapReady)="onMapReady($event)"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w-full lg:w-1/2 mt-6 lg:mt-0">
|
|
@if(this.images.length>0){
|
|
<div class="block print:hidden">
|
|
<gallery [items]="images"></gallery>
|
|
</div>
|
|
}
|
|
<div class="print:hidden" [ngClass]="{ 'mt-6': this.images.length > 0 }">
|
|
@if(this.images.length>0){
|
|
<h2 class="text-xl font-semibold">Contact the Author of this Listing</h2>
|
|
}@else {
|
|
<div class="text-2xl font-bold mb-4">Contact the Author of this Listing</div>
|
|
}
|
|
<p class="text-sm text-neutral-600 mb-4">Please include your contact info below</p>
|
|
<form class="space-y-4">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<app-validated-input label="Your Name" name="name"
|
|
[(ngModel)]="mailinfo.sender.name"></app-validated-input>
|
|
<app-validated-input label="Your Email" name="email" [(ngModel)]="mailinfo.sender.email"
|
|
kind="email"></app-validated-input>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<app-validated-input label="Phone Number" name="phoneNumber" [(ngModel)]="mailinfo.sender.phoneNumber"
|
|
mask="(000) 000-0000"></app-validated-input>
|
|
<!-- <app-validated-input label="Country/State" name="state" [(ngModel)]="mailinfo.sender.state"></app-validated-input> -->
|
|
<app-validated-ng-select label="State" name="state" [(ngModel)]="mailinfo.sender.state"
|
|
[items]="selectOptions?.states"></app-validated-ng-select>
|
|
</div>
|
|
<div>
|
|
<app-validated-textarea label="Questions/Comments" name="comments"
|
|
[(ngModel)]="mailinfo.sender.comments"></app-validated-textarea>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between">
|
|
<button (click)="mail()"
|
|
class="bg-primary-500 text-white px-4 py-2 rounded hover:bg-primary-600">Submit</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
<!-- FAQ Section for AEO (Answer Engine Optimization) -->
|
|
@if(propertyFAQs && propertyFAQs.length > 0) {
|
|
<div class="container mx-auto p-4 mt-8">
|
|
<div class="bg-white rounded-lg drop-shadow-custom-bg-mobile md:drop-shadow-custom-bg p-6">
|
|
<h2 class="text-2xl font-bold mb-6 text-gray-900">Frequently Asked Questions</h2>
|
|
<div class="space-y-4">
|
|
@for (faq of propertyFAQs; track $index) {
|
|
<details
|
|
class="group border border-gray-200 rounded-lg overflow-hidden hover:border-primary-300 transition-colors">
|
|
<summary
|
|
class="flex items-center justify-between cursor-pointer p-4 bg-gray-50 hover:bg-gray-100 transition-colors">
|
|
<h3 class="text-lg font-semibold text-gray-900">{{ faq.question }}</h3>
|
|
<svg class="w-5 h-5 text-gray-600 group-open:rotate-180 transition-transform" fill="none"
|
|
stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
|
</svg>
|
|
</summary>
|
|
<div class="p-4 bg-white border-t border-gray-200">
|
|
<p class="text-gray-700 leading-relaxed">{{ faq.answer }}</p>
|
|
</div>
|
|
</details>
|
|
}
|
|
</div>
|
|
<div class="mt-6 p-4 bg-primary-50 border-l-4 border-primary-500 rounded">
|
|
<p class="text-sm text-gray-700">
|
|
<strong class="text-primary-700">Have more questions?</strong> Contact the seller directly using the form
|
|
above or reach out to our support team for assistance.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
<!-- Related Listings Section for SEO Internal Linking -->
|
|
@if(relatedListings && relatedListings.length > 0) {
|
|
<div class="container mx-auto p-4 mt-8">
|
|
<div class="bg-white rounded-lg drop-shadow-custom-bg-mobile md:drop-shadow-custom-bg p-6">
|
|
<h2 class="text-2xl font-bold mb-6 text-gray-900">Similar Properties You May Like</h2>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
@for (related of relatedListings; track related.id) {
|
|
<a [routerLink]="['/commercial-property', related.slug || related.id]" class="block group">
|
|
<div
|
|
class="bg-white rounded-lg border border-gray-200 overflow-hidden hover:shadow-xl transition-all duration-300 hover:scale-[1.02]">
|
|
<div class="p-4">
|
|
<div class="flex items-center mb-3">
|
|
<i [class]="selectOptions.getIconAndTextColorType(related.type)" class="mr-2 text-lg"></i>
|
|
<span [class]="selectOptions.getTextColorType(related.type)" class="font-semibold text-sm">{{
|
|
selectOptions.getCommercialProperty(related.type) }}</span>
|
|
</div>
|
|
<h3
|
|
class="text-lg font-bold mb-2 text-gray-900 group-hover:text-primary-600 transition-colors line-clamp-2">
|
|
{{ related.title }}</h3>
|
|
<div class="space-y-1 text-sm text-gray-600">
|
|
<div class="flex justify-between">
|
|
<span class="font-medium">Price:</span>
|
|
<span class="font-bold text-primary-600">${{ related.price?.toLocaleString() || 'Contact' }}</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span class="font-medium">Location:</span>
|
|
<span>{{ related.location.name || related.location.county }}, {{
|
|
selectOptions.getState(related.location.state) }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="mt-4">
|
|
<span
|
|
class="inline-block bg-primary-100 text-primary-800 text-xs font-medium px-2.5 py-0.5 rounded">View
|
|
Details →</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
</div> |