scanclient/src/Scanner.svelte

<script>
  import axios from "axios";
  import { _ } from "svelte-i18n";
  import { apikey, api_endpoint, page, stationinfo } from "./store.js";
  function init(el) {
    el.focus();
  }
  let lastscan_error = "";
  let lastscan_time = "";
  let lastscan_laptime = "";
  let lastscan_totaldistance = "";
  let lastscan_valid = true;
  let card = "";
  // live clock at the top
  let time = new Date();
  $: hours = (time.getHours() + "").padStart(2, "0");
  $: minutes = (time.getMinutes() + "").padStart(2, "0");
  $: seconds = (time.getSeconds() + "").padStart(2, "0");
  setInterval(() => {
    time = new Date();
  }, 1000);
</script>

<div class="min-h-screen">
  <div class="bg-white shadow p-2">
    <div class="flex flex-wrap -mx-1 overflow-hidden">
      <div class="my-1 px-1 w-1/3 overflow-hidden text-center self-center">
        <img src="/favicon.png" alt="" class="h-14 mx-auto" />
      </div>

      <div class="my-1 px-1 w-1/3 overflow-hidden text-center self-center">
        Lauf Für Kaya! Scan 📷
      </div>

      <div class="my-1 px-1 w-1/3 overflow-hidden text-center self-center">
        {JSON.parse($stationinfo).track.name} - #{JSON.parse($stationinfo).track
          .id} - {JSON.parse($stationinfo).track.distance}m
      </div>
    </div>
  </div>

  <h1 class="mr-6 text-7xl font-semibold text-center text-gray-900">
    {hours}:{minutes}:{seconds}
  </h1>
  <section class="px-4 py-24 mx-auto max-w-7xl">
    <div class="mx-auto space-y-5 w-full md:w-1/2">
      {#if lastscan_error}
        <div
          class="text-white px-6 py-4 border-0 rounded relative bg-red-500 mt-2"
        >
          <span class="inline-block align-middle">
            <b class="capitalize">Error!</b><br />{lastscan_error}
          </span>
        </div>
      {/if}
      <form
        class="space-y-4"
        onsubmit="event.preventDefault();"
        on:submit={() => {
          if (card === "cnf") {
            page.set("settings");
          } else {
            card = parseInt(card);
            lastscan_error = "";
            axios
              .request({
                method: "POST",
                url: $api_endpoint + "api/scans/trackscans",
                headers: { Authorization: "Bearer " + $apikey },
                data: { card },
              })
              .then((response) => {
                const time = new Date();
                const hours = (time.getHours() + "").padStart(2, "0");
                const minutes = (time.getMinutes() + "").padStart(2, "0");
                const seconds = (time.getSeconds() + "").padStart(2, "0");
                lastscan_time = hours + ":" + minutes + ":" + seconds;
                response.data.lapTime =
                  Math.floor(response.data.lapTime / 60) +
                  "min " +
                  (Math.floor(response.data.lapTime % 60) + "").padStart(
                    2,
                    "0"
                  ) +
                  "s";
                lastscan_laptime = response.data.lapTime;
                lastscan_valid = response.data.valid;
                lastscan_totaldistance =
                  Math.floor(response.data.runner.distance / 1000) +
                  "km " +
                  (
                    Math.floor(response.data.runner.distance % 1000) + ""
                  ).padStart(3, "0") +
                  "m";
              })
              .catch((e) => {
                lastscan_error = e.response.data.message;
              });
          }
          card = "";
        }}
      >
        <label class="block">
          <span class="block mb-1 text-xs font-medium text-gray-700"
            >{$_("runner_card")}</span
          >
          <input
            class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mt-1 leading-tight focus:outline-none focus:shadow-outline"
            type="text"
            placeholder="123456789"
            required
            use:init
            bind:value={card}
          />
        </label>
        {#if lastscan_totaldistance}
          {#if !lastscan_valid || lastscan_error}
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="20rem"
              height="20rem"
              class="ml-auto mr-auto"
              version="1.0"
              title="Invalid"
              viewBox="0 0 100 100"
              ><g fill="none" stroke="red"
                ><path d="M6 6l88 88" stroke-width="18.1" /><path
                  d="M6 94L94 6"
                  stroke-width="17.8"
                /></g
              ></svg
            >
          {:else}
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="20rem"
              height="20rem"
              class="ml-auto mr-auto"
              title="Valid"
              viewBox="0 0 600 600"
              ><path
                d="M8 405s115 129 138 182h99c41-126 203-429 341-535 28-37-43-52-102-27-87 36-252 317-283 384-44 12-90-74-90-74z"
                fill="#181"
              /></svg
            >
          {/if}
          <h1 class="text-2xl font-bold text-center">{$_("total-distance")}</h1>
          <h1 class="text-6xl font-bold text-center">
            {lastscan_totaldistance}
          </h1>
          <h1 class="text-2xl font-bold text-center">{$_("lap-time")}</h1>
          <h1 class="text-6xl font-bold text-center">{lastscan_laptime}</h1>
          <h1 class="text-2xl font-bold text-center">{$_("last-scan")}</h1>
          <h1 class="text-5xl font-bold text-center">{lastscan_time}</h1>
        {:else}
          <h1 class="text-3xl font-bold text-center">
            {$_("please_scan_a_card")}
          </h1>
        {/if}
        <button type="submit" class="hidden">{$_("scan")}</button>
      </form>
    </div>
  </section>
</div>