From 7d96f836830d624a1f27f7d2b554e089d5b54588 Mon Sep 17 00:00:00 2001
From: wsk-163 <wsk170@163.com>
Date: Thu, 7 Nov 2024 23:17:16 +0800
Subject: [PATCH] make ethernet information looks like openwrt 23.05

---
 .../autocore/files/generic/21_ethinfo.js      | 125 +++++++++++-------
 1 file changed, 79 insertions(+), 46 deletions(-)

diff --git a/package/emortal/autocore/files/generic/21_ethinfo.js b/package/emortal/autocore/files/generic/21_ethinfo.js
index fa89c4a2fc..012c14a19c 100644
--- a/package/emortal/autocore/files/generic/21_ethinfo.js
+++ b/package/emortal/autocore/files/generic/21_ethinfo.js
@@ -3,58 +3,91 @@
 'require rpc';
 
 var callLuciETHInfo = rpc.declare({
-	object: 'luci',
-	method: 'getETHInfo',
-	expect: { '': {} }
+  object: 'luci',
+  method: 'getETHInfo',
+  expect: { '': {} }
 });
 
+var callLuciNetworkDevices = rpc.declare({
+  object: 'luci-rpc',
+  method: 'getNetworkDevices',
+  expect: { '': {} }
+});
+
+function formatSpeed(speed) {
+  if (speed == '-') return '-';
+  const speedNum = parseInt(speed);
+  return speedNum < 1000 ? `${speedNum} M` : `${speedNum / 1000} GbE`;
+}
+
+function getPortColor(link, duplex) {
+  if (link == 'no') return 'background-color: whitesmoke;';
+  const color = duplex == 'Full' ? 'greenyellow' : 'darkorange';
+  return 'background-color: ' + color;
+}
+
+function getPortIcon(link) {
+  return L.resource(`icons/port_${link == 'yes' ? 'up' : 'down'}.png`);
+}
+
 return L.Class.extend({
-	title: _('Ethernet Information'),
+  title: _('Ethernet Information'),
 
-	load: function() {
-		return Promise.all([
-			L.resolveDefault(callLuciETHInfo(), {})
-		]);
-	},
+  load: function () {
+    return Promise.all([
+      L.resolveDefault(callLuciETHInfo(), {}),
+      L.resolveDefault(callLuciNetworkDevices(), {})
+    ]);
+  },
 
-	render: function(data) {
-		var ethinfo = Array.isArray(data[0].ethinfo) ? data[0].ethinfo : [];
+  render: function (data) {
+    const ethinfo = Array.isArray(data[0].ethinfo) ? data[0].ethinfo : [];
+    const netdevs = typeof data[1] === 'object' ? data[1] : {};
 
-		var table = E('table', { 'class': 'table' }, [
-			E('tr', { 'class': 'tr table-titles' }, [
-				E('th', { 'class': 'th' }, _('Ethernet Name')),
-				E('th', { 'class': 'th' }, _('Link Status')),
-				E('th', { 'class': 'th' }, _('Speed')),
-				E('th', { 'class': 'th' }, _('Duplex'))
-			])
-		]);
+    const boxStyle = 'max-width: 100px;';
+    const boxHeadStyle =
+      'border-radius: 7px 7px 0 0;' +
+      'text-align: center;' +
+      'font-size:1.1rem; font-weight:bold;';
+    const boxbodyStyle =
+      'border: 1px solid lightgrey;' +
+      'border-radius: 0 0 7px 7px;' +
+      'display:flex; flex-direction: column;' +
+      'align-items: center; justify-content:center;';
+    const iconStyle = 'margin: 5px; width: 40px;';
+    const speedStyle = 'font-size:0.8rem; font-weight:bold;';
+    const trafficStyle =
+      'border-top: 1px solid lightgrey;' + 'font-size:0.8rem;';
 
-		cbi_update_table(table, ethinfo.map(function(info) {
-			var exp1;
-			var exp2;
+    const ethPorts = [];
+    for (const port of ethinfo) {
+      const portName = port.name;
+      const portIcon = getPortIcon(port.status);
+      const portColor = getPortColor(port.status, port.duplex);
+      const { tx_bytes, rx_bytes } = netdevs[portName].stats;
+      const portDiv = E('div', { style: boxStyle }, [
+        E('div', { style: boxHeadStyle + portColor }, portName),
+        E('div', { style: boxbodyStyle }, [
+          E('img', { style: iconStyle, src: portIcon }),
+          E('div', { style: speedStyle }, formatSpeed(port.speed)),
+          E('div', { style: trafficStyle }, [
+            '\u25b2\u202f%1024.1mB'.format(tx_bytes),
+            E('br'),
+            '\u25bc\u202f%1024.1mB'.format(rx_bytes)
+          ])
+        ])
+      ]);
+      if (portName == 'wan') {
+        ethPorts.unshift(portDiv);
+      } else {
+        ethPorts.push(portDiv);
+      }
+    }
 
-			if (info.status == "yes")
-				exp1 = _('Link Up');
-			else if (info.status == "no")
-				exp1 = _('Link Down');
-
-			if (info.duplex == "Full")
-				exp2 = _('Full Duplex');
-			else if (info.duplex == "Half")
-				exp2 = _('Half Duplex');
-			else
-				exp2 = _('-');
-
-			return [
-				info.name,
-				exp1,
-				info.speed,
-				exp2
-			];
-		}));
-
-		return E([
-			table
-		]);
-	}
+    const gridStyle =
+      'display:grid; grid-gap: 5px 5px;' +
+      'grid-template-columns:repeat(auto-fit, minmax(70px, 1fr));' +
+      'margin-bottom:1em';
+    return E('div', { style: gridStyle }, ethPorts);
+  }
 });