Simpler search (#918)

* Unify mesh status search functionality * Remove colored titles * Fix highlight colors * Removed use of CSS :has(...) operator which Firefox doesnt support * Make identifying tunnels more general * Delay search while typing
2023-08-29 20:06:37 -07:00 · 2023-08-29 20:06:37 -07:00 · 7ad310b036
parent 3635e22297
commit 7ad310b036
7 changed files with 90 additions and 62 deletions
--- a/files/www/black_on_white.css
+++ b/files/www/black_on_white.css
@ -1,7 +1,7 @@
 body      { font-family:Verdana,arial,sans-serif; background: white; color:black }
-a:link    { background: white; color: black }
-a:visited { background: white; color: black }
-a:active  { background: white; color: black }
+a:link    { background: transparent; color: black }
+a:visited { background: transparent; color: black }
+a:active  { background: transparent; color: black }
 h1 { font-family:Verdana,arial,sans-serif; color: black}

 hr {
--- a/files/www/cgi-bin/mesh
+++ b/files/www/cgi-bin/mesh
@ -398,28 +398,38 @@ html.print([[
        padding-bottom:2em;
    }
    tr:hover {
-        background-color:gainsboro;
+        background-color:rgba(128,128,128,0.15);
+    }
+    tr.h {
+        border-top: 1px solid black;
+        border-bottom: 1px solid black;
+    }
+    tr.h:hover {
+        background-color:inherit;
    }
    th {
-        font-weight:bold;
-        background-color:lightseagreen;
        white-space:nowrap;
        vertical-align:middle;
-        padding:5px;
+        padding:3px 5px;
    }
    input.search {
        width:150px;
    }
-    // table header alignment
+    #nTable {
+        margin-bottom: 12px;
+    }
    #nTable th:nth-child(1) {
      width: 25%;
    }
    #nTable th:nth-child(2) {
      width: 45%;
    }
-    #nTable th:nth-child(3)
+    #nTable th:nth-child(3) {
      width: 30%;
    }
+    #cTable {
+        margin-bottom: 12px;
+    }
    #cTable th:nth-child(1), #rTable th:nth-child(1) {
      width: 25%;
    }
@ -438,7 +448,46 @@ html.print([[
    #rTable th:nth-child(4) {
      width: 30%;
    }
+    tr.s.f.nf {
+        display: table-row;
+    }
+    tr.s.nf {
+        display: none;
+    }
    </style>
+    <script>
+    let searchPending;
+    function doSearch() {
+        clearTimeout(searchPending);
+        searchPending = setTimeout(function() {
+            const filter = document.getElementById("srch").value.toUpperCase();
+            const rows = document.querySelectorAll("tr.s");
+            for (let i = 0; i < rows.length; i++) {
+                rows[i].classList.remove("f", "nf");
+            }
+            const tds = document.querySelectorAll("td.s");
+            for (let i = 0; i < tds.length; i++) {
+                const td = tds[i];
+                const txt = td.textContent || td.innerText;
+                if (txt.toUpperCase().indexOf(filter) === -1) {
+                    td.parentElement.classList.add("nf")
+                }
+                else {
+                    td.parentElement.classList.add("f")
+                }
+            }
+            const tables = document.querySelectorAll("table.s");
+            for (let i = 0; i < tables.length; i++) {
+                if (!tables[i].querySelector("tr.f")) {
+                    tables[i].style.display = "none";
+                }
+                else {
+                    tables[i].style.display = null;
+                }
+            }
+        }, 300);
+    }
+    </script>
 ]])
 html.print("</head>")

@ -465,6 +514,8 @@ end

 html.print("&nbsp;&nbsp;")
 html.print("<button type=button onClick='window.location=\"status\"' title='Return to the status page'>Quit</button>")
+html.print("&nbsp;&nbsp;")
+html.print("<input id=srch type=search autocorrect=off spellcheck=false placeholder='Search...' onkeyup='doSearch()' onsearch='doSearch()' onkeypress='event.keyCode == 13 && event.preventDefault()'>")
 html.print("</nobr><br><br>")

 if not next(localhosts) and not next(links) then
@ -477,11 +528,11 @@ end

 -- show local node table

