From a6ca7eeddec828c8122a2c941c910c2da1da16e8 Mon Sep 17 00:00:00 2001
From: Tobias Zoghaib <tobias.zoghaib@stud.uni-hannover.de>
Date: Sun, 29 Sep 2024 14:28:29 +0200
Subject: [PATCH] Filterable tours

---
 software/backend/models/acts/tour.model.ts    |  2 +-
 software/src/App.vue                          | 18 +++-
 .../navigation/navigationPrependItems.vue     |  2 +-
 .../src/data/models/{ => acts}/bandModel.ts   | 11 +--
 .../src/data/models/{ => acts}/cityModel.ts   |  0
 .../data/models/{ => acts}/concertModel.ts    |  0
 .../src/data/models/{ => acts}/genreModel.ts  |  5 --
 .../data/models/{ => acts}/locationModel.ts   |  1 -
 .../src/data/models/{ => acts}/ratingModel.ts |  0
 .../src/data/models/{ => acts}/tourModel.ts   |  2 +-
 software/src/data/models/memberModel.ts       |  7 --
 .../models/{ => ordering}/basketItemModel.ts  |  2 +-
 .../models/{ => ordering}/orderItemModel.ts   |  2 +-
 .../data/models/{ => ordering}/orderModel.ts  |  4 +-
 .../data/models/{ => user}/accountModel.ts    |  0
 .../src/data/models/{ => user}/accountRole.ts |  0
 .../data/models/{ => user}/addressModel.ts    |  0
 .../data/models/{ => user}/paymentModel.ts    |  0
 software/src/data/stores/accountStore.ts      |  8 +-
 software/src/data/stores/basketStore.ts       |  8 +-
 software/src/data/stores/concertStore.ts      | 77 ++++++++++++++--
 software/src/locales/de.json                  | 13 +--
 software/src/locales/en.json                  | 14 +--
 .../account/accountDataPage/addressesCard.vue |  2 +-
 .../account/accountDataPage/paymentsCard.vue  |  2 +-
 .../pages/account/loginPage/registerForm.vue  |  2 +-
 .../pages/account/ordersPage/ordersCard.vue   |  2 +-
 .../index.vue                                 |  2 +-
 .../shows/ticketsPage/filterNavDrawer.vue     |  2 -
 .../src/pages/shows/ticketsPage/index.vue     |  6 +-
 .../ticketsPage/productDetailsDialog.vue      | 44 +++++-----
 .../src/pages/shows/ticketsPage/tourCard.vue  | 19 ++--
 .../src/pages/shows/toursPage/filterBar.vue   | 87 +++++++++++++++++++
 .../{concertsPage => toursPage}/index.vue     | 23 ++++-
 software/src/router/show.routes.ts            |  4 +-
 software/src/scripts/concertScripts.ts        |  8 +-
 36 files changed, 265 insertions(+), 114 deletions(-)
 rename software/src/data/models/{ => acts}/bandModel.ts (65%)
 rename software/src/data/models/{ => acts}/cityModel.ts (100%)
 rename software/src/data/models/{ => acts}/concertModel.ts (100%)
 rename software/src/data/models/{ => acts}/genreModel.ts (59%)
 rename software/src/data/models/{ => acts}/locationModel.ts (90%)
 rename software/src/data/models/{ => acts}/ratingModel.ts (100%)
 rename software/src/data/models/{ => acts}/tourModel.ts (85%)
 delete mode 100644 software/src/data/models/memberModel.ts
 rename software/src/data/models/{ => ordering}/basketItemModel.ts (82%)
 rename software/src/data/models/{ => ordering}/orderItemModel.ts (70%)
 rename software/src/data/models/{ => ordering}/orderModel.ts (69%)
 rename software/src/data/models/{ => user}/accountModel.ts (100%)
 rename software/src/data/models/{ => user}/accountRole.ts (100%)
 rename software/src/data/models/{ => user}/addressModel.ts (100%)
 rename software/src/data/models/{ => user}/paymentModel.ts (100%)
 rename software/src/pages/shows/{tourDetailPage => bandDetailPage}/index.vue (80%)
 create mode 100644 software/src/pages/shows/toursPage/filterBar.vue
 rename software/src/pages/shows/{concertsPage => toursPage}/index.vue (63%)

diff --git a/software/backend/models/acts/tour.model.ts b/software/backend/models/acts/tour.model.ts
index c59d90c..e1eec93 100644
--- a/software/backend/models/acts/tour.model.ts
+++ b/software/backend/models/acts/tour.model.ts
@@ -23,5 +23,5 @@ export class Tour extends Model {
   band: Band
 
   @HasMany(() => Concert)
-  shows: Concert[]
+  concerts: Concert[]
 }
