Rework hostname addition, add refresh button

calendar.js

@@ -15,11 +15,11 @@ const icsUrls = [
     },
 ];
 
-async function fetchIcs(url, name)
+async function fetchIcs(url, name, shouldForce)
 {
     let icalRaw = raws[name] || '';
 
-    if (!raws[name]) {
+    if (!raws[name] || shouldForce) {
         const response = await fetch(url);
         icalRaw = await response.text();
         raws[name] = icalRaw;
@@ -72,7 +72,7 @@ async function fetchIcs(url, name)
         //     console.log(status);
         // }
 
-        title = `${title} (${publisher})`;
+        title = `${title} [${publisher}]`;
 
         return {
             title: title,
@@ -80,6 +80,9 @@ async function fetchIcs(url, name)
             end,
             display: 'list-item',
             classNames: [name],
+            extendedProps: {
+                hostname: name,
+            }
         };
     });
 
@@ -136,10 +139,7 @@ const showAllText = 'Show all tracked episodes';
 const showTrackedText = 'Show only missing/upcoming episodes';
 const toggleButton = {
     text: (hideConfirmed ? showAllText : showTrackedText),
-    click: async function(event) {
-        const btn = event.target;
-        console.log(btn);
-        
+    click: async function() {
         if (!hideConfirmed) {
             toggleButton.text = showAllText;
         }
@@ -149,11 +149,18 @@ const toggleButton = {
 
         hideConfirmed = !hideConfirmed;
 
-        await loadSonarrCalendar(false);
+        await loadSonarrCalendar();
     },
 };
 
-async function loadSonarrCalendar(shouldScroll = false)
+const refreshButton = {
+    text: 'Refresh calendar',
+    click: function() {
+        loadSonarrCalendar(true);
+    },
+};
+
+async function loadSonarrCalendar(shouldForce = false)
 {
     const calendarElement = document.querySelector('#sonarr-calendar');
     let events = [];
@@ -162,7 +169,7 @@ async function loadSonarrCalendar(shouldScroll = false)
     {
         try {
             const { url, name } = list;
-            let fetched = await fetchIcs(url, name);
+            let fetched = await fetchIcs(url, name, shouldForce);
             fetched = fetched.filter(x => x !== null);
 
             events = [...events, ...fetched];
@@ -176,16 +183,22 @@ async function loadSonarrCalendar(shouldScroll = false)
         // initialView: 'dayGridMonth',
         customButtons: {
             toggleButton,
+            refreshButton,
         },
         themeSystem: 'bootstrap5',
         initialView: 'listWeek',
         initialDate: new Date(),
         headerToolbar: {
-            left: 'prev,next today toggleButton',
+            left: 'prev,next today',
             center: 'title',
             // right: 'dayGridMonth,dayGridWeek,dayGridDay,listWeek',
+            right: 'toggleButton refreshButton',
         },
         events: events,
+        eventDidMount: function(info) {
+            const hostname = info.event.extendedProps.hostname;
+            info.el.querySelector('.fc-list-event-title').innerHTML += `<span class="float-end">${hostname}</span>`;
+        }
     });
 
     const message = document.querySelector('#status-message');
@@ -213,7 +226,7 @@ window.addEventListener('DOMContentLoaded', function() {
 
     this.setInterval(
         function() {
-            loadSonarrCalendar(false);
+            loadSonarrCalendar(true);
         },
         60 * 1000
     );

index.html

@@ -39,7 +39,7 @@
         <table class="table table-striped table-hover mt-4">
             <tr>
                 <th>Icon</th>
-                <th>Meaning</th>
+                <th>Description</th>
             </tr>
             <tr>
                 <td>✅</td>