Add DevServer (brokern)

mock-server/.gitignore

@@ -0,0 +1,4 @@
+node_modules/
+*.log
+.DS_Store
+.env

mock-server/README.md

@@ -0,0 +1,179 @@
+# AquaMaster Mock Server
+
+Mock ESP32 Server und MQTT-Broker für lokales Testing ohne Hardware.
+
+## Übersicht
+
+Dieses Projekt simuliert:
+- **MQTT-Broker** (Port 1883 TCP, Port 9001 WebSocket) - Lokaler MQTT-Broker für Kommunikation
+- **Mock ESP32 Server** (Port 80) - Simuliert alle ESP32 API-Endpunkte und WebSocket
+- **Web Debug UI** - Browser-basierte Oberfläche zum Testen von API und MQTT
+
+## Voraussetzungen
+
+- Node.js 16+ (LTS empfohlen)
+- npm
+
+## Installation
+
+```bash
+cd mock-server
+npm install
+```
+
+## Verwendung
+
+### Option 1: Beide Server zusammen starten
+
+```bash
+npm start
+# oder
+node start_all.js
+```
+
+### Option 2: Server einzeln starten
+
+**Terminal 1 - MQTT Broker:**
+```bash
+npm run mqtt
+# oder
+node mqtt_broker.js
+```
+
+**Terminal 2 - Mock ESP32 Server:**
+```bash
+npm run server
+# oder
+node mock_esp32_server.js
+```
+
+### Web Debug UI öffnen
+
+Nach dem Start der Server:
+1. Öffne einen Browser
+2. Navigiere zu: `http://localhost:80`
+3. Die Debug-Oberfläche sollte sichtbar sein
+
+## Features
+
+### MQTT Broker
+- Läuft auf Port 1883 (TCP) und Port 9001 (WebSocket)
+- Unterstützt alle relevanten Topics:
+  - `aquacross/button/#`
+  - `aquacross/button/rfid/#`
+  - `aquacross/battery/#`
+  - `heartbeat/alive/#`
+  - `aquacross/competition/#`
+  - `sync/time`
+  - `aquacross/lanes/#`
+- Loggt alle Nachrichten für Debugging
+
+### Mock ESP32 Server
+- Simuliert alle API-Endpunkte aus der ESP32-Firmware
+- WebSocket-Support für Live-Updates
+- MQTT-Client, der sich mit dem Broker verbindet
+- Timer-Logik (Individual/Wettkampf-Modi)
+- Button-Konfigurationen und Learning-Mode
+
+### Web Debug UI
+- **API Testing Tab**: Teste alle API-Endpunkte
+- **MQTT Testing Tab**: Publish/Subscribe MQTT-Nachrichten
+- **Debug Endpoints Tab**: Direkte Timer-Kontrolle
+
+## API-Endpunkte
+
+Alle Endpunkte sind unter `http://localhost:80/api/...` verfügbar:
+
+- `GET /api/data` - Timer-Daten abrufen
+- `POST /api/reset-best` - Beste Zeiten zurücksetzen
+- `POST /api/unlearn-button` - Button-Zuordnungen löschen
+- `GET /api/debug/start1` - Lane 1 starten (Debug)
+- `GET /api/debug/stop1` - Lane 1 stoppen (Debug)
+- `GET /api/debug/start2` - Lane 2 starten (Debug)
+- `GET /api/debug/stop2` - Lane 2 stoppen (Debug)
+- ... und viele mehr (siehe `../API.md`)
+
+## MQTT Topics
+
+### Button Topics
+- `aquacross/button/{MAC}` - Button-Press Nachrichten
+  ```json
+  {"type": 2, "timestamp": 1234567890}
+  ```
+  - `type: 2` = Start-Button
+  - `type: 1` = Stop-Button
+
+### RFID Topics
+- `aquacross/button/rfid/{MAC}` - RFID-Read Nachrichten
+  ```json
+  {"uid": "TEST123456"}
+  ```
+
+### Battery Topics
+- `aquacross/battery/{MAC}` - Batteriestand
+  ```json
+  {"voltage": 3600}
+  ```
+
+### Heartbeat Topics
+- `heartbeat/alive/{MAC}` - Heartbeat-Nachrichten
+  ```json
+  {"timestamp": 1234567890}
+  ```
+
+### Competition Topics
+- `aquacross/competition/toMaster` - Wettkampf-Start
+  ```
+  "start"
+  ```
+
+### Time Sync
+- `sync/time` - Zeit-Synchronisation (vom Server alle 5 Sekunden)
+
+## Troubleshooting
+
+### Port bereits belegt
+Falls Port 80 oder 1883 bereits belegt sind:
+- Windows: Port 80 benötigt Admin-Rechte, verwende einen anderen Port
+- Linux/Mac: Port 80 benötigt sudo, verwende einen anderen Port
+
+Um Ports zu ändern, editiere:
+- `mqtt_broker.js` - Zeile mit `const port = 1883;`
+- `mock_esp32_server.js` - Zeile mit `const PORT = 80;`
+
+### MQTT-Verbindung fehlgeschlagen
+- Stelle sicher, dass der MQTT-Broker läuft
+- Prüfe, ob Port 1883 (TCP) oder 9001 (WebSocket) erreichbar ist
+- Browser benötigen WebSocket-Verbindung (Port 9001)
+
+### WebSocket-Verbindung fehlgeschlagen
+- Stelle sicher, dass der Mock ESP32 Server läuft
+- Prüfe Browser-Konsole auf Fehler
+- Socket.io sollte automatisch geladen werden
+
+## Projektstruktur
+
+```
+mock-server/
+├── package.json              # Node.js Dependencies
+├── README.md                 # Diese Datei
+├── .gitignore               # Git ignore
+├── mqtt_broker.js           # MQTT-Broker
+├── mock_esp32_server.js     # Mock ESP32 Server
+├── start_all.js             # Startet beide Server
+└── debug_server/
+    ├── index.html           # Web Debug UI
+    ├── debug.js             # JavaScript-Logik
+    └── debug.css            # Styling
+```
+
+## Hinweise
+
+- Der Mock-Server speichert keinen persistenten State (alles im Speicher)
+- Nach Neustart sind alle Einstellungen zurückgesetzt
+- Für Produktionstests sollte der echte ESP32 verwendet werden
+- Dieser Mock-Server ist nur für Entwicklung und Testing gedacht
+
+## Lizenz
+
+MIT

mock-server/debug_server/debug.css

