merit-opgave/client/src/views/trainer/TrainerOrdersView.vue

<template>
    <div class="Orders">
        <div class="order" v-for="order of orders" :key="order.id" @click="openPopup(order)"
            :class="{ cancelled: order.status === 'CancelledByTrainer' || order.status === 'CancelledByUser' }">
            <div class="time">
                {{ formatDate(order.startDate) }} {{ formatTime(order.startDate) }} - {{ formatTime(order.endDate) }}
            </div>
            <div class="user">
                {{ order.user.firstname }} {{ order.user.lastname }}
            </div>
            <div class="status">
                {{ formatStatus(order.status) }}
            </div>
        </div>
        <TrainerOrderPopup @closePopup="closePopup" @refreshList="fetchOrders" :order="selectedOrder" v-if="showPopup">
        </TrainerOrderPopup>
    </div>
</template>

<script lang="ts">
import TrainerOrderPopup from '@/components/TrainerOrderPopup.vue'
import type { TrainerOrder as Order } from '@/interfaces/order';
import dayjs from 'dayjs';
import LocalizedFormat from "dayjs/plugin/localizedFormat"
import utc from "dayjs/plugin/utc"
import { } from "dayjs/locale/da";

dayjs.extend(LocalizedFormat);
dayjs.extend(utc);

export default {
    name: "TrainerOrdersView",
    data() {
        return {
            orders: [] as Order[],
            showPopup: false,
            selectedOrder: {} as Order
        };
    },
    components: {
        TrainerOrderPopup
    },
    methods: {
        closePopup() {
            this.showPopup = false;
        },
        openPopup(order: Order) {
            this.selectedOrder = order;
            this.showPopup = true;
        },
        async fetchOrders() {
            const res = await fetch(`${import.meta.env.VITE_BASE_API_URL}/trainer/order`, {
                credentials: import.meta.env.DEV ? "include" : undefined
            });
            if (res.status === 401 || res.status === 403) {
                this.$router.push({ path: "/login", query: { ref: this.$route.path } });
            }
            if (res.status === 200) {
                this.orders = await res.json();
            }
        },
        formatDate(date: string): string {
            let output: string = dayjs(date).locale("da").format("dddd D. MMM YYYY");
            let outputStringArray = output.split("");
            outputStringArray[0] = outputStringArray[0].toLocaleUpperCase();
            output = outputStringArray.join("");

            return output;
        },
        formatTime(date: string): string {
            let output: string = dayjs(date).utcOffset(0).locale("da").format("HH:mm");

            return output;
        },
        formatStatus(status: string): string {
            switch (status) {
                case "Successful":
                    return "Bestilt"

                case "Processing":
                    return "Afventer betaling"

                case "CancelledByTrainer":
                    return "Aflyst af dig"

                case "CancelledByUser":
                    return "Aflyst af brugeren"

                default:
                    return "";
            }
        }
    },
    created() {
        this.fetchOrders();
    },
}
</script>

<style scoped>
.Orders {
    display: flex;
    /* flex-direction: column; */
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    width: 100%;
}

.order {
    border: 1px solid #cbd5e1;
    border-radius: 0.5rem;
    padding: 30px;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

.order:hover {
    border: 1px solid black;
}

.user {
    opacity: 0.8;
}

.order.cancelled .status {
    color: lightcoral;
}
</style>