From 5e901fb5c2eab857d6a89171aff5e2dedffd8371 Mon Sep 17 00:00:00 2001
From: d00f <tokyusho@chatik.pl>
Date: Wed, 5 Aug 2026 21:21:03 +0200
Subject: [PATCH] l2: sort and filter the forwarding table from its header

The table lists every learned and static entry in one flat block, which is
fine with a handful and unusable with a few hundred: finding out where one
MAC sits, or what a port has learned, meant reading the whole thing.

Make the column headings sort and give each one a filter box. Filters are
substring matches combined with AND, so "port 8 + static" is two keystrokes.
A counter above the table shows matched out of total, so a filter that hides
everything is obvious rather than looking like an empty table.

Sorting keeps the CPU entry from comparing as a number - it sorts last
instead of landing between ports 8 and 9, where a string-vs-number compare
would otherwise put it.

The filter inputs live inside the existing header cells rather than in a
second row: the paint loop addresses data rows as rows[i+1], and a second
header row would have shifted every one of them.
---
 html/i18n.js   |  3 +++
 html/l2.html   | 12 +++++++++++-
 html/style.css |  5 +++++
 3 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/html/i18n.js b/html/i18n.js
index bab49dc..fb4bce9 100644
--- a/html/i18n.js
+++ b/html/i18n.js
@@ -117,6 +117,7 @@ var LANG = {
     l2_col_port: 'Port',
     l2_col_type: 'Type',
     l2_col_remove: 'Remove Entry',
+    l2_shown: 'Shown:',
     l2_delete: 'Delete',
     l2_static: 'static',
     l2_learned: 'learned',
@@ -296,6 +297,7 @@ var LANG = {
     l2_col_port: 'ポート',
     l2_col_type: 'タイプ',
     l2_col_remove: 'エントリ削除',
+    l2_shown: 'Shown:',
     l2_delete: '削除',
     l2_static: '静的',
     l2_learned: '学習',
@@ -475,6 +477,7 @@ var LANG = {
     l2_col_port: '端口',
     l2_col_type: '类型',
     l2_col_remove: '删除条目',
+    l2_shown: 'Shown:',
     l2_delete: '删除',
     l2_static: '静态',
     l2_learned: '动态学习',
diff --git a/html/l2.html b/html/l2.html
index 029c4e9..b739d0f 100644
--- a/html/l2.html
+++ b/html/l2.html
@@ -10,8 +10,18 @@
     <div style="margin-left:16%;padding:1px 16px;height:1000px;">
     <div id="ports"></div>
     <h1 data-i18n="l2_heading">L2 Configuration</h1>
+    <p><span data-i18n="l2_shown">Shown:</span> <span id="l2count">-</span></p>
     <table id="l2table">
-      <tr> <th data-i18n="l2_col_port">Port</th> <th>MAC</th> <th>VLAN</th> <th data-i18n="l2_col_type">Type</th> <th data-i18n="l2_col_remove">Remove Entry</th></tr>
+      <tr>
+        <th><span class="l2sort" onclick="l2SortBy('port')" data-i18n="l2_col_port">Port</span><br>
+            <input id="l2f_port" class="l2filter" oninput="l2FilterChanged()" size="5"></th>
+        <th><span class="l2sort" onclick="l2SortBy('mac')">MAC</span><br>
+            <input id="l2f_mac" class="l2filter" oninput="l2FilterChanged()" size="14"></th>
+        <th><span class="l2sort" onclick="l2SortBy('vlan')">VLAN</span><br>
+            <input id="l2f_vlan" class="l2filter" oninput="l2FilterChanged()" size="5"></th>
+        <th><span class="l2sort" onclick="l2SortBy('type')" data-i18n="l2_col_type">Type</span><br>
+            <input id="l2f_type" class="l2filter" oninput="l2FilterChanged()" size="8"></th>
+        <th data-i18n="l2_col_remove">Remove Entry</th></tr>
       <script src="/l2.js"></script>
     </table>
     </div>
diff --git a/html/style.css b/html/style.css
index 84d3a2e..3533c6b 100644
--- a/html/style.css
+++ b/html/style.css
@@ -164,3 +164,8 @@ margin: 30px 0;
 select { text-align-last: right; font-family: monospace}
 option { direction: rtl; font-family: sans-serif}
 #vlanTable td { text-align: left; }
+
+/* L2 table: sortable headers and per-column filters */
+.l2sort{cursor:pointer;user-select:none}
+.l2sort:hover{text-decoration:underline}
+.l2filter{width:100%;box-sizing:border-box;font-weight:normal;font-size:0.9em}