@@ -0,0 +1,273 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+    background: #f5f5f5;
+    color: #333;
+    line-height: 1.6;
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+header {
+    background: #2c3e50;
+    color: white;
+    padding: 20px;
+    border-radius: 8px;
+    margin-bottom: 20px;
+}
+
+header h1 {
+    margin-bottom: 15px;
+}
+
+.status-bar {
+    display: flex;
+    gap: 20px;
+    flex-wrap: wrap;
+}
+
+.status-indicator {
+    padding: 5px 10px;
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 4px;
+    font-size: 0.9em;
+}
+
+.status-indicator.connected {
+    background: #27ae60;
+}
+
+.status-indicator.disconnected {
+    background: #e74c3c;
+}
+
+.tabs {
+    display: flex;
+    gap: 10px;
+    margin-bottom: 20px;
+    border-bottom: 2px solid #ddd;
+}
+
+.tab-button {
+    padding: 12px 24px;
+    background: transparent;
+    border: none;
+    border-bottom: 3px solid transparent;
+    cursor: pointer;
+    font-size: 16px;
+    color: #666;
+    transition: all 0.3s;
+}
+
+.tab-button:hover {
+    color: #2c3e50;
+    background: #f0f0f0;
+}
+
+.tab-button.active {
+    color: #2c3e50;
+    border-bottom-color: #3498db;
+    font-weight: bold;
+}
+
+.tab-content {
+    display: none;
+    background: white;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.tab-content.active {
+    display: block;
+}
+
+.section {
+    margin-bottom: 30px;
+}
+
+.section h2 {
+    margin-bottom: 15px;
+    color: #2c3e50;
+    border-bottom: 2px solid #ecf0f1;
+    padding-bottom: 10px;
+}
+
+.section h3 {
+    margin-top: 20px;
+    margin-bottom: 10px;
+    color: #34495e;
+}
+
+.form-group {
+    margin-bottom: 15px;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 5px;
+    font-weight: 500;
+    color: #555;
+}
+
+.form-group input,
+.form-group select,
+.form-group textarea {
+    width: 100%;
+    padding: 10px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    font-size: 14px;
+    font-family: inherit;
+}
+
+.form-group textarea {
+    resize: vertical;
+    font-family: 'Courier New', monospace;
+}
+
+.btn {
+    padding: 10px 20px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: 500;
+    transition: all 0.3s;
+    margin-right: 10px;
+    margin-bottom: 10px;
+}
+
+.btn-primary {
+    background: #3498db;
+    color: white;
+}
+
+.btn-primary:hover {
+    background: #2980b9;
+}
+
+.btn-secondary {
+    background: #95a5a6;
+    color: white;
+}
+
+.btn-secondary:hover {
+    background: #7f8c8d;
+}
+
+.btn-small {
+    padding: 5px 10px;
+    font-size: 12px;
+}
+
+.button-group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    margin-top: 15px;
+}
+
+.response-section {
+    margin-top: 20px;
+    padding: 15px;
+    background: #f8f9fa;
+    border-radius: 4px;
+}
+
+.response-section pre {
+    background: #2c3e50;
+    color: #ecf0f1;
+    padding: 15px;
+    border-radius: 4px;
+    overflow-x: auto;
+    font-size: 13px;
+    max-height: 400px;
+    overflow-y: auto;
+}
+
+.quick-actions {
+    margin-top: 30px;
+    padding-top: 20px;
+    border-top: 1px solid #ddd;
+}
+
+.messages-section {
+    margin-top: 30px;
+}
+
+.messages-controls {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+}
+
+.messages-container {
+    background: #2c3e50;
+    color: #ecf0f1;
+    padding: 15px;
+    border-radius: 4px;
+    max-height: 500px;
+    overflow-y: auto;
+    font-family: 'Courier New', monospace;
+    font-size: 12px;
+}
+
+.message-item {
+    padding: 8px;
+    margin-bottom: 8px;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 4px;
+    border-left: 3px solid #3498db;
+}
+
+.message-item .timestamp {
+    color: #95a5a6;
+    font-size: 11px;
+    margin-bottom: 4px;
+}
+
+.message-item .topic {
+    color: #3498db;
+    font-weight: bold;
+    margin-bottom: 4px;
+}
+
+.message-item .payload {
+    color: #ecf0f1;
+    word-break: break-all;
+}
+
+@media (max-width: 768px) {
+    .container {
+        padding: 10px;
+    }
+
+    .tabs {
+        flex-wrap: wrap;
+    }
+
+    .tab-button {
+        flex: 1;
+        min-width: 100px;
+    }
+
+    .button-group {
+        flex-direction: column;
+    }
+
+    .btn {
+        width: 100%;
+        margin-right: 0;
+    }
+}

mock-server/debug_server/debug.js

