Location page displays city groups with all available concert locations

software/src/components/cardWithTopImage.vue

@@ -6,7 +6,10 @@ defineProps({
 </script>
 
 <template>
-  <v-card>
+  <v-card
+    variant="outlined"
+    link
+  >
     <v-img
       :src="'http://localhost:3000/static/' + image"
       aspect-ratio="1"

software/src/components/sectionDivider.vue

@@ -1,11 +1,44 @@
 <script setup lang="ts">
 defineProps({
-  title: String
+  title: String,
+  image: String
 })
+
+function backgroundStyle(image: string) {
+  return {
+    "background-image": 'http://localhost:3000/static/cities/hannover.jpg',
+    height: `100px`
+  }
+}
 </script>
 
 <template>
-  <v-row class="pt-3">
+  <div v-if="image" class="pt-1">
+    <v-img
+      :src="'http://localhost:3000/static/' + image"
+      height="120"
+      gradient="to top right, rgba(0,0,0,.5), rgba(0,0,0,.7)"
+      cover
+      class="rounded-t-xl"
+    >
+      <v-container
+        height="100%"
+        class="d-flex justify-center align-center"
+      >
+        <v-row>
+          <v-spacer />
+
+          <v-col class="v-col-auto">
+            <span class="text-h3" style="color: white;">{{ title }}</span>
+          </v-col>
+
+          <v-spacer />
+        </v-row>
+      </v-container>
+    </v-img>
+  </div>
+
+  <v-row v-else class="pt-3">
     <v-col class="d-flex justify-center align-center">
       <v-sheet height="12" width="100%" color="primary" :rounded="true" />
     </v-col>

software/src/data/api/cityApi.ts

@@ -0,0 +1,7 @@
+import axios from "axios"
+
+const BASE_URL = "http://localhost:3000/cities"
+
+export async function getAllCities() {
+  return await axios.get(BASE_URL)
+}

software/src/data/models/cityModel.ts

@@ -1,5 +1,12 @@
 export class CityModel {
-  id: Number
-  name: String
-  country: String
+  id: number
+  name: string
+  country: string
+  image: string
+  locations: Array<{
+    id: number
+    name: string
+    address: string
+    image: string
+  }>
 }

software/src/data/models/filterModel.ts

@@ -1,4 +0,0 @@
-export class FilterModel {
-  icon: string
-  name: string
-}

software/src/data/models/genreModel.ts

@@ -1,4 +1,4 @@
 export class GenreModel {
-  id: Number
-  name: String
+  id: number
+  name: string
 }

software/src/data/models/locationModel.ts

@@ -1,9 +1,11 @@
-import { CityModel } from "./cityModel"
-
 export class LocationModel {
   id: number
   name: string
   address: string
-  city: CityModel
   image: string
+  city: {
+    id: number
+    name: string
+    country: string
+  }
 }

software/src/data/models/memberModel.ts

@@ -2,6 +2,6 @@ import { BandModel } from "./bandModel"
 
 export class MemberModel {
   id: Number
-  name: String
-  image: String
+  name: string
+  image: string
 }

software/src/data/models/showModel.ts

@@ -1,9 +1,9 @@
 import { LocationModel } from "./locationModel"
 
 export class ShowModel {
-  id: Number
-  inStock: Number
-  date: String
-  price: Number
+  id: number
+  inStock: number
+  date: string
+  price: number
   location: LocationModel
 }

software/src/data/stores/showStore.ts

@@ -7,12 +7,17 @@ import { getAllBands } from "../api/bandApi";
 import { BandModel } from "../models/bandModel";
 import { LocationModel } from "../models/locationModel";
 import { getAllLocations } from "../api/locationApi";
+import { getAllGenres } from "../api/genreApi";
+import { CityModel } from "../models/cityModel";
+import { getAllCities } from "../api/cityApi";
 
 export const useShowStore = defineStore("showStore", {
   state: () => ({
     tours: useLocalStorage<Array<TourModel>>("hackmycart/showStore/tours", []),
     bands: useLocalStorage<Array<BandModel>>("hackmycart/showStore/bands", []),
-    locations: useLocalStorage<Array<LocationModel>>("hackmycart/showStore/locations", [])
+    locations: useLocalStorage<Array<LocationModel>>("hackmycart/showStore/locations", []),
+    cities: useLocalStorage<Array<CityModel>>("hackmycart/showStore/cities", []),
+    genres: useLocalStorage<Array<GenreModel>>("hackmycart/showStore/genres", [])
   }),
   
   actions: {
@@ -31,6 +36,16 @@ export const useShowStore = defineStore("showStore", {
         .then(result => {
           this.locations = result.data
         })
+
+      await getAllGenres()
+        .then(result => {
+          this.genres = result.data
+        })
+
+      await getAllCities()
+        .then(result => {
+          this.cities = result.data
+        })
     }
   }
 })

software/src/pages/shows/genresPage/index.vue

@@ -1,6 +1,18 @@
 <script setup lang="ts">
+import sectionDivider from '@/components/sectionDivider.vue';
+import { useShowStore } from '@/data/stores/showStore';
+
+const showStore = useShowStore()
 </script>
 
 <template>
-  Genres
+  <v-container>
+    <div v-for="genre in showStore.genres">
+      <v-row>
+        <v-col>
+          <section-divider :title="genre.name" />
+        </v-col>
+      </v-row>
+    </div>
+  </v-container>
 </template>

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

@@ -1,6 +1,33 @@
 <script setup lang="ts">
+import sectionDivider from '@/components/sectionDivider.vue';
+import { useShowStore } from '@/data/stores/showStore';
+import cardWithTopImage from '@/components/cardWithTopImage.vue';
+
+const showStore = useShowStore()
 </script>
 
 <template>
-  Locations
+  <v-container>
+    <div v-for="city in showStore.cities">
+      <v-row>
+        <v-col>
+          <section-divider 
+            :title="city.name"
+            :image="'cities/' + city.image"
+          />
+        </v-col>
+      </v-row>
+
+      <v-row>
+        <v-col v-for="location in city.locations" cols="3">
+          <card-with-top-image
+            :image="'locations/' + location.image"
+            :title="location.name"
+          >
+            {{ location.address }}
+          </card-with-top-image>
+        </v-col>
+      </v-row>
+    </div>
+  </v-container>
 </template>