Move software files one directory up, Readme

src/pages/concerts/concertBookingPage/index.vue

@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import seatPlanMap from '@/components/seatPlanMap/seatPlanMap.vue';
+import { useRouter } from 'vue-router';
+import sectionDivider from '@/components/basics/sectionDivider.vue';
+import { useBasketStore } from '@/stores/basket.store';
+import concertListItem from '@/components/pageParts/concertListItem.vue';
+import outlinedButton from '@/components/basics/outlinedButton.vue';
+import { useConcertStore } from '@/stores/concert.store';
+import ticketListItem from '@/components/pageParts/ticketListItem.vue';
+import circularProgressIndeterminate from '@/components/basics/circularProgressIndeterminate.vue';
+import { onMounted, watch } from 'vue';
+
+const router = useRouter()
+const basketStore = useBasketStore()
+const concertStore = useConcertStore()
+
+onMounted(async () => {
+  concertStore.getConcert(
+    String(router.currentRoute.value.params.locationUrl), 
+    String(router.currentRoute.value.params.date)
+  )
+})
+
+watch(() => router.currentRoute.value.params.locationUrl, () => {
+  concertStore.getConcert(
+    String(router.currentRoute.value.params.locationUrl), 
+    String(router.currentRoute.value.params.date)
+  )
+})
+
+watch(() => router.currentRoute.value.params.date, () => {
+  concertStore.getConcert(
+    String(router.currentRoute.value.params.locationUrl), 
+    String(router.currentRoute.value.params.date)
+  )
+})
+</script>
+
+<template>
+  <v-container>
+    <v-row>
+      <v-spacer />
+
+      <v-col cols="10">
+        <v-row>
+          <v-col>
+            <section-divider :title="$t('concert.selectedConcert')"  />
+          </v-col>
+        </v-row>
+
+        <v-row>
+          <v-col>
+            <concert-list-item
+              :concert="concertStore.concert"
+              :band="concertStore.concert.band"
+              :location="concertStore.concert.location"
+              :loading="concertStore.fetchInProgress"
+              :link="false"
+              :title="concertStore.concert.location.city.name"
+              :show-button="false"
+            />
+          </v-col>
+        </v-row>
+        <v-row>
+          <v-col>
+            <section-divider :title="$t('location.seat.seatSelection')" />
+          </v-col>
+        </v-row>
+
+        <v-row >
+          <v-col class="text-center" v-if="concertStore.fetchInProgress">
+            <circular-progress-indeterminate />
+
+            <div class="pt-5 text-h3">
+              {{ $t('misc.loading') }}...
+            </div>
+          </v-col>
+
+          <v-col v-else>
+            <seat-plan-map
+              :concert="concertStore.concert"
+              :seat-groups="concertStore.concert.location.seatGroups"
+              :location="concertStore.concert.location"
+            />
+          </v-col>
+        </v-row>
+
+
+        <v-row>
+          <v-col>
+            <section-divider :title="$t('order.orderSummary')" />
+          </v-col>
+        </v-row>
+
+        <v-row>
+          <v-col>
+            <v-list >
+              <v-list-item v-for="seat in basketStore.selectedSeats" >
+                <ticket-list-item
+                  :concert="concertStore.concert"
+                  :band="concertStore.concert.band"
+                  :location="concertStore.concert.location"
+                  :city="concertStore.concert.location.city"
+                  :image="concertStore.concert.image"
+                  :seat-group="seat.seatGroupName"
+                  :seat-nr="seat.seat.seatNr"
+                  :seat-row="seat.seatRow"
+                />
+              </v-list-item>
+            </v-list>
+          </v-col>
+        </v-row>
+
+        <v-row class="pb-5">
+          <outlined-button todo
+            prepend-icon="mdi-basket-plus"
+            @click="basketStore.moveSeatSelectionsToBasket(concertStore.concert.band); 
+              router.push('/basket')"
+            :disabled="basketStore.selectedSeats.length == 0"
+            block
+          >
+            {{ $t('basket.addToBasket') }}
+          </outlined-button>
+        </v-row>
+      </v-col>
+
+      <v-spacer />
+    </v-row>
+  </v-container>
+</template>

