Commit

app/view/pages/race/live.php

@@ -1,6 +1,6 @@
 <div id="alert" class="alert danger hidden" role="alert"></div>
 
-<h1>Live resultater</h1>
+<h1>Resultat service</h1>
 <br>
 
 <noscript>
@@ -11,72 +11,4 @@ Denne siden krever JavaScript
 Laster inn...
 </div>
 
-<script>
+<script src="../static/js/resultservice.js"></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>

public/api/v1/race/sync.php

@@ -3,8 +3,10 @@
  * We originally wanted to use SSE for this, but the hosting provider
  * did not support that so we resorted to simple polling instead
  * 
- * This page compiles a set of data and sends it if the provided hash of 
+ * This page compiles a set of times and sends it if the provided hash of 
  * the data is not equal.
+ * 
+ * TODO: This code fucking sucks, all of it does
  */
 
 use App\Teamtable\TeamMapper;
@@ -13,24 +15,50 @@ use App\Timetable\TimeMapper;
 $team_mapper = new TeamMapper($app->database->conn);
 $time_mapper = new TimeMapper($app->database->conn);
 
-$prev_hash = (int)filter_input(INPUT_GET, 'h');
+$prev_hash = filter_input(INPUT_GET, 'h');
 
-$data = [];
+$teams    = [];
-$times = $time_mapper->getAll();
+$name_map = [];
+$times    = [];
+$time_ref = NULL;
 
-foreach ($times as $time)
+foreach ($time_mapper->getAll() as $time)
 {
-    $team = $team_mapper->get($time->team_id);
+    if (!isset($teams[$time->team_id]))
+    {
+        $teams[$time->team_id] = $team_mapper->get($time->team_id);
+    }
+    $team = $teams[$time->team_id];
+
+    if (!isset($name_map[$team->id]))
+    {
+        $name_map[$team->id] = $team->name;
+    }
+
+    if ($time_ref === NULL)
+    {
+        $time_ref = $time->date->getTimestamp();
+    }
 
     $row = [
-        "name"   => $team->name,
+        "id"   => $team->id,
-        "date"   => $time->date->getTimestamp()
+        "time" => ($time->date->getTimestamp() - $time_ref)
     ];
 
-    array_push($data, $row);
+    array_push($times, $row);
 }
 
-$hash = crc32(serialize($data));
+$data = [
+    "map" => [
+        "team" => [
+            "name" => $name_map,
+        ],
+        "time_reference" => $time_ref
+    ],
+    "times" => $times
+];
+
+$hash = hash('crc32', serialize($data));
 
 if ($prev_hash !== $hash)
 {

public/static/js/resultservice.js

@@ -0,0 +1,66 @@
+document.addEventListener('DOMContentLoaded', () => {
+    new ResultService();
+});
+
+class ResultService 
+{
+    hash     = 0;
+    alertbox = document.getElementById("alert");
+    table    = document.getElementById("ranking-table");
+    endpoint = "../api/v1/race/sync.php?h=";
+
+    constructor()
+    {
+        this.loop();
+    }
+
+    async loop()
+    {
+        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(this.endpoint + 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>Lag</th>";
+        tableHTML += "<th>Tid</th>";
+        tableHTML += "</tr>";
+
+        data.times.reverse().forEach(element => {
+            tableHTML += "<tr>";
+            tableHTML += "<td>" + data.map.team.name[element.id] + "</td>";
+            tableHTML += "<td>" + element.time + "</td>";
+            tableHTML += "</tr>";
+        });
+
+        tableHTML += "<table>";
+
+        this.table.innerHTML = tableHTML;
+    }
+}

public/static/style/main.css

@@ -69,7 +69,7 @@ a {
 #nav {
     background: #fff;
     padding: .75rem;
-    line-height: 1.9;
+    line-height: 2;
     min-width: max-content;
 }
 #nav ul {