fix: makes calendar responsive

assets/styles/app.css

@@ -29,6 +29,7 @@
 
 :root {
     --fc-border-color: #a65b27;
+    --fc-page-bg-color: #a65b27;
 }
 
 /* Prevent scrolling while dialog is open */

src/Monitor/Framework/Controller/ApiController.php

@@ -68,16 +68,36 @@ class ApiController extends AbstractController
         ]);
     }
 
-    #[Route('/api/upcoming-episodes', name: 'api.upcoming-episodes', methods: ['GET'])]
+    #[Route('/api/monitor/upcoming-episodes', name: 'api.monitor.upcoming-episodes', methods: ['GET'])]
     public function upcomingEpisodes(MonitorRepository $repository): Response
     {
+        $colors = [
+            'blue' => '#007bff',
+            'indigo' => '#6610f2',
+            'purple' => '#6f42c1',
+            'pink' => '#e83e8c',
+            'red' => '#dc3545',
+            'orange' => '#fd7e14',
+            'yellow' => '#ffc107',
+            'green' => '#28a745',
+            'teal' => '#20c997',
+            'cyan' => '#17a2b8',
+        ];
+
+        $eventColors = [];
         $monitors = $repository->whereAirDateNotNull();
-        $monitors = Map::from($monitors)->map(function ($monitor) {
+        $monitors = Map::from($monitors)->map(function ($monitor) use (&$eventColors, $colors) {
+            if (!array_key_exists($monitor->getImdbId(), $eventColors)) {
+                $eventColors[$monitor->getImdbId()] = $colors[array_rand($colors)];
+            }
             return [
                 'id' => $monitor->getId(),
                 'title' => $monitor->getTitle() . ' (S' . str_pad($monitor->getSeason(), 2, '0', STR_PAD_LEFT) . 'E' . str_pad($monitor->getEpisode(), 2, '0', STR_PAD_LEFT) . ')',
                 'start' => $monitor->getAirDate()->format('Y-m-d H:i:s'),
-                'allDay' => true
+                'groupId' => $monitor->getImdbId(),
+                'allDay' => true,
+                'backgroundColor' => $eventColors[$monitor->getImdbId()],
+                'borderColor' => $eventColors[$monitor->getImdbId()],
             ];
         });
 

src/Monitor/Framework/Controller/WebController.php

@@ -28,4 +28,10 @@ class WebController extends AbstractController
     {
         return $this->render('monitor/index.html.twig');
     }
+
+    #[Route('/monitors/upcoming-episodes', name: 'app.monitor.upcoming-episodes', methods: ['GET'])]
+    public function upcomingEpisodes()
+    {
+        return $this->render('monitor/upcoming-episodes.html.twig');
+    }
 }

templates/index/test.html.twig

@@ -1,28 +1,9 @@
 {% extends 'base.html.twig' %}
 
-{% block h2 %}Upcoming Episodes{% endblock %}
+{% block h2 %}Test Test{% endblock %}
 
 {% block body %}
-    <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.19/index.global.min.js'></script>
+<div>
-
+    <!-- Well what are you doing here? -->
-    <div class="p-4">
+</div>
-        <twig:Card title="Upcoming episodes of shows your monitoring">
-            <div id="calendar" class="text-white">
-            </div>
-        </twig:Card>
-    </div>
-
-    <script>
-        document.addEventListener('DOMContentLoaded', async function() {
-            let data = await fetch('/api/upcoming-episodes');
-            data = (await data.json())['data'];
-
-            const calendarEl = document.getElementById('calendar');
-            const calendar = new FullCalendar.Calendar(calendarEl, {
-                initialView: 'dayGridMonth',
-                events: data['episodes'],
-            });
-            calendar.render();
-        });
-    </script>
 {% endblock %}

templates/monitor/index.html.twig

@@ -4,6 +4,10 @@
 {% block h2 %}Monitors{% endblock %}
 
 {% block action_buttons %}
+    <a href="{{ path('app.monitor.upcoming-episodes') }}" data-turbo="false"
+       class="h-6 bg-orange-500/80 hover:bg-orange-600/80 px-2 text-white rounded-ms text-sm font-semibold">
+        Upcoming Episodes
+    </a>
     <twig:ActionButton action="monitorDispatch" text="Run Monitors" />
 {% endblock %}
 

templates/monitor/upcoming-episodes.html.twig

@@ -0,0 +1,47 @@
+{% extends 'base.html.twig' %}
+
+{% block h2 %}Upcoming Episodes{% endblock %}
+
+{% block action_buttons %}
+    <a href="{{ path('app.monitor.upcoming-episodes') }}"
+       class="h-6 bg-orange-500/80 hover:bg-orange-600/80 px-2 text-white rounded-ms text-sm font-semibold">
+        Upcoming Episodes
+    </a>
+    <twig:ActionButton action="monitorDispatch" text="Run Monitors" />
+{% endblock %}
+
+{% block body %}
+    {{ turbo_page_requires_reload() }}
+    <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.19/index.global.min.js'></script>
+
+    <div class="p-4">
+        <twig:Card title="Upcoming episodes of shows your monitoring">
+            <div id="calendar" class="text-white">
+            </div>
+        </twig:Card>
+    </div>
+
+    <script>
+        function getView() {
+            if (window.innerWidth < 768) {
+                return 'listWeek';
+            } else {
+                return 'dayGridMonth';
+            }
+        }
+        document.addEventListener('DOMContentLoaded', async function() {
+            let data = await fetch('/api/monitor/upcoming-episodes');
+            data = (await data.json())['data'];
+
+            const calendarEl = document.getElementById('calendar');
+            const calendar = new FullCalendar.Calendar(calendarEl, {
+                initialView: getView(),
+                events: data['episodes'],
+                windowResize: function(arg) {
+                    this.changeView(getView());
+                }
+            });
+            calendar.render();
+        });
+    </script>
+{% endblock %}