Improve filterBar on eventsPage, improve API access from frontend

software/src/pages/events/bandDetailPage/bandBanner.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { BandModel } from '@/data/models/acts/bandModel';
+
+defineProps({
+  band: {
+    type: BandModel,
+    required: true
+  }
+})
+</script>
+
+<template>
+  <div class="position-relative top-0 left-0">
+    <v-img
+      :src="'http://localhost:3000/static/bands/' + band.imageMembers"
+      height="600"
+      gradient="to top, rgba(0, 0, 0, .9), rgba(255, 255, 255, 0.1)"
+      cover
+    >
+      <div class="position-absolute bottom-0 pa-5">
+        <v-row>
+          <v-col cols="2">
+            <v-card>
+              <v-img
+                :src="'http://localhost:3000/static/bands/' + band.logo"
+                height="200"
+                aspect-ratio="1"
+                cover
+              />
+            </v-card>
+          </v-col>
+
+          <v-col>
+            <p class="text-h3">{{ band.name }}</p>
+            <div>
+              <v-chip
+                v-for="genre in band.genres"
+                class="mr-2 my-1"
+                variant="flat"
+              >
+                {{ genre.name }}
+              </v-chip>
+            </div>
+            <p class="text-h6">{{ band.descriptionDe }}</p>
+          </v-col>
+        </v-row>
+        
+      </div>
+    </v-img>
+  </div>
+</template>

software/src/pages/events/bandDetailPage/bandMemberSection.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { BandModel } from '@/data/models/acts/bandModel';
+import sectionDivider from '@/components/sectionDivider.vue';
+import cardWithTopImage from '@/components/cardWithTopImage.vue';
+
+defineProps({
+  band: {
+    type: BandModel,
+    required: true
+  }
+})
+</script>
+
+<template>
+  <v-row>
+    <v-col>
+      <section-divider title="Band Mitglieder" />
+    </v-col>
+  </v-row>
+
+  <v-row>
+    <v-spacer />
+
+    <v-col v-for="member of band.members" cols="3">
+      <card-with-top-image
+        :title="member.name"
+        :image="'artists/' + member.image"
+        :link="false"
+      />
+    </v-col>
+
+    <v-spacer />
+  </v-row>
+</template>

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

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { BandModel } from '@/data/models/acts/bandModel';
+import { dateStringToHumanReadableString } from '@/scripts/dateTimeScripts';
+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: {
+    type: BandModel,
+    required: true
+  }
+})
+
+function openTicketOrderDialog(concert: ConcertModel) {
+  showDialog.value = true
+}
+</script>
+
+<template>
+  <v-row>
+    <v-col>
+      <section-divider title="Konzerte" />
+    </v-col>
+  </v-row>
+
+  <v-row v-for="concert of band.tours[0].concerts">
+    <v-col>
+      <card-with-left-image
+        :title="dateStringToHumanReadableString(concert.date)"
+        :image="'http://localhost:3000/static/locations/' + concert.location.image"
+        :link="false"
+      >
+        <v-row>
+          <v-col cols="auto" class="d-flex justify-center align-center px-0">
+            <v-btn
+              icon="mdi-map"
+              variant="text"
+              size="x-large"
+              @click="router.push('/locations/' + concert.location.name.replaceAll(' ', '-').toLowerCase())"
+            />
+          </v-col>
+
+          <v-col>
+            <div class="text-h6">
+              {{ concert.location.name }}
+            </div>
+
+            <div class="text-h6">
+              {{ concert.location.city.name }}
+            </div>
+          </v-col>
+        </v-row>
+
+        <template #append>
+          <div class="pb-3">
+            {{ concert.price.toFixed(2) }} €
+          </div>
+
+          <div>
+            <outlined-button
+              v-if="concert.inStock > 0"
+              prepend-icon="mdi-basket-plus"
+              @click="openTicketOrderDialog(concert)"
+            >
+              {{ $t('add') }}
+            </outlined-button>
+
+            <outlined-button v-else
+              color="red"
+              disabled
+            >
+              {{ $t('soldOut') }}
+            </outlined-button>
+          </div>
+        </template>
+      </card-with-left-image>
+    </v-col>
+  </v-row>
+  
+  <ticket-order-dialog />
+</template>

