feat: status indicators in header for tmdb & torrentio

assets/bootstrap.js

@@ -5,6 +5,7 @@ import DownloadOptionTr from './components/download-option-tr.js';
 import DownloadListRow from './components/download-list-row.js';
 import MonitorListRow from './components/monitor-list-row.js';
 import MovieContainer   from "./components/movie-container.js";
+import StatusCheckerSpan from "./components/status-checker-span.js";
 
 import { startStimulusApp } from '@symfony/stimulus-bundle';
 import Popover from '@stimulus-components/popover';
@@ -24,3 +25,4 @@ customElements.define('movie-container', MovieContainer);
 customElements.define('dl-tr', DownloadOptionTr, {extends: 'tr'});
 customElements.define('download-list-row', DownloadListRow, {extends: 'tr'});
 customElements.define('monitor-list-row', MonitorListRow, {extends: 'tr'});
+customElements.define('status-checker-span', StatusCheckerSpan, {extends: 'span'});

assets/components/status-checker-span.js

@@ -0,0 +1,40 @@
+export default class PreviewContentDialog extends HTMLSpanElement {
+    #url;
+    #service;
+    #status;
+
+    #statusTexts = {
+        200: 'up',
+        204: 'up'
+    }
+
+    #statusColors = {
+        200: 'bg-green-500',
+        204: 'bg-green-500'
+    }
+
+    constructor() {
+        super();
+        this.#url = this.getAttribute('url');
+        this.#service = this.getAttribute('service');
+
+        (async () => await this.checkStatus())();
+        setInterval(async () => await this.checkStatus(), 1000 * 60 * 10);
+    }
+
+    async checkStatus() {
+        const response = await fetch(this.#url);
+        this.#status = response.status;
+        this.setAttribute('title', this.getTitle());
+        this.classList.remove('bg-red-500', 'bg-green-500');
+        this.classList.add(this.getColor());
+    }
+
+    getTitle() {
+        return `${this.#service} is ${this.#statusTexts[this.#status] ?? 'down'}`
+    }
+
+    getColor() {
+        return this.#statusColors[this.#status] ?? 'bg-red-500';
+    }
+}