Moved nodes from Info to separate tab.

Author: blazoncek

wled00/data/index.css

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

wled00/data/index.htm

@@ -26,7 +26,8 @@
 		<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>
-		</div>
+			<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>
 			<div class="il">
@@ -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>

wled00/data/index.js

@@ -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) {