@propbinder/mobile-design 0.2.47 → 0.2.50

package/src/examples/booking.page.ts

@@ -0,0 +1,434 @@
+import { Component, signal, ViewChild } from '@angular/core';
+import { DsIconButtonComponent } from '@propbinder/design-system';
+import { DsMobilePageMainComponent } from '../components/page-main';
+import { DsMobileSectionComponent } from '../components/section';
+import { DsMobileSwiperComponent } from '../components/swiper/ds-mobile-swiper';
+import { DsMobileInteractiveListItemBookingComponent } from '../components/interactive-list-item-booking';
+import { DsMobileOfflineBannerComponent } from '../components/offline-banner';
+import { DsMobileFacilityDetailModalService } from '../components/facility-detail-modal';
+import { DsMobileFabComponent } from '../components/fab';
+import { DsMobileFacilityCreationModalService } from '../components/facility-creation-modal';
+import { UserService } from '../services/user.service';
+
+interface FacilityDetail {
+  id: string;
+  thumbnail: string;
+  facilityTitle: string;
+  description: string;
+  availabilityStatus?: 'available-today' | 'available-from' | 'unavailable';
+  statusLabel?: string;
+  
+  // Additional fields for modal
+  heroImage?: string;
+  fullDescription: string;
+  requirements?: string[];
+  bookingType?: string;
+  expectations?: string;
+  restrictions?: string[];
+  bookingDate?: string;
+  bookingTime?: string;
+}
+
+@Component({
+  selector: 'app-mobile-booking-page',
+  standalone: true,
+  imports: [
+    DsMobilePageMainComponent,
+    DsMobileSectionComponent,
+    DsMobileInteractiveListItemBookingComponent,
+    DsMobileSwiperComponent,
+    DsIconButtonComponent,
+    DsMobileOfflineBannerComponent,
+    DsMobileFabComponent
+  ],
+  styles: [`
+    /* Bookings swiper wrapper */
+    .bookings-swiper-wrapper {
+      padding: 0;
+      position: relative;
+    }
+    
+    /* Navigation buttons - position individually to avoid blocking */
+    .swiper-nav-buttons {
+      /* Remove all positioning - we'll position buttons individually */
+      display: contents; /* Use contents to avoid creating a blocking layer */
+    }
+    
+    .swiper-nav-button {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      z-index: 10;
+    }
+    
+    .swiper-nav-button:first-child {
+      left: -48px;
+    }
+    
+    .swiper-nav-button:last-child {
+      right: -48px;
+    }
+    
+    /* Force buttons to be perfectly round */
+    ::ng-deep .swiper-nav-button button {
+      border-radius: 50% !important;
+      width: 48px !important;
+      height: 48px !important;
+      padding: 0 !important;
+    }
+    
+    /* Hide on mobile */
+    @media (max-width: 767px) {
+      .swiper-nav-buttons {
+        display: none;
+      }
+    }
+    
+    /* Swiper slide styling for bookings */
+    ::ng-deep .bookings-swiper .swiper-slide {
+      width: 100%;
+      max-width: 600px;
+      height: auto;
+      pointer-events: auto;
+    }
+    
+    /* Desktop: Remove max-width constraint */
+    @media (min-width: 768px) {
+      ::ng-deep .bookings-swiper .swiper-slide {
+        max-width: 100%;
+      }
+    }
+    
+    /* Ensure list item takes full width within slide */
+    ::ng-deep .bookings-swiper .swiper-slide ds-mobile-interactive-list-item-booking {
+      width: 100%;
+      pointer-events: auto;
+    }
+  `],
+  template: `
+    <ds-mobile-page-main
+      #pageComponent
+      [title]="'Bookinger'"
+      [avatarInitials]="userService.avatarInitials()"
+      [avatarType]="userService.avatarType()"
+      (refresh)="handleRefresh($event)">
+      
+      @if (pageComponent.isOffline()) {
+        <ds-mobile-offline-banner
+          header-notification
+          title="Ingen internetforbindelse"
+          message="Nogle funktioner kan være utilgængelige">
+        </ds-mobile-offline-banner>
+      }
+      
+      <!-- "Dine bestillinger" Section with Swiper -->
+      <ds-mobile-section 
+        headline="Dine bestillinger"
+        icon="remixCheckboxCircleLine">
+        <div class="bookings-swiper-wrapper">
+          <ds-mobile-swiper 
+            #bookingsSwiper
+            class="bookings-swiper"
+            [slideWidth]="'100%'" 
+            [gap]="32"
+            [pagination]="true"
+            [autoHeight]="true"
+            [progressiveOpacity]="true"
+            [progressiveScale]="true">
+            @for (booking of activeBookings(); track booking.id) {
+              <div class="swiper-slide">
+                <ds-mobile-interactive-list-item-booking
+                  [thumbnail]="booking.thumbnail"
+                  [facilityTitle]="booking.facilityTitle"
+                  [bookingDate]="booking.bookingDate || ''"
+                  [bookingTime]="booking.bookingTime || ''"
+                  [align]="'center'"
+                  [clickable]="true"
+                  [enableLongPress]="false"
+                  [showChevron]="false"
+                  (bookingClick)="openFacilityDetail(booking.id)"
+                />
+              </div>
+            }
+          </ds-mobile-swiper>
+          
+          <!-- Navigation buttons (hidden on mobile or when only 1 item) -->
+          @if (activeBookings().length > 1) {
+            <div class="swiper-nav-buttons">
+              <ds-icon-button
+                class="swiper-nav-button"
+                icon="remixArrowLeftSLine"
+                variant="ghost"
+                size="sm"
+                [disabled]="isFirstSlide()"
+                (clicked)="slidePrev()"
+                aria-label="Previous booking"
+              />
+              <ds-icon-button
+                class="swiper-nav-button"
+                icon="remixArrowRightSLine"
+                variant="ghost"
+                size="sm"
+                [disabled]="isLastSlide()"
+                (clicked)="slideNext()"
+                aria-label="Next booking"
+              />
+            </div>
+          }
+        </div>
+      </ds-mobile-section>
+      
+      <!-- Available Facilities Section -->
+      <ds-mobile-section headline="Tilgængelige faciliteter" contentGap="0px">
+        @for (facility of availableFacilities(); track facility.id) {
+          <ds-mobile-interactive-list-item-booking
+            [thumbnail]="facility.thumbnail"
+            [facilityTitle]="facility.facilityTitle"
+            [description]="facility.description"
+            [availabilityStatus]="facility.availabilityStatus"
+            [statusLabel]="facility.statusLabel || ''"
+            [clickable]="true"
+            [enableLongPress]="false"
+            [showChevron]="false"
+            (bookingClick)="openFacilityDetail(facility.id)"
+          />
+        }
+      </ds-mobile-section>
+    </ds-mobile-page-main>
+
+    <!-- FAB for creating new facility -->
+    <ds-mobile-fab
+      icon="remixAddLine"
+      position="bottom-right"
+      ariaLabel="Opret facilitet"
+      (clicked)="openFacilityCreationModal()">
+    </ds-mobile-fab>
+  `
+})
+export class MobileBookingPageComponent {
+  @ViewChild('pageComponent') pageComponent!: DsMobilePageMainComponent;
+  @ViewChild('bookingsSwiper') bookingsSwiper?: DsMobileSwiperComponent;
+  
+  constructor(
+    private facilityModal: DsMobileFacilityDetailModalService,
+    private facilityCreationModal: DsMobileFacilityCreationModalService,
+    public userService: UserService
+  ) {}
+  
+  // Active bookings (current and upcoming)
+  activeBookings = signal<FacilityDetail[]>([
+    {
+      id: 'booking-1',
+      thumbnail: '/Assets/Dummy-photos/rooftop-party.jpg',
+      facilityTitle: 'Festlokale på taget',
+      bookingDate: '14. februar, 2026',
+      bookingTime: '9:00 - 17:00',
+      description: 'Din aktive booking af festlokalet på taget',
+      heroImage: '/Assets/Dummy-photos/rooftop-party.jpg',
+      fullDescription: '<p>Festlokalet på taget giver jer et lyst og indbydende rum med flot udsigt over byen. Lokalet er velegnet til fødselsdage, mindre sammenkomster og hyggelige middage med naboer og venner.</p>',
+      requirements: ['Kræver nøglekort'],
+      bookingType: 'Øjeblikkelig booking',
+      expectations: '<p>Lokalet er klargjort med borde og stole ved ankomst. Husk at rydde op efter brug, så området er klar til de næste beboere.</p>',
+      restrictions: [
+        'Maksimal bookingvarighed: 3 timer',
+        'Ingen høj musik efter kl. 22',
+        'Efterlad lokalet rent og opryddet'
+      ]
+    }
+  ]);
+  
+  // Available facilities for booking
+  availableFacilities = signal<FacilityDetail[]>([
+    {
+      id: 'facility-1',
+      thumbnail: '/Assets/Dummy-photos/handyman.jpg',
+      facilityTitle: 'Boremaskinen',
+      description: 'Lån en boremaskine til mindre gør-det-selv-opgaver i boligen.',
+      availabilityStatus: 'available-today',
+      statusLabel: 'Ledig i dag',
+      heroImage: '/Assets/Dummy-photos/handyman.jpg',
+      fullDescription: '<p>Vores boremaskine i professionel kvalitet er tilgængelig for alle beboere til mindre forbedringer i hjemmet. Den er ideel til ophængning af hylder, montering af beslag og andre boreopgaver i lejligheden.</p>',
+      requirements: ['Kræver nøglekort'],
+      bookingType: 'Øjeblikkelig booking',
+      expectations: '<p>Boremaskinen udleveres med et sæt bor og tilbehør. Den er opladet og klar til brug. Returner værktøjet i rengjort stand efter brug.</p>',
+      restrictions: [
+        'Maksimal bookingvarighed: 48 timer',
+        'Skal returneres i samme stand',
+        'Skader skal meldes med det samme',
+        'Må ikke bruges til kommercielt arbejde'
+      ]
+    },
+    {
+      id: 'facility-2',
+      thumbnail: '/Assets/Dummy-photos/rooftop-party.jpg',
+      facilityTitle: 'Festlokale på taget',
+      description: 'Book det fælles festlokale på taget til fødselsdage, fejring og mindre arrangementer.',
+      availabilityStatus: 'available-today',
+      statusLabel: 'Ledig i dag',
+      heroImage: '/Assets/Dummy-photos/rooftop-party.jpg',
+      fullDescription: `
+        <p>Tagterrassen er indrettet som et afslappende fristed og et levende samlingspunkt for beboerne med flot udsigt over byen. Uanset om du planlægger en mindre sammenkomst, en rolig aften udendørs eller en hyggelig stund med venner, giver terrassen de perfekte rammer.</p>
+        
+        <h3 class="section-headline">Hvad du kan forvente</h3>
+        <p>Terrassen er møbleret med borde, stole og loungeområder, så den egner sig godt til sociale arrangementer, afslappet spisning eller en rolig pause. Sæsonens planter giver en indbydende stemning, og området har belysning til brug om aftenen. Terrassen er ikke en legeplads, og børn skal være under opsyn.</p>
+        
+        <h3 class="section-headline">Restriktioner</h3>
+        <ul>
+          <li>Rygning og vaping er ikke tilladt på terrassen.</li>
+          <li>Høj musik og fester over rimeligt lydniveau er ikke tilladt.</li>
+          <li>Åben ild og stearinlys er ikke tilladt af sikkerhedshensyn.</li>
+          <li>Private grill eller eget madudstyr må ikke anvendes; brug kun fælles faciliteter.</li>
+          <li>Kæledyr er ikke tilladt på terrassen, undtaget servicehunde.</li>
+        </ul>
+        
+        <h3 class="section-headline">Sikkerhed og adfærd</h3>
+        <p>For alles komfort og sikkerhed beder vi dig:</p>
+        <ul>
+          <li>Undgå overfyldning; terrassen har plads til maks. 20 personer ad gangen.</li>
+          <li>Holde børn under opsyn til enhver tid.</li>
+          <li>Undlade at flytte eller fjerne møbler.</li>
+          <li>Holde nødudgange og gangarealer fri.</li>
+          <li>Bortskaffe affald i de opsatte skraldespande.</li>
+        </ul>
+        
+        <h3 class="section-headline">Booking og varighed</h3>
+        <p>Terrassen skal bookes på forhånd ved private arrangementer:</p>
+        <ul>
+          <li>Maksimal varighed: 3 timer pr. booking.</li>
+          <li>Oprydning: Beboeren har ansvar for at efterlade terrassen ren og klar til næste booking.</li>
+        </ul>
+      `,
+      requirements: ['Kræver nøglekort'],
+      bookingType: 'Øjeblikkelig booking',
+      expectations: '',
+      restrictions: []
+    },
+    {
+      id: 'facility-3',
+      thumbnail: '/Assets/Dummy-photos/parking.jpg',
+      facilityTitle: 'Gæsteparkering',
+      description: 'Book en gæsteparkeringsplads, så dine besøgende nemt kan parkere ved ejendommen.',
+      availabilityStatus: 'available-from',
+      statusLabel: 'Ledig fra 28. februar, 2026',
+      heroImage: '/Assets/Dummy-photos/parking.jpg',
+      fullDescription: '<p>Ekstra gæsteparkeringspladser er tilgængelige for beboere, der har brug for parkering til besøgende. Pladserne giver dine gæster en nem og tryg parkeringsmulighed tæt på boligen.</p>',
+      requirements: ['Kræver nøglekort'],
+      bookingType: 'Forudgående booking påkrævet',
+      expectations: '<p>Parkeringsområdet er sikkert og velholdt. Gæstetilladelse skal være synlig i forruden under hele parkeringen. Informer gerne dine gæster om placering og regler.</p>',
+      restrictions: [
+        'Forudgående booking påkrævet (minimum 24 timer)',
+        'Maksimal bookingvarighed: 12 timer',
+        'Gæster skal vise synlig parkeringstilladelse',
+        'Ingen erhvervskøretøjer tilladt'
+      ]
+    },
+    {
+      id: 'facility-4',
+      thumbnail: '/Assets/Dummy-photos/yard.jpg',
+      facilityTitle: 'BBQ område',
+      description: 'Book grillområdet til sommerarrangementer og udendørs spisning med naboer og venner.',
+      availabilityStatus: 'unavailable',
+      statusLabel: 'Ikke tilgængelig',
+      heroImage: '/Assets/Dummy-photos/yard.jpg',
+      fullDescription: '<p>BBQ-området har grill i professionel kvalitet og udendørs siddepladser, perfekt til sommerarrangementer og fællesspisning. Området er velegnet til både mindre familiemåltider og større sociale arrangementer.</p>',
+      requirements: ['Kræver nøglekort'],
+      bookingType: 'Sæsonbestemt tilgængelighed',
+      expectations: '<p>Alt grilludstyr og rengøringsartikler stilles til rådighed. Området har overdækkede siddepladser og borde til forberedelse. Rengør grillen efter brug, og bortskaf kul korrekt i de anviste beholdere.</p>',
+      restrictions: [
+        'Lukket i vintersæsonen',
+        'Åbner igen i maj 2026',
+        'Maksimal gruppestørrelse: 20 personer',
+        'Musik skal stoppe senest kl. 22'
+      ]
+    }
+  ]);
+  
+  handleRefresh(event: any): void {
+    console.log('Pull-to-refresh triggered');
+    
+    // Check if offline and complete immediately
+    if (this.pageComponent?.isOffline()) {
+      console.log('Cannot refresh while offline');
+      event.target.complete();
+      return;
+    }
+    
+    // Simulate data refresh
+    setTimeout(() => {
+      console.log('Refresh complete');
+      event.target.complete();
+    }, 1000);
+  }
+  
+  /**
+   * Navigate to previous slide
+   */
+  slidePrev(): void {
+    this.bookingsSwiper?.slidePrev();
+  }
+  
+  /**
+   * Navigate to next slide
+   */
+  slideNext(): void {
+    this.bookingsSwiper?.slideNext();
+  }
+  
+  /**
+   * Check if at first slide
+   */
+  isFirstSlide(): boolean {
+    return this.bookingsSwiper?.isBeginning() ?? true;
+  }
+  
+  /**
+   * Check if at last slide
+   */
+  isLastSlide(): boolean {
+    return this.bookingsSwiper?.isEnd() ?? true;
+  }
+  
+  /**
+   * Open facility detail modal
+   */
+  async openFacilityDetail(facilityId: string): Promise<void> {
+    // Find facility in either active bookings or available facilities
+    const allFacilities = [...this.activeBookings(), ...this.availableFacilities()];
+    const facility = allFacilities.find(f => f.id === facilityId);
+    
+    if (facility) {
+      await this.facilityModal.open({
+        id: facility.id,
+        facilityTitle: facility.facilityTitle,
+        heroImage: facility.heroImage || facility.thumbnail,
+        fullDescription: facility.fullDescription,
+        requirements: facility.requirements,
+        bookingType: facility.bookingType,
+        expectations: facility.expectations,
+        restrictions: facility.restrictions,
+        availabilityStatus: facility.availabilityStatus,
+        statusLabel: facility.statusLabel,
+        bookingDate: facility.bookingDate,
+        bookingTime: facility.bookingTime
+      });
+    }
+  }
+  
+  /**
+   * Open facility creation modal
+   */
+  async openFacilityCreationModal(): Promise<void> {
+    console.log('[BookingPage] FAB clicked, opening facility creation modal...');
+    
+    await this.facilityCreationModal.open({
+      onSubmit: async (data) => {
+        console.log('[BookingPage] New facility created:', data);
+        // In a real app, call your API to create the facility
+        // await this.facilityService.createFacility(data);
+        
+        // Optionally add the new facility to the available facilities list
+        // This is just for demo - in reality you'd refetch from the API
+      }
+    });
+  }
+}