From 2a61d6a577356121f8592161ba972193b21ef89f Mon Sep 17 00:00:00 2001 From: M_Viper Date: Sat, 6 Dec 2025 15:12:57 +0000 Subject: [PATCH] popup.js aktualisiert --- popup.js | 209 +++++++++++++++++++++++++++++-------------------------- 1 file changed, 110 insertions(+), 99 deletions(-) diff --git a/popup.js b/popup.js index 24edc28..0edf68d 100644 --- a/popup.js +++ b/popup.js @@ -1,100 +1,111 @@ -document.addEventListener('DOMContentLoaded', () => { - const list = document.getElementById('service-list'); - const empty = document.getElementById('empty-state'); - const dot = document.getElementById('status-dot'); - const settingsBtn = document.getElementById('settings-btn'); - - const icons = { - online: ``, - offline: ``, - unknown: `` - }; - - function render() { - // Lade alle Server und die spezielle Auswahl für das Popup - chrome.storage.sync.get({services: [], popupServers: []}, (data) => { - chrome.storage.local.get({serviceStatus: {}}, (local) => { - const allServices = data.services; - const popupSelection = data.popupServers; - const statuses = local.serviceStatus; - - list.innerHTML = ''; - list.appendChild(empty); - - if (allServices.length === 0) { - dot.className = 'status-dot red'; - empty.style.display = 'flex'; - list.classList.remove('few-servers'); // Klasse entfernen - return; - } - - let displayServers = []; - - // Logik zur Bestimmung der anzuzeigenden Server - if (allServices.length <= 8) { - // Weniger als 8 Server: Alle anzeigen, Layout anpassen - displayServers = allServices; - list.classList.add('few-servers'); - } else { - // Mehr als 8 Server: Festes 2-Spalten-Layout - list.classList.remove('few-servers'); - if (popupSelection.length > 0) { - // Wenn eine Auswahl existiert, diese anzeigen - displayServers = popupSelection; - } else { - // Ansonsten die ersten 8 als Fallback - displayServers = allServices.slice(0, 8); - } - } - - const onlineCount = displayServers.filter(s => statuses[s.name]?.status === 'online').length; - - if (onlineCount === displayServers.length) dot.className = 'status-dot green pulse'; - else if (onlineCount === 0) dot.className = 'status-dot red'; - else dot.className = 'status-dot orange'; - - empty.style.display = 'none'; - - displayServers.forEach(s => { - const st = statuses[s.name] || {status: 'unknown', responseTime: null}; - - const card = document.createElement('div'); - card.className = 'service-card'; - - card.innerHTML = ` -
-

${s.name}

-

${s.adresse || ''}

-
-
- ${ - st.status === 'online' - ? icons.online + 'Online' + (st.responseTime ? ` · ${st.responseTime} ms` : '') - : st.status === 'offline' - ? icons.offline + 'Offline' - : icons.unknown + 'Prüfung…' - } -
- `; - - list.appendChild(card); - }); - }); - }); - } - - // Event Listener für Zahnrad-Button - if (settingsBtn) { - settingsBtn.addEventListener('click', () => { - chrome.runtime.openOptionsPage(() => { - if (chrome.runtime.lastError) { - console.error(chrome.runtime.lastError); - window.open('options.html', '_blank'); // Fallback - } - }); - }); - } - - render(); - chrome.storage.onChanged.addListener(render); +document.addEventListener('DOMContentLoaded', () => { + const list = document.getElementById('service-list'); + const empty = document.getElementById('empty-state'); + const dot = document.getElementById('status-dot'); + const settingsBtn = document.getElementById('settings-btn'); + + const icons = { + online: ``, + offline: ``, + unknown: `` + }; + + function render() { + // Lade alle Server und die spezielle Auswahl für das Popup + chrome.storage.sync.get({services: [], popupServers: []}, (data) => { + chrome.storage.local.get({serviceStatus: {}}, (local) => { + const allServices = data.services; + const popupSelection = data.popupServers; + const statuses = local.serviceStatus; + + list.innerHTML = ''; + list.appendChild(empty); + + if (allServices.length === 0) { + dot.className = 'status-dot red'; + empty.style.display = 'flex'; + list.classList.remove('few-servers'); // Klasse entfernen + return; + } + + let displayServers = []; + + // Logik zur Bestimmung der anzuzeigenden Server + if (allServices.length <= 8) { + // Weniger als 8 Server: Alle anzeigen, Layout anpassen + displayServers = allServices; + list.classList.add('few-servers'); + } else { + // Mehr als 8 Server: Festes 2-Spalten-Layout + list.classList.remove('few-servers'); + if (popupSelection.length > 0) { + // Wenn eine Auswahl existiert, diese anzeigen + displayServers = popupSelection; + } else { + // Ansonsten die ersten 8 als Fallback + displayServers = allServices.slice(0, 8); + } + } + + const onlineCount = displayServers.filter(s => statuses[s.name]?.status === 'online').length; + + if (onlineCount === displayServers.length) dot.className = 'status-dot green pulse'; + else if (onlineCount === 0) dot.className = 'status-dot red'; + else dot.className = 'status-dot orange'; + + empty.style.display = 'none'; + + displayServers.forEach(s => { + const st = statuses[s.name] || {status: 'unknown', responseTime: null}; + + const card = document.createElement('div'); + card.className = 'service-card'; + + // === NEU === + // Macht die Karte klickbar und öffnet die URL + card.style.cursor = 'pointer'; // Visueller Hinweis für den Benutzer + card.addEventListener('click', () => { + // Öffnet die URL des Dienstes in einem neuen Tab + if (s.adresse) { + chrome.tabs.create({ url: s.adresse }); + } + }); + // === ENDE DER ÄNDERUNG === + + card.innerHTML = ` +
+

${s.name}

+

${s.adresse || ''}

+
+
+ ${ + st.status === 'online' + ? icons.online + 'Online' + (st.responseTime ? ` · ${st.responseTime} ms` : '') + : st.status === 'offline' + ? icons.offline + 'Offline' + : icons.unknown + 'Prüfung…' + } +
+ `; + + list.appendChild(card); + }); + }); + }); + } + + // Event Listener für Zahnrad-Button + if (settingsBtn) { + settingsBtn.addEventListener('click', () => { + chrome.runtime.openOptionsPage(() => { + if (chrome.runtime.lastError) { + console.error(chrome.runtime.lastError); + window.open('options.html', '_blank'); // Fallback + } + }); + }); + } + + render(); + chrome.storage.onChanged.addListener(render); }); \ No newline at end of file