164 lines
5.6 KiB
HTML
164 lines
5.6 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Simple.css Test Page</title>
|
|
<link rel="stylesheet" href="simple.css">
|
|
</head>
|
|
|
|
<body id="top">
|
|
<header>
|
|
<h1>Gartenbewässerung</h1>
|
|
<p>%HOSTNAME% <mark style="border-color: var(--warn);" id="connectionTxt">Connecting...</mark></p>
|
|
</header>
|
|
<main>
|
|
<header>
|
|
<h1 style="margin-bottom: 1rem;">%NAME_VALVE1%</h1>
|
|
<mark id="state1" style="border-color: var(--fail);margin-left: 1.2rem;">Unbekannt</mark>
|
|
</header>
|
|
<p>
|
|
<table>
|
|
<tr>
|
|
<td>
|
|
<h3 id="hour1" style="margin-bottom: 0.1rem;">--</h3>Std.
|
|
</td>
|
|
<td>
|
|
<h3 id="min1" style="margin-bottom: 0.1rem;">--</h3>Min.
|
|
</td>
|
|
<td>
|
|
<h3 id="sec1" style="margin-bottom: 0.1rem;">--</h3>Sek.
|
|
</td>
|
|
</table>
|
|
<button onclick="document.getElementById('dialog-vorn').showModal()">Bewässern</button><button
|
|
onclick="fetch('/setValve?valve=6&set=close')">Stop</button>
|
|
</p>
|
|
<section id="valve2" style="display:none;">
|
|
<header>
|
|
<h1 style="margin-bottom: 1rem;">%NAME_VALVE2%</h1>
|
|
<mark id="state2" style="border-color: var(--fail);margin-left: 1.2rem;">Unbekannt</mark>
|
|
</header>
|
|
<p>
|
|
<table>
|
|
<tr>
|
|
<td>
|
|
<h3 id="hour2" style="margin-bottom: 0.1rem;">--</h3>Std.
|
|
</td>
|
|
<td>
|
|
<h3 id="min2" style="margin-bottom: 0.1rem;">--</h3>Min.
|
|
</td>
|
|
<td>
|
|
<h3 id="sec2" style="margin-bottom: 0.1rem;">--</h3>Sek.
|
|
</td>
|
|
</table>
|
|
<button onclick="document.getElementById('dialog-trog').showModal()">Bewässern</button><button
|
|
onclick="fetch('/setValve?valve=1&set=close')">Stop</button>
|
|
</p>
|
|
</section>
|
|
</main>
|
|
<footer>WEG Wagner 2025
|
|
</footer>
|
|
|
|
<dialog id="dialog-vorn">
|
|
<h2>Timer</h2>
|
|
<form>
|
|
<p><strong>Garten vorn:</strong></p>
|
|
<p><input type="number" id="time1" name="time" min="10" max="120" value="60" /> Minuten</p>
|
|
<button onclick="sendValve1On()">Start</button>
|
|
<button>Abbrechen</button>
|
|
</form>
|
|
</dialog>
|
|
<dialog id="dialog-trog">
|
|
<h2>Timer</h2>
|
|
<form>
|
|
<p><strong>Tröge:</strong></p>
|
|
<p><input type="number" id="time2" name="time" min="10" max="120" value="60" /> Minuten</p>
|
|
<button onclick="sendValve2On()">Start</button>
|
|
<button>Abbrechen</button>
|
|
</form>
|
|
</dialog>
|
|
</body>
|
|
|
|
</html>
|
|
|
|
<script>
|
|
function sendValve1On() {
|
|
fetch('/setValve?valve=6&set=open&timer=' + document.getElementById("time1").value);
|
|
}
|
|
function sendValve2On() {
|
|
fetch('/setValve?valve=1&set=open&timer=' + document.getElementById("time2").value);
|
|
}
|
|
|
|
var gateway = `ws://${window.location.hostname}/ws`;
|
|
var websocket;
|
|
function initWebSocket() {
|
|
console.log('Trying to open a WebSocket connection...');
|
|
websocket = new WebSocket(gateway);
|
|
websocket.onopen = onOpen;
|
|
websocket.onclose = onClose;
|
|
websocket.onmessage = onMessage; // <-- add this line
|
|
}
|
|
function onOpen(event) {
|
|
console.log('Connection opened');
|
|
document.getElementById("connectionTxt").innerHTML = "Connected";
|
|
document.getElementById("connectionTxt").style = "border-color: var(--ok);";
|
|
}
|
|
|
|
function onClose(event) {
|
|
console.log('Connection closed');
|
|
document.getElementById("connectionTxt").innerHTML = "Not Connected";
|
|
document.getElementById("connectionTxt").style = "border-color: var(--fail);";
|
|
setTimeout(initWebSocket, 2000);
|
|
}
|
|
function onMessage(event) {
|
|
var state;
|
|
let data = JSON.parse(event.data);
|
|
if(data.hasOwnProperty("numValves")){
|
|
if(data.numValves == 2){
|
|
document.getElementById("valve2").style = "";
|
|
}
|
|
}
|
|
if(data.timers[6] > 0){
|
|
hours = Math.floor(data.timers[6]/3600);
|
|
data.timers[6] = data.timers[6] - hours*3600;
|
|
mins = Math.floor(data.timers[6]/60);
|
|
data.timers[6] = data.timers[6] - mins*60;
|
|
secs = data.timers[6];
|
|
document.getElementById("hour1").innerHTML = (hours < 10) ?"0"+String(hours):String(hours);
|
|
document.getElementById("min1").innerHTML = (mins < 10) ?"0"+String(mins):String(mins);
|
|
document.getElementById("sec1").innerHTML = (secs < 10) ?"0"+String(secs):String(secs);
|
|
document.getElementById("state1").style = "border-color: var(--warn);margin-left: 1.2rem;";
|
|
document.getElementById("state1").innerHTML = "Wasser AN";
|
|
}else{
|
|
document.getElementById("state1").style = "border-color: var(--ok);margin-left: 1.2rem;";
|
|
document.getElementById("state1").innerHTML = "Wasser AUS";
|
|
document.getElementById("hour1").innerHTML = "--";
|
|
document.getElementById("min1").innerHTML = "--";
|
|
document.getElementById("sec1").innerHTML = "--";
|
|
}
|
|
|
|
if(data.timers[1] > 0){
|
|
hours = Math.floor(data.timers[1]/3600);
|
|
data.timers[1] = data.timers[1] - hours*3600;
|
|
mins = Math.floor(data.timers[1]/60);
|
|
data.timers[1] = data.timers[1] - mins*60;
|
|
secs = data.timers[1];
|
|
document.getElementById("hour2").innerHTML = (hours < 10) ?"0"+String(hours):String(hours);
|
|
document.getElementById("min2").innerHTML = (mins < 10) ?"0"+String(mins):String(mins);
|
|
document.getElementById("sec2").innerHTML = (secs < 10) ?"0"+String(secs):String(secs);
|
|
document.getElementById("state2").style = "border-color: var(--warn);margin-left: 1.2rem;";
|
|
document.getElementById("state2").innerHTML = "Wasser AN";
|
|
}else{
|
|
document.getElementById("state2").style = "border-color: var(--ok);margin-left: 1.2rem;";
|
|
document.getElementById("state2").innerHTML = "Wasser AUS";
|
|
document.getElementById("hour2").innerHTML = "--";
|
|
document.getElementById("min2").innerHTML = "--";
|
|
document.getElementById("sec2").innerHTML = "--";
|
|
}
|
|
}
|
|
window.addEventListener('load', onLoad);
|
|
function onLoad(event) {
|
|
initWebSocket();
|
|
}
|
|
</script> |