Ticket Component

This commit is contained in:
2024-10-06 19:30:12 +02:00
parent c050560fba
commit 4a62c7a96b
47 changed files with 365 additions and 219 deletions

View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import cardView from '@/components/cardView.vue';
import cardView from '@/components/basics/cardView.vue';
import { useAccountStore } from '@/data/stores/accountStore';
import { useFeedbackStore } from '@/data/stores/feedbackStore';

View File

@@ -1,7 +1,7 @@
<script setup lang="ts">
import cardView from '@/components/cardView.vue';
import confirmDialog from '@/components/confirmDialog.vue';
import outlinedButton from '@/components/outlinedButton.vue';
import cardView from '@/components/basics/cardView.vue';
import confirmDialog from '@/components/basics/confirmDialog.vue';
import outlinedButton from '@/components/basics/outlinedButton.vue';
import { useAccountStore } from '@/data/stores/accountStore';
import { ref } from 'vue';

View File

@@ -1,9 +1,8 @@
<script setup lang="ts">
import cardView from '@/components/cardView.vue';
import cardView from '@/components/basics/cardView.vue';
import { useAccountStore } from '@/data/stores/accountStore';
import outlinedButton from '@/components/outlinedButton.vue';
import outlinedButton from '@/components/basics/outlinedButton.vue';
import { AddressModel } from '@/data/models/user/addressModel';
import { useFeedbackStore } from '@/data/stores/feedbackStore';
import { getNumberStartRules, getPostalRules, getStringRules } from '@/scripts/validationRules';
const accountStore = useAccountStore()

View File

@@ -3,7 +3,7 @@ import accountDataCard from './accountDataCard.vue';
import accountManagingCard from './accountManagingCard.vue';
import addressesCard from './addressesCard.vue';
import paymentsCard from './paymentsCard.vue';
import OutlinedButton from '@/components/outlinedButton.vue';
import OutlinedButton from '@/components/basics/outlinedButton.vue';
import { useRouter } from 'vue-router';
const router = useRouter()

View File

@@ -1,7 +1,7 @@
<script setup lang="ts">
import cardView from '@/components/cardView.vue';
import cardView from '@/components/basics/cardView.vue';
import { useAccountStore } from '@/data/stores/accountStore';
import outlinedButton from '@/components/outlinedButton.vue';
import outlinedButton from '@/components/basics/outlinedButton.vue';
import { PaymentModel } from '@/data/models/user/paymentModel';
import { getIbanRules, getStringRules } from '@/scripts/validationRules';

View File

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

View File

