update

commander.html

@@ -73,9 +73,13 @@
       const boatjesEl = document.getElementById('boatjes');
       const clientsEl = document.getElementById('clients');
 
-      const kickIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-slash-circle\" viewBox=\"0 0 16 16\"><path d=\"M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16\"/><path d=\"M11.354 4.646a.5.5 0 0 0-.708 0l-6 6a.5.5 0 0 0 .708.708l6-6a.5.5 0 0 0 0-.708\"/></svg>";
+      const kickIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-hand-thumbs-down\" viewBox=\"0 0 16 16\"><path d=\"M8.864 15.674c-.956.24-1.843-.484-1.908-1.42-.072-1.05-.23-2.015-.428-2.59-.125-.36-.479-1.012-1.04-1.638-.557-.624-1.282-1.179-2.131-1.41C2.685 8.432 2 7.85 2 7V3c0-.845.682-1.464 1.448-1.546 1.07-.113 1.564-.415 2.068-.723l.048-.029c.272-.166.578-.349.97-.484C6.931.08 7.395 0 8 0h3.5c.937 0 1.599.478 1.934 1.064.164.287.254.607.254.913 0 .152-.023.312-.077.464.201.262.38.577.488.9.11.33.172.762.004 1.15.069.13.12.268.159.403.077.27.113.567.113.856s-.036.586-.113.856c-.035.12-.08.244-.138.363.394.571.418 1.2.234 1.733-.206.592-.682 1.1-1.2 1.272-.847.283-1.803.276-2.516.211a10 10 0 0 1-.443-.05 9.36 9.36 0 0 1-.062 4.51c-.138.508-.55.848-1.012.964zM11.5 1H8c-.51 0-.863.068-1.14.163-.281.097-.506.229-.776.393l-.04.025c-.555.338-1.198.73-2.49.868-.333.035-.554.29-.554.55V7c0 .255.226.543.62.65 1.095.3 1.977.997 2.614 1.709.635.71 1.064 1.475 1.238 1.977.243.7.407 1.768.482 2.85.025.362.36.595.667.518l.262-.065c.16-.04.258-.144.288-.255a8.34 8.34 0 0 0-.145-4.726.5.5 0 0 1 .595-.643h.003l.014.004.058.013a9 9 0 0 0 1.036.157c.663.06 1.457.054 2.11-.163.175-.059.45-.301.57-.651.107-.308.087-.67-.266-1.021L12.793 7l.353-.354c.043-.042.105-.14.154-.315.048-.167.075-.37.075-.581s-.027-.414-.075-.581c-.05-.174-.111-.273-.154-.315l-.353-.354.353-.354c.047-.047.109-.176.005-.488a2.2 2.2 0 0 0-.505-.804l-.353-.354.353-.354c.006-.005.041-.05.041-.17a.9.9 0 0 0-.121-.415C12.4 1.272 12.063 1 11.5 1\"/></svg>"
+      const banIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-slash-circle\" viewBox=\"0 0 16 16\"><path d=\"M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16\"/><path d=\"M11.354 4.646a.5.5 0 0 0-.708 0l-6 6a.5.5 0 0 0 .708.708l6-6a.5.5 0 0 0 0-.708\"/></svg>";
       const openIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-key\" viewBox=\"0 0 16 16\"><path d=\"M0 8a4 4 0 0 1 7.465-2H14a.5.5 0 0 1 .354.146l1.5 1.5a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0L13 9.207l-.646.647a.5.5 0 0 1-.708 0L11 9.207l-.646.647a.5.5 0 0 1-.708 0L9 9.207l-.646.647A.5.5 0 0 1 8 10h-.535A4 4 0 0 1 0 8m4-3a3 3 0 1 0 2.712 4.285A.5.5 0 0 1 7.163 9h.63l.853-.854a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.793-.793-1-1h-6.63a.5.5 0 0 1-.451-.285A3 3 0 0 0 4 5\"/><path d=\"M4 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0\"/></svg>";
       const lockIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-lock\" viewBox=\"0 0 16 16\"><path d=\"M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2m3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2M5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1\"/></svg>";
+      const freeIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-calendar-event\" viewBox=\"0 0 16 16\"><path d=\"M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5z\"/><path d=\"M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5M1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4z\"/></svg>"
+      const logIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-list-check\" viewBox=\"0 0 16 16\">  <path fill-rule=\"evenodd\" d=\"M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5M3.854 2.146a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708L2 3.293l1.146-1.147a.5.5 0 0 1 .708 0m0 4a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708L2 7.293l1.146-1.147a.5.5 0 0 1 .708 0m0 4a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 0 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0\"/></svg>"
+
 
       const serverURL = 'ws://10.254.0.1:8080/';
 
