Umbau commercial-details, Anfang Umbau user-details

bizmatch/src/app/pages/details/details-commercial-property-listing/details-commercial-property-listing.component.html

@@ -96,3 +96,120 @@
     </div>
   </div>
 </div> -->
+
+<div class="container mx-auto p-4">
+  <div class="bg-white shadow-md rounded-lg overflow-hidden">
+    <div class="p-6 relative">
+      <h1 class="text-3xl font-bold mb-4">{{ listing?.title }}</h1>
+      <button class="absolute top-4 right-4 text-gray-500 hover:text-gray-700" (click)="historyService.goBack()">
+        <fa-icon [icon]="faTimes" size="2x"></fa-icon>
+      </button>
+      <div class="lg:hidden">
+        @if (listing && listing.imageOrder.length > 0) {
+        <div id="gallery" class="relative w-full" data-carousel="slide">
+          <div class="relative h-56 overflow-hidden rounded-lg md:h-96">
+            @for (image of listing.imageOrder; track $index) {
+            <div class="hidden duration-700 ease-in-out" data-carousel-item>
+              <img src="{{ env.imageBaseUrl }}/pictures/property/{{ listing.imagePath }}/{{ listing.serialId }}/{{ image }}" class="absolute block max-w-full h-auto -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" />
+            </div>
+            }
+          </div>
+          <div class="absolute z-30 flex space-x-3 -translate-x-1/2 bottom-5 left-1/2">
+            <button type="button" class="w-3 h-3 rounded-full bg-white dark:bg-gray-800" aria-current="true" aria-label="Slide 1" data-carousel-slide-to="0"></button>
+            @for (i of getImageIndices(); track i) {
+            <button
+              type="button"
+              class="w-3 h-3 rounded-full bg-white/50 dark:bg-gray-800/50 hover:bg-white dark:hover:bg-gray-800"
+              aria-current="false"
+              attr.aria-label="Slide {{ i }}"
+              attr.data-carousel-slide-to="{{ i }}"
+            ></button>
+            }
+          </div>
+        </div>
+        }
+      </div>
+      <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" [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-gray-100': i % 2 === 0 }">
+              <div class="w-full sm:w-1/3 font-semibold p-2">{{ detail.label }}</div>
+              <div class="w-full sm:w-2/3 p-2">{{ detail.value }}</div>
+            </div>
+          </div>
+          @if(listing && listingUser && (listingUser?.email===user?.email || isAdmin())){
+          <button class="mt-4 bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600" [routerLink]="['/editCommercialPropertyListing', listing.id]">Edit</button>
+          }
+        </div>
+
+        <div class="w-full lg:w-1/2 mt-6 lg:mt-0">
+          <div class="hidden lg:block">
+            @if (listing && listing.imageOrder.length > 0) {
+            <div id="gallery" class="relative w-full" data-carousel="slide">
+              <div class="relative h-56 overflow-hidden rounded-lg md:h-96">
+                @for (image of listing.imageOrder; track $index) {
+                <div class="hidden duration-700 ease-in-out" data-carousel-item>
+                  <img
+                    src="{{ env.imageBaseUrl }}/pictures/property/{{ listing.imagePath }}/{{ listing.serialId }}/{{ image }}"
+                    class="absolute block max-w-full h-auto -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2"
+                  />
+                </div>
+                }
+              </div>
+              <div class="absolute z-30 flex space-x-3 -translate-x-1/2 bottom-5 left-1/2">
+                <button type="button" class="w-3 h-3 rounded-full bg-white dark:bg-gray-800" aria-current="true" aria-label="Slide 1" data-carousel-slide-to="0"></button>
+                @for (i of getImageIndices(); track i) {
+                <button
+                  type="button"
+                  class="w-3 h-3 rounded-full bg-white/50 dark:bg-gray-800/50 hover:bg-white dark:hover:bg-gray-800"
+                  aria-current="false"
+                  attr.aria-label="Slide {{ i }}"
+                  attr.data-carousel-slide-to="{{ i }}"
+                ></button>
+                }
+              </div>
+            </div>
+            }
+          </div>
+          <div class="mt-6">
+            <h2 class="text-xl font-semibold mb-4">Contact the Author of this Listing</h2>
+            <p class="text-sm text-gray-600 mb-4">Please include your contact info below</p>
+            <form>
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+                <div>
+                  <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Your Name</label>
+                  <input type="text" id="name" name="name" [(ngModel)]="mailinfo.sender.name" class="w-full px-3 py-2 border border-gray-300 rounded-md" />
+                </div>
+                <div>
+                  <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Your Email</label>
+                  <input type="email" id="email" name="email" [(ngModel)]="mailinfo.sender.email" class="w-full px-3 py-2 border border-gray-300 rounded-md" />
+                </div>
+                <div>
+                  <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Phone Number</label>
+                  <input type="tel" id="phone" name="phone" [(ngModel)]="mailinfo.sender.phoneNumber" class="w-full px-3 py-2 border border-gray-300 rounded-md" />
+                </div>
+                <div>
+                  <label for="location" class="block text-sm font-medium text-gray-700 mb-1">Country/State</label>
+                  <input type="text" id="location" name="location" [(ngModel)]="mailinfo.sender.state" class="w-full px-3 py-2 border border-gray-300 rounded-md" />
+                </div>
+              </div>
+              <div class="mb-4">
+                <label for="message" class="block text-sm font-medium text-gray-700 mb-1">Questions/Comments</label>
+                <textarea id="message" name="message" [(ngModel)]="mailinfo.sender.comments" rows="4" class="w-full px-3 py-2 border border-gray-300 rounded-md"></textarea>
+              </div>
+              <div class="flex items-center justify-between">
+                <div class="text-sm">
+                  Listing by <span class="font-semibold">Mia Hernandez</span>
+                  <img src="https://placehold.co/30x30" alt="Realtor logo" class="inline-block ml-1 w-6 h-6" />
+                </div>
+                <button (click)="mail()" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">Submit</button>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

