fix: adds calendar button to link to upcoming episodes, adds titles to A tags

.env

@@ -57,4 +57,4 @@ OIDC_BYPASS_FORM_LOGIN=false
 ###< symfony/ntfy-notifier ###
 
 NOTIFICATION_TRANSPORT=
-NTFY_DNS=
+NTFY_DSN=

assets/icons/solar/calendar-linear.svg

@@ -0,0 +1 @@
+<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none"><path stroke="currentColor" stroke-width="1.5" d="M2 12c0-3.771 0-5.657 1.172-6.828S6.229 4 10 4h4c3.771 0 5.657 0 6.828 1.172S22 8.229 22 12v2c0 3.771 0 5.657-1.172 6.828S17.771 22 14 22h-4c-3.771 0-5.657 0-6.828-1.172S2 17.771 2 14z"/><path stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M7 4V2.5M17 4V2.5M2.5 9h19"/><path fill="currentColor" d="M18 17a1 1 0 1 1-2 0a1 1 0 0 1 2 0m0-4a1 1 0 1 1-2 0a1 1 0 0 1 2 0m-5 4a1 1 0 1 1-2 0a1 1 0 0 1 2 0m0-4a1 1 0 1 1-2 0a1 1 0 0 1 2 0m-5 4a1 1 0 1 1-2 0a1 1 0 0 1 2 0m0-4a1 1 0 1 1-2 0a1 1 0 0 1 2 0"/></g></svg>

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

@@ -71,13 +71,33 @@ class ApiController extends AbstractController
     #[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()],
             ];
         });
 

templates/components/Header.html.twig

@@ -6,11 +6,16 @@
             <div class="md:flex md:items-center md:gap-12">
                 <nav aria-label="Global" class="md:block">
                     <ul class="flex items-center gap-6 text-sm">
+                        <li>
+                            <a href="{{ path('app.monitor.upcoming-episodes') }}" data-turbo="false" title="View upcoming episodes of the shows you're subscribed to.">
+                                <twig:ux:icon name="solar:calendar-linear" width="25px" class="text-orange-500" />
+                            </a>
+                        </li>
                         <li class="hidden">
                             <twig:ux:icon name="fluent:alert-12-regular" width="30px" class="text-gray-950 bg-orange-500 rounded-full p-2"/>
                         </li>
                         <li class="hidden md:block">
-                            <a href="{{ path('app_logout') }}">
+                            <a href="{{ path('app_logout') }}" title="Log out of Torsearch.">
                                 <twig:ux:icon name="material-symbols:logout" width="25px" class="text-orange-500" />
                             </a>
                         </li>

templates/monitor/upcoming-episodes.html.twig

@@ -22,14 +22,24 @@
     </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: 'dayGridMonth',
+                initialView: getView(),
                 events: data['episodes'],
+                windowResize: function(arg) {
+                    this.changeView(getView());
+                }
             });
             calendar.render();
         });