From bb0eb6d1e276186af2c1e5d26abda4413c278981 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Tue, 5 Jan 2021 22:15:20 +0100
Subject: [PATCH] AddTrackModal - minlaptime validation

ref #11
---
 src/components/AddTrackModal.svelte | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/components/AddTrackModal.svelte b/src/components/AddTrackModal.svelte
index 68efa120..0c11df23 100644
--- a/src/components/AddTrackModal.svelte
+++ b/src/components/AddTrackModal.svelte
@@ -11,13 +11,14 @@
     el.focus();
   }
   $: trackname_input_value = "";
-  $: isTracknameValid = trackname_input_value.trim().length === 0;
-  $: isTracklengthValid = tracklength <= 0;
-  $: createbtnenabled = !isTracknameValid && !isTracklengthValid;
   $: track_min_duration = 0;
   $: tracklength = 0;
   $: processed_last_submit = true;
   $: smart_track_min_duration_placeholder = parseInt(tracklength || 0) * 0.369;
+  $: isTracknameValid = trackname_input_value.trim().length === 0;
+  $: isTracklengthValid = tracklength <= 0;
+  $: trackMintimevalid = track_min_duration >= 0;
+  $: createbtnenabled = !isTracknameValid && !isTracklengthValid;
   function submit() {
     if (processed_last_submit === true) {
       processed_last_submit = false;
@@ -105,6 +106,7 @@
                     class="block text-sm font-medium text-gray-700">{$_('track-name')}</label>
                   <input
                     use:focus
+                    autocomplete="off"
                     placeholder={$_('track-name')}
                     class:border-red-500={isTracknameValid}
                     class:focus:border-red-500={isTracknameValid}
@@ -127,6 +129,7 @@
                     class="block text-sm font-medium text-gray-700">{$_('track-length-in-m')}</label>
                   <div class="mt-1 flex rounded-md shadow-sm">
                     <input
+                      autocomplete="off"
                       class:border-red-500={isTracklengthValid}
                       class:focus:border-red-500={isTracklengthValid}
                       class:focus:ring-red-500={isTracklengthValid}
@@ -151,6 +154,10 @@
                     class="block text-sm font-medium text-gray-700">{$_('minimum-lap-time-in-s')}</label>
                   <div class="mt-1 flex rounded-md shadow-sm">
                     <input
+                      autocomplete="off"
+                      class:border-red-500={!trackMintimevalid}
+                      class:focus:border-red-500={!trackMintimevalid}
+                      class:focus:ring-red-500={!trackMintimevalid}
                       bind:value={track_min_duration}
                       type="number"
                       name="track_min_duration"
@@ -159,6 +166,12 @@
                     <span
                       class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 text-sm">s</span>
                   </div>
+                  {#if !trackMintimevalid}
+                    <span
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      minimum lap time must be a positive number or 0
+                    </span>
+                  {/if}
                 </div>
               </div>
             </div>