much faster experience loading
This commit is contained in:
parent
ad62ea5735
commit
ccb5d42faa
|
@ -7,17 +7,16 @@
|
||||||
export let value = ''
|
export let value = ''
|
||||||
export let placeholder = ''
|
export let placeholder = ''
|
||||||
export let id = elementIdGenerator()
|
export let id = elementIdGenerator()
|
||||||
export let podm = true
|
|
||||||
export let readOnly = false
|
export let readOnly = false
|
||||||
export let maxLength = Infinity
|
export let maxLength = Infinity
|
||||||
export let icon: string | null = null
|
export let icon: string | null | boolean | undefined = null
|
||||||
export let iconFunction: 'password' = null
|
export let iconFunction: 'password' = null
|
||||||
export let changedIconOnActive = icon
|
export let changedIconOnActive = icon
|
||||||
export let iconPosition: 'right' | 'left' = 'left'
|
export let iconPosition: 'right' | 'left' = 'left'
|
||||||
|
|
||||||
//erant-new
|
//erant-new
|
||||||
export let autocomplete = ''
|
export let autocomplete = ''
|
||||||
export let pattern: any = null
|
export let pattern: RegExp = null
|
||||||
|
|
||||||
export let prefix: string = ''
|
export let prefix: string = ''
|
||||||
export let invisiblePrefix = icon ? true : false
|
export let invisiblePrefix = icon ? true : false
|
||||||
|
@ -46,16 +45,17 @@
|
||||||
let className: string = ''
|
let className: string = ''
|
||||||
export { className as class }
|
export { className as class }
|
||||||
|
|
||||||
$: inputValue = pattern ? value.replace(pattern, '') : value //this is here because we always want to equal input.value = value
|
$: inputValue = /*pattern ? value.replace(pattern, '') :*/ value //this is here because we always want to equal input.value = value
|
||||||
|
|
||||||
$: prefixControl(inputValue) //when inputValue changes => it will check prefix (so when we do $: inputValue = value this func will trigger every moment when inputValue will change and it will overwhite currect input.value thats will be {value})
|
$: prefixControl(inputValue) //when inputValue changes => it will check prefix (so when we do $: inputValue = value this func will trigger every moment when inputValue will change and it will overwhite currect input.value thats will be {value})
|
||||||
|
$: patternControl(inputValue) //when inputValue changes => it will check prefix (so when we do $: inputValue = value this func will trigger every moment when inputValue will change and it will overwhite currect input.value thats will be {value})
|
||||||
|
|
||||||
const prefixControl = (_e) => {
|
const prefixControl = (_e) => {
|
||||||
if (prefix) {
|
if (prefix) {
|
||||||
if (!invisiblePrefix) {
|
if (!invisiblePrefix) {
|
||||||
if (inputValue?.indexOf(prefix) < 0) inputValue = `${prefix}${inputValue}`
|
if (inputValue?.indexOf(prefix) !== 0) inputValue = `${prefix}${inputValue}`
|
||||||
value = inputValue
|
value = inputValue
|
||||||
} else if (inputValue?.indexOf(prefix) < 0) {
|
} else if (inputValue?.indexOf(prefix) !== 0) {
|
||||||
value = `${prefix}${inputValue}`
|
value = `${prefix}${inputValue}`
|
||||||
//inputValue = value.slice(prefix.length, value.length)
|
//inputValue = value.slice(prefix.length, value.length)
|
||||||
} else value = inputValue
|
} else value = inputValue
|
||||||
|
@ -64,8 +64,18 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const patternControl = (_e) => {
|
||||||
|
inputValue = inputValue.replace(pattern, '')
|
||||||
|
}
|
||||||
|
|
||||||
|
$: console.log(pattern?.test(inputValue))
|
||||||
|
|
||||||
|
let inputElement: HTMLElement = null
|
||||||
|
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
prefixControl('')
|
prefixControl('')
|
||||||
|
patternControl('')
|
||||||
|
inputElement = document.getElementById(id)
|
||||||
})
|
})
|
||||||
|
|
||||||
let iconActived = false
|
let iconActived = false
|
||||||
|
@ -75,10 +85,55 @@
|
||||||
iconPushedCount++
|
iconPushedCount++
|
||||||
iconActived = iconPushedCount % 2 === 1
|
iconActived = iconPushedCount % 2 === 1
|
||||||
dispatch('iconClick')
|
dispatch('iconClick')
|
||||||
if (iconFunction === 'password') type = type === 'text' ? 'password' : 'text'
|
if (iconFunction === 'password') {
|
||||||
|
type = type === 'text' ? 'password' : 'text'
|
||||||
|
retype(inputElement)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const retype = (e: HTMLElement) => {
|
||||||
|
e.setAttribute('type', type)
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<div class="relative w-full">
|
||||||
|
{#if icon}
|
||||||
|
<button
|
||||||
|
class={`absolute inset-y-0 ${iconPosition === 'left' ? 'left-0 pl-3' : 'right-0 pr-3'} flex items-center pointer-events-none ${
|
||||||
|
!iconFunction ? 'pointer-events-none' : 'pointer-events-auto'
|
||||||
|
} z-50 `}
|
||||||
|
on:click={iconClick}
|
||||||
|
>
|
||||||
|
{#if typeof icon === 'string'}
|
||||||
|
{#if iconActived}
|
||||||
|
{changedIconOnActive}
|
||||||
|
{:else}
|
||||||
|
{icon}
|
||||||
|
{/if}
|
||||||
|
{:else}
|
||||||
|
<slot active={iconActived} />
|
||||||
|
{/if}
|
||||||
|
</button>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<input
|
||||||
|
use:retype
|
||||||
|
{id}
|
||||||
|
class="input rounded-xl p-4 text-gray-900 border border-gray-300 text-left outline-none appearance-none {icon
|
||||||
|
? iconPosition === 'left'
|
||||||
|
? 'pl-12'
|
||||||
|
: 'pr-12'
|
||||||
|
: ''} {className} {readOnly ? 'cursor-pointer' : ''}"
|
||||||
|
{placeholder}
|
||||||
|
bind:value={inputValue}
|
||||||
|
on:input
|
||||||
|
readonly={readOnly ? true : null}
|
||||||
|
maxlength={maxLength}
|
||||||
|
{...$$restProps}
|
||||||
|
{autocomplete}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--
|
||||||
{#if icon}
|
{#if icon}
|
||||||
{#if iconPosition === 'left'}
|
{#if iconPosition === 'left'}
|
||||||
<Input
|
<Input
|
||||||
|
@ -89,12 +144,12 @@
|
||||||
{id}
|
{id}
|
||||||
{type}
|
{type}
|
||||||
bind:value={inputValue}
|
bind:value={inputValue}
|
||||||
class="input rounded-[24px] p-4 text-gray-900 border border-gray-300 text-left outline-none appearance-none {className} {readOnly ? 'cursor-pointer' : ''}"
|
class="input rounded-xl p-4 text-gray-900 border border-gray-300 text-left outline-none appearance-none {className} {readOnly ? 'cursor-pointer' : ''}"
|
||||||
color={!podm ? 'red' : null}
|
color={!podm ? 'red' : null}
|
||||||
{placeholder}
|
{placeholder}
|
||||||
on:input
|
on:input
|
||||||
>
|
>
|
||||||
<button class={`w-auto pointer-events-auto z-50 `} on:click={iconClick} slot="left">
|
<button class={`w-auto ${!iconFunction ? 'pointer-events-none' : 'pointer-events-auto'} z-50 `} on:click={iconClick} slot="left">
|
||||||
{#if iconActived}
|
{#if iconActived}
|
||||||
{changedIconOnActive}
|
{changedIconOnActive}
|
||||||
{:else}
|
{:else}
|
||||||
|
@ -111,12 +166,12 @@
|
||||||
{id}
|
{id}
|
||||||
{type}
|
{type}
|
||||||
bind:value={inputValue}
|
bind:value={inputValue}
|
||||||
class="input rounded-[24px] p-4 text-gray-900 border border-gray-300 text-left outline-none appearance-none {className} {readOnly ? 'cursor-pointer' : ''}"
|
class="input rounded-xl p-4 text-gray-900 border border-gray-300 text-left outline-none appearance-none {className} {readOnly ? 'cursor-pointer' : ''}"
|
||||||
color={!podm ? 'red' : null}
|
color={!podm ? 'red' : null}
|
||||||
{placeholder}
|
{placeholder}
|
||||||
on:input
|
on:input
|
||||||
>
|
>
|
||||||
<button class={`w-auto pointer-events-auto z-50 `} on:click={iconClick} slot="right">
|
<button class={`w-auto ${!iconFunction ? 'pointer-events-none' : 'pointer-events-auto'} z-50 `} on:click={iconClick} slot="right">
|
||||||
{#if iconActived}
|
{#if iconActived}
|
||||||
{changedIconOnActive}
|
{changedIconOnActive}
|
||||||
{:else}
|
{:else}
|
||||||
|
@ -134,13 +189,13 @@
|
||||||
{id}
|
{id}
|
||||||
{type}
|
{type}
|
||||||
bind:value={inputValue}
|
bind:value={inputValue}
|
||||||
class="input rounded-[24px] p-4 text-gray-900 border border-gray-300 text-left outline-none appearance-none {className} {readOnly ? 'cursor-pointer' : ''}"
|
class="input rounded-xl p-4 text-gray-900 border border-gray-300 text-left outline-none appearance-none {className} {readOnly ? 'cursor-pointer' : ''}"
|
||||||
color={!podm ? 'red' : null}
|
color={!podm ? 'red' : null}
|
||||||
{placeholder}
|
{placeholder}
|
||||||
on:input
|
on:input
|
||||||
/>
|
/>
|
||||||
{/if}
|
{/if}
|
||||||
|
-->
|
||||||
<style>
|
<style>
|
||||||
.input::placeholder {
|
.input::placeholder {
|
||||||
color: #8f8f8f;
|
color: #8f8f8f;
|
||||||
|
|
|
@ -13,20 +13,24 @@ userStore.subscribe((res) => (user = res))
|
||||||
|
|
||||||
//Loading of checkpoints and rating is done in the same function to prevent multiple requests to the database
|
//Loading of checkpoints and rating is done in the same function to prevent multiple requests to the database
|
||||||
export const load = async (pathName: string, previewQuestionsCount?: number, preview?: Function) => {
|
export const load = async (pathName: string, previewQuestionsCount?: number, preview?: Function) => {
|
||||||
let checkPoints: Array<CheckPoint> = []
|
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
const experience: Experience = (await databases.listDocuments('63cef30d6da945dd4250', '63cef4bd210fdf2e5888', [Query.equal('ExpURL', pathName)])).documents[0]
|
const experience: Experience = (await databases.listDocuments('63cef30d6da945dd4250', '63cef4bd210fdf2e5888', [Query.equal('ExpURL', pathName)])).documents[0]
|
||||||
|
|
||||||
const rating = await getRating(experience.$id)
|
const rating = await getRating(experience.$id)
|
||||||
|
|
||||||
for (let i = 0; i < Math.ceil(experience.ExpCPsID.length / 25); i++) {
|
const checkPointsDocument = (
|
||||||
const { documents, total } = await databases.listDocuments<Models.Document & CheckPoint>('63cef30d6da945dd4250', '63cef84d908acf805758', [
|
await Promise.all(
|
||||||
Query.equal('$id', experience.ExpCPsID),
|
new Array(Math.ceil(experience.ExpCPsID.length / 25)).fill(null).map((_lap, i) => {
|
||||||
Query.limit(25),
|
return databases.listDocuments<Models.Document & CheckPoint>('63cef30d6da945dd4250', '63cef84d908acf805758', [
|
||||||
Query.offset(i * 25),
|
Query.equal('$id', experience.ExpCPsID),
|
||||||
])
|
Query.limit(25),
|
||||||
checkPoints = [...checkPoints, ...documents]
|
Query.offset(i * 25),
|
||||||
}
|
])
|
||||||
|
}),
|
||||||
|
)
|
||||||
|
)
|
||||||
|
.map((listItem) => listItem.documents)
|
||||||
|
.flat()
|
||||||
|
|
||||||
/*if (checkPointsIds.indexOf(checkPointId) === previewQuestionsCount - 1) {
|
/*if (checkPointsIds.indexOf(checkPointId) === previewQuestionsCount - 1) {
|
||||||
experience['rating'] = rating
|
experience['rating'] = rating
|
||||||
|
@ -34,10 +38,8 @@ export const load = async (pathName: string, previewQuestionsCount?: number, pre
|
||||||
preview(experience)
|
preview(experience)
|
||||||
}*/
|
}*/
|
||||||
|
|
||||||
console.log(checkPoints)
|
|
||||||
|
|
||||||
experience['rating'] = rating
|
experience['rating'] = rating
|
||||||
experience['checkPoints'] = checkPoints
|
experience['checkPoints'] = checkPointsDocument
|
||||||
|
|
||||||
return experience
|
return experience
|
||||||
}
|
}
|
||||||
|
|
|
@ -9,6 +9,8 @@
|
||||||
import { getErrorMessage } from '../utils/authorizationErrors'
|
import { getErrorMessage } from '../utils/authorizationErrors'
|
||||||
import Button from '$lib/components/Buttons/Button.svelte'
|
import Button from '$lib/components/Buttons/Button.svelte'
|
||||||
import SocialLogin from '../Components/SocialLogin.svelte'
|
import SocialLogin from '../Components/SocialLogin.svelte'
|
||||||
|
import Input from '$lib/components/Inputs/Input.svelte'
|
||||||
|
import Eye from '$lib/svg/Eye.svelte'
|
||||||
|
|
||||||
export let purpose = 'login' //possible values login, register
|
export let purpose = 'login' //possible values login, register
|
||||||
|
|
||||||
|
@ -58,8 +60,18 @@
|
||||||
<Helper class="ml-4" color="red">{error}</Helper>
|
<Helper class="ml-4" color="red">{error}</Helper>
|
||||||
{/if}
|
{/if}
|
||||||
<div class="inform">
|
<div class="inform">
|
||||||
<input bind:value={email} type="text" placeholder="E-mail" autocomplete="email" required />
|
<Input bind:value={email} type="text" placeholder="E-mail" autocomplete="email" class="p-3 border-1 rounded-[15px] bg-[#eeeeee] text-lg w-full" />
|
||||||
<HiddenInput bind:value={password} placeholder="Password" />
|
<Input
|
||||||
|
bind:value={password}
|
||||||
|
let:active
|
||||||
|
iconPosition="right"
|
||||||
|
icon
|
||||||
|
type="password"
|
||||||
|
placeholder="Password"
|
||||||
|
class="p-3 border-1 rounded-[15px] bg-[#eeeeee] text-lg w-full"
|
||||||
|
>
|
||||||
|
<Eye {active} />
|
||||||
|
</Input>
|
||||||
<div class="forgot_password">
|
<div class="forgot_password">
|
||||||
<a href="/forgot-password">Forgot password?</a>
|
<a href="/forgot-password">Forgot password?</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -24,10 +24,7 @@
|
||||||
|
|
||||||
let state: 'email-sent' | 'register' | 'loading' = 'register'
|
let state: 'email-sent' | 'register' | 'loading' = 'register'
|
||||||
let error: string | null = null
|
let error: string | null = null
|
||||||
$: buttonCodition = name.length > 0 && email.length > 0 && password.length >= 8 && password === repeatPassword && erantId.length > 2 && termsChecked && nicknameIsValid
|
$: buttonCodition = name.length > 0 && email.length > 0 && password.length >= 8 && password === repeatPassword && erantId.length > 2 && termsChecked
|
||||||
|
|
||||||
const pattern = /[^a-zA-Z0-9]/g
|
|
||||||
$: nicknameIsValid = pattern.test(erantId)
|
|
||||||
|
|
||||||
const register = async () => {
|
const register = async () => {
|
||||||
//if (password === repeatPassword || name.length < 8 || email.length < 8) throw new Error('conditions are not fine')
|
//if (password === repeatPassword || name.length < 8 || email.length < 8) throw new Error('conditions are not fine')
|
||||||
|
@ -54,6 +51,8 @@
|
||||||
state = 'register'
|
state = 'register'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
$: console.log(erantId)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if state !== 'email-sent'}
|
{#if state !== 'email-sent'}
|
||||||
|
@ -77,13 +76,10 @@
|
||||||
prefix="@"
|
prefix="@"
|
||||||
placeholder="your_nickname"
|
placeholder="your_nickname"
|
||||||
class="p-3 border-1 rounded-[15px] bg-[#eeeeee] text-lg w-full"
|
class="p-3 border-1 rounded-[15px] bg-[#eeeeee] text-lg w-full"
|
||||||
{pattern}
|
pattern={/[^@a-zA-Z0-9]/g}
|
||||||
invisiblePrefix
|
invisiblePrefix
|
||||||
icon="@"
|
icon="@"
|
||||||
/>
|
/>
|
||||||
{#if !nicknameIsValid}
|
|
||||||
<Helper class="flex justify-start w-full pl-4" color="red">Your nickname can include only a-zA-Z0-9 characters</Helper>
|
|
||||||
{/if}
|
|
||||||
</div>
|
</div>
|
||||||
<Input
|
<Input
|
||||||
iconFunction="password"
|
iconFunction="password"
|
||||||
|
|
Loading…
Reference in New Issue