From ece709954c9323ba28931aa6ed42fcea3466a6cb Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp@philippdormann.de>
Date: Mon, 15 Mar 2021 14:56:30 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=A7=A0=20base=20ui=20logic?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ref #1
---
 app/src/Scanner.svelte | 35 ++++++++++++++++++++++++++++++-----
 1 file changed, 30 insertions(+), 5 deletions(-)

diff --git a/app/src/Scanner.svelte b/app/src/Scanner.svelte
index fd30a3e..2b32ad4 100644
--- a/app/src/Scanner.svelte
+++ b/app/src/Scanner.svelte
@@ -22,23 +22,48 @@
     </div>
     <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-6/12 lg:w-4/12 xl:w-3/12">
-            <h1 class="text-2xl font-semibold text-center text-gray-900">Lauf Für Kaya! Scan 📷</h1>
-            <form class="space-y-4">
+            <form class="space-y-4" onsubmit="event.preventDefault();" on:submit={()=>
+            {
+                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">Scan!</button>
+        <!-- <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>
 <script>
-    import {apikey} from './store.js';
-    import {lang} from './store.js';
+    import {apikey,lang} 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");