72 lines
2.0 KiB
Vue
72 lines
2.0 KiB
Vue
<script setup lang="ts">
|
|
import cardView from '@/components/cardView.vue';
|
|
import { OrderModel } from '@/data/models/orderModel';
|
|
|
|
defineProps({
|
|
order: 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()
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<card-view
|
|
:title="$t('orders.orderFrom') + ' ' + formatDateTimeString(order.createdAt) + ' ' + $t('oclock')"
|
|
:subtitle="$t('totalPrice') + ': ' + order.totalPrice + ' €'"
|
|
>
|
|
<v-timeline direction="horizontal" side="start">
|
|
<v-timeline-item :dot-color="getDotColor(order, 1)" icon="mdi-basket-check">
|
|
{{ $t('orders.ordered') }}
|
|
</v-timeline-item>
|
|
|
|
<v-timeline-item :dot-color="getDotColor(order, 2)" icon="mdi-package-variant">
|
|
{{ $t('orders.preparingForShipping') }}
|
|
</v-timeline-item>
|
|
|
|
<v-timeline-item :dot-color="getDotColor(order, 3)" icon="mdi-truck-fast">
|
|
{{ $t('orders.shipped') }}
|
|
</v-timeline-item>
|
|
|
|
<v-timeline-item :dot-color="getDotColor(order, 4)" icon="mdi-package-check">
|
|
{{ $t('orders.delivered') }}
|
|
</v-timeline-item>
|
|
</v-timeline>
|
|
|
|
<v-table class="bg-surface-light">
|
|
<thead>
|
|
<tr>
|
|
<th>{{ $t('quantity') }}</th>
|
|
<th>{{ $t('product.brand') }}</th>
|
|
<th>{{ $t('product.productName') }}</th>
|
|
<th>{{ $t('product.productPrice') }}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="orderItem in order.orderItem">
|
|
<td>{{ orderItem.quantity }}x</td>
|
|
<td>{{ orderItem.product.brand }}</td>
|
|
<td>{{ orderItem.product.name }}</td>
|
|
<td>{{ orderItem.product.price }} €</td>
|
|
</tr>
|
|
</tbody>
|
|
</v-table>
|
|
</card-view>
|
|
</template> |