_www: display list of HTTP and WebSocket target on navigation

While at it, fix height and autoscroll on left navigation.

3 files changed, 60 insertions, 14 deletions

diff --git a/_www/index.css b/_www/index.css
index 18f5855..cadad8f 100644
--- a/_www/index.css
+++ b/_www/index.css
@@ -26,16 +26,24 @@ body {
 }
 
 .nav {
-	height: calc(100% - 2em);
+	height: calc(100% - 4em);
 	padding: 1em;
 	position: fixed;
 	width: 14em;
 	border-right: 1px solid lightgrey;
+	overflow: auto;
+}
+.nav .navTarget {
+	cursor: pointer;
+	margin-bottom: 1em;
 }
-.nav .nav-item {
+.nav .navHttpTarget,
+.nav .navWebSocketTarget {
 	cursor: pointer;
 	margin-bottom: 1em;
+	margin-left: 1em;
 }
+
 .nav .footer {
 	bottom: 0;
 	font-size: 9pt;
diff --git a/_www/index.html b/_www/index.html
index f753ed4..fb6fc52 100644
--- a/_www/index.html
+++ b/_www/index.html
@@ -12,11 +12,11 @@
 		<div class="nav">
 			<h1>Trunks</h1>
 
-			<div class="nav-item">
-				<h3 onclick="environmentRender()">Environment</h3>
+			<div class="navTarget">
+				<h3 onclick="renderEnvironment()">Environment</h3>
 			</div>
 
-			<div id="nav-content"></div>
+			<div id="navContent"></div>
 
 			<div class="footer">
 				Powered by <a href="https://sr.ht/~shulhan/trunks" target="_blank">Trunks</a>
diff --git a/_www/index.js b/_www/index.js
index a902ad1..c696ff4 100644
--- a/_www/index.js
+++ b/_www/index.js
@@ -32,18 +32,46 @@ async function main() {
 	let targets = res.data
 
 	let w = ""
-	for (let x = 0; x < targets.length; x++) {
-		let target = targets[x]
+	for (let target of targets) {
 		_targets[target.ID] = target
 
 		w += `
-			<div class="nav-item">
-				<h3 onclick="renderTarget('${target.ID}')">${target.Name}</h3>
+			<div class="navTarget">
+				<h3 onclick="renderTarget('${target.ID}', '', '')">${target.Name}</h3>
+		`
+
+		if (target.HttpTargets) {
+			for (let ht of target.HttpTargets) {
+				w += `
+					<div
+						class="navHttpTarget"
+						onclick="renderTarget('${target.ID}', '${ht.ID}', '')"
+					>
+						${ht.Name}
+					</div>
+				`
+			}
+		}
+
+		if (target.WebSocketTargets) {
+			for (let wst of target.WebSocketTargets) {
+				w += `
+					<div
+						class="navWebSocketTarget"
+						onclick="renderTarget('${target.ID}', '', '${wst.ID}')"
+					>
+						${wst.Name}
+					</div>
+				`
+			}
+		}
+
+		w += `
 			</div>
 		`
 	}
 
-	document.getElementById("nav-content").innerHTML = w
+	document.getElementById("navContent").innerHTML = w
 }
 
 async function environmentGet() {
@@ -64,7 +92,7 @@ async function environmentGet() {
 	}
 }
 
-async function environmentRender() {
+async function renderEnvironment() {
 	document.getElementById("main-content").innerHTML = `
 		<h2> Environment </h2>
 		<div class="environment">
@@ -94,7 +122,7 @@ async function environmentRender() {
 	`
 }
 
-function renderTarget(targetID) {
+function renderTarget(targetID, htid, wstid) {
 	let target = _targets[targetID]
 	if (target === null) {
 		console.log(`invalid target ${targetID}`)
@@ -150,6 +178,12 @@ function renderTarget(targetID) {
 
 	renderHttpTargets(target)
 	renderWebSocketTargets(target)
+
+	if (htid) {
+		document.getElementById(htid).scrollIntoView()
+	} else if (wstid) {
+		document.getElementById(wstid).scrollIntoView()
+	}
 }
 
 function renderHttpTargets(target) {
@@ -398,8 +432,12 @@ async function run(targetID, httpTargetID) {
 		return
 	}
 
-	document.getElementById(httpTargetID + "_request").innerHTML = atob(res.data.DumpRequest)
-	document.getElementById(httpTargetID + "_response").innerHTML = atob(res.data.DumpResponse)
+	document.getElementById(httpTargetID + "_request").innerHTML = atob(
+		res.data.DumpRequest,
+	)
+	document.getElementById(httpTargetID + "_response").innerHTML = atob(
+		res.data.DumpResponse,
+	)
 }
 
 async function runWebSocket(targetID, wstID) {