New page for all concerts

software/src/pages/locations/locationDetailPage/index.vue

@@ -7,15 +7,15 @@ import { ref } from 'vue';
 import { useFeedbackStore } from '@/data/stores/feedbackStore';
 import heroImage from '@/components/pageParts/heroImage.vue';
 import concertListItem from '@/components/pageParts/concertListItem.vue';
-import { LocationApiModel } from '@/data/models/locations/locationApiModel';
+import { LocationDetailsApiModel } from '@/data/models/locations/locationDetailsApiModel';
 
 const router = useRouter()
 const feedbackStore = useFeedbackStore()
-const location = ref<LocationApiModel>(new LocationApiModel())
+const location = ref<LocationDetailsApiModel>(new LocationDetailsApiModel())
 
 feedbackStore.fetchDataFromServerInProgress = true
 
-getLocation(String(router.currentRoute.value.params.locationName))
+getLocation(String(router.currentRoute.value.params.name))
   .then(result => {
     location.value = result.data
     feedbackStore.fetchDataFromServerInProgress = false
@@ -61,11 +61,11 @@ getLocation(String(router.currentRoute.value.params.locationName))
           <v-col>
             <concert-list-item
               :concert="concert"
-              :title="concert.event.name"
-              :onClick="() => router.push('/bands/' + concert.event.band.name.replaceAll(' ', '-').toLowerCase())"
+              :title="concert.name"
+              :onClick="() => router.push('/bands/' + concert.band.name.replaceAll(' ', '-').toLowerCase())"
             >
               <template #description>
-                {{ concert.event.band.name }}
+                {{ concert.band.name }}
               </template>
             </concert-list-item>
           </v-col>
@@ -97,6 +97,7 @@ getLocation(String(router.currentRoute.value.params.locationName))
           <v-col>
             <seat-plan-map
               :location="location"
+              :seat-groups="location.seatGroups"
             />
           </v-col>
         </v-row>

software/src/pages/locations/locationsPage/index.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
 import sectionDivider from '@/components/basics/sectionDivider.vue';
 import cardWithTopImage from '@/components/basics/cardViewTopImage.vue';
-import { useShoppingStore } from '@/data/stores/shoppingStore';
 import { useFeedbackStore } from '@/data/stores/feedbackStore';
 import locationListItem from '@/components/pageParts/locationListItem.vue';
+import { useLocationStore } from '@/data/stores/locationStore';
 
-const shoppingStore = useShoppingStore()
+const locationStore = useLocationStore()
 const feedbackStore = useFeedbackStore()
 
-shoppingStore.getCities()
+locationStore.getLocations()
 </script>
 
 <template>
@@ -37,23 +37,31 @@ shoppingStore.getCities()
 
         <!-- When all data are downloaded -->
         <div
-          v-else
-          v-for="city in shoppingStore.cities"
+          v-else-if="locationStore.locations.length > 0"
+          v-for="city in locationStore.cities"
         >
           <v-row>
             <v-col>
-              <section-divider 
-                :title="city.name"
-              />
-            </v-col>
-          </v-row>
+              <v-row>
+                <v-col>
+                  <section-divider 
+                    :title="city.name"
+                  />
+                </v-col>
+              </v-row>
+
+              <v-row>
+                <v-col
+                  v-for="location in locationStore.getLocationsByCity(city.name)"
+                  cols="3"
+                >
+                  <location-list-item
+                    :location="location"
+                    :nrOfConcerts="location.nrOfConcerts"
+                  />
+                </v-col>
+              </v-row>
 
-          <v-row>
-            <v-col v-for="location in city.locations" cols="3">
-              <location-list-item
-                :location="location"
-                :concerts="location.concerts"
-              />
             </v-col>
           </v-row>
         </div>
@@ -61,8 +69,5 @@ shoppingStore.getCities()
 
       <v-spacer />
     </v-row>
-
-
-    
   </v-container>
 </template>