Remove EventTable in database, redesign frontend URL paths

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

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import cardWithTopImage from '@/components/basics/cardViewTopImage.vue';
+import { useFeedbackStore } from '@/data/stores/feedbackStore';
+import { BandApiModel } from '@/data/models/acts/bandApiModel';
+
+const feedbackStore = useFeedbackStore()
+
+defineProps({
+  band: {
+    type: BandApiModel,
+    required: true
+  }
+})
+</script>
+
+<template>
+  <v-row v-if="feedbackStore.fetchDataFromServerInProgress" >
+    <v-col cols="3" v-for="i in 4">
+      <card-with-top-image :loading="true" />
+    </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=" member.image"
+        :link="false"
+      />
+    </v-col>
+
+    <v-spacer />
+  </v-row>
+</template>

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

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router';
+import { useFeedbackStore } from '@/data/stores/feedbackStore';
+import concertListItem from '@/components/pageParts/concertListItem.vue';
+import { ConcertApiModel } from '@/data/models/acts/concertApiModel';
+import { BandApiModel } from '@/data/models/acts/bandApiModel';
+import { EventApiModel } from '@/data/models/acts/eventApiModel';
+
+const router = useRouter()
+const feedbackStore = useFeedbackStore()
+
+defineProps({
+  band: BandApiModel,
+  events: Array<EventApiModel>
+})
+</script>
+
+<template>
+  <v-row v-if="feedbackStore.fetchDataFromServerInProgress" v-for="i in 3">
+    <v-col>
+      <!-- <concert-list-item
+        :loading="true" /> -->
+    </v-col>
+  </v-row>
+
+  <div v-else v-for="event of events">
+    <v-row v-for="concert of event.concerts">
+      <v-col>
+        <concert-list-item
+          :concert="concert"
+          :title="concert.location.city.name"
+          :link="concert.inStock > 0"
+          :onClick="() => router.push('/concert/' + concert.id)"
+        >
+          <template #description>
+            <div>
+              {{ concert.location.name }}
+            </div>
+
+            <div>
+              {{ band.name }} - {{ band.events[0].name }}
+            </div>
+          </template>
+        </concert-list-item>
+      </v-col>
+    </v-row>
+  </div>
+</template>

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

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { BandModel } from '@/data/models/acts/bandModel';
+import { useFeedbackStore } from '@/data/stores/feedbackStore';
+
+const feedbackStore = useFeedbackStore()
+
+defineProps({
+  band: {
+    type: BandModel,
+    required: true
+  }
+})
+</script>
+
+<template>
+  <v-row>
+    <v-col>
+      <v-skeleton-loader
+        type="image"
+        :loading="feedbackStore.fetchDataFromServerInProgress"
+      >
+        <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/' + image" 
+            cover
+          />
+        </v-carousel>
+      </v-skeleton-loader>
+    </v-col>
+  </v-row>
+</template>

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

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router';
+import ratingSection from './ratingSection.vue';
+import bandMemberSection from './bandMemberSection.vue';
+import gallerySection from './gallerySection.vue';
+import concertSection from './concertSection.vue';
+import heroImage from '@/components/pageParts/heroImage.vue';
+import sectionDivider from '@/components/basics/sectionDivider.vue';
+import { useShoppingStore } from '@/data/stores/shoppingStore';
+import { ref } from 'vue';
+import { useFeedbackStore } from '@/data/stores/feedbackStore';
+import { getBand } from '@/data/api/bandApi';
+import { BandApiModel } from '@/data/models/acts/bandApiModel';
+import { genre } from 'backend/routes/genre.routes';
+
+const router = useRouter()
+const shoppingStore = useShoppingStore()
+const feedbackStore = useFeedbackStore()
+const band = ref<BandApiModel>(new BandApiModel())
+
+feedbackStore.fetchDataFromServerInProgress = true
+
+getBand(String(router.currentRoute.value.params.bandName).replaceAll('-', ' '))
+  .then(result => {
+    band.value = result.data
+    feedbackStore.fetchDataFromServerInProgress = false
+  })
+</script>
+
+<template>
+  <hero-image
+    :image="band.imageMembers"
+    :logo="band.logo"
+    :title="band.name"
+    :chips="band.genres.map(genre => genre.name)"
+    :description="band.descriptionDe"
+    :loading="feedbackStore.fetchDataFromServerInProgress"
+  />
+
+  <v-container>
+    <v-row>
+      <v-spacer />
+
+      <v-col cols="10">
+        <v-row>
+          <v-col>
+            <section-divider :title="$t('concert', 2)" />
+          </v-col>
+        </v-row>
+
+        <concert-section
+          :band="band"
+          :events="band.events"
+        />
+
+        <v-row>
+          <v-col>
+            <section-divider :title="$t('bandMember')" />
+          </v-col>
+        </v-row>
+
+        <band-member-section :band="band" />
+        
+
+        <v-row>
+          <v-col>
+            <section-divider :title="$t('rating', 2)" />
+          </v-col>
+        </v-row>
+
+        <rating-section :ratings="band.ratings" />
+
+
+        <v-row>
+          <v-col>
+            <section-divider :title="$t('image', 2)" />
+          </v-col>
+        </v-row>
+
+        <gallery-section :band="band" />
+      </v-col>
+
+      <v-spacer />
+    </v-row>
+  </v-container>
+</template>

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

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { BandApiModel } from '@/data/models/acts/bandApiModel';
+import { RatingModel } from '@/data/models/acts/ratingModel';
+import { calcRating, calcRatingValues } from '@/scripts/concertScripts';
+
+defineProps({
+  ratings: {
+    type: Array<RatingModel>,
+    required: true
+  }
+})
+</script>
+
+<template>
+  <v-row>
+    <v-col>
+      <div class="d-flex align-center justify-center flex-column" style="height: 100%;">
+        <div class="text-h2 mt-5">
+          {{ calcRating(ratings).toFixed(1) }}
+          <span class="text-h6 ml-n3">/5</span>
+        </div>
+    
+        <v-rating
+          :model-value="calcRating(ratings)"
+          color="yellow-darken-3"
+          half-increments
+          size="x-large"
+          readonly
+        />
+
+        <div class="px-3 text-h6">{{ ratings.length }} {{ $t('rating', ratings.length) }}</div>
+      </div>
+    </v-col>
+
+    <v-col>
+      <v-list>
+        <v-list-item v-for="ratingValue in calcRatingValues(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 / 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/bands/bandsPage/index.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  
+</template>