LocationDetailPage: Seat not selectable, loading animation during fetching

2024-11-04 18:15:49 +01:00
parent 7e649240ca
commit 07c4b7ba80
10 changed files with 260 additions and 188 deletions
--- a/software/src/components/pageParts/heroImage.vue
+++ b/software/src/components/pageParts/heroImage.vue
@@ -21,78 +21,76 @@ defineProps({
 </script>

 <template>
-  <div class="position-relative top-0 left-0">
-    <v-img
-      :src="'http://localhost:3000/static/' + image"
-      height="600"
-      gradient="to top, rgba(0, 0, 0, .9), rgba(255, 255, 255, 0.1)"
-      cover
-    >
-      <div class="position-absolute bottom-0 pa-5" style="width: 100%;">
-        <v-row>
-          <!-- Logo -->
-          <v-col cols="2">
-            <v-skeleton-loader
-              type="image"
-              :loading="loading"
-              height="200"
-              width="200"
+  <v-img
+    :src="!loading ? 'http://localhost:3000/static/' + image : ''"
+    height="600"
+    gradient="to top, rgba(0, 0, 0, .9), rgba(255, 255, 255, 0.1)"
+    cover
+  >
+    <div class="position-absolute bottom-0 pa-5" style="width: 100%;">
+      <v-row>
+        <!-- Logo -->
+        <v-col cols="2">
+          <v-skeleton-loader
+            type="image"
+            :loading="loading"
+            height="200"
+            width="200"
+          >
+            <v-card>
+              <v-img
+                v-if="logo"
+                :src="'http://localhost:3000/static/' + logo"
+                width="200"
+                aspect-ratio="1"
+                cover
+              />
+            </v-card>
+          </v-skeleton-loader>
+        </v-col>
+
+
+        <v-col cols="8">
+          <!-- Title -->
+          <v-skeleton-loader
+            type="heading"
+            :loading="loading"
+            width="500"
+          >
+            <span class="text-h3 font-weight-bold">
+              {{ title }}
+            </span>
+          </v-skeleton-loader>
+
+          <v-skeleton-loader
+            :loading="loading"
+            type="sentences"
+          >
+            <!-- Chips -->
+            <v-chip
+              v-for="chip in chips"
+              class="mr-2 my-1"
+              variant="flat"
            >
-              <v-card>
-                <v-img
-                  v-if="logo"
-                  :src="'http://localhost:3000/static/' + logo"
-                  width="200"
-                  aspect-ratio="1"
-                  cover
-                />
-              </v-card>
-            </v-skeleton-loader>
-          </v-col>
+              {{ chip }}
+            </v-chip>


-          <v-col cols="8">
-            <!-- Title -->
-            <v-skeleton-loader
-              type="heading"
-              :loading="loading"
-              width="500"
-            >
-              <span class="text-h3 font-weight-bold">
-                {{ title }}
-              </span>
-            </v-skeleton-loader>
+            <!-- Description -->
+            <p class="text-h6 text-medium-emphasis" v-if="!$slots.description">
+              {{ description }}
+            </p>
            
-            <v-skeleton-loader
-              :loading="loading"
-              type="sentences"
-            >
-              <!-- Chips -->
-              <v-chip
-                v-for="chip in chips"
-                class="mr-2 my-1"
-                variant="flat"
-              >
-                {{ chip }}
-              </v-chip>
+            <p class="text-h6 text-medium-emphasis">
+              <slot name="description"></slot>
+            </p>
+          </v-skeleton-loader>

+        </v-col>
+      </v-row>
      
-              <!-- Description -->
-              <p class="text-h6 text-medium-emphasis" v-if="!$slots.description">
-                {{ description }}
-              </p>
-              
-              <p class="text-h6 text-medium-emphasis">
-                <slot name="description"></slot>
-              </p>
-            </v-skeleton-loader>
-
-          </v-col>
-        </v-row>
-        
-      </div>
-    </v-img>
-  </div>
+    </div>
+  </v-img>
 </template>

 <style scoped>
--- a/software/src/components/seatPlanMap/seatGroupSheet.vue
+++ b/software/src/components/seatPlanMap/seatGroupSheet.vue
@@ -7,7 +7,8 @@ import { ConcertModel } from '@/data/models/acts/concertModel';
 let props = defineProps({
  seatGroup: SeatGroupModel,
  concert: ConcertModel,
-  withStage: Boolean
+  withStage: Boolean,
+  disabled: Boolean
 })

 function getCornerClass() {
@@ -53,6 +54,7 @@ function getNameLocation() {
    :concert="concert"
    :with-stage="withStage"
    v-if="seatGroup != undefined && seatGroup.standingArea"
+    :disabled="disabled"
  />

  <v-sheet
@@ -79,6 +81,7 @@ function getNameLocation() {
            :seat-group="seatGroup"
            :concert="concert"
            :structure="getStructureNumber()"
+            :disabled="disabled"
          />
        </v-col>

@@ -97,6 +100,7 @@ function getNameLocation() {
            :seat-group="seatGroup"
            :concert="concert"
            :structure="getStructureNumber()"
+            :disabled="disabled"
          />
        </v-col>

@@ -123,6 +127,7 @@ function getNameLocation() {
            :seat-group="seatGroup"
            :concert="concert"
            :structure="getStructureNumber()"
+            :disabled="disabled"
          />
        </v-col>
      </v-row>
@@ -137,6 +142,7 @@ function getNameLocation() {
            :seat-group="seatGroup"
            :concert="concert"
            :structure="getStructureNumber()"
+            :disabled="disabled"
          />
        </v-col>

--- a/software/src/components/seatPlanMap/seatGroupTable.vue
+++ b/software/src/components/seatPlanMap/seatGroupTable.vue
@@ -4,6 +4,7 @@ import { SeatGroupModel } from '@/data/models/locations/seatGroupModel';
 import { SeatModel } from '@/data/models/locations/seatModel';
 import { SeatRowModel } from '@/data/models/locations/seatRowModel';
 import { SelectedSeatModel } from '@/data/models/ordering/selectedSeatModel';
+import { getSeatColor } from '@/helpers/colorScripts';
 import { useBasketStore } from '@/stores/basket.store';

 const basketStore = useBasketStore()
@@ -13,6 +14,9 @@ let props = defineProps({
  concert: ConcertModel,
  seatGroup: SeatGroupModel,

+  /** Seat is selectable (false) or not (true) */
+  disabled: Boolean,
+
  /**
   * Structure of the seat placment
   * 
@@ -29,6 +33,12 @@ let props = defineProps({
  }
 })

+/**
+ * Moves seat to store and changes the state
+ * 
+ * @param clickedSeat Model which is clicked
+ * @param seatRow Row of the seat
+ */
 function handleSeatClick(clickedSeat: SeatModel, seatRow: SeatRowModel) {
  let storeSeat = basketStore.selectedSeats.find(seat => 
    seat.seat.id == clickedSeat.id
@@ -44,21 +54,6 @@ function handleSeatClick(clickedSeat: SeatModel, seatRow: SeatRowModel) {
    )
  }
 }
-
-function seatColor(surcharge: number, state: number) {
-  switch (state) {
-    case 0: {
-      switch(surcharge) {
-        case 0: return "orange"
-        case 10: return "teal"
-        case 20: return "green"
-        case 30: return "red"
-      }
-    }
-    case 1: return "grey"
-    case 2: return "orange"
-  }
-}
 </script>

 <template>
@@ -69,10 +64,10 @@ function seatColor(surcharge: number, state: number) {
          <v-btn
            variant="text"
            icon="mdi-circle"
-            :color="seatColor(seatGroup.surcharge, seat.state)"
+            :color="getSeatColor(seatGroup.surcharge, seat.state)"
            :disabled="seat.state == 1"
            density="compact"
-            @click="handleSeatClick(seat, seatRow)"
+            @click="() => !disabled ? handleSeatClick(seat, seatRow) : {}"
          />
        </td>
      </tr>
@@ -86,10 +81,10 @@ function seatColor(surcharge: number, state: number) {
          <v-btn
            variant="text"
            icon="mdi-circle"
-            :color="seatColor(seatGroup.surcharge, row.seats[i - 1].state)"
+            :color="getSeatColor(seatGroup.surcharge, row.seats[i - 1].state)"
            :disabled="row.seats[i - 1].state == 1"
            density="compact"
-            @click="handleSeatClick(row.seats[i - 1], row)"
+            @click="() => !disabled ? handleSeatClick(row.seats[i - 1], row) : {}"
          />
        </td>
      </tr>
@@ -104,10 +99,10 @@ function seatColor(surcharge: number, state: number) {
            v-if="seatRows[i - 1].seats.length - i < j"
            variant="text"
            icon="mdi-circle"
-            :color="seatColor(seatGroup.surcharge, seatRows[i - 1].seats[j - 1].state)"
+            :color="getSeatColor(seatGroup.surcharge, seatRows[i - 1].seats[j - 1].state)"
            :disabled="seatRows[i - 1].seats[j - 1].state == 1"
            density="compact"
-            @click="handleSeatClick(seatRows[i - 1].seats[j - 1], seatRows[i - 1])"
+            @click="() => !disabled ? handleSeatClick(seatRows[i - 1].seats[j - 1], seatRows[i - 1]) : {}"
          />
        </td>
      </tr>
@@ -122,10 +117,10 @@ function seatColor(surcharge: number, state: number) {
            v-if="j >= i"
            variant="text"
            icon="mdi-circle"
-            :color="seatColor(seatGroup.surcharge, seatRows[i - 1].seats[j - 1].state)"
+            :color="getSeatColor(seatGroup.surcharge, seatRows[i - 1].seats[j - 1].state)"
            :disabled="seatRows[i - 1].seats[j - 1].state == 1"
            density="compact"
-            @click="handleSeatClick(seatRows[i - 1].seats[j - 1], seatRows[i - 1])"
+            @click="() => !disabled ? handleSeatClick(seatRows[i - 1].seats[j - 1], seatRows[i - 1]) : {}"
          />
        </td>
      </tr>
@@ -140,10 +135,10 @@ function seatColor(surcharge: number, state: number) {
            v-if="seatRows[i - 1].seats.length - i >= j - 1"
            variant="text"
            icon="mdi-circle"
-            :color="seatColor(seatGroup.surcharge, seatRows[i - 1].seats[j - 1].state)"
+            :color="getSeatColor(seatGroup.surcharge, seatRows[i - 1].seats[j - 1].state)"
            :disabled="seatRows[i - 1].seats[j - 1].state == 1"
            density="compact"
-            @click="handleSeatClick(seatRows[i - 1].seats[j - 1], seatRows[i - 1])"
+            @click="() => !disabled ? handleSeatClick(seatRows[i - 1].seats[j - 1], seatRows[i - 1]) : {}"
          />
        </td>
      </tr>
@@ -158,10 +153,10 @@ function seatColor(surcharge: number, state: number) {
            v-if="j <= i"
            variant="text"
            icon="mdi-circle"
-            :color="seatColor(seatGroup.surcharge, seatRows[i - 1].seats[j - 1].state)"
+            :color="getSeatColor(seatGroup.surcharge, seatRows[i - 1].seats[j - 1].state)"
            :disabled="seatRows[i - 1].seats[j - 1].state == 1"
            density="compact"
-            @click="handleSeatClick(seatRows[i - 1].seats[j - 1], seatRows[i - 1])"
+            @click="() => !disabled ? handleSeatClick(seatRows[i - 1].seats[j - 1], seatRows[i - 1]) : {}"
          />
        </td>
      </tr>
--- a/software/src/components/seatPlanMap/seatPlanMap.vue
+++ b/software/src/components/seatPlanMap/seatPlanMap.vue
@@ -13,7 +13,8 @@ let props = defineProps({
  concert: {
    type: ConcertModel,
    default: new ConcertModel()
-  }
+  },
+  disabled: Boolean
 })

 function findSeatCategory(name: string): SeatGroupModel {
@@ -42,6 +43,7 @@ const seatGroupI = findSeatCategory("I")
          :seat-group="seatGroupC"
          :concert="concert"
          background-color="grey"
+          :disabled="disabled"
        />
      </v-col>

@@ -51,6 +53,7 @@ const seatGroupI = findSeatCategory("I")
          :seat-group="seatGroupB"
          :concert="concert"
          background-color="grey"
+          :disabled="disabled"
        />
      </v-col>

@@ -60,6 +63,7 @@ const seatGroupI = findSeatCategory("I")
          :seat-group="seatGroupI"
          :concert="concert"
          background-color="grey"
+          :disabled="disabled"
        />
      </v-col>
    </v-row>
@@ -72,6 +76,7 @@ const seatGroupI = findSeatCategory("I")
          :seat-group="seatGroupD"
          :concert="concert"
          background-color="grey"
+          :disabled="disabled"
        />
      </v-col>

@@ -82,10 +87,11 @@ const seatGroupI = findSeatCategory("I")
          :concert="concert"
          background-color="grey"
          :withStage="location.layout == 3"
+          :disabled="disabled"
        />
      </v-col>

-      <!-- Seat Group H or stage -->
+      <!-- Stage of layout != 3 -->
      <v-col v-if="location.layout != 3">
        <v-sheet
          color="grey-darken-3"
@@ -97,11 +103,13 @@ const seatGroupI = findSeatCategory("I")
        </v-sheet>
      </v-col>

+      <!-- Seat Group H if layout == 3 -->
      <v-col v-else cols="4" class="pa-0">
        <seat-group-sheet
          :seat-group="seatGroupH"
          :concert="concert"
          background-color="grey"
+          :disabled="disabled"
        />
      </v-col>
    </v-row>
@@ -114,6 +122,7 @@ const seatGroupI = findSeatCategory("I")
          :seat-group="seatGroupE"
          :concert="concert"
          background-color="grey"
+          :disabled="disabled"
        />
      </v-col>

@@ -123,6 +132,7 @@ const seatGroupI = findSeatCategory("I")
          :seat-group="seatGroupF"
          :concert="concert"
          background-color="grey"
+          :disabled="disabled"
        />
      </v-col>

@@ -132,6 +142,7 @@ const seatGroupI = findSeatCategory("I")
          :seat-group="seatGroupG"
          :concert="concert"
          background-color="grey"
+          :disabled="disabled"
        />
      </v-col>
    </v-row>
--- a/software/src/components/seatPlanMap/standingArea.vue
+++ b/software/src/components/seatPlanMap/standingArea.vue
@@ -10,7 +10,11 @@ let props = defineProps({
  seatGroup: SeatGroupModel,
  concert: ConcertModel,
  backgroundColor: String,
-  withStage: Boolean
+  withStage: Boolean,
+  disabled: {
+    type: Boolean,
+    default: false
+  }
 })

 function handleSeatClick() {
@@ -34,35 +38,44 @@ function handleSeatClick() {
        height="100%"
        border
        :color="isHovering ? 'orange' : ''"
-        @click="handleSeatClick"
+        @click="() => { !disabled ? handleSeatClick() : {} }"
      >
-        <v-row>
-          <v-spacer />
+        <v-row class="d-flex justify-center align-center h-100">
+          <v-col>
+            <v-row>
+              <v-spacer />

-          <v-col class="text-center" cols="6">
-            <v-icon
-              v-if="!withStage"
-              icon="mdi-account-group"
-              size="x-large"
-            />
+              <v-col class="text-center" cols="6">
+                <v-icon
+                  v-if="!withStage"
+                  icon="mdi-account-group"
+                  size="x-large"
+                />

-            <v-sheet
-              v-else
-              color="grey-darken-3"
-              height="100"
-              width="100%"
-              class="d-flex justify-center align-center"
-            >
-              {{ $t('location.stage') }}
-            </v-sheet>
-          </v-col>
+                <v-sheet
+                  v-else
+                  color="grey-darken-3"
+                  height="100"
+                  width="100%"
                  
-          <v-spacer />
-        </v-row>
+                >
+                  {{ $t('location.stage') }}
+                </v-sheet>
+              </v-col>
+
+              <v-spacer />
+            </v-row>
+
+            <v-row>
+              <v-col class="text-center text-h6">
+                {{ seatGroup.occupied != undefined
+                  ? seatGroup.capacity - seatGroup.occupied 
+                  : seatGroup.capacity
+                }}
+                {{ $t('location.seat.standingPlace', 2) }}
+              </v-col>
+            </v-row>

-        <v-row>
-          <v-col class="text-center text-h6">
-            {{ seatGroup.capacity - seatGroup.occupied }} {{ $t('location.seat.standingPlace', 2) }}
          </v-col>
        </v-row>
      </v-sheet>
--- a/software/src/helpers/colorScripts.ts
+++ b/software/src/helpers/colorScripts.ts
@@ -0,0 +1,22 @@
+/**
+ * Get color of seat based on price and state
+ * 
+ * @param surcharge Amount of money on top of the minimu price for the category
+ * @param state 0 (free), 1 (booked), 2 (selected)
+ * 
+ * @return Color string variable, e.g. "red"
+ */
+export function getSeatColor(surcharge: number, state: number): string {
+  switch (state) {
+    case 0: {
+      switch(surcharge) {
+        case 0: return "orange"
+        case 10: return "teal"
+        case 20: return "green"
+        case 30: return "red"
+      }
+    }
+    case 1: return "grey"
+    case 2: return "orange"
+  }
+}
--- a/software/src/pages/locations/locationDetailPage/index.vue
+++ b/software/src/pages/locations/locationDetailPage/index.vue
@@ -1,12 +1,9 @@
 <script setup lang="ts">
 import { useRouter } from 'vue-router';
-import sectionDivider from '@/components/basics/sectionDivider.vue';
-import seatPlanMap from '@/components/seatPlanMap/seatPlanMap.vue';
 import heroImage from '@/components/pageParts/heroImage.vue';
-import concertListItem from '@/components/pageParts/concertListItem.vue';
-import cardViewHorizontal from '@/components/basics/cardViewHorizontal.vue';
 import { useLocationStore } from '@/stores/location.store';
-import circularProgressIndeterminate from '@/components/basics/circularProgressIndeterminate.vue';
+import locationConcertsSection from './locationConcertsSection.vue';
+import LocationSeatMapSection from './locationSeatMapSection.vue';

 const router = useRouter()
 const locationStore = useLocationStore()
@@ -33,66 +30,9 @@ locationStore.getLocationByName(String(router.currentRoute.value.params.name))
      <v-spacer/>

      <v-col cols="10">
-        <v-row>
-          <v-col>
-            <section-divider :title="$t('concert.concert', 2)" />
-          </v-col>
-        </v-row>
+        <location-concerts-section />

-        <v-row v-if="locationStore.fetchInProgress" v-for="i in 3">
-          <v-col class="text-center">
-            <card-view-horizontal :loading="true" />
-          </v-col>
-        </v-row>
-
-        <v-row
-          v-else-if="locationStore.location.concerts.length > 0"
-          v-for="concert of locationStore.location.concerts"
-        >
-          <v-col>
-            <concert-list-item
-              :concert="concert"
-              :band="concert.band"
-              :location="locationStore.location"
-              :title="concert.name"
-            >
-              <template #description>
-                {{ concert.band.name }}
-              </template>
-            </concert-list-item>
-          </v-col>
-        </v-row>
-
-        <v-row v-else>
-          <v-col>
-            <v-empty-state
-              icon="mdi-magnify"
-              :title="$t('concert.noConcertsFound')"
-            />
-          </v-col>
-        </v-row>
-
-
-        <v-row>
-          <v-col>
-            <section-divider :title="$t('location.seat.seatPlan')" />
-          </v-col>
-        </v-row>
-
-        <div v-if="locationStore.fetchInProgress">
-          <v-col class="text-center">
-            <circular-progress-indeterminate />
-          </v-col>
-        </div>
-
-        <v-row v-else>
-          <v-col>
-            <seat-plan-map
-              :location="locationStore.location"
-              :seat-groups="locationStore.location.seatGroups"
-            />
-          </v-col>
-        </v-row>
+        <location-seat-map-section />
      </v-col>

      <v-spacer/>
--- a/software/src/pages/locations/locationDetailPage/locationConcertsSection.vue
+++ b/software/src/pages/locations/locationDetailPage/locationConcertsSection.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { useLocationStore } from '@/stores/location.store';
+import cardViewHorizontal from '@/components/basics/cardViewHorizontal.vue';
+import sectionDivider from '@/components/basics/sectionDivider.vue';
+import concertListItem from '@/components/pageParts/concertListItem.vue';
+
+const locationStore = useLocationStore()
+</script>
+
+<template>
+  <!-- Concerts divider -->
+  <v-row>
+    <v-col>
+      <section-divider :title="$t('concert.concert', 2)" />
+    </v-col>
+  </v-row>
+
+  <!-- Display skeleton cards on fetching -->
+  <v-row v-for="i in 3"  v-if="locationStore.fetchInProgress">
+    <v-col class="text-center">
+      <card-view-horizontal :loading="true" />
+    </v-col>
+  </v-row>
+
+  <!-- Show concerts after fetching -->
+  <v-row
+    v-else-if="locationStore.location.concerts.length > 0"
+    v-for="concert of locationStore.location.concerts"
+  >
+    <v-col>
+      <concert-list-item
+        :concert="concert"
+        :band="concert.band"
+        :location="locationStore.location"
+        :title="concert.name"
+      >
+        <template #description>
+          {{ concert.band.name }}
+        </template>
+      </concert-list-item>
+    </v-col>
+  </v-row>
+
+  <!-- Show empty state if no items there -->
+  <v-row v-else>
+    <v-col>
+      <v-empty-state
+        icon="mdi-magnify"
+        :title="$t('concert.noConcertsFound')"
+      />
+    </v-col>
+  </v-row>
+</template>
--- a/software/src/pages/locations/locationDetailPage/locationSeatMapSection.vue
+++ b/software/src/pages/locations/locationDetailPage/locationSeatMapSection.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { useLocationStore } from '@/stores/location.store';
+import seatPlanMap from '@/components/seatPlanMap/seatPlanMap.vue';
+import sectionDivider from '@/components/basics/sectionDivider.vue';
+
+const locationStore = useLocationStore()
+</script>
+
+<template>
+  <!-- Seat Map divider -->
+  <v-row>
+    <v-col>
+      <section-divider :title="$t('location.seat.seatPlan')" />
+    </v-col>
+  </v-row>
+
+  <!-- Loading circle during fetching -->
+  <div v-if="locationStore.fetchInProgress">
+    <v-col class="text-center">
+      <circular-progress-indeterminate />
+    </v-col>
+  </div>
+
+  <!-- Seat map -->
+  <v-row v-else>
+    <v-col>
+      <seat-plan-map
+        :location="locationStore.location"
+        :seat-groups="locationStore.location.seatGroups"
+        :disabled="true"
+      />
+    </v-col>
+  </v-row>
+</template>
--- a/software/src/stores/location.store.ts
+++ b/software/src/stores/location.store.ts
@@ -15,7 +15,7 @@ export const useLocationStore = defineStore("locationStore", {
    topLocations: ref<Array<LocationApiModel>>([]),

    /** Enhanced data about a specific location */
-    location: ref<LocationDetailsApiModel>(),
+    location: ref<LocationDetailsApiModel>(new LocationDetailsApiModel()),

    /** All available cities */
    cities: ref<Array<CityModel>>([]),