feat(calendar.html): add showModal() function and save currently viewed event to get params

kursy/templates/calendar.html

@@ -6,6 +6,89 @@
 {% block extra_js %}
 <script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.20/index.global.min.js" integrity="sha256-sQEgS6I+FEeOlX4oTVi7qW/HMRAh0O6vifpeZXIMRsg=" crossorigin="anonymous"></script>
 <script>
+  function showModal(eventId) {
+    // get event's url
+    const eventApiUrl = `/api/calendar/events/${eventId}`;
+
+    const eventApi = fetch(eventApiUrl)
+      .then(response => response.json())
+      .then(data => {
+        eventUrl = data.url;
+
+        const modal = document.createElement('div');
+        modal.classList.add('fixed', 'inset-0', 'flex', 'items-center', 'justify-center', 'z-50', 'shadow-lg', 'overflow-auto');
+        modal.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; // semi-transparent background
+
+        const modalContent = document.createElement('div');
+        modalContent.classList.add('bg-white', 'rounded-lg', 'p-6', 'max-w-3xl', 'relative', 'overflow-auto', 'max-h-[80vh]');
+        modalContent.innerHTML = '<p class="text-gray-500">{% trans "Loading..." %}</p>';
+
+        if (eventUrl) {
+          fetch(eventUrl)
+            .then(response => response.text())
+            .then(html => {
+              modalContent.innerHTML = html;
+            })
+            .catch(error => {
+              modalContent.innerHTML = '<p class="text-red-500">Failed to load event details.</p>';
+            });
+
+          modal.appendChild(modalContent);
+          document.body.appendChild(modal);
+
+          // Close modal when clicking outside modalContent
+          modal.addEventListener('click', function(e) {
+            if (e.target === modal) {
+              document.body.removeChild(modal);
+
+              // remove ?modal=eventId from the url
+              const url = new URL(window.location);
+              url.searchParams.delete('modal');
+              window.history.pushState({}, '', url);
+            }
+          });
+
+          // Close modal on ESC key
+          document.addEventListener('keydown', function escHandler(e) {
+            if (e.key === 'Escape') {
+              if (document.body.contains(modal)) {
+                document.body.removeChild(modal);
+              }
+              document.removeEventListener('keydown', escHandler);
+              // remove ?modal=eventId from the url
+              const url = new URL(window.location);
+              url.searchParams.delete('modal');
+              window.history.pushState({}, '', url);
+            }
+          });
+
+          const closeButton = document.createElement('button');
+          closeButton.classList.add('absolute', 'top-2', 'right-2', 'text-red-500', 'cursor-pointer', 'hover:text-gray-700', 'text-5xl', 'translate-x-[-50%]');
+          closeButton.innerHTML = '&times;';
+          closeButton.addEventListener('click', function() {
+            if (document.body.contains(modal)) {
+              document.body.removeChild(modal);
+            }
+            // remove ?modal=eventId from the url
+            const url = new URL(window.location);
+            url.searchParams.delete('modal');
+            window.history.pushState({}, '', url);
+          });
+          modal.appendChild(closeButton);
+
+          // add ?modal=eventId to the url
+          const url = new URL(window.location);
+          url.searchParams.set('modal', eventId);
+          window.history.pushState({}, '', url);
+        }
+        return data;
+      })
+      .catch(error => {
+        console.error('Error fetching event details:', error);
+        return null;
+      });
+  }
+
   document.addEventListener('DOMContentLoaded', function() {
     var calendarEl = document.getElementById('calendar');
     var calendar = new FullCalendar.Calendar(calendarEl, {
@@ -18,7 +101,7 @@
           titleFormat: { month: 'long', year: 'numeric' },
           slotLabelFormat: { hour: '2-digit', minute: '2-digit' },
           slotMinTime: '08:00:00',
-          slotMaxTime: '18:00:00',
+          slotMaxTime: '22:00:00',
         },
         listWeek: {
           titleFormat: { month: 'long', year: 'numeric' },