@@ -0,0 +1,378 @@
+// Configuration
+const API_BASE_URL = 'http://localhost:80';
+const MQTT_BROKER_URL = 'ws://localhost:9001/mqtt'; // WebSocket port for MQTT
+const WS_URL = 'http://localhost:80';
+
+// State
+let mqttClient = null;
+let wsClient = null;
+let subscribedTopics = new Set();
+
+// Initialize
+document.addEventListener('DOMContentLoaded', init);
+
+function init() {
+    setupTabs();
+    setupAPI();
+    setupMQTT();
+    setupWebSocket();
+    setupDebug();
+    setupQuickActions();
+}
+
+// Tab Management
+function setupTabs() {
+    const tabButtons = document.querySelectorAll('.tab-button');
+    const tabContents = document.querySelectorAll('.tab-content');
+
+    tabButtons.forEach(button => {
+        button.addEventListener('click', () => {
+            const tabName = button.dataset.tab;
+
+            // Remove active class from all
+            tabButtons.forEach(btn => btn.classList.remove('active'));
+            tabContents.forEach(content => content.classList.remove('active'));
+
+            // Add active class to selected
+            button.classList.add('active');
+            document.getElementById(`${tabName}-tab`).classList.add('active');
+        });
+    });
+}
+
+// API Setup
+function setupAPI() {
+    const endpointSelect = document.getElementById('api-endpoint');
+    const paramsTextarea = document.getElementById('api-params');
+    const sendBtn = document.getElementById('api-send-btn');
+    const responsePre = document.getElementById('api-response');
+
+    sendBtn.addEventListener('click', async () => {
+        const endpoint = endpointSelect.value;
+        const [method, path] = endpoint.split(' ');
+        const params = paramsTextarea.value.trim();
+
+        try {
+            let options = {
+                method: method,
+                headers: {}
+            };
+
+            if (method === 'POST' && params) {
+                // Try to parse as JSON, otherwise use as form data
+                try {
+                    const jsonData = JSON.parse(params);
+                    options.headers['Content-Type'] = 'application/json';
+                    options.body = JSON.stringify(jsonData);
+                } catch {
+                    // Not JSON, use form data
+                    const formData = new URLSearchParams();
+                    const pairs = params.split('&');
+                    pairs.forEach(pair => {
+                        const [key, value] = pair.split('=');
+                        if (key && value) {
+                            formData.append(key, decodeURIComponent(value));
+                        }
+                    });
+                    options.headers['Content-Type'] = 'application/x-www-form-urlencoded';
+                    options.body = formData.toString();
+                }
+            }
+
+            const response = await fetch(`${API_BASE_URL}${path}`, options);
+            const text = await response.text();
+            
+            let formatted;
+            try {
+                formatted = JSON.stringify(JSON.parse(text), null, 2);
+            } catch {
+                formatted = text;
+            }
+            
+            responsePre.textContent = formatted;
+
+        } catch (error) {
+            responsePre.textContent = `Error: ${error.message}`;
+        }
+    });
+}
+
+// MQTT Setup
+function setupMQTT() {
+    const topicInput = document.getElementById('mqtt-topic');
+    const payloadTextarea = document.getElementById('mqtt-payload');
+    const publishBtn = document.getElementById('mqtt-publish-btn');
+    const subscribeBtn = document.getElementById('mqtt-subscribe-btn');
+    const unsubscribeBtn = document.getElementById('mqtt-unsubscribe-btn');
+    const subscribeTopicInput = document.getElementById('mqtt-subscribe-topic');
+    const messagesContainer = document.getElementById('mqtt-messages');
+    const clearMessagesBtn = document.getElementById('clear-messages-btn');
+
+    // Connect to MQTT broker
+    try {
+        mqttClient = mqtt.connect(MQTT_BROKER_URL, {
+            clientId: 'debug-ui-' + Math.random().toString(16).substr(2, 8)
+        });
+
+        mqttClient.on('connect', () => {
+            console.log('MQTT connected');
+            updateStatus('mqtt-status', 'MQTT: Connected', true);
+        });
+
+        mqttClient.on('error', (error) => {
+            console.error('MQTT error:', error);
+            updateStatus('mqtt-status', 'MQTT: Error', false);
+        });
+
+        mqttClient.on('close', () => {
+            console.log('MQTT disconnected');
+            updateStatus('mqtt-status', 'MQTT: Disconnected', false);
+        });
+
+        mqttClient.on('message', (topic, message) => {
+            addMessage(topic, message.toString());
+        });
+    } catch (error) {
+        console.error('Failed to connect to MQTT:', error);
+        updateStatus('mqtt-status', 'MQTT: Connection Failed', false);
+    }
+
+    publishBtn.addEventListener('click', () => {
+        const topic = topicInput.value.trim();
+        let payload = payloadTextarea.value.trim();
+
+        if (!topic) {
+            alert('Please enter a topic');
+            return;
+        }
+
+        // Try to parse as JSON, otherwise use as-is
+        try {
+            const jsonData = JSON.parse(payload);
+            payload = JSON.stringify(jsonData);
+        } catch {
+            // Not JSON, use as-is
+        }
+
+        if (mqttClient && mqttClient.connected) {
+            mqttClient.publish(topic, payload, (err) => {
+                if (err) {
+                    console.error('Publish error:', err);
+                    alert('Failed to publish: ' + err.message);
+                } else {
+                    console.log('Published to', topic);
+                }
+            });
+        } else {
+            alert('MQTT not connected');
+        }
+    });
+
+    subscribeBtn.addEventListener('click', () => {
+        const topic = subscribeTopicInput.value.trim();
+        if (!topic) {
+            alert('Please enter a topic pattern');
+            return;
+        }
+
+        if (mqttClient && mqttClient.connected) {
+            mqttClient.subscribe(topic, (err) => {
+                if (err) {
+                    console.error('Subscribe error:', err);
+                    alert('Failed to subscribe: ' + err.message);
+                } else {
+                    subscribedTopics.add(topic);
+                    console.log('Subscribed to', topic);
+                }
+            });
+        } else {
+            alert('MQTT not connected');
+        }
+    });
+
+    unsubscribeBtn.addEventListener('click', () => {
+        if (mqttClient && mqttClient.connected) {
+            subscribedTopics.forEach(topic => {
+                mqttClient.unsubscribe(topic);
+            });
+            subscribedTopics.clear();
+            console.log('Unsubscribed from all topics');
+        }
+    });
+
+    clearMessagesBtn.addEventListener('click', () => {
+        messagesContainer.innerHTML = '';
+    });
+}
+
+function addMessage(topic, payload) {
+    const messagesContainer = document.getElementById('mqtt-messages');
+    const messageDiv = document.createElement('div');
+    messageDiv.className = 'message-item';
+
+    const timestamp = new Date().toLocaleTimeString();
+    let formattedPayload = payload;
+    try {
+        formattedPayload = JSON.stringify(JSON.parse(payload), null, 2);
+    } catch {}
+
+    messageDiv.innerHTML = `
+        <div class="timestamp">${timestamp}</div>
+        <div class="topic">${topic}</div>
+        <div class="payload">${formattedPayload}</div>
+    `;
+
+    messagesContainer.appendChild(messageDiv);
+
+    // Auto-scroll
+    if (document.getElementById('auto-scroll').checked) {
+        messagesContainer.scrollTop = messagesContainer.scrollHeight;
+    }
+}
+
+// WebSocket Setup
+function setupWebSocket() {
+    if (typeof io !== 'undefined') {
+        try {
+            wsClient = io(SOCKET_IO_URL);
+
+            wsClient.on('connect', () => {
+                console.log('WebSocket connected');
+                updateStatus('ws-status', 'WebSocket: Connected', true);
+            });
+
+            wsClient.on('disconnect', () => {
+                console.log('WebSocket disconnected');
+                updateStatus('ws-status', 'WebSocket: Disconnected', false);
+            });
+
+            wsClient.on('update', (data) => {
+                console.log('WebSocket update:', data);
+                // Could display in a separate section
+            });
+        } catch (error) {
+            console.error('Failed to connect WebSocket:', error);
+            updateStatus('ws-status', 'WebSocket: Error', false);
+        }
+    } else {
+        console.warn('Socket.io not loaded');
+        updateStatus('ws-status', 'WebSocket: Library Not Loaded', false);
+    }
+}
+
+// Debug Endpoints Setup
+function setupDebug() {
+    const debugButtons = document.querySelectorAll('[data-debug]');
+    const responsePre = document.getElementById('debug-response');
+
+    debugButtons.forEach(button => {
+        button.addEventListener('click', async () => {
+            const action = button.dataset.debug;
+            const endpoint = `/api/debug/${action}`;
+
+            try {
+                const response = await fetch(`${API_BASE_URL}${endpoint}`);
+                const text = await response.text();
+                responsePre.textContent = text;
+            } catch (error) {
+                responsePre.textContent = `Error: ${error.message}`;
+            }
+        });
+    });
+}
+
+// Quick Actions Setup
+function setupQuickActions() {
+    const quickActionButtons = document.querySelectorAll('[data-action]');
+
+    quickActionButtons.forEach(button => {
+        button.addEventListener('click', () => {
+            const action = button.dataset.action;
+            const topicInput = document.getElementById('mqtt-topic');
+            const payloadTextarea = document.getElementById('mqtt-payload');
+
+            switch (action) {
+                case 'button-start1':
+                    topicInput.value = 'aquacross/button/00:00:00:00:00:01';
+                    payloadTextarea.value = JSON.stringify({
+                        type: 2,
+                        timestamp: Date.now()
+                    }, null, 2);
+                    break;
+                case 'button-stop1':
+                    topicInput.value = 'aquacross/button/00:00:00:00:00:03';
+                    payloadTextarea.value = JSON.stringify({
+                        type: 1,
+                        timestamp: Date.now()
+                    }, null, 2);
+                    break;
+                case 'button-start2':
+                    topicInput.value = 'aquacross/button/00:00:00:00:00:02';
+                    payloadTextarea.value = JSON.stringify({
+                        type: 2,
+                        timestamp: Date.now()
+                    }, null, 2);
+                    break;
+                case 'button-stop2':
+                    topicInput.value = 'aquacross/button/00:00:00:00:00:04';
+                    payloadTextarea.value = JSON.stringify({
+                        type: 1,
+                        timestamp: Date.now()
+                    }, null, 2);
+                    break;
+                case 'rfid-read':
+                    topicInput.value = 'aquacross/button/rfid/00:00:00:00:00:01';
+                    payloadTextarea.value = JSON.stringify({
+                        uid: 'TEST123456'
+                    }, null, 2);
+                    break;
+                case 'battery-update':
+                    topicInput.value = 'aquacross/battery/00:00:00:00:00:01';
+                    payloadTextarea.value = JSON.stringify({
+                        voltage: 3600
+                    }, null, 2);
+                    break;
+                case 'heartbeat':
+                    topicInput.value = 'heartbeat/alive/00:00:00:00:00:01';
+                    payloadTextarea.value = JSON.stringify({
+                        timestamp: Date.now()
+                    }, null, 2);
+                    break;
+                case 'button-available':
+                    topicInput.value = 'aquacross/button/status/00:00:00:00:00:01';
+                    payloadTextarea.value = JSON.stringify({
+                        available: true,
+                        sleep: false,
+                        timestamp: Date.now()
+                    }, null, 2);
+                    break;
+                case 'button-sleep':
+                    topicInput.value = 'aquacross/button/status/00:00:00:00:00:01';
+                    payloadTextarea.value = JSON.stringify({
+                        available: false,
+                        sleep: true,
+                        timestamp: Date.now()
+                    }, null, 2);
+                    break;
+            }
+
+            // Auto-publish
+            document.getElementById('mqtt-publish-btn').click();
+        });
+    });
+}
+
+// Helper Functions
+function updateStatus(elementId, text, connected) {
+    const element = document.getElementById(elementId);
+    element.textContent = text;
+    element.classList.remove('connected', 'disconnected');
+    element.classList.add(connected ? 'connected' : 'disconnected');
+}
+
+// Initialize on load
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+} else {
+    init();
+}

