Ticket Component

This commit is contained in:
2024-10-06 19:30:12 +02:00
parent 10c0d0838f
commit 4b2764e33c
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>