src/judas_server/web/templates/panel.html

@@ -44,6 +44,26 @@
             null,
             2,
           );
+
+          // Update client list
+          const clientList = $("#client-list");
+
+          clientList.empty();
+          Object.entries(data).forEach(([clientId, client]) => {
+            const listItem = document.createElement("li");
+
+            const iconElement = document.createElement("i");
+            iconElement.classList.add("fi", "fi-sr-play");
+            iconElement.style.color = "var(--ctp-green)";
+            listItem.appendChild(iconElement);
+
+            const spanElement = document.createElement("a");
+            spanElement.appendChild(document.createTextNode(clientId));
+            spanElement.href = `#${clientId}`;
+
+            listItem.appendChild(spanElement);
+            clientList.append(listItem);
+          });
         });
       });
     </script>
@@ -61,7 +81,12 @@
       </header>
       <div id="notify"></div>
       <main>
-        <pre id="data"></pre>
+        <aside>
+          <ul id="client-list"></ul>
+        </aside>
+        <div id="content">
+          <pre id="data"></pre>
+        </div>
       </main>
     </div>
   </body>