mock-server/debug_server/index.html

@@ -0,0 +1,139 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AquaMaster Debug Server</title>
+    <link rel="stylesheet" href="debug.css">
+</head>
+<body>
+    <div class="container">
+        <header>
+            <h1>AquaMaster Debug Server</h1>
+            <div class="status-bar">
+                <span id="mqtt-status" class="status-indicator">MQTT: Disconnected</span>
+                <span id="ws-status" class="status-indicator">WebSocket: Disconnected</span>
+                <span id="api-status" class="status-indicator">API: Ready</span>
+            </div>
+        </header>
+
+        <nav class="tabs">
+            <button class="tab-button active" data-tab="api">API Testing</button>
+            <button class="tab-button" data-tab="mqtt">MQTT Testing</button>
+            <button class="tab-button" data-tab="debug">Debug Endpoints</button>
+        </nav>
+
+        <!-- API Testing Tab -->
+        <div id="api-tab" class="tab-content active">
+            <div class="section">
+                <h2>API Endpoint Testing</h2>
+                <div class="form-group">
+                    <label for="api-endpoint">Endpoint:</label>
+                    <select id="api-endpoint">
+                        <option value="GET /api/data">GET /api/data</option>
+                        <option value="POST /api/reset-best">POST /api/reset-best</option>
+                        <option value="POST /api/unlearn-button">POST /api/unlearn-button</option>
+                        <option value="POST /api/set-max-time">POST /api/set-max-time</option>
+                        <option value="GET /api/get-settings">GET /api/get-settings</option>
+                        <option value="POST /api/start-learning">POST /api/start-learning</option>
+                        <option value="POST /api/stop-learning">POST /api/stop-learning</option>
+                        <option value="GET /api/learn/status">GET /api/learn/status</option>
+                        <option value="GET /api/buttons/status">GET /api/buttons/status</option>
+                        <option value="GET /api/info">GET /api/info</option>
+                        <option value="POST /api/set-wifi">POST /api/set-wifi</option>
+                        <option value="GET /api/get-wifi">GET /api/get-wifi</option>
+                        <option value="POST /api/set-location">POST /api/set-location</option>
+                        <option value="GET /api/get-location">GET /api/get-location</option>
+                        <option value="GET /api/updateButtons">GET /api/updateButtons</option>
+                        <option value="POST /api/set-mode">POST /api/set-mode</option>
+                        <option value="GET /api/get-mode">GET /api/get-mode</option>
+                        <option value="POST /api/set-lane-config">POST /api/set-lane-config</option>
+                        <option value="GET /api/get-lane-config">GET /api/get-lane-config</option>
+                    </select>
+                </div>
+                <div class="form-group">
+                    <label for="api-params">Parameters (JSON or form data):</label>
+                    <textarea id="api-params" rows="4" placeholder='{"maxTime": 300, "maxTimeDisplay": 20}'></textarea>
+                </div>
+                <button id="api-send-btn" class="btn btn-primary">Send Request</button>
+                <div class="response-section">
+                    <h3>Response:</h3>
+                    <pre id="api-response"></pre>
+                </div>
+            </div>
+        </div>
+
+        <!-- MQTT Testing Tab -->
+        <div id="mqtt-tab" class="tab-content">
+            <div class="section">
+                <h2>MQTT Publish</h2>
+                <div class="form-group">
+                    <label for="mqtt-topic">Topic:</label>
+                    <input type="text" id="mqtt-topic" placeholder="aquacross/button/00:00:00:00:00:01" value="aquacross/button/00:00:00:00:00:01">
+                </div>
+                <div class="form-group">
+                    <label for="mqtt-payload">Payload (JSON or text):</label>
+                    <textarea id="mqtt-payload" rows="4" placeholder='{"type": 2, "timestamp": 1234567890}'></textarea>
+                </div>
+                <button id="mqtt-publish-btn" class="btn btn-primary">Publish</button>
+
+                <div class="quick-actions">
+                    <h3>Quick Actions:</h3>
+                    <div class="button-group">
+                        <button class="btn btn-secondary" data-action="button-start1">Simulate Start1 Button</button>
+                        <button class="btn btn-secondary" data-action="button-stop1">Simulate Stop1 Button</button>
+                        <button class="btn btn-secondary" data-action="button-start2">Simulate Start2 Button</button>
+                        <button class="btn btn-secondary" data-action="button-stop2">Simulate Stop2 Button</button>
+                        <button class="btn btn-secondary" data-action="rfid-read">Simulate RFID Read</button>
+                        <button class="btn btn-secondary" data-action="battery-update">Simulate Battery Update</button>
+                        <button class="btn btn-secondary" data-action="heartbeat">Simulate Heartbeat</button>
+                        <button class="btn btn-secondary" data-action="button-available">Button Available (Wake)</button>
+                        <button class="btn btn-secondary" data-action="button-sleep">Button Sleep Mode</button>
+                    </div>
+                </div>
+            </div>
+
+            <div class="section">
+                <h2>MQTT Subscribe</h2>
+                <div class="form-group">
+                    <label for="mqtt-subscribe-topic">Topic Pattern:</label>
+                    <input type="text" id="mqtt-subscribe-topic" placeholder="# or aquacross/button/#" value="#">
+                </div>
+                <button id="mqtt-subscribe-btn" class="btn btn-primary">Subscribe</button>
+                <button id="mqtt-unsubscribe-btn" class="btn btn-secondary">Unsubscribe All</button>
+
+                <div class="messages-section">
+                    <h3>Received Messages:</h3>
+                    <div class="messages-controls">
+                        <button id="clear-messages-btn" class="btn btn-small">Clear</button>
+                        <label><input type="checkbox" id="auto-scroll" checked> Auto-scroll</label>
+                    </div>
+                    <div id="mqtt-messages" class="messages-container"></div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Debug Endpoints Tab -->
+        <div id="debug-tab" class="tab-content">
+            <div class="section">
+                <h2>Debug Endpoints</h2>
+                <p>Direct access to debug endpoints for timer control:</p>
+                <div class="button-group">
+                    <button class="btn btn-primary" data-debug="start1">Start Lane 1</button>
+                    <button class="btn btn-primary" data-debug="stop1">Stop Lane 1</button>
+                    <button class="btn btn-primary" data-debug="start2">Start Lane 2</button>
+                    <button class="btn btn-primary" data-debug="stop2">Stop Lane 2</button>
+                </div>
+                <div class="response-section">
+                    <h3>Last Response:</h3>
+                    <pre id="debug-response"></pre>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/mqtt@5/dist/mqtt.min.js"></script>
+    <script src="https://cdn.socket.io/4.6.1/socket.io.min.js"></script>
+    <script src="debug.js"></script>
+</body>
+</html>

mock-server/mock_esp32_server.js

