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

scanner ui + login error states

Browse Source 
ref #1
This commit is contained in:
Philipp Dormann 2021-03-17 18:44:40 +01:00
parent 82dd786210
commit 8a6521faa0
2 changed files with 104 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
app/src/Login.svelte
View File

@ -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({
method: 'GET',
url: 'https://dev.lauf-fuer-kaya.de/api/stations/me',
headers: {Authorization: 'Bearer '+token}
}).then(function (response) {
axios
.request({
method: "GET",
url: "https://dev.lauf-fuer-kaya.de/api/stations/me",
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;

72
app/src/Scanner.svelte
View File

@ -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">
<h1 class="font-semibold w-full text-center text-gray-900">
<div class="bg-white shadow p-2">
<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 = "400m";
lastscan_totaldistance = "?m";
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>