Robot.json auf WebPage

public/app.js

@@ -86,14 +86,100 @@ document.addEventListener('DOMContentLoaded', function() {
     }
 
 
+    // ── Robot.json + History ─────────────────────────────────────────────────
+
+    let robotJsonActive = 'current';
+
+    function renderJsonTree(data, container) {
+        container.innerHTML = '';
+        const tree = document.createElement('div');
+        tree.className = 'json-tree';
+        for (const [key, value] of Object.entries(data)) {
+            if (value !== null && typeof value === 'object' && !Array.isArray(value)) {
+                const details = document.createElement('details');
+                const summary = document.createElement('summary');
+                summary.textContent = key;
+                details.appendChild(summary);
+                const pre = document.createElement('pre');
+                pre.textContent = JSON.stringify(value, null, 2);
+                details.appendChild(pre);
+                tree.appendChild(details);
+            } else {
+                const row = document.createElement('div');
+                row.className = 'json-scalar';
+                row.innerHTML =
+                    `<span class="json-key">${key}</span>` +
+                    `<span class="json-val">${JSON.stringify(value)}</span>`;
+                tree.appendChild(row);
+            }
+        }
+        container.appendChild(tree);
+    }
+
+    function updateRobotJson() {
+        const url = robotJsonActive === 'current'
+            ? '/api/robot'
+            : `/api/robot/history/${robotJsonActive}`;
+        fetch(url)
+            .then(res => res.ok ? res.json() : Promise.reject(res.status))
+            .then(data => {
+                document.getElementById('robotJsonLabel').textContent =
+                    robotJsonActive === 'current' ? '(aktuell)' : `(${robotJsonActive})`;
+                renderJsonTree(data, document.getElementById('robotJsonTree'));
+            })
+            .catch(err => {
+                document.getElementById('robotJsonTree').textContent = `Fehler: ${err}`;
+            });
+    }
+
+    function setHistoryActive(ts) {
+        robotJsonActive = ts;
+        updateRobotJson();
+        document.querySelectorAll('#robotHistoryList li').forEach(l => {
+            l.classList.toggle('rh-active', l.dataset.ts === ts);
+        });
+    }
+
+    function updateRobotHistory() {
+        fetch('/api/robot/history')
+            .then(res => res.json())
+            .then(({ history }) => {
+                const ul = document.getElementById('robotHistoryList');
+                ul.innerHTML = '';
+
+                const liCurrent = document.createElement('li');
+                liCurrent.textContent = 'robot.json (aktuell)';
+                liCurrent.dataset.ts = 'current';
+                if (robotJsonActive === 'current') liCurrent.classList.add('rh-active');
+                liCurrent.addEventListener('click', () => setHistoryActive('current'));
+                ul.appendChild(liCurrent);
+
+                history.forEach(entry => {
+                    const ts = entry.filename.slice(6, -5); // robot_YYYYMMDD_HHmmss.json → YYYYMMDD_HHmmss
+                    const li = document.createElement('li');
+                    li.textContent = entry.filename;
+                    li.dataset.ts = ts;
+                    if (robotJsonActive === ts) li.classList.add('rh-active');
+                    li.addEventListener('click', () => setHistoryActive(ts));
+                    ul.appendChild(li);
+                });
+            })
+            .catch(err => console.error('Error fetching robot history:', err));
+    }
+
     updateStatus();
     updatePosition();
+    updateRobotJson();
+    updateRobotHistory();
 
     setInterval(() => {
         updateStatus();
         updatePosition();
+        if (robotJsonActive === 'current') updateRobotJson();
     }, 1000);
 
+    setInterval(updateRobotHistory, 30000);
+
 });
 
 document.querySelectorAll('.section').forEach(sec => {