scanclient/app/src/Scanner.svelte

<script>
  import { apikey, lang, page } from "./store.js";
  function init(el) {
    el.focus();
  }
  let lastscan_time = "";
  let lastscan_laptime = "";
  let lastscan_totaldistance = "";
  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");
  const interval = setInterval(() => {
    time = new Date();
  }, 1000);
</script>

<div class="p-5 min-h-screen">
  <h1 class="font-semibold w-full text-center text-gray-900">
    Lauf Für Kaya! Scan 📷
  </h1>
  <h1 class="mr-6 text-6xl font-semibold text-center text-gray-900">
    {hours}:{minutes}:{seconds}
  </h1>
  <section class="px-4 py-24 mx-auto max-w-7xl">
    <div class="w-full mx-auto space-y-5 sm:w-8/12 md:w-12 lg:w-12 xl:w-12">
      <form
        class="space-y-4"
        onsubmit="event.preventDefault();"
        on:submit={() => {
          if (card === "cnf") {
            page.set("settings");
          } else {
            console.log(card);
            //TODO: hit API for scan entry
            lastscan_totaldistance = "400m";
            let 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;
            lastscan_laptime = "1min 30s";
          }
          card = "";
        }}
      >
        {#if lastscan_totaldistance}
          <h1 class="text-3xl font-bold text-center">last scan</h1>
          <h1 class="text-5xl font-bold text-center">{lastscan_time}</h1>
          <h1 class="text-3xl font-bold text-center">total distance</h1>
          <h1 class="text-9xl font-bold text-center">
            {lastscan_totaldistance}
          </h1>
          <h1 class="text-3xl font-bold text-center">lap time</h1>
          <h1 class="text-9xl font-bold text-center">{lastscan_laptime}</h1>
        {:else}
          <h1 class="text-3xl font-bold text-center">please scan a card...</h1>
        {/if}
        <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>
        <!-- <button type="submit" class="w-full py-3 bg-black text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black">Scan!</button> -->
        <button type="submit" class="hidden">Scan!</button>
      </form>
    </div>
  </section>
</div>