web/public/static/js/ResultService.js

/**
 * Yea i know but it works for now
 */

class ResultService  {

    constructor(alertBox, rankingTable, endpoint) {

        this.alertBox = alertBox;

        this.rankingTable = rankingTable;

        this.endpoint = endpoint;

        this.hash = 0;

        // cool flashy flashy thingy
        this.prevTableRowsLength = null;

        this.loop();
    }

    async loop() {
        try {

            await this.updateTable();
            
            this.alertBox.classList.add("hidden");

        } catch (error) {

            console.log(error);

            this.hash = 0;

            this.alertBox.innerHTML = "<b>Noe gikk galt: </b>" + error;
            this.alertBox.classList.remove("hidden");
        }

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

    async updateTable() {

        let response = await fetch(this.endpoint + this.hash);

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

        let JSONResponse = await response.json();

        this.hash = JSONResponse.hash;

        let tableRows = [];
        let tempLaps  = [];
        JSONResponse.data.laps.forEach(lap => {

            let roundTripTime = null;

            let prevLap = tempLaps[lap.id];

            let round = 0;

            if (prevLap) {
                roundTripTime = lap.time - prevLap.time;

                prevLap.round += 1;

                lap.round = prevLap.round;

                round = lap.round;
            } else {
                lap.round = 0;
            }

            tempLaps[lap.id] = lap;

            tableRows.push({
                team: {
                    name: JSONResponse.data.map.team[lap.id].name,
                    company: JSONResponse.data.map.team[lap.id].company
                },
                trip: roundTripTime,
                time: lap.time + JSONResponse.data.map.time_reference,
                round: round
            });
        });

        tableRows = tableRows.reverse();

        let tableHTML = "";
        tableHTML += "<table>";
        tableHTML += "<tr>";
        tableHTML += "<th>#</th>";
        tableHTML += "<th>Lag</th>";
        tableHTML += "<th>Bedrift</th>";
        tableHTML += "<th>Runde</th>";
        tableHTML += "<th>Tid</th>";
        tableHTML += "<th>Passert</th>";
        tableHTML += "</tr>";

        let tableRowsLength = tableRows.length;

        if (this.prevTableRowsLength == null) {
            this.prevTableRowsLength = tableRowsLength;
        }

        let iterator = tableRows.length + 1;
        tableRows.forEach(row => {
            iterator--;

            tableHTML += "<tr" + ((iterator > this.prevTableRowsLength) ? ' class="b"' : '' ) + ">";
            tableHTML += "<td>" + iterator + "</td>";
            tableHTML += "<td>" + row.team.name + "</td>";
            tableHTML += "<td>" + row.team.company + "</td>";
            tableHTML += "<td>" + ((row.round === 0) ? 'START' : row.round) + "</td>";
            tableHTML += "<td>" + ((row.trip === null) ? 'START' : row.trip) + "</td>";
            tableHTML += "<td>" + (new Date(row.time * 1000).toLocaleString()) + "</td>";
            tableHTML += "</tr>";
        });

        tableHTML += "<table>";

        this.rankingTable.innerHTML = tableHTML;

        // used for cool green flashy flashy thingy
        this.prevTableRowsLength = tableRowsLength;
    }

}