tomru/pfadi-bussle
1
0
Fork 0
mirror of https://github.com/tomru/pfadi-bussle.git synced 2026-03-03 06:27:11 +01:00
Code Issues Packages Projects Releases Wiki Activity

show spinner when loading booked days

Browse Source
This commit is contained in:
Thomas Ruoff
2020-12-25 00:22:27 +01:00
parent 85e4c5349b
commit b43e9be604
1 changed files with 38 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
components/calendar.tsx
View File

@@ -11,6 +11,7 @@ import Calendar from 'react-calendar'
import useBookedDays from '../helpers/useDaysBooked'
import { dateFormatBackend } from '../helpers/date'
import { getNextBigger, getNextSmaller } from '../helpers/array'
import Loading from './loading'
export default function PlainCalendar({
start,
@@ -93,43 +94,48 @@ export default function PlainCalendar({
return (
<div className={className}>
<h2 className="text-xl">Belegungsplan</h2>
<Calendar
activeStartDate={startDate}
minDate={new Date()}
// @ts-ignore
onClickDay={(date: Date, event: React.MouseEvent<HTMLInputElement>) => {
if (!onChange) {
return
}
<Loading loading={daysBookedLoading}>
<Calendar
activeStartDate={startDate}
minDate={new Date()}
// @ts-ignore
onClickDay={(
date: Date,
event: React.MouseEvent<HTMLInputElement>
) => {
if (!onChange) {
return
}
event.preventDefault()
event.stopPropagation()
event.preventDefault()
event.stopPropagation()
const targetClassList = event.currentTarget.classList
const targetClassList = event.currentTarget.classList
if (
targetClassList.contains('react-calendar__tile--past') ||
targetClassList.contains('react-calendar__tile--booked') ||
targetClassList.contains('react-calendar__tile--unselectable')
) {
return
}
if (
targetClassList.contains('react-calendar__tile--past') ||
targetClassList.contains('react-calendar__tile--booked') ||
targetClassList.contains('react-calendar__tile--unselectable')
) {
return
}
if (!startDate || !!endDate) {
onChange({ startDate: dateFormatBackend(date), endDate: null })
return
}
if (!startDate || !!endDate) {
onChange({ startDate: dateFormatBackend(date), endDate: null })
return
}
// when startDate set, but end missing
if (isAfter(date, startDate)) {
onChange({ endDate: dateFormatBackend(date) })
} else {
onChange({ startDate: dateFormatBackend(date), endDate: start })
}
}}
tileClassName={tileClassName}
value={null}
/>
// when startDate set, but end missing
if (isAfter(date, startDate)) {
onChange({ endDate: dateFormatBackend(date) })
} else {
onChange({ startDate: dateFormatBackend(date), endDate: start })
}
}}
tileClassName={tileClassName}
value={null}
/>
</Loading>
<div className="mt-3 flex justify-center">
<div>
<div className="inline-block w-5 h-5 bg-green-200 rounded align-text-bottom"></div>