+ `;
}).join('');
}
-// ── Host Grid ─────────────────────────────────────────────
function renderHostGrid() {
const grid = document.getElementById('hostGrid');
- grid.innerHTML = allHosts.map(h => `
-
`).join('');
}
-// ── Host Detail Drawer ────────────────────────────────────
async function openHost(name) {
+ const drawer = document.getElementById('drawer');
document.getElementById('drawerTitle').textContent = name;
- document.getElementById('drawerBg').classList.remove('opacity-0','pointer-events-none');
- document.getElementById('drawer').classList.remove('translate-x-full');
+ document.getElementById('drawerBg').classList.remove('is-hidden');
+ drawer.classList.remove('is-closed');
+ drawer.setAttribute('aria-hidden', 'false');
const body = document.getElementById('drawerBody');
- body.innerHTML = '
Loading...
';
- const [histR, calR] = await Promise.all([fetch(`${API}/api/history/${name}?days=30`), fetch(`${API}/api/calendar/${name}?days=30`)]);
- const history = await histR.json();
- const calendar = await calR.json();
- const host = allHosts.find(h => h.name === name) || {};
+ try {
+ const [historyResponse, calendarResponse] = await Promise.all([
+ fetch(`${API}/api/history/${encodeURIComponent(name)}?days=30`),
+ fetch(`${API}/api/calendar/${encodeURIComponent(name)}?days=30`),
+ ]);
+ const history = await historyResponse.json();
+ const calendar = await calendarResponse.json();
+ const totalSize = history.reduce((sum, entry) => sum + Number(entry.original_size || 0), 0);
+ const successRate = history.length
+ ? Math.round(history.filter(entry => entry.status === 'ok').length / history.length * 100)
+ : 0;
- const totalSize = history.reduce((s,e) => s + e.original_size, 0);
- const avgDur = history.length ? Math.round(history.reduce((s,e) => s + e.duration_sec, 0) / history.length) : 0;
- const rate = history.length ? Math.round(history.filter(e => e.status === 'ok').length / history.length * 100) : 0;
-
- body.innerHTML = `
-
-
- ${history.slice(0, 15).map(e => `
-
-
${new Date(e.timestamp).toLocaleString('de-DE',{day:'2-digit',month:'2-digit',hour:'2-digit',minute:'2-digit'})}
-
-
${fmtDuration(e.duration_sec)}
-
${fmtBytes(e.original_size)}
-
${e.nfiles_new ? `+${e.nfiles_new}` : ''}
+ body.innerHTML = `
+
+
${history.length}Sicherungen
+
${successRate}%Erfolgreich
+
${fmtBytes(totalSize)}Volumen
- `).join('')}
-
-
-
-
-
-
- `;
+
+ 30 Tage
+ ${buildCalendar(calendar)}
+
+
+
+ Datenvolumen
+ ${buildSizeChart(history)}
+
+
+
+ Letzte Sicherungen
+
+ ${history.slice(0, 15).map(entry => `
+
+
+
+ ${fmtDuration(entry.duration_sec)}
+ ${fmtBytes(entry.original_size)}
+ ${entry.nfiles_new ? `+${entry.nfiles_new}` : ''}
+
+ `).join('') || '
Keine Einträge im Zeitraum.
'}
+
+
+
+
+
+
`;
+ } catch (error) {
+ body.innerHTML = '
Die Host-Details konnten nicht geladen werden.
';
+ console.error('Host-Details konnten nicht geladen werden:', error);
+ }
}
-function buildCalendar(cal) {
+function buildCalendar(calendar) {
const days = [];
- for (let i = 29; i >= 0; i--) {
- const d = new Date(); d.setDate(d.getDate() - i);
- const key = d.toISOString().split('T')[0];
- const data = cal[key];
- const num = d.getDate();
- if (!data) { days.push(`
${num}
`); }
- else {
- const cls = data.has_error ? 'bg-error/20 text-error' : 'bg-secondary/20 text-secondary';
- days.push(`
${num}
`);
+ for (let offset = 29; offset >= 0; offset -= 1) {
+ const date = new Date();
+ date.setDate(date.getDate() - offset);
+ const key = date.toISOString().split('T')[0];
+ const data = calendar[key];
+ if (!data) {
+ days.push(`
${date.getDate()}
`);
+ } else {
+ const state = data.has_error ? 'has-error' : 'has-backup';
+ days.push(`
${date.getDate()}
`);
}
}
return days.join('');
@@ -270,91 +325,149 @@ function buildCalendar(cal) {
function buildSizeChart(history) {
const byDay = {};
- history.forEach(e => { const d = e.timestamp.split('T')[0]; byDay[d] = (byDay[d]||0) + e.original_size; });
+ history.forEach(entry => {
+ const day = entry.timestamp.split('T')[0];
+ byDay[day] = (byDay[day] || 0) + Number(entry.original_size || 0);
+ });
const days = [];
- for (let i = 29; i >= 0; i--) { const d = new Date(); d.setDate(d.getDate()-i); days.push({key:d.toISOString().split('T')[0], size: byDay[d.toISOString().split('T')[0]]||0}); }
- const max = Math.max(...days.map(d=>d.size), 1);
- return days.map(d => {
- const h = d.size ? Math.max(6, (d.size/max)*100) : 4;
- return `
`;
+ for (let offset = 29; offset >= 0; offset -= 1) {
+ const date = new Date();
+ date.setDate(date.getDate() - offset);
+ const key = date.toISOString().split('T')[0];
+ days.push({key, size: byDay[key] || 0});
+ }
+ const maximum = Math.max(...days.map(day => day.size), 1);
+ return days.map(day => {
+ const height = day.size ? Math.max(6, (day.size / maximum) * 100) : 3;
+ return `
`;
}).join('');
}
function closeDrawer() {
- document.getElementById('drawerBg').classList.add('opacity-0','pointer-events-none');
- document.getElementById('drawer').classList.add('translate-x-full');
+ const drawer = document.getElementById('drawer');
+ document.getElementById('drawerBg').classList.add('is-hidden');
+ drawer.classList.add('is-closed');
+ drawer.setAttribute('aria-hidden', 'true');
}
-// ── Modal ─────────────────────────────────────────────────
function openAddHost() {
- document.getElementById('modalTitle').textContent = 'Add Host';
+ document.getElementById('modalTitle').textContent = 'Host hinzufügen';
document.getElementById('formMode').value = 'add';
- document.getElementById('formName').value = ''; document.getElementById('formName').disabled = false;
+ document.getElementById('formName').value = '';
+ document.getElementById('formName').disabled = false;
document.getElementById('formKumaUrl').value = '';
document.getElementById('formEnabled').checked = true;
openModal();
}
-async function openEditHost(name) {
+function openEditHost(name) {
closeDrawer();
- const h = allHosts.find(x => x.name === name); if (!h) return;
- document.getElementById('modalTitle').textContent = `Edit: ${name}`;
+ const host = allHosts.find(item => item.name === name);
+ if (!host) return;
+ document.getElementById('modalTitle').textContent = `${name} bearbeiten`;
document.getElementById('formMode').value = 'edit';
- document.getElementById('formName').value = h.name; document.getElementById('formName').disabled = true;
- document.getElementById('formKumaUrl').value = h.kuma_push_url || '';
- document.getElementById('formEnabled').checked = h.enabled;
+ document.getElementById('formName').value = host.name;
+ document.getElementById('formName').disabled = true;
+ document.getElementById('formKumaUrl').value = host.kuma_push_url || '';
+ document.getElementById('formEnabled').checked = host.enabled;
openModal();
}
-async function saveHost(e) {
- e.preventDefault();
+async function saveHost(event) {
+ event.preventDefault();
const mode = document.getElementById('formMode').value;
const name = document.getElementById('formName').value.trim();
- const kuma = document.getElementById('formKumaUrl').value.trim();
+ const kumaUrl = document.getElementById('formKumaUrl').value.trim();
const enabled = document.getElementById('formEnabled').checked;
if (mode === 'add') {
- await apiFetch(`${API}/api/hosts`, { method:'POST', headers:authHeaders(), body:JSON.stringify({name, kuma_push_url:kuma}) });
- toast(`${name} added`);
+ await apiFetch(`${API}/api/hosts`, {
+ method: 'POST', headers: authHeaders(), body: JSON.stringify({name, kuma_push_url: kumaUrl}),
+ });
+ toast(`${name} wurde hinzugefügt`);
} else {
- await apiFetch(`${API}/api/hosts/${name}`, { method:'PUT', headers:authHeaders(), body:JSON.stringify({kuma_push_url:kuma, enabled}) });
- toast(`${name} updated`);
+ await apiFetch(`${API}/api/hosts/${encodeURIComponent(name)}`, {
+ method: 'PUT', headers: authHeaders(), body: JSON.stringify({kuma_push_url: kumaUrl, enabled}),
+ });
+ toast(`${name} wurde aktualisiert`);
}
- closeModal(); loadAll();
+ closeModal();
+ loadAll();
}
async function confirmDelete(name) {
- if (!confirm(`Delete "${name}" and all history?`)) return;
- await apiFetch(`${API}/api/hosts/${name}`, { method:'DELETE', headers:authHeaders() });
- toast(`${name} deleted`); closeDrawer(); loadAll();
+ if (!confirm(`Host "${name}" einschließlich Historie löschen?`)) return;
+ await apiFetch(`${API}/api/hosts/${encodeURIComponent(name)}`, {method: 'DELETE', headers: authHeaders()});
+ toast(`${name} wurde gelöscht`);
+ closeDrawer();
+ loadAll();
}
-function openModal() { document.getElementById('modalBg').classList.remove('opacity-0','pointer-events-none'); const m = document.getElementById('modal'); m.classList.remove('scale-95','opacity-0','pointer-events-none'); }
-function closeModal() { document.getElementById('modalBg').classList.add('opacity-0','pointer-events-none'); const m = document.getElementById('modal'); m.classList.add('scale-95','opacity-0','pointer-events-none'); }
+function openModal() {
+ const modal = document.getElementById('modal');
+ document.getElementById('modalBg').classList.remove('is-hidden');
+ modal.classList.remove('is-closed');
+ modal.setAttribute('aria-hidden', 'false');
+ setTimeout(() => document.getElementById('formName').focus(), 0);
+}
+
+function closeModal() {
+ const modal = document.getElementById('modal');
+ document.getElementById('modalBg').classList.add('is-hidden');
+ modal.classList.add('is-closed');
+ modal.setAttribute('aria-hidden', 'true');
+}
-// ── Navigation ────────────────────────────────────────────
function showPage(page) {
currentPage = page;
- ['dashboard','alerts','hosts','config'].forEach(p => {
- document.getElementById(`page-${p}`).classList.toggle('hidden', p !== page);
- // Nav highlights
- const nav = document.getElementById(`nav-${p}`);
- const side = document.getElementById(`side-${p}`);
- if (nav) { nav.className = p === page ? 'text-sm font-bold tracking-tight text-blue-400 px-3 py-1 rounded-lg font-headline' : 'text-sm font-medium tracking-tight text-slate-400 hover:bg-slate-800/50 px-3 py-1 rounded-lg transition-colors font-headline'; }
- if (side) { side.className = p === page ? 'flex items-center gap-3 px-4 py-3 rounded-xl bg-blue-600/10 text-blue-400 border-r-2 border-blue-500 font-headline text-sm font-semibold' : 'flex items-center gap-3 px-4 py-3 rounded-xl text-slate-500 hover:text-slate-300 hover:bg-slate-900/80 transition-all font-headline text-sm font-semibold'; }
+ ['dashboard', 'alerts', 'hosts', 'config'].forEach(item => {
+ document.getElementById(`page-${item}`).classList.toggle('hidden', item !== page);
+ const nav = document.getElementById(`nav-${item}`);
+ nav.classList.toggle('is-active', item === page);
+ if (item === page) nav.setAttribute('aria-current', 'page');
+ else nav.removeAttribute('aria-current');
});
+ window.scrollTo({top: 0, behavior: 'smooth'});
}
-// ── Toast ─────────────────────────────────────────────────
-function toast(msg) {
- const t = document.createElement('div');
- t.className = 'glass px-5 py-3 rounded-xl text-sm font-medium text-white shadow-2xl flex items-center gap-2 animate-[slideIn_0.3s_ease-out]';
- t.innerHTML = `
check_circle ${msg}`;
- document.getElementById('toasts').appendChild(t);
- setTimeout(() => t.remove(), 4000);
+function toast(message) {
+ const element = document.createElement('div');
+ element.className = 'toast';
+ element.textContent = message;
+ document.getElementById('toasts').appendChild(element);
+ setTimeout(() => element.remove(), 4000);
}
-// ── Helpers ───────────────────────────────────────────────
-function fmtBytes(b) { if (!b) return '0 B'; const u = ['B','KB','MB','GB','TB']; const i = Math.floor(Math.log(b)/Math.log(1024)); return (b/Math.pow(1024,i)).toFixed(i>0?1:0)+' '+u[i]; }
-function fmtDuration(s) { if (!s) return '–'; if (s<60) return s+'s'; if (s<3600) return Math.floor(s/60)+'m'; return Math.floor(s/3600)+'h '+Math.floor((s%3600)/60)+'m'; }
-function timeAgo(iso) { const d=(Date.now()-new Date(iso).getTime())/1000; if(d<60) return 'just now'; if(d<3600) return Math.floor(d/60)+'m ago'; if(d<86400) return Math.floor(d/3600)+'h ago'; return Math.floor(d/86400)+'d ago'; }
-function statusChipClass(s) { return { ok:'bg-secondary/10 text-secondary border border-secondary/20', error:'bg-error/10 text-error border border-error/20', stale:'bg-tertiary/10 text-tertiary border border-tertiary/20', disabled:'bg-outline/10 text-outline border border-outline/20' }[s] || ''; }
+function fmtBytes(bytes) {
+ const value = Number(bytes || 0);
+ if (!value) return '0 B';
+ const units = ['B', 'KiB', 'MiB', 'GiB', 'TiB'];
+ const index = Math.min(Math.floor(Math.log(value) / Math.log(1024)), units.length - 1);
+ const number = value / Math.pow(1024, index);
+ return `${number.toLocaleString('de-DE', {maximumFractionDigits: index > 0 ? 1 : 0})} ${units[index]}`;
+}
+
+function fmtDuration(seconds) {
+ const value = Number(seconds || 0);
+ if (value <= 0) return '–';
+ if (value < 60) return `${value.toLocaleString('de-DE', {maximumFractionDigits: 1})} s`;
+ if (value < 3600) return `${Math.floor(value / 60)} min`;
+ return `${Math.floor(value / 3600)} h ${Math.floor((value % 3600) / 60)} min`;
+}
+
+function timeAgo(iso) {
+ const seconds = (Date.now() - new Date(iso).getTime()) / 1000;
+ if (seconds < 60) return 'gerade eben';
+ if (seconds < 3600) return `vor ${Math.floor(seconds / 60)} min`;
+ if (seconds < 86400) return `vor ${Math.floor(seconds / 3600)} h`;
+ return `vor ${Math.floor(seconds / 86400)} T.`;
+}
+
+function escapeHtml(value) {
+ return String(value ?? '').replace(/[&<>"]/g, character => ({
+ '&': '&', '<': '<', '>': '>', '"': '"',
+ })[character]);
+}
+
+function escapeAttr(value) {
+ return escapeHtml(value).replace(/'/g, ''');
+}