201 lines
5.4 KiB
HTML
201 lines
5.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>MBC rc boatjes - commander</title>
|
|
<style>
|
|
* {
|
|
--background: #000000;
|
|
--background-second: #222222;
|
|
--foreground: #CCCCCC;
|
|
}
|
|
body {
|
|
background-color: var(--background);
|
|
color: var(--foreground);
|
|
}
|
|
.login {
|
|
position: fixed;
|
|
top: 50px;
|
|
right: 50px;
|
|
bottom: 50px;
|
|
left: 50px;
|
|
background-color: var(--background-second);
|
|
text-align: center;
|
|
padding: calc(50vh - 150px) 50px;
|
|
height: 200px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="login">
|
|
<input id="pass" type="password" value="1234" />
|
|
<button id="login">login</button>
|
|
</div>
|
|
<main>
|
|
<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');
|
|
const loginEl = document.getElementById('login');
|
|
const boatjesEl = document.getElementById('boatjes');
|
|
const clientsEl = document.getElementById('clients');
|
|
|
|
const serverURL = 'ws://10.254.0.1:8080/';
|
|
|
|
var conn = false;
|
|
|
|
loginEl.addEventListener('click', login);
|
|
|
|
function login(e)
|
|
{
|
|
if (conn) conn.close();
|
|
conn = new WebSocket(serverURL, ['mbcRcRf']);
|
|
conn.addEventListener('open', onOpen);
|
|
conn.addEventListener('message', onMessage);
|
|
}
|
|
|
|
function onOpen(e)
|
|
{
|
|
conn.send(passEl.value + ";4675;" + Math.floor(new Date().getTime()/1000.0));
|
|
reqBoats();
|
|
reqClients();
|
|
}
|
|
|
|
function onMessage(e)
|
|
{
|
|
console.log("recive: ", e.data);
|
|
let msg = e.data.split(':')
|
|
let data = msg[0];
|
|
msg.splice(0, 1);
|
|
msg = msg.join(':');
|
|
switch (data)
|
|
{
|
|
case 'boats':
|
|
addBoats(msg);
|
|
passEl.parentElement.style.display = 'none';
|
|
break;
|
|
case 'clients':
|
|
addClients(msg);
|
|
break;
|
|
default:
|
|
console.warn('onMessage(): invlid data type (' + data + ')');
|
|
break;
|
|
}
|
|
}
|
|
|
|
function reqBoats()
|
|
{
|
|
conn.send(passEl.value + ";boats");
|
|
}
|
|
|
|
function reqClients()
|
|
{
|
|
conn.send(passEl.value + ";clients");
|
|
}
|
|
|
|
function addBoats(boats)
|
|
{
|
|
boatjesEl.innerHTML = "";
|
|
boats = boats.split(':');
|
|
for (let boat in boats)
|
|
{
|
|
if (boats[boat] != "")
|
|
{
|
|
addBoat(boats[boat]);
|
|
}
|
|
}
|
|
}
|
|
|
|
function addBoat(boat)
|
|
{
|
|
boat = boat.split(';')
|
|
if (boat.length == 3)
|
|
{
|
|
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
|
|
{
|
|
console.warn("addBoat(): incorect number of args (" + boat.length.toString() + "; " + boat.toString() + ")");
|
|
}
|
|
}
|
|
|
|
function addClients(clients)
|
|
{
|
|
clientsEl.innerHTML = "";
|
|
clients = clients.split(':');
|
|
for (let client in clients)
|
|
{
|
|
if (clients[client] != "")
|
|
{
|
|
addClient(clients[client]);
|
|
}
|
|
}
|
|
}
|
|
|
|
function addClient(client)
|
|
{
|
|
client = client.split(';')
|
|
if (client.length == 3)
|
|
{
|
|
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("addClient(): incorect number of args (" + client.length.toString() + "; " + client.toString() + ")");
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |