Start moving data server handling from pinia store to server

software/src/data/api/eventApi.ts

@@ -0,0 +1,12 @@
+import axios from "axios"
+
+const BASE_URL = "http://localhost:3000/events"
+
+export async function fetchEvents(city: string = "", genre: string = "") {
+  let url = BASE_URL + "?"
+  url += (city.length > 0) ? "city=" + city : ""
+  url += (genre.length > 0) ? "genre=" + genre : ""
+
+  console.log(url)
+  return await axios.get(url)
+}

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

@@ -0,0 +1,11 @@
+import { BandModel } from "./bandModel"
+import { ConcertModel } from "./concertModel"
+
+export class EventModel {
+  id: number
+  name: string
+  offered: boolean
+  image: string
+  band: BandModel
+  concerts: Array<ConcertModel>
+}

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

@@ -1,6 +1,9 @@
 import { BandModel } from "./bandModel"
 import { ConcertModel } from "./concertModel"
 
+/**
+ * @deprecated Use EventModel!
+ */
 export class TourModel {
   id: number
   name: string

software/src/data/stores/shoppingStore.ts

@@ -0,0 +1,19 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import { EventModel } from "../models/acts/eventModel";
+import { fetchEvents } from "../api/eventApi";
+
+export const useShoppingStore = defineStore("shoppingStore", {
+  state: () => ({
+    events: ref<Array<EventModel>>([])
+  }),
+
+  actions: {
+    getEvents(city: string = "", genre: string = "") {
+      fetchEvents(city, genre)
+        .then(result => {
+          this.events = result.data
+        })
+    }
+  }
+})

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

@@ -5,8 +5,12 @@ import sectionDivider from '@/components/sectionDivider.vue';
 import cardWithLeftImage from '@/components/cardWithLeftImage.vue';
 import outlinedButton from '@/components/outlinedButton.vue';
 import { useRouter } from 'vue-router';
+import ticketOrderDialog from './ticketOrderDialog.vue';
+import { ref } from 'vue';
+import { ConcertModel } from '@/data/models/acts/concertModel';
 
 const router = useRouter()
+const showDialog = ref(false)
 
 defineProps({
   band: {
@@ -14,6 +18,10 @@ defineProps({
     required: true
   }
 })
+
+function openTicketOrderDialog(concert: ConcertModel) {
+  showDialog.value = true
+}
 </script>
 
 <template>
@@ -60,6 +68,7 @@ defineProps({
             <outlined-button
               v-if="concert.inStock > 0"
               prepend-icon="mdi-basket-plus"
+              @click="openTicketOrderDialog(concert)"
             >
               {{ $t('add') }}
             </outlined-button>
@@ -75,4 +84,6 @@ defineProps({
       </card-with-left-image>
     </v-col>
   </v-row>
+  
+  <ticket-order-dialog />
 </template>

software/src/pages/shows/bandDetailPage/ticketOrderDialog.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import actionDialog from '@/components/actionDialog.vue';
+import { LocationModel } from '@/data/models/locations/locationModel';
+
+const showDialog = defineModel()
+
+defineProps({
+})
+</script>
+
+<template>
+  <action-dialog  >
+    123
+  </action-dialog>
+</template>

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

@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import cardWithLeftImage from '@/components/cardWithLeftImage.vue';
-import { useConcertStore } from '@/data/stores/concertStore';
 import { createDateRangeString, lowestTicketPrice } from '@/scripts/concertScripts';
 import filterBar from './filterBar.vue';
 import { useRouter } from 'vue-router';
+import { useShoppingStore } from '@/data/stores/shoppingStore';
 
 const router = useRouter()
-const concertStore = useConcertStore()
+const shoppingStore = useShoppingStore()
+
+shoppingStore.getEvents()
 </script>
 
 <template>
@@ -22,8 +24,8 @@ const concertStore = useConcertStore()
         </v-row>
 
         <v-row
-          v-if="concertStore.filteredTours.length > 0"
-          v-for="tour of concertStore.filteredTours"
+          v-if="shoppingStore.events.length > 0"
+          v-for="tour of shoppingStore.events"
         >
           <v-col>
             <card-with-left-image