@@ -0,0 +1,718 @@
+const express = require('express');
+const http = require('http');
+const socketIo = require('socket.io');
+const mqtt = require('mqtt');
+const cors = require('cors');
+const bodyParser = require('body-parser');
+const path = require('path');
+
+const app = express();
+const server = http.createServer(app);
+const io = socketIo(server, {
+  cors: {
+    origin: "*",
+    methods: ["GET", "POST"]
+  }
+});
+
+const PORT = 80;
+const MQTT_BROKER = 'mqtt://localhost:1883';
+
+// Middleware
+app.use(cors());
+app.use(bodyParser.urlencoded({ extended: true }));
+app.use(bodyParser.json());
+app.use(express.static(path.join(__dirname, 'debug_server')));
+
+// State - simuliert ESP32 Datenstrukturen
+const state = {
+  timerData1: {
+    startTime: 0,
+    localStartTime: 0,
+    finishedSince: 0,
+    endTime: 0,
+    bestTime: 0,
+    isRunning: false,
+    isReady: true,
+    isArmed: false,
+    RFIDUID: ""
+  },
+  timerData2: {
+    startTime: 0,
+    localStartTime: 0,
+    finishedSince: 0,
+    endTime: 0,
+    bestTime: 0,
+    isRunning: false,
+    isReady: true,
+    isArmed: false,
+    RFIDUID: ""
+  },
+  buttonConfigs: {
+    start1: { mac: [0, 0, 0, 0, 0, 0], isAssigned: false, voltage: 0, lastHeartbeat: 0, heartbeatActive: false },
+    stop1: { mac: [0, 0, 0, 0, 0, 0], isAssigned: false, voltage: 0, lastHeartbeat: 0, heartbeatActive: false },
+    start2: { mac: [0, 0, 0, 0, 0, 0], isAssigned: false, voltage: 0, lastHeartbeat: 0, heartbeatActive: false },
+    stop2: { mac: [0, 0, 0, 0, 0, 0], isAssigned: false, voltage: 0, lastHeartbeat: 0, heartbeatActive: false }
+  },
+  learningMode: false,
+  learningStep: 0,
+  maxTimeBeforeReset: 300000,
+  maxTimeDisplay: 20000,
+  minTimeForLeaderboard: 5000,
+  masterlocation: "",
+  gamemode: 0, // 0=Individual, 1=Wettkampf
+  startCompetition: false,
+  laneConfigType: 0,
+  lane1DifficultyType: 0,
+  lane2DifficultyType: 0,
+  localTimes: [],
+  wifi: {
+    ssid: "",
+    password: ""
+  },
+  start1FoundLocally: false,
+  start2FoundLocally: false,
+  start1UID: "",
+  start2UID: ""
+};
+
+// Helper: millis() - simuliert Arduino millis()
+function millis() {
+  return Date.now();
+}
+
+// Helper: getTimerDataJSON() - simuliert getTimerDataJSON()
+function getTimerDataJSON() {
+  const currentTime = millis();
+  const data = {};
+
+  // Lane 1
+  if (state.timerData1.isRunning) {
+    data.time1 = (currentTime - state.timerData1.localStartTime) / 1000.0;
+    data.status1 = "running";
+  } else if (state.timerData1.endTime > 0) {
+    data.time1 = (state.timerData1.endTime - state.timerData1.startTime) / 1000.0;
+    data.status1 = "finished";
+  } else if (state.timerData1.isArmed) {
+    data.time1 = 0;
+    data.status1 = "armed";
+  } else {
+    data.time1 = 0;
+    data.status1 = "ready";
+  }
+
+  // Lane 2
+  if (state.timerData2.isRunning) {
+    data.time2 = (currentTime - state.timerData2.localStartTime) / 1000.0;
+    data.status2 = "running";
+  } else if (state.timerData2.endTime > 0) {
+    data.time2 = (state.timerData2.endTime - state.timerData2.startTime) / 1000.0;
+    data.status2 = "finished";
+  } else if (state.timerData2.isArmed) {
+    data.time2 = 0;
+    data.status2 = "armed";
+  } else {
+    data.time2 = 0;
+    data.status2 = "ready";
+  }
+
+  // Best times
+  data.best1 = state.timerData1.bestTime / 1000.0;
+  data.best2 = state.timerData2.bestTime / 1000.0;
+
+  // Learning mode
+  data.learningMode = state.learningMode;
+  if (state.learningMode) {
+    const buttons = ["Start Bahn 1", "Stop Bahn 1", "Start Bahn 2", "Stop Bahn 2"];
+    data.learningButton = buttons[state.learningStep];
+  }
+
+  return JSON.stringify(data);
+}
+
+// Timer-Logik: IndividualMode
+function individualMode(action, press, lane, timestamp = 0) {
+  const ts = timestamp > 0 ? timestamp : millis();
+
+  if (action === "start" && press === 2 && lane === 1) {
+    if (!state.timerData1.isRunning && state.timerData1.isReady) {
+      state.timerData1.isReady = false;
+      state.timerData1.startTime = ts;
+      state.timerData1.localStartTime = millis();
+      state.timerData1.isRunning = true;
+      state.timerData1.endTime = 0;
+      state.timerData1.isArmed = false;
+      publishLaneStatus(1, "running");
+      console.log("Bahn 1 gestartet");
+    }
+  }
+
+  if (action === "stop" && press === 1 && lane === 1) {
+    if (state.timerData1.isRunning) {
+      state.timerData1.endTime = ts;
+      state.timerData1.finishedSince = millis();
+      state.timerData1.isRunning = false;
+      const currentTime = state.timerData1.endTime - state.timerData1.startTime;
+
+      if (state.timerData1.bestTime === 0 || currentTime < state.timerData1.bestTime) {
+        state.timerData1.bestTime = currentTime;
+      }
+      publishLaneStatus(1, "stopped");
+      console.log(`Bahn 1 gestoppt - Zeit: ${(currentTime / 1000.0).toFixed(2)}s`);
+    }
+  }
+
+  if (action === "start" && press === 2 && lane === 2) {
+    if (!state.timerData2.isRunning && state.timerData2.isReady) {
+      state.timerData2.isReady = false;
+      state.timerData2.startTime = ts;
+      state.timerData2.localStartTime = millis();
+      state.timerData2.isRunning = true;
+      state.timerData2.endTime = 0;
+      state.timerData2.isArmed = false;
+      publishLaneStatus(2, "running");
+      console.log("Bahn 2 gestartet");
+    }
+  }
+
+  if (action === "stop" && press === 1 && lane === 2) {
+    if (state.timerData2.isRunning) {
+      state.timerData2.endTime = ts;
+      state.timerData2.finishedSince = millis();
+      state.timerData2.isRunning = false;
+      const currentTime = state.timerData2.endTime - state.timerData2.startTime;
+
+      if (state.timerData2.bestTime === 0 || currentTime < state.timerData2.bestTime) {
+        state.timerData2.bestTime = currentTime;
+      }
+      publishLaneStatus(2, "stopped");
+      console.log(`Bahn 2 gestoppt - Zeit: ${(currentTime / 1000.0).toFixed(2)}s`);
+    }
+  }
+}
+
+// Helper: publishLaneStatus
+function publishLaneStatus(lane, status) {
+  if (mqttClient && mqttClient.connected) {
+    const topic = `aquacross/lanes/lane${lane}`;
+    const message = JSON.stringify({ lane, status });
+    mqttClient.publish(topic, message);
+  }
+}
+
+// Helper: pushUpdateToFrontend
+function pushUpdateToFrontend(message) {
+  io.emit('update', message);
+}
+
+// MQTT Client Setup
+let mqttClient = null;
+let mqttReconnectInterval = null;
+
+function connectMQTT() {
+  // Don't reconnect if already connected or connecting
+  if (mqttClient && (mqttClient.connected || mqttClient.connecting)) {
+    return;
+  }
+
+  // Clear any existing reconnect interval
+  if (mqttReconnectInterval) {
+    clearInterval(mqttReconnectInterval);
+    mqttReconnectInterval = null;
+  }
+
+  // Close existing client if any
+  if (mqttClient) {
+    mqttClient.end(true);
+  }
+
+  console.log('[MQTT] Attempting to connect to broker at', MQTT_BROKER);
+  mqttClient = mqtt.connect(MQTT_BROKER, {
+    reconnectPeriod: 5000,
+    connectTimeout: 10000,
+    clientId: 'mock-esp32-' + Math.random().toString(16).substr(2, 8)
+  });
+
+  mqttClient.on('connect', () => {
+    console.log('[MQTT] Connected to broker');
+    
+    // Subscribe to all relevant topics
+    mqttClient.subscribe('aquacross/button/#', (err) => {
+      if (!err) console.log('[MQTT] Subscribed to aquacross/button/#');
+    });
+    mqttClient.subscribe('aquacross/button/rfid/#', (err) => {
+      if (!err) console.log('[MQTT] Subscribed to aquacross/button/rfid/#');
+    });
+    mqttClient.subscribe('aquacross/battery/#', (err) => {
+      if (!err) console.log('[MQTT] Subscribed to aquacross/battery/#');
+    });
+    mqttClient.subscribe('heartbeat/alive/#', (err) => {
+      if (!err) console.log('[MQTT] Subscribed to heartbeat/alive/#');
+    });
+    mqttClient.subscribe('aquacross/competition/toMaster', (err) => {
+      if (!err) console.log('[MQTT] Subscribed to aquacross/competition/toMaster');
+    });
+    mqttClient.subscribe('aquacross/button/status/#', (err) => {
+      if (!err) console.log('[MQTT] Subscribed to aquacross/button/status/#');
+    });
+  });
+
+  mqttClient.on('message', (topic, message) => {
+    const payload = message.toString();
+    console.log(`[MQTT] Received on ${topic}: ${payload}`);
+
+    // Handle different topic types
+    if (topic.startsWith('aquacross/button/rfid/')) {
+      handleRFIDTopic(topic, payload);
+    } else if (topic.startsWith('aquacross/button/status/')) {
+      handleButtonStatusTopic(topic, payload);
+    } else if (topic.startsWith('aquacross/button/')) {
+      handleButtonTopic(topic, payload);
+    } else if (topic.startsWith('aquacross/battery/')) {
+      handleBatteryTopic(topic, payload);
+    } else if (topic.startsWith('heartbeat/alive/')) {
+      handleHeartbeatTopic(topic, payload);
+    } else if (topic === 'aquacross/competition/toMaster') {
+      if (payload === 'start') {
+        state.startCompetition = true;
+        runCompetition();
+      }
+    }
+  });
+
+  mqttClient.on('error', (err) => {
+    console.error('[MQTT] Error:', err.message || err);
+    if (err.code === 'ECONNREFUSED') {
+      console.log('[MQTT] Broker not available at', MQTT_BROKER, '- will retry automatically');
+    }
+  });
+
+  mqttClient.on('close', () => {
+    console.log('[MQTT] Connection closed');
+  });
+
+  mqttClient.on('offline', () => {
+    console.log('[MQTT] Client offline, will reconnect automatically...');
+  });
+
+  mqttClient.on('reconnect', () => {
+    console.log('[MQTT] Reconnecting to broker...');
+  });
+}
+
+// MQTT Topic Handlers
+function handleButtonTopic(topic, payload) {
+  try {
+    const buttonId = topic.replace('aquacross/button/', '');
+    const data = JSON.parse(payload);
+    const pressType = data.type || 0;
+    const timestamp = data.timestamp || millis();
+
+    console.log(`Button Press: ${buttonId}, Type: ${pressType}, Timestamp: ${timestamp}`);
+
+    // Simulate button assignment check (simplified)
+    // In real implementation, would check MAC addresses
+    if (state.learningMode) {
+      // Handle learning mode
+      return;
+    }
+
+    // Trigger action based on button (simplified - would check MAC in real implementation)
+    if (pressType === 2) {
+      // Start button
+      if (buttonId.includes('start1') || buttonId.includes('00:00:00:00:00:01')) {
+        individualMode("start", 2, 1, timestamp);
+      } else if (buttonId.includes('start2') || buttonId.includes('00:00:00:00:00:02')) {
+        individualMode("start", 2, 2, timestamp);
+      }
+    } else if (pressType === 1) {
+      // Stop button
+      if (buttonId.includes('stop1') || buttonId.includes('00:00:00:00:00:03')) {
+        individualMode("stop", 1, 1, timestamp);
+      } else if (buttonId.includes('stop2') || buttonId.includes('00:00:00:00:00:04')) {
+        individualMode("stop", 1, 2, timestamp);
+      }
+    }
+  } catch (err) {
+    console.error('Error handling button topic:', err);
+  }
+}
+
+function handleRFIDTopic(topic, payload) {
+  try {
+    const buttonId = topic.replace('aquacross/button/rfid/', '');
+    const data = JSON.parse(payload);
+    const uid = data.uid || '';
+
+    console.log(`RFID Read: ${buttonId}, UID: ${uid}`);
+
+    // Send to frontend
+    const message = JSON.stringify({
+      name: uid,
+      lane: buttonId.includes('start1') ? 'start1' : 'start2'
+    });
+    pushUpdateToFrontend(message);
+  } catch (err) {
+    console.error('Error handling RFID topic:', err);
+  }
+}
+
+function handleBatteryTopic(topic, payload) {
+  try {
+    const buttonId = topic.replace('aquacross/battery/', '');
+    const data = JSON.parse(payload);
+    const voltage = data.voltage || 0;
+
+    console.log(`Battery: ${buttonId}, Voltage: ${voltage}`);
+
+    // Update button config if known
+    // Send to frontend
+    const message = JSON.stringify({
+      button: buttonId,
+      mac: buttonId,
+      batteryLevel: Math.round((voltage - 3200) / 50) // Simple calculation
+    });
+    pushUpdateToFrontend(message);
+  } catch (err) {
+    console.error('Error handling battery topic:', err);
+  }
+}
+
+function handleHeartbeatTopic(topic, payload) {
+  try {
+    const buttonId = topic.replace('heartbeat/alive/', '');
+    console.log(`Heartbeat: ${buttonId}`);
+
+    // Update button heartbeat
+    // Send to frontend
+    const message = JSON.stringify({
+      button: buttonId,
+      mac: buttonId,
+      active: true
+    });
+    pushUpdateToFrontend(message);
+  } catch (err) {
+    console.error('Error handling heartbeat topic:', err);
+  }
+}
+
+function handleButtonStatusTopic(topic, payload) {
+  try {
+    const buttonId = topic.replace('aquacross/button/status/', '');
+    const data = JSON.parse(payload);
+    const available = data.available !== false;
+    const sleep = data.sleep === true;
+
+    console.log(`Button Status: ${buttonId}, Available: ${available}, Sleep: ${sleep}`);
+
+    // Send to frontend
+    const message = JSON.stringify({
+      button: buttonId,
+      mac: buttonId,
+      available: available,
+      sleep: sleep,
+      timestamp: data.timestamp || Date.now()
+    });
+    pushUpdateToFrontend(message);
+  } catch (err) {
+    console.error('Error handling button status topic:', err);
+  }
+}
+
+function runCompetition() {
+  if (state.timerData1.isArmed && state.timerData2.isArmed && state.startCompetition) {
+    const startNow = millis();
+    
+    state.timerData1.isReady = false;
+    state.timerData1.startTime = startNow;
+    state.timerData1.localStartTime = millis();
+    state.timerData1.isRunning = true;
+    state.timerData1.endTime = 0;
+    state.timerData1.isArmed = false;
+    publishLaneStatus(1, "running");
+
+    state.timerData2.isReady = false;
+    state.timerData2.startTime = startNow;
+    state.timerData2.localStartTime = millis();
+    state.timerData2.isRunning = true;
+    state.timerData2.endTime = 0;
+    state.timerData2.isArmed = false;
+    publishLaneStatus(2, "running");
+
+    console.log("Competition started");
+  }
+}
+
+// API Routes
+app.get('/api/data', (req, res) => {
+  res.json(JSON.parse(getTimerDataJSON()));
+});
+
+app.post('/api/reset-best', (req, res) => {
+  state.timerData1.bestTime = 0;
+  state.timerData2.bestTime = 0;
+  state.localTimes = [];
+  res.json({ success: true });
+});
+
+app.post('/api/unlearn-button', (req, res) => {
+  state.buttonConfigs.start1.isAssigned = false;
+  state.buttonConfigs.stop1.isAssigned = false;
+  state.buttonConfigs.start2.isAssigned = false;
+  state.buttonConfigs.stop2.isAssigned = false;
+  res.json({ success: true });
+});
+
+app.post('/api/set-max-time', (req, res) => {
+  if (req.body.maxTime) {
+    state.maxTimeBeforeReset = parseInt(req.body.maxTime) * 1000;
+  }
+  if (req.body.maxTimeDisplay) {
+    state.maxTimeDisplay = parseInt(req.body.maxTimeDisplay) * 1000;
+  }
+  if (req.body.minTimeForLeaderboard) {
+    state.minTimeForLeaderboard = parseInt(req.body.minTimeForLeaderboard) * 1000;
+  }
+  res.json({ success: true });
+});
+
+app.get('/api/get-settings', (req, res) => {
+  res.json({
+    maxTime: state.maxTimeBeforeReset / 1000,
+    maxTimeDisplay: state.maxTimeDisplay / 1000,
+    minTimeForLeaderboard: state.minTimeForLeaderboard / 1000
+  });
+});
+
+app.post('/api/start-learning', (req, res) => {
+  state.learningMode = true;
+  state.learningStep = 0;
+  res.json({ success: true });
+});
+
+app.post('/api/stop-learning', (req, res) => {
+  state.learningMode = false;
+  state.learningStep = 0;
+  res.json({ success: true });
+});
+
+app.get('/api/learn/status', (req, res) => {
+  res.json({
+    active: state.learningMode,
+    step: state.learningStep
+  });
+});
+
+app.get('/api/buttons/status', (req, res) => {
+  res.json({
+    lane1Start: state.buttonConfigs.start1.isAssigned,
+    lane1StartVoltage: state.buttonConfigs.start1.voltage,
+    lane1Stop: state.buttonConfigs.stop1.isAssigned,
+    lane1StopVoltage: state.buttonConfigs.stop1.voltage,
+    lane2Start: state.buttonConfigs.start2.isAssigned,
+    lane2StartVoltage: state.buttonConfigs.start2.voltage,
+    lane2Stop: state.buttonConfigs.stop2.isAssigned,
+    lane2StopVoltage: state.buttonConfigs.stop2.voltage
+  });
+});
+
+app.get('/api/info', (req, res) => {
+  const connected = [
+    state.buttonConfigs.start1.isAssigned,
+    state.buttonConfigs.stop1.isAssigned,
+    state.buttonConfigs.start2.isAssigned,
+    state.buttonConfigs.stop2.isAssigned
+  ].filter(Boolean).length;
+
+  res.json({
+    ip: "127.0.0.1",
+    ipSTA: "127.0.0.1",
+    channel: 1,
+    mac: "AA:BB:CC:DD:EE:FF",
+    freeMemory: 1024 * 1024,
+    connectedButtons: connected,
+    isOnline: true,
+    valid: "Ja",
+    tier: 1
+  });
+});
+
+app.post('/api/set-wifi', (req, res) => {
+  if (req.body.ssid) {
+    state.wifi.ssid = req.body.ssid;
+    state.wifi.password = req.body.password || "";
+    res.json({ success: true });
+  } else {
+    res.status(400).json({ success: false, error: "SSID fehlt" });
+  }
+});
+
+app.get('/api/get-wifi', (req, res) => {
+  res.json({
+    ssid: state.wifi.ssid,
+    password: state.wifi.password
+  });
+});
+
+app.post('/api/set-location', (req, res) => {
+  if (req.body.name) {
+    state.masterlocation = req.body.name;
+  }
+  res.json({ success: true });
+});
+
+app.get('/api/get-location', (req, res) => {
+  res.json({
+    locationid: state.masterlocation
+  });
+});
+
+app.get('/api/updateButtons', (req, res) => {
+  if (mqttClient && mqttClient.connected) {
+    mqttClient.publish('aquacross/update/flag', '1');
+  }
+  res.json({ success: true });
+});
+
+app.post('/api/set-mode', (req, res) => {
+  if (req.body.mode) {
+    state.gamemode = req.body.mode === "individual" ? 0 : 1;
+    res.json({ success: true });
+  } else {
+    res.status(400).json({ success: false, error: "Modus fehlt" });
+  }
+});
+
+app.get('/api/get-mode', (req, res) => {
+  res.json({
+    mode: state.gamemode === 0 ? "individual" : "wettkampf"
+  });
+});
+
+app.post('/api/set-lane-config', (req, res) => {
+  if (req.body.type) {
+    state.laneConfigType = req.body.type === "identical" ? 0 : 1;
+    if (state.laneConfigType === 1) {
+      if (req.body.lane1Difficulty) {
+        state.lane1DifficultyType = req.body.lane1Difficulty === "light" ? 0 : 1;
+      }
+      if (req.body.lane2Difficulty) {
+        state.lane2DifficultyType = req.body.lane2Difficulty === "light" ? 0 : 1;
+      }
+    }
+    res.json({ success: true });
+  } else {
+    res.status(400).json({ success: false, error: "Lane type missing" });
+  }
+});
+
+app.get('/api/get-lane-config', (req, res) => {
+  const config = {
+    type: state.laneConfigType === 0 ? "identical" : "different"
+  };
+  if (state.laneConfigType === 1) {
+    config.lane1Difficulty = state.lane1DifficultyType === 0 ? "light" : "heavy";
+    config.lane2Difficulty = state.lane2DifficultyType === 0 ? "light" : "heavy";
+  }
+  res.json(config);
+});
+
+// Debug Endpoints
+app.get('/api/debug/start1', (req, res) => {
+  individualMode("start", 2, 1, millis());
+  res.send("handleStart1() called");
+});
+
+app.get('/api/debug/stop1', (req, res) => {
+  individualMode("stop", 1, 1, millis());
+  res.send("handleStop1() called");
+});
+
+app.get('/api/debug/start2', (req, res) => {
+  individualMode("start", 2, 2, millis());
+  res.send("handleStart2() called");
+});
+
+app.get('/api/debug/stop2', (req, res) => {
+  individualMode("stop", 1, 2, millis());
+  res.send("handleStop2() called");
+});
+
+// WebSocket Setup
+io.on('connection', (socket) => {
+  console.log(`[WebSocket] Client connected: ${socket.id}`);
+
+  socket.on('disconnect', () => {
+    console.log(`[WebSocket] Client disconnected: ${socket.id}`);
+  });
+});
+
+// Time sync - publish every 5 seconds
+setInterval(() => {
+  if (mqttClient && mqttClient.connected) {
+    mqttClient.publish('sync/time', millis().toString());
+  }
+}, 5000);
+
+// Auto-reset check
+setInterval(() => {
+  const currentTime = millis();
+  
+  if (state.gamemode === 0) {
+    // Individual mode
+    if (!state.timerData1.isRunning && state.timerData1.endTime > 0 && 
+        state.timerData1.finishedSince > 0) {
+      if (currentTime - state.timerData1.finishedSince > state.maxTimeDisplay) {
+        state.timerData1.startTime = 0;
+        state.timerData1.endTime = 0;
+        state.timerData1.finishedSince = 0;
+        state.timerData1.isReady = true;
+        publishLaneStatus(1, "ready");
+      }
+    }
+    if (!state.timerData2.isRunning && state.timerData2.endTime > 0 && 
+        state.timerData2.finishedSince > 0) {
+      if (currentTime - state.timerData2.finishedSince > state.maxTimeDisplay) {
+        state.timerData2.startTime = 0;
+        state.timerData2.endTime = 0;
+        state.timerData2.finishedSince = 0;
+        state.timerData2.isReady = true;
+        publishLaneStatus(2, "ready");
+      }
+    }
+  }
+}, 1000);
+
+// Start server
+server.listen(PORT, () => {
+  console.log(`[Server] Mock ESP32 Server running on port ${PORT}`);
+  console.log(`[Server] Web UI available at http://localhost:${PORT}`);
+  
+  // Wait a moment before trying to connect to MQTT broker
+  // This gives the broker time to start if both are started together
+  setTimeout(() => {
+    console.log('[MQTT] Attempting initial connection to broker...');
+    connectMQTT();
+  }, 2000);
+  
+  // Also set up a periodic check (backup retry mechanism)
+  // Note: mqtt.js already has auto-reconnect, this is just a backup
+  mqttReconnectInterval = setInterval(() => {
+    if (!mqttClient || (!mqttClient.connected && !mqttClient.connecting)) {
+      console.log('[MQTT] Connection check: Not connected, attempting reconnect...');
+      connectMQTT();
+    }
+  }, 15000); // Check every 15 seconds if not connected
+});
+
+// Graceful shutdown
+process.on('SIGINT', () => {
+  console.log('\n[Server] Shutting down...');
+  if (mqttClient) {
+    mqttClient.end();
+  }
+  server.close(() => {
+    console.log('[Server] Server closed');
+    process.exit(0);
+  });
+});

