lfk/scanclient
3
0
Fork 0
Code Issues Pull Requests Actions Projects Releases 19 Wiki Activity

🧠 base ui logic

Browse Source 
ref #1
This commit is contained in:
Philipp Dormann
2021-03-15 14:56:30 +01:00
parent 0f20996ac3
commit ece709954c
1 changed files with 30 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
app/src/Scanner.svelte
View File

@@ -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");