Redesign seat map layout

software/src/components/seatPlanMap/seatGroupSheet.vue

@@ -4,40 +4,146 @@ import seatGroupTable from './seatGroupTable.vue';
 import standingArea from './standingArea.vue';
 import { ConcertModel } from '@/data/models/acts/concertModel';
 
-defineProps({
+let props = defineProps({
   seatGroup: SeatGroupModel,
   concert: ConcertModel,
-  backgroundColor: String
+  withStage: Boolean
 })
+
+function getCornerClass() {
+  switch(props.seatGroup.name) {
+    case 'C': return "rounded-ts-xl"
+    case 'E': return "rounded-bs-xl"
+    case 'G': return "rounded-be-xl"
+    case 'I': return "rounded-te-xl"
+  }
+}
+
+function getStructureNumber() {
+  switch(props.seatGroup.name) {
+    case 'A':
+    case 'B':
+    case 'F': return 0
+    case 'D':
+    case 'H': return 1
+    case 'C': return 2
+    case 'E': return 3
+    case 'G': return 4
+    case 'I': return 5
+  }
+}
+
+function getNameLocation() {
+  switch(props.seatGroup.name) {
+    case 'B':
+    case 'C':
+    case 'I': return 0
+    case 'E': 
+    case 'F': 
+    case 'G': return 1
+    case 'D': return 2
+    case 'H': return 3
+  }
+}
 </script>
 
 <template>
   <standing-area
     :seat-group="seatGroup"
     :concert="concert"
-    :background-color="backgroundColor"
+    :with-stage="withStage"
     v-if="seatGroup != undefined && seatGroup.standingArea"
   />
 
   <v-sheet
     v-else-if="seatGroup != undefined"
-    class="pa-5"
-    :color="backgroundColor"
+    class="pa-3"
+    :class="getCornerClass()"
+    border
+    style="height: 100%;"
   >
-    <v-row >
-      <v-col class="text-h4 text-center font-weight-black">
-        {{ seatGroup.name }}
-      </v-col>
-    </v-row>
+    <!-- Block name above seat icons -->
+    <div v-if="getNameLocation() == 0">
+      <v-row >
+        <v-col class="text-h4 text-center font-weight-black">
+          {{ seatGroup.name }}
+        </v-col>
+      </v-row>
 
-    <v-row>
-      <v-col class="d-flex justify-center align-center">
-        <seat-group-table
-          :seat-rows="seatGroup.seatRows"
-          :seat-group="seatGroup"
-          :concert="concert"
-        />
-      </v-col>
-    </v-row>
+      <v-row>
+        <v-spacer v-if="seatGroup.name == 'C'" />
+
+        <v-col class="d-flex justify-center align-center">
+          <seat-group-table
+            :seat-rows="seatGroup.seatRows"
+            :seat-group="seatGroup"
+            :concert="concert"
+            :structure="getStructureNumber()"
+          />
+        </v-col>
+
+        <v-spacer v-if="seatGroup.name == 'I'" />
+      </v-row>
+    </div>
+
+    <!-- Block name under seat icons -->
+    <div v-else-if="getNameLocation() == 1">
+      <v-row>
+        <v-col class="d-flex justify-center align-center">
+          <v-spacer v-if="seatGroup.name == 'E'" />
+
+          <seat-group-table
+            :seat-rows="seatGroup.seatRows"
+            :seat-group="seatGroup"
+            :concert="concert"
+            :structure="getStructureNumber()"
+          />
+        </v-col>
+
+        <v-spacer v-if="seatGroup.name == 'G'" />
+      </v-row>
+
+      <v-row >
+        <v-col class="text-h4 text-center font-weight-black">
+          {{ seatGroup.name }}
+        </v-col>
+      </v-row>
+    </div>
+
+    <!-- Block name left to seat icons -->
+    <div v-else-if="getNameLocation() == 2">
+      <v-row>
+        <v-col class="text-h4 font-weight-black d-flex justify-center align-center">
+          {{ seatGroup.name }}
+        </v-col>
+
+        <v-col class="d-flex justify-center align-center">
+          <seat-group-table
+            :seat-rows="seatGroup.seatRows"
+            :seat-group="seatGroup"
+            :concert="concert"
+            :structure="getStructureNumber()"
+          />
+        </v-col>
+      </v-row>
+    </div>
+
+    <!-- Block name right to seat icons -->
+    <div v-else-if="getNameLocation() == 3">
+      <v-row>
+        <v-col class="d-flex justify-center align-center">
+          <seat-group-table
+            :seat-rows="seatGroup.seatRows"
+            :seat-group="seatGroup"
+            :concert="concert"
+            :structure="getStructureNumber()"
+          />
+        </v-col>
+
+        <v-col class="text-h4 font-weight-black d-flex justify-center align-center">
+          {{ seatGroup.name }}
+        </v-col>
+      </v-row>
+    </div>
   </v-sheet>
 </template>

software/src/components/seatPlanMap/seatGroupTable.vue

@@ -11,7 +11,22 @@ const basketStore = useBasketStore()
 let props = defineProps({
   seatRows: Array<SeatRowModel>,
   concert: ConcertModel,
-  seatGroup: SeatGroupModel
+  seatGroup: SeatGroupModel,
+
+  /**
+   * Structure of the seat placment
+   * 
+   * 0 = Normal rectangular form, rows from top to bottom (default)
+   * 1 = Normal rectangular form but rows and cols are switched
+   * 2 = Pyramid structure from right bottom corner
+   * 3 = Pyramid structure from right top corner
+   * 4 = Pyramid structure from left top corner
+   * 5 = Pyramid structure from left bottom corner
+   */
+  structure: {
+    type: Number,
+    default: 0
+  }
 })
 
 function handleSeatClick(clickedSeat: SeatModel, seatRow: SeatRowModel) {
@@ -30,24 +45,31 @@ function handleSeatClick(clickedSeat: SeatModel, seatRow: SeatRowModel) {
   }
 }
 
-function seatColor(state: number) {
+function seatColor(surcharge: number, state: number) {
   switch (state) {
-    case 0: return "grey"
-    case 1: return "red"
+    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>
-  <table>
+  <table v-if="structure == 0">
     <tbody>
       <tr v-for="seatRow in seatRows">
         <td v-for="seat in seatRow.seats">
           <v-btn
             variant="text"
             icon="mdi-circle"
-            :color="seatColor(seat.state)"
+            :color="seatColor(seatGroup.surcharge, seat.state)"
             :disabled="seat.state == 1"
             density="compact"
             @click="handleSeatClick(seat, seatRow)"
@@ -56,4 +78,93 @@ function seatColor(state: number) {
       </tr>
     </tbody>
   </table>
+
+  <table v-else-if="structure == 1">
+    <tbody>
+      <tr v-for="i in seatRows[0].seats.length">
+        <td v-for="row in seatRows">
+          <v-btn
+            variant="text"
+            icon="mdi-circle"
+            :color="seatColor(seatGroup.surcharge, row.seats[i - 1].state)"
+            :disabled="row.seats[i - 1].state == 1"
+            density="compact"
+            @click="handleSeatClick(row.seats[i - 1], row)"
+          />
+        </td>
+      </tr>
+    </tbody>
+  </table>
+
+  <table v-else-if="structure == 2">
+    <tbody>
+      <tr v-for="i in seatRows.length">
+        <td v-for="j in seatRows[i - 1].seats.length">
+          <v-btn
+            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)"
+            :disabled="seatRows[i - 1].seats[j - 1].state == 1"
+            density="compact"
+            @click="handleSeatClick(seatRows[i - 1].seats[j - 1], seatRows[i - 1])"
+          />
+        </td>
+      </tr>
+    </tbody>
+  </table>
+
+  <table v-else-if="structure == 3">
+    <tbody>
+      <tr v-for="i in seatRows.length">
+        <td v-for="j in seatRows[i - 1].seats.length">
+          <v-btn
+            v-if="j >= i"
+            variant="text"
+            icon="mdi-circle"
+            :color="seatColor(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])"
+          />
+        </td>
+      </tr>
+    </tbody>
+  </table>
+
+  <table v-else-if="structure == 4">
+    <tbody>
+      <tr v-for="i in seatRows.length">
+        <td v-for="j in seatRows[i - 1].seats.length">
+          <v-btn
+            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)"
+            :disabled="seatRows[i - 1].seats[j - 1].state == 1"
+            density="compact"
+            @click="handleSeatClick(seatRows[i - 1].seats[j - 1], seatRows[i - 1])"
+          />
+        </td>
+      </tr>
+    </tbody>
+  </table>
+
+  <table v-else-if="structure == 5">
+    <tbody>
+      <tr v-for="i in seatRows.length">
+        <td v-for="j in seatRows[i - 1].seats.length">
+          <v-btn
+            v-if="j <= i"
+            variant="text"
+            icon="mdi-circle"
+            :color="seatColor(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])"
+          />
+        </td>
+      </tr>
+    </tbody>
+  </table>
 </template>

software/src/components/seatPlanMap/seatPlanMap.vue

@@ -2,14 +2,18 @@
 import { SeatGroupModel } from '@/data/models/locations/seatGroupModel';
 import seatGroupSheet from './seatGroupSheet.vue';
 import { ConcertModel } from '@/data/models/acts/concertModel';
+import { LocationModel } from '@/data/models/locations/locationModel';
 
 let props = defineProps({
-  seatGroups: Array<SeatGroupModel>,
-  concert: ConcertModel
+  location: LocationModel,
+  concert: {
+    type: ConcertModel,
+    default: new ConcertModel()
+  }
 })
 
 function findSeatCategory(name: string): SeatGroupModel {
-  return props.seatGroups.find(category =>
+  return props.location.seatGroups.find(category =>
     category.name == name
   )
 }
@@ -20,50 +24,103 @@ const seatGroupC = findSeatCategory("C")
 const seatGroupD = findSeatCategory("D")
 const seatGroupE = findSeatCategory("E")
 const seatGroupF = findSeatCategory("F")
+const seatGroupG = findSeatCategory("G")
+const seatGroupH = findSeatCategory("H")
+const seatGroupI = findSeatCategory("I")
 </script>
 
 <template>
-  <v-row>
-    <v-col></v-col>
+  <v-sheet border class="pa-5">
+    <v-row>
+      <v-col cols="4">
+        <seat-group-sheet
+          :seat-group="seatGroupC"
+          :concert="concert"
+          background-color="grey"
+        />
+      </v-col>
 
-    <v-col>
-      <v-sheet
-        color="grey-darken-3"
-        height="50"
-        class="px-5 py-2 d-flex justify-center align-center"
-      >
-        {{ $t('stage') }}
-      </v-sheet>
-    </v-col>
+      <v-col cols="4">
+        <seat-group-sheet
+          :seat-group="seatGroupB"
+          :concert="concert"
+          background-color="grey"
+        />
+      </v-col>
 
-    <v-col></v-col>
-  </v-row>
+      <v-col cols="4">
+        <seat-group-sheet
+          :seat-group="seatGroupI"
+          :concert="concert"
+          background-color="grey"
+        />
+      </v-col>
+    </v-row>
 
-  <v-row>
-    <v-col>
-      <seat-group-sheet :seat-group="seatGroupC" :concert="concert" background-color="cyan-darken-4" />
-    </v-col>
+    <v-row>
+      <v-col cols="4">
+        <seat-group-sheet
+          v-if="location.layout != 1"
+          :seat-group="seatGroupD"
+          :concert="concert"
+          background-color="grey"
+        />
+      </v-col>
 
-    <v-col>
-      <seat-group-sheet :seat-group="seatGroupA" :concert="concert" background-color="grey" />
-    </v-col>
+      <v-col :cols="location.layout == 1 ? 10 : 4">
+        <seat-group-sheet
+          :seat-group="seatGroupA"
+          :concert="concert"
+          background-color="grey"
+          :withStage="location.layout == 3"
+        />
+      </v-col>
 
-    <v-col>
-      <seat-group-sheet :seat-group="seatGroupB" :concert="concert" background-color="cyan-darken-4" />
-    </v-col>
-  </v-row>
+      <v-col v-if="location.layout != 3">
+        <v-sheet
+          color="grey-darken-3"
+          height="100%"
+          width="50"
+          class="px-5 py-2 d-flex justify-center align-center"
+        >
+          {{ $t('stage') }}
+        </v-sheet>
+      </v-col>
 
-  <v-row>
-    <v-col>
-      <seat-group-sheet :seat-group="seatGroupF" :concert="concert" background-color="deep-purple-darken-4" />
-    </v-col>
+      <v-col v-else cols="4">
+        <seat-group-sheet
+          :seat-group="seatGroupH"
+          :concert="concert"
+          background-color="grey"
+        />
+      </v-col>
+    </v-row>
 
-    <v-col>
-      <seat-group-sheet :seat-group="seatGroupD" :concert="concert" background-color="indigo-darken-4" />
-    </v-col>
 
-    <v-col>
-      <seat-group-sheet :seat-group="seatGroupE" :concert="concert" background-color="deep-purple-darken-4" />
-    </v-col>
-  </v-row>
+    <v-row v-if="location.layout != 1">
+      <v-col cols="4">
+        <seat-group-sheet
+          :seat-group="seatGroupE"
+          :concert="concert"
+          background-color="grey"
+        />
+      </v-col>
+
+      <v-col cols="4">
+        <seat-group-sheet
+          :seat-group="seatGroupF"
+          :concert="concert"
+          background-color="grey"
+        />
+      </v-col>
+
+      <v-col cols="4">
+        <seat-group-sheet
+          :seat-group="seatGroupG"
+          :concert="concert"
+          background-color="grey"
+        />
+      </v-col>
+    </v-row>
+  </v-sheet>
 </template>

software/src/components/seatPlanMap/standingArea.vue

@@ -9,7 +9,8 @@ const basketStore = useBasketStore()
 let props = defineProps({
   seatGroup: SeatGroupModel,
   concert: ConcertModel,
-  backgroundColor: String
+  backgroundColor: String,
+  withStage: Boolean
 })
 
 function handleSeatClick() {
@@ -31,22 +32,32 @@ function handleSeatClick() {
         class="pa-5"
         min-height="200"
         height="100%"
-        :color="isHovering ? 'red' : backgroundColor"
+        border
+        :color="isHovering ? 'orange' : ''"
         @click="handleSeatClick"
       >
-        <v-row >
-          <v-col class="text-h4 text-center font-weight-black">
-            {{ seatGroup.name }}
-          </v-col>
-        </v-row>
-
         <v-row>
-          <v-col class="text-center">
+          <v-spacer />
+
+          <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('stage') }}
+            </v-sheet>
           </v-col>
+
+          <v-spacer />
         </v-row>
 
         <v-row>