scan error feedback

ref #1

app/src/Scanner.svelte

@@ -4,6 +4,7 @@
   function init(el) {
     el.focus();
   }
+  let lastscan_error = "";
   let lastscan_time = "";
   let lastscan_laptime = "";
   let lastscan_totaldistance = "";
@@ -13,7 +14,7 @@
   $: hours = (time.getHours() + "").padStart(2, "0");
   $: minutes = (time.getMinutes() + "").padStart(2, "0");
   $: seconds = (time.getSeconds() + "").padStart(2, "0");
-  const interval = setInterval(() => {
+  setInterval(() => {
     time = new Date();
   }, 1000);
 </script>
@@ -36,12 +37,20 @@
 </div>
 
 <div class="p-5 min-h-screen">
-  {$stationinfo}
+  <h1 class="mr-6 text-7xl font-semibold text-center text-gray-900">
-  <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="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();"
@@ -53,6 +62,7 @@
               blubb: { Authorization: "Bearer " + $apikey },
               data: { card, station: JSON.parse($stationinfo).id },
             });
+            lastscan_error = "";
             axios
               .request({
                 method: "GET",
@@ -75,6 +85,7 @@
               })
               .catch(function (e) {
                 console.log(e.response);
+                lastscan_error = e.response.data.message;
               });
           }
           card = "";

app/src/Settings.svelte

@@ -10,17 +10,25 @@
   <p class="block text-sm font-bold text-gray-700 mt-2">API Key</p>
   <p class="block text-sm text-gray-700">{$apikey}</p>
   <p class="block text-sm font-bold text-gray-700 mt-2">Station Description</p>
-  <p class="block text-sm text-gray-700">{JSON.parse($stationinfo).description}</p>
+  <p class="block text-sm text-gray-700">
+    {JSON.parse($stationinfo).description}
+  </p>
   <p class="block text-sm font-bold text-gray-700 mt-2">Station ID</p>
   <p class="block text-sm text-gray-700">{JSON.parse($stationinfo).id}</p>
   <p class="block text-sm font-bold text-gray-700 mt-2">Track ID</p>
   <p class="block text-sm text-gray-700">{JSON.parse($stationinfo).track.id}</p>
   <p class="block text-sm font-bold text-gray-700 mt-2">Track Name</p>
-  <p class="block text-sm text-gray-700">{JSON.parse($stationinfo).track.name}</p>
+  <p class="block text-sm text-gray-700">
+    {JSON.parse($stationinfo).track.name}
+  </p>
   <p class="block text-sm font-bold text-gray-700 mt-2">Track Distance</p>
-  <p class="block text-sm text-gray-700">{JSON.parse($stationinfo).track.distance}</p>
+  <p class="block text-sm text-gray-700">
+    {JSON.parse($stationinfo).track.distance}
+  </p>
   <p class="block text-sm font-bold text-gray-700 mt-2">minimum lap time</p>
-  <p class="block text-sm text-gray-700">{JSON.parse($stationinfo).track.minimumLapTime}s</p>
+  <p class="block text-sm text-gray-700">
+    {JSON.parse($stationinfo).track.minimumLapTime}s
+  </p>
   <p class="block text-sm font-bold text-gray-700 mt-2">Language</p>
   <div class="w-full">
     <div class="inline-block mr-2 mt-2">