src/pages/concerts/concertsPage/concertFilterbar.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import cardView from '@/components/basics/cardView.vue';
+import outlinedButton from '@/components/basics/outlinedButton.vue';
+import { CityModel } from '@/data/models/locations/cityModel';
+import { LocationModel } from '@/data/models/locations/locationModel';
+import { useConcertStore } from '@/stores/concert.store';
+import { useLocationStore } from '@/stores/location.store';
+
+const concertStore = useConcertStore()
+const locationStore = useLocationStore()
+
+locationStore.getLocations()
+
+function itemProps(item: CityModel) {
+  return {
+    title: item.name
+  }
+}
+</script>
+
+<template>
+  <card-view
+    :title="$t('misc.actions.filtering')"
+    icon="mdi-filter"
+  >
+    <v-row>
+      <v-col>
+        <v-select
+          v-model="concertStore.filteredCities"
+          :items="locationStore.cities"
+          variant="outlined"
+          :label="$t('location.city', 2)"
+          :item-props="itemProps"
+          chips
+          clearable
+          hide-details
+          multiple
+        />
+      </v-col>
+
+      <v-col cols="auto">
+        <outlined-button
+          @click="concertStore.getConcerts"
+          height="100%"
+        >
+          {{ $t('misc.actions.filtering') }}
+        </outlined-button>
+      </v-col>
+    </v-row>
+  </card-view>
+</template>

src/pages/concerts/concertsPage/concertsListSection.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { useConcertStore } from '@/stores/concert.store';
+import concertListItem from '@/components/pageParts/concertListItem.vue';
+import cardViewHorizontal from '@/components/basics/cardViewHorizontal.vue';
+import sectionDivider from '@/components/basics/sectionDivider.vue';
+import concertFilterbar from './concertFilterbar.vue';
+
+const concertStore = useConcertStore()
+</script>
+
+<template>
+  <div
+    v-if="concertStore.fetchInProgress"
+  >
+    <section-divider :loading="true" />
+    <v-row v-for="i in 3">
+      <v-col>
+        <card-view-horizontal :loading="true" />
+      </v-col>
+    </v-row>
+  </div>
+
+  <div
+    v-else-if="concertStore.concerts.length > 0"
+    v-for="(concert, index) of concertStore.concerts"
+  >
+    <div v-if="concert.offered">
+      <v-row 
+        v-if="index == 0 || 
+        new Date(concertStore.concerts[index - 1].date).getMonth() != 
+        new Date(concertStore.concerts[index].date).getMonth()"
+      >
+        <v-col>
+          <section-divider
+            :title="new Date(concert.date).toLocaleString('default', { month: 'long' }) + ' ' + new Date(concert.date).getFullYear()"
+          />
+        </v-col>
+      </v-row>
+
+      <v-row>
+        <v-col>
+          <concert-list-item
+            :concert="concert"
+            :band="concert.band"
+            :location="concert.location"
+          />
+        </v-col>
+      </v-row>
+    </div>
+  </div>
+</template>

src/pages/concerts/concertsPage/index.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { useConcertStore } from '@/stores/concert.store';
+import concertFilterbar from './concertFilterbar.vue';
+import ConcertsListSection from './concertsListSection.vue';
+import { onMounted } from 'vue';
+
+const concertStore = useConcertStore()
+
+onMounted(async () => {
+  concertStore.getConcerts()
+})
+</script>
+
+<template>
+  <v-container>
+    <v-row>
+      <v-spacer />
+
+      <v-col cols="10">
+        <v-row>
+          <v-col>
+            <concert-filterbar />
+          </v-col>
+        </v-row>
+
+        <concerts-list-section />
+      </v-col>
+
+      <v-spacer />
+    </v-row>
+  </v-container>
+</template>