popup.js aktualisiert
This commit is contained in:
209
popup.js
209
popup.js
@@ -1,100 +1,111 @@
|
|||||||
document.addEventListener('DOMContentLoaded', () => {
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
const list = document.getElementById('service-list');
|
const list = document.getElementById('service-list');
|
||||||
const empty = document.getElementById('empty-state');
|
const empty = document.getElementById('empty-state');
|
||||||
const dot = document.getElementById('status-dot');
|
const dot = document.getElementById('status-dot');
|
||||||
const settingsBtn = document.getElementById('settings-btn');
|
const settingsBtn = document.getElementById('settings-btn');
|
||||||
|
|
||||||
const icons = {
|
const icons = {
|
||||||
online: `<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"></polyline></svg>`,
|
online: `<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"></polyline></svg>`,
|
||||||
offline: `<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>`,
|
offline: `<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>`,
|
||||||
unknown: `<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>`
|
unknown: `<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>`
|
||||||
};
|
};
|
||||||
|
|
||||||
function render() {
|
function render() {
|
||||||
// Lade alle Server und die spezielle Auswahl für das Popup
|
// Lade alle Server und die spezielle Auswahl für das Popup
|
||||||
chrome.storage.sync.get({services: [], popupServers: []}, (data) => {
|
chrome.storage.sync.get({services: [], popupServers: []}, (data) => {
|
||||||
chrome.storage.local.get({serviceStatus: {}}, (local) => {
|
chrome.storage.local.get({serviceStatus: {}}, (local) => {
|
||||||
const allServices = data.services;
|
const allServices = data.services;
|
||||||
const popupSelection = data.popupServers;
|
const popupSelection = data.popupServers;
|
||||||
const statuses = local.serviceStatus;
|
const statuses = local.serviceStatus;
|
||||||
|
|
||||||
list.innerHTML = '';
|
list.innerHTML = '';
|
||||||
list.appendChild(empty);
|
list.appendChild(empty);
|
||||||
|
|
||||||
if (allServices.length === 0) {
|
if (allServices.length === 0) {
|
||||||
dot.className = 'status-dot red';
|
dot.className = 'status-dot red';
|
||||||
empty.style.display = 'flex';
|
empty.style.display = 'flex';
|
||||||
list.classList.remove('few-servers'); // Klasse entfernen
|
list.classList.remove('few-servers'); // Klasse entfernen
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
let displayServers = [];
|
let displayServers = [];
|
||||||
|
|
||||||
// Logik zur Bestimmung der anzuzeigenden Server
|
// Logik zur Bestimmung der anzuzeigenden Server
|
||||||
if (allServices.length <= 8) {
|
if (allServices.length <= 8) {
|
||||||
// Weniger als 8 Server: Alle anzeigen, Layout anpassen
|
// Weniger als 8 Server: Alle anzeigen, Layout anpassen
|
||||||
displayServers = allServices;
|
displayServers = allServices;
|
||||||
list.classList.add('few-servers');
|
list.classList.add('few-servers');
|
||||||
} else {
|
} else {
|
||||||
// Mehr als 8 Server: Festes 2-Spalten-Layout
|
// Mehr als 8 Server: Festes 2-Spalten-Layout
|
||||||
list.classList.remove('few-servers');
|
list.classList.remove('few-servers');
|
||||||
if (popupSelection.length > 0) {
|
if (popupSelection.length > 0) {
|
||||||
// Wenn eine Auswahl existiert, diese anzeigen
|
// Wenn eine Auswahl existiert, diese anzeigen
|
||||||
displayServers = popupSelection;
|
displayServers = popupSelection;
|
||||||
} else {
|
} else {
|
||||||
// Ansonsten die ersten 8 als Fallback
|
// Ansonsten die ersten 8 als Fallback
|
||||||
displayServers = allServices.slice(0, 8);
|
displayServers = allServices.slice(0, 8);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const onlineCount = displayServers.filter(s => statuses[s.name]?.status === 'online').length;
|
const onlineCount = displayServers.filter(s => statuses[s.name]?.status === 'online').length;
|
||||||
|
|
||||||
if (onlineCount === displayServers.length) dot.className = 'status-dot green pulse';
|
if (onlineCount === displayServers.length) dot.className = 'status-dot green pulse';
|
||||||
else if (onlineCount === 0) dot.className = 'status-dot red';
|
else if (onlineCount === 0) dot.className = 'status-dot red';
|
||||||
else dot.className = 'status-dot orange';
|
else dot.className = 'status-dot orange';
|
||||||
|
|
||||||
empty.style.display = 'none';
|
empty.style.display = 'none';
|
||||||
|
|
||||||
displayServers.forEach(s => {
|
displayServers.forEach(s => {
|
||||||
const st = statuses[s.name] || {status: 'unknown', responseTime: null};
|
const st = statuses[s.name] || {status: 'unknown', responseTime: null};
|
||||||
|
|
||||||
const card = document.createElement('div');
|
const card = document.createElement('div');
|
||||||
card.className = 'service-card';
|
card.className = 'service-card';
|
||||||
|
|
||||||
card.innerHTML = `
|
// === NEU ===
|
||||||
<div class="service-info">
|
// Macht die Karte klickbar und öffnet die URL
|
||||||
<h2>${s.name}</h2>
|
card.style.cursor = 'pointer'; // Visueller Hinweis für den Benutzer
|
||||||
<p>${s.adresse || ''}</p>
|
card.addEventListener('click', () => {
|
||||||
</div>
|
// Öffnet die URL des Dienstes in einem neuen Tab
|
||||||
<div class="status-badge ${st.status}">
|
if (s.adresse) {
|
||||||
${
|
chrome.tabs.create({ url: s.adresse });
|
||||||
st.status === 'online'
|
}
|
||||||
? icons.online + 'Online' + (st.responseTime ? ` · ${st.responseTime} ms` : '')
|
});
|
||||||
: st.status === 'offline'
|
// === ENDE DER ÄNDERUNG ===
|
||||||
? icons.offline + 'Offline'
|
|
||||||
: icons.unknown + 'Prüfung…'
|
card.innerHTML = `
|
||||||
}
|
<div class="service-info">
|
||||||
</div>
|
<h2>${s.name}</h2>
|
||||||
`;
|
<p>${s.adresse || ''}</p>
|
||||||
|
</div>
|
||||||
list.appendChild(card);
|
<div class="status-badge ${st.status}">
|
||||||
});
|
${
|
||||||
});
|
st.status === 'online'
|
||||||
});
|
? icons.online + 'Online' + (st.responseTime ? ` · ${st.responseTime} ms` : '')
|
||||||
}
|
: st.status === 'offline'
|
||||||
|
? icons.offline + 'Offline'
|
||||||
// Event Listener für Zahnrad-Button
|
: icons.unknown + 'Prüfung…'
|
||||||
if (settingsBtn) {
|
}
|
||||||
settingsBtn.addEventListener('click', () => {
|
</div>
|
||||||
chrome.runtime.openOptionsPage(() => {
|
`;
|
||||||
if (chrome.runtime.lastError) {
|
|
||||||
console.error(chrome.runtime.lastError);
|
list.appendChild(card);
|
||||||
window.open('options.html', '_blank'); // Fallback
|
});
|
||||||
}
|
});
|
||||||
});
|
});
|
||||||
});
|
}
|
||||||
}
|
|
||||||
|
// Event Listener für Zahnrad-Button
|
||||||
render();
|
if (settingsBtn) {
|
||||||
chrome.storage.onChanged.addListener(render);
|
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);
|
||||||
});
|
});
|
||||||
Reference in New Issue
Block a user