-
Notifications
You must be signed in to change notification settings - Fork 0
/
Calendar.svelte
87 lines (77 loc) · 2.72 KB
/
Calendar.svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<script lang="ts">
import {
DEFAULT_DAY_END,
DEFAULT_DAY_START,
ONE_HOUR_IN_MS,
} from '../../consts';
import type { Reservation } from '../../model/reservation.model';
import {
loadReservationsForDay,
reservationStore,
} from '../../model/reservation.store';
import Booking from './components/Booking.svelte';
import DateSelector from './components/DateSelector.svelte';
import ReservationCard from './components/ReservationCard.svelte';
let selecedDate: Date | undefined;
let hasReservations: boolean = false;
let reservations: Reservation[];
$: if (selecedDate) loadReservationsForDay(selecedDate);
reservationStore.subscribe((storeData) => {
hasReservations = !!storeData && storeData?.reservations.length > 0;
selecedDate = storeData?.for;
if (hasReservations) {
reservations = storeData!.reservations;
}
});
const getAvailableUntil = (index: number): Date => {
let defaultEnd = getSelectedDateWithTime(DEFAULT_DAY_END);
if (index < reservations.length) {
const nextReservation = reservations.at(index);
return nextReservation?.startTime ?? defaultEnd;
}
return defaultEnd;
};
const showBookingButton = (from: Date, until: Date) => {
return until.getTime() - from.getTime() >= ONE_HOUR_IN_MS;
};
const getSelectedDateWithTime = (time: number): Date => {
let date = new Date();
if (selecedDate?.isToday()) {
date.setHours(date.getHours(), date.getMinutes() + 1, 0);
} else {
date = new Date(selecedDate!);
date.setHours(time, 0);
}
return date;
};
</script>
<DateSelector bind:selecedDate />
{#if selecedDate}
<div class="reservations-container">
{#if hasReservations}
<p>Reservations for: {selecedDate.toWeekdayString()}</p>
<Booking
{selecedDate}
availableFrom={getSelectedDateWithTime(DEFAULT_DAY_START)}
availableUntil={getAvailableUntil(0)}
/>
{#each reservations as reservation, i (i)}
<ReservationCard {reservation} />
{#if showBookingButton(reservation.endTime, getAvailableUntil(i + 1))}
<Booking
{selecedDate}
availableFrom={reservation.endTime}
availableUntil={getAvailableUntil(i + 1)}
/>
{/if}
{/each}
{:else}
<p>There are no reservations for: {selecedDate.toWeekdayString()}</p>
<Booking
{selecedDate}
availableFrom={getSelectedDateWithTime(DEFAULT_DAY_START)}
availableUntil={getSelectedDateWithTime(DEFAULT_DAY_END)}
/>
{/if}
</div>
{/if}