Error page

software/src/App.vue

@@ -8,10 +8,12 @@ import { usePreferencesStore } from './stores/preferences.store';
 import { useFeedbackStore } from './stores/feedback.store';
 import companyFooter from './components/navigation/companyFooter.vue';
 import urlBar from './components/navigation/urlBar.vue';
+import { useRouter } from 'vue-router';
 
 const preferencesStore = usePreferencesStore()
 const feedbackStore = useFeedbackStore()
 const theme = useTheme()
+const router = useRouter()
 
 theme.global.name.value = preferencesStore.theme
 
@@ -20,6 +22,13 @@ theme.global.name.value = preferencesStore.theme
 watch(() => preferencesStore.language, () => {
   i18n.global.locale = preferencesStore.language
 }, { immediate: true })
+
+watch(() => feedbackStore.notFound, () => {
+  if (feedbackStore.notFound) {
+    feedbackStore.notFound = false
+    router.push("/404")
+  }
+})
 </script>
 
 <template>

software/src/components/basics/actionDialog.vue

@@ -25,6 +25,10 @@ defineProps({
     >
       <slot></slot>
 
+      <template #borderless>
+        <slot name="borderless"></slot>
+      </template>
+
       <template #actions>
         <slot name="actions"></slot>
       </template>

software/src/locales/de.json

@@ -86,7 +86,7 @@
     "userData": {
       "username": "Username",
       "password": "Passwort",
-      "address": "Adresse | Addressen",
+      "address": "Adresse | Adressen",
       "payment": "Bezahlart | Bezahlarten",
       "email": "E-Mail-Adresse",
       "firstName": "Vorname",
@@ -173,6 +173,10 @@
     "bandSavedSuccessful": "Band erfolgreich gespeichert"
   },
   "misc": {
+    "404": {
+      "title": "Seite nicht gefunden",
+      "headline": "404"
+    },
     "sortBy": "Sortieren nach",
     "greeting": "Hallo {msg}",
     "from": "ab",

software/src/locales/en.json

@@ -173,6 +173,10 @@
     "bandSavedSuccessful": "Band successfully saved"
   },
   "misc": {
+    "404": {
+      "title": "Page not found",
+      "headline": "404"
+    },
     "sortBy": "Sort by",
     "greeting": "Hello {msg}",
     "from": "from",

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

@@ -7,14 +7,22 @@ import concertSection from './concertSection.vue';
 import heroImage from '@/components/pageParts/heroImage.vue';
 import sectionDivider from '@/components/basics/sectionDivider.vue';
 import { useBandStore } from '@/stores/band.store';
+import { onMounted, watch } from 'vue';
 
 const router = useRouter()
 const bandStore = useBandStore()
 
-bandStore.getBand(String(router.currentRoute.value.params.name).replaceAll('-', ' '))
+onMounted(async () => {
+  bandStore.getBand(String(router.currentRoute.value.params.name).replaceAll('-', ' '))
+})
+
+watch(() => router.currentRoute.value.params.name, () => {
+  bandStore.getBand(String(router.currentRoute.value.params.name).replaceAll('-', ' '))
+})
 </script>
 
 <template>
+  {{ router.currentRoute.value.params.name }}
   <hero-image
     :image="bandStore.band.imageMembers"
     :logo="bandStore.band.logo"

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

@@ -8,12 +8,19 @@ import outlinedButton from '@/components/basics/outlinedButton.vue';
 import { useConcertStore } from '@/stores/concert.store';
 import ticketListItem from '@/components/pageParts/ticketListItem.vue';
 import circularProgressIndeterminate from '@/components/basics/circularProgressIndeterminate.vue';
+import { onMounted, watch } from 'vue';
 
 const router = useRouter()
 const basketStore = useBasketStore()
 const concertStore = useConcertStore()
 
-concertStore.getConcert(Number(router.currentRoute.value.params.id))
+onMounted(async () => {
+  concertStore.getConcert(Number(router.currentRoute.value.params.id))
+})
+
+watch(() => router.currentRoute.value.params.id, () => {
+  concertStore.getConcert(Number(router.currentRoute.value.params.id))
+})
 </script>
 
 <template>

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

@@ -1,14 +1,14 @@
 <script setup lang="ts">
 import { useConcertStore } from '@/stores/concert.store';
-import concertListItem from '@/components/pageParts/concertListItem.vue';
-import cardViewHorizontal from '@/components/basics/cardViewHorizontal.vue';
-import sectionDivider from '@/components/basics/sectionDivider.vue';
 import concertFilterbar from './concertFilterbar.vue';
 import ConcertsListSection from './concertsListSection.vue';
+import { onMounted } from 'vue';
 
 const concertStore = useConcertStore()
 
-concertStore.getConcerts()
+onMounted(async () => {
+  concertStore.getConcerts()
+})
 </script>
 
 <template>

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

@@ -4,11 +4,18 @@ import heroImage from '@/components/pageParts/heroImage.vue';
 import { useLocationStore } from '@/stores/location.store';
 import locationConcertsSection from './locationConcertsSection.vue';
 import LocationSeatMapSection from './locationSeatMapSection.vue';
+import { onMounted, watch } from 'vue';
 
 const router = useRouter()
 const locationStore = useLocationStore()
 
-locationStore.getLocationByName(String(router.currentRoute.value.params.name))
+onMounted(async () => {
+  locationStore.getLocationByName(String(router.currentRoute.value.params.name))
+})
+
+watch(() => router.currentRoute.value.params.name, () => {
+  locationStore.getLocationByName(String(router.currentRoute.value.params.name))
+})
 </script>
 
 <template>

software/src/pages/misc/basketPage/orderingDialog.vue

@@ -42,13 +42,24 @@ async function doOrder() {
     max-width="800"
     persistent
   >
-    <v-list class="pa-0">
+    <v-radio-group class="pa-0" v-model="basketStore.usedAddress">
       <v-list-subheader>
         {{ $t('account.userData.address', accountStore.userAccount.addresses.length) }}
       </v-list-subheader>
 
-      <v-list-item>
-        <v-radio-group
+      <v-list-item
+        v-for="address in accountStore.userAccount.addresses"
+      >
+        
+        <v-list-item-title>
+          <v-radio :label="address.street + '' + address.houseNumber" />
+        </v-list-item-title>
+
+        <v-list-item-subtitle>
+          {{ address.postalCode }} {{ address.city }}
+        </v-list-item-subtitle>
+
+        <!-- <v-radio-group
           v-model="basketStore.usedAddress"
           :error="addressError"
         >
@@ -58,24 +69,35 @@ async function doOrder() {
             :label="address.street + ' ' + address.houseNumber + ', ' + address.postalCode + ' ' + address.city"
             
           />
-        </v-radio-group>
+        </v-radio-group> -->
       </v-list-item>
+    </v-radio-group>
 
+    <v-list>
       <v-list-subheader>
         {{ $t('account.userData.payment', accountStore.userAccount.payments.length) }}
       </v-list-subheader>
 
-      <v-list-item>
-        <v-radio-group
+      <v-list-item v-for="payment in accountStore.userAccount.payments">
+        <template #prepend="{ isActive }">
+          <v-list-item-action start>
+            <v-radio :model-value="isActive" />
+          </v-list-item-action>
+        </template>
+
+        <v-list-item-title>{{ payment.bankName }}</v-list-item-title>
+
+        <v-list-item-subtitle>{{ payment.iban }}</v-list-item-subtitle>
+        <!-- <v-radio-group
           v-model="basketStore.usedPayment"
         >
           <v-radio
-            v-for="payment in accountStore.userAccount.payments"
+            
             :value="payment"
             :label="payment.bankName + ': ' + payment.iban"
             :error="paymentError"
           />
-        </v-radio-group>
+        </v-radio-group> -->
       </v-list-item>
     </v-list>
 

software/src/pages/misc/errorPage/index.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+console.log("Error Page")
+</script>
+
+<template>
+  <v-container>
+    <v-row>
+      <v-col>
+        <v-empty-state
+          :headline="$t('misc.404.headline')"
+          :title="$t('misc.404.title')"
+          icon="mdi-robot-dead"
+        />
+      </v-col>
+    </v-row>
+  </v-container>
+</template>

software/src/router/routes.ts

@@ -14,10 +14,17 @@ import OrdersPage from "@/pages/account/ordersPage/index.vue";
 import LoginPage from "@/pages/account/loginPage/index.vue"
 import PreferencesPage from "@/pages/misc/preferencesPage/index.vue";
 import HelpPage from "@/pages/misc/helpPage/index.vue"
+import ErrorPage from "@/pages/misc/errorPage/index.vue"
 
 const routes = [
   // Main page
   { path: "/", component: HomePage },
+  { 
+    path: "/:pathMatch(.*)*", 
+    redirect: to => {
+      return { path: "/404" }
+    }
+  },
 
   // Account
   { path: '/account/home', component: AccountHomePage },
@@ -44,7 +51,10 @@ const routes = [
   { path: '/search', component: SearchPage },
   { path: '/basket', component: BasketPage },
   { path: '/preferences', component: PreferencesPage },
-  { path: '/help', component: HelpPage }
+  { path: '/help', component: HelpPage },
+
+  // Error Page
+  { path: "/404", component: ErrorPage }
 ]
 
 export default routes

software/src/stores/band.store.ts

@@ -58,6 +58,7 @@ export const useBandStore = defineStore("bandStore", {
      * @param name Name of band
      */
     async getBand(name: string) {
+      const feedbackStore = useFeedbackStore()
       this.fetchInProgress = true
 
       await fetchBandByName(name)
@@ -65,6 +66,9 @@ export const useBandStore = defineStore("bandStore", {
           this.band = result.data
           this.fetchInProgress = false
         })
+        .catch(res => {
+          feedbackStore.notFound = true
+        })
     },
 
     /**

software/src/stores/concert.store.ts

@@ -5,6 +5,7 @@ import { fetchConcertById, fetchAllConcerts, fetchUpcomingConcerts } from "../da
 import { ConcertDetailsApiModel } from "../data/models/acts/concertDetailsApiModel";
 import { CityModel } from "@/data/models/locations/cityModel";
 import { ConcertModel } from "@/data/models/acts/concertModel";
+import { useFeedbackStore } from "./feedback.store";
 
 export const useConcertStore = defineStore("concertStore", {
   state: () => ({
@@ -60,6 +61,7 @@ export const useConcertStore = defineStore("concertStore", {
      * @param id ID of the concert in the database
      */
     async getConcert(id: number) {
+      const feedbackStore = useFeedbackStore()
       this.fetchInProgress = true
 
       fetchConcertById(id)
@@ -67,6 +69,9 @@ export const useConcertStore = defineStore("concertStore", {
           this.concert = result.data
           this.fetchInProgress = false
         })
+        .catch(res => {
+          feedbackStore.notFound = true
+        })
     },
 
     /**

software/src/stores/feedback.store.ts

@@ -13,7 +13,10 @@ export const useFeedbackStore = defineStore("feedbackStore", {
     title: ref(""),
     color: ref(""),
     icon: ref(""),
-    $i18n: {}
+    $i18n: {},
+
+    /** Band, Location or concert on URL does not exist, redirect to 404 page */
+    notFound: ref(false)
   }),
 
   getters: {

software/src/stores/location.store.ts

@@ -5,6 +5,7 @@ import { LocationApiModel } from "../data/models/locations/locationApiModel";
 import { CityModel } from "../data/models/locations/cityModel";
 import { fetchAllCities } from "../data/api/cityApi";
 import { LocationDetailsApiModel } from "@/data/models/locations/locationDetailsApiModel";
+import { useFeedbackStore } from "./feedback.store";
 
 export const useLocationStore = defineStore("locationStore", {
   state: () => ({
@@ -46,6 +47,7 @@ export const useLocationStore = defineStore("locationStore", {
     },
 
     getLocationByName(name: string) {
+      const feedbackStore = useFeedbackStore()
       this.fetchInProgress = true
 
       fetchLocationByName(name)
@@ -53,6 +55,9 @@ export const useLocationStore = defineStore("locationStore", {
           this.location = result.data
           this.fetchInProgress = false
         })
+        .catch(res => {
+          feedbackStore.notFound = true
+        })
     },
 
     /**