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 {
-const puMap = {
-"PU_1": 1,
-"PU_2": 2,
-"PU_3": 3
-};
-const fields = {
-"Qperm": "L/h",
-"Pdilute": "bar",
-"Conductivity": "µS/cm",
-"Pro": "bar"
-};
-const dataResponse = await fetch('/monitor');
-const allData = await dataResponse.json();
+    try {
+        const puLabels = ["PU_1", "PU_2", "PU_3"];
+        const fields = {
+            "Qperm": "L/h",
+            "Pdilute": "bar",
+            "Conductivity": "µS/cm",
+            "Pro": "bar"
+        };
+
+        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)) {
-                const value = puData[fieldId] ?? 0.0;
+
+            puLabels.forEach((puLabel, index) => {
+                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>