You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
123 lines
3.1 KiB
Vue
123 lines
3.1 KiB
Vue
<template>
|
|
<div class="popup">
|
|
<div class="TrainerNewTime" @click.stop>
|
|
<VDatePicker class="dateSelector" v-model.range="range" mode="datetime" :rules="datePickerRules" is24hr
|
|
timezone="utc" :input-debounce="50" />
|
|
<div class="submitButton" @click="selectTimeslot()">
|
|
Vælg
|
|
</div>
|
|
<div class="closeButton" @click="$emit('closePopup')">x</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import type { Timeslot } from '@/interfaces/timeslot';
|
|
import type { Order } from '@/interfaces/order';
|
|
import type { PropType } from 'vue';
|
|
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: "Home",
|
|
emits: ["closePopup", "refreshList"],
|
|
props: {
|
|
order: {
|
|
type: Object as PropType<Order>,
|
|
required: true
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
range: {
|
|
start: dayjs().set("minute", 0).toDate(),
|
|
end: dayjs().set("minute", 0).toDate()
|
|
},
|
|
datePickerRules: {
|
|
seconds: 0,
|
|
milliseconds: 0
|
|
},
|
|
timeslots: [] as Timeslot[]
|
|
}
|
|
},
|
|
methods: {
|
|
async selectTimeslot() {
|
|
const res = await fetch(`${import.meta.env.VITE_BASE_API_URL}/trainer/order/${this.order.id}`, {
|
|
credentials: import.meta.env.DEV ? "include" : undefined,
|
|
method: "PUT",
|
|
body: JSON.stringify({ startDate: this.range.start, endDate: this.range.end }),
|
|
headers: {
|
|
"Content-Type": "Application/json"
|
|
}
|
|
});
|
|
if (res.status === 401) {
|
|
this.$router.push({ path: "/login", query: { ref: this.$route.path } });
|
|
}
|
|
else if (res.status === 400) {
|
|
const data = await res.json();
|
|
alert(data[0].message)
|
|
}
|
|
else if (res.status === 204) {
|
|
this.$emit("refreshList");
|
|
this.$emit("closePopup");
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.popup {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: #000a;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 10;
|
|
}
|
|
|
|
.TrainerNewTime {
|
|
background-color: white;
|
|
border-radius: 0.5rem;
|
|
padding: 50px;
|
|
margin: 50px;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
}
|
|
|
|
.closeButton {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 20px;
|
|
font-size: 2em;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.closeButton:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.submitButton {
|
|
border: 1px solid #cbd5e1;
|
|
border-radius: 0.5rem;
|
|
padding: 10px;
|
|
cursor: pointer;
|
|
font-size: 1.25em;
|
|
}
|
|
|
|
.submitButton:hover {
|
|
text-decoration: underline;
|
|
border-color: black;
|
|
}
|
|
</style> |