route lengths, edit saved routs, ui visibility toggle

src/UIManager.js

@@ -5,8 +5,10 @@ export class UIManager {
     // DOM Elements
     this.elCurrentLength = document.getElementById('current-length');
     this.elRouteList = document.getElementById('route-list');
+    this.elContainer = document.getElementById('ui-container');
     this.btnSave = document.getElementById('btn-save');
     this.btnDiscard = document.getElementById('btn-discard');
+    this.btnToggle = document.getElementById('ui-toggle');
 
     this.initListeners();
   }
@@ -22,14 +24,14 @@ export class UIManager {
       this.routeManager.clearCurrentRoute();
       this.updateStats(0);
     });
+
+    // Toggle Logic
+    this.btnToggle.addEventListener('click', () => {
+      this.elContainer.classList.toggle('hidden');
+    });
   }
 
-  /**
-   * Updates the text display for current route length
-   * @param {number} lengthInMeters 
-   */
   updateStats(lengthInMeters) {
-    // Format: If > 1000m, show km. Else meters.
     let text = "";
     if (lengthInMeters > 1000) {
       text = (lengthInMeters / 1000).toFixed(2) + " km";
@@ -46,24 +48,35 @@ export class UIManager {
     routes.forEach((route, index) => {
       const li = document.createElement('li');
 
-      // Format Length
       let lenStr = route.length > 1000
         ? (route.length / 1000).toFixed(2) + " km"
         : Math.round(route.length) + " m";
 
-      li.innerHTML = `
-                <span><strong>Route ${index + 1}</strong> (${lenStr})</span>
-            `;
+      // Create Label
+      const span = document.createElement('span');
+      span.innerHTML = `<strong>Route ${index + 1}</strong> (${lenStr})`;
+      li.appendChild(span);
+
+      // Edit Button
+      const btnEdit = document.createElement('button');
+      btnEdit.textContent = "Edit";
+      btnEdit.className = "btn-icon btn-edit";
+      btnEdit.onclick = () => {
+        this.routeManager.editSavedRoute(index);
+        this.renderRouteList(); // Re-render to remove it from list
+      };
+      li.appendChild(btnEdit);
 
       // Delete Button
       const btnDel = document.createElement('button');
       btnDel.textContent = "✕";
+      btnDel.className = "btn-icon btn-del";
       btnDel.onclick = () => {
         this.routeManager.deleteSavedRoute(index);
         this.renderRouteList();
       };
-
       li.appendChild(btnDel);
+
       this.elRouteList.appendChild(li);
     });
   }