kodi/podman-mvp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat (ui): Light/Dark Theme added 02

Browse Source
This commit is contained in:
kodi
2026-03-04 07:29:43 +01:00
parent 1d5bdd5089
commit ebefd2d80c
4 changed files with 227 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webui/html/index.html
+54 -9
View File
@@ -28,9 +28,10 @@
</div>
</div>
<div class="flex">
<button class="btn ghost" onclick="pingApi()">Ping</button>
<button class="btn" onclick="refreshActive()">Ververs</button>
<button class="btn ghost" id="themeToggleBtn" title="Schakel light/dark mode">Theme</button>
<button class="btn ghost" onclick="pingApi()">◉ Ping</button>
<button class="btn" onclick="refreshActive()">↻ Ververs</button>
<button class="btn ghost" id="themeToggleBtn" title="Schakel light/dark mode">◐ Theme</button>
<span class="statusline headerMeta" id="lastRefreshHeader">Laatste refresh: -</span>
</div>
</div>
</div>
@@ -65,18 +66,32 @@
<main class="main">
<div class="wrap">
<div id="view-dashboard" class="grid">
<div class="card half">
<div class="card">
<div class="cardHeader">
<div class="cardTitle">Snel acties</div>
<div class="cardTitle">Platform overzicht</div>
<div class="flex">
<button class="btn ok" onclick="daemonReload()">daemon-reload</button>
<button class="btn" onclick="refreshActive()">Ververs alles</button>
</div>
</div>
<div class="cardBody">
<div class="flex">
<span class="pill"><span class="b" id="countPods">-</span> pods</span>
<span class="pill"><span class="b" id="countContainers">-</span> containers</span>
<div class="dashboardKpiGrid">
<div class="statCard">
<div class="statValue" id="countPods">-</div>
<div class="statLabel">Pods</div>
</div>
<div class="statCard">
<div class="statValue" id="countContainers">-</div>
<div class="statLabel">Containers</div>
</div>
<div class="statCard">
<div class="statValue" id="dashboardApiState">-</div>
<div class="statLabel">API status</div>
</div>
<div class="statCard">
<div class="statValue" id="dashboardLastRefresh">-</div>
<div class="statLabel">Laatste refresh</div>
</div>
</div>
<div class="hint">
Deze UI gebruikt jouw API endpoints onder <span class="mono">/api</span> (same origin).
@@ -84,6 +99,20 @@
</div>
</div>
</div>
<div class="card half">
<div class="cardHeader">
<div class="cardTitle">Snel acties</div>
</div>
<div class="cardBody">
<div class="actionBar">
<button class="btn" onclick="setTab('containers')">Ga naar containers</button>
<button class="btn" onclick="setTab('networks')">Ga naar netwerken</button>
<button class="btn" onclick="setTab('images')">Ga naar images</button>
<button class="btn" onclick="setTab('files')">Ga naar files</button>
</div>
<div class="hint">Gebruik de zijbalk voor detailbeheer; deze acties geven snelle toegang tot de hoofdsecties.</div>
</div>
</div>
</div>
<div id="view-containers" class="grid" style="display:none">
<div class="card card--menu-overflow" style="grid-column: 1 / -1;">
@@ -304,6 +333,7 @@
Huidig bestand: <span class="mono" id="filesCurrent">-</span>
</div>
<textarea id="filesEditor" class="textarea mono" spellcheck="false" placeholder="Selecteer links een bestand..."></textarea>
<div id="filesEditorStatus" class="filesEditorStatus muted">Geen bestand geselecteerd</div>
<div class="hint">
Na wijzigen van <span class="mono">*.container</span> moet je meestal <span class="mono">daemon-reload</span> doen (via de dashboard-knop).
</div>
@@ -453,7 +483,7 @@
const t = (s || '').toLowerCase();
if (t.includes('running') || t === 'running' || t === 'active') return `<span class="badge ok">${esc(s)}</span>`;
if (t.includes('exited') || t.includes('dead') || t.includes('stopped') || t === 'inactive') return `<span class="badge bad">${esc(s)}</span>`;
return `<span class="badge warn">${esc(s || 'unknown')}</span>`;
return `<span class="badge">${esc(s || 'unknown')}</span>`;
}
// ---- Modal ----
@@ -550,6 +580,20 @@
dot.style.background = ok ? 'var(--ok)' : 'var(--bad)';
dot.style.boxShadow = ok ? '0 0 0 6px rgba(45,212,191,.15)' : '0 0 0 6px rgba(251,113,133,.15)';
document.getElementById('statusLine').textContent = msg;
const apiStat = document.getElementById('dashboardApiState');
if (apiStat) apiStat.textContent = ok ? 'OK' : 'Fout';
}
function currentClockText() {
return new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' });
}
function setLastRefreshNow() {
const now = currentClockText();
const hdr = document.getElementById('lastRefreshHeader');
if (hdr) hdr.textContent = 'Laatste refresh: ' + now;
const dash = document.getElementById('dashboardLastRefresh');
if (dash) dash.textContent = now;
}
// ---- Dashboard refresh ----
@@ -568,6 +612,7 @@
document.getElementById('countContainers').textContent = cCount;
}
setApiState(true, 'API: OK');
setLastRefreshNow();
} catch (e) {
setApiState(false, 'API: fout (' + e.message + ')');
}