eneuber/paramod-rust
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: eneuber:220161a70aeaf09c72eea3aa5ac1c991d18b6a0d
Branches Tags
eneuber:master
..
compare: eneuber:7e133d55de22b4049d6dc306e82c6e77841cb0db
Branches Tags
eneuber:master

No commits in common. "220161a70aeaf09c72eea3aa5ac1c991d18b6a0d" and "7e133d55de22b4049d6dc306e82c6e77841cb0db" have entirely different histories.
220161a70a ... 7e133d55de

11 changed files with 1 additions and 3263 deletions
Show Stats Expand all files Collapse all files

4
.gitignore vendored
View File

@ -1,4 +0,0 @@
/target
table_config.json
Cargo.lock
.DS_Store

2152
Cargo.lock generated
View File

File diff suppressed because it is too large Load Diff

12
Cargo.toml
View File

@ -1,12 +0,0 @@
[package]
name = "table-server"
version = "0.1.0"
edition = "2021"
[dependencies]
actix-web = "4.4.0"
actix-files = "0.6.2"
serde = { version = "1.0", features = ["derive"] }
serde_json = "1.0"
tokio = { version = "1", features = ["full"] }
tera = "1.19"

44
Dockerfile
View File

@ -1,44 +0,0 @@
# Build Stage
FROM rust:1.75 as builder
WORKDIR /usr/src/app
# Copy manifest files
COPY Cargo.toml ./
# Copy source code and templates
COPY src ./src
COPY templates ./templates
COPY static ./static
# Build the application
RUN cargo build --release
# Runtime Stage
FROM debian:bookworm-slim
# Install required dependencies
RUN apt-get update && apt-get install -y \
ca-certificates \
&& rm -rf /var/lib/apt/lists/*
WORKDIR /app
# Copy the binary from builder
COPY --from=builder /usr/src/app/target/release/table-server /app/table-server
# Copy templates and static files
COPY --from=builder /usr/src/app/templates /app/templates
COPY --from=builder /usr/src/app/static /app/static
# Create directory for config file
RUN mkdir -p /app/data
# Expose port
EXPOSE 8080
# Set environment to use the data directory
ENV CONFIG_PATH=/app/data/table_config.json
# Run the binary
CMD ["/app/table-server"]

213
README.md
View File

@ -1,213 +1,2 @@
# Tabellen Webserver # paramod-rust
Ein einfacher Rust-Webserver, der eine editierbare 3x3-Tabelle bereitstellt und in einer JSON-Konfigurationsdatei persistiert.
## Projektstruktur
```
table-server/
├── src/
│ └── main.rs
├── templates/
│ ├── index.html
│ └── settings.html
├── static/
│ ├── style.css
│ ├── script.js
│ └── settings.js
├── Cargo.toml
├── Dockerfile
├── .gitignore
└── README.md
```
## Funktionen
- **3 separate Tabellen** für verschiedene Sensor-Gruppen
- **Navigation** mit aktivem Status-Indikator
- **Header mit Logo** für professionelles Erscheinungsbild
- **Zeilen hinzufügen/löschen** dynamisch zur Laufzeit
- **Einstellungsseite** für MQTT und InfluxDB Konfiguration
- Editierbare Textfelder (Bezeichnung, Adresse, Type, Faktor)
- Toggle-Schalter für Boolean-Werte (MQTT, InfluxDB)
- **Zentrale JSON-Persistierung** für alle Tabellen und Einstellungen
- REST-API für Daten-Management
- Docker-Unterstützung
- Responsive Design
## Lokale Entwicklung
### Voraussetzungen
- Rust (Version 1.75 oder höher)
- Cargo
### Installation und Start
```bash
# Projekt erstellen
cargo new table-server
cd table-server
# Dependencies installieren und starten
cargo run
```
Der Server läuft dann auf `http://localhost:8080`
## Docker
### Container bauen
```bash
docker build -t table-server .
```
### Container starten
```bash
docker run -p 8080:8080 -v $(pwd)/data:/app/data table-server
```
Mit Volume-Mount bleibt die Konfigurationsdatei auch nach Container-Neustarts erhalten.
### Docker Compose (optional)
Erstelle eine `docker-compose.yml`:
```yaml
version: '3.8'
services:
table-server:
build: .
ports:
- "8080:8080"
volumes:
- ./data:/app/data
restart: unless-stopped
```
Starten mit:
```bash
docker-compose up -d
```
## Verwendung
1. Öffne `http://localhost:8080` im Browser
2. Navigiere zwischen den Tabellen über das Menü:
- **Tabelle 1, 2, 3**: Verschiedene Sensor-Gruppen
- **⚙️ Einstellungen**: MQTT und InfluxDB Konfiguration
3. In den Tabellen:
- **➕ Zeile hinzufügen**: Neue Sensor-Einträge erstellen
- **🗑️ Löschen**: Einzelne Zeilen entfernen
- **Felder bearbeiten**:
- Bezeichnung: Name des Sensors
- Adresse: IP-Adresse oder Identifier
- Type: Sensor-Typ (z.B. Temperatur, Luftfeuchtigkeit)
- Faktor: Numerischer Korrekturfaktor
- MQTT: Toggle-Schalter für MQTT-Aktivierung
- InfluxDB: Toggle-Schalter für InfluxDB-Aktivierung
4. **💾 Speichern**: Änderungen persistieren
5. Alle Daten werden zentral in `table_config.json` gespeichert
## API Endpoints
- `GET /` - Zeigt Tabelle 1
- `GET /table/table2` - Zeigt Tabelle 2
- `GET /table/table3` - Zeigt Tabelle 3
- `GET /settings` - Zeigt Einstellungsseite
- `POST /api/save` - Speichert eine Tabelle
- `POST /api/save-settings` - Speichert die Einstellungen
- `GET /static/*` - Statische Dateien (CSS, JS)
### Beispiel API-Request (Tabelle speichern)
```bash
curl -X POST http://localhost:8080/api/save \
-H "Content-Type: application/json" \
-d '{
"table_id": "table1",
"rows": [
{
"bezeichnung": "Sensor 1",
"adresse": "192.168.1.100",
"type": "Temperatur",
"faktor": "1.0",
"mqtt": true,
"influxdb": false
}
]
}'
```
### Beispiel API-Request (Einstellungen speichern)
```bash
curl -X POST http://localhost:8080/api/save-settings \
-H "Content-Type: application/json" \
-d '{
"mqtt_broker": "localhost",
"mqtt_port": "1883",
"influxdb_url": "http://localhost:8086",
"influxdb_token": "your-token-here"
}'
```
## Konfigurationsdatei
Die komplette Anwendungskonfiguration wird in `table_config.json` gespeichert:
```json
{
"table1": [
{
"bezeichnung": "Temp Sensor 1",
"adresse": "192.168.1.100",
"type": "Temperatur",
"faktor": "1.0",
"mqtt": true,
"influxdb": false
},
{
"bezeichnung": "Temp Sensor 2",
"adresse": "192.168.1.101",
"type": "Temperatur",
"faktor": "1.0",
"mqtt": false,
"influxdb": true
}
],
"table2": [
{
"bezeichnung": "Humidity Sensor 1",
"adresse": "192.168.1.200",
"type": "Luftfeuchtigkeit",
"faktor": "0.5",
"mqtt": true,
"influxdb": true
}
],
"table3": [
{
"bezeichnung": "Pressure Sensor 1",
"adresse": "192.168.1.300",
"type": "Druck",
"faktor": "2.0",
"mqtt": true,
"influxdb": false
}
],
"settings": {
"mqtt_broker": "localhost",
"mqtt_port": "1883",
"influxdb_url": "http://localhost:8086",
"influxdb_token": ""
}
}
```
## Lizenz
MIT

249
src/main.rs
View File

@ -1,249 +0,0 @@
use actix_web::{web, App, HttpResponse, HttpServer, Result};
use actix_files as fs;
use serde::{Deserialize, Serialize};
use std::fs as std_fs;
use std::sync::Mutex;
use tera::{Context, Tera};
#[derive(Debug, Serialize, Deserialize, Clone)]
struct TableRow {
bezeichnung: String,
adresse: String,
r#type: String,
faktor: String,
mqtt: bool,
influxdb: bool,
}
#[derive(Debug, Serialize, Deserialize, Clone)]
struct Settings {
mqtt_broker: String,
mqtt_port: String,
influxdb_url: String,
influxdb_token: String,
}
impl Default for Settings {
fn default() -> Self {
Settings {
mqtt_broker: "localhost".to_string(),
mqtt_port: "1883".to_string(),
influxdb_url: "http://localhost:8086".to_string(),
influxdb_token: "".to_string(),
}
}
}
#[derive(Debug, Serialize, Deserialize, Clone)]
struct AppConfig {
table1: Vec<TableRow>,
table2: Vec<TableRow>,
table3: Vec<TableRow>,
settings: Settings,
}
impl Default for AppConfig {
fn default() -> Self {
AppConfig {
table1: vec![
TableRow {
bezeichnung: "Temp Sensor 1".to_string(),
adresse: "192.168.1.100".to_string(),
r#type: "Temperatur".to_string(),
faktor: "1.0".to_string(),
mqtt: true,
influxdb: false,
},
TableRow {
bezeichnung: "Temp Sensor 2".to_string(),
adresse: "192.168.1.101".to_string(),
r#type: "Temperatur".to_string(),
faktor: "1.0".to_string(),
mqtt: false,
influxdb: true,
},
],
table2: vec![
TableRow {
bezeichnung: "Humidity Sensor 1".to_string(),
adresse: "192.168.1.200".to_string(),
r#type: "Luftfeuchtigkeit".to_string(),
faktor: "0.5".to_string(),
mqtt: true,
influxdb: true,
},
],
table3: vec![
TableRow {
bezeichnung: "Pressure Sensor 1".to_string(),
adresse: "192.168.1.300".to_string(),
r#type: "Druck".to_string(),
faktor: "2.0".to_string(),
mqtt: true,
influxdb: false,
},
],
settings: Settings::default(),
}
}
}
struct AppState {
config: Mutex<AppConfig>,
config_path: String,
templates: Tera,
}
impl AppState {
fn load_or_create(config_path: &str) -> Self {
let config = match std_fs::read_to_string(config_path) {
Ok(content) => serde_json::from_str(&content).unwrap_or_default(),
Err(_) => {
let default = AppConfig::default();
let _ = std_fs::write(config_path, serde_json::to_string_pretty(&default).unwrap());
default
}
};
let tera = match Tera::new("templates/**/*") {
Ok(t) => t,
Err(e) => {
println!("Template parsing error: {}", e);
std::process::exit(1);
}
};
AppState {
config: Mutex::new(config),
config_path: config_path.to_string(),
templates: tera,
}
}
fn save(&self) -> Result<(), std::io::Error> {
let config = self.config.lock().unwrap();
let json = serde_json::to_string_pretty(&*config)?;
std_fs::write(&self.config_path, json)
}
}
async fn index(data: web::Data<AppState>) -> Result<HttpResponse> {
let config = data.config.lock().unwrap();
let mut context = Context::new();
context.insert("rows", &config.table1);
context.insert("table_id", "table1");
context.insert("active_page", "table1");
let html = data.templates.render("index.html", &context)
.map_err(|e| {
eprintln!("Template error: {}", e);
actix_web::error::ErrorInternalServerError("Template error")
})?;
Ok(HttpResponse::Ok().content_type("text/html").body(html))
}
async fn table_page(data: web::Data<AppState>, path: web::Path<String>) -> Result<HttpResponse> {
let table_id = path.into_inner();
let config = data.config.lock().unwrap();
let rows = match table_id.as_str() {
"table1" => &config.table1,
"table2" => &config.table2,
"table3" => &config.table3,
_ => return Ok(HttpResponse::NotFound().body("Table not found")),
};
let mut context = Context::new();
context.insert("rows", rows);
context.insert("table_id", &table_id);
context.insert("active_page", &table_id);
let html = data.templates.render("index.html", &context)
.map_err(|e| {
eprintln!("Template error: {}", e);
actix_web::error::ErrorInternalServerError("Template error")
})?;
Ok(HttpResponse::Ok().content_type("text/html").body(html))
}
async fn settings_page(data: web::Data<AppState>) -> Result<HttpResponse> {
let config = data.config.lock().unwrap();
let mut context = Context::new();
context.insert("settings", &config.settings);
context.insert("active_page", "settings");
let html = data.templates.render("settings.html", &context)
.map_err(|e| {
eprintln!("Template error: {}", e);
actix_web::error::ErrorInternalServerError("Template error")
})?;
Ok(HttpResponse::Ok().content_type("text/html").body(html))
}
#[derive(Deserialize)]
struct SaveTableRequest {
table_id: String,
rows: Vec<TableRow>,
}
async fn save_table(
data: web::Data<AppState>,
req: web::Json<SaveTableRequest>,
) -> Result<HttpResponse> {
let mut config = data.config.lock().unwrap();
match req.table_id.as_str() {
"table1" => config.table1 = req.rows.clone(),
"table2" => config.table2 = req.rows.clone(),
"table3" => config.table3 = req.rows.clone(),
_ => return Ok(HttpResponse::BadRequest().json(serde_json::json!({"status": "error", "message": "Invalid table_id"}))),
}
drop(config);
match data.save() {
Ok(_) => Ok(HttpResponse::Ok().json(serde_json::json!({"status": "success"}))),
Err(_) => Ok(HttpResponse::InternalServerError().json(serde_json::json!({"status": "error"}))),
}
}
async fn save_settings(
data: web::Data<AppState>,
settings: web::Json<Settings>,
) -> Result<HttpResponse> {
let mut config = data.config.lock().unwrap();
config.settings = settings.into_inner();
drop(config);
match data.save() {
Ok(_) => Ok(HttpResponse::Ok().json(serde_json::json!({"status": "success"}))),
Err(_) => Ok(HttpResponse::InternalServerError().json(serde_json::json!({"status": "error"}))),
}
}
#[actix_web::main]
async fn main() -> std::io::Result<()> {
let config_path = "table_config.json";
let app_state = web::Data::new(AppState::load_or_create(config_path));
println!("Server läuft auf http://0.0.0.0:8080");
HttpServer::new(move || {
App::new()
.app_data(app_state.clone())
.route("/", web::get().to(index))
.route("/table/{id}", web::get().to(table_page))
.route("/settings", web::get().to(settings_page))
.route("/api/save", web::post().to(save_table))
.route("/api/save-settings", web::post().to(save_settings))
.service(fs::Files::new("/static", "./static"))
})
.bind("0.0.0.0:8080")?
.run()
.await
}

