web/app/view/pages/race/live.php

<div id="alert" class="alert danger hidden" role="alert"></div>

<h1>Live resultater</h1>
<br>

<noscript>
Denne siden krever JavaScript
</noscript>

<div id="ranking-table">
Laster inn...
</div>

<script>

document.addEventListener('DOMContentLoaded', () => {
    new ResultService();
});

class ResultService 
{
    constructor()
    {
        this.hash     = 0;
        this.alertbox = document.getElementById("alert");
        this.table    = document.getElementById("ranking-table");

        this.#loop();
    }

    async #loop(self)
    {
        try {
            await this.#updateTable();
            this.alertbox.classList.add("hidden");
        } catch (error) {
            console.log(error);
            this.alertbox.innerHTML = "<b>Noe gikk galt: </b>" + error;
            this.alertbox.classList.remove("hidden");
        }

        setTimeout(() => {
            this.#loop();
        }, 1000);
    }

    async #updateTable()
    {
        let response = await fetch("../api/v1/race/sync.php?h=" + this.hash);

        if (response.status === 204)
        {
            return;
        }

        let json = await response.json();

        this.hash = json.hash;

        let data = json.data;

        let tableHTML = "";
        tableHTML += "<table>";
        tableHTML += "<tr>";
        tableHTML += "<th>Navn</th>";
        tableHTML += "<th>Bestetid</th>";
        tableHTML += "</tr>";

        data.forEach(element => {
            tableHTML += "<tr>";
            tableHTML += "<td>" + element.name + "</td>";
            tableHTML += "<td>" + element.date + "</td>";
            tableHTML += "</tr>";
        });

        tableHTML += "<table>";

        this.table.innerHTML = tableHTML;
    }
}

</script>