Remove EventModel in frontend

software/backend/routes/band.routes.ts

@@ -13,6 +13,9 @@ export const band = Router()
 
 // Get all bands
 band.get("/", (req: Request, res: Response) => {
+  let sort = req.query.sort
+  let count = req.query.count
+
   Band.findAll({
     include: [
       {
@@ -35,13 +38,28 @@ band.get("/", (req: Request, res: Response) => {
 
         // Delete unnecessary Arrays
         delete band.dataValues.ratings
-        delete band.dataValues.concerts
 
         for (let genre of band.dataValues.genres) {
           delete genre.dataValues.BandGenre
         }
       }
 
+      // Sort ascending/descending by number of concerts
+      if (sort != undefined) {
+        bands.sort((band1, band2) => {
+          if (sort == "desc") {
+            return band2.dataValues.concerts.length - band1.dataValues.concerts.length
+          } else if (sort == "asc") {
+            return band1.dataValues.concerts.length - band2.dataValues.concerts.length
+          }
+        })
+      }
+
+      // Limit number of items
+      if (count != undefined) {
+        bands.splice(Number(count))
+      }
+
       res.status(200).json(bands)
     })
 })

software/backend/routes/concert.routes.ts

@@ -12,6 +12,8 @@ export const concert = Router()
 
 
 concert.get("/", (req: Request, res: Response) => {
+  let count = req.query.count
+
   Concert.findAll({
     include: [ Band, Location ],
     order: [
@@ -19,6 +21,11 @@ concert.get("/", (req: Request, res: Response) => {
     ]
   })
     .then(concerts => {
+      // Limit number of items
+      if (count != undefined) {
+        concerts.splice(Number(count))
+      }
+
       res.status(200).json(concerts)
     })
 })

software/backend/routes/location.routes.ts

@@ -27,6 +27,7 @@ location.get("/", (req: Request, res: Response) => {
     }
   })
     .then(async locations => {
+      // Sort ascending/descending by number of concerts
       if (sort != undefined) {
         locations.sort((location1, location2) => {
           if (sort == "desc") {

software/backend/scripts/databaseHelper.ts

@@ -226,7 +226,7 @@ export async function prepopulateDatabase() {
                   date: concert.date,
                   name: concertGroup.name,
                   price: concert.price,
-                  image: concertGroup.name,
+                  image: concertGroup.image,
                   inStock: concert.inStock,
                   offered: true,
                   bandId: dataset.dataValues.id,

software/src/components/navigation/navigationAppendItems.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { useAccountStore } from '@/data/stores/accountStore';
 import { useBasketStore } from '@/data/stores/basketStore';
-import router from '@/plugins/router';
 
 const accountStore = useAccountStore()
 const basketStore = useBasketStore()
@@ -11,7 +10,7 @@ const basketStore = useBasketStore()
   <v-btn variant="plain" icon="mdi-magnify" to="/search" />
 
   <v-btn v-if="accountStore.userAccount.id == 0" variant="plain" icon="mdi-account" to="/account/login" />
-  <v-btn v-else variant="plain" icon="mdi-account" to="/account/home" />
+  <v-btn v-else variant="plain" icon="mdi-account" to="/account" />
 
   <div>
     <v-badge
@@ -23,6 +22,6 @@ const basketStore = useBasketStore()
     </v-badge>
   </div>
 
-  <v-btn variant="plain" icon="mdi-help" to="/system/help" />
+  <v-btn variant="plain" icon="mdi-help" to="/help" />
-  <v-btn variant="plain" icon="mdi-cog" to="/system/preferences"/>
+  <v-btn variant="plain" icon="mdi-cog" to="/preferences"/>
 </template>

software/src/components/pageParts/bandListItem.vue

@@ -57,7 +57,7 @@ defineProps({
 
         <div>
           <v-btn variant="flat" color="secondary">
-            {{ concerts.length }} {{ $t('event', concerts.length) }}
+            {{ $t('more') }}
           </v-btn>
         </div>
       </div>

software/src/data/api/bandApi.ts

@@ -2,7 +2,7 @@ import axios from "axios"
 
 let BASE_URL = "http://localhost:3000/bands"
 
-export async function getAllBands() {
+export async function fetchAllBands() {
   return await axios.get(BASE_URL)
 }
 

software/src/data/api/concertApi.ts

@@ -6,7 +6,7 @@ export async function fetchConcerts() {
   return await axios.get(BASE_URL)
 }
 
-export async function getConcert(id: number) {
+export async function fetchConcert(id: number) {
   if (id != undefined) {
     return await axios.get(BASE_URL + "/concert/" + id)
   } else {
@@ -14,6 +14,19 @@ export async function getConcert(id: number) {
   }
 }
 
+/**
+ * Returns events with the most concerts
+ * 
+ * @param nrOfConcerts Limit number of returned objects
+ * 
+ * @returns Limited number of objects with the most concerts in it
+ */
+export async function fetchUpcomingConcerts(nrOfConcerts: number) {
+  let url = BASE_URL + "?count=" + nrOfConcerts
+
+  return await axios.get(url)
+}
+
 export async function searchConcert(searchTerm: string) {
   return await axios.get(BASE_URL + '/search?value=' + searchTerm)
 }

software/src/data/api/eventApi.ts

@@ -1,36 +0,0 @@
-import axios from "axios"
-
-const BASE_URL = "http://localhost:3000/events"
-
-/**
- * Request all events in the database
- * 
- * @param city Filter by name of city where the concert is
- * @param genre Filter by genre of the band
- * 
- * @returns All events which fulfill the params
- */
-export async function fetchEvents(city: string = "", genre: string = "") {
-  let url = BASE_URL + "?"
-  url += (city.length > 0) ? "city=" + city + "&" : ""
-  url += (genre.length > 0) ? "genre=" + genre : ""
-
-  return await axios.get(url)
-}
-
-/**
- * Returns events with the most concerts
- * 
- * @param nrOfEvents Limit number of returned objects
- * 
- * @returns Limited number of objects with the most concerts in it
- */
-export async function getTopEvents(nrOfEvents: number) {
-  let url = BASE_URL + "?sort=desc&count=" + nrOfEvents
-
-  return await axios.get(url)
-}
-
-export async function searchEvent(searchTerm: string) {
-  return await axios.get(BASE_URL + "/search?value=" + searchTerm)
-}

software/src/data/api/locationApi.ts

@@ -7,11 +7,10 @@ export async function fetchAllLocations() {
 }
 
 export async function getLocation(locationName: string) {
-  console.log(locationName)
   return await axios.get(BASE_URL + "/location/" + locationName)
 }
 
-export async function getTopLocations(nrOfLocations: number) {
+export async function fetchTopLocations(nrOfLocations: number) {
   let url = BASE_URL + "?sort=desc&count=" + nrOfLocations
 
   return await axios.get(url)

software/src/data/models/acts/bandApiModel.ts

@@ -1,4 +1,5 @@
 import { BandModel } from "./bandModel";
+import { ConcertModel } from "./concertModel";
 import { GenreModel } from "./genreModel"
 
 /**
@@ -7,5 +8,5 @@ import { GenreModel } from "./genreModel"
 export class BandApiModel extends BandModel {
   genres: Array<GenreModel> = []
   rating: number = 0
-  nrOfConcerts: number = 0
+  concerts: Array<ConcertModel> = []
 }

software/src/data/models/acts/concertDetailsApiModel.ts

@@ -0,0 +1,9 @@
+import { LocationDetailsApiModel } from "../locations/locationDetailsApiModel";
+import { BandModel } from "./bandModel";
+import { ConcertModel } from "./concertModel";
+
+export class ConcertDetailsApiModel extends ConcertModel {
+  location: LocationDetailsApiModel = new LocationDetailsApiModel()
+  band: BandModel = new BandModel()
+
+}

software/src/data/stores/bandStore.ts

@@ -0,0 +1,35 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import { BandApiModel } from "../models/acts/bandApiModel";
+import { fetchAllBands, getBand } from "../api/bandApi";
+import { BandDetailsApiModel } from "../models/acts/bandDetailsApiModel";
+
+export const useBandStore = defineStore("bandStore", {
+  state: () => ({
+    bands: ref<Array<BandApiModel>>([]),
+    band: ref<BandDetailsApiModel>(new BandDetailsApiModel()),
+    fetchInProgress: ref(false)
+  }),
+
+  actions: {
+    async getBands() {
+      this.fetchInProgress = true
+
+      fetchAllBands()
+        .then(result => {
+          this.bands = result.data
+          this.fetchInProgress = false
+        })
+    },
+
+    async getBand(name: string) {
+      this.fetchInProgress = true
+
+      getBand(name)
+        .then(result => {
+          this.band = result.data
+          this.fetchInProgress = false
+        })
+    } 
+  }
+})

software/src/data/stores/basketStore.ts

@@ -9,6 +9,7 @@ import { ref } from "vue";
 import { SelectedSeatModel } from "../models/ordering/selectedSeatModel";
 import { calcPrice } from "@/scripts/concertScripts";
 import { BandModel } from "../models/acts/bandModel";
+import { ConcertModel } from "../models/acts/concertModel";
 
 export const useBasketStore = defineStore('basketStore', {
   state: () => ({
@@ -50,7 +51,7 @@ export const useBasketStore = defineStore('basketStore', {
       )
     },
 
-    moveSeatSelectionsToBasket(event, band: BandModel) {
+    moveSeatSelectionsToBasket(concert: ConcertModel, band: BandModel) {
       // todo
       // for (let selectedSeat of this.selectedSeats) {
       //   let itemInBasket: BasketItemModel = this.itemsInBasket.find((basketItem: BasketItemModel) => {

software/src/data/stores/concertStore.ts

@@ -1,23 +1,48 @@
 import { defineStore } from "pinia";
 import { ref } from "vue";
 import { ConcertApiModel } from "../models/acts/concertApiModel";
-import { useFeedbackStore } from "./feedbackStore";
+import { fetchConcert, fetchConcerts, fetchUpcomingConcerts } from "../api/concertApi";
-import { fetchConcerts } from "../api/concertApi";
+import { ConcertDetailsApiModel } from "../models/acts/concertDetailsApiModel";
 
 export const useConcertStore = defineStore("concertStore", {
   state: () => ({
-    concerts: ref<Array<ConcertApiModel>>([])
+    concerts: ref<Array<ConcertApiModel>>([]),
+    upcomingConcerts: ref<Array<ConcertApiModel>>([]),
+    concert: ref<ConcertDetailsApiModel>(new ConcertDetailsApiModel()),
+    fetchInProgress: ref(false)
   }),
 
   actions: {
+    /**
+     * Download all concerts from server
+     */
     async getConcerts() {
-      const feedbackStore = useFeedbackStore()
+      this.fetchInProgress = true
-      feedbackStore.fetchDataFromServerInProgress = true
 
-      await fetchConcerts()
+      fetchConcerts()
         .then(result => {
           this.concerts = result.data
-          feedbackStore.fetchDataFromServerInProgress = false
+          this.fetchInProgress = false
+        })
+    },
+
+    async getConcert(id: number) {
+      this.fetchInProgress = true
+
+      fetchConcert(id)
+        .then(result => {
+          this.concert = result.data
+          this.fetchInProgress = false
+        })
+    },
+
+    async getUpcomingConcerts() {
+      this.fetchInProgress = true
+
+      fetchUpcomingConcerts(4)
+        .then(result => {
+          this.upcomingConcerts = result.data
+          this.fetchInProgress = false
         })
     }
   }

software/src/data/stores/locationStore.ts

@@ -1,7 +1,6 @@
 import { defineStore } from "pinia";
 import { ref } from "vue";
-import { useFeedbackStore } from "./feedbackStore";
+import { fetchAllLocations, fetchTopLocations } from "../api/locationApi";
-import { fetchAllLocations } from "../api/locationApi";
 import { LocationApiModel } from "../models/locations/locationApiModel";
 import { CityModel } from "../models/locations/cityModel";
 import { fetchAllCities } from "../api/cityApi";
@@ -9,13 +8,17 @@ import { fetchAllCities } from "../api/cityApi";
 export const useLocationStore = defineStore("locationStore", {
   state: () => ({
     locations: ref<Array<LocationApiModel>>([]),
-    cities: ref<Array<CityModel>>([])
+    topLocations: ref<Array<LocationApiModel>>([]),
+    cities: ref<Array<CityModel>>([]),
+    fetchInProgress: ref(false)
   }),
 
   actions: {
+    /**
+     * Download all cities/locations from server
+     */
     async getLocations() {
-      const feedbackStore = useFeedbackStore()
+      this.fetchInProgress = true
-      feedbackStore.fetchDataFromServerInProgress = true
 
       await fetchAllLocations()
         .then(result => {
@@ -25,12 +28,29 @@ export const useLocationStore = defineStore("locationStore", {
       await fetchAllCities()
         .then(result => {
           this.cities = result.data
-          feedbackStore.fetchDataFromServerInProgress = false
+          this.fetchInProgress = false
         })
     },
 
+    /**
+     * Get all locations in a specific city
+     * 
+     * @param city City to filter for
+     * 
+     * @returns Array of cities which are in the target city
+     */
     getLocationsByCity(city: string): Array<LocationApiModel> {
-      return this.locations.filter(location => location.city.name == city)
+      return this.locations.filter((location: LocationApiModel) => {
+        return location.city.name == city
+      })
+    },
+
+
+    async getTopLocations() {
+      await fetchTopLocations(8)
+        .then(result => {
+          this.topLocations = result.data
+        })
     }
   },
 })

software/src/data/stores/searchStore.ts

@@ -2,14 +2,14 @@ import { defineStore } from "pinia";
 import { ref } from "vue";
 import { searchBand } from "../api/bandApi";
 import { searchLocation } from "../api/locationApi";
-import { searchEvent } from "../api/eventApi";
+import { searchConcert } from "../api/concertApi";
 
 export const useSearchStore = defineStore("searchStore", {
   state: () => ({
     searchTerm: ref(""),
     bands: ref(),
     locations: ref(),
-    events: ref(),
+    concerts: ref(),
     alreadySearched: ref(false),
     searchInProgress: ref(false)
   }),
@@ -32,9 +32,9 @@ export const useSearchStore = defineStore("searchStore", {
           this.locations = result.data
         })
 
-      await searchEvent(this.searchTerm)
+      await searchConcert(this.searchTerm)
         .then(result => {
-          this.events = result.data
+          this.concerts = result.data
         })
 
       this.searchInProgress = false

software/src/data/stores/shoppingStore.ts

@@ -1,12 +1,14 @@
 import { defineStore } from "pinia";
 import { ref } from "vue";
-import { fetchEvents } from "../api/eventApi";
 import { fetchAllCities } from "../api/cityApi";
 import { fetchAllGenres } from "../api/genreApi";
 import { useFeedbackStore } from "./feedbackStore";
 import { CityApiModel } from "../models/locations/cityApiModel";
 import { GenreApiModel } from "../models/acts/genreApiModel";
 
+/**
+ * @deprecated
+ */
 export const useShoppingStore = defineStore("shoppingStore", {
   state: () => ({
     cities: ref<Array<CityApiModel>>([]),
@@ -19,15 +21,6 @@ export const useShoppingStore = defineStore("shoppingStore", {
     async getEvents() {
       const feedbackStore = useFeedbackStore()
       feedbackStore.fetchDataFromServerInProgress = true
-
-      await fetchEvents(
-        this.cityFilterName != null && this.cityFilterName != "undefined" && !this.cityFilterName.startsWith("<") ? this.cityFilterName : "",
-        this.genreFilterName != null && this.genreFilterName != "undefined" && !this.genreFilterName.startsWith("<") ? this.genreFilterName : ""
-      )
-        .then(result => {
-          this.events = result.data
-          feedbackStore.fetchDataFromServerInProgress = false
-        })
     },
 
     async getCities() {

software/src/locales/de.json

@@ -175,5 +175,7 @@
   "noBandFound": "Keine Band gefunden",
   "noLocationsFound": "Keine Veranstaltungsorte gefunden",
   "allBands": "Alle Bands",
-  "allConcerts": "Alle Konzerte"
+  "allConcerts": "Alle Konzerte",
+  "more": "Mehr",
+  "upcomingConcerts": "Nächste Konzerte"
 }

software/src/locales/en.json

@@ -175,5 +175,7 @@
   "noBandFound": "No band found",
   "noLocationsFound": "No location found",
   "allBands": "All Bands",
-  "allConcerts": "All Concerts"
+  "allConcerts": "All Concerts",
+  "more": "More",
+  "upcomingConcerts": "Upcoming Concerts"
 }

software/src/pages/bands/bandDetailPage/concertSection.vue

@@ -1,48 +1,34 @@
 <script setup lang="ts">
-import { useRouter } from 'vue-router';
-import { useFeedbackStore } from '@/data/stores/feedbackStore';
 import concertListItem from '@/components/pageParts/concertListItem.vue';
-import { ConcertApiModel } from '@/data/models/acts/concertApiModel';
 import { BandApiModel } from '@/data/models/acts/bandApiModel';
-import { EventApiModel } from '@/data/models/acts/eventApiModel';
+import { ConcertApiModel } from '@/data/models/acts/concertApiModel';
+import CardViewHorizontal from '@/components/basics/cardViewHorizontal.vue';
+import { useConcertStore } from '@/data/stores/concertStore';
 
-const router = useRouter()
+const concertStore = useConcertStore()
-const feedbackStore = useFeedbackStore()
 
 defineProps({
   band: BandApiModel,
-  events: Array<EventApiModel>
+  concerts: Array<ConcertApiModel>
 })
 </script>
 
 <template>
-  <v-row v-if="feedbackStore.fetchDataFromServerInProgress" v-for="i in 3">
+  <v-row v-if="concertStore.fetchInProgress" v-for="i in 3">
     <v-col>
-      <!-- <concert-list-item
+      <card-view-horizontal :loading="true" />
-        :loading="true" /> -->
     </v-col>
   </v-row>
 
-  <div v-else v-for="event of events">
+  <v-row v-for="concert of concerts">
-    <v-row v-for="concert of event.concerts">
     <v-col>
       <concert-list-item
         :concert="concert"
+        :band="band"
+        :location="concert.location"
         :title="concert.location.city.name"
         :link="concert.inStock > 0"
-          :onClick="() => router.push('/concert/' + concert.id)"
+      />
-        >
-          <template #description>
-            <div>
-              {{ concert.location.name }}
-            </div>
-
-            <div>
-              {{ band.name }} - {{ band.events[0].name }}
-            </div>
-          </template>
-        </concert-list-item>
     </v-col>
   </v-row>
-  </div>
 </template>

software/src/pages/bands/bandDetailPage/gallerySection.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { BandModel } from '@/data/models/acts/bandModel';
-import { useFeedbackStore } from '@/data/stores/feedbackStore';
+import { useBandStore } from '@/data/stores/bandStore';
 
-const feedbackStore = useFeedbackStore()
+const bandStore = useBandStore()
 
 defineProps({
   band: {
@@ -17,7 +17,7 @@ defineProps({
     <v-col>
       <v-skeleton-loader
         type="image"
-        :loading="feedbackStore.fetchDataFromServerInProgress"
+        :loading="bandStore.fetchInProgress"
       >
         <v-carousel
           show-arrows

software/src/pages/bands/bandDetailPage/index.vue

@@ -6,35 +6,22 @@ import gallerySection from './gallerySection.vue';
 import concertSection from './concertSection.vue';
 import heroImage from '@/components/pageParts/heroImage.vue';
 import sectionDivider from '@/components/basics/sectionDivider.vue';
-import { useShoppingStore } from '@/data/stores/shoppingStore';
+import { useBandStore } from '@/data/stores/bandStore';
-import { ref } from 'vue';
-import { useFeedbackStore } from '@/data/stores/feedbackStore';
-import { getBand } from '@/data/api/bandApi';
-import { BandApiModel } from '@/data/models/acts/bandApiModel';
-import { genre } from 'backend/routes/genre.routes';
 
 const router = useRouter()
-const shoppingStore = useShoppingStore()
+const bandStore = useBandStore()
-const feedbackStore = useFeedbackStore()
-const band = ref<BandApiModel>(new BandApiModel())
 
-feedbackStore.fetchDataFromServerInProgress = true
+bandStore.getBand(String(router.currentRoute.value.params.name).replaceAll('-', ' '))
-
-getBand(String(router.currentRoute.value.params.bandName).replaceAll('-', ' '))
-  .then(result => {
-    band.value = result.data
-    feedbackStore.fetchDataFromServerInProgress = false
-  })
 </script>
 
 <template>
   <hero-image
-    :image="band.imageMembers"
+    :image="bandStore.band.imageMembers"
-    :logo="band.logo"
+    :logo="bandStore.band.logo"
-    :title="band.name"
+    :title="bandStore.band.name"
-    :chips="band.genres.map(genre => genre.name)"
+    :chips="bandStore.band.genres.map(genre => genre.name)"
-    :description="band.descriptionDe"
+    :description="bandStore.band.descriptionDe"
-    :loading="feedbackStore.fetchDataFromServerInProgress"
+    :loading="bandStore.fetchInProgress"
   />
 
   <v-container>
@@ -49,8 +36,8 @@ getBand(String(router.currentRoute.value.params.bandName).replaceAll('-', ' '))
         </v-row>
 
         <concert-section
-          :band="band"
+          :band="bandStore.band"
-          :events="band.events"
+          :concerts="bandStore.band.concerts"
         />
 
         <v-row>
@@ -59,7 +46,9 @@ getBand(String(router.currentRoute.value.params.bandName).replaceAll('-', ' '))
           </v-col>
         </v-row>
 
-        <band-member-section :band="band" />
+        <band-member-section
+          :band="bandStore.band"
+        />
         
 
         <v-row>
@@ -68,7 +57,10 @@ getBand(String(router.currentRoute.value.params.bandName).replaceAll('-', ' '))
           </v-col>
         </v-row>
 
-        <rating-section :ratings="band.ratings" />
+        <rating-section
+          :rating="bandStore.band.rating"
+          :ratings="bandStore.band.ratingValues"
+        />
 
 
         <v-row>
@@ -77,7 +69,9 @@ getBand(String(router.currentRoute.value.params.bandName).replaceAll('-', ' '))
           </v-col>
         </v-row>
 
-        <gallery-section :band="band" />
+        <gallery-section
+          :band="bandStore.band"
+        />
       </v-col>
 
       <v-spacer />

software/src/pages/bands/bandDetailPage/ratingSection.vue

@@ -1,9 +1,15 @@
 <script setup lang="ts">
-import { BandApiModel } from '@/data/models/acts/bandApiModel';
 import { RatingModel } from '@/data/models/acts/ratingModel';
 
 defineProps({
+  /**
+   * Overall rating of the band
+   */
   rating: Number,
+
+  /**
+   * Array of rating steps from 1 to 5
+   */
   ratings: {
     type: Array<RatingModel>,
     required: true

software/src/pages/bands/bandsPage/index.vue

@@ -1,6 +1,49 @@
 <script setup lang="ts">
+import { useBandStore } from '@/data/stores/bandStore';
+import cardViewHorizontal from '@/components/basics/cardViewHorizontal.vue';
+import bandListItem from '@/components/pageParts/bandListItem.vue';
+
+const bandStore = useBandStore()
+
+bandStore.getBands()
 </script>
 
 <template>
-  Bands
+  <v-container>
+    <v-row>
+      <v-spacer />
+
+      <v-col cols="10">
+        <v-row>
+          <v-col>
+            Filterbar
+          </v-col>
+        </v-row>
+
+        <v-row
+          v-if="bandStore.fetchInProgress"
+          v-for="i in 3"
+        >
+          <v-col>
+            <card-view-horizontal :loading="true" />
+          </v-col>
+        </v-row>
+
+        <v-row
+          v-else-if="bandStore.bands.length > 0"
+          v-for="band in bandStore.bands"
+        >
+          <v-col>
+            <band-list-item
+              :band="band"
+              :concerts="band.concerts"
+              :genres="band.genres"
+            />
+          </v-col>
+        </v-row>
+      </v-col>
+
+      <v-spacer />
+    </v-row>
+  </v-container>
 </template>

software/src/pages/concerts/concertBookingPage/index.vue

@@ -1,30 +1,17 @@
 <script setup lang="ts">
 import seatPlanMap from '@/components/seatPlanMap/seatPlanMap.vue';
-import { ref } from 'vue';
-import { SeatGroupModel } from '@/data/models/locations/seatGroupModel';
-import { getConcert } from '@/data/api/concertApi';
-import { useFeedbackStore } from '@/data/stores/feedbackStore';
 import { useRouter } from 'vue-router';
 import sectionDivider from '@/components/basics/sectionDivider.vue';
 import { useBasketStore } from '@/data/stores/basketStore';
 import concertListItem from '@/components/pageParts/concertListItem.vue';
 import outlinedButton from '@/components/basics/outlinedButton.vue';
-import { ConcertApiModel } from '@/data/models/acts/concertApiModel';
+import { useConcertStore } from '@/data/stores/concertStore';
 
 const router = useRouter()
-const seatGroups = ref<Array<SeatGroupModel>>()
-const concertModel = ref<ConcertApiModel>(new ConcertApiModel())
-const feedbackStore = useFeedbackStore()
 const basketStore = useBasketStore()
+const concertStore = useConcertStore()
 
-feedbackStore.fetchDataFromServerInProgress = true
+concertStore.getConcert(Number(router.currentRoute.value.params.id))
-
-getConcert(Number(router.currentRoute.value.params.id))
-  .then(result => {
-    seatGroups.value = result.data.location.seatGroups
-    concertModel.value = result.data
-    feedbackStore.fetchDataFromServerInProgress = false
-  })
 </script>
 
 <template>
@@ -42,14 +29,16 @@ getConcert(Number(router.currentRoute.value.params.id))
         <v-row>
           <v-col>
             <concert-list-item
-              :concert="concertModel"
+              :concert="concertStore.concert"
-              :loading="feedbackStore.fetchDataFromServerInProgress"
+              :band="concertStore.concert.band"
+              :location="concertStore.concert.location"
+              :loading="concertStore.fetchInProgress"
               :link="false"
-              :title="concertModel.location.city.name"
+              :title="concertStore.concert.location.city.name"
               :show-button="false"
             >
               <template #description>
-                <p>{{ concertModel.location.name }}</p>
+                <p>{{ concertStore.concert.location.name }}</p>
                 <!-- todo <p>{{ concertModel.event.band.name }} - {{ concertModel.event.name }}</p> -->
               </template>
             </concert-list-item>
@@ -62,7 +51,7 @@ getConcert(Number(router.currentRoute.value.params.id))
         </v-row>
 
         <v-row >
-          <v-col class="text-center" v-if="feedbackStore.fetchDataFromServerInProgress">
+          <v-col class="text-center" v-if="concertStore.fetchInProgress">
             <v-progress-circular
               size="x-large"
               width="10"
@@ -77,9 +66,9 @@ getConcert(Number(router.currentRoute.value.params.id))
 
           <v-col v-else>
             <seat-plan-map
-              :concert="concertModel"
+              :concert="concertStore.concert"
-              :seat-groups="seatGroups"
+              :seat-groups="concertStore.concert.location.seatGroups"
-              :location="concertModel.location"
+              :location="concertStore.concert.location"
             />
           </v-col>
         </v-row>
@@ -102,15 +91,15 @@ getConcert(Number(router.currentRoute.value.params.id))
         </v-row>
 
         <v-row class="pb-5">
-          <!-- <outlined-button todo
+          <outlined-button todo
             prepend-icon="mdi-basket-plus"
-            @click="basketStore.moveSeatSelectionsToBasket(concertModel.event, concertModel.event.band); 
+            @click="basketStore.moveSeatSelectionsToBasket(concertStore.concert, concertStore.concert.band); 
               router.push('/basket')"
             :disabled="basketStore.selectedSeats.length == 0"
             block
           >
             {{ $t('addToBasket') }}
-          </outlined-button> -->
+          </outlined-button>
         </v-row>
       </v-col>
 

software/src/pages/concerts/concertsPage/index.vue

@@ -1,12 +1,10 @@
 <script setup lang="ts">
 import { useConcertStore } from '@/data/stores/concertStore';
 import concertListItem from '@/components/pageParts/concertListItem.vue';
-import { useFeedbackStore } from '@/data/stores/feedbackStore';
 import cardViewHorizontal from '@/components/basics/cardViewHorizontal.vue';
 import sectionDivider from '@/components/basics/sectionDivider.vue';
 
 const concertStore = useConcertStore()
-const feedbackStore = useFeedbackStore()
 
 concertStore.getConcerts()
 </script>
@@ -25,7 +23,7 @@ concertStore.getConcerts()
         </v-row>
 
         <v-row
-          v-if="feedbackStore.fetchDataFromServerInProgress"
+          v-if="concertStore.fetchInProgress"
           v-for="i in 3"
         >
           <v-col>

software/src/pages/events/eventsPage/filterBar.vue

@@ -1,92 +0,0 @@
-<script setup lang="ts">
-import cardView from '@/components/basics/cardView.vue';
-import outlinedButton from '@/components/basics/outlinedButton.vue';
-import { GenreModel } from '@/data/models/acts/genreModel';
-import { CityModel } from '@/data/models/locations/cityModel';
-import { useShoppingStore } from '@/data/stores/shoppingStore';
-import { useRoute, useRouter } from 'vue-router';
-
-const shoppingStore = useShoppingStore()
-const router = useRouter()
-
-shoppingStore.getCities()
-shoppingStore.getGenres()
-
-function itemPropsCity(city: CityModel) {
-  return {
-    title: city.name
-  }
-}
-
-function itemPropsGenre(genre: GenreModel) {
-  return {
-    title: genre.name
-  }
-}
-
-function filter() {
-  let queries = {}
-
-  if (shoppingStore.cityFilterName != null && shoppingStore.cityFilterName != "undefined") {
-    queries["city"] = shoppingStore.cityFilterName
-  }
-
-  if (shoppingStore.genreFilterName != null && shoppingStore.genreFilterName != "undefined") {
-    queries["genre"] = shoppingStore.genreFilterName
-  }
-
-  router.push({ path: '/events', query: queries})
-
-  shoppingStore.getEvents()
-}
-</script>
-
-<template>
-  <card-view
-    variant="tonal"
-    :title="$t('filtering')"
-    icon="mdi-cog"
-  >
-    <v-row class="d-flex justify-center" >
-      <v-col cols="3">
-        <v-select
-          variant="outlined"
-          :items="shoppingStore.cities"
-          :item-props="itemPropsCity"
-          v-model="shoppingStore.cityFilterName"
-          :label="$t('city')"
-          class="mb-n5"
-          :clearable="shoppingStore.cityFilterName != ''"
-          base-color="secondary"
-          color="secondary"
-          item-value="name"
-        />
-      </v-col>
-
-      <v-col cols="4">
-        <v-select
-          variant="outlined"
-          :items="shoppingStore.genres"
-          :item-props="itemPropsGenre"
-          v-model="shoppingStore.genreFilterName"
-          label="Genre"
-          :clearable="shoppingStore.genreFilterName != ''"
-          class="mb-n5"
-          base-color="secondary"
-          color="secondary"
-          item-value="name"
-        />
-      </v-col>
-
-      <v-col cols="2">
-        <outlined-button
-          height="100%"
-          append-icon="mdi-chevron-right"
-          @click="filter"
-        >
-          {{ $t('filtering') }}
-        </outlined-button>
-      </v-col>
-    </v-row>
-  </card-view>
-</template>

software/src/pages/events/eventsPage/index.vue

@@ -1,68 +0,0 @@
-<script setup lang="ts">
-import filterBar from './filterBar.vue';
-import { useRoute } from 'vue-router';
-import { useShoppingStore } from '@/data/stores/shoppingStore';
-import { useFeedbackStore } from '@/data/stores/feedbackStore';
-
-const route = useRoute()
-const shoppingStore = useShoppingStore()
-const feedbackStore = useFeedbackStore()
-
-// Load query attributes
-shoppingStore.cityFilterName = String(route.query.city)
-shoppingStore.genreFilterName = String(route.query.genre)
-
-shoppingStore.getEvents()
-</script>
-
-<template>
-  <v-container>
-    <v-row>
-      <v-spacer />
-
-      <v-col cols="10">
-        <v-row>
-          <v-col>
-            <filter-bar />
-          </v-col>
-        </v-row>
-
-        <v-row
-          v-if="feedbackStore.fetchDataFromServerInProgress"
-          v-for="i in 3"
-        >
-          <v-col>
-            Loading...
-            <!-- todo <event-list-item
-              :loading="true"
-            /> -->
-          </v-col>
-        </v-row>
-
-        <v-row
-          v-else-if="shoppingStore.events.length > 0"
-          v-for="event of shoppingStore.events"
-        >
-          <v-col>
-            <event-list-item
-              :event="event"
-              :band="event.band"
-              :concerts="event.concerts"
-            />
-          </v-col>
-        </v-row>
-
-        <v-row v-else>
-          <v-col>
-            <v-empty-state 
-              :title="$t('noEventsFound')"
-              icon="mdi-magnify"
-            />
-          </v-col>
-        </v-row>
-      </v-col>
-
-      <v-spacer />
-    </v-row>
-  </v-container>
-</template>

software/src/pages/homePage/highlightCarousel.vue

@@ -10,7 +10,7 @@ shoppingStore.getEvents()
 </script>
 
 <template>
-  <v-carousel
+  <!-- <v-carousel
     hide-delimiters
     hide-delimiter-background
     height="700"
@@ -30,10 +30,10 @@ shoppingStore.getEvents()
         @click="props.onClick"
         icon="mdi-chevron-right"
       />
-    </template>
+    </template> -->
 
-    <v-carousel-item
+    <!-- <v-carousel-item
-      v-for="event in shoppingStore.events"
+      v-for="event in shoppingStore.concerts"
       :src="'http://localhost:3000/static/' + event.band.imageMembers" 
       cover
     >
@@ -60,7 +60,7 @@ shoppingStore.getEvents()
         </v-card-text>
       </v-card>
     </v-carousel-item>
-  </v-carousel>
+  </v-carousel> -->
 </template>
 
 <style scoped>

software/src/pages/homePage/index.vue

@@ -5,27 +5,17 @@ import cardWithTopImage from '@/components/basics/cardViewTopImage.vue';
 import { lowestTicketPrice } from '@/scripts/concertScripts';
 import OutlinedButton from '@/components/basics/outlinedButton.vue';
 import { useRouter } from 'vue-router';
-import { useFeedbackStore } from '@/data/stores/feedbackStore';
+import { useConcertStore } from '@/data/stores/concertStore';
-import { ref } from 'vue';
+import { useLocationStore } from '@/data/stores/locationStore';
-import { getTopLocations } from '@/data/api/locationApi';
+import { useBandStore } from '@/data/stores/bandStore';
-import { LocationApiModel } from '@/data/models/locations/locationApiModel';
 
 const router = useRouter()
-const feedbackStore = useFeedbackStore()
+const concertStore = useConcertStore()
-const topLocations = ref<Array<LocationApiModel>>(Array.from({length: 8}, () => new LocationApiModel()))
+const locationStore = useLocationStore()
+const bandStore = useBandStore()
 
-feedbackStore.fetchDataFromServerInProgress = true
+concertStore.getUpcomingConcerts()
-
+locationStore.getTopLocations()
-// todo getTopEvents(4)
-//   .then(events => {
-//     topEvents.value = events.data
-
-//     getTopLocations(8)
-//       .then(locations => {
-//         topLocations.value = locations.data
-//         feedbackStore.fetchDataFromServerInProgress = false
-//       })
-//   })
 </script>
 
 <template>
@@ -38,32 +28,32 @@ feedbackStore.fetchDataFromServerInProgress = true
       <v-col cols="10">
         <v-row>
           <v-col>
-            <section-divider :title="$t('topEvents')" />
+            <section-divider :title="$t('upcomingConcerts')" />
           </v-col>
         </v-row>
 
-        <!-- <v-row> todo
+        <v-row>
-          <v-col v-for="i in 4" cols="3">
+          <v-col v-for="concert in concertStore.upcomingConcerts" cols="3">
             <card-with-top-image
-              :image="topEvents[i - 1].image"
+              :image="concert.image"
-              :title="topEvents[i - 1].band.name"
+              :title="concert.band.name"
               smaller-title
-              @click="router.push('/bands/' + topEvents[i - 1].band.name.replaceAll(' ', '-').toLowerCase())"
+              @click="router.push('/bands/details/' + concert.band.name.replaceAll(' ', '-').toLowerCase())"
-              :loading="feedbackStore.fetchDataFromServerInProgress"
+              :loading="concertStore.fetchInProgress"
             >
-              ab {{ lowestTicketPrice(topEvents[i - 1].concerts) }} €
+              <!-- ab  € todo -->
             </card-with-top-image>
           </v-col>
-        </v-row> -->
+        </v-row>
 
         <v-row>
           <v-col>
             <outlined-button
               append-icon="mdi-chevron-right"
-              @click="router.push('/events')"
+              @click="router.push('/concerts')"
               block
             >
-              {{ $t('allEvents') }}
+              {{ $t('allConcerts') }}
             </outlined-button>
           </v-col>
         </v-row>
@@ -75,15 +65,15 @@ feedbackStore.fetchDataFromServerInProgress = true
         </v-row>
 
         <v-row>
-          <v-col v-for="i in 8" cols="3">
+          <v-col v-for="location in locationStore.topLocations" cols="3">
             <card-with-top-image
-              :image="topLocations[i - 1].imageOutdoor"
+              :image="location.imageOutdoor"
-              :title="topLocations[i - 1].name"
+              :title="location.name"
               smaller-title
-              @click="router.push('/locations/' + topLocations[i - 1].name.replaceAll(' ', '-').toLowerCase())"
+              @click="router.push('/locations/details/' + location.name.replaceAll(' ', '-').toLowerCase())"
-              :loading="feedbackStore.fetchDataFromServerInProgress"
+              :loading="locationStore.fetchInProgress"
             >
-              {{ topLocations[i - 1].city.name }}, {{ topLocations[i - 1].city.country }}
+              {{ location.city.name }}, {{ location.city.country }}
             </card-with-top-image>
           </v-col>
         </v-row>

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

@@ -8,6 +8,7 @@ import { useFeedbackStore } from '@/data/stores/feedbackStore';
 import heroImage from '@/components/pageParts/heroImage.vue';
 import concertListItem from '@/components/pageParts/concertListItem.vue';
 import { LocationDetailsApiModel } from '@/data/models/locations/locationDetailsApiModel';
+import cardViewHorizontal from '@/components/basics/cardViewHorizontal.vue';
 
 const router = useRouter()
 const feedbackStore = useFeedbackStore()
@@ -49,8 +50,7 @@ getLocation(String(router.currentRoute.value.params.name))
 
         <v-row v-if="feedbackStore.fetchDataFromServerInProgress" v-for="i in 3">
           <v-col class="text-center">
-            Loading...
+            <card-view-horizontal :loading="true" />
-            <!-- todo <concert-list-item :loading="feedbackStore.fetchDataFromServerInProgress" /> -->
           </v-col>
         </v-row>
 
@@ -61,8 +61,9 @@ getLocation(String(router.currentRoute.value.params.name))
           <v-col>
             <concert-list-item
               :concert="concert"
+              :band="concert.band"
+              :location="location"
               :title="concert.name"
-              :onClick="() => router.push('/bands/' + concert.band.name.replaceAll(' ', '-').toLowerCase())"
             >
               <template #description>
                 {{ concert.band.name }}

software/src/router/routes.ts

@@ -34,7 +34,7 @@ const routes = [
 
   // Concerts
   { path: '/concerts', component: ConcertsPage },
-  { path: '/concert/booking/:id', component: ConcertBookingPage },
+  { path: '/concerts/booking/:id', component: ConcertBookingPage },
 
   // Locations
   { path: '/locations', component: LocationsPage },