style: 2 spaces ident for html files
This commit is contained in:
Laureηt
parent
4da711e71b
commit
46ba71a1d6
|
|
@ -8,5 +8,5 @@ charset = utf-8
|
||||||
trim_trailing_whitespace = true
|
trim_trailing_whitespace = true
|
||||||
insert_final_newline = true
|
insert_final_newline = true
|
||||||
|
|
||||||
[*.{yaml,yml,toml}]
|
[*.{yaml,yml,toml,html,svelte}]
|
||||||
indent_size = 2
|
indent_size = 2
|
||||||
|
|
|
||||||
114
src/admin.html
114
src/admin.html
|
|
@ -2,78 +2,78 @@
|
||||||
<html>
|
<html>
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<title>Admin</title>
|
<title>Admin</title>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
* {
|
* {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#dashboard {
|
#dashboard {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div id="login">
|
<div id="login">
|
||||||
<input type="password" id="password-text">
|
<input type="password" id="password-text">
|
||||||
<input type="button" id="password-button" value="Login" onclick="sendCreds();">
|
<input type="button" id="password-button" value="Login" onclick="sendCreds();">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="dashboard">
|
<div id="dashboard">
|
||||||
<ul id="stateList"></ul>
|
<ul id="stateList"></ul>
|
||||||
<button id="save">save</button>
|
<button id="save">save</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
var websocket = new WebSocket("ws://127.0.0.1:6789/");
|
var websocket = new WebSocket("ws://127.0.0.1:6789/");
|
||||||
var passwordInput = document.querySelector('#password-text');
|
var passwordInput = document.querySelector('#password-text');
|
||||||
|
|
||||||
var divLogin = document.querySelector("#login");
|
var divLogin = document.querySelector("#login");
|
||||||
var divDashboard = document.querySelector("#dashboard");
|
var divDashboard = document.querySelector("#dashboard");
|
||||||
var stateList = document.querySelector("#stateList");
|
var stateList = document.querySelector("#stateList");
|
||||||
var saveButton = document.getElementById('save');
|
var saveButton = document.getElementById('save');
|
||||||
|
|
||||||
saveButton.onclick = function (event) {
|
saveButton.onclick = function (event) {
|
||||||
websocket.send(JSON.stringify({ 'admin': 'save' }));
|
websocket.send(JSON.stringify({ 'admin': 'save' }));
|
||||||
}
|
}
|
||||||
|
|
||||||
function receiveStates(ev) {
|
function receiveStates(ev) {
|
||||||
let msg = JSON.parse(ev.data);
|
let msg = JSON.parse(ev.data);
|
||||||
let states = msg.state
|
let states = msg.state
|
||||||
for (var i = 0; i < states.length; i++) {
|
for (var i = 0; i < states.length; i++) {
|
||||||
var state = states[i];
|
var state = states[i];
|
||||||
var li = document.createElement('li');
|
var li = document.createElement('li');
|
||||||
li.appendChild(document.createTextNode(state));
|
li.appendChild(document.createTextNode(state));
|
||||||
stateList.appendChild(li);
|
stateList.appendChild(li);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function authSuccess(ev) {
|
function authSuccess(ev) {
|
||||||
let msg = JSON.parse(ev.data);
|
let msg = JSON.parse(ev.data);
|
||||||
if (msg.auth === "success") {
|
if (msg.auth === "success") {
|
||||||
divLogin.style.display = "none";
|
divLogin.style.display = "none";
|
||||||
divDashboard.style.display = "unset";
|
divDashboard.style.display = "unset";
|
||||||
websocket.removeEventListener('message', authSuccess);
|
websocket.removeEventListener('message', authSuccess);
|
||||||
websocket.send(JSON.stringify({ "state": "get" }));
|
websocket.send(JSON.stringify({ "state": "get" }));
|
||||||
websocket.addEventListener('message', receiveStates);
|
websocket.addEventListener('message', receiveStates);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
function sendCreds() {
|
function sendCreds() {
|
||||||
var message = JSON.stringify({ "auth": passwordInput.value });
|
var message = JSON.stringify({ "auth": passwordInput.value });
|
||||||
websocket.send(message)
|
websocket.send(message)
|
||||||
websocket.addEventListener('message', authSuccess);
|
websocket.addEventListener('message', authSuccess);
|
||||||
};
|
};
|
||||||
|
|
||||||
passwordInput.addEventListener("keydown", function (e) {
|
passwordInput.addEventListener("keydown", function (e) {
|
||||||
if (e.key === "Enter") { sendCreds(); }
|
if (e.key === "Enter") { sendCreds(); }
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
216
src/client.html
216
src/client.html
|
|
@ -2,127 +2,127 @@
|
||||||
<html>
|
<html>
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<title>Telecommande</title>
|
<title>Telecommande</title>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
* {
|
* {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
table {
|
table {
|
||||||
margin: auto;
|
margin: auto;
|
||||||
margin-top: 30vh;
|
margin-top: 30vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
td {
|
td {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
#a,
|
#a,
|
||||||
#b {
|
#b {
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
width: 2rem;
|
width: 2rem;
|
||||||
height: 2rem;
|
height: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
#left,
|
#left,
|
||||||
#right,
|
#right,
|
||||||
#up,
|
#up,
|
||||||
#down {
|
#down {
|
||||||
border-radius: 10%;
|
border-radius: 10%;
|
||||||
width: 2rem;
|
width: 2rem;
|
||||||
height: 2rem;
|
height: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
#start,
|
#start,
|
||||||
#select,
|
#select,
|
||||||
#l,
|
#l,
|
||||||
#r {
|
#r {
|
||||||
border-radius: 25%;
|
border-radius: 25%;
|
||||||
width: 3.5rem;
|
width: 3.5rem;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<table class="buttons">
|
<table class="buttons">
|
||||||
<tr>
|
<tr>
|
||||||
<td colspan="2" style="padding-bottom: 1rem;"><button id="l">L</button></td>
|
<td colspan="2" style="padding-bottom: 1rem;"><button id="l">L</button></td>
|
||||||
<td></td>
|
<td></td>
|
||||||
<td colspan="2" style="padding-bottom: 1rem; text-align: right;"><button id="r">R</button></td>
|
<td colspan="2" style="padding-bottom: 1rem; text-align: right;"><button id="r">R</button></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td></td>
|
<td></td>
|
||||||
<td><button id="up"> ∧ </button></td>
|
<td><button id="up"> ∧ </button></td>
|
||||||
<td></td>
|
<td></td>
|
||||||
<td><button id="select">select</button></td>
|
<td><button id="select">select</button></td>
|
||||||
<td><button id="start">start</button></td>
|
<td><button id="start">start</button></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><button id="left">
|
<td><button id="left">
|
||||||
< </button>
|
< </button>
|
||||||
</td>
|
</td>
|
||||||
<td></td>
|
<td></td>
|
||||||
<td style="padding-right: 3rem;"><button id="right"> > </button></td>
|
<td style="padding-right: 3rem;"><button id="right"> > </button></td>
|
||||||
<td></td>
|
<td></td>
|
||||||
<td></td>
|
<td></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td></td>
|
<td></td>
|
||||||
<td><button id="down"> ∨ </button></td>
|
<td><button id="down"> ∨ </button></td>
|
||||||
<td></td>
|
<td></td>
|
||||||
<td><button id="a">A</button></td>
|
<td><button id="a">A</button></td>
|
||||||
<td><button id="b">B</button></td>
|
<td><button id="b">B</button></td>
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
var websocket = new WebSocket("ws://147.127.160.190:6789/");
|
var websocket = new WebSocket("ws://147.127.160.190:6789/");
|
||||||
|
|
||||||
var a = document.getElementById('a'),
|
var a = document.getElementById('a'),
|
||||||
b = document.getElementById('b'),
|
b = document.getElementById('b'),
|
||||||
select = document.getElementById('select'),
|
select = document.getElementById('select'),
|
||||||
start = document.getElementById('start'),
|
start = document.getElementById('start'),
|
||||||
right = document.getElementById('right'),
|
right = document.getElementById('right'),
|
||||||
left = document.getElementById('left'),
|
left = document.getElementById('left'),
|
||||||
up = document.getElementById('up'),
|
up = document.getElementById('up'),
|
||||||
down = document.getElementById('down'),
|
down = document.getElementById('down'),
|
||||||
r = document.getElementById('r'),
|
r = document.getElementById('r'),
|
||||||
l = document.getElementById('l');
|
l = document.getElementById('l');
|
||||||
|
|
||||||
a.onclick = function (event) {
|
a.onclick = function (event) {
|
||||||
websocket.send(JSON.stringify({ action: 'a' }));
|
websocket.send(JSON.stringify({ action: 'a' }));
|
||||||
}
|
}
|
||||||
b.onclick = function (event) {
|
b.onclick = function (event) {
|
||||||
websocket.send(JSON.stringify({ action: 'b' }));
|
websocket.send(JSON.stringify({ action: 'b' }));
|
||||||
}
|
}
|
||||||
select.onclick = function (event) {
|
select.onclick = function (event) {
|
||||||
websocket.send(JSON.stringify({ action: 'select' }));
|
websocket.send(JSON.stringify({ action: 'select' }));
|
||||||
}
|
}
|
||||||
start.onclick = function (event) {
|
start.onclick = function (event) {
|
||||||
websocket.send(JSON.stringify({ action: 'start' }));
|
websocket.send(JSON.stringify({ action: 'start' }));
|
||||||
}
|
}
|
||||||
right.onclick = function (event) {
|
right.onclick = function (event) {
|
||||||
websocket.send(JSON.stringify({ action: 'right' }));
|
websocket.send(JSON.stringify({ action: 'right' }));
|
||||||
}
|
}
|
||||||
left.onclick = function (event) {
|
left.onclick = function (event) {
|
||||||
websocket.send(JSON.stringify({ action: 'left' }));
|
websocket.send(JSON.stringify({ action: 'left' }));
|
||||||
}
|
}
|
||||||
up.onclick = function (event) {
|
up.onclick = function (event) {
|
||||||
websocket.send(JSON.stringify({ action: 'up' }));
|
websocket.send(JSON.stringify({ action: 'up' }));
|
||||||
}
|
}
|
||||||
down.onclick = function (event) {
|
down.onclick = function (event) {
|
||||||
websocket.send(JSON.stringify({ action: 'down' }));
|
websocket.send(JSON.stringify({ action: 'down' }));
|
||||||
}
|
}
|
||||||
r.onclick = function (event) {
|
r.onclick = function (event) {
|
||||||
websocket.send(JSON.stringify({ action: 'r' }));
|
websocket.send(JSON.stringify({ action: 'r' }));
|
||||||
}
|
}
|
||||||
l.onclick = function (event) {
|
l.onclick = function (event) {
|
||||||
websocket.send(JSON.stringify({ action: 'l' }));
|
websocket.send(JSON.stringify({ action: 'l' }));
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue