Moved nodes from Info to separate tab.

This commit is contained in:
Blaz Kristan 2021-03-01 11:13:40 +01:00
parent dd433d8af0
commit 5553964d52
4 changed files with 2120 additions and 2056 deletions

View File

@ -203,6 +203,10 @@ button {
background-color: var(--c-tb);
}
#btnNodes {
display: none;
}
.tab button {
background-color: transparent;
float: left;
@ -366,7 +370,7 @@ button {
z-index: 3;
}
#rover {
#rover, #nodes {
z-index: 2;
}
@ -394,7 +398,7 @@ button {
display: inline-block;
}
#kv {
#kv, #kn {
max-width: 490px;
display: inline-block;
}
@ -931,7 +935,7 @@ input[type=number]::-webkit-outer-spin-button {
}
@media all and (max-width: 1249px) {
#buttonPcm {
#buttonPcm, #buttonNo {
display: none;
}
}

View File

@ -26,6 +26,7 @@
<button id="buttonI" onclick="toggleInfo()"><i class="icons">&#xe34b;</i><p class="tab-label">Info</p></button>
<button onclick="window.location.href = '/settings';"><i class="icons">&#xe0a2;</i><p class="tab-label">Config</p></button>
<button id="buttonPcm" onclick="togglePcMode(true)"><i class="icons">&#xe23d;</i><p class="tab-label">PC Mode</p></button>
<button id="buttonNo" onclick="toggleNodes()"><i class="icons">&#xe22d;</i><p class="tab-label">Nodes</p></button>
</div>
<div id="briwrap">
<p class="hd">Brightness</p>
@ -165,6 +166,7 @@
<button class="tablinks" onclick="openTab(1)"><i class="icons">&#xe23d;</i><p class="tab-label">Effects</p></button>
<button class="tablinks" onclick="openTab(2)"><i class="icons">&#xe34b;</i><p class="tab-label">Segments</p></button>
<button class="tablinks" onclick="openTab(3)"><i class="icons">&#xe04c;</i><p class="tab-label">Favorites</p></button>
<button id="btnNodes" class="tablinks" onclick="toggleNodes()"><i class="icons">&#xe22d;</i><p class="tab-label">Nodes</p></button>
</div>
<div id="connind"></div>
@ -181,7 +183,11 @@
<button class="btn infobtn" id="resetbtn" onclick="cnfReset()">Reboot WLED</button><br>
<span class="h">Made with <span id="heart">&#10084;&#xFE0E;</span> by Aircoookie and the WLED community</span>
</div>
<div id="nodes" class="modal">
<div id="kn">Loading...</div><br>
<button class="btn infobtn" onclick="requestJson(null)">Refresh</button>
<button class="btn infobtn" onclick="toggleNodes()">Close</button><br>
</div>
<div id="rover" class="modal">
<i class="icons huge">&#xe410;</i><br>
<div id="lv">?</div><br><br>

View File

@ -1,7 +1,7 @@
//page js
var loc = false, locip;
var noNewSegs = false;
var isOn = false, nlA = false, isLv = false, isInfo = false, syncSend = false, syncTglRecv = true, isRgbw = false;
var isOn = false, nlA = false, isLv = false, isInfo = false, isNodes = false, syncSend = false, syncTglRecv = true, isRgbw = false;
var whites = [0,0,0];
var expanded = [false];
var powered = [true];
@ -443,6 +443,35 @@ function populatePresets(fromls)
populateQL();
}
function populateNodes(i)
{
var cn="";
var urows="";
if (i.nodes) {
i.nodes.sort((a,b) => (a.name).localeCompare(b.name));
for (var x=0;x<i.nodes.length;x++) {
var o = i.nodes[x];
if (o.name) {
var url = `<button class="btn btna-icon tab" onclick="location.assign('http://${o.ip}');">${o.name}</button>`;
urows += inforow(url,o.type);
}
}
if (i.nodes.length>0) {
var botButtons = d.querySelectorAll('.bot button');
for (btn of botButtons) {
btn.style.width = '20%';
}
d.getElementById('btnNodes').style.display = "inline";
} else
d.getElementById('btnNodes').style.display = "none";
}
cn += `<table class="infot">
${urows}
${inforow("Current node:",i.name)}
</table>`;
d.getElementById('kn').innerHTML = cn;
}
function populateInfo(i)
{
var cn="";
@ -775,6 +804,7 @@ function requestJson(command, rinfo = true, verbose = true) {
s = json.state;
displayRover(info, s);
}
populateNodes(info);
isOn = s.on;
d.getElementById('sliderBri').value= s.bri;
nlA = s.nl.on;
@ -884,6 +914,13 @@ function toggleInfo() {
d.getElementById('buttonI').className = (isInfo) ? "active":"";
}
function toggleNodes() {
isNodes = !isNodes;
if (isNodes) populateNodes(lastinfo);
d.getElementById('nodes').style.transform = (isNodes) ? "translateY(0px)":"translateY(100%)";
d.getElementById('buttonNo').className = (isNodes) ? "active":"";
}
function makeSeg() {
var ns = 0;
if (lowestUnused > 0) {

File diff suppressed because it is too large Load Diff