Added top teams by distance page

ref #1

src/Beamershow.svelte

@@ -6,17 +6,13 @@
   function init(el) {
     el.focus();
   }
-  $: pages = ["general", "runners_distance", "orgs_distance"];
+  $: pages = ["general", "runners_distance", "orgs_distance", "teams_distance"];
   $: current_page = "general";
   $: general = {};
   $: runners = [];
-  $: runners_filtered = runners
-    .sort((a, b) => parseFloat(b.distance) - parseFloat(a.distance))
-    .slice(0, 10);
   $: orgs = [];
-  $: orgs_filtered = orgs
+  $: teams = [];
-    .sort((a, b) => parseFloat(b.distance) - parseFloat(a.distance))
+
-    .slice(0, 10);
   let time = new Date();
   $: hours = (time.getHours() + "").padStart(2, "0");
   $: minutes = (time.getMinutes() + "").padStart(2, "0");
@@ -63,6 +59,20 @@
         console.log(e);
       });
   }
+  function stats_teams() {
+    axios
+      .request({
+        method: "GET",
+        url: $api_endpoint + "api/stats/teams/distance",
+        headers: { Authorization: "Bearer " + $apikey },
+      })
+      .then(function ({ data }) {
+        teams = data;
+      })
+      .catch(function (e) {
+        console.log(e);
+      });
+  }
   Array.prototype.cycle = function (str) {
     const i = this.indexOf(str);
     if (i === -1) return undefined;
@@ -72,6 +82,7 @@
     stats_general();
     stats_runners();
     stats_orgs();
+    stats_teams();
   }
   fetch_all();
   setInterval(() => {
@@ -154,7 +165,7 @@
             </tr>
           </thead>
           <tbody>
-            {#each runners_filtered as r, i}
+            {#each runners as r, i}
               <tr class="text-gray-700">
                 <td class="border p-4 dark:border-dark-5">
                   {i + 1}
@@ -200,7 +211,7 @@
             </tr>
           </thead>
           <tbody>
-            {#each orgs_filtered as o, i}
+            {#each orgs as o, i}
               <tr class="text-gray-700">
                 <td class="border p-4 dark:border-dark-5">
                   {i + 1}
@@ -216,6 +227,48 @@
           </tbody>
         </table>
       </div>
+      {:else if current_page === "teams_distance"}
+      <div transition:slide|local>
+        <h1 class="mr-6 text-7xl font-semibold text-center text-gray-900 mb-5">
+          Top-Teams
+        </h1>
+        <table class="table p-4 bg-white shadow rounded-lg w-full">
+          <thead>
+            <tr>
+              <th
+                class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
+              >
+                Platz
+              </th>
+              <th
+                class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
+              >
+                Team
+              </th>
+              <th
+                class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
+              >
+                Kilometer
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {#each teams as t, i}
+              <tr class="text-gray-700">
+                <td class="border p-4 dark:border-dark-5">
+                  {i + 1}
+                </td>
+                <td class="border p-4 dark:border-dark-5">
+                  {t.name}
+                </td>
+                <td class="border p-4 dark:border-dark-5">
+                  {t.distance / 1000} km
+                </td>
+              </tr>
+            {/each}
+          </tbody>
+        </table>
+      </div>
     {:else}
       <!-- content here -->
     {/if}