From 523fd7515958236c925386fe3110c8c8946c2295 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. --- .../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.45.2