Bugfixes: No startup after packaging, infinity loading on concert booking page if user comes from band page

backend/server.ts

@@ -36,7 +36,7 @@ app.use("/files", files)
 
 // Add delay for more realistic response times
 app.use((req, res, next) => {
-  setTimeout(next, Math.floor((Math.random() * 1000) + 100))
+  setTimeout(next, Math.floor((Math.random() * 500) + 100))
 })
 
 // Routes

electron-builder.json

@@ -37,7 +37,6 @@
     "!dist",
     "!out",
     "!misc",
-    "!database.sqlite",
+    "!database.sqlite"
-    "!node_modules"
   ]
 }

src/components/pageParts/concertListItem.vue

@@ -1,27 +1,27 @@
 <script setup lang="ts">
-import cardViewHorizontal from '@/components/basics/cardViewHorizontal.vue';
+import cardViewHorizontal from "@/components/basics/cardViewHorizontal.vue";
-import { BandModel } from '@/data/models/acts/bandModel';
+import { BandModel } from "@/data/models/acts/bandModel";
-import { ConcertModel } from '@/data/models/acts/concertModel';
+import { ConcertModel } from "@/data/models/acts/concertModel";
-import { LocationModel } from '@/data/models/locations/locationModel';
+import { LocationModel } from "@/data/models/locations/locationModel";
-import { useRouter } from 'vue-router';
+import { useRouter } from "vue-router";
 
-const router = useRouter()
+const router = useRouter();
 
 defineProps({
   /** Concert to display */
   concert: {
     type: ConcertModel,
-    required: true
+    required: true,
   },
 
   band: {
     type: BandModel,
-    required: true
+    required: true,
   },
 
   location: {
     type: LocationModel,
-    required: true
+    required: true,
   },
 
   /** Display text parts as skeleton */
@@ -30,9 +30,9 @@ defineProps({
   /** Show or hide the button on the right side */
   showButton: {
     type: Boolean,
-    default: true
+    default: true,
-  }
+  },
-})
+});
 </script>
 
 <template>