mock-server/mqtt_broker.js

@@ -0,0 +1,108 @@
+const aedes = require('aedes')();
+const net = require('net');
+const ws = require('ws');
+const http = require('http');
+const port = 1883;
+const wsPort = 9001;
+
+// TCP Server for MQTT
+const server = net.createServer(aedes.handle);
+
+// Logging für alle Nachrichten
+aedes.on('publish', (packet, client) => {
+  if (client) {
+    console.log(`[MQTT] Client ${client.id} published to topic: ${packet.topic}`);
+    console.log(`[MQTT] Payload: ${packet.payload.toString()}`);
+  } else {
+    console.log(`[MQTT] Published to topic: ${packet.topic}`);
+    console.log(`[MQTT] Payload: ${packet.payload.toString()}`);
+  }
+});
+
+// Client-Verbindungen
+aedes.on('client', (client) => {
+  console.log(`[MQTT] Client connected: ${client.id}`);
+});
+
+aedes.on('clientDisconnect', (client) => {
+  console.log(`[MQTT] Client disconnected: ${client.id}`);
+});
+
+// Fehlerbehandlung
+aedes.on('clientError', (client, err) => {
+  console.error(`[MQTT] Client error for ${client.id}:`, err);
+});
+
+// WebSocket Server for browser connections
+const httpServer = http.createServer();
+const wsServer = new ws.Server({ 
+  server: httpServer,
+  path: '/mqtt'
+});
+
+wsServer.on('connection', (socket, req) => {
+  // Create a proper stream adapter for Aedes
+  const { Duplex } = require('stream');
+  
+  const stream = new Duplex({
+    write(chunk, encoding, callback) {
+      if (socket.readyState === ws.OPEN) {
+        socket.send(chunk);
+        callback();
+      } else {
+        callback(new Error('WebSocket is not open'));
+      }
+    },
+    read() {
+      // No-op: we push data when we receive it
+    }
+  });
+
+  // Handle incoming WebSocket messages
+  socket.on('message', (data) => {
+    stream.push(data);
+  });
+
+  socket.on('error', (err) => {
+    console.error('[MQTT] WebSocket error:', err);
+    stream.destroy(err);
+  });
+
+  socket.on('close', () => {
+    console.log('[MQTT] WebSocket client disconnected');
+    stream.push(null); // End the stream
+  });
+
+  // Handle stream errors
+  stream.on('error', (err) => {
+    console.error('[MQTT] Stream error:', err);
+    if (socket.readyState === ws.OPEN) {
+      socket.close();
+    }
+  });
+
+  // Pass the stream to Aedes
+  aedes.handle(stream);
+});
+
+server.listen(port, () => {
+  console.log(`[MQTT] TCP Broker started and listening on port ${port}`);
+  console.log(`[MQTT] Ready to accept TCP connections`);
+});
+
+httpServer.listen(wsPort, () => {
+  console.log(`[MQTT] WebSocket Broker started and listening on port ${wsPort}`);
+  console.log(`[MQTT] Ready to accept WebSocket connections at ws://localhost:${wsPort}/mqtt`);
+});
+
+// Graceful shutdown
+process.on('SIGINT', () => {
+  console.log('\n[MQTT] Shutting down broker...');
+  server.close(() => {
+    console.log('[MQTT] TCP server closed');
+  });
+  httpServer.close(() => {
+    console.log('[MQTT] WebSocket server closed');
+    process.exit(0);
+  });
+});

