feat (ui): Light/Dark Theme added Complete

webui/html/assets/js/tabs/networks.js

@@ -96,11 +96,18 @@
       ]);
       state.usage = usage;
       state.list = list;
+      if (typeof window.updateNavCount === 'function') {
+        const n = Array.isArray(list?.networks) ? list.networks.length : 0;
+        window.updateNavCount('countNavNetworks', n);
+      }
       if (statusEl) statusEl.textContent = `Laatst geladen: ${new Date().toLocaleString()}`;
       renderNetworksSummary();
       renderNetworks();
     } catch (e) {
       console.error(e);
+      if (typeof window.updateNavCount === 'function') {
+        window.updateNavCount('countNavNetworks', 0);
+      }
       if (statusEl) statusEl.textContent = 'Fout: ' + (e?.message || e);
     }
   }
@@ -620,6 +627,10 @@
 
     // leeg host (placeholder weg)
     host.innerHTML = '';
+    const tooltip = document.createElement('div');
+    tooltip.className = 'mapTooltip';
+    tooltip.style.display = 'none';
+    host.appendChild(tooltip);
 
     const w = Math.max(600, host.clientWidth || 600);
     const h = Math.max(420, host.clientHeight || 420);
@@ -694,11 +705,27 @@
           d3.select(this).classed('graphActive', false);
         }
       });
+
+      const typeLabel = d.type === 'network' ? 'Netwerk' : 'Container';
+      const extra = d.type === 'network'
+        ? `Driver: ${d?.meta?.driver || 'onbekend'}`
+        : (d?.pod ? `Pod: ${d.pod}` : 'Pod: -');
+      tooltip.innerHTML = `<strong>${typeLabel}</strong><br>${d.label || d.key}<br>${extra}`;
+      tooltip.style.display = 'block';
+    });
+
+    node.on('mousemove', (ev) => {
+      const rect = host.getBoundingClientRect();
+      const x = (ev.clientX - rect.left) + 14;
+      const y = (ev.clientY - rect.top) + 14;
+      tooltip.style.left = `${x}px`;
+      tooltip.style.top = `${y}px`;
     });
 
     node.on('mouseleave', () => {
       node.classed('graphDim', false);
       link.classed('graphDim', false).classed('graphActive', false);
+      tooltip.style.display = 'none';
     });
 
     node.on('click', (ev, d) => {
@@ -822,13 +849,24 @@
 
     const usage = state.usage;
     if (!usage || !usage.byNetwork) {
-      tbody.innerHTML = `<tr><td colspan="6" class="muted">Geen data. Klik op Vernieuwen.</td></tr>`;
-      rel.innerHTML = `<div class="muted">Geen data.</div>`;
+      const box = (typeof window.renderStateBox === 'function')
+        ? window.renderStateBox('empty', 'Geen netwerkdata', 'Klik op Vernieuwen om netwerkdata op te halen.')
+        : 'Geen data.';
+      tbody.innerHTML = `<tr><td colspan="6">${box}</td></tr>`;
+      rel.innerHTML = box;
       return;
     }
 
     const vmAll = buildNetworksViewModel();
     const vm = applyFiltersAndSort(vmAll);
+    if (!vm.length) {
+      const box = (typeof window.renderStateBox === 'function')
+        ? window.renderStateBox('empty', 'Geen resultaten', 'Pas filters aan of schakel opties uit om netwerken te tonen.')
+        : 'Geen resultaten.';
+      tbody.innerHTML = `<tr><td colspan="6">${box}</td></tr>`;
+      rel.innerHTML = box;
+      return;
+    }
 
     for (const row of vm) {
       const netName = row.name;
@@ -1137,4 +1175,4 @@
 
   // Bind when script loads (DOM is already mostly there because script is at end of body)
   bindUiOnce();
-})();
+})();