From cc0c5f409ef183aa6fb3d5153f2ddd4e30e43fa5 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 --- .../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 65884323e44..35c142e9633 100644 --- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss +++ b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss @@ -827,6 +827,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 e1efaf353da..e92fee372bc 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.46.0