mock-server/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "aquamaster-mock-server",
+  "version": "1.0.0",
+  "description": "Mock ESP32 Server and MQTT Broker for testing AquaMaster without hardware",
+  "main": "start_all.js",
+  "scripts": {
+    "start": "node start_all.js",
+    "mqtt": "node mqtt_broker.js",
+    "server": "node mock_esp32_server.js"
+  },
+  "keywords": [
+    "mqtt",
+    "esp32",
+    "mock",
+    "testing"
+  ],
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "aedes": "^0.50.0",
+    "express": "^4.18.2",
+    "socket.io": "^4.6.1",
+    "mqtt": "^5.3.1",
+    "cors": "^2.8.5",
+    "body-parser": "^1.20.2",
+    "ws": "^8.14.2"
+  }
+}

mock-server/start_all.js

@@ -0,0 +1,47 @@
+const { spawn } = require('child_process');
+const path = require('path');
+
+console.log('Starting AquaMaster Mock Server...\n');
+
+// Start MQTT Broker
+console.log('[1/2] Starting MQTT Broker...');
+const mqttBroker = spawn('node', [path.join(__dirname, 'mqtt_broker.js')], {
+  stdio: 'inherit',
+  cwd: __dirname
+});
+
+mqttBroker.on('error', (err) => {
+  console.error('Failed to start MQTT Broker:', err);
+  process.exit(1);
+});
+
+// Wait a bit longer for MQTT broker to fully start
+setTimeout(() => {
+  // Start Mock ESP32 Server
+  console.log('[2/2] Starting Mock ESP32 Server...');
+  const mockServer = spawn('node', [path.join(__dirname, 'mock_esp32_server.js')], {
+    stdio: 'inherit',
+    cwd: __dirname
+  });
+
+  mockServer.on('error', (err) => {
+    console.error('Failed to start Mock ESP32 Server:', err);
+    mqttBroker.kill();
+    process.exit(1);
+  });
+
+  // Handle shutdown
+  const shutdown = () => {
+    console.log('\nShutting down servers...');
+    if (mqttBroker && !mqttBroker.killed) {
+      mqttBroker.kill();
+    }
+    if (mockServer && !mockServer.killed) {
+      mockServer.kill();
+    }
+    process.exit(0);
+  };
+
+  process.on('SIGINT', shutdown);
+  process.on('SIGTERM', shutdown);
+}, 3000); // Increased wait time to 3 seconds