98
static/script.js
View File

@ -1,98 +0,0 @@
function addRow() {
const tableBody = document.getElementById('tableBody');
const rowCount = tableBody.querySelectorAll('tr').length;
const newRow = document.createElement('tr');
newRow.setAttribute('data-row', rowCount);
newRow.innerHTML = `
<td><input type='text' class='text-input' data-field='bezeichnung' value='' /></td>
<td><input type='text' class='text-input' data-field='adresse' value='' /></td>
<td><input type='text' class='text-input' data-field='type' value='' /></td>
<td><input type='text' class='text-input' data-field='faktor' value='1.0' /></td>
<td>
<label class='switch'>
<input type='checkbox' class='bool-input' data-field='mqtt' />
<span class='slider'></span>
</label>
</td>
<td>
<label class='switch'>
<input type='checkbox' class='bool-input' data-field='influxdb' />
<span class='slider'></span>
</label>
</td>
<td>
<button class="delete-btn" onclick="deleteRow(this)">🗑️</button>
</td>
`;
tableBody.appendChild(newRow);
}
function deleteRow(button) {
const row = button.closest('tr');
if (confirm('Möchten Sie diese Zeile wirklich löschen?')) {
row.remove();
updateRowIndices();
}
}
function updateRowIndices() {
const rows = document.querySelectorAll('#tableBody tr');
rows.forEach((row, index) => {
row.setAttribute('data-row', index);
});
}
async function saveTable() {
const rows = [];
const tableRows = document.querySelectorAll('#tableBody tr');
tableRows.forEach((row) => {
const bezeichnung = row.querySelector("input[data-field='bezeichnung']").value;
const adresse = row.querySelector("input[data-field='adresse']").value;
const type = row.querySelector("input[data-field='type']").value;
const faktor = row.querySelector("input[data-field='faktor']").value;
const mqtt = row.querySelector("input[data-field='mqtt']").checked;
const influxdb = row.querySelector("input[data-field='influxdb']").checked;
rows.push({
bezeichnung,
adresse,
type,
faktor,
mqtt,
influxdb
});
});
try {
const response = await fetch('/api/save', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
table_id: tableId,
rows: rows
})
});
const messageDiv = document.getElementById('message');
if (response.ok) {
messageDiv.className = 'message success';
messageDiv.textContent = '✓ Erfolgreich gespeichert!';
} else {
messageDiv.className = 'message error';
messageDiv.textContent = '✗ Fehler beim Speichern!';
}
setTimeout(() => {
messageDiv.style.display = 'none';
}, 3000);
} catch (error) {
const messageDiv = document.getElementById('message');
messageDiv.className = 'message error';
messageDiv.textContent = '✗ Verbindungsfehler!';
}
}

