derlole/gimmiCoffee
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wird scho

Browse Source
This commit is contained in:
derlole
2025-04-16 16:47:25 +00:00
parent 45dd394b60
commit 9aaf4960c6
4 changed files with 102 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
templates/index.html
View File

@@ -1,29 +1,84 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>ESP Kontrolle</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>gimmiCoffee</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
<h1>ESP Live-Daten</h1>
<div id="status">Warte auf Daten...</div>
<br>
<input id="befehl" type="text" placeholder="z.B. LED ON" />
<button onclick="senden()">Senden</button>
<header>
<div class="site-title">gimmiCoffee</div>
<div class="user-actions">
<span class="username">Max Mustermann</span>
<a href="/logout" class="logout">Logout</a>
</div>
</header>
<script src="https://cdn.socket.io/4.6.1/socket.io.min.js"></script>
<script>
const socket = io();
<main class="main-container">
socket.on("esp_update", (data) => {
document.getElementById("status").innerText =
`${data.topic}: ${data.payload}`;
});
<section class="left">
<div class="info">ESP-Conn Infos</div>
<div class="action-button"> MAKE ME A COFFEE...</div>
<div class="button-grid">
<div class="grid-button">
<div class="top-left-text">Maschiene</div>
<div class="center-number">AUS</div>
</div>
<div class="grid-button">
<div class="top-left-text">Maschiene</div>
<div class="center-number">Nicht Bereit</div>
</div>
<div class="grid-button">
<div class="top-left-text">irgendwas kommt hier nocht</div>
<div class="center-number">XXX</div>
</div>
<div class="grid-button">
<div class="top-left-text">Fehler</div>
<div class="center-number">Wasser leer?</div>
</div>
<div class="grid-button">
<div class="top-left-text">Wasser</div>
<div class="center-number">Aufgefüllt</div>
</div>
<div class="grid-button">
<div class="top-left-text">Bohnen</div>
<div class="center-number">Nachgefüllt</div>
</div>
</div>
</section>
function senden() {
const val = document.getElementById("befehl").value;
socket.emit("send_to_esp", val);
}
</script>
<section class="right stats-box">
<h2 class="stats-title">Statistiken</h2>
<div class="clickable">
<div class="top-left-text">Coffee made</div>
<div class="center-number">XXX</div>
</div>
<div class="clickable">
<div class="top-left-text">Bohnen Füllstand</div>
<div class="center-number">XX%</div>
</div>
<div class="clickable">
<div class="top-left-text">Wasser Füllstand</div>
<div class="center-number">XX%</div>
</div>
<div class="clickable">
<div class="top-left-text">Bohnen nachgefüllt</div>
<div class="center-number">XX</div>
</div>
<div class="clickable">
<div class="top-left-text">Wasser nachgefüllt</div>
<div class="center-number">XX</div>
</div>
</section>
</main>
</body>
</html>
<!--<script src="{{ url_for('static', filename='script.js') }}"></script>-->