add dashboard

amqp_dashboard/assets/script.js

@@ -0,0 +1,41 @@
+const renderTable = (colNames, rows) => {
+    const table = document.createElement("table");
+
+    const headerRow = document.createElement("tr");
+
+    colNames.forEach((name) => {
+        const th = document.createElement("th");
+        th.innerText = name;
+
+        headerRow.append(th);
+    });
+    table.append(headerRow);
+
+   rows.forEach((row) => {
+        const contentRow = document.createElement("tr");
+        row.forEach((cell) => {
+            const td = document.createElement("td");
+            td.innerText = cell;
+            contentRow.append(td);
+        });
+       table.append(contentRow);
+    })
+
+    return table;
+}
+
+const renderConnections = (connections) => {
+    const wrapper = document.getElementById("connection-wrapper");
+
+    const table = renderTable(['Connection ID', 'Client Address'], connections.map((conn) =>
+        [conn.id, conn.peer_addr]));
+    wrapper.replaceChildren(table)
+}
+
+const refresh = async () => {
+    const fetched = await fetch('http://localhost:3000/api/data');
+    const data = await fetched.json();
+    renderConnections(data.connections);
+}
+
+setInterval(refresh, 1000);