Move software files one directory up, Readme

src/pages/misc/basketPage/index.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { useBasketStore } from '@/stores/basket.store';
+import cardView from '@/components/basics/cardView.vue';
+import orderingDialog from './orderingDialog.vue';
+import outlinedButton from '@/components/basics/outlinedButton.vue';
+import { ref } from 'vue';
+import { useAccountStore } from '@/stores/account.store';
+import ticketsTable from './ticketsTable.vue';
+
+const basketStore = useBasketStore()
+const accountStore = useAccountStore()
+const showOrderingDialog = ref()
+</script>
+
+<template>
+  <v-container max-width="1000">
+    <v-row v-if="accountStore.userAccount.id == null">
+      <v-col>
+        <v-alert
+          color="info"
+          closable
+        >
+          {{ $t('account.login.pleaseLoginToOrder') }}
+        </v-alert>
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col>
+        <card-view
+          :title="$t('basket.basket')"
+          v-model="showOrderingDialog"
+          icon="mdi-cart"
+        >
+          <template #borderless>
+            <!-- Display items if basket is not empty -->
+            <tickets-table v-if="basketStore.itemsInBasket.length > 0"/>
+
+            <!-- Display empty state if card is empty -->
+            <v-empty-state v-else
+              icon="mdi-basket-off"
+              :title="$t('basket.emptyBasketTitle')"
+              :text="$t('basket.emptyBasketText')"
+            />
+          </template>
+
+          <v-card-text class="text-right text-h5" v-if="basketStore.itemsInBasket.length > 0">
+            {{ $t('misc.totalPrice') }}: {{ (basketStore.getTotalPrice).toFixed(2) }} €
+          </v-card-text>
+          
+
+          <template #actions>
+            <outlined-button
+              prepend-icon="mdi-basket-check"
+              :disabled="basketStore.itemsInBasket.length == 0 || accountStore.userAccount.id == null"
+              variant="outlined"
+              color="green"
+              @click="showOrderingDialog = true"
+            >
+              {{ $t('order.takeOrder') }}
+            </outlined-button>
+          </template>
+        </card-view>
+      </v-col>
+    </v-row>
+  </v-container>
+
+  <ordering-dialog v-model="showOrderingDialog" />
+</template>

src/pages/misc/basketPage/orderingDialog.vue

@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import actionDialog from '@/components/basics/actionDialog.vue';
+import { useBasketStore } from '@/stores/basket.store';
+import outlinedButton from '@/components/basics/outlinedButton.vue';
+import { ModelRef, ref } from 'vue';
+import { useAccountStore } from '@/stores/account.store';
+import { AddressModel } from '@/data/models/user/addressModel';
+import { PaymentModel } from '@/data/models/user/paymentModel';
+
+const basketStore = useBasketStore()
+const accountStore = useAccountStore()
+const showDialog: ModelRef<boolean> = defineModel()
+const orderingInProgress = ref(false)
+const addressError = ref(false)
+const paymentError = ref(false)
+
+async function doOrder() {
+  orderingInProgress.value = true
+  addressError.value = false
+  paymentError.value = false
+
+  if (basketStore.usedAddress == null) {
+    addressError.value = true
+  }
+
+  if (basketStore.usedPayment == null){
+    paymentError.value = true
+  }
+
+  if (basketStore.usedAddress != null && basketStore.usedPayment != null) {
+    await basketStore.takeOrder()
+    showDialog.value = false
+  }
+  
+  orderingInProgress.value = false
+}
+
+function addressItemProps(item: AddressModel) {
+  return {
+    title: item.street + " " + item.houseNumber,
+    subtitle: item.postalCode + " " + item.city
+  }
+}
+
+function paymentItemProps(item: PaymentModel) {
+  return {
+    title: item.bankName,
+    subtitle: item.iban
+  }
+}
+</script>
+
+<template>
+  <action-dialog
+    :title="$t('order.ordering')"
+    icon="mdi-basket-check"
+    v-model="showDialog"
+    max-width="800"
+    persistent
+  >
+    <v-container>
+      <v-row>
+        <v-col>
+          <v-select
+            v-model="basketStore.usedAddress"
+            :items="accountStore.userAccount.addresses"
+            :item-props="addressItemProps"
+            :label="$t('account.userData.address')"
+            variant="outlined"
+            hide-details
+          />
+        </v-col>
+      </v-row>
+
+      <v-row>
+        <v-col>
+          <v-select
+            v-model="basketStore.usedPayment"
+            :items="accountStore.userAccount.payments"
+            :item-props="paymentItemProps"
+            :label="$t('account.userData.payment')"
+            variant="outlined"
+            hide-details
+          />
+        </v-col>
+      </v-row>
+    </v-container>
+
+    <template #actions>
+      <outlined-button 
+        @click="showDialog = false"
+        prepend-icon="mdi-close"
+        color="orange"
+        :disabled="orderingInProgress"
+      >
+        {{ $t('misc.actions.cancel') }}
+      </outlined-button>
+
+      <outlined-button
+        @click="doOrder"
+        :loading="orderingInProgress"
+        prepend-icon="mdi-send"
+        color="green"
+      >
+        {{ $t('order.takeOrder') }}
+      </outlined-button>
+    </template>
+  </action-dialog>
+</template>

src/pages/misc/basketPage/ticketsTable.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { useBasketStore } from '@/stores/basket.store';
+import { BasketItemModel } from '@/data/models/ordering/basketItemModel';
+import { calcPrice } from '@/scripts/concertScripts';
+
+const basketStore = useBasketStore()
+
+function removeFromBasket(basketItem: BasketItemModel) {
+  basketStore.removeItemFromBasket(basketItem)
+}
+</script>
+
+<template>
+  <v-table>
+    <thead>
+      <tr>
+        <th>{{ $t('band.band') }}</th>
+        <th>{{ $t('concert.concert') }}</th>
+        <th class="text-center">{{ $t('misc.quantity') }}</th>
+        <th class="text-right">{{ $t('misc.price') }}</th>
+        <th class="text-right">{{ $t('misc.totalPrice') }}</th>
+        <th></th>
+      </tr>
+    </thead>
+
+    <tbody>
+      <tr v-for="basketItem in basketStore.itemsInBasket">
+        <!-- Band name -->
+        <td>
+          {{ basketItem.band.name }}
+        </td>
+
+        <!-- Concert name -->
+        <td>
+          {{ basketItem.concert.name }}
+        </td>
+
+        <!-- Quantity -->
+        <td class="text-center">
+          {{ basketItem.seats.length }}x
+        </td>
+
+        <!-- Price per event -->
+        <td class="text-right">
+          <div v-if="basketItem.seats">
+            {{ basketItem.price }} €
+          </div>
+        </td>
+
+        <!-- Total price -->
+        <td class="text-right">
+          {{ (calcPrice(basketItem.concert.price, basketItem.seats.length)).toFixed(2) }} €
+        </td>
+
+        <td class="text-right">
+          <v-btn
+            icon="mdi-delete"
+            @click="removeFromBasket(basketItem)"
+            color="red"
+            variant="text"
+            flat
+          />
+        </td>
+      </tr>
+    </tbody>
+  </v-table>
+</template>