diff --git a/commander.html b/commander.html
index 192222d..efdc3c2 100644
--- a/commander.html
+++ b/commander.html
@@ -25,6 +25,11 @@
padding: calc(50vh - 150px) 50px;
height: 200px;
}
+ .btn {
+ padding: 10px 20px;
+ background-color: #808080;
+ cursor: pointer;
+ }
@@ -60,6 +65,10 @@
const boatjesEl = document.getElementById('boatjes');
const clientsEl = document.getElementById('clients');
+ const kickIcon = "";
+ const openIcon = "";
+ const lockIcon = "";
+
const serverURL = 'ws://10.254.0.1:8080/';
var conn = false;
@@ -135,8 +144,9 @@
boatRow.className = "boat";
boatRow.dataset['id'] = boat[0];
boatRow.dataset['name'] = boat[1];
- boatRow.dataset['availible'] = boat[2];
+ boatRow.dataset['state'] = boat[2];
let boatCells = [
+ document.createElement("td"),
document.createElement("td"),
document.createElement("td"),
document.createElement("td")
@@ -144,9 +154,23 @@
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]);
+ let lockBtn = document.createElement("div");
+ lockBtn.className = "btn";
+ if (boatRow.dataset['state'] == "locked")
+ {
+ lockBtn.innerHTML = openIcon;
+ lockBtn.addEventListener('click', unlockBoat);
+ }
+ else
+ {
+ lockBtn.innerHTML = lockIcon;
+ lockBtn.addEventListener('click', lockBoat);
+ }
+ boatCells[3].append(lockBtn);
+ for (cell in boatCells)
+ {
+ boatRow.append(cell);
+ }
boatjesEl.append(boatRow);
}
else
@@ -168,17 +192,36 @@
}
}
+ function kickClient(e)
+ {
+ console.log("kickClient", e);
+ // conn.send(passEl.value + ";kick;" + client);
+ }
+
+ function unlockBoat(e)
+ {
+ console.log("unlockBoat", e);
+ // conn.send(passEl.value + ";kick;" + client);
+ }
+
+ function lockBoat(e)
+ {
+ console.log("lockBoat", e);
+ // conn.send(passEl.value + ";kick;" + client);
+ }
+
function addClient(client)
{
client = client.split(';')
if (client.length == 3)
{
- let clientRow = document.createElement("div");
+ let clientRow = document.createElement("tr");
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"),
document.createElement("td")
@@ -186,10 +229,15 @@
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);
+ let kickBtn = document.createElement("div");
+ kickBtn.className = "btn";
+ kickBtn.innerHTML = kickIcon;
+ kickBtn.addEventListener('click', kickClient);
+ clientCells[3].append(kickBtn);
+ for (cell in clientCells)
+ {
+ clientRow.append(cell);
+ }
}
else
{