-html.print("<table id=nTable>")
-html.print("<tr>")
-html.print("<th width=25%><input class=search type=text id='inNN' onkeyup=nSearch('inNN','nTable',0) onkeypress='event.keyCode == 13 && event.preventDefault()' placeholder='Node Name'></th>")
-html.print("<th><input class=search type=text id='inNH' onkeyup=nSearch('inNH','nTable',1) onkeypress='event.keyCode == 13 && event.preventDefault()' placeholder='LAN Hostname'></th>")
-html.print("<th><input class=search type=text id='inNS' onkeyup=nSearch('inNS','nTable',2) onkeypress='event.keyCode == 13 && event.preventDefault()' placeholder='Service Name'></th>")
+html.print("<table id=nTable class=s>")
+html.print("<tr class=h>")
+html.print("<th width=25%>Node Name</th>")
+html.print("<th>LAN Hostname</th>")
+html.print("<th>Service Name</th>")
 html.print("</tr>")

 if next(localhosts) then
@ -552,7 +603,7 @@ if next(localhosts) then
                end
            end
            -- Build this row
-            local row = "<tr><td>" .. c1 .. "</td><td>" .. c2 .. "</td><td>" .. c3 .. "</td></tr>"
+            local row = "<tr class=s><td class='s f'>" .. c1 .. "</td><td class='s f'>" .. c2 .. "</td><td class='s f'>" .. c3 .. "</td></tr>"
            rows[#rows + 1] = { key = host.name, row = row }
        end
    end
@ -564,7 +615,7 @@ if next(localhosts) then
    -- discard
    rows = nil
 else
-    html.print("<tr><td>none</td></tr>")
+    html.print("<tr><td class='s f'>none</td></tr>")
 end

 -- discard
@ -574,11 +625,11 @@ html.print("</table>")

 -- show current neighbors table

-html.print("<br><table id='cTable'><tr>")
-html.print("<th width=25%><input class=search type=text id='inCN' onkeyup=nSearch('inCN','cTable',0) onkeypress='event.keyCode == 13 && event.preventDefault()' placeholder='Current Neighbors'></th>")
-html.print("<th><input class=search type=text id='inCH' onkeyup=nSearch('inCH','cTable',1) onkeypress='event.keyCode == 13 && event.preventDefault()' placeholder='LAN Hostname'></th>")
+html.print("<table id='cTable' class=s><tr class=h>")
+html.print("<th width=25%>Current Neighbors</th>")
+html.print("<th>LAN Hostname</th>")
 html.print("<th>LQ</th><th>NLQ</th><th>TxMbps</th>")
-html.print("<th><input class=search type=text id='inCS' onkeyup=nSearch('inCS','cTable',5) onkeypress='event.keyCode == 13 && event.preventDefault()' placeholder='Service Name'></th>")
+html.print("<th>Service Name</th>")
 html.print("</tr>")

 local rows = {}
@ -674,7 +725,7 @@ do
        end
    end
    -- Build this row
-    local row = "<tr><td>" .. c1 .. "</td><td>" .. c2 .. "</td><td>" .. c3 .. "</td><td>" .. c4 .. "</td><td>" .. c5 .. "</td><td>" .. c6 .. "</td></tr>"
+    local row = "<tr class=s><td class='s f'>" .. c1 .. "</td><td class='s f'>" .. c2 .. "</td><td>" .. c3 .. "</td><td>" .. c4 .. "</td><td>" .. c5 .. "</td><td class='s f'>" .. c6 .. "</td></tr>"
    rows[#rows + 1] = { key = name, row = row }
 end
 if #rows > 0 then
@ -686,7 +737,7 @@ if #rows > 0 then
    -- discard
    rows = nil
 else
-    html.print("<tr><td>none</td></tr>")
+    html.print("<tr><td class='s f'>none</td></tr>")
 end

 --add previous neighbors
@ -744,11 +795,11 @@ html.print("</table>")

 -- show remote node table

-html.print("<br><table id='rTable'><tr>")
-html.print("<th width=25%><input class=search type=text id='inRN' onkeyup=nSearch('inRN','rTable',0) onkeypress='event.keyCode == 13 && event.preventDefault()' placeholder='Remote Nodes'></th>")
-html.print("<th><input class=search type=text id='inRH' onkeyup=nSearch('inRH','rTable',1) onkeypress='event.keyCode == 13 && event.preventDefault()' placeholder='LAN Hostname'</th>")
+html.print("<table id='rTable' class=s><tr class=h>")
+html.print("<th width=25%>Remote Nodes</th>")
+html.print("<th>LAN Hostname</th>")
 html.print("<th>ETX</th>")
-html.print("<th><input class=search type=text id='inRS' onkeyup=nSearch('inRS','rTable',3) onkeypress='event.keyCode == 13 && event.preventDefault()' placeholder='Service Name'</th>")
+html.print("<th>Service Name</th>")
 html.print("</tr>")

 local rows = {}
@ -840,7 +891,7 @@ do
                end
            end
            -- Build this row
-            local row = "<tr><td>" .. c1 .. "</td><td>" .. c2 .. "</td><td>" .. c3 .. "</td><td>" .. c4 .. "</td></tr>"
+            local row = "<tr class=s><td class='s f'>" .. c1 .. "</td><td class='s f'>" .. c2 .. "</td><td>" .. c3 .. "</td><td class='s f'>" .. c4 .. "</td></tr>"
            rows[#rows + 1] = { key = host.etx, row = row }
        end
    end
@ -855,7 +906,7 @@ if #rows > 0 then
    -- discard
    rows = nil
 else
-    html.print("<tr><td>none</td></tr>")
+    html.print("<tr><td class='s f'>none</td></tr>")
 end
 -- discard
 neighbor = nil
@ -874,29 +925,6 @@ html.print("</table>")

 html.print("</center>")
 html.print("</form>")
-
-html.print([[
-    <script>
-    function nSearch(inputId,tableId,colId) {
-        var input, filter, table, tr, td, i, txtval;
-        input = document.getElementById(inputId);
-        filter = input.value.toUpperCase();
-        table = document.getElementById(tableId);
-        tr = table.getElementsByTagName("tr");
-        for (i=0; i < tr.length; i++) {
-            td = tr[i].getElementsByTagName("td")[colId];
-            if (td) {
-                txtval = td.textContent || td.innerText;
-                if (txtval.toUpperCase().indexOf(filter) > -1 ) {
-                    tr[i].style.display = "";
-                } else {
-                    tr[i].style.display = "none";
-                }
-            }
-        }
-    }
-    </script>
-]])
 html.footer();
 html.print("</body>")
 html.print("</html>")
--- a/files/www/cgi-bin/vpn
+++ b/files/www/cgi-bin/vpn
@ -92,7 +92,7 @@ function get_active_tun()
    if f then
        for line in f:lines()
        do
-            local m = line:match(".*:.*-(172%-31%-.*)%stun%stun.*")
+            local m = line:match(".*:.*-(172%-.*)%stun%stun.*")
            if m then
                tuns[#tuns + 1] = m:gsub("-", ".")
            end
--- a/files/www/cgi-bin/vpnc
+++ b/files/www/cgi-bin/vpnc
@ -96,7 +96,7 @@ function get_active_tun()
    if f then
        for line in f:lines()
        do
-            local m = line:match(".*:.*-(172%-31%-.*)%stun%stun.*")
+            local m = line:match(".*:.*-(172%-.*)%stun%stun.*")
            if m then
                tuns[#tuns + 1] = m:gsub("-", ".")
            end
--- a/files/www/red_on_black.css
+++ b/files/www/red_on_black.css
@ -1,7 +1,7 @@
 body      { font-family:Verdana,arial,sans-serif; background: black; color:red }
-a:link    { background: black; color: red }
-a:visited { background: black; color: red }
-a:active  { background: black; color: red }
+a:link    { background: transparent; color: red }
+a:visited { background: transparent; color: red }
+a:active  { background: transparent; color: red }
 h1 { font-family:Verdana,arial,sans-serif; color: red}

 hr {
--- a/files/www/white_on_black.css
+++ b/files/www/white_on_black.css
@ -1,7 +1,7 @@
 body      { font-family:Verdana,arial,sans-serif; background: black; color:white }
-a:link    { background: black; color: white }
-a:visited { background: black; color: white }
-a:active  { background: black; color: white }
+a:link    { background: transparent; color: white }
+a:visited { background: transparent; color: white }
+a:active  { background: transparent; color: white }
 h1 { font-family:Verdana,arial,sans-serif; color: white}

 hr {
--- a/files/www/yellow_on_black.css
+++ b/files/www/yellow_on_black.css
@ -1,7 +1,7 @@
 body      { font-family:Verdana,arial,sans-serif; background: black; color:yellow }
-a:link    { background: black; color: yellow }
-a:visited { background: black; color: yellow }
-a:active  { background: black; color: yellow }
+a:link    { background: transparent; color: yellow }
+a:visited { background: transparent; color: yellow }
+a:active  { background: transparent; color: yellow }
 h1 { font-family:Verdana,arial,sans-serif; color: yellow}

 hr {