From 6635f7393695b7963eeb7a91e76d36a64b0e5968 Mon Sep 17 00:00:00 2001
From: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Date: Wed, 6 Mar 2024 16:24:25 +0000
Subject: [PATCH] Bug 36373: Show existing bookings in the datepicker

This patch exposes existing bookings as info dots in the flatpickr

Signed-off-by: Esther <esther@bywatersolutions.com>

Signed-off-by: Kyle M Hall <kyle@bywatersolutions.com>
Signed-off-by: Katrin Fischer <katrin.fischer@bsz-bw.de>
---
 .../prog/css/src/_flatpickr.scss              | 18 ++++++
 .../prog/js/modals/place_booking.js           | 56 +++++++++++++++++++
 2 files changed, 74 insertions(+)

diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/_flatpickr.scss b/koha-tmpl/intranet-tmpl/prog/css/src/_flatpickr.scss
index 165936c396..5596befb48 100644
--- a/koha-tmpl/intranet-tmpl/prog/css/src/_flatpickr.scss
+++ b/koha-tmpl/intranet-tmpl/prog/css/src/_flatpickr.scss
@@ -575,6 +575,24 @@
     }
 }
 
+span.event-dots {
+    display: block;
+    position: absolute;
+    bottom: 5px;
+    left: 5px;
+}
+
+span.event {
+    position: inline-block;
+    width: 3px;
+    height: 3px;
+    border-radius: 150px;
+    bottom: 3px;
+    left: calc(50% - 1.5px);
+    content: " ";
+    display: block;
+    background: #3d8eb9;
+}
 
 
 span.flatpickr-weekday {
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 07f9bab65f..99b1b6ddf2 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/modals/place_booking.js
+++ b/koha-tmpl/intranet-tmpl/prog/js/modals/place_booking.js
@@ -631,6 +631,62 @@ $("#placeBookingModal").on("show.bs.modal", function (e) {
                     });
                 }
 
+                // Create a bookings store keyed on date
+                let bookingsByDate = {};
+                // Iterate through the bookings array
+                bookings.forEach(booking => {
+                    const start_date = flatpickr.parseDate(booking.start_date);
+                    const end_date = flatpickr.parseDate(booking.end_date);
+                    const item_id = booking.item_id;
+
+                    // Iterate through each date within the range of start_date and end_date
+                    let currentDate = new Date(start_date);
+                    while (currentDate <= end_date) {
+                        const currentDateStr = currentDate
+                            .toISOString()
+                            .split("T")[0];
+
+                        // If the date key doesn't exist in the hash, create an empty array for it
+                        if (!bookingsByDate[currentDateStr]) {
+                            bookingsByDate[currentDateStr] = [];
+                        }
+
+                        // Push the booking ID to the array corresponding to the date key
+                        bookingsByDate[currentDateStr].push(item_id);
+
+                        // Move to the next day
+                        currentDate.setDate(currentDate.getDate() + 1);
+                    }
+                });
+
+                // Set onDayCreate for flatpickr
+                let dayCreateExists = periodPicker.config.onDayCreate.filter(
+                    f => f.name === "dayCreate"
+                );
+                if (dayCreateExists.length === 0) {
+                    periodPicker.config.onDayCreate.push(function dayCreate(
+                        dObj,
+                        dStr,
+                        instance,
+                        dayElem
+                    ) {
+                        const currentDate = dayElem.dateObj
+                            .toISOString()
+                            .split("T")[0];
+
+                        if (bookingsByDate[currentDate]) {
+                            const dots = document.createElement("span");
+                            dots.className = "event-dots";
+                            dayElem.appendChild(dots);
+                            bookingsByDate[currentDate].forEach(item => {
+                                const dot = document.createElement("span");
+                                dot.className = "event item_" + item;
+                                dots.appendChild(dot);
+                            });
+                        }
+                    });
+                }
+
                 // Enable flatpickr now we have date function populated
                 periodPicker.redraw();
                 $("#period_fields :input").prop("disabled", false);
-- 
2.39.5