mirror of
https://github.com/logicog/RTLPlayground.git
synced 2026-08-30 14:52:51 +08:00
d00f
5e901fb5c2
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.
31 lines
1.4 KiB
HTML
31 lines
1.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<script src="/main.js"></script>
|
|
<script src="/i18n.js"></script>
|
|
<link rel="stylesheet" href="style.css">
|
|
<title data-i18n="l2_title">FreeSwitchOS L2 Configuration</title>
|
|
</head>
|
|
<body>
|
|
<nav id="sidebar"></nav>
|
|
<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><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>
|
|
</body>
|
|
<script src="/navigation.js"></script>
|
|
</html>
|