<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Live Valve Graph</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <div style="text-align: center;">
        <h3>Live Valve Graph - Node <span id="selectedNodeLabel">05</span></h3>
        <label for="nodeSelector">Select Node:</label>
        <select id="nodeSelector">
        </select>
    </div>

    <canvas id="liveChart" width="1000" height="400"></canvas>

    <script>
        const ctx = document.getElementById('liveChart').getContext('2d');
        const nodeLabel = document.getElementById('selectedNodeLabel');
        const nodeSelector = document.getElementById('nodeSelector');

        let selectedNode = "5";

        // Add node options 05 to 24
        for (let i = 5; i <= 24; i++) {
            const option = document.createElement("option");
            option.value = i.toString();
            option.text = `Node ${i.toString().padStart(2, "0")}`;
            if (i === 5) option.selected = true;
            nodeSelector.appendChild(option);
        }

        nodeSelector.addEventListener("change", () => {
            selectedNode = nodeSelector.value;
            nodeLabel.textContent = selectedNode.padStart(2, "0");
            // Clear chart
            chart.data.labels = [];
            chart.data.datasets.forEach(ds => ds.data = []);
            chart.update();
        });

        const chart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: [],
                datasets: [
                    { label: 'Setpoint', borderColor: 'blue', data: [], fill: false },
                    { label: 'Feedback', borderColor: 'green', data: [], fill: false },
                    { label: 'Flow (L/h)', borderColor: 'orange', data: [], fill: false },
                    { label: 'Pressure (bar)', borderColor: 'red', data: [], fill: false }
                ]
            },
            options: {
                responsive: true,
                animation: false,
                scales: {
                    x: { title: { display: true, text: 'Time' } },
                    y: { title: { display: true, text: 'Value' } }
                }
            }
        });

        function fetchLiveData() {
            fetch("/data")
                .then(res => res.json())
                .then(data => {
                    const now = new Date().toLocaleTimeString();

                    const valve = data.valves?.[selectedNode] || {};
                    const flow = data.flow?.["0x01"] || 0;
                    const pressure = data.pressure?.["0x01"] || 0;

                    chart.data.labels.push(now);
                    chart.data.datasets[0].data.push(valve.setpoint || 0);
                    chart.data.datasets[1].data.push(valve.feedback || 0);
                    chart.data.datasets[2].data.push(flow);
                    chart.data.datasets[3].data.push(pressure);

                    if (chart.data.labels.length > 50) {
                        chart.data.labels.shift();
                        chart.data.datasets.forEach(ds => ds.data.shift());
                    }

                    chart.update();
                });
        }

        setInterval(fetchLiveData, 1000);
    </script>
</body>
</html>
