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

AddTrackModal - minlaptime validation

Browse Source 
ref #11
This commit is contained in:
Philipp Dormann 2021-01-05 22:15:20 +01:00
parent 388fc8f239
commit bb0eb6d1e2
1 changed files with 16 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/AddTrackModal.svelte
View File

@ -11,13 +11,14 @@
el.focus(); el.focus();
} }
$: 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;
$: smart_track_min_duration_placeholder = parseInt(tracklength || 0) * 0.369; $: 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() { function submit() {
if (processed_last_submit === true) { if (processed_last_submit === true) {
processed_last_submit = false; processed_last_submit = false;
@ -105,6 +106,7 @@
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
use:focus use:focus
autocomplete="off"
placeholder={$_('track-name')} placeholder={$_('track-name')}
class:border-red-500={isTracknameValid} class:border-red-500={isTracknameValid}
class:focus: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> 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
autocomplete="off"
class:border-red-500={isTracklengthValid} class:border-red-500={isTracklengthValid}
class:focus:border-red-500={isTracklengthValid} class:focus:border-red-500={isTracklengthValid}
class:focus:ring-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> class="block text-sm font-medium text-gray-700">{$_('minimum-lap-time-in-s')}</label>
<div class="mt-1 flex rounded-md shadow-sm"> <div class="mt-1 flex rounded-md shadow-sm">
<input <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} bind:value={track_min_duration}
type="number" type="number"
name="track_min_duration" name="track_min_duration"
@ -159,6 +166,12 @@
<span <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> 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> </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> </div>
</div> </div>