138 lines
3.5 KiB
Vue
138 lines
3.5 KiB
Vue
<template>
|
|
<q-page padding>
|
|
<div class="subcontent">
|
|
<!-- <navigation-bar @today="onToday" @prev="onPrev" @next="onNext" /> -->
|
|
|
|
<div class="row justify-center">
|
|
<q-calendar-day
|
|
ref="calendar"
|
|
v-model="selectedDate"
|
|
view="day"
|
|
:max-days="3"
|
|
bordered
|
|
animated
|
|
transition-next="slide-left"
|
|
transition-prev="slide-right"
|
|
@change="onChange"
|
|
@moved="onMoved"
|
|
@click-date="onClickDate"
|
|
@click-time="onClickTime"
|
|
@click-interval="onClickInterval"
|
|
@click-head-day="onClickHeadDay"
|
|
>
|
|
<template
|
|
#day-body="{
|
|
scope: { timestamp, timeStartPos, timeDurationHeight },
|
|
}"
|
|
>
|
|
<template
|
|
v-for="event in reservationEvents(timestamp)"
|
|
:key="event.id"
|
|
>
|
|
<div
|
|
v-if="event.start !== undefined"
|
|
class="booking-event"
|
|
:style="slotStyle(event, timeStartPos, timeDurationHeight)"
|
|
>
|
|
<span class="title q-calendar__ellipsis">
|
|
{{ event.user }}
|
|
<q-tooltip>{{
|
|
event.start +
|
|
' - ' +
|
|
boatStore.getBoatById(event.resource)?.name
|
|
}}</q-tooltip>
|
|
</span>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
</q-calendar-day>
|
|
</div>
|
|
</div>
|
|
</q-page>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useReservationStore } from 'src/stores/reservation';
|
|
import { Reservation } from 'src/stores/schedule.types';
|
|
import { ref } from 'vue';
|
|
const reservationStore = useReservationStore();
|
|
import {
|
|
TimestampOrNull,
|
|
getDate,
|
|
parsed,
|
|
today,
|
|
} from '@quasar/quasar-ui-qcalendar';
|
|
import { QCalendarDay } from '@quasar/quasar-ui-qcalendar';
|
|
import { date } from 'quasar';
|
|
import { Timestamp } from '@quasar/quasar-ui-qcalendar';
|
|
import { useBoatStore } from 'src/stores/boat';
|
|
|
|
const selectedDate = ref(today());
|
|
const boatStore = useBoatStore();
|
|
|
|
// Method declarations
|
|
|
|
function slotStyle(
|
|
event: Reservation,
|
|
timeStartPos: (time: TimestampOrNull) => string,
|
|
timeDurationHeight: (minutes: number) => string
|
|
) {
|
|
const s = {
|
|
top: '',
|
|
height: '',
|
|
'align-items': 'flex-start',
|
|
};
|
|
if (timeStartPos && timeDurationHeight) {
|
|
s.top = timeStartPos(parsed(event.start)) + 'px';
|
|
s.height =
|
|
timeDurationHeight(date.getDateDiff(event.end, event.start, 'minutes')) +
|
|
'px';
|
|
}
|
|
return s;
|
|
}
|
|
|
|
function reservationEvents(timestamp: Timestamp) {
|
|
return reservationStore.getReservationsByDate(getDate(timestamp));
|
|
}
|
|
function onMoved(data: Event) {
|
|
console.log('onMoved', data);
|
|
}
|
|
function onChange(data: Event) {
|
|
console.log('onChange', data);
|
|
}
|
|
function onClickDate(data: Event) {
|
|
console.log('onClickDate', data);
|
|
}
|
|
function onClickTime(data: Event) {
|
|
console.log('onClickTime', data);
|
|
}
|
|
function onClickInterval(data: Event) {
|
|
console.log('onClickInterval', data);
|
|
}
|
|
function onClickHeadDay(data: Event) {
|
|
console.log('onClickHeadDay', data);
|
|
}
|
|
</script>
|
|
|
|
<style lang="sass" scoped>
|
|
|
|
.booking-event
|
|
position: absolute
|
|
font-size: 12px
|
|
justify-content: space-evenly
|
|
margin: 0 1px
|
|
text-overflow: ellipsis
|
|
overflow: hidden
|
|
color: white
|
|
max-width: 100%
|
|
background: #027BE3FF
|
|
cursor: pointer
|
|
|
|
.title
|
|
position: relative
|
|
display: flex
|
|
justify-content: center
|
|
align-items: center
|
|
height: 100%
|
|
</style>
|