Lane difficulty added

2025-09-11 13:56:07 +02:00
parent 3aac843736
commit 4f0fc68d41
7 changed files with 279 additions and 1 deletions
--- a/data/index.html
+++ b/data/index.html
@@ -98,6 +98,11 @@
      let name1 = "";
      let name2 = "";

+      // Lane Configuration
+      let laneConfigType = 0; // 0=Identical, 1=Different
+      let lane1DifficultyType = 0; // 0=Light, 1=Heavy
+      let lane2DifficultyType = 0; // 0=Light, 1=Heavy
+
      // Batterie-Banner State
      let lowBatteryDevices = new Set();
      let batteryBannerDismissed = false;
@@ -467,6 +472,40 @@
          );
      }

+      function loadLaneConfig() {
+        fetch("/api/get-lane-config")
+          .then((response) => response.json())
+          .then((data) => {
+            laneConfigType = data.type === "different" ? 1 : 0;
+            lane1DifficultyType = data.lane1Difficulty === "heavy" ? 1 : 0;
+            lane2DifficultyType = data.lane2Difficulty === "heavy" ? 1 : 0;
+            updateLaneDisplay();
+          })
+          .catch((error) =>
+            console.error("Fehler beim Laden der Lane-Schwierigkeits-Konfiguration:", error)
+          );
+      }
+
+      function updateLaneDisplay() {
+        const lane1Title = document.querySelector('.lane h2');
+        const lane2Title = document.querySelectorAll('.lane h2')[1];
+        
+        if (laneConfigType === 0) {
+          // Identische Lanes
+          lane1Title.textContent = "🏊‍♀️ Bahn 1";
+          lane2Title.textContent = "🏊‍♂️ Bahn 2";
+        } else {
+          // Unterschiedliche Lanes
+          const lane1Icon = lane1DifficultyType === 0 ? "🟢" : "🔴";
+          const lane2Icon = lane2DifficultyType === 0 ? "🟢" : "🔴";
+          const lane1Difficulty = lane1DifficultyType === 0 ? "Leicht" : "Schwer";
+          const lane2Difficulty = lane2DifficultyType === 0 ? "Leicht" : "Schwer";
+          
+          lane1Title.textContent = `${lane1Icon} Bahn 1 (${lane1Difficulty})`;
+          lane2Title.textContent = `${lane2Icon} Bahn 2 (${lane2Difficulty})`;
+        }
+      }
+
      // Sync with backend every 1 second
      setInterval(syncFromBackend, 1000);

@@ -490,6 +529,7 @@

      // Initial load
      syncFromBackend();
+      loadLaneConfig();
    </script>
  </body>
 </html>
--- a/data/settings.css
+++ b/data/settings.css
@@ -274,6 +274,30 @@
        border-right: 1px solid #e9ecef;
      }

+      /* Lane Difficulty Selection Styles */
+      .lane-difficulty-selection {
+        margin-top: 20px;
+        padding: 20px;
+        background: rgba(73, 186, 228, 0.1);
+        border-radius: 12px;
+        border: 2px solid rgba(73, 186, 228, 0.2);
+      }
+
+      .lane-difficulty-selection .form-group {
+        margin-bottom: 25px;
+      }
+
+      .lane-difficulty-selection .form-group:last-child {
+        margin-bottom: 0;
+      }
+
+      .lane-difficulty-selection label {
+        font-weight: 600;
+        color: #223c83;
+        margin-bottom: 12px;
+        display: block;
+      }
+
      .restriction-notice {
        background: #fff3cd;
        color: #856404;
--- a/data/settings.html
+++ b/data/settings.html
@@ -101,6 +101,55 @@
          </form>
        </div>

+        <!-- Lane Configuration Section -->
+        <div class="section">
+          <h2>🏊‍♀️ Lane-Konfiguration</h2>
+          <form id="laneForm">
+            <div class="form-group">
+              <label>Lane-Typ auswählen:</label>
+              <div class="mode-toggle">
+                <button type="button" class="mode-button active" data-lane-type="identical" onclick="selectLaneType('identical')">
+                  ⚖️ Identische Lanes
+                </button>
+                <button type="button" class="mode-button" data-lane-type="different" onclick="selectLaneType('different')">
+                  ⚡ Unterschiedliche Lanes
+                </button>
+              </div>
+            </div>
+            
+            <div id="laneDifficultySelection" class="lane-difficulty-selection" style="display: none;">
+              <div class="form-group">
+                <label>Lane 1 Schwierigkeit:</label>
+                <div class="mode-toggle">
+                    <button type="button" class="mode-button active" data-lane="1" data-difficulty="light" onclick="selectLaneDifficulty(1, 'light')">
+                      🟢 Leicht
+                    </button>
+                    <button type="button" class="mode-button" data-lane="1" data-difficulty="heavy" onclick="selectLaneDifficulty(1, 'heavy')">
+                      🔴 Schwer
+                    </button>
+                </div>
+              </div>
+              
+              <div class="form-group">
+                <label>Lane 2 Schwierigkeit:</label>
+                <div class="mode-toggle">
+                    <button type="button" class="mode-button active" data-lane="2" data-difficulty="light" onclick="selectLaneDifficulty(2, 'light')">
+                      🟢 Leicht
+                    </button>
+                    <button type="button" class="mode-button" data-lane="2" data-difficulty="heavy" onclick="selectLaneDifficulty(2, 'heavy')">
+                      🔴 Schwer
+                    </button>
+                </div>
+              </div>
+            </div>
+            
+            <div class="button-group">
+              <button type="submit" class="btn btn-primary">
+                💾 Lane-Konfiguration speichern
+              </button>
+            </div>
+          </form>
+        </div>

        <!-- Basic Settings Section -->
        <div class="section">
@@ -357,6 +406,7 @@
        updateCurrentTimeDisplay();
        loadWifiSettings();
        loadMode();
+        loadLaneConfig();
      };

      // Aktuelle Zeit anzeigen (Live-Update)
