final
This commit is contained in:
248
ESP_api/ESP_api.ino
Normal file
248
ESP_api/ESP_api.ino
Normal file
@@ -0,0 +1,248 @@
|
|||||||
|
#include <WiFi.h>
|
||||||
|
#include <EEPROM.h>
|
||||||
|
#include <HTTPClient.h>
|
||||||
|
#include <WebServer.h>
|
||||||
|
#include "esp_mac.h"
|
||||||
|
//ver 1.03
|
||||||
|
// Constants for Access Point mode
|
||||||
|
const char* ap_ssid = "ESP32-AP";
|
||||||
|
const char* ap_password = "12345678";
|
||||||
|
|
||||||
|
// Pin definitions
|
||||||
|
const int userLedPin = 8;
|
||||||
|
const int buttonPin = 0;
|
||||||
|
const int relayPins[4] = {10, 11, 22, 23};
|
||||||
|
const int inputPins[4] = {1, 2, 3, 15};
|
||||||
|
|
||||||
|
// Create a WebServer on port 80
|
||||||
|
WebServer server(80);
|
||||||
|
|
||||||
|
// Variables to store WiFi settings
|
||||||
|
String ssid, password, static_ip, netmask, gateway, dns, hostname;
|
||||||
|
String logServerIP, logServerPort;
|
||||||
|
bool isAPMode = false;
|
||||||
|
|
||||||
|
// Variable to keep track of the last log time
|
||||||
|
unsigned long lastLogTime = 0;
|
||||||
|
|
||||||
|
// Function to send logs to the log server
|
||||||
|
void sendLog(String message) {
|
||||||
|
if (WiFi.status() == WL_CONNECTED && logServerIP.length() > 0 && logServerPort.length() > 0) {
|
||||||
|
HTTPClient http;
|
||||||
|
String url = "http://" + logServerIP + ":" + logServerPort + "/log";
|
||||||
|
http.begin(url);
|
||||||
|
http.addHeader("Content-Type", "application/json");
|
||||||
|
String payload = "{\"hostname\": \"" + hostname + "\", \"ip_address\": \"" + WiFi.localIP().toString() + "\", \"message\": \"" + message + "\"}";
|
||||||
|
int httpResponseCode = http.POST(payload);
|
||||||
|
http.end();
|
||||||
|
if (httpResponseCode > 0) {
|
||||||
|
Serial.println("Log sent successfully: " + message);
|
||||||
|
} else {
|
||||||
|
Serial.println("Error sending log: " + message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle the root URL ("/") and serve the configuration page
|
||||||
|
void handleRoot() {
|
||||||
|
String macAddress = getDefaultMacAddress();
|
||||||
|
String html = "<!DOCTYPE html><html><head><title>Configuration</title>";
|
||||||
|
html += "<style>body { font-family: Arial, sans-serif; background-color: #f4f4f9; margin: 0; padding: 0; }";
|
||||||
|
html += ".container { max-width: 600px; margin: 50px auto; padding: 20px; background-color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); }";
|
||||||
|
html += "h2 { text-align: center; color: #333; } form { display: flex; flex-direction: column; }";
|
||||||
|
html += "label { margin-bottom: 10px; color: #555; } input[type='text'], input[type='password'] { padding: 10px; margin-bottom: 20px; border: 1px solid #ccc; border-radius: 4px; }";
|
||||||
|
html += "input[type='submit'] { padding: 10px; background-color: #28a745; color: #fff; border: none; border-radius: 4px; cursor: pointer; }";
|
||||||
|
html += "input[type='submit']:hover { background-color: #218838; } button { padding: 10px; background-color: #007bff; color: #fff; border: none; border-radius: 4px; cursor: pointer; margin: 5px; }";
|
||||||
|
html += "button:hover { background-color: #0056b3; }</style></head><body>";
|
||||||
|
|
||||||
|
if (isAPMode) {
|
||||||
|
html += "<div class='container'><h2>Board Configuration</h2>";
|
||||||
|
html += "<form action='/save' method='POST'>";
|
||||||
|
html += "<label for='ssid'>SSID:</label><input type='text' id='ssid' name='ssid' value='" + ssid + "'><br>";
|
||||||
|
html += "<label for='password'>Password:</label><input type='password' id='password' name='password' value='" + password + "'><br>";
|
||||||
|
html += "<label for='static_ip'>Static IP:</label><input type='text' id='static_ip' name='static_ip' value='" + static_ip + "'><br>";
|
||||||
|
html += "<label for='netmask'>Netmask:</label><input type='text' id='netmask' name='netmask' value='" + netmask + "'><br>";
|
||||||
|
html += "<label for='gateway'>Gateway:</label><input type='text' id='gateway' name='gateway' value='" + gateway + "'><br>";
|
||||||
|
html += "<label for='dns'>DNS:</label><input type='text' id='dns' name='dns' value='" + dns + "'><br>";
|
||||||
|
html += "<label for='hostname'>Hostname:</label><input type='text' id='hostname' name='hostname' value='" + hostname + "'><br>";
|
||||||
|
html += "<label for='log_server_ip'>Log Server IP:</label><input type='text' id='log_server_ip' name='log_server_ip' value='" + logServerIP + "'><br>";
|
||||||
|
html += "<label for='log_server_port'>Log Server Port:</label><input type='text' id='log_server_port' name='log_server_port' value='" + logServerPort + "'><br>";
|
||||||
|
html += "<label for='mac_address'>MAC Address:</label><input type='text' id='mac_address' name='mac_address' value='" + macAddress + "' readonly><br>";
|
||||||
|
html += "<input type='submit' value='Save'></form></div>";
|
||||||
|
}
|
||||||
|
|
||||||
|
html += "</body></html>";
|
||||||
|
server.send(200, "text/html", html);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle the save URL ("/save") and save the WiFi settings
|
||||||
|
void handleSave() {
|
||||||
|
ssid = server.arg("ssid");
|
||||||
|
password = server.arg("password");
|
||||||
|
static_ip = server.arg("static_ip");
|
||||||
|
netmask = server.arg("netmask");
|
||||||
|
gateway = server.arg("gateway");
|
||||||
|
dns = server.arg("dns");
|
||||||
|
hostname = server.arg("hostname");
|
||||||
|
logServerIP = server.arg("log_server_ip");
|
||||||
|
logServerPort = server.arg("log_server_port");
|
||||||
|
|
||||||
|
saveSettings();
|
||||||
|
server.send(200, "text/html", "Settings saved. Device will restart in client mode.");
|
||||||
|
delay(2000);
|
||||||
|
ESP.restart();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle the relay control URL ("/relay") and control the relays
|
||||||
|
void handleRelay() {
|
||||||
|
int relay = server.arg("relay").toInt() - 1; // Adjust for zero-based index
|
||||||
|
String action = server.arg("action");
|
||||||
|
|
||||||
|
if (relay >= 0 && relay < 4) {
|
||||||
|
if (action == "on") {
|
||||||
|
digitalWrite(relayPins[relay], HIGH);
|
||||||
|
sendLog("Relay " + String(relay + 1) + " turned ON");
|
||||||
|
} else if (action == "off") {
|
||||||
|
digitalWrite(relayPins[relay], LOW);
|
||||||
|
sendLog("Relay " + String(relay + 1) + " turned OFF");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
server.sendHeader("Location", "/");
|
||||||
|
server.send(303);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Save the WiFi settings to EEPROM
|
||||||
|
void saveSettings() {
|
||||||
|
EEPROM.writeString(0, ssid);
|
||||||
|
EEPROM.writeString(32, password);
|
||||||
|
EEPROM.writeString(64, static_ip);
|
||||||
|
EEPROM.writeString(96, netmask);
|
||||||
|
EEPROM.writeString(128, gateway);
|
||||||
|
EEPROM.writeString(160, dns);
|
||||||
|
EEPROM.writeString(192, hostname);
|
||||||
|
EEPROM.writeString(224, logServerIP);
|
||||||
|
EEPROM.writeString(256, logServerPort);
|
||||||
|
EEPROM.commit();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Load the WiFi settings from EEPROM
|
||||||
|
void loadSettings() {
|
||||||
|
ssid = EEPROM.readString(0);
|
||||||
|
password = EEPROM.readString(32);
|
||||||
|
static_ip = EEPROM.readString(64);
|
||||||
|
netmask = EEPROM.readString(96);
|
||||||
|
gateway = EEPROM.readString(128);
|
||||||
|
dns = EEPROM.readString(160);
|
||||||
|
hostname = EEPROM.readString(192);
|
||||||
|
logServerIP = EEPROM.readString(224);
|
||||||
|
logServerPort = EEPROM.readString(256);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Get the default MAC address of the ESP32
|
||||||
|
String getDefaultMacAddress() {
|
||||||
|
String mac = "";
|
||||||
|
unsigned char mac_base[6] = {0};
|
||||||
|
|
||||||
|
if (esp_efuse_mac_get_default(mac_base) == ESP_OK) {
|
||||||
|
char buffer[18];
|
||||||
|
sprintf(buffer, "%02X:%02X:%02X:%02X:%02X:%02X", mac_base[0], mac_base[1], mac_base[2], mac_base[3], mac_base[4], mac_base[5]);
|
||||||
|
mac = buffer;
|
||||||
|
}
|
||||||
|
|
||||||
|
return mac;
|
||||||
|
}
|
||||||
|
|
||||||
|
void setup() {
|
||||||
|
Serial.begin(115200);
|
||||||
|
EEPROM.begin(512);
|
||||||
|
|
||||||
|
pinMode(userLedPin, OUTPUT);
|
||||||
|
digitalWrite(userLedPin, LOW);
|
||||||
|
|
||||||
|
pinMode(buttonPin, INPUT_PULLUP);
|
||||||
|
|
||||||
|
for (int i = 0; i < 4; i++) {
|
||||||
|
pinMode(relayPins[i], OUTPUT);
|
||||||
|
digitalWrite(relayPins[i], LOW);
|
||||||
|
pinMode(inputPins[i], INPUT_PULLUP);
|
||||||
|
}
|
||||||
|
|
||||||
|
loadSettings();
|
||||||
|
WiFi.softAPdisconnect(true);
|
||||||
|
|
||||||
|
if (digitalRead(buttonPin) == LOW || ssid.length() == 0) {
|
||||||
|
startAPMode();
|
||||||
|
} else {
|
||||||
|
connectToWiFi();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
void loop() {
|
||||||
|
server.handleClient();
|
||||||
|
if (millis() - lastLogTime >= 30000) {
|
||||||
|
sendLog("Board is functioning");
|
||||||
|
lastLogTime = millis();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
void startAPMode() {
|
||||||
|
WiFi.softAP(ap_ssid, ap_password);
|
||||||
|
Serial.println("Access Point Started");
|
||||||
|
Serial.print("IP Address: ");
|
||||||
|
Serial.println(WiFi.softAPIP());
|
||||||
|
server.on("/", handleRoot);
|
||||||
|
server.on("/save", handleSave);
|
||||||
|
server.on("/relay", handleRelay);
|
||||||
|
server.begin();
|
||||||
|
isAPMode = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
void connectToWiFi() {
|
||||||
|
IPAddress ip, gw, nm, dnsServer;
|
||||||
|
if (!ip.fromString(static_ip) || !gw.fromString(gateway) || !nm.fromString(netmask) || !dnsServer.fromString(dns)) {
|
||||||
|
startAPMode();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
WiFi.config(ip, gw, nm, dnsServer);
|
||||||
|
WiFi.setHostname(hostname.c_str());
|
||||||
|
WiFi.begin(ssid.c_str(), password.c_str());
|
||||||
|
|
||||||
|
unsigned long startTime = millis();
|
||||||
|
while (WiFi.status() != WL_CONNECTED) {
|
||||||
|
if (millis() - startTime >= 10000) {
|
||||||
|
startAPMode();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
delay(500);
|
||||||
|
}
|
||||||
|
|
||||||
|
Serial.println("Connected to WiFi.");
|
||||||
|
Serial.print("IP Address: ");
|
||||||
|
Serial.println(WiFi.localIP());
|
||||||
|
Serial.print("Hostname: ");
|
||||||
|
Serial.println(WiFi.getHostname());
|
||||||
|
digitalWrite(userLedPin, HIGH);
|
||||||
|
isAPMode = false;
|
||||||
|
startWebServer();
|
||||||
|
}
|
||||||
|
|
||||||
|
void startWebServer() {
|
||||||
|
server.on("/", handleRoot);
|
||||||
|
server.on("/save", handleSave);
|
||||||
|
server.on("/relay", handleRelay);
|
||||||
|
server.begin();
|
||||||
|
}
|
||||||
|
|
||||||
|
void blinkLed() {
|
||||||
|
static unsigned long lastBlinkTime = 0;
|
||||||
|
static bool ledState = LOW;
|
||||||
|
unsigned long interval = isAPMode ? 1000 : 3000;
|
||||||
|
|
||||||
|
if (millis() - lastBlinkTime >= interval) {
|
||||||
|
ledState = !ledState;
|
||||||
|
digitalWrite(userLedPin, ledState);
|
||||||
|
lastBlinkTime = millis();
|
||||||
|
}
|
||||||
|
}
|
||||||
164
server_api/app.py
Normal file
164
server_api/app.py
Normal file
@@ -0,0 +1,164 @@
|
|||||||
|
from flask import Flask, request, jsonify, render_template, redirect, url_for
|
||||||
|
from flask_sqlalchemy import SQLAlchemy
|
||||||
|
from datetime import datetime, timedelta
|
||||||
|
import os
|
||||||
|
import threading
|
||||||
|
import requests
|
||||||
|
|
||||||
|
app = Flask(__name__)
|
||||||
|
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///logs.db'
|
||||||
|
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
|
||||||
|
db = SQLAlchemy(app)
|
||||||
|
|
||||||
|
class Log(db.Model):
|
||||||
|
id = db.Column(db.Integer, primary_key=True)
|
||||||
|
hostname = db.Column(db.String(100), nullable=False)
|
||||||
|
ip_address = db.Column(db.String(100), nullable=False)
|
||||||
|
message = db.Column(db.String(500), nullable=False)
|
||||||
|
timestamp = db.Column(db.DateTime, default=datetime.utcnow)
|
||||||
|
|
||||||
|
# Create the database if it does not exist
|
||||||
|
if not os.path.exists('instance/logs.db'):
|
||||||
|
with app.app_context():
|
||||||
|
db.create_all()
|
||||||
|
|
||||||
|
# Flag to check if tables are created
|
||||||
|
tables_created = False
|
||||||
|
|
||||||
|
@app.before_request
|
||||||
|
def create_tables():
|
||||||
|
global tables_created
|
||||||
|
if not tables_created:
|
||||||
|
db.create_all()
|
||||||
|
tables_created = True
|
||||||
|
|
||||||
|
@app.route('/log', methods=['POST'])
|
||||||
|
def log_message():
|
||||||
|
data = request.get_json()
|
||||||
|
hostname = data.get('hostname')
|
||||||
|
ip_address = data.get('ip_address')
|
||||||
|
message = data.get('message')
|
||||||
|
if hostname and ip_address and message:
|
||||||
|
new_log = Log(hostname=hostname, ip_address=ip_address, message=message)
|
||||||
|
db.session.add(new_log)
|
||||||
|
db.session.commit()
|
||||||
|
return jsonify({'status': 'success', 'message': 'Log saved'}), 201
|
||||||
|
return jsonify({'status': 'error', 'message': 'Invalid data'}), 400
|
||||||
|
|
||||||
|
@app.route('/logs', methods=['GET'])
|
||||||
|
def get_logs():
|
||||||
|
logs = Log.query.all()
|
||||||
|
return jsonify([{'id': log.id, 'hostname': log.hostname, 'message': log.message, 'timestamp': log.timestamp} for log in logs])
|
||||||
|
|
||||||
|
@app.route('/cleanup', methods=['DELETE'])
|
||||||
|
def cleanup_logs():
|
||||||
|
cutoff_date = datetime.utcnow() - timedelta(hours=24)
|
||||||
|
Log.query.filter(Log.timestamp < cutoff_date).delete()
|
||||||
|
db.session.commit()
|
||||||
|
return jsonify({'status': 'success', 'message': 'Old logs deleted'})
|
||||||
|
|
||||||
|
@app.route('/')
|
||||||
|
def index():
|
||||||
|
# Get the latest log entry for each board
|
||||||
|
latest_logs = db.session.query(Log).order_by(Log.timestamp.desc()).all()
|
||||||
|
boards = {}
|
||||||
|
for log in latest_logs:
|
||||||
|
if log.hostname not in boards:
|
||||||
|
boards[log.hostname] = log
|
||||||
|
|
||||||
|
# Determine the status of each board
|
||||||
|
board_status = []
|
||||||
|
for hostname, log in boards.items():
|
||||||
|
time_diff = datetime.utcnow() - log.timestamp
|
||||||
|
status = 'Online' if time_diff.total_seconds() <= 20 else 'Possible Offline'
|
||||||
|
board_status.append({'hostname': hostname, 'status': status, 'last_seen': log.timestamp})
|
||||||
|
|
||||||
|
return render_template('index.html', boards=board_status)
|
||||||
|
|
||||||
|
@app.route('/board/<hostname>')
|
||||||
|
def view_board(hostname):
|
||||||
|
logs = Log.query.filter_by(hostname=hostname).order_by(Log.timestamp.desc()).limit(50).all()
|
||||||
|
relay_status = ['off', 'off', 'off', 'off']
|
||||||
|
input_status = ['off', 'off', 'off', 'off']
|
||||||
|
relay_messages = ['', '', '', '']
|
||||||
|
input_messages = ['', '', '', '']
|
||||||
|
ip_address = logs[0].ip_address if logs else '' # Get the IP address from the logs
|
||||||
|
last_update = logs[0].timestamp if logs else None # Get the last update time
|
||||||
|
|
||||||
|
# Determine the status of each relay and input based on the latest log messages
|
||||||
|
for log in logs:
|
||||||
|
for i in range(4):
|
||||||
|
if f"Relay {i + 1} turned ON" in log.message:
|
||||||
|
relay_status[i] = 'on'
|
||||||
|
relay_messages[i] = log.message
|
||||||
|
elif f"Relay {i + 1} turned OFF" in log.message:
|
||||||
|
relay_status[i] = 'off'
|
||||||
|
relay_messages[i] = log.message
|
||||||
|
if f"Input {i + 1} pressed" in log.message:
|
||||||
|
input_status[i] = 'on'
|
||||||
|
input_messages[i] = log.message
|
||||||
|
post_action_to_server(hostname, f"Input {i + 1} pressed")
|
||||||
|
elif f"Input {i + 1} released" in log.message:
|
||||||
|
input_status[i] = 'off'
|
||||||
|
input_messages[i] = log.message
|
||||||
|
post_action_to_server(hostname, f"Input {i + 1} released")
|
||||||
|
|
||||||
|
return render_template('board.html', hostname=hostname, ip_address=ip_address, logs=logs, relay_status=relay_status, input_status=input_status, relay_messages=relay_messages, input_messages=input_messages, last_update=last_update)
|
||||||
|
|
||||||
|
@app.route('/delete_board/<hostname>', methods=['POST'])
|
||||||
|
def delete_board(hostname):
|
||||||
|
Log.query.filter_by(hostname=hostname).delete()
|
||||||
|
db.session.commit()
|
||||||
|
return redirect(url_for('index'))
|
||||||
|
|
||||||
|
@app.route('/board/<hostname>/logs', methods=['GET'])
|
||||||
|
def get_board_logs(hostname):
|
||||||
|
logs = Log.query.filter_by(hostname=hostname).order_by(Log.timestamp.desc()).all()
|
||||||
|
return jsonify({'logs': [{'timestamp': log.timestamp, 'message': log.message} for log in logs]})
|
||||||
|
|
||||||
|
@app.route('/board/<hostname>/relay/<int:relay>/<action>', methods=['POST'])
|
||||||
|
def control_relay(hostname, relay, action):
|
||||||
|
log = Log.query.filter_by(hostname=hostname).order_by(Log.timestamp.desc()).first()
|
||||||
|
if log:
|
||||||
|
ip_address = log.ip_address
|
||||||
|
url = f"http://{ip_address}/relay"
|
||||||
|
payload = {
|
||||||
|
"relay": relay,
|
||||||
|
"action": action
|
||||||
|
}
|
||||||
|
try:
|
||||||
|
response = requests.post(url, data=payload)
|
||||||
|
if response.status_code == 200:
|
||||||
|
return redirect(url_for('view_board', hostname=hostname))
|
||||||
|
else:
|
||||||
|
return f"Failed to control relay: {response.text}", 500
|
||||||
|
except Exception as e:
|
||||||
|
return f"Error controlling relay: {e}", 500
|
||||||
|
else:
|
||||||
|
return f"No logs found for hostname: {hostname}", 404
|
||||||
|
|
||||||
|
def post_action_to_server(hostname, action):
|
||||||
|
url = "http://your-server-url.com/action"
|
||||||
|
payload = {
|
||||||
|
"hostname": hostname,
|
||||||
|
"action": action
|
||||||
|
}
|
||||||
|
try:
|
||||||
|
response = requests.post(url, json=payload)
|
||||||
|
if response.status_code == 200:
|
||||||
|
print(f"Action posted successfully: {action}")
|
||||||
|
else:
|
||||||
|
print(f"Failed to post action: {action}")
|
||||||
|
except Exception as e:
|
||||||
|
print(f"Error posting action: {e}")
|
||||||
|
|
||||||
|
def schedule_cleanup():
|
||||||
|
with app.app_context():
|
||||||
|
cutoff_date = datetime.utcnow() - timedelta(hours=24)
|
||||||
|
Log.query.filter(Log.timestamp < cutoff_date).delete()
|
||||||
|
db.session.commit()
|
||||||
|
threading.Timer(3600, schedule_cleanup).start()
|
||||||
|
|
||||||
|
if __name__ == '__main__':
|
||||||
|
schedule_cleanup() # Start the cleanup scheduler
|
||||||
|
app.run(host='0.0.0.0', port=5000)
|
||||||
BIN
server_api/instance/logs.db
Normal file
BIN
server_api/instance/logs.db
Normal file
Binary file not shown.
145
server_api/templates/board.html
Normal file
145
server_api/templates/board.html
Normal file
@@ -0,0 +1,145 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>ESP Board Details</title>
|
||||||
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background-color: #343a40;
|
||||||
|
color: #050505;
|
||||||
|
}
|
||||||
|
.card {
|
||||||
|
background-color: #495057;
|
||||||
|
border: 1px solid #6c757d;
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
||||||
|
}
|
||||||
|
.card-title {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #f8f9fa;
|
||||||
|
}
|
||||||
|
.card-text {
|
||||||
|
font-size: 1rem;
|
||||||
|
color: #ced4da;
|
||||||
|
}
|
||||||
|
.status-online {
|
||||||
|
color: #28a745;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.status-offline {
|
||||||
|
color: #dc3545;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.btn-primary {
|
||||||
|
background-color: #007bff;
|
||||||
|
border-color: #007bff;
|
||||||
|
}
|
||||||
|
.btn-primary:hover {
|
||||||
|
background-color: #0056b3;
|
||||||
|
border-color: #004085;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container mt-5">
|
||||||
|
<h1 class="text-center mb-4">ESP Board Details - {{ hostname }}</h1>
|
||||||
|
<div class="row">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<h3>Relay Status</h3>
|
||||||
|
<ul class="list-group">
|
||||||
|
{% for i in range(4) %}
|
||||||
|
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||||
|
Relay {{ i + 1 }}
|
||||||
|
<span class="badge badge-{{ 'success' if relay_status[i] == 'on' else 'secondary' }}">{{ relay_status[i] }}</span>
|
||||||
|
<div>
|
||||||
|
<form action="{{ url_for('control_relay', hostname=hostname, relay=i+1, action='on') }}" method="post" style="display:inline;">
|
||||||
|
<button type="submit" class="btn btn-success btn-sm">On</button>
|
||||||
|
</form>
|
||||||
|
<form action="{{ url_for('control_relay', hostname=hostname, relay=i+1, action='off') }}" method="post" style="display:inline;">
|
||||||
|
<button type="submit" class="btn btn-danger btn-sm">Off</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6">
|
||||||
|
<h3>Input Status</h3>
|
||||||
|
<ul class="list-group">
|
||||||
|
{% for i in range(4) %}
|
||||||
|
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||||
|
Input {{ i + 1 }}
|
||||||
|
<span class="badge badge-{{ 'success' if input_status[i] == 'on' else 'secondary' }}">{{ input_status[i] }}</span>
|
||||||
|
</li>
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="row mt-4">
|
||||||
|
<div class="col-md-12">
|
||||||
|
<div class="card mb-4">
|
||||||
|
<div class="card-body">
|
||||||
|
<h5 class="card-title"> Next update in <span id="timer">5</span> seconds</h5>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-md-12">
|
||||||
|
<h3>Logs</h3>
|
||||||
|
<ul class="list-group" id="log-list">
|
||||||
|
{% for log in logs %}
|
||||||
|
<li class="list-group-item">
|
||||||
|
<strong>{{ log.timestamp }}:</strong> {{ log.message }}
|
||||||
|
</li>
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
function fetchLogs() {
|
||||||
|
fetch(`/board/{{ hostname }}/logs`)
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {
|
||||||
|
const logList = document.getElementById('log-list');
|
||||||
|
logList.innerHTML = '';
|
||||||
|
data.logs.reverse().forEach(log => { // Reverse the order to show newest first
|
||||||
|
const logItem = document.createElement('li');
|
||||||
|
logItem.className = 'list-group-item';
|
||||||
|
logItem.innerHTML = `<strong>${log.timestamp}:</strong> ${log.message}`;
|
||||||
|
logList.appendChild(logItem);
|
||||||
|
});
|
||||||
|
document.querySelector('.card-text').innerText = new Date().toLocaleString();
|
||||||
|
})
|
||||||
|
.catch(error => console.error('Error fetching logs:', error));
|
||||||
|
}
|
||||||
|
|
||||||
|
function startTimer() {
|
||||||
|
let timer = 5;
|
||||||
|
const timerElement = document.getElementById('timer');
|
||||||
|
setInterval(() => {
|
||||||
|
if (timer > 0) {
|
||||||
|
timer--;
|
||||||
|
timerElement.innerText = timer;
|
||||||
|
} else {
|
||||||
|
timer = 5;
|
||||||
|
fetchLogs();
|
||||||
|
}
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
startTimer();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
68
server_api/templates/index.html
Normal file
68
server_api/templates/index.html
Normal file
@@ -0,0 +1,68 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>ESP Board Status</title>
|
||||||
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background-color: #343a40;
|
||||||
|
color: #f8f9fa;
|
||||||
|
}
|
||||||
|
.card {
|
||||||
|
background-color: #495057;
|
||||||
|
border: 1px solid #6c757d;
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
||||||
|
}
|
||||||
|
.card-title {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #f8f9fa;
|
||||||
|
}
|
||||||
|
.card-text {
|
||||||
|
font-size: 1rem;
|
||||||
|
color: #ced4da;
|
||||||
|
}
|
||||||
|
.status-online {
|
||||||
|
color: #28a745;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.status-offline {
|
||||||
|
color: #dc3545;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.btn-primary {
|
||||||
|
background-color: #007bff;
|
||||||
|
border-color: #007bff;
|
||||||
|
}
|
||||||
|
.btn-primary:hover {
|
||||||
|
background-color: #0056b3;
|
||||||
|
border-color: #004085;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container mt-5">
|
||||||
|
<h1 class="text-center mb-4">ESP Board Status</h1>
|
||||||
|
<div class="row">
|
||||||
|
{% for board in boards %}
|
||||||
|
<div class="col-md-4 col-sm-6">
|
||||||
|
<div class="card mb-4">
|
||||||
|
<div class="card-body">
|
||||||
|
<h5 class="card-title">{{ board.hostname }}</h5>
|
||||||
|
<p class="card-text">Status: <span class="status-{{ 'online' if board.status == 'Online' else 'offline' }}">{{ board.status }}</span></p>
|
||||||
|
<p class="card-text">Last Seen: {{ board.last_seen }}</p>
|
||||||
|
<a href="{{ url_for('view_board', hostname=board.hostname) }}" class="btn btn-primary">View Details</a>
|
||||||
|
<form action="{{ url_for('delete_board', hostname=board.hostname) }}" method="post" class="mt-2">
|
||||||
|
<button type="submit" class="btn btn-danger">Delete</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user