LocationDetailPage: Seat not selectable, loading animation during fetching

2024-11-04 18:15:49 +01:00
parent a3e8d30b6c
commit ffccd9f2d4
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>
+            
+            <p class="text-h6 text-medium-emphasis">
+              <slot name="description"></slot>
+            </p>
+          </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"
-              >
-                {{ 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>
+        </v-col>
+      </v-row>
+      
+    </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%"
+                  
+                >
+                  {{ $t('location.stage') }}
+                </v-sheet>
+              </v-col>

-          <v-spacer />
-        </v-row>
+              <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>