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>