Mirrors
/
aredn
mirror of https://github.com/aredn/aredn.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add some mobile tools (#1690)

This commit is contained in:
Tim Wilkinson 2024-11-13 16:52:57 -08:00 committed by GitHub
parent 9630ec6656
commit 0eeca43e44
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 95 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
files/app/main/app.ut
View File

@ -146,11 +146,9 @@
</a>
</div>
<div>
{%if (auth.isAdmin) { %}
<a href="tools">
<div class="icon tools"></div>
</a>
{% } %}
<div style="margin: 0 calc(50% - 21px);">
{{_R("tools")}}
</div>
</div>
<div>
{{_R("login")}}
@ -158,8 +156,43 @@
</div>
</div>
<script>
document.querySelector("#m-all").addEventListener("click", _ => body.focus());
document.querySelector("#ctrl-modal").addEventListener("click", _ => body.focus());
(function(){
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>

4
files/app/main/tools/e/iperf3.ut
View File

@ -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;

4
files/app/main/tools/e/ping.ut
View File

@ -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;

4
files/app/main/tools/e/traceroute.ut
View File

@ -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;

4
files/app/partial/tools.ut
View File

@ -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>
{% } %}

46
files/app/resource/css/mobile.css
View File

@ -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;
font-size: 24px;
height: 30px;
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;
}