Added available timeslot overview and filter selector
Filip Borum Poulsen
3 years ago
parent
f6c5e0f0c4
commit
8d3e683402
@ -0,0 +1,83 @@
|
|||||||
|
<template>
|
||||||
|
<div class="centerSelector">
|
||||||
|
<div class="header">
|
||||||
|
<div>Center</div>
|
||||||
|
</div>
|
||||||
|
<div class="centers">
|
||||||
|
<div class="center" v-for="center in centers" :key="center.id" v-on:click="clicked(center.id)"
|
||||||
|
v-bind:class="{ 'selected': selectedCenters.includes(center.id) }">
|
||||||
|
{{ center.name }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import type { Center } from '@/interfaces/center';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "CenterSelector",
|
||||||
|
emits: ["selectionChanged"],
|
||||||
|
async mounted() {
|
||||||
|
const res = await fetch(`${import.meta.env.VITE_BASE_API_URL}/center`);
|
||||||
|
if (res.status === 200) {
|
||||||
|
// @ts-ignore
|
||||||
|
this.centers = await res.json();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
centers: [] as Center[],
|
||||||
|
selectedCenters: [] as number[]
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
clicked(id: number) {
|
||||||
|
if (this.selectedCenters.includes(id)) {
|
||||||
|
this.selectedCenters = this.selectedCenters.filter(c => c !== id);
|
||||||
|
} else {
|
||||||
|
this.selectedCenters.push(id);
|
||||||
|
}
|
||||||
|
this.$emit("selectionChanged", this.selectedCenters);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.centerSelector {
|
||||||
|
border: 1px solid #cbd5e1;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
min-width: fit-content;
|
||||||
|
width: 300px;
|
||||||
|
/* padding: 5px; */
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
border-bottom: 1px solid #cbd5e1;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 1.1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header div {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.centers {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.center {
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.center.selected {
|
||||||
|
font-weight: 500;
|
||||||
|
color: #2563eb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.center:hover {
|
||||||
|
opacity: 0.8;
|
||||||
|
}</style>
|
||||||
@ -0,0 +1,100 @@
|
|||||||
|
<template>
|
||||||
|
<div class="trainerSelector">
|
||||||
|
<div class="header">
|
||||||
|
<div>Trainer</div>
|
||||||
|
</div>
|
||||||
|
<div class="trainers">
|
||||||
|
<div class="trainer" v-for="trainer in trainers" :key="trainer.id" v-on:click="clicked(trainer.id)"
|
||||||
|
v-bind:class="{ 'selected': selectedTrainers.includes(trainer.id) }">
|
||||||
|
{{ trainer.first_name }} {{ trainer.last_name }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import type { Trainer } from '@/interfaces/trainer';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "TrainerSelector",
|
||||||
|
emits: ["selectionChanged"],
|
||||||
|
props: {
|
||||||
|
centers: Array<number>
|
||||||
|
},
|
||||||
|
async mounted() {
|
||||||
|
const filters = this.centers?.map(c => `center=${c}`).join("&");
|
||||||
|
console.log(filters)
|
||||||
|
const res = await fetch(`${import.meta.env.VITE_BASE_API_URL}/trainer?${filters}`);
|
||||||
|
if (res.status === 200) {
|
||||||
|
this.trainers = await res.json();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
centers: {
|
||||||
|
async handler(centers: number[]) {
|
||||||
|
const filters = centers?.map(c => `center=${c}`).join("&");
|
||||||
|
const res = await fetch(`${import.meta.env.VITE_BASE_API_URL}/trainer?${filters}`);
|
||||||
|
if (res.status === 200) {
|
||||||
|
this.trainers = await res.json();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
deep: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
trainers: [] as Trainer[],
|
||||||
|
selectedTrainers: [] as number[]
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
clicked(id: number) {
|
||||||
|
if (this.selectedTrainers.includes(id)) {
|
||||||
|
this.selectedTrainers = this.selectedTrainers.filter(c => c !== id);
|
||||||
|
} else {
|
||||||
|
this.selectedTrainers.push(id);
|
||||||
|
}
|
||||||
|
this.$emit("selectionChanged", this.selectedTrainers);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.trainerSelector {
|
||||||
|
border: 1px solid #cbd5e1;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
min-width: fit-content;
|
||||||
|
width: 300px;
|
||||||
|
/* padding: 5px; */
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
border-bottom: 1px solid #cbd5e1;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 1.1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header div {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trainers {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trainer {
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trainer.selected {
|
||||||
|
font-weight: 500;
|
||||||
|
color: #2563eb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trainer:hover {
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
export interface Center {
|
||||||
|
id: number
|
||||||
|
name: string
|
||||||
|
city: string
|
||||||
|
zip_code: number
|
||||||
|
address: string
|
||||||
|
}
|
||||||
@ -0,0 +1,4 @@
|
|||||||
|
export interface Timeslot {
|
||||||
|
startDate: Date
|
||||||
|
endDate: Date
|
||||||
|
}
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
export interface Trainer {
|
||||||
|
id: number
|
||||||
|
first_name: string
|
||||||
|
last_name: string
|
||||||
|
center_id: number
|
||||||
|
center_name: string
|
||||||
|
}
|
||||||
@ -0,0 +1,20 @@
|
|||||||
|
import type { Timeslot } from "./timeslot";
|
||||||
|
import type { Trainer } from "./trainer";
|
||||||
|
|
||||||
|
export interface TrainerWithTimeslots extends Trainer {
|
||||||
|
timeslots: Timeslot[]
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface TrainerWithDateGroupedTimeslots extends Trainer {
|
||||||
|
dates: DateGroupedTimeslotsList
|
||||||
|
timeslots: Timeslot[]
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface DateGroupedTimeslotsList {
|
||||||
|
[key: string]: DateGroupedTimeslots
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface DateGroupedTimeslots {
|
||||||
|
timeslots: Timeslot[]
|
||||||
|
date: string
|
||||||
|
}
|
||||||
@ -1,3 +1,213 @@
|
|||||||
<template>
|
<template>
|
||||||
|
<div class="Home">
|
||||||
</template>
|
<VDatePicker class="dateSelector" v-model.range="range" mode="date" :rules="datePickerRules" timezone="utc"
|
||||||
|
:input-debounce="50" />
|
||||||
|
<CenterSelector class="centerSelector" @selectionChanged="centerSelectionChanged"></CenterSelector>
|
||||||
|
<TrainerSelector class="trainerSelector" v-bind:centers="centers" @selectionChanged="trainerSelectionChanged">
|
||||||
|
</TrainerSelector>
|
||||||
|
<div class="trainers">
|
||||||
|
<div class="trainer" v-for="trainer in trainersWithDateGroupedTimeslots" :key="trainer.id">
|
||||||
|
<div class="top">
|
||||||
|
{{ trainer.first_name }} {{ trainer.last_name }}
|
||||||
|
</div>
|
||||||
|
<div class="dates">
|
||||||
|
<div class="date" v-for="date in trainer.dates">
|
||||||
|
{{ date.date }}
|
||||||
|
<div class="timeslots">
|
||||||
|
<div class="timeslot" v-for="timeslot in date.timeslots"
|
||||||
|
@click="createOrder(trainer, timeslot)">
|
||||||
|
{{ formatTime(timeslot.startDate) }} - {{ formatTime(timeslot.endDate) }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- {{ trainersWithTimeslots }} -->
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.Home {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 3fr 1fr;
|
||||||
|
grid-template-rows: auto auto auto;
|
||||||
|
grid-column-gap: 50px;
|
||||||
|
grid-row-gap: 30px;
|
||||||
|
padding: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dateSelector {
|
||||||
|
grid-area: 1 / 1 / 2 / 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.centerSelector {
|
||||||
|
grid-area: 1 / 3 / 2 / 4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trainerSelector {
|
||||||
|
grid-area: 2 / 3 / 3 / 4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trainers {
|
||||||
|
grid-area: 1 / 2 / 4 / 3;
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trainer .top {
|
||||||
|
border-bottom: 1px solid #cbd5e1;
|
||||||
|
padding: 20px;
|
||||||
|
font-size: large;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trainer {
|
||||||
|
border: 1px solid #cbd5e1;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dates {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeslots {
|
||||||
|
border-top: 1px solid #cbd5e1;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeslot {
|
||||||
|
padding: 5px;
|
||||||
|
border: 1px solid #cbd5e1;
|
||||||
|
margin: 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeslot:hover {
|
||||||
|
border-color: black;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import CenterSelector from '@/components/CenterSelector.vue';
|
||||||
|
import TrainerSelector from '@/components/TrainerSelector.vue';
|
||||||
|
import type { Timeslot } from '@/interfaces/timeslot';
|
||||||
|
import type { DateGroupedTimeslots, DateGroupedTimeslotsList, TrainerWithDateGroupedTimeslots, TrainerWithTimeslots } from '@/interfaces/trainerWithTimeslots';
|
||||||
|
import dayjs from 'dayjs';
|
||||||
|
import LocalizedFormat from "dayjs/plugin/localizedFormat"
|
||||||
|
import { } from "dayjs/locale/da";
|
||||||
|
import type { Trainer } from '@/interfaces/trainer';
|
||||||
|
|
||||||
|
dayjs.extend(LocalizedFormat);
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "Home",
|
||||||
|
components: {
|
||||||
|
CenterSelector,
|
||||||
|
TrainerSelector
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
range: {
|
||||||
|
start: new Date(),
|
||||||
|
end: new Date()
|
||||||
|
},
|
||||||
|
datePickerRules: {
|
||||||
|
hours: 0,
|
||||||
|
minutes: 0,
|
||||||
|
seconds: 0,
|
||||||
|
milliseconds: 0
|
||||||
|
},
|
||||||
|
centers: [] as number[],
|
||||||
|
trainers: [] as number[],
|
||||||
|
trainersWithTimeslots: [] as TrainerWithTimeslots[]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
trainersWithDateGroupedTimeslots() {
|
||||||
|
return this.trainersWithTimeslots.map(trainer => {
|
||||||
|
const dates: DateGroupedTimeslotsList = {};
|
||||||
|
trainer.timeslots.forEach(timeslot => {
|
||||||
|
console.log(new Date(timeslot.startDate).toISOString().split("T")[0]);
|
||||||
|
const day: string = new Date(timeslot.startDate).toISOString().split("T")[0];
|
||||||
|
if (!dates[day]) {
|
||||||
|
dates[day] = {
|
||||||
|
date: this.formatDate(new Date(day)),
|
||||||
|
timeslots: [] as Timeslot[]
|
||||||
|
};
|
||||||
|
}
|
||||||
|
dates[day].timeslots.push(timeslot);
|
||||||
|
});
|
||||||
|
const trainerWithDateGroupedTimeslots: TrainerWithDateGroupedTimeslots = { ...trainer, dates };
|
||||||
|
return trainerWithDateGroupedTimeslots;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
centers: {
|
||||||
|
handler() {
|
||||||
|
this.fetchTimeslots();
|
||||||
|
},
|
||||||
|
deep: true
|
||||||
|
},
|
||||||
|
trainers: {
|
||||||
|
handler() {
|
||||||
|
this.fetchTimeslots();
|
||||||
|
},
|
||||||
|
deep: true
|
||||||
|
},
|
||||||
|
range: {
|
||||||
|
handler() {
|
||||||
|
this.fetchTimeslots();
|
||||||
|
},
|
||||||
|
deep: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
createOrder(trainer: Trainer, timeslot: Timeslot) {
|
||||||
|
console.log(trainer);
|
||||||
|
console.log(timeslot);
|
||||||
|
this.$router.push({
|
||||||
|
path: "/createOrder", query: {
|
||||||
|
trainer: trainer.id,
|
||||||
|
startDate: new Date(timeslot.startDate).toISOString(),
|
||||||
|
endDate: new Date(timeslot.endDate).toISOString()
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
formatDate(date: Date): 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: Date): string {
|
||||||
|
let output: string = dayjs(date).locale("da").format("HH:mm");
|
||||||
|
|
||||||
|
return output;
|
||||||
|
},
|
||||||
|
centerSelectionChanged(selection: number[]) {
|
||||||
|
this.centers = selection;
|
||||||
|
},
|
||||||
|
trainerSelectionChanged(selection: number[]) {
|
||||||
|
this.trainers = selection;
|
||||||
|
},
|
||||||
|
async fetchTimeslots() {
|
||||||
|
const centerFilters = this.centers.map(c => `center=${c}`);
|
||||||
|
const trainerFilters = this.trainers.map(c => `trainer=${c}`);
|
||||||
|
const startDateFilter = `startDate=${this.range.start.toISOString()}`;
|
||||||
|
const endDateFilter = `endDate=${this.range.end.toISOString()}`;
|
||||||
|
const filters = [...centerFilters, ...trainerFilters, startDateFilter, endDateFilter].join("&");
|
||||||
|
console.log(filters);
|
||||||
|
const res = await fetch(`${import.meta.env.VITE_BASE_API_URL}/timeslot?${filters}`);
|
||||||
|
if (res.status === 200) {
|
||||||
|
this.trainersWithTimeslots = await res.json();
|
||||||
|
console.log(this.trainersWithTimeslots);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
Loading…
Reference in New Issue