From c0555c066227711aa4e50d6eb154b211e88c00bf Mon Sep 17 00:00:00 2001
From: Nicolai Ort <info@nicolai-ort.com>
Date: Tue, 6 Apr 2021 18:00:05 +0200
Subject: [PATCH] Added valid/invalid logic

ref #11
---
 src/Scanner.svelte | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/Scanner.svelte b/src/Scanner.svelte
index 3b92031..47f332d 100644
--- a/src/Scanner.svelte
+++ b/src/Scanner.svelte
@@ -9,6 +9,7 @@
   let lastscan_time = "";
   let lastscan_laptime = "";
   let lastscan_totaldistance = "";
+  let lastscan_valid = true;
   let card = "";
   // live clock at the top
   let time = new Date();
@@ -83,6 +84,7 @@
                   ) +
                   "s";
                 lastscan_laptime = response.data.lapTime;
+                lastscan_valid = response.data.valid;
                 lastscan_totaldistance =
                   Math.floor(response.data.runner.distance / 1000) +
                   "km " +
@@ -112,14 +114,19 @@
           />
         </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>
+          {#if !lastscan_valid}
+          <svg xmlns="http://www.w3.org/2000/svg" width=20rem height=20rem class="ml-auto mr-auto" version="1.0" viewBox="0 0 100 100"><g fill="none" stroke="red"><path d="M6 6l88 88" stroke-width="18.1"/><path d="M6 94L94 6" stroke-width="17.8"/></g></svg>
+          {:else}
+          <svg xmlns="http://www.w3.org/2000/svg" width=20rem height=20rem class="ml-auto mr-auto" viewBox="0 0 600 600"><path d="M8 405s115 129 138 182h99c41-126 203-429 341-535 28-37-43-52-102-27-87 36-252 317-283 384-44 12-90-74-90-74z" fill="#181"/></svg>
+          {/if}
           <h1 class="text-3xl font-bold text-center">total distance</h1>
           <h1 class="text-8xl font-bold text-center">
             {lastscan_totaldistance}
           </h1>
           <h1 class="text-3xl font-bold text-center">lap time</h1>
           <h1 class="text-8xl font-bold text-center">{lastscan_laptime}</h1>
+          <h1 class="text-3xl font-bold text-center">last scan</h1>
+          <h1 class="text-5xl font-bold text-center">{lastscan_time}</h1>
         {:else}
           <h1 class="text-3xl font-bold text-center">
             {$_("please_scan_a_card")}