\ No newline at end of file
diff --git a/software/src/App.vue b/software/src/App.vue
index 3577c3d..6f26b62 100644
--- a/software/src/App.vue
+++ b/software/src/App.vue
@@ -7,6 +7,7 @@ import navigationPrependItems from './components/navigation/navigationPrependIte
 import { usePreferencesStore } from './data/stores/preferencesStore';
 import { useFeedbackStore } from './data/stores/feedbackStore';
 import { useConcertStore } from './data/stores/concertStore';
+import { LocationModel } from './data/models/acts/locationModel';
 
 const preferencesStore = usePreferencesStore()
 const concertStore = useConcertStore()
@@ -22,6 +23,19 @@ concertStore.fetchAllTours()
 watch(() => preferencesStore.language, () => {
   i18n.global.locale = preferencesStore.language
 }, { immediate: true })
+
+watch(() => concertStore.cityFilter, () => {
+  concertStore.locationFilter = new LocationModel()
+  concertStore.filterTours()
+})
+
+watch(() => concertStore.locationFilter, () => {
+  concertStore.filterTours()
+})
+
+watch(() => concertStore.genreFilter, () => {
+  concertStore.filterTours()
+})
 </script>
 
 <template>
@@ -64,8 +78,8 @@ watch(() => preferencesStore.language, () => {
       </v-snackbar>
 
       <!-- Here changes the router the content -->
-      <v-container max-width="1400" class="pt-0 pb-5">
-        <v-sheet color="sheet">
+      <v-container max-width="1400" class="py-0" height="100%">
+        <v-sheet color="sheet" height="100%">
           <router-view></router-view>
         </v-sheet>
       </v-container>
diff --git a/software/src/components/navigation/navigationPrependItems.vue b/software/src/components/navigation/navigationPrependItems.vue
index 5b40a60..40251e8 100644
--- a/software/src/components/navigation/navigationPrependItems.vue
+++ b/software/src/components/navigation/navigationPrependItems.vue
@@ -10,7 +10,7 @@
   <v-divider vertical />
 
   <v-btn
-    to="/shows/concerts"
+    to="/shows/tours"
     prepend-icon="mdi-ticket"
     height="100%"
     :rounded="false"
diff --git a/software/src/data/models/bandModel.ts b/software/src/data/models/acts/bandModel.ts
similarity index 65%
rename from software/src/data/models/bandModel.ts
rename to software/src/data/models/acts/bandModel.ts
index 959e147..2d3926c 100644
--- a/software/src/data/models/bandModel.ts
+++ b/software/src/data/models/acts/bandModel.ts
@@ -1,5 +1,3 @@
-import { GenreModel } from "./genreModel"
-import { MemberModel } from "./memberModel"
 import { RatingModel } from "./ratingModel"
 
 export class BandModel {
@@ -11,8 +9,11 @@ export class BandModel {
   images: Array<string>
   logo: string
   ratings: Array<RatingModel>
-  members: Array<MemberModel>
-  genres: {
+  members: Array<{
+    name: string,
+    image: string
+  }>
+  genres: Array<{
     name: string
-  }
+  }>
 }
\ No newline at end of file
diff --git a/software/src/data/models/cityModel.ts b/software/src/data/models/acts/cityModel.ts
similarity index 100%
rename from software/src/data/models/cityModel.ts
rename to software/src/data/models/acts/cityModel.ts
diff --git a/software/src/data/models/concertModel.ts b/software/src/data/models/acts/concertModel.ts
similarity index 100%
rename from software/src/data/models/concertModel.ts
rename to software/src/data/models/acts/concertModel.ts
diff --git a/software/src/data/models/genreModel.ts b/software/src/data/models/acts/genreModel.ts
similarity index 59%
rename from software/src/data/models/genreModel.ts
rename to software/src/data/models/acts/genreModel.ts
index 4447307..134c0f3 100644
--- a/software/src/data/models/genreModel.ts
+++ b/software/src/data/models/acts/genreModel.ts
@@ -1,4 +1,3 @@
-import { MemberModel } from "./memberModel"
 import { RatingModel } from "./ratingModel"
 
 export class GenreModel {
@@ -7,13 +6,9 @@ export class GenreModel {
   bands: Array<
     {
       name: string
-      foundingYear: number
-      descriptionEn: string
-      descriptionDe: string
       images: Array<string>
       logo: string
       ratings: Array<RatingModel>
-      members: Array<MemberModel>
     }
   >
 }
\ No newline at end of file
diff --git a/software/src/data/models/locationModel.ts b/software/src/data/models/acts/locationModel.ts
similarity index 90%
rename from software/src/data/models/locationModel.ts
rename to software/src/data/models/acts/locationModel.ts
index 00ab26c..ad6380a 100644
--- a/software/src/data/models/locationModel.ts
+++ b/software/src/data/models/acts/locationModel.ts
@@ -4,7 +4,6 @@ export class LocationModel {
   address: string
   image: string
   city: {
-    id: number
     name: string
     country: string
   }
diff --git a/software/src/data/models/ratingModel.ts b/software/src/data/models/acts/ratingModel.ts
similarity index 100%
rename from software/src/data/models/ratingModel.ts
rename to software/src/data/models/acts/ratingModel.ts
diff --git a/software/src/data/models/tourModel.ts b/software/src/data/models/acts/tourModel.ts
similarity index 85%
rename from software/src/data/models/tourModel.ts
rename to software/src/data/models/acts/tourModel.ts
index 1b8f2f5..5a1102c 100644
--- a/software/src/data/models/tourModel.ts
+++ b/software/src/data/models/acts/tourModel.ts
@@ -7,5 +7,5 @@ export class TourModel {
   offered: boolean
   band: BandModel
   image: string
-  shows: Array<ConcertModel>
+  concerts: Array<ConcertModel>
 }
\ No newline at end of file
diff --git a/software/src/data/models/memberModel.ts b/software/src/data/models/memberModel.ts
deleted file mode 100644
index b9f111f..0000000
--- a/software/src/data/models/memberModel.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { BandModel } from "./bandModel"
-
-export class MemberModel {
-  id: Number
-  name: string
-  image: string
-}
\ No newline at end of file
diff --git a/software/src/data/models/basketItemModel.ts b/software/src/data/models/ordering/basketItemModel.ts
similarity index 82%
rename from software/src/data/models/basketItemModel.ts
rename to software/src/data/models/ordering/basketItemModel.ts
index 3fc1f29..8195339 100644
--- a/software/src/data/models/basketItemModel.ts
+++ b/software/src/data/models/ordering/basketItemModel.ts
@@ -1,4 +1,4 @@
-import { ConcertModel } from "./concertModel"
+import { ConcertModel } from "../acts/concertModel"
 
 export class BasketItemModel {
   id: number = -1
diff --git a/software/src/data/models/orderItemModel.ts b/software/src/data/models/ordering/orderItemModel.ts
similarity index 70%
rename from software/src/data/models/orderItemModel.ts
rename to software/src/data/models/ordering/orderItemModel.ts
index 93e1183..3033b3d 100644
--- a/software/src/data/models/orderItemModel.ts
+++ b/software/src/data/models/ordering/orderItemModel.ts
@@ -1,4 +1,4 @@
-import { ConcertModel } from "./concertModel"
+import { ConcertModel } from "../acts/concertModel"
 
 export class OrderItemModel {
   orderId: number = -1
diff --git a/software/src/data/models/orderModel.ts b/software/src/data/models/ordering/orderModel.ts
similarity index 69%
rename from software/src/data/models/orderModel.ts
rename to software/src/data/models/ordering/orderModel.ts
index 4fc0505..6d1bd0e 100644
--- a/software/src/data/models/orderModel.ts
+++ b/software/src/data/models/ordering/orderModel.ts
@@ -1,6 +1,6 @@
-import { AddressModel } from "./addressModel"
+import { AddressModel } from "../user/addressModel"
 import { OrderItemModel } from "./orderItemModel"
-import { PaymentModel } from "./paymentModel"
+import { PaymentModel } from "../user/paymentModel"
 
 export class OrderModel {
   id: number
diff --git a/software/src/data/models/accountModel.ts b/software/src/data/models/user/accountModel.ts
similarity index 100%
rename from software/src/data/models/accountModel.ts
rename to software/src/data/models/user/accountModel.ts
diff --git a/software/src/data/models/accountRole.ts b/software/src/data/models/user/accountRole.ts
similarity index 100%
rename from software/src/data/models/accountRole.ts
rename to software/src/data/models/user/accountRole.ts
diff --git a/software/src/data/models/addressModel.ts b/software/src/data/models/user/addressModel.ts
similarity index 100%
rename from software/src/data/models/addressModel.ts
rename to software/src/data/models/user/addressModel.ts
diff --git a/software/src/data/models/paymentModel.ts b/software/src/data/models/user/paymentModel.ts
similarity index 100%
rename from software/src/data/models/paymentModel.ts
rename to software/src/data/models/user/paymentModel.ts
diff --git a/software/src/data/stores/accountStore.ts b/software/src/data/stores/accountStore.ts
index 4d13e58..dc3e93c 100644
--- a/software/src/data/stores/accountStore.ts
+++ b/software/src/data/stores/accountStore.ts
@@ -1,13 +1,13 @@
 import { useLocalStorage } from "@vueuse/core";
 import { defineStore } from "pinia";
-import { AccountModel } from "../models/accountModel";
-import { OrderModel } from "../models/orderModel";
+import { AccountModel } from "../models/user/accountModel";
+import { OrderModel } from "../models/ordering/orderModel";
 import { useFeedbackStore } from "./feedbackStore";
 import { loginAccount, registerAccount, updateAccount } from "../api/accountApi";
 import { getUserOrders } from "../api/orderApi";
 import { BannerStateEnum } from "../enums/bannerStateEnum";
-import { AddressModel } from "../models/addressModel";
-import { PaymentModel } from "../models/paymentModel";
+import { AddressModel } from "../models/user/addressModel";
+import { PaymentModel } from "../models/user/paymentModel";
 
 export const useAccountStore = defineStore("accountStore", {
   state: () => ({
diff --git a/software/src/data/stores/basketStore.ts b/software/src/data/stores/basketStore.ts
index db17e70..8f4b69c 100644
--- a/software/src/data/stores/basketStore.ts
+++ b/software/src/data/stores/basketStore.ts
@@ -1,13 +1,13 @@
 import { defineStore } from "pinia";
 import { useLocalStorage } from "@vueuse/core";
-import { BasketItemModel } from "../models/basketItemModel";
+import { BasketItemModel } from "../models/ordering/basketItemModel";
 import { useFeedbackStore } from "./feedbackStore";
 import { BannerStateEnum } from "../enums/bannerStateEnum";
 import { addOrder } from "../api/orderApi";
 import { useAccountStore } from "./accountStore";
-import { ConcertModel } from "../models/concertModel";
-import { AddressModel } from "../models/addressModel";
-import { PaymentModel } from "../models/paymentModel";
+import { ConcertModel } from "../models/acts/concertModel";
+import { AddressModel } from "../models/user/addressModel";
+import { PaymentModel } from "../models/user/paymentModel";
 
 export const useBasketStore = defineStore('basketStore', {
   state: () => ({
diff --git a/software/src/data/stores/concertStore.ts b/software/src/data/stores/concertStore.ts
index 58a282e..02f6da9 100644
--- a/software/src/data/stores/concertStore.ts
+++ b/software/src/data/stores/concertStore.ts
@@ -1,23 +1,28 @@
 import { useLocalStorage } from "@vueuse/core";
 import { defineStore } from "pinia";
-import { TourModel } from "../models/tourModel";
+import { TourModel } from "../models/acts/tourModel";
 import { getAllTours } from "../api/tourApi";
-import { GenreModel } from "../models/genreModel";
+import { GenreModel } from "../models/acts/genreModel";
 import { getAllBands } from "../api/bandApi";
-import { BandModel } from "../models/bandModel";
-import { LocationModel } from "../models/locationModel";
+import { BandModel } from "../models/acts/bandModel";
+import { LocationModel } from "../models/acts/locationModel";
 import { getAllLocations } from "../api/locationApi";
 import { getAllGenres } from "../api/genreApi";
-import { CityModel } from "../models/cityModel";
+import { CityModel } from "../models/acts/cityModel";
 import { getAllCities } from "../api/cityApi";
 
 export const useConcertStore = defineStore("concertStore", {
   state: () => ({
     tours: useLocalStorage<Array<TourModel>>("hackmycart/concertStore/tours", []),
+    filteredTours: useLocalStorage<Array<TourModel>>("hackmycart/concertStore/filteredTours", []),
     bands: useLocalStorage<Array<BandModel>>("hackmycart/concertStore/bands", []),
     locations: useLocalStorage<Array<LocationModel>>("hackmycart/concertStore/locations", []),
+    filteredLocations: useLocalStorage<Array<LocationModel>>("hackmycart/concertStore/filteredLocations", []),
     cities: useLocalStorage<Array<CityModel>>("hackmycart/concertStore/cities", []),
-    genres: useLocalStorage<Array<GenreModel>>("hackmycart/concertStore/genres", [])
+    genres: useLocalStorage<Array<GenreModel>>("hackmycart/concertStore/genres", []),
+    cityFilter: useLocalStorage<CityModel>("hackmycart/concertStore/cityFilter", new CityModel()),
+    locationFilter: useLocalStorage<LocationModel>("hackmycart/concertStore/locationFilter", new LocationModel),
+    genreFilter: useLocalStorage<GenreModel>("hackmycart/concertStore/genreFilter", new GenreModel())
   }),
   
   actions: {
@@ -27,8 +32,12 @@ export const useConcertStore = defineStore("concertStore", {
           this.tours = result.data
 
           this.tours.sort((a, b) => {
-            return new Date(a.shows[0].date) < new Date(b.shows[0].date) ? -1 : 1
+            return new Date(a.concerts[0].date) < new Date(b.concerts[0].date) ? -1 : 1
           })
+
+          this.filteredTours = this.tours
+
+          this.filterTours()
         })
 
       await getAllBands()
@@ -50,6 +59,60 @@ export const useConcertStore = defineStore("concertStore", {
         .then(result => {
           this.cities = result.data
         })
+    },
+
+    filterTours() {
+      this.filteredTours = []
+
+      // Filter tours by city, location and genre
+      for (let tour of this.tours) {
+        let rightGenre = false
+        let rightCity = false
+        let rightLocation = false
+        
+        // Genre filter
+        if (this.genreFilter == null || this.genreFilter.id == undefined) {
+          rightGenre = true
+        } else {
+          for (let genre of tour.band.genres) {
+            if (genre.name == this.genreFilter.name) {
+              rightGenre = true
+            }
+          }
+        }
+
+        // City filter
+        if (this.cityFilter == null || this.cityFilter.id == undefined) {
+          rightCity = true
+        } else {
+          for (let concert of tour.concerts) {
+            if (concert.location.city.name == this.cityFilter.name) {
+              rightCity = true
+            }
+          }
+
+          // Filter locations by city
+          this.filteredLocations = this.cities.find(city =>
+            city.id == this.cityFilter.id
+          ).locations
+        }
+
+
+        // Location filter
+        if (this.locationFilter == null || this.locationFilter.id == undefined) {
+          rightLocation = true
+        } else {
+          for (let concert of tour.concerts) {
+            if (concert.location.id == this.locationFilter.id) {
+              rightLocation = true
+            }
+          }
+        }
+
+        if (rightGenre && rightCity && rightLocation) {
+          this.filteredTours.push(tour)
+        }
+      }
     }
   }
 })
\ No newline at end of file
diff --git a/software/src/locales/de.json b/software/src/locales/de.json
index 255ffce..a2b261f 100644
--- a/software/src/locales/de.json
+++ b/software/src/locales/de.json
@@ -11,17 +11,9 @@
     "topBands": "Top Bands",
     "topLocations": "Top Veranstaltungsorte"
   },
-
-
-
-
-
-
-  
   "tours": {
     "concert": "Konzert | Konzerte"
   },
-
   "preferences": {
     "pageSetup": "Seiteneinstellungen",
     "selectedTheme": "Ausgewähltes Theme",
@@ -148,5 +140,8 @@
   "wrongIban": "Falsches IBAN Format, nur deutsche IBAN-Nummern erlaubt!",
   "save": "Speichern",
   "editProduct": "Produkt bearbeiten",
-  "brand": "Marke | Marken"
+  "brand": "Marke | Marken",
+  "concerts": {
+    "location": "Veranstaltungsort"
+  }
 }
diff --git a/software/src/locales/en.json b/software/src/locales/en.json
index 50c367f..8242d1f 100644
--- a/software/src/locales/en.json
+++ b/software/src/locales/en.json
@@ -11,18 +11,9 @@
     "topBands": "Top Bands",
     "topLocations": "Top Locations"
   },
-
-
-
-
-
-
-
   "tours": {
     "concert": "Concert | Concerts"
   },
-
-
   "preferences": {
     "pageSetup": "Page setup",
     "selectedTheme": "Selected theme",
@@ -149,5 +140,8 @@
   "wrongIban": "Wrong IBAN format, only German IBANs are allowed!",
   "save": "Save",
   "editProduct": "Edit product",
-  "brand": "Brand | Brands"
+  "brand": "Brand | Brands",
+  "concerts": {
+    "location": "Locations"
+  }
 }
diff --git a/software/src/pages/account/accountDataPage/addressesCard.vue b/software/src/pages/account/accountDataPage/addressesCard.vue
index d50f526..7f5d363 100644
--- a/software/src/pages/account/accountDataPage/addressesCard.vue
+++ b/software/src/pages/account/accountDataPage/addressesCard.vue
@@ -2,7 +2,7 @@
 import cardView from '@/components/cardView.vue';
 import { useAccountStore } from '@/data/stores/accountStore';
 import outlinedButton from '@/components/outlinedButton.vue';
-import { AddressModel } from '@/data/models/addressModel';
+import { AddressModel } from '@/data/models/user/addressModel';
 import { useFeedbackStore } from '@/data/stores/feedbackStore';
 import { getNumberStartRules, getPostalRules, getStringRules } from '@/scripts/validationRules';
 
diff --git a/software/src/pages/account/accountDataPage/paymentsCard.vue b/software/src/pages/account/accountDataPage/paymentsCard.vue
index 4bc383e..855ed03 100644
--- a/software/src/pages/account/accountDataPage/paymentsCard.vue
+++ b/software/src/pages/account/accountDataPage/paymentsCard.vue
@@ -2,7 +2,7 @@
 import cardView from '@/components/cardView.vue';
 import { useAccountStore } from '@/data/stores/accountStore';
 import outlinedButton from '@/components/outlinedButton.vue';
-import { PaymentModel } from '@/data/models/paymentModel';
+import { PaymentModel } from '@/data/models/user/paymentModel';
 import { getIbanRules, getStringRules } from '@/scripts/validationRules';
 
 const accountStore = useAccountStore()
diff --git a/software/src/pages/account/loginPage/registerForm.vue b/software/src/pages/account/loginPage/registerForm.vue
index edb63ca..d9a8cc4 100644
--- a/software/src/pages/account/loginPage/registerForm.vue
+++ b/software/src/pages/account/loginPage/registerForm.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { AccountModel } from '@/data/models/accountModel';
+import { AccountModel } from '@/data/models/user/accountModel';
 import { ref } from 'vue';
 import cardView from '@/components/cardView.vue';
 import outlinedButton from '@/components/outlinedButton.vue';
diff --git a/software/src/pages/account/ordersPage/ordersCard.vue b/software/src/pages/account/ordersPage/ordersCard.vue
index 2788f4d..358f30d 100644
--- a/software/src/pages/account/ordersPage/ordersCard.vue
+++ b/software/src/pages/account/ordersPage/ordersCard.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import cardView from '@/components/cardView.vue';
-import { OrderModel } from '@/data/models/orderModel';
+import { OrderModel } from '@/data/models/ordering/orderModel';
 import { useAccountStore } from '@/data/stores/accountStore';
 
 const accountStore = useAccountStore()
diff --git a/software/src/pages/shows/tourDetailPage/index.vue b/software/src/pages/shows/bandDetailPage/index.vue
similarity index 80%
rename from software/src/pages/shows/tourDetailPage/index.vue
rename to software/src/pages/shows/bandDetailPage/index.vue
index c053946..3daec83 100644
--- a/software/src/pages/shows/tourDetailPage/index.vue
+++ b/software/src/pages/shows/bandDetailPage/index.vue
@@ -2,5 +2,5 @@
 </script>
 
 <template>
-
+  Tour Detail
 </template>
\ No newline at end of file
diff --git a/software/src/pages/shows/ticketsPage/filterNavDrawer.vue b/software/src/pages/shows/ticketsPage/filterNavDrawer.vue
index 99cb766..59d57e3 100644
--- a/software/src/pages/shows/ticketsPage/filterNavDrawer.vue
+++ b/software/src/pages/shows/ticketsPage/filterNavDrawer.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import { SortOrder } from '@/data/enums/sortOrderEnum';
-import { useTourStore } from '@/data/stores/tourStore';
 
-const tourStore = useTourStore()
 const sortOrderItems = Object.values(SortOrder)
 </script>
 
diff --git a/software/src/pages/shows/ticketsPage/index.vue b/software/src/pages/shows/ticketsPage/index.vue
index d712d09..c8b2133 100644
--- a/software/src/pages/shows/ticketsPage/index.vue
+++ b/software/src/pages/shows/ticketsPage/index.vue
@@ -2,9 +2,7 @@
 import tourCard from "./tourCard.vue"
 import { ref, watch } from "vue";
 import filterNavDrawer from "./filterNavDrawer.vue";
-import { useTourStore } from "@/data/stores/tourStore";
 
-const tourStore = useTourStore()
 
 const showProductDetails = ref(false)
 // const dialogProduct = ref(new ProductModel())
@@ -20,7 +18,7 @@ const showProductDetails = ref(false)
 </script>
 
 <template>
-  <v-container max-width="1200">
+  <!-- <v-container max-width="1200">
     <v-row dense>
       <v-col
         v-if="tourStore.tours.length > 0"
@@ -39,7 +37,7 @@ const showProductDetails = ref(false)
         />
       </v-col>
     </v-row>
-  </v-container>
+  </v-container> -->
 
   <filter-nav-drawer />
 
diff --git a/software/src/pages/shows/ticketsPage/productDetailsDialog.vue b/software/src/pages/shows/ticketsPage/productDetailsDialog.vue
index baa820c..37df891 100644
--- a/software/src/pages/shows/ticketsPage/productDetailsDialog.vue
+++ b/software/src/pages/shows/ticketsPage/productDetailsDialog.vue
@@ -2,43 +2,40 @@
 import { VNumberInput } from 'vuetify/labs/VNumberInput'
 import { ModelRef, ref, watch } from 'vue';
 import { useBasketStore } from '@/data/stores/basketStore';
-import { calcPrice } from '@/scripts/productScripts';
 import ActionDialog from '@/components/actionDialog.vue'
-import { ProductModel } from '@/data/models/productModel';
 import outlinedButton from '@/components/outlinedButton.vue';
 
-const props = defineProps({
-  product: {
-    type: ProductModel,
-    default: new ProductModel()
-  }
-})
+// const props = defineProps({
+//   product: {
+//     type: ProductModel,
+//     default: new ProductModel()
+//   }
+// })
 
-const showDialog: ModelRef<boolean> = defineModel()
-const nrOfArticles = ref(1)
-const basketStore = useBasketStore()
-const selectedImage = ref("")
+// const showDialog: ModelRef<boolean> = defineModel()
+// const nrOfArticles = ref(1)
+// const basketStore = useBasketStore()
+// const selectedImage = ref("")
 
-function addProductToBasket() {
-  basketStore.addItemToBasket(props.product, nrOfArticles.value)
-  nrOfArticles.value = 1
-  showDialog.value = false
-}
+// function addProductToBasket() {
+//   basketStore.addItemToBasket(props.product, nrOfArticles.value)
+//   nrOfArticles.value = 1
+//   showDialog.value = false
+// }
 
-watch(() => props.product.images, () => {
-  selectedImage.value = 'http://localhost:3000/static/' + props.product.images[0]
-})
+// watch(() => props.product.images, () => {
+//   selectedImage.value = 'http://localhost:3000/static/' + props.product.images[0]
+// })
 </script>
 
 <template>
-  <action-dialog
+  <!-- <action-dialog
     :title="product.brand.name + ': ' + product.name"
     :icon="product.category.icon"
     :subtitle="product.category.name"
     v-model="showDialog"
   >
     <v-row>
-      <!-- Image col -->
       <v-col>
         <v-row>
           <v-col class="py-0">
@@ -66,7 +63,6 @@ watch(() => props.product.images, () => {
       </v-col>
 
 
-      <!-- Product description col -->
       <v-col>
         <v-row>
           <v-col class="text-h6 pt-0">
@@ -157,5 +153,5 @@ watch(() => props.product.images, () => {
         {{ $t('addToBasket') }}
       </outlined-button>
     </template>
-  </action-dialog>
+  </action-dialog> -->
 </template>
\ No newline at end of file
diff --git a/software/src/pages/shows/ticketsPage/tourCard.vue b/software/src/pages/shows/ticketsPage/tourCard.vue
index 7643aec..c7c62a9 100644
--- a/software/src/pages/shows/ticketsPage/tourCard.vue
+++ b/software/src/pages/shows/ticketsPage/tourCard.vue
@@ -1,18 +1,17 @@
 <script setup lang="ts">
-import { TourModel } from '@/data/models/tourModel';
 import cardView from '@/components/cardView.vue';
 import OutlinedButton from '@/components/outlinedButton.vue';
 
-defineProps({
-  tour: {
-    required: true,
-    type: TourModel
-  }
-})
+// defineProps({
+//   tour: {
+//     required: true,
+//     type: TourModel
+//   }
+// })
 </script>
 
 <template>
-  <card-view
+  <!-- <card-view
     :title="tour.band.name"
     :subtitle="tour.name"
     :prepend-image="'http://127.0.0.1:3000/static/bands/' + tour.band.images[0]"
@@ -24,7 +23,7 @@ defineProps({
       <OutlinedButton>
         {{ tour.shows.length }} {{ $t('tours.concert', tour.shows.length) }}
       </OutlinedButton>
-    </template>
+    </template> -->
     
     <!-- <template> -->
           <!-- <div>
@@ -75,7 +74,7 @@ defineProps({
             </div>
           </div> -->
     <!-- </template> -->
-  </card-view>
+  <!-- </card-view> -->
 </template>
 
 <style scoped>
diff --git a/software/src/pages/shows/toursPage/filterBar.vue b/software/src/pages/shows/toursPage/filterBar.vue
new file mode 100644
index 0000000..ec07170
--- /dev/null
+++ b/software/src/pages/shows/toursPage/filterBar.vue
@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import cardView from '@/components/cardView.vue';
+import { useConcertStore } from '@/data/stores/concertStore';
+
+const concertStore = useConcertStore()
+</script>
+
+<template>
+  <card-view
+    variant="tonal"
+  >
+    <v-row>
+      <v-col cols="3">
+        <v-select
+          variant="outlined"
+          :items="concertStore.cities"
+          v-model="concertStore.cityFilter"
+          label="Stadt"
+          density="compact"
+          class="mb-n5"
+          :clearable="concertStore.cityFilter != null && concertStore.cityFilter.id != undefined"
+          base-color="secondary"
+          color="secondary"
+        >
+          <template #item="{ props, item }">
+            <v-list-item v-bind="props" :title="item.raw.name" />
+          </template>
+
+          <template #selection="{ item }">
+            <v-list-item :title="item.raw.name" />
+          </template>
+        </v-select>
+      </v-col>
+
+      <v-col cols="auto" class="d-flex justify-center align-center px-0">
+        <v-icon icon="mdi-chevron-right" />
+      </v-col>
+
+      <v-col cols="4">
+        <v-select
+          variant="outlined"
+          :items="concertStore.filteredLocations"
+          v-model="concertStore.locationFilter"
+          :label="$t('concerts.location')"
+          density="compact"
+          :clearable="concertStore.locationFilter != null && concertStore.locationFilter.id != undefined"
+          :disabled="concertStore.cityFilter == null || concertStore.cityFilter.id == undefined"
+          class="mb-n5"
+          base-color="secondary"
+          color="secondary"
+        >
+          <template #item="{ props, item }">
+            <v-list-item v-bind="props" :title="item.raw.name" />
+          </template>
+
+          <template #selection="{ item }">
+            <v-list-item :title="item.raw.name" />
+          </template>
+        </v-select>
+      </v-col>
+
+      <v-divider vertical />
+
+      <v-col cols="4">
+        <v-select
+          variant="outlined"
+          :items="concertStore.genres"
+          v-model="concertStore.genreFilter"
+          label="Genre"
+          density="compact"
+          :clearable="concertStore.genreFilter != null && concertStore.genreFilter.id != undefined"
+          class="mb-n5"
+          base-color="secondary"
+          color="secondary"
+        >
+          <template #item="{ props, item }">
+            <v-list-item v-bind="props" :title="item.raw.name" />
+          </template>
+
+          <template #selection="{ item }">
+            <v-list-item :title="item.raw.name" />
+          </template>
+        </v-select>
+      </v-col>
+    </v-row>
+  </card-view>
+</template>
\ No newline at end of file
diff --git a/software/src/pages/shows/concertsPage/index.vue b/software/src/pages/shows/toursPage/index.vue
similarity index 63%
rename from software/src/pages/shows/concertsPage/index.vue
rename to software/src/pages/shows/toursPage/index.vue
index d67cba7..626a1f0 100644
--- a/software/src/pages/shows/concertsPage/index.vue
+++ b/software/src/pages/shows/toursPage/index.vue
@@ -2,6 +2,7 @@
 import cardWithLeftImage from '@/components/cardWithLeftImage.vue';
 import { useConcertStore } from '@/data/stores/concertStore';
 import { createDateRangeString, lowestTicketPrice } from '@/scripts/concertScripts';
+import filterBar from './filterBar.vue';
 
 const concertStore = useConcertStore()
 </script>
@@ -12,14 +13,23 @@ const concertStore = useConcertStore()
       <v-spacer />
 
       <v-col cols="10">
-        <v-row v-for="tour of concertStore.tours">
+        <v-row>
+          <v-col>
+            <filter-bar />
+          </v-col>
+        </v-row>
+
+        <v-row
+          v-if="concertStore.filteredTours.length > 0"
+          v-for="tour of concertStore.filteredTours"
+        >
           <v-col>
             <card-with-left-image
               :title="tour.band.name + ' - ' +  tour.name"
               :image="'http://localhost:3000/static/tours/' + tour.image"
             >
               {{ createDateRangeString(tour) }}
-              <div>{{ tour.shows.length }} {{ $t('tours.concert', tour.shows.length) }}</div>
+              <div>{{ tour.concerts.length }} {{ $t('tours.concert', tour.concerts.length) }}</div>
 
               <template #append>
                 <div class="d-flex justify-center align-center text-h5" style="height: 100%;">
@@ -29,6 +39,15 @@ const concertStore = useConcertStore()
             </card-with-left-image>
           </v-col>
         </v-row>
+
+        <v-row v-else>
+          <v-col>
+            <v-empty-state 
+              title="Keine Konzerte gefunden"
+              icon="mdi-magnify"
+            />
+          </v-col>
+        </v-row>
       </v-col>
 
       <v-spacer />
diff --git a/software/src/router/show.routes.ts b/software/src/router/show.routes.ts
index 3ebd854..ac7e55d 100644
--- a/software/src/router/show.routes.ts
+++ b/software/src/router/show.routes.ts
@@ -1,10 +1,10 @@
-import ConcertsPage from "@/pages/shows/concertsPage/index.vue";
+import ToursPage from "@/pages/shows/toursPage/index.vue";
 import BandsPage from "@/pages/shows/bandsPage/index.vue";
 import LocationsPage from "@/pages/shows/locationsPage/index.vue"
 import SearchPage from "@/pages/shows/searchPage/index.vue"
 
 export const showRoutes = [
-  { path: '/shows/concerts', component: ConcertsPage },
+  { path: '/shows/tours', component: ToursPage },
   { path: '/shows/bands', component: BandsPage },
   { path: '/shows/locations', component: LocationsPage },
   { path: '/shows/search', component: SearchPage },
diff --git a/software/src/scripts/concertScripts.ts b/software/src/scripts/concertScripts.ts
index b21bd09..f3f0f81 100644
--- a/software/src/scripts/concertScripts.ts
+++ b/software/src/scripts/concertScripts.ts
@@ -1,6 +1,6 @@
-import { RatingModel } from "@/data/models/ratingModel"
+import { RatingModel } from "@/data/models/acts/ratingModel"
 import { dateToHumanReadableString } from "./dateTimeScripts"
-import { TourModel } from "@/data/models/tourModel"
+import { TourModel } from "@/data/models/acts/tourModel"
 
 /**
  * Calculate a price based on parameters
@@ -35,7 +35,7 @@ export function calcRating(ratings: Array<RatingModel>) {
 export function createDateRangeString(tour: TourModel) {
   const dateArray = []
 
-  for (let concert of tour.shows) {
+  for (let concert of tour.concerts) {
     dateArray.push(new Date(concert.date))
   }
 
@@ -55,7 +55,7 @@ export function createDateRangeString(tour: TourModel) {
 export function lowestTicketPrice(tour: TourModel): string {
   const priceArray : Array<number> = []
 
-  for (let concert of tour.shows) {
+  for (let concert of tour.concerts) {
     priceArray.push(concert.price)
   }