window.onload = () => {
    const data = document.getElementById("data");
    const last_update = document.getElementById("last_update");
    const connected = document.getElementById("connected");

    const timeout_duration = 10*1000;
    const retry_timeout = 5*1000;

    let reconnect_timeout;
    let ping_timeout;
    let evtSource;


    let connect_event_source = () => {

        clearTimeout(reconnect_timeout);
        clearTimeout(ping_timeout);
        ping_timeout = setTimeout(connect_event_source, timeout_duration);

        evtSource && evtSource.close && evtSource.close();
            
        evtSource = new EventSource("/events");
        evtSource.addEventListener("change", event => {
            last_update.innerText = `last update at ${new Date(+event.data * 1000)}`;
           
            fetch("/data")
                .then(res => res.json())
                .then(res => data.innerText = JSON.stringify(res, null, 1));
        });

        evtSource.addEventListener("ping", event => {
            clearTimeout(ping_timeout);
            ping_timeout = setTimeout(connect_event_source, timeout_duration);


            last_update.innerText = `last update at ${new Date(+event.data * 1000)}`;
            connected.className = "visible";
            setTimeout(() => connected.className = "hidden", 1000);
        });


        evtSource.onerror = () => {
            clearTimeout(reconnect_timeout);
            reconnect_timeout = setTimeout(connect_event_source, retry_timeout);
        };
    }
    

    connect_event_source();

};