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