More skelton loader, add optional parameters to /locations and /events

software/src/components/pageParts/concertListItem.vue

@@ -15,7 +15,7 @@ defineProps({
     <v-col>
       <card-with-left-image
         :title="title"
-        :image="'http://localhost:3000/static/tours/' + image"
+        :image="'http://localhost:3000/static/' + image"
       >
         <div class="text-body-1 font-weight-bold">
           <div v-if="!$slots.description">

software/src/data/api/eventApi.ts

@@ -7,5 +7,11 @@ export async function fetchEvents(city: string = "", genre: string = "") {
   url += (city.length > 0) ? "city=" + city + "&" : ""
   url += (genre.length > 0) ? "genre=" + genre : ""
 
+  return await axios.get(url)
+}
+
+export async function getTopEvents(nrOfEvents) {
+  let url = BASE_URL + "?sort=desc&count=" + nrOfEvents
+
   return await axios.get(url)
 }

software/src/data/api/locationApi.ts

@@ -1,6 +1,6 @@
 import axios from "axios"
 
-let BASE_URL = "http://localhost:3000/locations"
+const BASE_URL = "http://localhost:3000/locations"
 
 export async function getAllLocations() {
   return await axios.get(BASE_URL)
@@ -8,4 +8,10 @@ export async function getAllLocations() {
 
 export async function getLocation(locationName: string) {
   return await axios.get(BASE_URL + "/" + locationName)
+}
+
+export async function getTopLocations(nrOfLocations: number) {
+  let url = BASE_URL + "?sort=desc&count=" + nrOfLocations
+
+  return await axios.get(url)
 }

software/src/pages/homePage/index.vue

@@ -3,12 +3,33 @@ import { useConcertStore } from '@/data/stores/concertStore';
 import highlightCarousel from './highlightCarousel.vue';
 import sectionDivider from '@/components/sectionDivider.vue';
 import cardWithTopImage from '@/components/cardWithTopImage.vue';
-import { calcRating, lowestTicketPrice } from '@/scripts/concertScripts';
+import { lowestTicketPrice } from '@/scripts/concertScripts';
 import OutlinedButton from '@/components/outlinedButton.vue';
 import { useRouter } from 'vue-router';
+import { useFeedbackStore } from '@/data/stores/feedbackStore';
+import { ref } from 'vue';
+import { EventModel } from '@/data/models/acts/eventModel';
+import { getTopEvents } from '@/data/api/eventApi';
+import { LocationModel } from '@/data/models/locations/locationModel';
+import { getTopLocations } from '@/data/api/locationApi';
 
 const router = useRouter()
-const concertStore = useConcertStore()
+const feedbackStore = useFeedbackStore()
+const topEvents = ref<Array<EventModel>>(Array.from({length: 4}, () => new EventModel()))
+const topLocations = ref<Array<LocationModel>>(Array.from({length: 8}, () => new LocationModel()))
+
+feedbackStore.fetchDataFromServerInProgress = true
+
+getTopEvents(4)
+  .then(events => {
+    topEvents.value = events.data
+
+    getTopLocations(8)
+      .then(locations => {
+        topLocations.value = locations.data
+        feedbackStore.fetchDataFromServerInProgress = false
+      })
+  })
 </script>
 
 <template>
@@ -28,12 +49,13 @@ const concertStore = useConcertStore()
         <v-row>
           <v-col v-for="i in 4" cols="3">
             <card-with-top-image
-              :image="'tours/' + concertStore.tours[i - 1].image"
-              :title="concertStore.tours[i - 1].band.name"
+              :image="topEvents[i - 1].image"
+              :title="topEvents[i - 1].band.name"
               smaller-title
-              @click="router.push('/bands/' + concertStore.tours[i - 1].band.name.replaceAll(' ', '-').toLowerCase())"
+              @click="router.push('/bands/' + topEvents[i - 1].band.name.replaceAll(' ', '-').toLowerCase())"
+              :loading="feedbackStore.fetchDataFromServerInProgress"
             >
-              ab {{ lowestTicketPrice(concertStore.tours[i - 1]) }} €
+              ab {{ lowestTicketPrice(topEvents[i - 1]) }} €
             </card-with-top-image>
           </v-col>
         </v-row>
@@ -59,12 +81,13 @@ const concertStore = useConcertStore()
         <v-row>
           <v-col v-for="i in 8" cols="3">
             <card-with-top-image
-              :image="'locations/' + concertStore.locations[i + 2].image"
-              :title="concertStore.locations[i + 2].name"
+              :image="topLocations[i - 1].image"
+              :title="topLocations[i - 1].name"
               smaller-title
-              @click="router.push('/locations/' + concertStore.locations[i + 2].name.replaceAll(' ', '-').toLowerCase())"
+              @click="router.push('/locations/' + topLocations[i - 1].name.replaceAll(' ', '-').toLowerCase())"
+              :loading="feedbackStore.fetchDataFromServerInProgress"
             >
-              {{ concertStore.locations[i + 2].city.name }}, {{ concertStore.locations[i + 2].city.country }}
+              {{ topLocations[i - 1].city.name }}, {{ topLocations[i - 1].city.country }}
             </card-with-top-image>
           </v-col>
         </v-row>