LocationDetailPage: Seat not selectable, loading animation during fetching

software/src/components/pageParts/heroImage.vue

@@ -21,78 +21,76 @@ defineProps({
 </script>
 
 <template>
-  <div class="position-relative top-0 left-0">
+  <v-img
-    <v-img
+    :src="!loading ? 'http://localhost:3000/static/' + image : ''"
-      :src="'http://localhost:3000/static/' + image"
+    height="600"
-      height="600"
+    gradient="to top, rgba(0, 0, 0, .9), rgba(255, 255, 255, 0.1)"
-      gradient="to top, rgba(0, 0, 0, .9), rgba(255, 255, 255, 0.1)"
+    cover
-      cover
+  >
-    >
+    <div class="position-absolute bottom-0 pa-5" style="width: 100%;">
-      <div class="position-absolute bottom-0 pa-5" style="width: 100%;">
+      <v-row>
-        <v-row>
+        <!-- Logo -->
-          <!-- Logo -->
+        <v-col cols="2">
-          <v-col cols="2">
+          <v-skeleton-loader
-            <v-skeleton-loader
+            type="image"
-              type="image"
+            :loading="loading"
-              :loading="loading"
+            height="200"
-              height="200"
+            width="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>
+              {{ chip }}
-                <v-img
+            </v-chip>
-                  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">
+            <!-- Description -->
-            <!-- Title -->
+            <p class="text-h6 text-medium-emphasis" v-if="!$slots.description">
-            <v-skeleton-loader
+              {{ description }}
-              type="heading"
+            </p>
-              :loading="loading"
+            
-              width="500"
+            <p class="text-h6 text-medium-emphasis">
-            >
+              <slot name="description"></slot>
-              <span class="text-h3 font-weight-bold">
+            </p>
-                {{ title }}
+          </v-skeleton-loader>
-              </span>
-            </v-skeleton-loader>
 
-            <v-skeleton-loader
+        </v-col>
-              :loading="loading"
+      </v-row>
-              type="sentences"
+      
-            >
+    </div>
-              <!-- Chips -->
+  </v-img>
-              <v-chip
-                v-for="chip in chips"
-                class="mr-2 my-1"
-                variant="flat"
-              >
-                {{ chip }}
-              </v-chip>
-
-
-              <!-- 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>
 </template>
 
 <style scoped>

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>
 

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>

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>

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-row class="d-flex justify-center align-center h-100">
-          <v-spacer />
+          <v-col>
+            <v-row>
+              <v-spacer />
 
-          <v-col class="text-center" cols="6">
+              <v-col class="text-center" cols="6">
-            <v-icon
+                <v-icon
-              v-if="!withStage"
+                  v-if="!withStage"
-              icon="mdi-account-group"
+                  icon="mdi-account-group"
-              size="x-large"
+                  size="x-large"
-            />
+                />
 
-            <v-sheet
+                <v-sheet
-              v-else
+                  v-else
-              color="grey-darken-3"
+                  color="grey-darken-3"
-              height="100"
+                  height="100"
-              width="100%"
+                  width="100%"
-              class="d-flex justify-center align-center"
+                  
-            >
+                >
-              {{ $t('location.stage') }}
+                  {{ $t('location.stage') }}
-            </v-sheet>
+                </v-sheet>
-          </v-col>
+              </v-col>
 
-          <v-spacer />
+              <v-spacer />
-        </v-row>
+            </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>

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"
+  }
+}

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>
+        <location-concerts-section />
-          <v-col>
-            <section-divider :title="$t('concert.concert', 2)" />
-          </v-col>
-        </v-row>
 
-        <v-row v-if="locationStore.fetchInProgress" v-for="i in 3">
+        <location-seat-map-section />
-          <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>
       </v-col>
 
       <v-spacer/>

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>

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>

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>>([]),