scanner ui + login error states

ref #1

app/src/Login.svelte

@@ -1,6 +1,6 @@
 <script>
   import { apikey, lang, stationinfo } from "./store.js";
-  import axios from 'axios';
+  import axios from "axios";
   let token;
   $: error = false;
   $: errormessage = "";
@@ -42,21 +42,47 @@
           href="https://docs.lauf-fuer-kaya.de/">See our configuration guide.</a
         >
       </p>
+      {#if error}
+        {#if errormessage === "invalid_token"}
+          <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 />The provided scan station
+              token is invalid.<br />Please check your token and try again...
+            </span>
+          </div>
+        {/if}
+        {#if errormessage === "station_disabled"}
+          <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 />The provided scan station is
+              disabled.
+            </span>
+          </div>
+        {/if}
+      {/if}
+
       <form
         class="flex flex-col pt-3 md:pt-8"
         onsubmit="event.preventDefault();"
         on:submit={() => {
-          axios.request({
+          axios
-            method: 'GET',
+            .request({
-  url: 'https://dev.lauf-fuer-kaya.de/api/stations/me',
+              method: "GET",
-  headers: {Authorization: 'Bearer '+token}
+              url: "https://dev.lauf-fuer-kaya.de/api/stations/me",
-}).then(function (response) {
+              headers: { Authorization: "Bearer " + token },
+            })
+            .then(function (response) {
               console.log(response.data);
               error = false;
               errormessage = "";
               apikey.set(token);
               stationinfo.set(JSON.stringify(response.data));
-}).catch(function (e) {
+            })
+            .catch(function (e) {
               console.log(e.response.data.short);
               error = true;
               errormessage = e.response.data.short;

app/src/Scanner.svelte

@@ -1,5 +1,6 @@
 <script>
-  import { apikey, lang, page } from "./store.js";
+  import axios from "axios";
+  import { apikey, lang, page, stationinfo } from "./store.js";
   function init(el) {
     el.focus();
   }
@@ -17,10 +18,25 @@
   }, 1000);
 </script>
 
-<div class="p-5 min-h-screen">
+<div class="bg-white shadow p-2">
-  <h1 class="font-semibold w-full text-center text-gray-900">
+  <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 📷
-  </h1>
+    </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>
+
+<div class="p-5 min-h-screen">
+  {$stationinfo}
   <h1 class="mr-6 text-6xl font-semibold text-center text-gray-900">
     {hours}:{minutes}:{seconds}
   </h1>
@@ -33,31 +49,37 @@
           if (card === "cnf") {
             page.set("settings");
           } else {
+            console.log({
+              blubb: { Authorization: "Bearer " + $apikey },
+              data: { card, station: JSON.parse($stationinfo).id },
+            });
+            axios
+              .request({
+                method: "GET",
+                url: "https://dev.lauf-fuer-kaya.de/api/scans/trackscans",
+                headers: { Authorization: "Bearer " + $apikey },
+                data: { card, station: JSON.parse($stationinfo).id },
+              })
+              .then(function (response) {
+                console.log(response.data);
+                // ------------------------
                 console.log(card);
-            //TODO: hit API for scan entry
+                lastscan_totaldistance = "?m";
-            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";
+                lastscan_laptime = response.data.lapTime + "s";
+                // ------------------------
+              })
+              .catch(function (e) {
+                console.log(e.response);
+              });
           }
           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
@@ -71,6 +93,18 @@
             bind:value={card}
           />
         </label>
+        {#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}
         <!-- <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>