tobias/eventmaster
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 4 Wiki Activity

Filterable tours

Browse Source
This commit is contained in:
Tobias Zoghaib
2024-09-29 14:28:29 +02:00
parent 0616409f14
commit a6ca7eedde
36 changed files with 265 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
software/src/pages/account/accountDataPage/addressesCard.vue
View File

@@ -2,7 +2,7 @@
import cardView from '@/components/cardView.vue';
import { useAccountStore } from '@/data/stores/accountStore';
import outlinedButton from '@/components/outlinedButton.vue';
import { AddressModel } from '@/data/models/addressModel';
import { AddressModel } from '@/data/models/user/addressModel';
import { useFeedbackStore } from '@/data/stores/feedbackStore';
import { getNumberStartRules, getPostalRules, getStringRules } from '@/scripts/validationRules';

2
software/src/pages/account/accountDataPage/paymentsCard.vue
View File

@@ -2,7 +2,7 @@
import cardView from '@/components/cardView.vue';
import { useAccountStore } from '@/data/stores/accountStore';
import outlinedButton from '@/components/outlinedButton.vue';
import { PaymentModel } from '@/data/models/paymentModel';
import { PaymentModel } from '@/data/models/user/paymentModel';
import { getIbanRules, getStringRules } from '@/scripts/validationRules';
const accountStore = useAccountStore()

2
software/src/pages/account/loginPage/registerForm.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { AccountModel } from '@/data/models/accountModel';
import { AccountModel } from '@/data/models/user/accountModel';
import { ref } from 'vue';
import cardView from '@/components/cardView.vue';
import outlinedButton from '@/components/outlinedButton.vue';

2
software/src/pages/account/ordersPage/ordersCard.vue
View File

@@ -1,6 +1,6 @@
<script setup lang="ts">
import cardView from '@/components/cardView.vue';
import { OrderModel } from '@/data/models/orderModel';
import { OrderModel } from '@/data/models/ordering/orderModel';
import { useAccountStore } from '@/data/stores/accountStore';
const accountStore = useAccountStore()

2
software/src/pages/shows/tourDetailPage/index.vue → software/src/pages/shows/bandDetailPage/index.vue
View File

@@ -2,5 +2,5 @@
</script>
<template>
Tour Detail
</template>

2
software/src/pages/shows/ticketsPage/filterNavDrawer.vue
View File

@@ -1,8 +1,6 @@
<script setup lang="ts">
import { SortOrder } from '@/data/enums/sortOrderEnum';
import { useTourStore } from '@/data/stores/tourStore';
const tourStore = useTourStore()
const sortOrderItems = Object.values(SortOrder)
</script>

6
software/src/pages/shows/ticketsPage/index.vue
View File

@@ -2,9 +2,7 @@
import tourCard from "./tourCard.vue"
import { ref, watch } from "vue";
import filterNavDrawer from "./filterNavDrawer.vue";
import { useTourStore } from "@/data/stores/tourStore";
const tourStore = useTourStore()
const showProductDetails = ref(false)
// const dialogProduct = ref(new ProductModel())
@@ -20,7 +18,7 @@ const showProductDetails = ref(false)
</script>
<template>
<v-container max-width="1200">
<!-- <v-container max-width="1200">
<v-row dense>
<v-col
v-if="tourStore.tours.length > 0"
@@ -39,7 +37,7 @@ const showProductDetails = ref(false)
/>
</v-col>
</v-row>
</v-container>
</v-container> -->
<filter-nav-drawer />

44
software/src/pages/shows/ticketsPage/productDetailsDialog.vue
View File

