Show different statuses for pending, not aired, added

calendar.js

@@ -1,5 +1,19 @@
 const raws = {};
 let hideConfirmed = true;
+const icsUrls = [
+    {
+        url: '/sonarr-hs-ics',
+        name: 'hidden-sea',
+    },
+    {
+        url: '/sonarr-cb-ics',
+        name: 'cold-badlands',
+    },
+    {
+        url: '/sonarr-fv-ics',
+        name: 'fancy-valley',
+    },
+];
 
 async function fetchIcs(url, name)
 {
@@ -24,26 +38,45 @@ async function fetchIcs(url, name)
 
         let title = item.getFirstPropertyValue('summary');
         const status = item.getFirstPropertyValue('status');
+        const start = item.getFirstPropertyValue('dtstart').toJSDate();
+        const end = item.getFirstPropertyValue('dtend').toJSDate();
 
+        let isAdded = false;
         if (status.toLowerCase() === 'confirmed') {
             // Status toggled to only show upcoming/missing.
             if (hideConfirmed) {
                 return null;
             }
 
+            isAdded = true;
             title = `✅ ${title}`;
         }
 
-        if (status !== 'Confirmed' && status !== 'Tentative') {
-            console.log(status);
+        const now = Date.now();
+
+        if (!isAdded)
+        {
+            /**
+             * Start date in the past
+             */
+            if (now > start.getTime()) {
+                title = `🟠 ${title}`;
+            }
+            else {
+                title = `⏰ ${title}`;
+            }
         }
 
+        // if (status.toLowerCase() !== 'confirmed' && status !== 'tentative') {
+        //     console.log(status);
+        // }
+
         title = `${title} [${name}]`;
 
         return {
             title: title,
-            start: item.getFirstPropertyValue('dtstart').toJSDate(),
-            end: item.getFirstPropertyValue('dtend').toJSDate(),
+            start,
+            end,
             display: 'list-item',
         };
     });
@@ -51,8 +84,13 @@ async function fetchIcs(url, name)
     return events;
 }
 
+let keyHandlersAdded = false;
 function keyHandlers(calendar)
 {
+    if (keyHandlersAdded) {
+        return;
+    }
+
     window.addEventListener('keydown', function(ev) {
         const key = ev.key;
 
@@ -70,6 +108,8 @@ function keyHandlers(calendar)
                 break;
         }
     });
+
+    keyHandlersAdded = true;
 }
 
 function scrollToCalendarDay()
@@ -111,27 +151,12 @@ const toggleButton = {
     },
 };
 
-async function loadSonarrCalendar(shouldScroll = true)
+async function loadSonarrCalendar(shouldScroll = false)
 {
     const calendarElement = document.querySelector('#sonarr-calendar');
     let events = [];
 
-    const urls = [
-        // {
-        //     url: 'https://tv.cocks.no/sonarr-ics',
-        //     name: 'hidden-sea',
-        // },
-        {
-            url: 'https://tv.cocks.no/sonarr-cb-ics',
-            name: 'cold-badlands',
-        },
-        {
-            url: 'https://tv.cocks.no/sonarr-fv-ics',
-            name: 'fancy-valley',
-        },
-    ];
-
-    for (const list of urls)
+    for (const list of icsUrls)
     {
         try {
             const { url, name } = list;
@@ -182,4 +207,11 @@ async function loadSonarrCalendar(shouldScroll = true)
 
 window.addEventListener('DOMContentLoaded', function() {
     loadSonarrCalendar();
+
+    this.setInterval(
+        function() {
+            loadSonarrCalendar(false);
+        },
+        60 * 1000
+    );
 });

index.html

@@ -45,6 +45,27 @@
 
     <h2>Upcoming TV show episodes &mdash; English, Norwegian &amp; Anime:</h2>
 
+    <table>
+        <tr>
+            <th>Icon</th>
+            <th>Meaning</th>
+        </tr>
+        <tr>
+            <td>✅</td>
+            <td>Already downloaded & imported. Plex will pick it up within a few minutes if it hasn't already.</td>
+        </tr>
+        <tr>
+            <td>🟠</td>
+            <td>Episode has aired, waiting for available download.</td>
+        </tr>
+        <tr>
+            <td>⏰</td>
+            <td>Episode has <strong>NOT</strong> aired.</td>
+        </tr>
+    </table>
+
+    <p>Calendar will refresh every minute.</p>
+
     <div id="sonarr-calendar">
         <p id="status-message">Loading... Please wait 🙂</p>
     </div>

nginx-location.conf

@@ -0,0 +1,10 @@
+# This is purely a sample config for proxying Sonarr's ICS
+# Since that normally requires the API key, which you normally don't want to expose to the public.
+
+location /sonarr-ics {
+    proxy_pass "https://sonarr.example.com/feed/calendar/Sonarr.ics?apikey=YOUR_API_KEY_HERE";
+
+    proxy_set_header X-Real-IP $remote_addr;
+    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+    proxy_set_header X-Forwarded-Proto $scheme;
+}