Adds read state from PU on the UI

MockCAN.py

@@ -18,7 +18,7 @@ class CANBackend:
 
     def read_current_state(self,pu_number: int):
         # Placeholder for reading mode command
-        return PUs_states[pu_number-1]
+        return PUs_states[pu_number-1]["PU_MODE"]
 
     def send_thermal_loop_cleaning(self, mode: str):
         # Placeholder for thermal loop cleaning

main.py

@@ -1,6 +1,6 @@
 from fastapi import FastAPI, HTTPException, Query, Form, Depends
 from fastapi.staticfiles import StaticFiles
-from fastapi.responses import HTMLResponse, RedirectResponse
+from fastapi.responses import HTMLResponse, RedirectResponse, JSONResponse
 import logging
 import os
 from fastapi import Request, APIRouter
@@ -120,6 +120,19 @@ def send_command(state: str, pu_number: int, ploop_setpoint: float = Query(...))
         raise HTTPException(status_code=500, detail=str(e))
 
 
+@app.get("/api/pu_status")
+def get_pu_status():
+    states = [can_backend.read_current_state(1),can_backend.read_current_state(2),can_backend.read_current_state(3)]
+    logging.info(f"Reading state '{states}' from PUs")
+
+    # Replace this with real machine status
+    return JSONResponse(content={
+        "PU1": states[0],
+        "PU2": states[1],
+        "PU3": states[2]
+    })
+
+
 @app.get("/monitor")
 def get_monitor_data():
     data = can_backend.get_latest_data()

templates/control.html

@@ -260,33 +260,51 @@
         }
 
         async function sendCommand(state, puNumber, buttonEl) {
-    const ploopSetpoint = document.getElementById('ploopSetpoint').value;
-    const response = await fetch(`/command/${state}/pu/${puNumber}?ploop_setpoint=${ploopSetpoint}`, {
-        method: 'POST'
-    });
+            const ploopSetpoint = document.getElementById('ploopSetpoint').value;
+            const response = await fetch(`/command/${state}/pu/${puNumber}?ploop_setpoint=${ploopSetpoint}`, {
+                method: 'POST'
+            });
 
-    if (!response.ok) {
-        console.error('Failed to send command');
-        return;
-    }
+            if (!response.ok) {
+                console.error('Failed to send command');
+                return;
+            }
 
-    const data = await response.json();
-    console.log(data);
+            const data = await response.json();
+            console.log(data);
+
+            // Reset all buttons
+            document.querySelectorAll('.mode-block button').forEach(button => {
+                button.classList.remove('active');
+        });
+
+        async function fetchPUStatus() {
+            try {
+                const response = await fetch("/api/pu_status"); // Replace with your actual endpoint
+                const data = await response.json();
+
+                // Assume response is like:
+                // { "PU1": "Online", "PU2": "Offline", "PU3": "Online" }
+
+                document.getElementById("pu1-status").textContent = data.PU1 || "Unknown";
+                document.getElementById("pu2-status").textContent = data.PU2 || "Unknown";
+                document.getElementById("pu3-status").textContent = data.PU3 || "Unknown";
+            } catch (error) {
+                console.error("Failed to fetch PU status:", error);
+            }
+        }
+
+        // Call it on load and then every 5 seconds
+        fetchPUStatus();
+        setInterval(fetchPUStatus, 5000);
 
-    // Reset all buttons
-    document.querySelectorAll('.mode-block button').forEach(button => {
-        button.classList.remove('active');
-    });
 
     // Set the clicked button to active
     buttonEl.classList.add('active');
 
-    // Update PU status
-    document.getElementById(`pu${puNumber}-status`).textContent = state;
 }
 
 
-
     async function updateMonitorData() {
       const response = await fetch('/monitor');
       const data = await response.json();  // data = { PU_1: {...}, PU_2: {...}, PU_3: {...} }
@@ -318,7 +336,6 @@
       }
     }
 
-
         function updateMonitorValues(id, values, unit) {
             const container = document.getElementById(id);
             const valueElements = container.querySelectorAll('.monitor-value');