|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<title>esp-iot</title>
|
|
|
|
|
<!-- PWA support -->
|
|
|
|
|
<link rel="manifest" href="/manifest.json"/>
|
|
|
|
|
<meta name="theme-color" content="#2F3BA2"/>
|
|
|
|
|
<meta name="description" content="short your url"/>
|
|
|
|
|
<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0'/>
|
|
|
|
|
|
|
|
|
|
<link rel="stylesheet" type="text/css" href="/sym/dark.css"/>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
const wsurl = 'ws://10.8.0.2:8081'
|
|
|
|
|
const socket = new WebSocket(wsurl)
|
|
|
|
|
let devices = [];
|
|
|
|
|
function element(id){ return document.getElementById(id)}
|
|
|
|
|
|
|
|
|
|
socket.onopen = () => {
|
|
|
|
|
socket.send('new session')
|
|
|
|
|
}
|
|
|
|
|
socket.onerror = (error) => {
|
|
|
|
|
console.log(`WebSocket error: ${error}`)
|
|
|
|
|
}
|
|
|
|
|
socket.onclose = error => show_error('session timed out (refresh)')
|
|
|
|
|
socket.onmessage = (e) => {
|
|
|
|
|
console.log(e.data)
|
|
|
|
|
let msg = e.data.split(";", 3)
|
|
|
|
|
if (msg[0] === 'error') show_error(msg[1])
|
|
|
|
|
else if (msg[0] === 'device') {
|
|
|
|
|
if (!devices.includes(msg[1])){
|
|
|
|
|
devices.push(msg[1])
|
|
|
|
|
let new_device = element('template_led').innerHTML.replace(`{{id}}`, msg[1])
|
|
|
|
|
element('devices').innerHTML += element('template_led').innerHTML.replaceAll(`{{id}}`, msg[1])
|
|
|
|
|
}
|
|
|
|
|
if (msg[2] === 'online') element(msg[1]).style.backgroundColor = "#546E7A"
|
|
|
|
|
else if (msg[2] === 'offline') element(msg[1]).style.backgroundColor = "#BA3D3D"
|
|
|
|
|
else element(`${msg[1]}_title`).innerText = `${msg[1]} (currently ${msg[2]}):`
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
function show_error(msg) {
|
|
|
|
|
let error_style = element('error-box').style
|
|
|
|
|
element('error-message').innerText = msg
|
|
|
|
|
error_style.display = "block"
|
|
|
|
|
error_style.animation = "slide-from-left alternate 0.2s"
|
|
|
|
|
setTimeout(to => {error_style.animation = ""}, 200)
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div class="title">ESP-IoT</div>
|
|
|
|
|
<div id="devices" class="devices">
|
|
|
|
|
<template id="template_led">
|
|
|
|
|
<div id="{{id}}" class="device_box">
|
|
|
|
|
<div class="title2">{{id}}</div>
|
|
|
|
|
<button class="btn-green"
|
|
|
|
|
style="width: 10rem; position:relative; margin-top: 1rem; margin-left: calc(50% - 5rem);"
|
|
|
|
|
onclick="socket.send('device;{{id}};on')">
|
|
|
|
|
<div class="btn-text">on</div>
|
|
|
|
|
</button>
|
|
|
|
|
<button class="btn-red"
|
|
|
|
|
style="width: 10rem; position:relative; margin-top: 1rem; margin-left: calc(50% - 5rem);"
|
|
|
|
|
onclick="socket.send('device;{{id}};off')">
|
|
|
|
|
<div class="btn-text">off</div>
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="error-box" class="error">
|
|
|
|
|
<div onclick="this.parentNode.style.display = 'none'" style="position: absolute; top:5px; right: 5px;" class="sym_btn-invisible">
|
|
|
|
|
<img class="icon" src="sym/ic_close_white_24px.svg">
|
|
|
|
|
</div>
|
|
|
|
|
<div id="error-message" class="btn-text">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
