From bb00bed18092383fe5ed84b874e1b5492bb1cfee Mon Sep 17 00:00:00 2001 From: Martin Renvoize Date: Mon, 25 Mar 2024 22:28:20 +0000 Subject: [PATCH] Bug 34440: Add handling for lead/trail display This patch adds code to insert classes into the flatpickr for lead and trail time on bookings and includes some scss additions to highlight said periods in display. Sponsored-by: Cuyahoga County Public Library Signed-off-by: Kristi Krueger Signed-off-by: Paul Derscheid Signed-off-by: Katrin Fischer --- .../prog/css/src/staff-global.scss | 36 ++++++ .../prog/js/modals/place_booking.js | 105 ++++++++++++++++++ 2 files changed, 141 insertions(+) diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss index 53d1e6fc4f..b3f7ac3cf9 100644 --- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss +++ b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss @@ -846,6 +846,42 @@ input { } } +$dayLeadBackground: #fad2cf !default; +$dayTrailBackground: #fcdcb3 !default; +.flatpickr-day { + + &.leadRangeStart { + border-radius: 50px 0 0 50px; + } + + &.leadRange { + box-shadow: -2.5 * $dayMargin 0 0 $dayLeadBackground, 2.5 * $dayMargin 0 0 $dayLeadBackground; + background: $dayLeadBackground; + } + + &.selected { + &.leadRangeEnd { + border-radius: 0; + } + } + + &:hover, + &.selected { + &.trailRangeStart { + border-radius: 0; + } + } + + &.trailRange { + box-shadow: -2.5 * $dayMargin 0 0 $dayTrailBackground, 2.5 * $dayMargin 0 0 $dayTrailBackground; + background: $dayTrailBackground; + } + + &.trailRangeEnd { + border-radius: 0 50px 50px 0; + } +} + .input-warning { background-color: #FF9; border-color: #900; diff --git a/koha-tmpl/intranet-tmpl/prog/js/modals/place_booking.js b/koha-tmpl/intranet-tmpl/prog/js/modals/place_booking.js index 45f5638c4f..f4b1daf6fd 100644 --- a/koha-tmpl/intranet-tmpl/prog/js/modals/place_booking.js +++ b/koha-tmpl/intranet-tmpl/prog/js/modals/place_booking.js @@ -759,6 +759,111 @@ $("#placeBookingModal").on("show.bs.modal", function (e) { }); } + // Add hints for days before the start range and after the end range + let leadDays = 2; + let trailDays = 3; + periodPicker.calendarContainer.addEventListener( + "mouseover", + function (e) { + const target = e.target; + const startDate = periodPicker.selectedDates[0] + ? dayjs(periodPicker.selectedDates[0]).startOf( + "day" + ) + : null; + + if (target.classList.contains("flatpickr-day")) { + const hoverDate = dayjs(target.dateObj).startOf( + "day" + ); + let leadStart; + let leadEnd; + const trailStart = hoverDate + .add(0, "day") + .startOf("day"); + const trailEnd = hoverDate + .add(trailDays, "day") + .startOf("day"); + + if (!startDate) { + leadStart = hoverDate + .subtract(leadDays, "day") + .startOf("day"); + leadEnd = hoverDate + .subtract(0, "day") + .startOf("day"); + } else { + leadStart = startDate + .subtract(leadDays, "day") + .startOf("day"); + leadEnd = startDate + .subtract(0, "day") + .startOf("day"); + } + + periodPicker.calendarContainer + .querySelectorAll(".flatpickr-day") + .forEach(function (dayElem) { + const elemDate = dayjs( + dayElem.dateObj + ).startOf("day"); + + if (elemDate.isSame(leadStart)) { + dayElem.classList.add("leadRangeStart"); + } else { + dayElem.classList.remove( + "leadRangeStart" + ); + } + + if ( + elemDate >= leadStart && + elemDate < leadEnd + ) { + dayElem.classList.add("leadRange"); + } else { + dayElem.classList.remove("leadRange"); + } + + if (elemDate.isSame(leadEnd)) { + dayElem.classList.add("leadRangeEnd"); + } else { + dayElem.classList.remove( + "leadRangeEnd" + ); + } + + if (elemDate.isSame(trailStart)) { + dayElem.classList.add( + "trailRangeStart" + ); + } else { + dayElem.classList.remove( + "trailRangeStart" + ); + } + + if ( + elemDate > trailStart && + elemDate <= trailEnd + ) { + dayElem.classList.add("trailRange"); + } else { + dayElem.classList.remove("trailRange"); + } + + if (elemDate.isSame(trailEnd)) { + dayElem.classList.add("trailRangeEnd"); + } else { + dayElem.classList.remove( + "trailRangeEnd" + ); + } + }); + } + } + ); + // Enable flatpickr now we have date function populated periodPicker.redraw(); $("#period_fields :input").prop("disabled", false); -- 2.39.5