40
static/settings.js
View File

@ -1,40 +0,0 @@
async function saveSettings() {
const mqtt_broker = document.getElementById('mqtt_broker').value;
const mqtt_port = document.getElementById('mqtt_port').value;
const influxdb_url = document.getElementById('influxdb_url').value;
const influxdb_token = document.getElementById('influxdb_token').value;
const settings = {
mqtt_broker,
mqtt_port,
influxdb_url,
influxdb_token
};
try {
const response = await fetch('/api/save-settings', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(settings)
});
const messageDiv = document.getElementById('message');
if (response.ok) {
messageDiv.className = 'message success';
messageDiv.textContent = '✓ Einstellungen erfolgreich gespeichert!';
} else {
messageDiv.className = 'message error';
messageDiv.textContent = '✗ Fehler beim Speichern der Einstellungen!';
}
setTimeout(() => {
messageDiv.style.display = 'none';
}, 3000);
} catch (error) {
const messageDiv = document.getElementById('message');
messageDiv.className = 'message error';
messageDiv.textContent = '✗ Verbindungsfehler!';
}
}

309
static/style.css
View File

@ -1,309 +0,0 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding-top: 80px;
}
/* Header Styles */
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
background: white;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
z-index: 1000;
}
.header-content {
max-width: 1400px;
margin: 0 auto;
padding: 15px 30px;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
display: flex;
align-items: center;
gap: 12px;
}
.logo-text {
font-size: 20px;
font-weight: 700;
color: #333;
}
.nav {
display: flex;
gap: 5px;
}
.nav-link {
padding: 10px 20px;
text-decoration: none;
color: #666;
border-radius: 6px;
transition: all 0.3s;
font-weight: 500;
}
.nav-link:hover {
background-color: #f0f0f0;
color: #333;
}
.nav-link.active {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
/* Container */
.container {
max-width: 1400px;
margin: 30px auto;
padding: 30px;
background-color: white;
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}
h1 {
color: #333;
text-align: center;
margin-bottom: 30px;
font-size: 28px;
}
h2 {
color: #333;
margin-bottom: 20px;
font-size: 20px;
border-bottom: 2px solid #667eea;
padding-bottom: 10px;
}
/* Table Styles */
.table-wrapper {
overflow-x: auto;
margin-bottom: 20px;
}
table {
width: 100%;
border-collapse: collapse;
background-color: white;
}
th {
background-color: #667eea;
color: white;
padding: 15px;
text-align: left;
font-weight: 600;
border: 1px solid #5568d3;
}
td {
border: 1px solid #e0e0e0;
padding: 12px;
}
tr:hover {
background-color: #f8f9ff;
}
.text-input {
width: 100%;
padding: 8px 12px;
border: 2px solid #e0e0e0;
border-radius: 6px;
box-sizing: border-box;
font-size: 14px;
transition: border-color 0.3s;
}
.text-input:focus {
outline: none;
border-color: #667eea;
}
/* Toggle Switch */
.switch {
position: relative;
display: inline-block;
width: 50px;
height: 24px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
border-radius: 24px;
}
.slider:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 3px;
bottom: 3px;
background-color: white;
transition: .4s;
border-radius: 50%;
}
input:checked + .slider {
background-color: #4CAF50;
}
input:focus + .slider {
box-shadow: 0 0 1px #4CAF50;
}
input:checked + .slider:before {
transform: translateX(26px);
}
/* Buttons */
.button-group {
display: flex;
gap: 15px;
justify-content: center;
margin-top: 20px;
}
.save-btn, .add-btn {
padding: 14px 30px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 16px;
font-weight: 600;
transition: transform 0.2s, box-shadow 0.2s;
}
.save-btn:hover, .add-btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
}
.save-btn:active, .add-btn:active {
transform: translateY(0);
}
.add-btn {
background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
}
.delete-btn {
padding: 8px 12px;
background-color: #f44336;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
transition: background-color 0.3s;
}
.delete-btn:hover {
background-color: #da190b;
}
/* Messages */
.message {
text-align: center;
padding: 12px;
margin: 20px 0;
border-radius: 8px;
display: none;
font-weight: 500;
}
.message.success {
background-color: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
display: block;
}
.message.error {
background-color: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
display: block;
}
/* Settings Page */
.settings-section {
margin-bottom: 40px;
padding: 20px;
background-color: #f9f9f9;
border-radius: 8px;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
margin-bottom: 8px;
color: #333;
font-weight: 500;
}
.form-group .text-input {
max-width: 600px;
}
/* Responsive */
@media (max-width: 768px) {
.header-content {
flex-direction: column;
gap: 15px;
}
.nav {
flex-wrap: wrap;
justify-content: center;
}
.container {
padding: 15px;
margin: 15px;
}
.button-group {
flex-direction: column;
}
.save-btn, .add-btn {
width: 100%;
}
}

