AddTrackModal - basic validation w/ class + layout responses

ref #11

src/components/AddTrackModal.svelte

@@ -1,15 +1,15 @@
 <script>
   import { _ } from "svelte-i18n";
   import { tracks as tracksstore } from "../store.js";
-  let trackname_input;
-  let trackname_input_value;
-  let track_min_duration;
-  let tracklength;
   import { TrackService } from "@odit/lfk-client-js";
-  export let modal_open;
-  let processed_last_submit = true;
   import Toastify from "toastify-js";
   import "toastify-js/src/toastify.css";
+  export let modal_open;
+  let trackname_input;
+  $: trackname_input_value = "";
+  $: track_min_duration = 0;
+  $: tracklength = 0;
+  $: processed_last_submit = true;
   $: smart_track_min_duration_placeholder = parseInt(tracklength || 0) * 0.369;
   function submit() {
     if (processed_last_submit === true) {
@@ -24,12 +24,16 @@
         minimumLapTime: track_min_duration,
       })
         .then((result) => {
+          trackname_input_value = "";
+          track_min_duration = 0;
+          tracklength = 0;
+          modal_open = false;
+          //
           Toastify({
             text: $_("track-added"),
             duration: 500,
             backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
           }).showToast();
-          modal_open = false;
           let storeval = [];
           tracksstore.subscribe((val) => {
             storeval = val;
@@ -97,11 +101,20 @@
                     for="trackname"
                     class="block text-sm font-medium text-gray-700">{$_('track-name')}</label>
                   <input
+                    class:border-red-500={trackname_input_value.trim().length === 0}
+                    class:focus:border-red-500={trackname_input_value.trim().length === 0}
+                    class:focus:ring-red-500={trackname_input_value.trim().length === 0}
                     bind:value={trackname_input_value}
                     bind:this={trackname_input}
                     type="text"
                     name="trackname"
                     class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+                  {#if trackname_input_value.trim().length === 0}
+                    <span
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      Track name must not be empty
+                    </span>
+                  {/if}
                 </div>
                 <div class="col-span-6">
                   <label
@@ -109,6 +122,9 @@
                     class="block text-sm font-medium text-gray-700">{$_('track-length-in-m')}</label>
                   <div class="mt-1 flex rounded-md shadow-sm">
                     <input
+                      class:border-red-500={tracklength <= 0}
+                      class:focus:border-red-500={tracklength <= 0}
+                      class:focus:ring-red-500={tracklength <= 0}
                       bind:value={tracklength}
                       type="number"
                       name="track_length_m"
@@ -117,6 +133,12 @@
                     <span
                       class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 text-sm">m</span>
                   </div>
+                  {#if tracklength <= 0}
+                    <span
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      Track length must be greater than 0
+                    </span>
+                  {/if}
                 </div>
                 <div class="col-span-6">
                   <label

src/components/OrgDetail.svelte

@@ -7,7 +7,7 @@
     Orgs
   </span>
   <p class="mb-8 text-lg text-gray-500">
-    configure the tracks/ min-max lap times
+    configure the tracks & minimum lap times
   </p>
   <div class="flex flex-row mb-4">
     <div class="w-full">

src/components/TracksOverview.svelte

@@ -18,7 +18,7 @@
     </button>
   </span>
   <p class="mb-8 text-lg text-gray-500">
-    configure the tracks/ min-max lap times
+    configure the tracks & minimum lap times
   </p>
   <Tracks />
 </section>