LailaTheElf/rcrf-wifi
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

commander update

Browse Source
This commit is contained in:
Laila van Reenen 2024-08-12 16:58:26 +02:00
parent 414396bc3e
commit 25d4a96f10
Signed by: LailaTheElf
GPG Key ID: 1F4E6EE3E6DDF769
1 changed files with 57 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
commander.html
View File

@ -25,6 +25,11 @@
padding: calc(50vh - 150px) 50px; padding: calc(50vh - 150px) 50px;
height: 200px; height: 200px;
} }
.btn {
padding: 10px 20px;
background-color: #808080;
cursor: pointer;
}
</style> </style>
</head> </head>
<body> <body>
@ -60,6 +65,10 @@
const boatjesEl = document.getElementById('boatjes'); const boatjesEl = document.getElementById('boatjes');
const clientsEl = document.getElementById('clients'); 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 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 serverURL = 'ws://10.254.0.1:8080/'; const serverURL = 'ws://10.254.0.1:8080/';
var conn = false; var conn = false;
@ -135,8 +144,9 @@
boatRow.className = "boat"; boatRow.className = "boat";
boatRow.dataset['id'] = boat[0]; boatRow.dataset['id'] = boat[0];
boatRow.dataset['name'] = boat[1]; boatRow.dataset['name'] = boat[1];
boatRow.dataset['availible'] = boat[2]; boatRow.dataset['state'] = boat[2];
let boatCells = [ let boatCells = [
document.createElement("td"),
document.createElement("td"), document.createElement("td"),
document.createElement("td"), document.createElement("td"),
document.createElement("td") document.createElement("td")
@ -144,9 +154,23 @@
boatCells[0].innerText = boat[0]; boatCells[0].innerText = boat[0];
boatCells[1].innerText = boat[1]; boatCells[1].innerText = boat[1];
boatCells[2].innerText = boat[2]; boatCells[2].innerText = boat[2];
boatRow.append(boatCells[0]); let lockBtn = document.createElement("div");
boatRow.append(boatCells[1]); lockBtn.className = "btn";
boatRow.append(boatCells[2]); 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); boatjesEl.append(boatRow);
} }
else 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) function addClient(client)
{ {
client = client.split(';') client = client.split(';')
if (client.length == 3) if (client.length == 3)
{ {
let clientRow = document.createElement("div"); let clientRow = document.createElement("tr");
clientRow.className = "client"; clientRow.className = "client";
clientRow.dataset['id'] = client[0]; clientRow.dataset['id'] = client[0];
clientRow.dataset['boat'] = client[1]; clientRow.dataset['boat'] = client[1];
clientRow.dataset['state'] = client[2]; clientRow.dataset['state'] = client[2];
let clientCells = [ let clientCells = [
document.createElement("td"),
document.createElement("td"), document.createElement("td"),
document.createElement("td"), document.createElement("td"),
document.createElement("td") document.createElement("td")
@ -186,10 +229,15 @@
clientCells[0].innerText = client[0]; clientCells[0].innerText = client[0];
clientCells[1].innerText = client[1]; clientCells[1].innerText = client[1];
clientCells[2].innerText = client[2]; clientCells[2].innerText = client[2];
clientRow.append(clientCells[0]); let kickBtn = document.createElement("div");
clientRow.append(clientCells[1]); kickBtn.className = "btn";
clientRow.append(clientCells[2]); kickBtn.innerHTML = kickIcon;
clientsEl.append(clientRow); kickBtn.addEventListener('click', kickClient);
clientCells[3].append(kickBtn);
for (cell in clientCells)
{
clientRow.append(cell);
}
} }
else else
{ {