Improve filterBar on eventsPage, improve API access from frontend

software/src/data/api/cityApi.ts

@@ -2,6 +2,13 @@ import axios from "axios"
 
 const BASE_URL = "http://localhost:3000/cities"
 
+/**
+ * @deprecated Use fetchAllCities
+ */
 export async function getAllCities() {
   return await axios.get(BASE_URL)
+}
+
+export async function fetchAllCities() {
+  return await axios.get(BASE_URL)
 }

software/src/data/api/eventApi.ts

@@ -4,9 +4,8 @@ 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 += (city.length > 0) ? "city=" + city + "&" : ""
   url += (genre.length > 0) ? "genre=" + genre : ""
 
-  console.log(url)
   return await axios.get(url)
 }

software/src/data/api/genreApi.ts

@@ -2,6 +2,13 @@ import axios from "axios"
 
 let BASE_URL = "http://localhost:3000/genres"
 
+/**
+ * @deprecated Use fetchAllGenres()
+ */
 export async function getAllGenres() {
   return await axios.get(BASE_URL)
+}
+
+export async function fetchAllGenres() {
+  return await axios.get(BASE_URL)
 }

software/src/data/api/tourApi.ts

@@ -6,5 +6,5 @@ let BASE_URL = "http://localhost:3000/tours"
  * Fetch all tours from API
  */
 export async function getAllTours() {
-  return await axios.get(BASE_URL)
+  //return await axios.get(BASE_URL)
 }

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

@@ -6,6 +6,6 @@ export class EventModel {
   name: string
   offered: boolean
   image: string
-  band: BandModel
-  concerts: Array<ConcertModel>
+  band: BandModel = new BandModel()
+  concerts: Array<ConcertModel> = [ new ConcertModel() ]
 }

software/src/data/models/locations/cityModel.ts

@@ -2,15 +2,21 @@
  * Replica of the API endpoint /cities
  */
 export class CityModel {
-  id: number
-  name: string
-  country: string
-  image: string
+  id: number = -1
+  name: string = ""
+  country: string = ""
+  image: string = ""
   locations: Array<{
     id: number
     name: string
     address: string
     image: string
     nrOfConcerts: number
-  }>
+  }> = [{
+    id: -1,
+    name: "",
+    address: "",
+    image: "",
+    nrOfConcerts: 0
+  }]
 }

software/src/data/stores/concertStore.ts

@@ -29,15 +29,15 @@ export const useConcertStore = defineStore("concertStore", {
     async fetchAllTours() {
       await getAllTours()
         .then(result => {
-          this.tours = result.data
+          // this.tours = result.data
 
-          this.tours.sort((a, b) => {
-            return new Date(a.concerts[0].date) < new Date(b.concerts[0].date) ? -1 : 1
-          })
+          // this.tours.sort((a, b) => {
+          //   return new Date(a.concerts[0].date) < new Date(b.concerts[0].date) ? -1 : 1
+          // })
 
-          this.filteredTours = this.tours
+          // this.filteredTours = this.tours
 
-          this.filterTours()
+          // this.filterTours()
         })
 
       await getAllBands()
@@ -47,7 +47,6 @@ export const useConcertStore = defineStore("concertStore", {
 
       await getAllLocations() 
         .then(result => {
-          console.log(result.data)
           this.locations = result.data
         })
 

software/src/data/stores/shoppingStore.ts

@@ -2,18 +2,43 @@ import { defineStore } from "pinia";
 import { ref } from "vue";
 import { EventModel } from "../models/acts/eventModel";
 import { fetchEvents } from "../api/eventApi";
+import { fetchAllCities } from "../api/cityApi";
+import { CityModel } from "../models/locations/cityModel";
+import { GenreModel } from "../models/acts/genreModel";
+import { fetchAllGenres } from "../api/genreApi";
 
 export const useShoppingStore = defineStore("shoppingStore", {
   state: () => ({
-    events: ref<Array<EventModel>>([])
+    events: ref<Array<EventModel>>([ new EventModel() ]),
+    cities: ref<Array<CityModel>>([ new CityModel() ]),
+    genres: ref<Array<GenreModel>>([ new GenreModel() ]),
+    cityFilterName: ref<String>(),
+    genreFilterName: ref<String>()
   }),
 
   actions: {
-    getEvents(city: string = "", genre: string = "") {
-      fetchEvents(city, genre)
+    async getEvents() {
+      await fetchEvents(
+        this.cityFilterName != null ? this.cityFilterName : "",
+        this.genreFilterName != null ? this.genreFilterName : ""
+      )
         .then(result => {
           this.events = result.data
         })
+    },
+
+    async getCities() {
+      await fetchAllCities()
+        .then(result => {
+          this.cities = result.data
+        })
+    },
+
+    async getGenres() {
+      await fetchAllGenres()
+        .then(result => {
+          this.genres = result.data
+        })
     }
   }
 })