From b06b81f140311301db2e55adf7c39a98f5818251 Mon Sep 17 00:00:00 2001
From: TobiZog <developer@zoghaib.de>
Date: Tue, 5 Nov 2024 18:43:47 +0100
Subject: [PATCH] Error page

---
 software/backend/routes/band.routes.ts        |  3 ++
 software/backend/routes/concert.routes.ts     |  3 ++
 software/backend/routes/location.routes.ts    |  3 ++
 software/backend/routes/order.routes.ts       |  1 -
 software/src/App.vue                          |  9 +++++
 .../src/components/basics/actionDialog.vue    |  4 ++
 software/src/locales/de.json                  |  6 ++-
 software/src/locales/en.json                  |  4 ++
 .../src/pages/bands/bandDetailPage/index.vue  | 10 ++++-
 .../concerts/concertBookingPage/index.vue     |  9 ++++-
 .../src/pages/concerts/concertsPage/index.vue |  8 ++--
 .../locations/locationDetailPage/index.vue    |  9 ++++-
 .../pages/misc/basketPage/orderingDialog.vue  | 38 +++++++++++++++----
 software/src/pages/misc/errorPage/index.vue   | 17 +++++++++
 software/src/router/routes.ts                 | 12 +++++-
 software/src/stores/band.store.ts             |  4 ++
 software/src/stores/concert.store.ts          |  5 +++
 software/src/stores/feedback.store.ts         |  5 ++-
 software/src/stores/location.store.ts         |  5 +++
 19 files changed, 136 insertions(+), 19 deletions(-)
 create mode 100644 software/src/pages/misc/errorPage/index.vue

diff --git a/software/backend/routes/band.routes.ts b/software/backend/routes/band.routes.ts
index 4267a19..6c0a322 100644
--- a/software/backend/routes/band.routes.ts
+++ b/software/backend/routes/band.routes.ts
@@ -117,6 +117,9 @@ band.get("/band/:name", (req: Request, res: Response) => {
 
       res.status(200).json(band)
     })
+    .catch(e => {
+      res.status(404).send()
+    })
 })
 
 
diff --git a/software/backend/routes/concert.routes.ts b/software/backend/routes/concert.routes.ts
index cca6830..c0a6654 100644
--- a/software/backend/routes/concert.routes.ts
+++ b/software/backend/routes/concert.routes.ts
@@ -110,6 +110,9 @@ concert.get("/concert/:id", (req: Request, res: Response) => {
 
       res.status(200).json(concert)
     })
+    .catch(e => {
+      res.status(404).send()
+    })
 })
 
 
diff --git a/software/backend/routes/location.routes.ts b/software/backend/routes/location.routes.ts
index cda05ef..12a4b17 100644
--- a/software/backend/routes/location.routes.ts
+++ b/software/backend/routes/location.routes.ts
@@ -98,6 +98,9 @@ location.get("/location/:urlName", (req: Request, res: Response) => {
 
       res.status(200).json(location)
     })
+    .catch(e => {
+      res.status(404).send()
+    })
 })
 
 
diff --git a/software/backend/routes/order.routes.ts b/software/backend/routes/order.routes.ts
index 62b1a93..ea11673 100644
--- a/software/backend/routes/order.routes.ts
+++ b/software/backend/routes/order.routes.ts
@@ -61,7 +61,6 @@ order.get("/:id", (req: Request, res: Response) => {
 
 // Place a new order
 order.post("/", (req: Request, res: Response) => {
-  console.log(req.body.tickets)
   Order.create(req.body)
     .then(async order => {
       for (let ticket of req.body.tickets) {
diff --git a/software/src/App.vue b/software/src/App.vue
index 461bc97..345b01b 100644
--- a/software/src/App.vue
+++ b/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>
diff --git a/software/src/components/basics/actionDialog.vue b/software/src/components/basics/actionDialog.vue
index 98e48df..da7c3aa 100644
--- a/software/src/components/basics/actionDialog.vue
+++ b/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>
diff --git a/software/src/locales/de.json b/software/src/locales/de.json
index 44b1249..ecd0685 100644
--- a/software/src/locales/de.json
+++ b/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",
diff --git a/software/src/locales/en.json b/software/src/locales/en.json
index 23c92f7..2a2b030 100644
--- a/software/src/locales/en.json
+++ b/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",
diff --git a/software/src/pages/bands/bandDetailPage/index.vue b/software/src/pages/bands/bandDetailPage/index.vue
index 8cd6652..d8b89fd 100644
--- a/software/src/pages/bands/bandDetailPage/index.vue
+++ b/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"
diff --git a/software/src/pages/concerts/concertBookingPage/index.vue b/software/src/pages/concerts/concertBookingPage/index.vue
index 860249c..8433c4c 100644
--- a/software/src/pages/concerts/concertBookingPage/index.vue
+++ b/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>
diff --git a/software/src/pages/concerts/concertsPage/index.vue b/software/src/pages/concerts/concertsPage/index.vue
index b8345d0..70bb67c 100644
--- a/software/src/pages/concerts/concertsPage/index.vue
+++ b/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>
diff --git a/software/src/pages/locations/locationDetailPage/index.vue b/software/src/pages/locations/locationDetailPage/index.vue
index 744ba91..9bba2e8 100644
--- a/software/src/pages/locations/locationDetailPage/index.vue
+++ b/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>
diff --git a/software/src/pages/misc/basketPage/orderingDialog.vue b/software/src/pages/misc/basketPage/orderingDialog.vue
index ce6ba73..d7ebe8c 100644
--- a/software/src/pages/misc/basketPage/orderingDialog.vue
+++ b/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>
 
diff --git a/software/src/pages/misc/errorPage/index.vue b/software/src/pages/misc/errorPage/index.vue
new file mode 100644
index 0000000..5bd6eee
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/software/src/router/routes.ts b/software/src/router/routes.ts
index 869d33e..82a215e 100644
--- a/software/src/router/routes.ts
+++ b/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
\ No newline at end of file
diff --git a/software/src/stores/band.store.ts b/software/src/stores/band.store.ts
index ea48f13..fe59fcf 100644
--- a/software/src/stores/band.store.ts
+++ b/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
+        })
     },
 
     /**
diff --git a/software/src/stores/concert.store.ts b/software/src/stores/concert.store.ts
index 84b35a2..0c8cdde 100644
--- a/software/src/stores/concert.store.ts
+++ b/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
+        })
     },
 
     /**
diff --git a/software/src/stores/feedback.store.ts b/software/src/stores/feedback.store.ts
index 3202404..525d539 100644
--- a/software/src/stores/feedback.store.ts
+++ b/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: {
diff --git a/software/src/stores/location.store.ts b/software/src/stores/location.store.ts
index b835232..e43eca7 100644
--- a/software/src/stores/location.store.ts
+++ b/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
+        })
     },
 
     /**