From 51162da6e7e11adaba8080f25f023013a9eed9b2 Mon Sep 17 00:00:00 2001 From: CallMeTechie <34693633+CallMeTechie@users.noreply.github.com> Date: Tue, 23 Jun 2026 20:59:12 +0200 Subject: [PATCH] =?UTF-8?q?fix(theme):=20Aurora=20peers=20=E2=80=94=20bar-?= =?UTF-8?q?chart=20traffic=20modal=20+=20gateway=20card=20Name/IP=20rows?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Peer traffic modal: replaced the SVG line/area chart with the dashboard-style bar chart (.chart/.col/.bar download+upload), matching the dashboard look; legend recoloured (download teal / upload coral). Aurora-only via isAurora() branch in renderTrafficChart; default/pro keep the SVG line chart. - Gateway cards (peers page, auroraRenderGatewayCard): removed name + IP from the .uh title (title now = avatar + status badge + gear) and added dedicated 'Name' and 'IP' rows above WG-Handshake. Aurora-only. aurora_theme.test 144/0; verified headless (gateway card rows, bar chart). --- public/js/peers.js | 62 +++++++++++++++---- .../aurora/partials/modals/peer-traffic.njk | 10 +-- 2 files changed, 54 insertions(+), 18 deletions(-) diff --git a/public/js/peers.js b/public/js/peers.js index 06908d9f..c3f40314 100644 --- a/public/js/peers.js +++ b/public/js/peers.js @@ -1465,9 +1465,31 @@ } } + // Aurora renders the peer traffic as a bar chart (matching the dashboard's + // .chart/.col/.bar markup); default/pro keep the SVG line/area chart. + function renderAuroraTrafficBars(container, dataPoints) { + if (!dataPoints || dataPoints.length === 0) { + container.innerHTML = '
' + escapeHtml(GC.t['dashboard.chart_no_data'] || 'No traffic data') + '
'; + return; + } + var maxVal = Math.max(1, Math.max.apply(null, dataPoints.map(function(d) { return Math.max(d.upload || 0, d.download || 0); }))); + var n = dataPoints.length; + container.innerHTML = dataPoints.map(function(d, i) { + var dnH = Math.max(2, Math.round(((d.download || 0) / maxVal) * 130)); + var upH = Math.max(2, Math.round(((d.upload || 0) / maxVal) * 130)); + var label = (n <= 12 || i % Math.ceil(n / 8) === 0) ? (d.label || '') : ''; + return '
' + + '
' + + '
' + + '
' + escapeHtml(label) + '
' + + '
'; + }).join(''); + } + function renderTrafficChart(dataPoints) { var svg = document.getElementById('traffic-peer-chart'); if (!svg) return; + if (isAurora()) { renderAuroraTrafficBars(svg, dataPoints); return; } if (!dataPoints || dataPoints.length === 0) { svg.innerHTML = 'No data'; return; @@ -2299,19 +2321,11 @@ uav.innerHTML = ''; uh.appendChild(uav); - // Name + IP — flex:1+min-width:0 lets identity shrink so badge+gear always visible - var identity = document.createElement('div'); - identity.style.cssText = 'flex:1;min-width:0;overflow:hidden'; - var un = document.createElement('div'); - un.className = 'un'; - un.style.cssText = 'white-space:nowrap;overflow:hidden;text-overflow:ellipsis'; - un.textContent = gw.name; - var ud = document.createElement('div'); - ud.className = 'ud'; - ud.textContent = gw.ip || ''; - identity.appendChild(un); - identity.appendChild(ud); - uh.appendChild(identity); + // Name + IP moved to dedicated rows below; a flex spacer keeps the status + // badge + gear pushed to the right of the header. + var spacer = document.createElement('div'); + spacer.style.cssText = 'flex:1;min-width:0'; + uh.appendChild(spacer); // Right side: status badge + gear button — gap:8px keeps them clearly separated var right = document.createElement('span'); @@ -2344,6 +2358,28 @@ uh.appendChild(right); unit.appendChild(uh); + // Name + IP rows (moved out of the .uh title) + var nameRow = document.createElement('div'); + nameRow.className = 'urow'; + var nrk = document.createElement('span'); + nrk.textContent = gwT('peers.gateway.name', 'Name'); + var nrv = document.createElement('b'); + nrv.style.cssText = 'overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:62%'; + nrv.textContent = gw.name; + nameRow.appendChild(nrk); + nameRow.appendChild(nrv); + unit.appendChild(nameRow); + + var ipRow = document.createElement('div'); + ipRow.className = 'urow'; + var iprk = document.createElement('span'); + iprk.textContent = gwT('peers.gateway.ip', 'IP'); + var iprv = document.createElement('b'); + iprv.textContent = gw.ip || '—'; + ipRow.appendChild(iprk); + ipRow.appendChild(iprv); + unit.appendChild(ipRow); + // Metric rows var row1 = document.createElement('div'); row1.className = 'urow'; diff --git a/templates/aurora/partials/modals/peer-traffic.njk b/templates/aurora/partials/modals/peer-traffic.njk index 2e7326da..733aba0a 100644 --- a/templates/aurora/partials/modals/peer-traffic.njk +++ b/templates/aurora/partials/modals/peer-traffic.njk @@ -11,12 +11,12 @@ -
- +
+
-
- {{ t('peers.upload') or 'Upload' }} - {{ t('peers.download') or 'Download' }} +
+ {{ t('peers.download') or 'Download' }} + {{ t('peers.upload') or 'Upload' }}