window.addEventListener('DOMContentLoaded', (event) => {
    // URL of your API
    const apiUrl = '/sensor_data';

    function fetchData() {
        // Fetching data from the API
        fetch(apiUrl)
            .then(response => response.json())
            .then(data => {
                document.getElementById('voltage').textContent = roundToTwo(data.bus_voltage)+ ' V' || 'N/A';
                document.getElementById('current').textContent = roundToTwo(data.current)+ ' mA' || 'N/A';
            })
            .catch(error => {
                console.error("There was an error fetching data from the API", error);
            });
    }

    fetchData();  // fetch immediately on page load
    setInterval(fetchData, 5000); // fetch every 5 seconds
});

window.addEventListener('DOMContentLoaded', (event) => {
    // URL of your API
    const apiUrl = '/telemetry';

    function fetchData() {
        // Fetching data from the API
        fetch(apiUrl)
            .then(response => response.json())
            .then(data => {
                document.getElementById('uptime').textContent = roundToTwo(data.uptime_seconds)+ ' s' || 'N/A';
                document.getElementById('heap').textContent = roundToTwo(data.heap_percent)+ ' %' || 'N/A';
            })
            .catch(error => {
                console.error("There was an error fetching data from the API", error);
            });
    }

    fetchData();  // fetch immediately on page load
    setInterval(fetchData, 5000); // fetch every 5 seconds
});

window.addEventListener('DOMContentLoaded', (event) => {
    // URL of your API
    const apiUrl = '/water_data';

    function fetchData() {
        // Fetching data from the API
        fetch(apiUrl)
            .then(response => response.json())
            .then(data => {
                document.getElementById('level').textContent = roundToTwo(data.water_height)+ ' cm' || 'N/A';
                document.getElementById('liters').textContent = roundToTwo(data.liters)+ ' l' || 'N/A';
                document.getElementById('percentage').textContent = roundToTwo(data.percentage)+ ' %' || 'N/A';
            })
            .catch(error => {
                console.error("There was an error fetching data from the API", error);
            });
    }

    fetchData();  // fetch immediately on page load
    setInterval(fetchData, 5000); // fetch every 5 seconds
});

window.addEventListener('DOMContentLoaded', (event) => {
    const apiUrl = '/network_info';

    function fetchData() {
        fetch(apiUrl)
            .then(response => response.json())
            .then(data => {
                document.getElementById('wifi_ip').textContent = data.wifi.ip || 'N/A';
                document.getElementById('wifi_rssi').textContent = data.wifi.rssi || 'N/A';
                document.getElementById('wifi_link').textContent = data.wifi.link || 'N/A';
                document.getElementById('wifi_ssid').textContent = data.wifi.ssid || 'N/A';
                document.getElementById('eth_link').textContent = data.ethernet.link || 'N/A';
                document.getElementById('eth_ip').textContent = data.ethernet.ip || 'N/A';
                document.getElementById('eth_speed').textContent = data.ethernet.rssi || 'N/A';
            })
            .catch(error => {
                console.error("There was an error fetching data from the API", error);
            });
    }

    

    fetchData();  // fetch immediately on page load
    setInterval(fetchData, 5000); // fetch every 5 seconds
});

function roundToTwo(num) {
    return Math.round(num*100)/100;
}

window.addEventListener('load', function () {
    var gauge = new RadialGauge({
        renderTo: 'main_gauge',
        width: 300,
        height: 300,
        units: "l",
        minValue: 0,
        maxValue: 220,
        majorTicks: [
            "0",
            "20",
            "40",
            "60",
            "80",
            "100",
            "120",
            "140",
            "160",
            "180",
            "200",
            "220"
        ],
        minorTicks: 2,
        strokeTicks: true,
        highlights: [
            {
                "from": 160,
                "to": 220,
                "color": "rgba(200, 50, 50, .75)"
            }
        ],
        colorPlate: "#fff",
        borderShadowWidth: 0,
        borders: false,
        needleType: "arrow",
        needleWidth: 2,
        needleCircleSize: 7,
        needleCircleOuter: true,
        needleCircleInner: false,
        animationDuration: 1500,
        animationRule: "linear"
    }).draw();
  })


// document.body.appendChild(gauge.options.renderTo);