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