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> <button id="login">login</button>
</div> </div>
<main> <main>
<div id="boatjes"></div> <table>
<div id="clients"></div> <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> </main>
<script> <script>
const passEl = document.getElementById('pass'); const passEl = document.getElementById('pass');
@ -44,7 +62,7 @@
const serverURL = 'ws://10.254.0.1:8080/'; const serverURL = 'ws://10.254.0.1:8080/';
var conn = new WebSocket(serverURL, ['mbcRcRf']); var conn = None;
loginEl.addEventListener('click', login) loginEl.addEventListener('click', login)
@ -97,6 +115,7 @@
function addBoats(boats) function addBoats(boats)
{ {
boatjesEl.innerHTML = "";
boats = boats.split(':'); boats = boats.split(':');
for (let boat in boats) for (let boat in boats)
{ {
@ -112,12 +131,23 @@
boat = boat.split(';') boat = boat.split(';')
if (boat.length == 3) if (boat.length == 3)
{ {
let boatEl = document.createElement("div"); let boatRow = document.createElement("tr");
boatEl.className = "boat"; boatRow.className = "boat";
boatEl.dataset['id'] = boat[0]; boatRow.dataset['id'] = boat[0];
boatEl.dataset['availible'] = boat[2]; boatRow.dataset['name'] = boat[1];
boatEl.innerText = boat[1]; boatRow.dataset['availible'] = boat[2];
boatjesEl.append(boatEl); 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 else
{ {
@ -127,6 +157,7 @@
function addClients(clients) function addClients(clients)
{ {
clientsEl.innerHTML = "";
clients = clients.split(':'); clients = clients.split(':');
for (let client in clients) for (let client in clients)
{ {
@ -140,17 +171,29 @@
function addClient(client) function addClient(client)
{ {
client = client.split(';') client = client.split(';')
if (client.length == 2) if (client.length == 3)
{ {
let clientEl = document.createElement("div"); let clientRow = document.createElement("div");
clientEl.className = "client"; clientRow.className = "client";
clientEl.dataset['id'] = client[0]; clientRow.dataset['id'] = client[0];
clientEl.innerText = client[0] + " controlls " + client[1]; clientRow.dataset['boat'] = client[1];
clientsEl.append(clientEl); 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 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> </script>