@@ -40,7 +40,13 @@ defineProps({
     :title="concert.name"
     v-if="!loading"
     :link="showButton && concert.inStock > 0"
-    @click="showButton && concert.inStock > 0 ? router.push('/concerts/booking/' + location.urlName + '/' + concert.date) : () => {}"
+    @click="console.log(concert.date);
+      showButton && concert.inStock > 0
+        ? router.push(
+            '/concerts/booking/' + location.urlName + '/' + concert.date
+          )
+        : () => {}
+    "
   >
     <template #prepend>
       <div>
@@ -49,7 +55,9 @@ defineProps({
         </div>
 
         <div class="text-h6">
-          {{ new Date(concert.date).toLocaleString('default', { month: 'long' }) }}
+          {{
+            new Date(concert.date).toLocaleString("default", { month: "long" })
+          }}
         </div>
 
         <div class="text-h6">
@@ -71,28 +79,23 @@ defineProps({
     <template #append>
       <div>
         <div class="text-secondary font-weight-medium text-h6 pb-1">
-          {{ $t('misc.from') + ' ' + concert.price.toFixed(2) + ' €' }}
+          {{ $t("misc.from") + " " + concert.price.toFixed(2) + " €" }}
         </div>
 
         <div v-if="concert.inStock == 0 && showButton" class="text-h6">
-          {{ $t('concert.concertSoldOut') }}
+          {{ $t("concert.concertSoldOut") }}
         </div>
 
         <div v-else-if="showButton">
           <v-btn variant="flat" color="secondary">
-            {{ $t('concert.goToTheConcert') }}
+            {{ $t("concert.goToTheConcert") }}
           </v-btn>
         </div>
-
       </div>
     </template>
   </card-view-horizontal>
 
-  <card-view-horizontal 
+  <card-view-horizontal v-else :loading="loading">
-    v-else
+    <v-skeleton-loader type="text" />
-    :loading="loading"
-  >
-    <v-skeleton-loader
-      type="text" />
   </card-view-horizontal>
 </template>

src/pages/bands/bandDetailPage/index.vue

@@ -7,9 +7,13 @@ import concertSection from './concertSection.vue';
 import heroImage from '@/components/pageParts/heroImage.vue';
 import { useBandStore } from '@/stores/band.store';
 import { onMounted, watch } from 'vue';
+import { useConcertStore } from '@/stores/concert.store';
 
 const router = useRouter()
 const bandStore = useBandStore()
+const concertStore = useConcertStore()
+
+concertStore.getConcerts()
 
 onMounted(async () => {
   bandStore.getBand(String(router.currentRoute.value.params.name).replaceAll('-', ' '))

src/pages/bands/bandsPage/index.vue

@@ -39,8 +39,8 @@ watch(() => router.currentRoute.value.query, () => {
         </v-row>
 
         <v-row
-          v-else-if="bandStore.bands.length > 0"
+          v-else-if="bandStore.filteredBands.length > 0"
-          v-for="band in bandStore.bands"
+          v-for="band in bandStore.filteredBands"
         >
           <v-col>
             <band-list-item

src/pages/concerts/concertsPage/concertsListSection.vue

@@ -1,17 +1,15 @@
 <script setup lang="ts">
-import { useConcertStore } from '@/stores/concert.store';
+import { useConcertStore } from "@/stores/concert.store";
-import concertListItem from '@/components/pageParts/concertListItem.vue';
+import concertListItem from "@/components/pageParts/concertListItem.vue";
-import cardViewHorizontal from '@/components/basics/cardViewHorizontal.vue';
+import cardViewHorizontal from "@/components/basics/cardViewHorizontal.vue";
-import sectionDivider from '@/components/basics/sectionDivider.vue';
+import sectionDivider from "@/components/basics/sectionDivider.vue";
-import concertFilterbar from './concertFilterbar.vue';
+import concertFilterbar from "./concertFilterbar.vue";
 
-const concertStore = useConcertStore()
+const concertStore = useConcertStore();
 </script>
 
 <template>
-  <div
+  <div v-if="concertStore.fetchInProgress">
-    v-if="concertStore.fetchInProgress"
-  >
     <section-divider :loading="true" />
     <v-row v-for="i in 3">
       <v-col>
@@ -26,13 +24,21 @@ const concertStore = useConcertStore()
   >
     <div v-if="concert.offered">
       <v-row
-        v-if="index == 0 || 
+        v-if="
-        new Date(concertStore.concerts[index - 1].date).getMonth() != 
+          index == 0 ||
-        new Date(concertStore.concerts[index].date).getMonth()"
+          new Date(concertStore.concerts[index - 1].date).getMonth() !=
+            new Date(concertStore.concerts[index].date).getMonth()
+        "
       >
         <v-col>
           <section-divider
-            :title="new Date(concert.date).toLocaleString('default', { month: 'long' }) + ' ' + new Date(concert.date).getFullYear()"
+            :title="
+              new Date(concert.date).toLocaleString('default', {
+                month: 'long',
+              }) +
+              ' ' +
+              new Date(concert.date).getFullYear()
+            "
           />
         </v-col>
       </v-row>

src/stores/band.store.ts

@@ -12,6 +12,9 @@ export const useBandStore = defineStore("bandStore", {
     /** All available bands */
     bands: ref<Array<BandApiModel>>([]),
 
+    /** Available bands filtered by parameters */
+    filteredBands: ref<Array<BandApiModel>>([]),
+
     /** All information about a single band */
     band: ref<BandDetailsApiModel>(new BandDetailsApiModel()),
 
@@ -32,7 +35,9 @@ export const useBandStore = defineStore("bandStore", {
 
       await fetchAllBands()
         .then(result => {
-          this.bands = result.data.filter((band: BandApiModel) => {
+          this.bands = result.data
+
+          this.filteredBands = result.data.filter((band: BandApiModel) => {
             if (genreStore.genre == null) {
               return true
             }

src/stores/concert.store.ts

@@ -64,6 +64,9 @@ export const useConcertStore = defineStore("concertStore", {
       const feedbackStore = useFeedbackStore()
       this.fetchInProgress = true
 
+      console.log("LOcation & Date:")
+      console.log(this.concerts)
+
       let id = this.concerts.find((concert: ConcertApiModel) => {
         return (concert.location.urlName == location && concert.date == date)
       }).id
@@ -75,6 +78,7 @@ export const useConcertStore = defineStore("concertStore", {
         })
         .catch(res => {
           feedbackStore.notFound = true
+          this.fetchInProgress = false
         })
     },