Attachment 168944 Details for Bug 34440 – Bug 34440: Add handling for lead/trail display

[patch] Bug 34440: Add handling for lead/trail display

Bug-34440-Add-handling-for-leadtrail-display.patch (text/plain), 7.34 KB, created by Martin Renvoize (ashimema) on 2024-07-14 05:48:16 UTC

(hide)

Description:

Filename:

MIME Type:

Creator: Martin Renvoize (ashimema)

Created: 2024-07-14 05:48:16 UTC

Size: 7.34 KB

patch

obsolete

>From 11924196cade8da9feaba9d532a2423462fd0562 Mon Sep 17 00:00:00 2001
>From: Martin Renvoize <martin.renvoize@ptfs-europe.com>
>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 43115f8ce8a..e530c6701e1 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.39.2

Actions: View | Diff | Splinter Review

Attachments on bug 34440: 167948 | 167949 | 167950 | 167951 | 167952 | 167953 | 167954 | 167955 | 168941 | 168942 | 168943 | 168944 | 168945 | 168946 | 168947 | 168948 | 168949 | 168998 | 168999 | 169000 | 169001 | 169002 | 169003 | 169004 | 169005 | 169006 | 169007 | 169571 | 169572 | 169573 | 169574 | 169575 | 169576 | 169577 | 169578 | 169579 | 169580 | 169581 | 169587 | 169588 | 170032 | 170033 | 170034 | 170035 | 170036 | 170037 | 170038 | 170039 | 170040 | 170041 | 170042 | 170046 | 170047 | 170048 | 170049 | 170050 | 170051 | 170052 | 170053 | 170054 | 170055 | 170056 | 170589 | 170590 | 170591 | 170592 | 170593 | 170594 | 170595 | 170596 | 170597 | 170598 | 170599 | 170600 | 170603 | 170610 | 170951