From 1d8a69759844ba68cfa0e335f9ed39fff5310c98 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. 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 65884323e4..35c142e963 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 e1efaf353d..e92fee372b 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