From c1fa8bda61c8a98cec7c507c581128c7ce079751 Mon Sep 17 00:00:00 2001
From: FReenen <git@finnvanreenen.nl>
Date: Mon, 12 Aug 2024 16:35:11 +0200
Subject: [PATCH] commander: convert divs to tables

---
 commander.html | 75 +++++++++++++++++++++++++++++++++++++++-----------
 1 file changed, 59 insertions(+), 16 deletions(-)

diff --git a/commander.html b/commander.html
index defb46b..1ec77e6 100644
--- a/commander.html
+++ b/commander.html
@@ -33,8 +33,26 @@
       <button id="login">login</button>
    </div>
    <main>
-      <div id="boatjes"></div>
-      <div id="clients"></div>
+      <table>
+         <thead>
+            <tr>
+               <th>id</th>
+               <th>naam</th>
+               <th>status</th>
+            </tr>
+         </thead>
+         <tbody id="boatjes"></tbody>
+      </table>
+      <table>
+         <thead>
+            <tr>
+               <th>id</th>
+               <th>boat</th>
+               <th>status</th>
+            </tr>
+         </thead>
+         <tbody id="clients"></tbody>
+      </table>
    </main>
    <script>
       const passEl = document.getElementById('pass');
@@ -44,7 +62,7 @@
 
       const serverURL = 'ws://10.254.0.1:8080/';
 
-      var conn = new WebSocket(serverURL, ['mbcRcRf']);
+      var conn = None;
 
       loginEl.addEventListener('click', login)
 
@@ -97,6 +115,7 @@
 
       function addBoats(boats)
       {
+         boatjesEl.innerHTML = "";
          boats = boats.split(':');
          for (let boat in boats)
          {
@@ -112,12 +131,23 @@
          boat = boat.split(';')
          if (boat.length == 3)
          {
-            let boatEl = document.createElement("div");
-            boatEl.className = "boat";
-            boatEl.dataset['id'] = boat[0];
-            boatEl.dataset['availible'] = boat[2];
-            boatEl.innerText = boat[1];
-            boatjesEl.append(boatEl);
+            let boatRow = document.createElement("tr");
+            boatRow.className = "boat";
+            boatRow.dataset['id'] = boat[0];
+            boatRow.dataset['name'] = boat[1];
+            boatRow.dataset['availible'] = boat[2];
+            let boatCells = [
+               document.createElement("td"),
+               document.createElement("td"),
+               document.createElement("td")
+            ]
+            boatCells[0].innerText = boat[0];
+            boatCells[1].innerText = boat[1];
+            boatCells[2].innerText = boat[2];
+            boatRow.append(boatCells[0]);
+            boatRow.append(boatCells[1]);
+            boatRow.append(boatCells[2]);
+            boatjesEl.append(boatRow);
          }
          else
          {
@@ -127,6 +157,7 @@
 
       function addClients(clients)
       {
+         clientsEl.innerHTML = "";
          clients = clients.split(':');
          for (let client in clients)
          {
@@ -140,17 +171,29 @@
       function addClient(client)
       {
          client = client.split(';')
-         if (client.length == 2)
+         if (client.length == 3)
          {
-            let clientEl = document.createElement("div");
-            clientEl.className = "client";
-            clientEl.dataset['id'] = client[0];
-            clientEl.innerText = client[0] + " controlls " + client[1];
-            clientsEl.append(clientEl);
+            let clientRow = document.createElement("div");
+            clientRow.className = "client";
+            clientRow.dataset['id'] = client[0];
+            clientRow.dataset['boat'] = client[1];
+            clientRow.dataset['state'] = client[2];
+            let clientCells = [
+               document.createElement("td"),
+               document.createElement("td"),
+               document.createElement("td")
+            ]
+            clientCells[0].innerText = client[0];
+            clientCells[1].innerText = client[1];
+            clientCells[2].innerText = client[2];
+            clientRow.append(clientCells[0]);
+            clientRow.append(clientCells[1]);
+            clientRow.append(clientCells[2]);
+            clientsEl.append(clientRow);
          }
          else
          {
-            console.warn("addBoat(): incorect number of args (" + client.length.toString() + "; " + client.toString() + ")");
+            console.warn("addClient(): incorect number of args (" + client.length.toString() + "; " + client.toString() + ")");
          }
       }
    </script>