82
templates/index.html
View File

@ -1,82 +0,0 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sensor Konfiguration</title>
<link rel="stylesheet" href="/static/style.css">
</head>
<body>
<header class="header">
<div class="header-content">
<div class="logo">
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="40" height="40" rx="8" fill="#667eea"/>
<path d="M12 20L18 26L28 14" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span class="logo-text">Sensor Manager</span>
</div>
<nav class="nav">
<a href="/" class="nav-link {% if active_page == 'table1' %}active{% endif %}">Tabelle 1</a>
<a href="/table/table2" class="nav-link {% if active_page == 'table2' %}active{% endif %}">Tabelle 2</a>
<a href="/table/table3" class="nav-link {% if active_page == 'table3' %}active{% endif %}">Tabelle 3</a>
<a href="/settings" class="nav-link {% if active_page == 'settings' %}active{% endif %}">⚙️ Einstellungen</a>
</nav>
</div>
</header>
<div class="container">
<h1>🔧 Sensor Konfiguration - {{ table_id | upper }}</h1>
<div id="message" class="message"></div>
<div class="table-wrapper">
<table id="sensorTable">
<thead>
<tr>
<th>Bezeichnung</th>
<th>Adresse</th>
<th>Type</th>
<th>Faktor</th>
<th>MQTT</th>
<th>InfluxDB</th>
<th>Aktionen</th>
</tr>
</thead>
<tbody id="tableBody">
{% for row in rows %}
<tr data-row="{{ loop.index0 }}">
<td><input type='text' class='text-input' data-field='bezeichnung' value='{{ row.bezeichnung }}' /></td>
<td><input type='text' class='text-input' data-field='adresse' value='{{ row.adresse }}' /></td>
<td><input type='text' class='text-input' data-field='type' value='{{ row.type }}' /></td>
<td><input type='text' class='text-input' data-field='faktor' value='{{ row.faktor }}' /></td>
<td>
<label class='switch'>
<input type='checkbox' class='bool-input' data-field='mqtt' {% if row.mqtt %}checked{% endif %} />
<span class='slider'></span>
</label>
</td>
<td>
<label class='switch'>
<input type='checkbox' class='bool-input' data-field='influxdb' {% if row.influxdb %}checked{% endif %} />
<span class='slider'></span>
</label>
</td>
<td>
<button class="delete-btn" onclick="deleteRow(this)">🗑️</button>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<div class="button-group">
<button class="add-btn" onclick="addRow()">➕ Zeile hinzufügen</button>
<button class="save-btn" onclick="saveTable()">💾 Speichern</button>
</div>
</div>
<script>
const tableId = "{{ table_id }}";
</script>
<script src="/static/script.js"></script>
</body>
</html>

