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

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:link    { background: transparent; color: black }
-a:visited { background: white; color: black }
+a:visited { background: transparent; color: black }
-a:active  { background: white; color: black }
+a:active  { background: transparent; color: black }
 h1 { font-family:Verdana,arial,sans-serif; color: black}
 
 hr {

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("<table id=nTable class=s>")
-html.print("<tr>")
+html.print("<tr class=h>")
-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 width=25%>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>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("<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("<table id='cTable' class=s><tr class=h>")
-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 width=25%>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("<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("<table id='rTable' class=s><tr class=h>")
-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 width=25%>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("<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>")

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

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

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:link    { background: transparent; color: red }
-a:visited { background: black; color: red }
+a:visited { background: transparent; color: red }
-a:active  { background: black; color: red }
+a:active  { background: transparent; color: red }
 h1 { font-family:Verdana,arial,sans-serif; color: red}
 
 hr {

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:link    { background: transparent; color: white }
-a:visited { background: black; color: white }
+a:visited { background: transparent; color: white }
-a:active  { background: black; color: white }
+a:active  { background: transparent; color: white }
 h1 { font-family:Verdana,arial,sans-serif; color: white}
 
 hr {

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:link    { background: transparent; color: yellow }
-a:visited { background: black; color: yellow }
+a:visited { background: transparent; color: yellow }
-a:active  { background: black; color: yellow }
+a:active  { background: transparent; color: yellow }
 h1 { font-family:Verdana,arial,sans-serif; color: yellow}
 
 hr {