Madmin
/
Erant-OldApp
1
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

much faster experience loading

This commit is contained in:
Ota Prokopec 2023-04-25 20:23:07 +02:00
parent ad62ea5735
commit ccb5d42faa
4 changed files with 100 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
src/lib/components/Inputs/Input.svelte
View File

@ -7,17 +7,16 @@
export let value = ''
export let placeholder = ''
export let id = elementIdGenerator()
export let podm = true
export let readOnly = false
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 changedIconOnActive = icon
export let iconPosition: 'right' | 'left' = 'left'
//erant-new
export let autocomplete = ''
export let pattern: any = null
export let pattern: RegExp = null
export let prefix: string = ''
export let invisiblePrefix = icon ? true : false
@ -46,16 +45,17 @@
let className: string = ''
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})
$: 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) => {
if (prefix) {
if (!invisiblePrefix) {
if (inputValue?.indexOf(prefix) < 0) inputValue = `${prefix}${inputValue}`
if (inputValue?.indexOf(prefix) !== 0) inputValue = `${prefix}${inputValue}`
value = inputValue
} else if (inputValue?.indexOf(prefix) < 0) {
} else if (inputValue?.indexOf(prefix) !== 0) {
value = `${prefix}${inputValue}`
//inputValue = value.slice(prefix.length, value.length)
} else value = inputValue
@ -64,8 +64,18 @@
}
}
const patternControl = (_e) => {
inputValue = inputValue.replace(pattern, '')
}
$: console.log(pattern?.test(inputValue))
let inputElement: HTMLElement = null
onMount(() => {
prefixControl('')
patternControl('')
inputElement = document.getElementById(id)
})
let iconActived = false
@ -75,10 +85,55 @@
iconPushedCount++
iconActived = iconPushedCount % 2 === 1
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>
<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 iconPosition === 'left'}
<Input
@ -89,12 +144,12 @@
{id}
{type}
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}
{placeholder}
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}
{changedIconOnActive}
{:else}
@ -111,12 +166,12 @@
{id}
{type}
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}
{placeholder}
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}
{changedIconOnActive}
{:else}
@ -134,13 +189,13 @@
{id}
{type}
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}
{placeholder}
on:input
/>
{/if}
-->
<style>
.input::placeholder {
color: #8f8f8f;

18
src/lib/utils/database/experience.ts
View File

@ -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
export const load = async (pathName: string, previewQuestionsCount?: number, preview?: Function) => {
let checkPoints: Array<CheckPoint> = []
// @ts-ignore
const experience: Experience = (await databases.listDocuments('63cef30d6da945dd4250', '63cef4bd210fdf2e5888', [Query.equal('ExpURL', pathName)])).documents[0]
const rating = await getRating(experience.$id)
for (let i = 0; i < Math.ceil(experience.ExpCPsID.length / 25); i++) {
const { documents, total } = await databases.listDocuments<Models.Document & CheckPoint>('63cef30d6da945dd4250', '63cef84d908acf805758', [
const checkPointsDocument = (
await Promise.all(
new Array(Math.ceil(experience.ExpCPsID.length / 25)).fill(null).map((_lap, i) => {
return databases.listDocuments<Models.Document & CheckPoint>('63cef30d6da945dd4250', '63cef84d908acf805758', [
Query.equal('$id', experience.ExpCPsID),
Query.limit(25),
Query.offset(i * 25),
])
checkPoints = [...checkPoints, ...documents]
}
}),
)
)
.map((listItem) => listItem.documents)
.flat()
/*if (checkPointsIds.indexOf(checkPointId) === previewQuestionsCount - 1) {
experience['rating'] = rating
@ -34,10 +38,8 @@ export const load = async (pathName: string, previewQuestionsCount?: number, pre
preview(experience)
}*/
console.log(checkPoints)
experience['rating'] = rating
experience['checkPoints'] = checkPoints
experience['checkPoints'] = checkPointsDocument
return experience
}

16
src/routes/authorization/login/log_in.svelte
View File

@ -9,6 +9,8 @@
import { getErrorMessage } from '../utils/authorizationErrors'
import Button from '$lib/components/Buttons/Button.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
@ -58,8 +60,18 @@
<Helper class="ml-4" color="red">{error}</Helper>
{/if}
<div class="inform">
<input bind:value={email} type="text" placeholder="E-mail" autocomplete="email" required />
<HiddenInput bind:value={password} placeholder="Password" />
<Input bind:value={email} type="text" placeholder="E-mail" autocomplete="email" class="p-3 border-1 rounded-[15px] bg-[#eeeeee] text-lg w-full" />
<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">
<a href="/forgot-password">Forgot password?</a>
</div>

12
src/routes/authorization/register/register.svelte
View File

@ -24,10 +24,7 @@
let state: 'email-sent' | 'register' | 'loading' = 'register'
let error: string | null = null
$: buttonCodition = name.length > 0 && email.length > 0 && password.length >= 8 && password === repeatPassword && erantId.length > 2 && termsChecked && nicknameIsValid
const pattern = /[^a-zA-Z0-9]/g
$: nicknameIsValid = pattern.test(erantId)
$: buttonCodition = name.length > 0 && email.length > 0 && password.length >= 8 && password === repeatPassword && erantId.length > 2 && termsChecked
const register = async () => {
//if (password === repeatPassword || name.length < 8 || email.length < 8) throw new Error('conditions are not fine')
@ -54,6 +51,8 @@
state = 'register'
}
}
$: console.log(erantId)
</script>
{#if state !== 'email-sent'}
@ -77,13 +76,10 @@
prefix="@"
placeholder="your_nickname"
class="p-3 border-1 rounded-[15px] bg-[#eeeeee] text-lg w-full"
{pattern}
pattern={/[^@a-zA-Z0-9]/g}
invisiblePrefix
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>
<Input
iconFunction="password"