61
templates/settings.html
View File

@ -1,61 +0,0 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Einstellungen</title>
<link rel="stylesheet" href="/static/style.css">
</head>
<body>
<header class="header">
<div class="header-content">
<div class="logo">
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="40" height="40" rx="8" fill="#667eea"/>
<path d="M12 20L18 26L28 14" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span class="logo-text">Sensor Manager</span>
</div>
<nav class="nav">
<a href="/" class="nav-link {% if active_page == 'table1' %}active{% endif %}">Tabelle 1</a>
<a href="/table/table2" class="nav-link {% if active_page == 'table2' %}active{% endif %}">Tabelle 2</a>
<a href="/table/table3" class="nav-link {% if active_page == 'table3' %}active{% endif %}">Tabelle 3</a>
<a href="/settings" class="nav-link {% if active_page == 'settings' %}active{% endif %}">⚙️ Einstellungen</a>
</nav>
</div>
</header>
<div class="container">
<h1>⚙️ Einstellungen</h1>
<div id="message" class="message"></div>
<div class="settings-section">
<h2>MQTT Konfiguration</h2>
<div class="form-group">
<label for="mqtt_broker">MQTT Broker:</label>
<input type="text" id="mqtt_broker" class="text-input" value="{{ settings.mqtt_broker }}" />
</div>
<div class="form-group">
<label for="mqtt_port">MQTT Port:</label>
<input type="text" id="mqtt_port" class="text-input" value="{{ settings.mqtt_port }}" />
</div>
</div>
<div class="settings-section">
<h2>InfluxDB Konfiguration</h2>
<div class="form-group">
<label for="influxdb_url">InfluxDB URL:</label>
<input type="text" id="influxdb_url" class="text-input" value="{{ settings.influxdb_url }}" />
</div>
<div class="form-group">
<label for="influxdb_token">InfluxDB Token:</label>
<input type="password" id="influxdb_token" class="text-input" value="{{ settings.influxdb_token }}" />
</div>
</div>
<button class="save-btn" onclick="saveSettings()">💾 Einstellungen speichern</button>
</div>
<script src="/static/settings.js"></script>
</body>
</html>