server 3 holy shit
This commit is contained in:
derlole
@@ -18,3 +18,10 @@
|
|||||||
|
|
||||||
### von hier aus ist nun auch eine möglichkeit mit echtem SQL server sqlite oder mongoDB möglich, da dieser server sowohl selbst als sql server fungieren kann sqlite dateien sind hier sowieso kein problem und https:// verbindungen sind für echtes python auch kein problem mehr.
|
### von hier aus ist nun auch eine möglichkeit mit echtem SQL server sqlite oder mongoDB möglich, da dieser server sowohl selbst als sql server fungieren kann sqlite dateien sind hier sowieso kein problem und https:// verbindungen sind für echtes python auch kein problem mehr.
|
||||||
|
|
||||||
|
## Mögliche Daten zum Speichern und wiedergeben:
|
||||||
|
### welcher nutzer hat wann wasser nachgefüllt
|
||||||
|
### welcher nutzer hat wann Bohnen nachgefüllt
|
||||||
|
### welcher nutzer hat wann einen kaffee bestellt
|
||||||
|
### welcher nutzer hat wann die maschine eingeschlatet
|
||||||
|
###
|
||||||
|
|
||||||
|
|||||||
@@ -25,3 +25,6 @@ def fetch_command():
|
|||||||
pending_command = None
|
pending_command = None
|
||||||
return jsonify({'befehl': cmd})
|
return jsonify({'befehl': cmd})
|
||||||
return jsonify({'befehl': None})
|
return jsonify({'befehl': None})
|
||||||
|
# @unsecure.route('/test')
|
||||||
|
# def test():
|
||||||
|
# return render_template('test.html')
|
||||||
|
|||||||
22
server.py
22
server.py
@@ -1,11 +1,33 @@
|
|||||||
|
|
||||||
from flask import Flask
|
from flask import Flask
|
||||||
|
from flask_socketio import SocketIO, emit
|
||||||
|
import threading
|
||||||
|
import time
|
||||||
from routes.unsecure_routes import unsecure
|
from routes.unsecure_routes import unsecure
|
||||||
|
|
||||||
app = Flask(__name__, static_url_path='/unsecure/static')
|
app = Flask(__name__, static_url_path='/unsecure/static')
|
||||||
|
# socketio = SocketIO(app, cors_allowed_origins="*")
|
||||||
|
|
||||||
|
# data = {
|
||||||
|
# "test": 1,
|
||||||
|
# "status": "online",
|
||||||
|
# "counter": 0
|
||||||
|
# }
|
||||||
|
|
||||||
|
# def monitor_changes():
|
||||||
|
# while True:
|
||||||
|
# time.sleep(5) # alle 5 Sekunden neue Daten senden
|
||||||
|
# data["test"] += 1
|
||||||
|
# data["counter"] += 5
|
||||||
|
# data["status"] = "busy" if data["counter"] % 2 == 0 else "idle"
|
||||||
|
|
||||||
|
# print("Neue Daten gesendet:", data)
|
||||||
|
# socketio.emit('update_data', data)
|
||||||
|
|
||||||
|
|
||||||
# Blueprint registrieren
|
# Blueprint registrieren
|
||||||
app.register_blueprint(unsecure)
|
app.register_blueprint(unsecure)
|
||||||
|
|
||||||
if __name__ == '__main__':
|
if __name__ == '__main__':
|
||||||
|
# threading.Thread(target=monitor_changes).start()
|
||||||
app.run(host='0.0.0.0', port=3060)
|
app.run(host='0.0.0.0', port=3060)
|
||||||
|
|||||||
215
static/style.css
215
static/style.css
@@ -1,12 +1,209 @@
|
|||||||
body {
|
* {
|
||||||
font-family: sans-serif;
|
box-sizing: border-box;
|
||||||
padding: 2rem;
|
margin: 0;
|
||||||
background-color: #f4f4f4;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
form {
|
body {
|
||||||
background: #fff;
|
font-family: Arial, sans-serif;
|
||||||
padding: 1rem;
|
background: #f7f7f7;
|
||||||
border-radius: 8px;
|
color: #333;
|
||||||
box-shadow: 0 0 10px rgba(0,0,0,0.1);
|
}
|
||||||
|
|
||||||
|
/* Header oben, volle Breite */
|
||||||
|
header {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
background: #444;
|
||||||
|
color: #fff;
|
||||||
|
padding: 15px 30px;
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-title {
|
||||||
|
font-size: 1.5em;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.site-title:hover {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #fff;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-actions {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logout {
|
||||||
|
background: #e74c3c;
|
||||||
|
color: white;
|
||||||
|
padding: 6px 12px;
|
||||||
|
border-radius: 6px;
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: bold;
|
||||||
|
transition: background 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logout:hover {
|
||||||
|
background: #c0392b;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-container {
|
||||||
|
display: flex;
|
||||||
|
margin: 30px;
|
||||||
|
gap: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left {
|
||||||
|
flex: 3;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 25px;
|
||||||
|
height: 86vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 20px;
|
||||||
|
height: 86vh;
|
||||||
|
overflow-y: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Infozeile größer */
|
||||||
|
.info {
|
||||||
|
background: #ddd;
|
||||||
|
height: 120px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 20px;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 1.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Großer Button */
|
||||||
|
.action-button {
|
||||||
|
background: #3498db;
|
||||||
|
color: white;
|
||||||
|
padding: 10px;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 30px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 0.3s;
|
||||||
|
height: 60px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-button:hover {
|
||||||
|
background: #2980b9;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Grid für 6 Buttons */
|
||||||
|
.button-grid {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 30px;
|
||||||
|
max-height: 62vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-button {
|
||||||
|
flex: 1 1 calc(50% - 15px);
|
||||||
|
background: #95a5a6;
|
||||||
|
color: white;
|
||||||
|
height: 23vh;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 0.3s;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-button:hover {
|
||||||
|
background: #7f8c8d;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
/* Rahmen + Titel für den rechten Block */
|
||||||
|
.stats-box {
|
||||||
|
border: 2px solid #000;
|
||||||
|
padding: 20px;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: #f0f0f0;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-title {
|
||||||
|
font-size: 1.3em;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #111;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Rechte Seite mit klickbaren Feldern */
|
||||||
|
|
||||||
|
.clickable {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: #2ecc71;
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: rgb(0, 0, 0);
|
||||||
|
flex: none;
|
||||||
|
height: 25vh;
|
||||||
|
transition: background 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.clickable:hover {
|
||||||
|
background: #27ae60;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.clickable .top-left-text {
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
left: 12px;
|
||||||
|
font-size: 20px;
|
||||||
|
color: #ff0000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clickable .center-number {
|
||||||
|
font-size: 48px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #222;
|
||||||
|
}
|
||||||
|
.grid-button .top-left-text {
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
left: 12px;
|
||||||
|
font-size: 20px;
|
||||||
|
color: #ff0000;
|
||||||
|
}
|
||||||
|
.grid-button .center-number {
|
||||||
|
margin-top: 40px;
|
||||||
|
width: 100%;
|
||||||
|
height: 80%;
|
||||||
|
font-size: 48px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #222;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
@@ -1,21 +1,84 @@
|
|||||||
|
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="de">
|
<html lang="de">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>ESP Steuerung</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') }}">
|
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1>ESP8266 Fernsteuerung</h1>
|
<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>
|
||||||
|
|
||||||
<form id="befehlForm">
|
<main class="main-container">
|
||||||
<label for="befehl">Befehl:</label>
|
|
||||||
<input type="text" id="befehl" name="befehl" required>
|
|
||||||
<button type="submit">Senden</button>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<p id="status"></p>
|
<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>
|
||||||
|
|
||||||
<script src="{{ url_for('static', filename='script.js') }}"></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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!--<script src="{{ url_for('static', filename='script.js') }}"></script>-->
|
||||||
|
|||||||
25
templates/test.html
Normal file
25
templates/test.html
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Live Update</title>
|
||||||
|
<script src="https://cdn.socket.io/4.6.1/socket.io.min.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h2>Daten vom Server</h2>
|
||||||
|
<p><strong>Test:</strong> <span id="test"></span></p>
|
||||||
|
<p><strong>Status:</strong> <span id="status"></span></p>
|
||||||
|
<p><strong>Counter:</strong> <span id="counter"></span></p>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const socket = io();
|
||||||
|
|
||||||
|
socket.on('update_data', (data) => {
|
||||||
|
document.getElementById('test').textContent = data.test;
|
||||||
|
document.getElementById('status').textContent = data.status;
|
||||||
|
document.getElementById('counter').textContent = data.counter;
|
||||||
|
console.log('Neue Daten:', data);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user