jetzt mit Header, 3 Tabellen

.gitignore

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

Cargo.toml

@@ -0,0 +1,12 @@
+[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"

Dockerfile

@@ -0,0 +1,44 @@
+# 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"]

README.md

@@ -1,2 +1,213 @@
-# paramod-rust
+# Tabellen Webserver
 
+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

src/main.rs

@@ -0,0 +1,249 @@
+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
+}

static/script.js

@@ -0,0 +1,98 @@
+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!';
+    }
+}

static/settings.js

@@ -0,0 +1,40 @@
+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!';
+    }
+}

static/style.css

@@ -0,0 +1,309 @@
+* {
+    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%;
+    }
+}

templates/index.html

@@ -0,0 +1,82 @@
+<!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>

templates/settings.html

@@ -0,0 +1,61 @@
+<!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>