Ticket Component
This commit is contained in:
@@ -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';
|
||||
|
||||
|
||||
@@ -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';
|
||||
|
||||
|
||||
@@ -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()
|
||||
|
||||
@@ -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()
|
||||
|
||||
@@ -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';
|
||||
|
||||
|
||||
@@ -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()
|
||||
|
||||
@@ -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
|
||||
}
|
||||
|
||||
|
||||
@@ -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';
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
@@ -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()
|
||||
|
||||
@@ -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" },
|
||||
|
||||
@@ -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';
|
||||
|
||||
|
||||
@@ -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';
|
||||
|
||||
|
||||
@@ -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';
|
||||
|
||||
@@ -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';
|
||||
|
||||
|
||||
@@ -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()
|
||||
|
||||
@@ -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';
|
||||
|
||||
@@ -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';
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>>()
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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';
|
||||
|
||||
@@ -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';
|
||||
|
||||
@@ -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';
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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()
|
||||
|
||||
@@ -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';
|
||||
|
||||
|
||||
Reference in New Issue
Block a user