feat: improve ui and add test service

1 files changed, 34 insertions, 24 deletions

diff --git a/assets/index.js b/assets/index.js
index 12bce67..a4e5c2b 100644
--- a/assets/index.js
+++ b/assets/index.js
@@ -1,4 +1,5 @@
 const serviceMap = new Map();
+const elementMap = new Map();
 
 async function getServices() {
 	const url = "api/v1/list";
@@ -28,35 +29,44 @@ function updateStatus() {
 	}
 }
 
-function updateService(statusElm, name, data) {
+function createStatusTbody(name, data) {
+	const tbody = document.createElement("tbody");
+
+	const trowService = document.createElement("tr");
+	const tdataName = document.createElement("td");
+	tdataName.textContent = name;
+	trowService.appendChild(tdataName);
+
+	const tdataStatus = document.createElement("td");
 	switch (data.status) {
 		case "ok": {
-			statusElm.innerHTML = "";
-			statusElm.textContent = "Ok";
-			statusElm.setAttribute("class", "ok");
+			tdataStatus.textContent = "Ok";
+			tdataStatus.setAttribute("class", "ok");
 			serviceMap.set(name, true);
 			break;
 		}
 		case "error": {
-			const summaryElm = document.createElement("summary");
-			summaryElm.textContent = "Error";
-
-			const expandElm = document.createElement("code");
-			expandElm.textContent = data.output;
-
-			const detailsElm = document.createElement("details");
-			detailsElm.appendChild(summaryElm);
-			detailsElm.appendChild(expandElm);
-
-			statusElm.innerHTML = "";
-			statusElm.appendChild(detailsElm);
-			statusElm.setAttribute("class", "error");
+			tdataStatus.textContent = "Error";
+			tdataStatus.setAttribute("class", "error");
 			serviceMap.set(name, false);
 			break;
 		}
 	}
 
-	updateStatus();
+	trowService.appendChild(tdataStatus);
+	tbody.appendChild(trowService);
+
+	if (data.output) {
+		const trowOutput = document.createElement("tr");
+		trowOutput.setAttribute("class", "details");
+		const tdataOutput = document.createElement("td");
+		tdataOutput.textContent = data.output;
+		tdataOutput.setAttribute("colspan", "2");
+		trowOutput.appendChild(tdataOutput);
+		tbody.appendChild(trowOutput);
+	}
+
+	return tbody;
 }
 
 getServices().then((services) => {
@@ -67,15 +77,15 @@ getServices().then((services) => {
 
 	for (const service of services) {
 		const table = document.getElementById("services");
-		const row = table.insertRow();
-		const nameElm = row.insertCell();
-		nameElm.textContent = service;
-		const statusElm = row.insertCell();
+		let tbody = createStatusTbody(service, { "data": "ok" });
+		table.appendChild(tbody);
 
 		evtSource.addEventListener(service, (event) => {
 			data = JSON.parse(event.data);
-			updateService(statusElm, service, data);
-			console.log(`service: ${service}, event: ${event}`);
+			tbodyNew = createStatusTbody(service, data);
+			tbody.replaceWith(tbodyNew);
+			tbody = tbodyNew;
+			updateStatus();
 		});
 	}
 });