@@ -168,6 +172,11 @@
          conn.send(passEl.value + ";lock;" + boat['id']);
       }
 
+      fucntion getBoatLog(e)
+      {
+         alert("loggy log");
+      }
+
       function reqBoats()
       {
          conn.send(passEl.value + ";boats");
@@ -220,17 +229,19 @@
             boatCells[2].innerText = boat[2];
             let lockBtn = document.createElement("div");
             lockBtn.className = "btn";
-            if (boatRow.dataset['state'] == "locked")
+            lockBtn.innerHTML = lockIcon;
-            {
+            lockBtn.addEventListener('click', lockBoat);
-               lockBtn.innerHTML = openIcon;
-               lockBtn.addEventListener('click', freeBoat);
-            }
-            else
-            {
-               lockBtn.innerHTML = lockIcon;
-               lockBtn.addEventListener('click', lockBoat);
-            }
             boatCells[3].append(lockBtn);
+            let freeBtn = document.createElement("div");
+            freeBtn.className = "btn";
+            freeBtn.innerHTML = freeIcon;
+            freeBtn.addEventListener('click', freeBoat);
+            boatCells[3].append(freeBtn);
+            let logBtn = document.createElement("div");
+            logBtn.className = "btn";
+            logBtn.innerHTML = logIcon;
+            logBtn.addEventListener('click', getBoatLog);
+            boatCells[3].append(logBtn);
             for (cell in boatCells)
             {
                boatRow.append(boatCells[cell]);

ground-station.py

@@ -23,13 +23,14 @@ async def sendToBoat(boat, cmd):
 async def echo_boats(client):
     """echo list of all not locked boats to client"""
     data = "boats:"
-    for boat in Boats:
+    if client['state'] != "kicked":
-        if boat['state'] != BOAT_STATE_LOCKED and boat['state'] != BOAT_STATE_TERMINATED:
+        for boat in Boats:
-            data += str(boat['id']) + ";" + str(boat['name']) + ";"
+            if boat['state'] != BOAT_STATE_LOCKED and boat['state'] != BOAT_STATE_TERMINATED:
-            if boat["state"] == BOAT_STATE_AVAILABLE:
+                data += str(boat['id']) + ";" + str(boat['name']) + ";"
-                data += 'available:'
+                if boat["state"] == BOAT_STATE_AVAILABLE:
-            elif boat["state"] == BOAT_STATE_INCTRL:
+                    data += 'available:'
-                data += 'inctrl:'
+                elif boat["state"] == BOAT_STATE_INCTRL:
+                    data += 'inctrl:'
     await client['ws'].send(data)
 
 async def echo_locked_boats(client):
@@ -46,10 +47,13 @@ async def echo_clients(client):
     if client['id'] == ADMIN_ID:
         data = "clients:"
         for clie in Clients:
+            clientId = clie['id']
             if (clie['id'] == ADMIN_ID):
-                data += "admin;" + str(clie['boat']) + ";" + str(clie['state']) + ":"
+                clientId = "admin"
-            else:
+            boatId = "----"
-                data += str(clie['id']) + ";" + str(clie['boat']) + ";" + str(clie['state']) + ":"
+            if (clie['boat'] is not None):
+                boatId = clie['boat']['id']
+            data += clientId + ";" + boatId + ";" + str(clie['state']) + ":"
         await client['ws'].send(data + '\n')
 
 async def take_controll(client, boat):
@@ -108,6 +112,17 @@ async def sendcmd(data):
             await sendToBoat(b, data)
             return
 
+async def kick_client(clientId):
+    """kick a client"""
+    for client in Clients:
+        if client['id'] == client and client['state'] == "terminated":
+            if client['state'] is not None:
+                client['boat']['state'] = BOAT_STATE_AVAILABLE
+                client['boat'] = None
+                client['state'] = "kicked"
+                await client['ws'].send("FAIL")
+            return
+
 
 
 
@@ -127,10 +142,10 @@ async def on_message(message, client):
             await free_boat(data[2])
         elif data[1] == "lock" and client["id"] == ADMIN_ID:
             await lock_boat(data[2])
-        elif data[1] == "locked":
+        elif data[1] == "locked" and client["id"] == ADMIN_ID:
             await echo_locked_boats(client)
-        elif data[1] == "kick":
+        elif data[1] == "kick" and client["id"] == ADMIN_ID:
-            print("kick")
+            await kick_client(data[2])
         elif data[1] == "clients":
             await echo_clients(client)
         elif data[1] == "d":
@@ -158,6 +173,8 @@ async def new_client(clientId, ws):
         print("new client connected: " + client['id'])
     for clie in Clients:
         if clie['id'] == client['id']:
+            if client['state'] == "kicked":
+                client['state'] = "kicked"
             clie['state'] = 'terminated'
     Clients.append(client)
     return client

index.html

@@ -29,60 +29,83 @@
         var boatListEl = document.getElementById('boats');
         var stickEl = document.getElementById('canvas');
 
-        var connection = new WebSocket('ws://' + "10.254.0.1" + ':8080/', ['mbcRcRf']);
+        var connection = false;
+        var refresh_timer = false;
+        var state = "connecting";
         
-        connection.onopen = function () 
+        function conn_onopen() 
         {
             connection.send(clientId + ';4675;' + Math.floor(new Date().getTime()/1000.0).toString());
             setTimeout(() => { connection.send(clientId + ';boats'); }, 100);
+            state = "connected";
         };
 
-        connection.onerror = function (error)
+        function conn_onerror(error)
         {
             console.log('WebSocket Error ', error);
             alert('WebSocket Error ', error);
-
-            //connection.onmessage({ data: "boats:50;test 1;available:164;tosti;available" })
         };
 
-        connection.onmessage = function (e)
+        function conn_onmessage(e)
         {
             let data = e.data.split(':');
             if (data[0] == "boats")
             {
-                console.log("boats: ", data);
+                if (state == 'connected')
-                boatListEl.innerHTML = "";
-                stickEl.style.display = 'none';
-                boatListEl.style.display  = 'block';
-                for (let boat in data)
                 {
-                    boat = data[boat].split(';');
+                    console.log("boats: ", data);
-                    if ((boat.length == 3) && (boat[2] == 'available'))
+                    boatListEl.innerHTML = "";
+                    stickEl.style.display = 'none';
+                    boatListEl.style.display  = 'block';
+                    for (let boat in data)
                     {
-                        console.log("render boat", boat);
+                        boat = data[boat].split(';');
-                        let el = document.createElement("div");
+                        if ((boat.length == 3) && (boat[2] == 'available'))
-                        el.style.textAlign = "center";
+                        {
-                        el.style.borderRadius = "10px";
+                            console.log("render boat", boat);
-                        el.style.backgroundColor = "#242495";
+                            let el = document.createElement("div");
-                        el.style.padding = "10px";
+                            el.style.textAlign = "center";
-                        el.style.margin = "5px 25%";
+                            el.style.borderRadius = "10px";
-                        el.style.color = "white";
+                            el.style.backgroundColor = "#242495";
-                        el.style.cursor = "pointer";
+                            el.style.padding = "10px";
-                        el.id = "boat" + boat[0];
+                            el.style.margin = "5px 25%";
-                        el.innerHTML = boat[1];
+                            el.style.color = "white";
-                        el.addEventListener('click', selectBoat);
+                            el.style.cursor = "pointer";
-                        boatListEl.appendChild(el);
+                            el.id = "boat" + boat[0];
+                            el.innerHTML = boat[1];
+                            el.addEventListener('click', selectBoat);
+                            boatListEl.appendChild(el);
+                        }
                     }
+                    if (refresh_timer)
+                    {
+                        clearTimeout(refresh_timer);
+                    }
+                    refresh_timer = setTimeout(()=>{connection.send(clientId + ';boats')}, 1000)
                 }
             }
+            else if (data[0] == "FAIL")
+            {
+                console.error("ground station send FAIL");
+                connection.send(clientId + ';boats');
+            }
             else
             {
                 console.log('Server: ', e.data);
             }
         };
 
+        function connect()
+        {
+            connection = new WebSocket('ws://10.254.0.1:8080/', ['mbcRcRf']);
+            connection.onopen = conn_onopen;
+            connection.onerror = conn_onerror;
+            connection.onmessage = conn_onmessage;
+        }
+
         function selectBoat(e)
         {
+            clearTimeout(refresh_timer);
             connection.send(clientId + ';ctrl;' + e.target.id.split('boat')[1]);
             console.log('ctrl:', e.target.id.split('boat')[1]);
             stickEl.style.display = 'block';