@@ -2,43 +2,40 @@
import { VNumberInput } from 'vuetify/labs/VNumberInput'
import { ModelRef, ref, watch } from 'vue';
import { useBasketStore } from '@/data/stores/basketStore';
import { calcPrice } from '@/scripts/productScripts';
import ActionDialog from '@/components/actionDialog.vue'
import { ProductModel } from '@/data/models/productModel';
import outlinedButton from '@/components/outlinedButton.vue';
const props = defineProps({
product: {
type: ProductModel,
default: new ProductModel()
}
})
// const props = defineProps({
// product: {
// type: ProductModel,
// default: new ProductModel()
// }
// })
const showDialog: ModelRef<boolean> = defineModel()
const nrOfArticles = ref(1)
const basketStore = useBasketStore()
const selectedImage = ref("")
// const showDialog: ModelRef<boolean> = defineModel()
// const nrOfArticles = ref(1)
// const basketStore = useBasketStore()
// const selectedImage = ref("")
function addProductToBasket() {
basketStore.addItemToBasket(props.product, nrOfArticles.value)
nrOfArticles.value = 1
showDialog.value = false
}
// function addProductToBasket() {
// basketStore.addItemToBasket(props.product, nrOfArticles.value)
// nrOfArticles.value = 1
// showDialog.value = false
// }
watch(() => props.product.images, () => {
selectedImage.value = 'http://localhost:3000/static/' + props.product.images[0]
})
// watch(() => props.product.images, () => {
// selectedImage.value = 'http://localhost:3000/static/' + props.product.images[0]
// })
</script>
<template>
<action-dialog
<!-- <action-dialog
:title="product.brand.name + ': ' + product.name"
:icon="product.category.icon"
:subtitle="product.category.name"
v-model="showDialog"
>
<v-row>
<!-- Image col -->
<v-col>
<v-row>
<v-col class="py-0">
@@ -66,7 +63,6 @@ watch(() => props.product.images, () => {
</v-col>
<!-- Product description col -->
<v-col>
<v-row>
<v-col class="text-h6 pt-0">
@@ -157,5 +153,5 @@ watch(() => props.product.images, () => {
{{ $t('addToBasket') }}
</outlined-button>
</template>
</action-dialog>
</action-dialog> -->
</template>

19
software/src/pages/shows/ticketsPage/tourCard.vue
View File

@@ -1,18 +1,17 @@
<script setup lang="ts">
import { TourModel } from '@/data/models/tourModel';
import cardView from '@/components/cardView.vue';
import OutlinedButton from '@/components/outlinedButton.vue';
defineProps({
tour: {
required: true,
type: TourModel
}
})
// defineProps({
// tour: {
// required: true,
// type: TourModel
// }
// })
</script>
<template>
<card-view
<!-- <card-view
:title="tour.band.name"
:subtitle="tour.name"
:prepend-image="'http://127.0.0.1:3000/static/bands/' + tour.band.images[0]"
@@ -24,7 +23,7 @@ defineProps({
<OutlinedButton>
{{ tour.shows.length }} {{ $t('tours.concert', tour.shows.length) }}
</OutlinedButton>
</template>
</template> -->
<!-- <template> -->
<!-- <div>
@@ -75,7 +74,7 @@ defineProps({
</div>
</div> -->
<!-- </template> -->
</card-view>
<!-- </card-view> -->
</template>
<style scoped>

87
software/src/pages/shows/toursPage/filterBar.vue Normal file
View File

@@ -0,0 +1,87 @@
<script setup lang="ts">
import cardView from '@/components/cardView.vue';
import { useConcertStore } from '@/data/stores/concertStore';
const concertStore = useConcertStore()
</script>
<template>
<card-view
variant="tonal"
>
<v-row>
<v-col cols="3">
<v-select
variant="outlined"
:items="concertStore.cities"
v-model="concertStore.cityFilter"
label="Stadt"
density="compact"
class="mb-n5"
:clearable="concertStore.cityFilter != null && concertStore.cityFilter.id != undefined"
base-color="secondary"
color="secondary"
>
<template #item="{ props, item }">
<v-list-item v-bind="props" :title="item.raw.name" />
</template>
<template #selection="{ item }">
<v-list-item :title="item.raw.name" />
</template>
</v-select>
</v-col>
<v-col cols="auto" class="d-flex justify-center align-center px-0">
<v-icon icon="mdi-chevron-right" />
</v-col>
<v-col cols="4">
<v-select
variant="outlined"
:items="concertStore.filteredLocations"
v-model="concertStore.locationFilter"
:label="$t('concerts.location')"
density="compact"
:clearable="concertStore.locationFilter != null && concertStore.locationFilter.id != undefined"
:disabled="concertStore.cityFilter == null || concertStore.cityFilter.id == undefined"
class="mb-n5"
base-color="secondary"
color="secondary"
>
<template #item="{ props, item }">
<v-list-item v-bind="props" :title="item.raw.name" />
</template>
<template #selection="{ item }">
<v-list-item :title="item.raw.name" />
</template>
</v-select>
</v-col>
<v-divider vertical />
<v-col cols="4">
<v-select
variant="outlined"
:items="concertStore.genres"
v-model="concertStore.genreFilter"
label="Genre"
density="compact"
:clearable="concertStore.genreFilter != null && concertStore.genreFilter.id != undefined"
class="mb-n5"
base-color="secondary"
color="secondary"
>
<template #item="{ props, item }">
<v-list-item v-bind="props" :title="item.raw.name" />
</template>
<template #selection="{ item }">
<v-list-item :title="item.raw.name" />
</template>
</v-select>
</v-col>
</v-row>
</card-view>
</template>

23
software/src/pages/shows/concertsPage/index.vue → software/src/pages/shows/toursPage/index.vue
View File

@@ -2,6 +2,7 @@
import cardWithLeftImage from '@/components/cardWithLeftImage.vue';
import { useConcertStore } from '@/data/stores/concertStore';
import { createDateRangeString, lowestTicketPrice } from '@/scripts/concertScripts';
import filterBar from './filterBar.vue';
const concertStore = useConcertStore()
</script>
@@ -12,14 +13,23 @@ const concertStore = useConcertStore()
<v-spacer />
<v-col cols="10">
<v-row v-for="tour of concertStore.tours">
<v-row>
<v-col>
<filter-bar />
</v-col>
</v-row>
<v-row
v-if="concertStore.filteredTours.length > 0"
v-for="tour of concertStore.filteredTours"
>
<v-col>
<card-with-left-image
:title="tour.band.name + ' - ' + tour.name"
:image="'http://localhost:3000/static/tours/' + tour.image"
>
{{ createDateRangeString(tour) }}
<div>{{ tour.shows.length }} {{ $t('tours.concert', tour.shows.length) }}</div>
<div>{{ tour.concerts.length }} {{ $t('tours.concert', tour.concerts.length) }}</div>
<template #append>
<div class="d-flex justify-center align-center text-h5" style="height: 100%;">
@@ -29,6 +39,15 @@ const concertStore = useConcertStore()
</card-with-left-image>
</v-col>
</v-row>
<v-row v-else>
<v-col>
<v-empty-state
title="Keine Konzerte gefunden"
icon="mdi-magnify"
/>
</v-col>
</v-row>
</v-col>
<v-spacer />