software/src/pages/events/bandDetailPage/gallerySection.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { BandModel } from '@/data/models/acts/bandModel';
+import sectionDivider from '@/components/sectionDivider.vue';
+
+defineProps({
+  band: {
+    type: BandModel,
+    required: true
+  }
+})
+</script>
+
+<template>
+  <v-row>
+    <v-col>
+      <section-divider title="Fotos" />
+    </v-col>
+  </v-row>
+
+  <v-row>
+    <v-col>
+      <v-carousel
+        show-arrows
+        hide-delimiter-background
+        hide-delimiters
+        height="900"
+      >
+        <template #prev="{ props }">
+          <v-btn
+            variant="text"
+            @click="props.onClick"
+            icon="mdi-chevron-left"
+          />
+        </template>
+
+        <template #next="{ props }">
+          <v-btn
+            variant="text"
+            @click="props.onClick"
+            icon="mdi-chevron-right"
+          />
+        </template>
+
+
+        <v-carousel-item
+          v-for="image in band.images"
+          :src="'http://localhost:3000/static/bands/' + image" 
+          cover
+        />
+      </v-carousel>
+    </v-col>
+  </v-row>
+</template>

software/src/pages/events/bandDetailPage/index.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { useConcertStore } from '@/data/stores/concertStore';
+import { BandModel } from '@/data/models/acts/bandModel';
+import { useRouter } from 'vue-router';
+import bandBanner from './bandBanner.vue';
+import ratingSection from './ratingSection.vue';
+import bandMemberSection from './bandMemberSection.vue';
+import gallerySection from './gallerySection.vue';
+import concertSection from './concertSection.vue';
+
+const router = useRouter()
+
+const concertStore = useConcertStore()
+const band: BandModel = concertStore.bands.find(band =>
+  band.name.replaceAll(' ', '-').toLowerCase() == router.currentRoute.value.params.bandName
+)
+</script>
+
+<template>
+  <band-banner :band="band" />
+
+  <v-container>
+    <v-row>
+      <v-spacer />
+
+      <v-col cols="10">
+        <concert-section :band="band" />
+
+        <band-member-section :band="band" />
+
+        <rating-section :band="band" />
+
+        <gallery-section :band="band" />
+      </v-col>
+
+      <v-spacer />
+    </v-row>
+  </v-container>
+</template>

software/src/pages/events/bandDetailPage/ratingSection.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { BandModel } from '@/data/models/acts/bandModel';
+import { calcRating, calcRatingValues } from '@/scripts/concertScripts';
+import sectionDivider from '@/components/sectionDivider.vue';
+
+defineProps({
+  band: {
+    type: BandModel,
+    required: true
+  }
+})
+</script>
+
+<template>
+  <v-row>
+    <v-col>
+      <section-divider title="Bewertungen" />
+    </v-col>
+  </v-row>
+
+  <v-row>
+    <v-col>
+      <div class="d-flex align-center justify-center flex-column" style="height: 100%;">
+        <div class="text-h2 mt-5">
+          {{ calcRating(band.ratings).toFixed(1) }}
+          <span class="text-h6 ml-n3">/5</span>
+        </div>
+    
+        <v-rating
+          :model-value="calcRating(band.ratings)"
+          color="yellow-darken-3"
+          half-increments
+          size="x-large"
+          readonly
+        />
+
+        <div class="px-3">{{ band.ratings.length }} Bewertungen</div>
+      </div>
+    </v-col>
+
+    <v-col>
+      <v-list>
+        <v-list-item v-for="ratingValue in calcRatingValues(band.ratings)">
+          <template v-slot:prepend>
+            <span>{{ ratingValue.value }}</span>
+            <v-icon class="ml-3 mr-n3" icon="mdi-star" />
+          </template>
+
+          <v-progress-linear
+            :model-value="(ratingValue.count / band.ratings.length) * 100"
+            height="20"
+            color="yellow-darken-3"
+            rounded
+          />
+
+          <template v-slot:append>
+            <span class="d-flex justify-end" style="width: 25px;"> {{ ratingValue.count }} </span>
+          </template>
+        </v-list-item>
+      </v-list>
+    </v-col>
+  </v-row>
+</template>

software/src/pages/events/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>