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

commander: convert divs to tables

Browse Source
This commit is contained in:
Laila van Reenen 2024-08-12 16:35:11 +02:00
parent bbdbed5c25
commit c1fa8bda61
Signed by: LailaTheElf
GPG Key ID: 1F4E6EE3E6DDF769
1 changed files with 59 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
commander.html
View File

@ -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>