@@ -554,6 +604,110 @@
    });
 }

+      // Lane Type selection function
+      function selectLaneType(type) {
+        // Remove active class from all lane type buttons
+        document.querySelectorAll('[data-lane-type]').forEach(button => {
+          button.classList.remove('active');
+        });
+        
+        // Add active class to selected button
+        document.querySelector(`[data-lane-type="${type}"]`).classList.add('active');
+        
+        // Show/hide lane difficulty selection
+        const difficultySelection = document.getElementById('laneDifficultySelection');
+        if (type === 'different') {
+          difficultySelection.style.display = 'block';
+        } else {
+          difficultySelection.style.display = 'none';
+        }
+      }
+      
+      // Lane Difficulty selection function
+      function selectLaneDifficulty(lane, difficulty) {
+        // Remove active class from all buttons for this lane
+        document.querySelectorAll(`[data-lane="${lane}"]`).forEach(button => {
+          button.classList.remove('active');
+        });
+        
+        // Add active class to selected button
+        document.querySelector(`[data-lane="${lane}"][data-difficulty="${difficulty}"]`).classList.add('active');
+      }
+      
+      // Lane form handler
+      document.getElementById('laneForm').addEventListener('submit', function(e) {
+        e.preventDefault();
+        
+        const activeLaneTypeButton = document.querySelector('[data-lane-type].active');
+        const laneType = activeLaneTypeButton ? activeLaneTypeButton.getAttribute('data-lane-type') : 'identical';
+        
+        let laneConfig = {
+          type: laneType
+        };
+        
+        if (laneType === 'different') {
+          const lane1Difficulty = document.querySelector('[data-lane="1"].active')?.getAttribute('data-difficulty') || 'light';
+          const lane2Difficulty = document.querySelector('[data-lane="2"].active')?.getAttribute('data-difficulty') || 'light';
+          
+          laneConfig.lane1Difficulty = lane1Difficulty;
+          laneConfig.lane2Difficulty = lane2Difficulty;
+        }
+        
+        fetch('/api/set-lane-config', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify(laneConfig)
+        })
+        .then(response => response.json())
+        .then(data => {
+          if (data.success) {
+            showMessage('Lane-Schwierigkeits-Konfiguration erfolgreich gespeichert!', 'success');
+          } else {
+            showMessage('Fehler beim Speichern der Lane-Schwierigkeits-Konfiguration', 'error');
+          }
+        })
+        .catch(error => showMessage('Verbindungsfehler', 'error'));
+      });
+      
+      function loadLaneConfig() {
+        fetch("/api/get-lane-config")
+         .then((response) => response.json())
+         .then((data) => {
+            const laneType = data.type || "identical";
+            const lane1Difficulty = data.lane1Difficulty || "light";
+            const lane2Difficulty = data.lane2Difficulty || "light";
+            
+            // Set lane type
+            document.querySelectorAll('[data-lane-type]').forEach(button => {
+              button.classList.remove('active');
+            });
+            const laneTypeBtn = document.querySelector(`[data-lane-type="${laneType}"]`);
+            if (laneTypeBtn) laneTypeBtn.classList.add('active');
+            
+            // Set lane difficulties
+            document.querySelectorAll('[data-lane]').forEach(button => {
+              button.classList.remove('active');
+            });
+            const lane1Btn = document.querySelector(`[data-lane="1"][data-difficulty="${lane1Difficulty}"]`);
+            const lane2Btn = document.querySelector(`[data-lane="2"][data-difficulty="${lane2Difficulty}"]`);
+            if (lane1Btn) lane1Btn.classList.add('active');
+            if (lane2Btn) lane2Btn.classList.add('active');
+            
+            // Show/hide difficulty selection
+            const difficultySelection = document.getElementById('laneDifficultySelection');
+            if (laneType === 'different') {
+              difficultySelection.style.display = 'block';
+            } else {
+              difficultySelection.style.display = 'none';
+            }
+          })
+        .catch((error) => {
+          showMessage("Fehler beim Laden der Lane-Schwierigkeits-Konfiguration", "error");
+        });
+      }
+

      // Einstellungen laden
      function loadSettings() {