commander update

commander.html

@@ -72,6 +72,8 @@
       const serverURL = 'ws://10.254.0.1:8080/';
 
       var conn = false;
+      var boats = [];
+      var boatsLocked = [];
 
       loginEl.addEventListener('click', login);
 
@@ -100,7 +102,16 @@
          switch (data)
          {
             case 'boats':
+               boatjesEl.innerHTML = "";
                addBoats(msg);
+               addBoats(boatsLocked);
+               boats = msg;
+               break;
+            case 'lockedBoats':
+               boatjesEl.innerHTML = "";
+               addBoats(boats);
+               addBoats(msg);
+               boatsLocked = msg;
                passEl.parentElement.style.display = 'none';
                break;
             case 'clients':
@@ -124,7 +135,6 @@
 
       function addBoats(boats)
       {
-         boatjesEl.innerHTML = "";
          boats = boats.split(':');
          for (let boat in boats)
          {
@@ -192,22 +202,34 @@
          }
       }
 
+      function getDataFomEl(el)
+      {
+         while (el.tagName != "BODY" && el.dataset['id'] == null)
+         {
+            el = el.parentElement;
+         }
+         return el.dataset;
+      }
+
       function kickClient(e)
       {
-         console.log("kickClient", e);
-         // conn.send(passEl.value + ";kick;" + client);
+         let client = getDataFomEl(e.target);
+         console.log("kickClient", client);
+         conn.send(passEl.value + ";kick;" + client['id']);
       }
 
       function unlockBoat(e)
       {
-         console.log("unlockBoat", e);
-         // conn.send(passEl.value + ";kick;" + client);
+         let boat = getDataFomEl(e.target);
+         console.log("unlockBoat", boat);
+         conn.send(passEl.value + ";unlock;" + boat['id']);
       }
 
       function lockBoat(e)
       {
-         console.log("lockBoat", e);
-         // conn.send(passEl.value + ";kick;" + client);
+         let boat = getDataFomEl(e.target);
+         console.log("lockBoat", boat);
+         conn.send(passEl.value + ";lock;" + boat['id']);
       }
 
       function addClient(client)