@@ -1,8 +1,9 @@
<script setup lang="ts">
import { ref } from 'vue';
import cardView from '@/components/cardView.vue';
import outlinedButton from '@/components/outlinedButton.vue';
import cardView from '@/components/basics/cardView.vue';
import outlinedButton from '@/components/basics/outlinedButton.vue';
import { useAccountStore } from '@/data/stores/accountStore';
import { useRouter } from 'vue-router';
const accountStore = useAccountStore()
const showRegisterCard = defineModel("showRegisterCard", { type: Boolean, default: false })
@@ -11,6 +12,7 @@ const username = ref("duranduran")
const password = ref("H4nn0ver")
const usernameWrong = ref(false)
const passwordWrong = ref(false)
const router = useRouter()
async function startLogin() {
loginInProgress.value = true
@@ -29,6 +31,10 @@ async function startLogin() {
password.value != null && password.value.length > 0)
{
await accountStore.login(username.value, password.value)
if (accountStore.userAccount.id != undefined) {
router.push("/account/home")
}
// todo: Route to account home page
}

View File

@@ -1,8 +1,8 @@
<script setup lang="ts">
import { AccountModel } from '@/data/models/user/accountModel';
import { ref } from 'vue';
import cardView from '@/components/cardView.vue';
import outlinedButton from '@/components/outlinedButton.vue';
import cardView from '@/components/basics/cardView.vue';
import outlinedButton from '@/components/basics/outlinedButton.vue';
import { useAccountStore } from '@/data/stores/accountStore';
import { useFeedbackStore } from '@/data/stores/feedbackStore';
import { getEmailRules, getPasswordRules, getStringRules } from '@/scripts/validationRules';

View File

@@ -1,31 +1,20 @@
<script setup lang="ts">
import { useAccountStore } from '@/data/stores/accountStore';
import ordersCard from './orderItem.vue';
import orderItem from './orderItem.vue';
import { useRouter } from 'vue-router';
import outlinedButton from '@/components/outlinedButton.vue';
import outlinedButton from '@/components/basics/outlinedButton.vue';
import { getUserOrders } from '@/data/api/orderApi';
import { ref } from 'vue';
import { OrderModel } from '@/data/models/ordering/orderModel';
const accountStore = useAccountStore()
const router = useRouter()
const orders = ref<Array<OrderModel>>([])
function getDotColor(order, step: number) {
if (order.shippingProgress == step)
{
return "orange"
} else if (order.shippingProgress >= step)
{
return "green"
} else
{
return "grey"
}
}
function formatDateTimeString(string: string) {
let date = new Date(string)
return date.getDate() + '.' + (date.getMonth() + 1) + '.' + date.getFullYear() + ', ' +
date.getHours() + ':' + date.getMinutes()
}
getUserOrders(accountStore.userAccount.id)
.then(result => {
orders.value = result.data
})
</script>
<template>
@@ -39,11 +28,11 @@ function formatDateTimeString(string: string) {
</v-row>
<v-row
v-if="accountStore.orders.length > 0"
v-for="order in accountStore.orders"
v-if="orders.length > 0"
v-for="order in orders"
>
<v-col>
<orders-card :order="order" />
<order-item :order="order" />
</v-col>
</v-row>

View File

@@ -1,13 +1,17 @@
<script setup lang="ts">
import cardView from '@/components/cardView.vue';
import cardView from '@/components/basics/cardView.vue';
import { OrderModel } from '@/data/models/ordering/orderModel';
import { useAccountStore } from '@/data/stores/accountStore';
import concertListItem from '@/components/pageParts/concertListItem.vue';
import ticketListItem from '@/components/pageParts/ticketListItem.vue';
const accountStore = useAccountStore()
defineProps({
order: OrderModel
order: OrderModel,
loading: {
type: Boolean,
default: false
}
})
function formatDateTimeString(string: string) {
@@ -21,7 +25,7 @@ function formatDateTimeString(string: string) {
<template>
<card-view
:title="$t('orderedAt') + ' ' + formatDateTimeString(order.orderedAt) + ' ' + $t('oclock')"
:subtitle="$t('totalPrice') + ': ' + accountStore.getOrderTotalPrice(order.id) + ' €'"
variant="outlined"
>
<v-row>
<v-col>
@@ -48,18 +52,29 @@ function formatDateTimeString(string: string) {
</v-col>
</v-row>
<v-row>
<v-row v-for="ticket of order.tickets">
<v-col>
<ticket-list-item
:concert="ticket.concert"
:image="ticket.concert.event.image"
:seat-group="ticket.seat.seatRow.seatGroup.name"
:seat-row="ticket.seat.seatRow.row"
:seat="ticket.seat.seatNr"
:standing-area="ticket.seat.seatRow.seatGroup.standingArea"
/>
</v-col>
</v-row>
<v-row>
<!-- <v-row>
<v-col>
<v-table class="bg-surface-light">
<thead>
<tr>
<th>{{ $t('quantity') }}</th>
<th>{{ $t('product.brand') }}</th>
<th>{{ $t('product.productName') }}</th>
<th>{{ $t('event') }}</th>
<th>{{ $t('seatGroup') }}</th>
<th>{{ $t('seatRow') }}</th>
<th>{{ $t('seat') }}</th>
<th>{{ $t('product.productPrice') }}</th>
</tr>
</thead>
@@ -73,6 +88,6 @@ function formatDateTimeString(string: string) {
</tbody>
</v-table>
</v-col>
</v-row>
</v-row> -->
</card-view>
</template>

View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import cardView from '@/components/cardView.vue';
import cardView from '@/components/basics/cardView.vue';
// import { useProductStore } from '@/data/stores/productStore';
// const productStore = useProductStore()

View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import cardView from '@/components/cardView.vue';
import cardView from '@/components/basics/cardView.vue';
const headers = [
{ title: "Name", value: "name" },

View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import cardView from '@/components/cardView.vue';
import cardView from '@/components/basics/cardView.vue';
import productEditDialog from './productEditDialog.vue';
import { ref } from 'vue';

View File

@@ -1,7 +1,7 @@
<script setup lang="ts">
import actionDialog from '@/components/actionDialog.vue';
import actionDialog from '@/components/basics/actionDialog.vue';
import { ProductModel } from '@/data/models/productModel';
import outlinedButton from '@/components/outlinedButton.vue';
import outlinedButton from '@/components/basics/outlinedButton.vue';
import { useProductStore } from '@/data/stores/productStore';
import { ModelRef } from 'vue';

View File

@@ -1,8 +1,8 @@
<script setup lang="ts">
import { useBasketStore } from '@/data/stores/basketStore';
import cardView from '@/components/cardView.vue';
import cardView from '@/components/basics/cardView.vue';
import orderingDialog from './orderingDialog.vue';
import outlinedButton from '@/components/outlinedButton.vue';
import outlinedButton from '@/components/basics/outlinedButton.vue';
import { ref } from 'vue';
import { useAccountStore } from '@/data/stores/accountStore';
import concertListItem from '@/components/pageParts/concertListItem.vue';

View File

@@ -1,7 +1,7 @@
<script setup lang="ts">
import actionDialog from '@/components/actionDialog.vue';
import actionDialog from '@/components/basics/actionDialog.vue';
import { useBasketStore } from '@/data/stores/basketStore';
import outlinedButton from '@/components/outlinedButton.vue';
import outlinedButton from '@/components/basics/outlinedButton.vue';
import { ModelRef, ref } from 'vue';
import { useAccountStore } from '@/data/stores/accountStore';

View File

@@ -1,6 +1,6 @@
<script setup lang="ts">
import { BandModel } from '@/data/models/acts/bandModel';
import cardWithTopImage from '@/components/cardWithTopImage.vue';
import cardWithTopImage from '@/components/basics/cardViewTopImage.vue';
import { useFeedbackStore } from '@/data/stores/feedbackStore';
const feedbackStore = useFeedbackStore()

View File

@@ -6,7 +6,7 @@ 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/sectionDivider.vue';
import sectionDivider from '@/components/basics/sectionDivider.vue';
import { useShoppingStore } from '@/data/stores/shoppingStore';
import { ref } from 'vue';
import { useFeedbackStore } from '@/data/stores/feedbackStore';

View File

@@ -1,6 +1,6 @@
<script setup lang="ts">
import cardView from '@/components/cardView.vue';
import outlinedButton from '@/components/outlinedButton.vue';
import cardView from '@/components/basics/cardView.vue';
import outlinedButton from '@/components/basics/outlinedButton.vue';
import { GenreModel } from '@/data/models/acts/genreModel';
import { CityModel } from '@/data/models/locations/cityModel';
import { useShoppingStore } from '@/data/stores/shoppingStore';

View File

@@ -35,12 +35,20 @@ shoppingStore.getEvents()
v-else-if="shoppingStore.events.length > 0"
v-for="event of shoppingStore.events"
:image="event.image"
:title="event.band.name + ' - ' + event.name"
@click="router.push('/bands/' + event.band.name.replaceAll(' ', '-').toLowerCase())"
>
<template #description>
{{ createDateRangeString(event) }}
<div>{{ event.concerts.length }} {{ $t('concert', event.concerts.length) }}</div>
<template #content>
<div class="text-h4">
{{ event.band.name + ' - ' + event.name }}
</div>
<div class="text-h5">
{{ createDateRangeString(event) }}
</div>
<div class="text-h5">
{{ event.concerts.length }} {{ $t('concert', event.concerts.length) }}
</div>
</template>
<template #append-text>

View File

@@ -5,12 +5,12 @@ import { SeatGroupModel } from '@/data/models/locations/seatGroupModel';
import { getConcert } from '@/data/api/concertApi';
import { useFeedbackStore } from '@/data/stores/feedbackStore';
import { useRouter } from 'vue-router';
import sectionDivider from '@/components/sectionDivider.vue';
import sectionDivider from '@/components/basics/sectionDivider.vue';
import { useBasketStore } from '@/data/stores/basketStore';
import concertListItem from '@/components/pageParts/concertListItem.vue';
import { ConcertModel } from '@/data/models/acts/concertModel';
import { dateStringToHumanReadableString } from '@/scripts/dateTimeScripts';
import outlinedButton from '@/components/outlinedButton.vue';
import outlinedButton from '@/components/basics/outlinedButton.vue';
const router = useRouter()
const seatGroups = ref<Array<SeatGroupModel>>()

View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import OutlinedButton from '@/components/outlinedButton.vue';
import OutlinedButton from '@/components/basics/outlinedButton.vue';
import { useConcertStore } from '@/data/stores/concertStore';
import { useRouter } from 'vue-router';
@@ -32,7 +32,7 @@ const router = useRouter()
<v-carousel-item
v-for="band in concertStore.bands"
:src="'http://localhost:3000/static/bands/' + band.imageMembers"
:src="'http://localhost:3000/static/' + band.imageMembers"
cover
>
<v-card

View File

@@ -1,10 +1,10 @@
<script setup lang="ts">
import { useConcertStore } from '@/data/stores/concertStore';
import highlightCarousel from './highlightCarousel.vue';
import sectionDivider from '@/components/sectionDivider.vue';
import cardWithTopImage from '@/components/cardWithTopImage.vue';
import sectionDivider from '@/components/basics/sectionDivider.vue';
import cardWithTopImage from '@/components/basics/cardViewTopImage.vue';
import { lowestTicketPrice } from '@/scripts/concertScripts';
import OutlinedButton from '@/components/outlinedButton.vue';
import OutlinedButton from '@/components/basics/outlinedButton.vue';
import { useRouter } from 'vue-router';
import { useFeedbackStore } from '@/data/stores/feedbackStore';
import { ref } from 'vue';

View File

@@ -1,7 +1,7 @@
<script setup lang="ts">
import { LocationModel } from '@/data/models/locations/locationModel';
import { useRouter } from 'vue-router';
import sectionDivider from '@/components/sectionDivider.vue';
import sectionDivider from '@/components/basics/sectionDivider.vue';
import { dateStringToHumanReadableString } from '@/scripts/dateTimeScripts';
import seatPlanMap from '@/components/seatPlanMap/seatPlanMap.vue';
import { useShoppingStore } from '@/data/stores/shoppingStore';

View File

@@ -1,6 +1,6 @@
<script setup lang="ts">
import sectionDivider from '@/components/sectionDivider.vue';
import cardWithTopImage from '@/components/cardWithTopImage.vue';
import sectionDivider from '@/components/basics/sectionDivider.vue';
import cardWithTopImage from '@/components/basics/cardViewTopImage.vue';
import { useRouter } from 'vue-router';
import { useShoppingStore } from '@/data/stores/shoppingStore';
import { useFeedbackStore } from '@/data/stores/feedbackStore';

View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import cardView from '@/components/cardView.vue';
import cardView from '@/components/basics/cardView.vue';
const props = defineProps({
exerciseGroup: String,

View File

@@ -2,7 +2,7 @@
import { ThemeEnum } from '@/data/enums/themeEnums';
import { useTheme } from 'vuetify/lib/framework.mjs';
import { i18n } from '@/plugins/i18n';
import cardView from '@/components/cardView.vue';
import cardView from '@/components/basics/cardView.vue';
import { usePreferencesStore } from '@/data/stores/preferencesStore';
const preferencesStore = usePreferencesStore()

View File

@@ -1,10 +1,10 @@
<script setup lang="ts">
import { BannerStateEnum } from '@/data/enums/bannerStateEnum';
import { useFeedbackStore } from '@/data/stores/feedbackStore';
import cardView from '@/components/cardView.vue';
import outlinedButton from '@/components/outlinedButton.vue';
import cardView from '@/components/basics/cardView.vue';
import outlinedButton from '@/components/basics/outlinedButton.vue';
import { ref } from 'vue';
import confirmDialog from '@/components/confirmDialog.vue';
import confirmDialog from '@/components/basics/confirmDialog.vue';
import { getServerState, resetDatabase } from '@/data/api/mainApi';
import { ServerStateEnum } from '@/data/enums/serverStateEnum';