From fe297f67795c35f3ea0e9a88b8453b27a4de05e0 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Tue, 5 Jan 2021 22:02:41 +0100
Subject: [PATCH] AddTrackModal - more input validation response

ref #11
---
 src/components/AddTrackModal.svelte | 21 +++++++++++++--------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/components/AddTrackModal.svelte b/src/components/AddTrackModal.svelte
index d2048956..a1732ace 100644
--- a/src/components/AddTrackModal.svelte
+++ b/src/components/AddTrackModal.svelte
@@ -7,6 +7,9 @@
   export let modal_open;
   let trackname_input;
   $: 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;
@@ -101,15 +104,15 @@
                     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}
+                    class:border-red-500={isTracknameValid}
+                    class:focus:border-red-500={isTracknameValid}
+                    class:focus:ring-red-500={isTracknameValid}
                     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}
+                  {#if isTracknameValid}
                     <span
                       class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
                       Track name must not be empty
@@ -122,9 +125,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}
+                      class:border-red-500={isTracklengthValid}
+                      class:focus:border-red-500={isTracklengthValid}
+                      class:focus:ring-red-500={isTracklengthValid}
                       bind:value={tracklength}
                       type="number"
                       name="track_length_m"
@@ -133,7 +136,7 @@
                     <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}
+                  {#if isTracklengthValid}
                     <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
@@ -161,6 +164,8 @@
         </div>
         <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
           <button
+            disabled={!createbtnenabled}
+            class:opacity-50={!createbtnenabled}
             on:click={submit}
             type="button"
             class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">