From d31980eb9e136474cca48c75672ca296f38965ed Mon Sep 17 00:00:00 2001
From: d00f <tokyusho@chatik.pl>
Date: Wed, 12 Aug 2026 15:37:50 +0200
Subject: [PATCH] stp: sort the port rows, show this switch's bridge ID, react
 to enabling

Three things from the page feedback.

The rows came out in logical order while carrying the physical port number,
so on the six-port boards the first row is labelled 5. Sorting the rows by
that number in JS puts every board back into front-panel order. I walked all
25 machine definitions and each one now yields a clean 1..N.

The Designated Bridge column is hard to read without knowing this switch's
own bridge ID, so the status line shows it in the same priority and MAC shape
as the cells use. On the test switch that reads 61440-06:05:16:1E:F9:24 and
matches the Designated Bridge of every locally designated port, which is the
comparison that was missing. The root bridge and the path cost now use the
same formatting as the columns instead of raw hex.

Enabling STP printed nothing until the next poll, and because the ports start
blocked, management can stay quiet for the whole listening and learning
period, so the page had no chance to say anything later. It now writes what
is about to happen before the command goes out, and how long the ports need.

Page data only. Both banks, xdata and the common bank are unchanged.
---
 html/stp.js | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/html/stp.js b/html/stp.js
index 1af2230..ec73ee7 100644
--- a/html/stp.js
+++ b/html/stp.js
@@ -41,7 +41,7 @@ function num(id, min, max, onch) {
 function buildPortsTable(ports) {
   const tbl = document.getElementById("stpPortsTbl");
   const stat = document.getElementById("stpStatTbl");
-  for (const p of ports) {
+  for (const p of [...ports].sort((a, b) => a.p - b.p)) {
     const tr = tbl.insertRow();
     tr.insertCell().textContent = p.p;                     // Port
     tr.insertCell().appendChild(sel("en_" + p.p,
@@ -81,6 +81,10 @@ function buildPortsTable(ports) {
   stpRows = ports.length;
 }
 
+function bridgeSelf(s) {
+  return fmtBridgeId((s.prio * 4096).toString(16).padStart(4, "0") + s.myMac);
+}
+
 function fmtBridgeId(h) {
   if (!h || h.length < 16) return "";
   const prio = parseInt(h.slice(0, 4), 16);
@@ -99,9 +103,11 @@ function fetchStp() {
         ? "\u26a0 STP was disabled by the management failsafe (ports were blocked while management was unreachable). Review the topology before re-enabling."
         : s.on
         ? (s.weRoot
-            ? "This switch is the root bridge (priority 0x" + s.rootPrio + ") — topology changes: " + parseInt(s.tc, 16)
-            : "Root bridge: 0x" + s.rootPrio + " / " + s.rootMac
-              + " via port " + s.rootPort + " — path cost: 0x" + s.cost
+            ? "This switch (" + bridgeSelf(s) + ") is the root bridge — topology changes: "
+              + parseInt(s.tc, 16)
+            : "This switch: " + bridgeSelf(s)
+              + " — root bridge: " + fmtBridgeId(s.rootPrio + s.rootMac)
+              + " via port " + s.rootPort + " — path cost: " + parseInt(s.cost, 16)
               + " — topology changes: " + parseInt(s.tc, 16))
         : "";
       for (const p of s.ports) {
@@ -147,6 +153,11 @@ function fetchStp() {
 
 async function stpSub() {
   const on = document.getElementById("stpMode").value === "on";
+  document.getElementById("stpStat").textContent = on
+    ? "Enabling STP. The ports start blocked and take up to "
+      + (2 * document.getElementById("bFwd").value)
+      + " s to reach forwarding, and this page can stay silent until they do."
+    : "Disabling STP.";
   await stpCmd(on ? "stp on" : "stp off");
 }