From 8b1cb60ef11041912f134093b5d0ca31277d971c Mon Sep 17 00:00:00 2001
From: Chris Jean-Marie <chris.jeanmarie@gmail.com>
Date: Sun, 8 Dec 2024 17:12:14 +0000
Subject: [PATCH] Add modal for new event details

---
 backend/templates/calendar.html | 33 +++++++++++++++++++++++++++------
 1 file changed, 27 insertions(+), 6 deletions(-)

diff --git a/backend/templates/calendar.html b/backend/templates/calendar.html
index b0dc879..2c4d8ba 100644
--- a/backend/templates/calendar.html
+++ b/backend/templates/calendar.html
@@ -8,6 +8,27 @@
 <div class="mh-100">
     <div id="calendar" class="fc"></div>
 </div>
+
+<!-- Modal -->
+<div class="modal fade" id="eventDetailsModal" tabindex="-1" role="dialog" aria-labelledby="eventDetailsModalTitle"
+    aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="eventDetailsModalTitle">Event details</h5>
+            </div>
+            <div class="modal-body">
+                <p id="eventDetailsModalDateRange"></p>
+                <p id="eventDetailsModalBody">Cottage request</p>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                <button type="button" class="btn btn-primary">Save changes</button>
+            </div>
+        </div>
+    </div>
+</div>
+
 {% endblock center %}
 {% block scripts %}
 <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.js'></script>
@@ -34,16 +55,16 @@
                 {
                 url: '/getevents/{{calendar.name}}',
                 color: '{{calendar.colour}}',
-                },
-                {% endfor %}
+            },
+            {% endfor %}
             ],
         select: function (info) {
-            alert('selected ' + info.startStr + ' to ' + info.endStr);
-            let enddate = new Date(info.endStr);
-            enddate.setDate(enddate.getDate() - 1);
+            $('#eventDetailsModal').modal('show');
+            $('#eventDetailsModalDateRange').text(info.startStr + ' to ' + info.endStr);
+
             info.view.calendar.addEvent({
                 id: uuidv4(),
-                title: 'New Event',
+                title: 'Cottage request',
                 start: info.startStr + 'T14:00:00',
                 end: info.endStr + 'T10:00:00',
                 allDay: false