lfk/frontend
2
0
Fork 0
Code Issues 3 Pull Requests Actions Projects Releases Wiki Activity

AddTrackModal - more input validation response

Browse Source 
ref #11
This commit is contained in:
Philipp Dormann 2021-01-05 22:02:41 +01:00
parent 591dc09228
commit fe297f6779
1 changed files with 13 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/AddTrackModal.svelte
View File

@ -7,6 +7,9 @@
export let modal_open; export let modal_open;
let trackname_input; let trackname_input;
$: trackname_input_value = ""; $: trackname_input_value = "";
$: isTracknameValid = trackname_input_value.trim().length === 0;
$: isTracklengthValid = tracklength <= 0;
$: createbtnenabled = !isTracknameValid && !isTracklengthValid;
$: track_min_duration = 0; $: track_min_duration = 0;
$: tracklength = 0; $: tracklength = 0;
$: processed_last_submit = true; $: processed_last_submit = true;
@ -101,15 +104,15 @@
for="trackname" for="trackname"
class="block text-sm font-medium text-gray-700">{$_('track-name')}</label> class="block text-sm font-medium text-gray-700">{$_('track-name')}</label>
<input <input
class:border-red-500={trackname_input_value.trim().length === 0} class:border-red-500={isTracknameValid}
class:focus:border-red-500={trackname_input_value.trim().length === 0} class:focus:border-red-500={isTracknameValid}
class:focus:ring-red-500={trackname_input_value.trim().length === 0} class:focus:ring-red-500={isTracknameValid}
bind:value={trackname_input_value} bind:value={trackname_input_value}
bind:this={trackname_input} bind:this={trackname_input}
type="text" type="text"
name="trackname" 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" /> 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 <span
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"> class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
Track name must not be empty Track name must not be empty
@ -122,9 +125,9 @@
class="block text-sm font-medium text-gray-700">{$_('track-length-in-m')}</label> class="block text-sm font-medium text-gray-700">{$_('track-length-in-m')}</label>
<div class="mt-1 flex rounded-md shadow-sm"> <div class="mt-1 flex rounded-md shadow-sm">
<input <input
class:border-red-500={tracklength <= 0} class:border-red-500={isTracklengthValid}
class:focus:border-red-500={tracklength <= 0} class:focus:border-red-500={isTracklengthValid}
class:focus:ring-red-500={tracklength <= 0} class:focus:ring-red-500={isTracklengthValid}
bind:value={tracklength} bind:value={tracklength}
type="number" type="number"
name="track_length_m" name="track_length_m"
@ -133,7 +136,7 @@
<span <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> 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> </div>
{#if tracklength <= 0} {#if isTracklengthValid}
<span <span
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"> class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
Track length must be greater than 0 Track length must be greater than 0
@ -161,6 +164,8 @@
</div> </div>
<div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"> <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
<button <button
disabled={!createbtnenabled}
class:opacity-50={!createbtnenabled}
on:click={submit} on:click={submit}
type="button" 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"> 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">