Add some mobile tools (#1690)

files/app/main/app.ut

@@ -146,11 +146,9 @@
                 </a>
             </div>
             <div>
-                {%if (auth.isAdmin) { %}
+                <div style="margin: 0 calc(50% - 21px);">
-                <a href="tools">
+                {{_R("tools")}}
-                    <div class="icon tools"></div>
+                </div>
-                </a>
-                {% } %}
             </div>
             <div>
             {{_R("login")}}
@@ -158,8 +156,43 @@
         </div>
     </div>
     <script>
-        document.querySelector("#m-all").addEventListener("click", _ => body.focus());
+    (function(){
-        document.querySelector("#ctrl-modal").addEventListener("click", _ => body.focus());
+        const m = document.getElementById("ctrl-modal");
+        document.body.addEventListener("click", e => {
+            const a = htmx.findAll(".popup-menu input[type=checkbox]:checked");
+            for (let i = 0; i < a.length; i++) {
+                if (a[i] !== e.target) {
+                    a[i].checked = false;
+                }
+            }
+        });
+        document.body.addEventListener("click", e => {
+            if (!(m.open || document.getSelection().isCollapsed)) {
+                e.stopPropagation();
+            }
+        }, true);
+        function dialogDone()
+        {
+            const d = htmx.find("#dialog-done");
+            if (d) {
+                setTimeout(function() {
+                    let invalid = false;
+                    const f = htmx.findAll(m, "form");
+                    for (let i = 0; i < f.length; i++) {
+                        if (!f[i].checkValidity()) {
+                            invalid = true;
+                            break;
+                        }
+                    }
+                    d.disabled = invalid;
+                }, 10);
+            }
+        }
+        m.addEventListener("input", dialogDone);
+        m.addEventListener("click", dialogDone);
+        document.querySelector("#m-all").addEventListener("click", _ => document.body.focus());
+        document.querySelector("#ctrl-modal").addEventListener("click", _ => document.body.focus());
+    })();
     </script>
     {% } %}
 </body>

files/app/main/tools/e/iperf3.ut

@@ -56,7 +56,7 @@ const mynode = configuration.getName();
             </div>
             <div>
                 <input id="tool-client" type="text" size="40" required value="{{mynode}}" list="mesh-nodes">
-                <div style="width:42px"></div>
+                <div id="target-swap-dummy" style="width:42px"></div>
             </div>
         </div>
         <datalist id="mesh-nodes">
@@ -83,7 +83,9 @@ const mynode = configuration.getName();
     <script>
     (function(){
         {{_R("open")}}
+        {% if (!request.mobile) { %}
         htmx.find("#tool-target").focus();
+        {% } %}
         const mynode = "{{mynode}}";
         htmx.on("#target-swap", "click", _ => {
             const v = htmx.find("#tool-target").value;

files/app/main/tools/e/ping.ut

@@ -56,7 +56,7 @@ const mynode = configuration.getName();
             </div>
             <div>
                 <input id="tool-client" type="text" size="40" required value="{{mynode}}" list="mesh-nodes">
-                <div style="width:42px"></div>
+                <div id="target-swap-dummy" style="width:42px"></div>
             </div>
         </div>
         <datalist id="mesh-nodes">
@@ -84,7 +84,9 @@ const mynode = configuration.getName();
     <script>
     (function(){
         {{_R("open")}}
+        {% if (!request.mobile) { %}
         htmx.find("#tool-target").focus();
+        {% } %}
         const mynode = "{{mynode}}";
         htmx.on("#target-swap", "click", _ => {
             const v = htmx.find("#tool-target").value;

files/app/main/tools/e/traceroute.ut

@@ -56,7 +56,7 @@ const mynode = configuration.getName();
             </div>
             <div>
                 <input id="tool-client" type="text" size="40" required value="{{mynode}}" list="mesh-nodes">
-                <div style="width:42px"></div>
+                <div id="target-swap-dummy" style="width:42px"></div>
             </div>
         </div>
         <datalist id="mesh-nodes">
@@ -84,7 +84,9 @@ const mynode = configuration.getName();
     <script>
     (function(){
         {{_R("open")}}
+        {% if (!request.mobile) { %}
         htmx.find("#tool-target").focus();
+        {% } %}
         const mynode = "{{mynode}}";
         htmx.on("#target-swap", "click", _ => {
             const v = htmx.find("#tool-target").value;

files/app/partial/tools.ut

@@ -32,12 +32,13 @@
  * version
  */
 %}
+{%if (auth.isAdmin) { %}
 <div id="tools" class="popup-menu">
     <label title="Node tools">
         <input type="checkbox">
         <div class="icon tools"></div>
         <div class="menu" hx-on:htmx:after-request="htmx.find('#tools input').checked = false">
-            {% if (hardware.getRadioCount() > 0) { %}
+            {% if (hardware.getRadioCount() > 0 && !request.mobile) { %}
             {% const config = radios.getActiveConfiguration();
             if (config[0]?.mode !== radios.RADIO_OFF || config[1]?.mode !== radios.RADIO_OFF) { %}
             <div hx-trigger="click" hx-get="tools/e/wifiscan" hx-target="#ctrl-modal"><div class="icon signal"></div>WiFi Scan</div>
@@ -53,3 +54,4 @@
         </div>
     </label>
 </div>
+{% } %}

files/app/resource/css/mobile.css

@@ -31,6 +31,10 @@ body.mobile #changes button
 {
     font-size: 18px;
 }
+body.mobile hr
+{
+    margin: 8px 0;
+}
 #m-main
 {
     flex: 1;
@@ -96,6 +100,10 @@ body.mobile #changes button
 {
     filter: var(--nav-icon-filter-select);
 }
+#m-nav #tools .menu .icon
+{
+    min-height: 0;
+}
 #m-nav #login-icon,
 #m-nav #logout-icon
 {
@@ -105,7 +113,17 @@ body.mobile #changes button
 #m-nav #logout-icon .menu
 {
     top: auto;
-    bottom: 60px;
+    bottom: 70px;
+    border-bottom-left-radius: 0;
+    border-top: none;
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+}
+#m-nav #tools .menu
+{
+    left: -26px;
+    bottom: 80px;
+    border-left: none;
     border-bottom-left-radius: 0;
     border-top-left-radius: 10px;
     border-top-right-radius: 10px;
@@ -120,6 +138,10 @@ body.mobile #changes button
     width: 100px;
     font-size: inherit;
 }
+#m-all #tools label
+{
+    left: auto;
+}
 
 body.mobile #ctrl-modal[open]
 {
@@ -144,8 +166,8 @@ body.mobile #ctrl-modal .dialog > div:nth-child(2)
 
 body.mobile #ctrl-modal .ctrl-modal-footer button
 {
-    height: 34px;
+    height: 30px;
-    font-size: 24px;
+    font-size: 20px;
 }
 
 body.mobile #firmware-update-inner
@@ -288,3 +310,21 @@ body.mobile .reboot > div:nth-child(2)
 {
     padding: 10px 0;
 }
+
+.mobile #target-swap,
+.mobile #target-swap-dummy
+{
+    display: none;
+}
+.mobile #ctrl-modal .simple-tool input
+{
+    font-size: 12px;
+}
+.mobile #ctrl-modal .tool-console pre
+{
+    overflow: scroll scroll;
+}
+.mobile #ctrl-modal button#tool-start
+{
+    font-size: 12px;
+}