beamershow/src/Beamershow.svelte

<script>
  import axios from "axios";
  import { _ } from "svelte-i18n";
  import { apikey, api_endpoint, page, stationinfo } from "./store.js";
  function init(el) {
    el.focus();
  }
  $: pages = ["general", "runners_distance", "orgs_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
    .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");
  $: seconds = (time.getSeconds() + "").padStart(2, "0");
  function stats_general() {
    axios
      .request({
        method: "GET",
        url: $api_endpoint + "api/stats/",
        headers: { Authorization: "Bearer " + $apikey },
      })
      .then(function ({ data }) {
        general = data;
      })
      .catch(function (e) {
        error = true;
        errormessage = e.response.data.short;
      });
  }
  function stats_runners() {
    axios
      .request({
        method: "GET",
        url: $api_endpoint + "api/stats/runners/distance",
        headers: { Authorization: "Bearer " + $apikey },
      })
      .then(function ({ data }) {
        runners = data;
      })
      .catch(function (e) {
        error = true;
        errormessage = e.response.data.short;
      });
  }
  function stats_orgs() {
    axios
      .request({
        method: "GET",
        url: $api_endpoint + "api/stats/organizations/distance",
        headers: { Authorization: "Bearer " + $apikey },
      })
      .then(function ({ data }) {
        orgs = data;
      })
      .catch(function (e) {
        error = true;
        errormessage = e.response.data.short;
      });
  }
  Array.prototype.cycle = function (str) {
    const i = this.indexOf(str);
    if (i === -1) return undefined;
    return this[(i + 1) % this.length];
  };
  function fetch_all() {
    stats_general();
    stats_runners();
    stats_orgs();
  }
  fetch_all();
  setInterval(() => {
    time = new Date();
  }, 1000);
  setInterval(() => {
    fetch_all();
  }, 15000);
  setInterval(() => {
    current_page = pages.cycle(current_page);
  }, 20000);
</script>

<div
  class="min-h-screen flex items-center justify-center bg-gray-100"
  style="background-image: url('/beamershow_background.png');background-position: center;background-size: contain;background-repeat:no-repeat;"
>
  <div class="max-w-xl w-full">
    {#if current_page === "general"}
      <h1 class="mr-6 text-7xl font-semibold text-center text-gray-900">
        {hours}:{minutes}:{seconds}
      </h1>
      <!--  -->
      <div class="flex flex-wrap -mx-1 overflow-hidden mt-5">
        <div class="my-1 px-1 w-full overflow-hidden sm:w-1/2 md:w-1/3">
          <h1 class="text-5xl font-semibold text-center text-gray-900">
            {general.total_runners}
          </h1>
          <h1 class="text-2xl font-semibold text-center text-gray-900">
            Läufer
          </h1>
        </div>
        <div class="my-1 px-1 w-full overflow-hidden sm:w-1/2 md:w-1/3">
          <h1 class="text-5xl font-semibold text-center text-gray-900">
            {general.total_distance}
          </h1>
          <h1 class="text-2xl font-semibold text-center text-gray-900">
            Kilometer gesamt
          </h1>
        </div>
        <div class="my-1 px-1 w-full overflow-hidden sm:w-1/2 md:w-1/3">
          <h1 class="text-5xl font-semibold text-center text-gray-900">
            {general.total_donation} €
          </h1>
          <h1 class="text-2xl font-semibold text-center text-gray-900">
            Spendensumme
          </h1>
        </div>
      </div>
    {:else if current_page === "runners_distance"}
      <h1 class="mr-6 text-7xl font-semibold text-center text-gray-900 mb-5">
        Top-Läufer
      </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"
            >
              Läufer
            </th>
            <th
              class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
            >
              Firma
            </th>
            <th
              class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
            >
              Kilometer
            </th>
          </tr>
        </thead>
        <tbody>
          {#each runners_filtered as r, 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">
                {r.firstname}
                {r.lastname}
              </td>
              <td class="border p-4 dark:border-dark-5">
                {r.group.name}
              </td>
              <td class="border p-4 dark:border-dark-5">
                {r.distance / 1000} km
              </td>
            </tr>
          {/each}
        </tbody>
      </table>
    {:else if current_page === "orgs_distance"}
      <h1 class="mr-6 text-7xl font-semibold text-center text-gray-900 mb-5">
        Top-Firmen
      </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"
            >
              Firma
            </th>
            <th
              class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
            >
              Kilometer
            </th>
          </tr>
        </thead>
        <tbody>
          {#each orgs_filtered as o, 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">
                {o.name}
              </td>
              <td class="border p-4 dark:border-dark-5">
                {o.distance / 1000} km
              </td>
            </tr>
          {/each}
        </tbody>
      </table>
    {:else}
      <!-- content here -->
    {/if}
  </div>
</div>