Corrected front panel

templates/control.html

@@ -482,37 +482,37 @@ element.innerHTML = `#${index + 1}<br>${values[index]} ${unit}`;
 }
 setInterval(updateMonitorData, 1000);
 async function fetchMonitorData() {
-try {
+    try {
-const puMap = {
+        const puLabels = ["PU_1", "PU_2", "PU_3"];
-"PU_1": 1,
+        const fields = {
-"PU_2": 2,
+            "Qperm": "L/h",
-"PU_3": 3
+            "Pdilute": "bar",
-};
+            "Conductivity": "µS/cm",
-const fields = {
+            "Pro": "bar"
-"Qperm": "L/h",
+        };
-"Pdilute": "bar",
+
-"Conductivity": "µS/cm",
+        const dataResponse = await fetch('/monitor');
-"Pro": "bar"
+        const allData = await dataResponse.json();
-};
+
-const dataResponse = await fetch('/monitor');
-const allData = await dataResponse.json();
         for (const [fieldId, unit] of Object.entries(fields)) {
             const container = document.getElementById(fieldId);
             if (!container) continue;
+
             const valueElements = container.querySelectorAll('.monitor-value');
-            let index = 0;
+
-            for (const [puLabel, puData] of Object.entries(allData)) {
+            puLabels.forEach((puLabel, index) => {
-                const value = puData[fieldId] ?? 0.0;
+                const puData = allData[puLabel];
+                const value = puData && fieldId in puData ? puData[fieldId] : 0.0;
                 if (valueElements[index]) {
                     valueElements[index].innerHTML = `#${index + 1}<br>${value.toFixed(1)} ${unit}`;
                 }
-                index++;
+            });
-            }
         }
     } catch (error) {
         console.error('Error fetching monitor data:', error);
     }
 }
+
 setInterval(fetchMonitorData, 1000);
 fetchMonitorData();
 </script>