70 lines
2.1 KiB
Vue
70 lines
2.1 KiB
Vue
<template>
|
|
<div class="fit row wrap justify-start items-start content-start">
|
|
<div class="col-9 q-pa-md">
|
|
<div class="scheduler">
|
|
<q-calendar-scheduler
|
|
ref="calendar"
|
|
v-model="selectedDate"
|
|
v-model:model-resources="resources"
|
|
view="week"
|
|
:weekdays="[1, 2, 3, 4, 5, 6, 0]"
|
|
hoverable
|
|
animated
|
|
bordered
|
|
:day-min-height="50"
|
|
:day-height="0"
|
|
></q-calendar-scheduler>
|
|
</div>
|
|
</div>
|
|
<div class="col-3 q-pa-md">
|
|
<q-list padding bordered class="rounded-borders">
|
|
<q-item>
|
|
<q-item-section>
|
|
<q-item-label overline>Availability Templates</q-item-label>
|
|
<q-item-label caption
|
|
>Drag and drop a template to a boat / date to create booking
|
|
availability</q-item-label
|
|
>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-separator spaced />
|
|
<q-expansion-item
|
|
v-for="template in timeblockTemplates"
|
|
:key="template.$id"
|
|
dense
|
|
dense-toggle
|
|
expand-separator
|
|
:label="template.name"
|
|
style="font-size: 0.8em"
|
|
draggable="true"
|
|
>
|
|
<q-card>
|
|
<q-card-section>
|
|
<q-badge v-for="item in template.timeTuple" :key="item.$id">
|
|
{{ item[0] }} - {{ item[1] }}
|
|
</q-badge>
|
|
</q-card-section>
|
|
</q-card>
|
|
</q-expansion-item></q-list
|
|
>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup type="ts">
|
|
import {QCalendarScheduler, today} from '@quasar/quasar-ui-qcalendar'
|
|
import { useBoatStore } from 'src/stores/boat';
|
|
import { useScheduleStore } from 'src/stores/schedule';
|
|
import { onMounted, ref } from 'vue';
|
|
|
|
const selectedDate = ref(today())
|
|
const scheduleStore = useScheduleStore()
|
|
const boatStore = useBoatStore()
|
|
const resources = boatStore.boats
|
|
const timeblockTemplates = scheduleStore.timeblockTemplates
|
|
onMounted(async() => {
|
|
await boatStore.fetchBoats();
|
|
await scheduleStore.fetchTimeBlockTemplates();
|
|
await scheduleStore.fetchTimeBlockTemplates()})
|
|
</script>
|