diff --git a/assets/bootstrap.js b/assets/bootstrap.js index 26a3bfa..5ca4f1a 100644 --- a/assets/bootstrap.js +++ b/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'}); diff --git a/assets/components/status-checker-span.js b/assets/components/status-checker-span.js new file mode 100644 index 0000000..776e3c3 --- /dev/null +++ b/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'; + } +} diff --git a/tailwind.config.js b/tailwind.config.js index 47ed93b..b928cf0 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -18,9 +18,13 @@ module.exports = { "bg-green-400", "bg-purple-400", "bg-orange-400", + "bg-red-500", + "bg-green-500", "bg-blue-600", "bg-rose-600", "bg-black/20", + "text-red-500", + "text-green-500", "alert-success", "alert-warning", "font-bold", diff --git a/templates/components/Header.html.twig b/templates/components/Header.html.twig index da0e00a..22e19d0 100644 --- a/templates/components/Header.html.twig +++ b/templates/components/Header.html.twig @@ -6,6 +6,20 @@