fix: cpu/mem container view

This commit is contained in:
2026-03-27 18:23:16 +01:00
parent 7d2f19f81f
commit 94a2f4586a
3 changed files with 175 additions and 69 deletions
+26 -7
View File
@@ -29,9 +29,7 @@
</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" id="themeToggleBtn" title="Schakel thema">🌙</button>
<span class="statusline headerMeta" id="lastRefreshHeader">Laatste refresh: -</span>
</div>
</div>
@@ -205,7 +203,8 @@
<input type="checkbox" id="networksMapConnectedOnly">
<span class="muted">Alleen verbonden</span>
</label>
<span class="muted" id="networksMapStatus" style="margin-left:auto;">Kaartweergave (placeholder)</span>
<span class="muted" id="networksMapStatus" style="margin-left:auto;">Kaartweergave (placeholder)</span>
<button class="btn small ghost" type="button" id="networksMapExpandBtn" title="Vergroot naar volledig scherm"></button>
</div>
</div>
@@ -777,9 +776,9 @@
function updateThemeToggleUi(theme) {
const btn = document.getElementById('themeToggleBtn');
if (!btn) return;
const next = theme === 'dark' ? 'light' : 'dark';
btn.textContent = `Theme: ${theme === 'dark' ? 'Dark' : 'Light'}`;
btn.title = `Schakel naar ${next === 'dark' ? 'dark' : 'light'} mode`;
const goingTo = theme === 'dark' ? 'light' : 'dark';
btn.textContent = goingTo === 'light' ? '☀️' : '🌙';
btn.title = goingTo === 'light' ? 'Schakel naar licht thema' : 'Schakel naar donker thema';
}
function applyTheme(theme, persist = false) {
@@ -832,5 +831,25 @@
<script src="assets/js/tabs/networks.js"></script>
<script src="assets/js/tabs/images.js"></script>
<script src="assets/js/tabs/volumes.js"></script>
<!-- Netwerktopologie vergroot modal -->
<div id="networksMapModal" style="display:none; position:fixed; inset:0; background:rgba(0,0,0,.72); z-index:1000; align-items:center; justify-content:center;">
<div style="position:relative; width:90vw; height:90vh; background:var(--card-bg); border:1px solid var(--card-border); border-radius:16px; display:flex; flex-direction:column; overflow:hidden;">
<div style="display:flex; align-items:center; justify-content:space-between; padding:10px 16px; border-bottom:1px solid var(--card-border); flex:0 0 auto;">
<span class="muted mono" id="networksMapModalStatus">Netwerktopologie</span>
<button class="btn ghost" id="networksMapModalClose" title="Sluiten (Esc)"></button>
</div>
<div style="display:flex; flex:1; min-height:0;">
<div id="networksMapModalHost" style="flex:1; min-width:0; min-height:0; position:relative; overflow:hidden; background:var(--map-bg);"></div>
<div id="networksMapModalSide" style="display:none; width:280px; flex:0 0 280px; border-left:1px solid var(--card-border); overflow-y:auto; padding:12px;">
<div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;">
<strong id="networksMapModalDetailTitle">Netwerk</strong>
<button class="btn small ghost" id="networksMapModalBackBtn">← Terug</button>
</div>
<div id="networksMapModalDetailBody"></div>
</div>
</div>
</div>
</div>
</body>
</html>