bizmatch/src/app/pages/details/details-commercial-property-listing/details-commercial-property-listing.component.scss

@@ -0,0 +1,36 @@
+::ng-deep p {
+  display: block;
+  margin-top: 1em;
+  margin-bottom: 1em;
+  margin-left: 0;
+  margin-right: 0;
+  font-size: 1rem; /* oder 1rem, abhängig vom Browser und den Standardeinstellungen */
+  line-height: 1.5;
+}
+::ng-deep h1 {
+  display: block;
+  font-size: 2em; /* etwa 32px */
+  margin-top: 0.67em;
+  margin-bottom: 0.67em;
+  margin-left: 0;
+  margin-right: 0;
+  font-weight: bold;
+}
+::ng-deep h2 {
+  display: block;
+  font-size: 1.5em; /* etwa 24px */
+  margin-top: 0.83em;
+  margin-bottom: 0.83em;
+  margin-left: 0;
+  margin-right: 0;
+  font-weight: bold;
+}
+::ng-deep h3 {
+  display: block;
+  font-size: 1.17em; /* etwa 18.72px */
+  margin-top: 1em;
+  margin-bottom: 1em;
+  margin-left: 0;
+  margin-right: 0;
+  font-weight: bold;
+}

bizmatch/src/app/pages/details/details-commercial-property-listing/details-commercial-property-listing.component.ts

@@ -1,6 +1,7 @@
-import { Component } from '@angular/core';
+import { Component, NgZone } from '@angular/core';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 import { ActivatedRoute, Router } from '@angular/router';
+import { faTimes } from '@fortawesome/free-solid-svg-icons';
 import { KeycloakService } from 'keycloak-angular';
 import onChange from 'on-change';
 import { lastValueFrom } from 'rxjs';
@@ -54,6 +55,9 @@ export class DetailsCommercialPropertyListingComponent {
   ts = new Date().getTime();
   env = environment;
   errorResponse: ErrorResponse;
+  faTimes = faTimes;
+  propertyDetails = [];
+
   constructor(
     private activatedRoute: ActivatedRoute,
     private listingsService: ListingsService,
@@ -65,6 +69,7 @@ export class DetailsCommercialPropertyListingComponent {
     public historyService: HistoryService,
     public keycloakService: KeycloakService,
     private imageService: ImageService,
+    private ngZone: NgZone,
   ) {
     this.mailinfo = { sender: {}, userId: '', email: '', url: environment.mailinfoUrl };
 
@@ -81,6 +86,27 @@ export class DetailsCommercialPropertyListingComponent {
     this.listing = await lastValueFrom(this.listingsService.getListingById(this.id, 'commercialProperty'));
     this.listingUser = await this.userService.getById(this.listing.userId);
     this.description = this.sanitizer.bypassSecurityTrustHtml(this.listing.description);
+    import('flowbite').then(flowbite => {
+      flowbite.initCarousels();
+    });
+    this.propertyDetails = [
+      { label: 'Property Category', value: this.selectOptions.getCommercialProperty(this.listing.type) },
+      { label: 'Located in', value: this.selectOptions.getState(this.listing.state) },
+      { label: 'City', value: this.listing.city },
+      { label: 'Zip Code', value: this.listing.zipCode },
+      { label: 'County', value: this.listing.county },
+      { label: 'Asking Price:', value: `$${this.listing.price?.toLocaleString()}` },
+    ];
+    //this.initFlowbite();
+  }
+  private initFlowbite() {
+    this.ngZone.runOutsideAngular(() => {
+      import('flowbite')
+        .then(flowbite => {
+          flowbite.initCarousels();
+        })
+        .catch(error => console.error('Error initializing Flowbite:', error));
+    });
   }
   isAdmin() {
     return this.keycloakService.getUserRoles(true).includes('ADMIN');
@@ -100,4 +126,7 @@ export class DetailsCommercialPropertyListingComponent {
   containsError(fieldname: string) {
     return this.errorResponse?.fields.map(f => f.fieldname).includes(fieldname);
   }
+  getImageIndices(): number[] {
+    return this.listing && this.listing.imageOrder ? this.listing.imageOrder.slice(1).map((e, i) => i + 1) : [];
+  }
 }