parent
cb58fdfd8e
commit
e5ec98bf6f
@ -3,23 +3,33 @@
|
||||
import { clickOutside } from "./outsideclick";
|
||||
import { focusTrap } from "svelte-focus-trap";
|
||||
import { tracks as tracksstore } from "../store.js";
|
||||
import { TrackService } from "@odit/lfk-client-js";
|
||||
import { TrackService, UserService } from "@odit/lfk-client-js";
|
||||
import isEmail from "validator/es/lib/isEmail";
|
||||
import Toastify from "toastify-js";
|
||||
import "toastify-js/src/toastify.css";
|
||||
import About from "./About.svelte";
|
||||
export let modal_open;
|
||||
let trackname_input;
|
||||
let firstname_input;
|
||||
let lastname_input;
|
||||
let middlename_input;
|
||||
let password_input;
|
||||
let email_input;
|
||||
function focus(el) {
|
||||
el.focus();
|
||||
}
|
||||
$: trackname_input_value = "";
|
||||
$: middlename_input_value = "";
|
||||
$: password_input_value = "";
|
||||
$: email_input_value = "";
|
||||
$: lastname_input_value = "";
|
||||
$: firstname_input_value = "";
|
||||
$: track_min_duration = 0;
|
||||
$: tracklength = 0;
|
||||
$: processed_last_submit = true;
|
||||
$: smart_track_min_duration_placeholder = parseInt(tracklength || 0) * 0.369;
|
||||
$: isFirstnameValid = trackname_input_value.trim().length === 0;
|
||||
$: isTracklengthValid = tracklength <= 0;
|
||||
$: trackMintimevalid = track_min_duration >= 0;
|
||||
$: createbtnenabled = !isFirstnameValid && !isTracklengthValid;
|
||||
$: isPasswordValid = password_input_value.trim().length === 0;
|
||||
$: isEmailValid = isEmail(email_input_value);
|
||||
$: isLastnameValid = lastname_input_value.trim().length === 0;
|
||||
$: isFirstnameValid = firstname_input_value.trim().length === 0;
|
||||
$: createbtnenabled = !isFirstnameValid && !isLastnameValid;
|
||||
(function () {
|
||||
document.onkeydown = function (e) {
|
||||
e = e || window.event;
|
||||
@ -38,22 +48,23 @@
|
||||
if (processed_last_submit === true) {
|
||||
processed_last_submit = false;
|
||||
const toast = Toastify({
|
||||
text: $_("track-is-being-added"),
|
||||
text: "User is being added...",
|
||||
duration: -1,
|
||||
}).showToast();
|
||||
TrackService.trackControllerPost({
|
||||
distance: parseInt(tracklength),
|
||||
name: trackname_input_value,
|
||||
minimumLapTime: track_min_duration,
|
||||
UserService.userControllerPost({
|
||||
firstname: firstname_input_value,
|
||||
lastname: lastname_input_value,
|
||||
middlename: middlename_input_value,
|
||||
email:email_input_value,password:password_input_value
|
||||
})
|
||||
.then((result) => {
|
||||
trackname_input_value = "";
|
||||
track_min_duration = 0;
|
||||
tracklength = 0;
|
||||
firstname_input_value = "";
|
||||
lastname_input_value = "";
|
||||
middlename_input_value = "";
|
||||
modal_open = false;
|
||||
//
|
||||
Toastify({
|
||||
text: $_("track-added"),
|
||||
text: "User added",
|
||||
duration: 500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
@ -125,7 +136,7 @@
|
||||
<div class="grid grid-cols-6 gap-6">
|
||||
<div class="col-span-6">
|
||||
<label
|
||||
for="trackname"
|
||||
for="firstname"
|
||||
class="block text-sm font-medium text-gray-700">First Name</label>
|
||||
<input
|
||||
use:focus
|
||||
@ -134,10 +145,10 @@
|
||||
class:border-red-500={isFirstnameValid}
|
||||
class:focus:border-red-500={isFirstnameValid}
|
||||
class:focus:ring-red-500={isFirstnameValid}
|
||||
bind:value={trackname_input_value}
|
||||
bind:this={trackname_input}
|
||||
bind:value={firstname_input_value}
|
||||
bind:this={firstname_input}
|
||||
type="text"
|
||||
name="trackname"
|
||||
name="firstname"
|
||||
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 isFirstnameValid}
|
||||
<span
|
||||
@ -146,6 +157,85 @@
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="col-span-6">
|
||||
<label
|
||||
for="trackname"
|
||||
class="block text-sm font-medium text-gray-700">Middle Name</label>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder="Middle Name"
|
||||
bind:value={middlename_input_value}
|
||||
bind:this={middlename_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" />
|
||||
</div>
|
||||
<div class="col-span-6">
|
||||
<label
|
||||
for="lastname"
|
||||
class="block text-sm font-medium text-gray-700">Last Name</label>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder="Last Name"
|
||||
class:border-red-500={isLastnameValid}
|
||||
class:focus:border-red-500={isLastnameValid}
|
||||
class:focus:ring-red-500={isLastnameValid}
|
||||
bind:value={lastname_input_value}
|
||||
bind:this={lastname_input}
|
||||
type="text"
|
||||
name="lastname"
|
||||
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 isLastnameValid}
|
||||
<span
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||
Last Name is required
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="col-span-6">
|
||||
<label
|
||||
for="password"
|
||||
class="block text-sm font-medium text-gray-700">Password</label>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder="Password"
|
||||
class:border-red-500={isPasswordValid}
|
||||
class:focus:border-red-500={isPasswordValid}
|
||||
class:focus:ring-red-500={isPasswordValid}
|
||||
bind:value={password_input_value}
|
||||
bind:this={password_input}
|
||||
type="password"
|
||||
name="password"
|
||||
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 isPasswordValid}
|
||||
<span
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||
Password is required
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="col-span-6">
|
||||
<label
|
||||
for="email"
|
||||
class="block text-sm font-medium text-gray-700">E-Mail</label>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder="E-Mail"
|
||||
class:border-red-500={!isEmailValid}
|
||||
class:focus:border-red-500={!isEmailValid}
|
||||
class:focus:ring-red-500={!isEmailValid}
|
||||
bind:value={email_input_value}
|
||||
bind:this={email_input}
|
||||
type="email"
|
||||
name="email"
|
||||
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 !isEmailValid}
|
||||
<span
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||
valid email is required
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user