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

Merge pull request #61 from Erant-s-r-o/master 

App update - MVP #1
This commit is contained in:
Matthieu Morin 2023-03-04 21:35:45 +01:00 committed by GitHub
parent 62d089320f d098e21b4b
commit 6d9b5b84f8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
26 changed files with 444 additions and 344 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
LICENSE
View File

@ -1,13 +1,8 @@
MIT License Proprietary License
Copyright (c) 2020 Ludvík Prokopec Copyright (c) 2023 Erant, s.r.o.
Permission is hereby granted, free of charge, to any person obtaining a copy Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to use the Software solely for the internal business purposes of Erant, s.r.o. Such use may include running the Software on company-owned or leased hardware, and allowing access to the Software by employees or contractors of Erant, s.r.o. No other use, reproduction, distribution, or modification of the Software or any part thereof is permitted without the prior written consent of Erant, s.r.o.
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software. copies or substantial portions of the Software.

2
package.json
View File

@ -4,7 +4,7 @@
"version": "0.0.0", "version": "0.0.0",
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "vite --host 0.0.0.0", "dev": "vite",
"build": "vite build", "build": "vite build",
"preview": "vite preview", "preview": "vite preview",
"appwrite": "docker compose -f ./appwrite/docker-compose.yml up" "appwrite": "docker compose -f ./appwrite/docker-compose.yml up"

10
src/App.svelte
View File

@ -5,14 +5,18 @@
import { onMount } from 'svelte' import { onMount } from 'svelte'
import Routes from './__routes.svelte' import Routes from './__routes.svelte'
import CookiesPopUp from '$lib/components/Cookies/CookiesPopUp.svelte' /** import CookiesPopUp from '$lib/components/Cookies/CookiesPopUp.svelte' */
import { navigate } from '$lib/router' import { navigate } from '$lib/router'
let isMounted = false let isMounted = false
$: isReady = $localeLoading === false && $authLoading === false && isMounted $: isReady = $localeLoading === false && $authLoading === false && isMounted
$: console.log($user)
$: if (isReady && !$user) { $: if (isReady && !$user) {
if (!(location.pathname.startsWith('/login') || location.pathname.startsWith('/register'))) { console.log('change')
if (!location.pathname.startsWith('/login') && !location.pathname.startsWith('/register')) {
navigate('/login') navigate('/login')
} }
} }
@ -33,7 +37,7 @@
</script> </script>
<main> <main>
<CookiesPopUp /> <!-- <CookiesPopUp /> -->
<!-- you can display loading while app is not ready (waiting for user and i18n) --> <!-- you can display loading while app is not ready (waiting for user and i18n) -->
{#if isReady} {#if isReady}

22
src/__routes.svelte
View File

@ -4,6 +4,7 @@
import Layout from '$src/__layout.svelte' import Layout from '$src/__layout.svelte'
import Loading from '$src/__loading.svelte' import Loading from '$src/__loading.svelte'
import Error from '$src/__error.svelte' import Error from '$src/__error.svelte'
import NavigationBarLayout from '$lib/components/Layouts/NavigationBarLayout.svelte'
</script> </script>
<Router <Router
@ -14,6 +15,7 @@
{ {
path: '/', path: '/',
component: () => import('$routes/homepage/homepage.svelte'), component: () => import('$routes/homepage/homepage.svelte'),
layout: NavigationBarLayout,
}, },
{ {
path: '/error', path: '/error',
@ -34,14 +36,21 @@
{ {
path: '/explore', path: '/explore',
component: () => import('$routes/explore/explore.svelte'), component: () => import('$routes/explore/explore.svelte'),
layout: NavigationBarLayout,
}, },
{ {
path: '/profile', path: '/profile/',
component: () => import('$src/__error.svelte'),
},
{
path: '/profile/:erantId',
component: () => import('$routes/profile/profile.svelte'), component: () => import('$routes/profile/profile.svelte'),
layout: NavigationBarLayout,
}, },
{ {
path: '/profile/:function', path: '/profile/setting/:function',
component: () => import('$routes/profile/profile-functions.svelte'), component: () => import('$routes/profile/profile-functions.svelte'),
layout: NavigationBarLayout,
}, },
{ {
path: '/login', path: '/login',
@ -55,6 +64,15 @@
path: '/register/failed', path: '/register/failed',
component: () => import('$routes/register/registerFailed.svelte'), component: () => import('$routes/register/registerFailed.svelte'),
}, },
{
path: '/register/emailverification/:erantId',
component: () => import('$routes/register/emailVerification.svelte'),
},
{
path: '/create/account/:erantId/',
component: () => import('$routes/register/createAccount.svelte'),
},
{ {
path: '/:gameurl', path: '/:gameurl',
component: () => import('$routes/game/game.svelte'), component: () => import('$routes/game/game.svelte'),

6
src/lib/collections.ts
View File

@ -1,7 +1,9 @@
import { Collection } from './appwrite' import { Collection } from './appwrite'
const expiriences = new Collection('63cef30d6da945dd4250', '63cef4bd210fdf2e5888') const experiences = new Collection('63cef30d6da945dd4250', '63cef4bd210fdf2e5888')
const users = new Collection('63ded6c18e8493bffc83', 'Users')
export default { export default {
expiriences, experiences,
users,
} }

13
src/lib/components/Layouts/NavigationBarLayout.svelte
View File

@ -1,8 +1,14 @@
<script> <script>
import { user } from '$lib/appwrite'
import collections from '$lib/collections'
import { Query } from 'appwrite'
import { navigate } from 'svelte-routing' import { navigate } from 'svelte-routing'
import FooterItem from '../Common/NavBar_Item.svelte' import FooterItem from '../Common/NavBar_Item.svelte'
let items = [ $: [userInfo] = collections.users.getDocument([Query.equal('userId', $user?.$id || '')])
$: console.log($user)
$: items = [
{ {
name: 'Home', name: 'Home',
url: '/', url: '/',
@ -23,7 +29,7 @@
}, },
{ {
name: 'Profile', name: 'Profile',
url: '/profile', url: `/profile/${$userInfo?.erantId}`,
image_url: image_url:
"data:image/svg+xml,%3Csvg width='19' height='24' viewBox='0 0 19 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_1515_2027' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='14' width='19' height='10'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.166626 14.9121H18.6465V23.5151H0.166626V14.9121Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_1515_2027)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.40767 16.6621C4.4365 16.6621 1.9165 17.5161 1.9165 19.2019C1.9165 20.9029 4.4365 21.7651 9.40767 21.7651C14.3777 21.7651 16.8965 20.9111 16.8965 19.2253C16.8965 17.5243 14.3777 16.6621 9.40767 16.6621ZM9.40767 23.5151C7.12217 23.5151 0.166504 23.5151 0.166504 19.2019C0.166504 15.3566 5.441 14.9121 9.40767 14.9121C11.6932 14.9121 18.6465 14.9121 18.6465 19.2253C18.6465 23.0706 13.3732 23.5151 9.40767 23.5151Z' fill='%2361646B'/%3E%3C/g%3E%3Cmask id='mask1_1515_2027' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='3' y='0' width='13' height='13'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.21143 0.333008H15.6015V12.7214H3.21143V0.333008Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask1_1515_2027)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.40763 1.99901C6.9098 1.99901 4.87746 4.03017 4.87746 6.52801C4.8693 9.01767 6.88646 11.0477 9.3738 11.057L9.40763 11.89V11.057C11.9043 11.057 13.9355 9.02467 13.9355 6.52801C13.9355 4.03017 11.9043 1.99901 9.40763 1.99901ZM9.40763 12.7218H9.3703C5.9613 12.7113 3.1998 9.93117 3.21146 6.52451C3.21146 3.11201 5.99046 0.333008 9.40763 0.333008C12.8236 0.333008 15.6015 3.11201 15.6015 6.52801C15.6015 9.94401 12.8236 12.7218 9.40763 12.7218Z' fill='%2361646B'/%3E%3C/g%3E%3C/svg%3E ", "data:image/svg+xml,%3Csvg width='19' height='24' viewBox='0 0 19 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_1515_2027' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='14' width='19' height='10'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.166626 14.9121H18.6465V23.5151H0.166626V14.9121Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_1515_2027)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.40767 16.6621C4.4365 16.6621 1.9165 17.5161 1.9165 19.2019C1.9165 20.9029 4.4365 21.7651 9.40767 21.7651C14.3777 21.7651 16.8965 20.9111 16.8965 19.2253C16.8965 17.5243 14.3777 16.6621 9.40767 16.6621ZM9.40767 23.5151C7.12217 23.5151 0.166504 23.5151 0.166504 19.2019C0.166504 15.3566 5.441 14.9121 9.40767 14.9121C11.6932 14.9121 18.6465 14.9121 18.6465 19.2253C18.6465 23.0706 13.3732 23.5151 9.40767 23.5151Z' fill='%2361646B'/%3E%3C/g%3E%3Cmask id='mask1_1515_2027' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='3' y='0' width='13' height='13'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.21143 0.333008H15.6015V12.7214H3.21143V0.333008Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask1_1515_2027)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.40763 1.99901C6.9098 1.99901 4.87746 4.03017 4.87746 6.52801C4.8693 9.01767 6.88646 11.0477 9.3738 11.057L9.40763 11.89V11.057C11.9043 11.057 13.9355 9.02467 13.9355 6.52801C13.9355 4.03017 11.9043 1.99901 9.40763 1.99901ZM9.40763 12.7218H9.3703C5.9613 12.7113 3.1998 9.93117 3.21146 6.52451C3.21146 3.11201 5.99046 0.333008 9.40763 0.333008C12.8236 0.333008 15.6015 3.11201 15.6015 6.52801C15.6015 9.94401 12.8236 12.7218 9.40763 12.7218Z' fill='%2361646B'/%3E%3C/g%3E%3C/svg%3E ",
}, },
@ -32,14 +38,13 @@
let className = '' let className = ''
export { className as class } export { className as class }
</script> </script>
<div class="h-full w-full absolute"> <div class="h-full w-full absolute">
<div class={'section w-full h-[calc(100%-100px)] overflow-auto ' + className}><slot /></div> <div class={'section w-full h-[calc(100%-100px)] overflow-auto ' + className}><slot /></div>
<div class="footer"> <div class="footer">
{#each items as { name, url, image_url }} {#each items as { name, url, image_url }}
{#if location.pathname === url || location.pathname.includes(url + "/")} {#if location.pathname === url || location.pathname.includes(url + '/')}
<FooterItem on:click={() => navigate(url)} active={true} {name} {url}> <FooterItem on:click={() => navigate(url)} active={true} {name} {url}>
<img alt="" style="filter: invert(44%) sepia(66%) saturate(6619%) hue-rotate(222deg) brightness(98%) contrast(88%);" src={image_url} /> <img alt="" style="filter: invert(44%) sepia(66%) saturate(6619%) hue-rotate(222deg) brightness(98%) contrast(88%);" src={image_url} />
</FooterItem> </FooterItem>

74
src/lib/components/Map/Erantmap.svelte
View File

@ -2,9 +2,10 @@
import GeolocateControl from '@beyonk/svelte-mapbox/src/lib/map/controls/GeolocateControl.svelte' import GeolocateControl from '@beyonk/svelte-mapbox/src/lib/map/controls/GeolocateControl.svelte'
import Map from './Map.svelte' import Map from './Map.svelte'
import { navigate } from 'svelte-routing' import { navigate } from 'svelte-routing'
import NavigationBarLayout from '../Layouts/NavigationBarLayout.svelte'
import { onMount } from 'svelte'
export let center export let center = null
$: console.log(center)
export let mapComponent = null export let mapComponent = null
export let user = { lat: null, lng: null } export let user = { lat: null, lng: null }
@ -20,42 +21,47 @@
function showPosition(position) { function showPosition(position) {
user.lat = position.coords.latitude user.lat = position.coords.latitude
user.lng = position.coords.longitude user.lng = position.coords.longitude
if (!center) center = user
} }
const userCenter = () => document.getElementsByClassName('mapboxgl-ctrl-geolocate')[0].click()
</script> </script>
<Map {center} bind:mapComponent class={className} on:move> <NavigationBarLayout>
<slot /> {#if center}
<GeolocateControl <Map on:ready={() => setTimeout(() => userCenter(), 40)} {center} bind:mapComponent class={className} on:move>
on:geolocate={(e) => { <slot />
const { latitude, longitude } = e.detail.coords <GeolocateControl
user = { lat: latitude, lng: longitude } on:geolocate={(e) => {
//console.log(user) const { latitude, longitude } = e.detail.coords
}} user = { lat: latitude, lng: longitude }
/> }}
</Map>
<div class="on">
<button on:click={() => navigate('/scanner')}>
<svg viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M5.77778 8.66765C5.77778 7.07876 7.07778 5.77876 8.66667 5.77876H14.4445C16.0333 5.77876 17.3333 4.47876 17.3333 2.88987C17.3333 1.30098 16.0333 0.000976562 14.4445 0.000976562H5.77778C2.6 0.000976562 0 2.60098 0 5.77876V14.4454C0 16.0343 1.3 17.3343 2.88889 17.3343C4.47778 17.3343 5.77778 16.0343 5.77778 14.4454V8.66765ZM2.88889 34.666C1.3 34.666 0 35.966 0 37.5549V46.2216C0 49.3994 2.6 51.9994 5.77778 51.9994H14.4445C16.0333 51.9994 17.3333 50.6994 17.3333 49.1105C17.3333 47.5216 16.0333 46.2216 14.4445 46.2216H8.66667C7.07778 46.2216 5.77778 44.9216 5.77778 43.3327V37.5549C5.77778 35.966 4.47778 34.666 2.88889 34.666ZM37.5553 0.000976562H46.222C49.3998 0.000976562 51.9998 2.60098 51.9998 5.77876V14.4454C51.9998 16.0343 50.6998 17.3343 49.1109 17.3343C47.522 17.3343 46.222 16.0343 46.222 14.4454V8.66765C46.222 7.07876 44.922 5.77876 43.3331 5.77876H37.5553C35.9664 5.77876 34.6664 4.47876 34.6664 2.88987C34.6664 1.30098 35.9664 0.000976562 37.5553 0.000976562ZM46.2221 43.3327C46.2221 44.9216 44.9221 46.2216 43.3332 46.2216H37.5554C35.9665 46.2216 34.6665 47.5216 34.6665 49.1105C34.6665 50.6994 35.9665 51.9994 37.5554 51.9994H46.2221C49.3998 51.9994 51.9998 49.3994 51.9998 46.2216V37.5549C51.9998 35.966 50.6998 34.666 49.111 34.666C47.5221 34.666 46.2221 35.966 46.2221 37.5549V43.3327ZM28.8881 23.1085H23.1104V28.8838H17.3345V34.6616H23.1123V28.8862H28.8881V23.1085ZM23.1123 28.8862V28.8838H23.1104V28.8862H23.1123ZM28.8912 28.8838H34.6689V34.6616H28.8912V28.8838ZM34.669 17.3302H28.8913V23.108H34.669V17.3302ZM17.3345 17.3301H23.1123V23.1079H17.3345V17.3301Z"
fill="#4263EB"
/> />
</svg> </Map>
</button> <div class="on">
<button on:click={() => document.getElementsByClassName('mapboxgl-ctrl-geolocate')[0].click()}> <button on:click={() => navigate('/scanner')}>
<svg viewBox="0 0 29 39" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
<path <path
fill-rule="evenodd" fill-rule="evenodd"
clip-rule="evenodd" clip-rule="evenodd"
d="M0.758179 14.1551C0.758179 6.53234 6.92333 0.367188 14.5461 0.367188C22.1688 0.367188 28.3339 6.53234 28.3339 14.1551C28.3339 22.3687 19.6279 33.6945 16.0627 38.0081C15.2748 38.9536 13.837 38.9536 13.0491 38.0081C9.46424 33.6945 0.758179 22.3687 0.758179 14.1551ZM9.62182 14.1551C9.62182 16.8733 11.8279 19.0793 14.5461 19.0793C17.2642 19.0793 19.4703 16.8733 19.4703 14.1551C19.4703 11.4369 17.2642 9.23083 14.5461 9.23083C11.8279 9.23083 9.62182 11.4369 9.62182 14.1551Z" d="M5.77778 8.66765C5.77778 7.07876 7.07778 5.77876 8.66667 5.77876H14.4445C16.0333 5.77876 17.3333 4.47876 17.3333 2.88987C17.3333 1.30098 16.0333 0.000976562 14.4445 0.000976562H5.77778C2.6 0.000976562 0 2.60098 0 5.77876V14.4454C0 16.0343 1.3 17.3343 2.88889 17.3343C4.47778 17.3343 5.77778 16.0343 5.77778 14.4454V8.66765ZM2.88889 34.666C1.3 34.666 0 35.966 0 37.5549V46.2216C0 49.3994 2.6 51.9994 5.77778 51.9994H14.4445C16.0333 51.9994 17.3333 50.6994 17.3333 49.1105C17.3333 47.5216 16.0333 46.2216 14.4445 46.2216H8.66667C7.07778 46.2216 5.77778 44.9216 5.77778 43.3327V37.5549C5.77778 35.966 4.47778 34.666 2.88889 34.666ZM37.5553 0.000976562H46.222C49.3998 0.000976562 51.9998 2.60098 51.9998 5.77876V14.4454C51.9998 16.0343 50.6998 17.3343 49.1109 17.3343C47.522 17.3343 46.222 16.0343 46.222 14.4454V8.66765C46.222 7.07876 44.922 5.77876 43.3331 5.77876H37.5553C35.9664 5.77876 34.6664 4.47876 34.6664 2.88987C34.6664 1.30098 35.9664 0.000976562 37.5553 0.000976562ZM46.2221 43.3327C46.2221 44.9216 44.9221 46.2216 43.3332 46.2216H37.5554C35.9665 46.2216 34.6665 47.5216 34.6665 49.1105C34.6665 50.6994 35.9665 51.9994 37.5554 51.9994H46.2221C49.3998 51.9994 51.9998 49.3994 51.9998 46.2216V37.5549C51.9998 35.966 50.6998 34.666 49.111 34.666C47.5221 34.666 46.2221 35.966 46.2221 37.5549V43.3327ZM28.8881 23.1085H23.1104V28.8838H17.3345V34.6616H23.1123V28.8862H28.8881V23.1085ZM23.1123 28.8862V28.8838H23.1104V28.8862H23.1123ZM28.8912 28.8838H34.6689V34.6616H28.8912V28.8838ZM34.669 17.3302H28.8913V23.108H34.669V17.3302ZM17.3345 17.3301H23.1123V23.1079H17.3345V17.3301Z"
fill="#4263EB" fill="#4263EB"
/> />
</svg> </svg>
</button> </button>
</div> <button on:click={() => userCenter()}>
<svg viewBox="0 0 29 39" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M0.758179 14.1551C0.758179 6.53234 6.92333 0.367188 14.5461 0.367188C22.1688 0.367188 28.3339 6.53234 28.3339 14.1551C28.3339 22.3687 19.6279 33.6945 16.0627 38.0081C15.2748 38.9536 13.837 38.9536 13.0491 38.0081C9.46424 33.6945 0.758179 22.3687 0.758179 14.1551ZM9.62182 14.1551C9.62182 16.8733 11.8279 19.0793 14.5461 19.0793C17.2642 19.0793 19.4703 16.8733 19.4703 14.1551C19.4703 11.4369 17.2642 9.23083 14.5461 9.23083C11.8279 9.23083 9.62182 11.4369 9.62182 14.1551Z"
fill="#4263EB"
/>
</svg>
</button>
</div>
{/if}
</NavigationBarLayout>
<style> <style>
.on { .on {

3
src/lib/components/Map/Map.svelte
View File

@ -2,6 +2,7 @@
import { Map, controls } from '@beyonk/svelte-mapbox' import { Map, controls } from '@beyonk/svelte-mapbox'
import GeolocateControl from '@beyonk/svelte-mapbox/src/lib/map/controls/GeolocateControl.svelte' import GeolocateControl from '@beyonk/svelte-mapbox/src/lib/map/controls/GeolocateControl.svelte'
import { createEventDispatcher, onMount } from 'svelte' import { createEventDispatcher, onMount } from 'svelte'
const dispatch = createEventDispatcher()
export let mapComponent = null export let mapComponent = null
let geolocateControl let geolocateControl
let className = '' let className = ''
@ -21,7 +22,6 @@
alert("Can't load your location!") alert("Can't load your location!")
} }
}*/ }*/
$: console.log([center.lat, center.lng])
</script> </script>
<div class={className} class:radius> <div class={className} class:radius>
@ -33,6 +33,7 @@
on:ready={() => { on:ready={() => {
mapComponent.resize() mapComponent.resize()
mapComponent.setCenter([center.lng, center.lat], 14) mapComponent.setCenter([center.lng, center.lat], 14)
dispatch('ready')
}} }}
zoom={14} zoom={14}
> >

2
src/lib/utils/database/game.ts
View File

@ -37,7 +37,7 @@ export const answer = async (checkPointId: string, answer: any) => {
} }
export const getExpiriences = async () => { export const getExpiriences = async () => {
const expiriences = (await databases.listDocuments('63cef30d6da945dd4250', '63cef4bd210fdf2e5888')).documents const expiriences = (await databases.listDocuments('63cef30d6da945dd4250', '63cef4bd210fdf2e5888', [Query.equal('ExpApproved', true)])).documents
let items: Array<{ location: string; name: string; link: string }> = [] let items: Array<{ location: string; name: string; link: string }> = []
for (const expirience of expiriences) { for (const expirience of expiriences) {
items.push({ items.push({

0
src/lib/utils/supabase.js
View File

32
src/routes/explore/explore.svelte
View File

@ -6,29 +6,25 @@
import Loading from '$lib/components/Common/Loading.svelte' import Loading from '$lib/components/Common/Loading.svelte'
let Search: string let Search: string
</script> </script>
<NavigationBarLayout> <div class="content">
<div class="content"> <Top bind:search_value={Search} />
<Top bind:search_value={Search} />
<div class="results"> <div class="results">
{#await getExpiriences()} {#await getExpiriences()}
<div class="w-full h-24 flex items-center justify-center"> <div class="w-full h-24 flex items-center justify-center">
<Loading /> <Loading />
</div> </div>
{:then expiriences} {:then expiriences}
{#each expiriences as result} {#each expiriences as result}
<Result name={result.name} location={result.location} link={result.link} /> <Result name={result.name} location={result.location} link={result.link} />
{/each} {/each}
{/await} {/await}
<div class="end" />
<div class="end" />
</div>
</div> </div>
</NavigationBarLayout> </div>
<style lang="scss"> <style lang="scss">
.content { .content {

23
src/routes/game/Components/Layout.svelte
View File

@ -3,7 +3,7 @@
import Button from '../../../lib/components/Buttons/Button.svelte' import Button from '../../../lib/components/Buttons/Button.svelte'
import Image from '../../../lib/components/Common/Image.svelte' import Image from '../../../lib/components/Common/Image.svelte'
export let control: null | false | true | 'not-control' export let control: 'wrong-firstTime' | 'wrong-secondTime' | 'correct' | 'not-control' | null
export let nextQuestion export let nextQuestion
export let imgSrc export let imgSrc
</script> </script>
@ -22,21 +22,30 @@
<span> Popis úkolu: </span> <span> Popis úkolu: </span>
<span> <slot name="about" /></span> <span> <slot name="about" /></span>
</div> </div>
{#if control === 'wrong-firstTime' || control === 'wrong-secondTime'}
<div class="popis">
<span> Nápověda: </span>
<span> <slot name="hint" /></span>
</div>
{/if}
<div class="flex items-center justify-center flex-col w-full gap-6"> <div class="flex items-center justify-center flex-col w-full gap-6">
<span class="relative"> <slot name="answers" /> </span> <span class="relative"> <slot name="answers" /> </span>
{#if control !== null || control === 'not-control'}<!--jestli jsem už odpověděl--> {#if control === 'not-control' || control === 'correct' || control === 'wrong-secondTime'}
<Button on:submit={nextQuestion} primary class="w-3/4 max-w-sm min-w-[400px] h-16 bottom-0 fixed m-10 relative">Na další otázku</Button> <Button on:submit={nextQuestion} primary class="w-3/4 max-w-sm min-w-[400px] h-16 bottom-0 m-10 relative">Na další otázku</Button>
{:else}<!--čeká na odpověd, na sejmutí--> {:else if control === 'wrong-firstTime' || control === null}
<Button on:submit primary class="w-3/4 max-w-sm min-w-[400px] h-16 bottom-0 fixed m-10 relative">Vyhodnotit</Button> <Button on:submit primary class="w-3/4 max-w-sm min-w-[400px] h-16 bottom-0 m-10 relative">Vyhodnotit</Button>
{/if} {/if}
</div> </div>
</div> </div>
<div class="w-full relative bottom-[170px] flex justify-center h-fit size"> <div class="w-full relative bottom-[170px] flex justify-center h-fit size">
{#if control === 'not-control' || control === null} {#if control === 'not-control' || control === null}
<span /> <span />
{:else if control} {:else if control === 'correct'}
<span style="color:greenyellow">správně</span> <span style="color:greenyellow">správně</span>
{:else} {:else if control === 'wrong-firstTime'}
<span style="color:red">druhypokus</span>
{:else if control === 'wrong-secondTime'}
<span style="color:red">špatně</span> <span style="color:red">špatně</span>
{/if} {/if}
</div> </div>

10
src/routes/game/Forms/MultiChoiceForm.svelte
View File

@ -8,14 +8,19 @@
const { checkPoint, name } = data const { checkPoint, name } = data
let myAnswers = new Array(checkPoint.CPOptions.length).fill(false) let myAnswers = new Array(checkPoint.CPOptions.length).fill(false)
export let control = null export let control: 'wrong-firstTime' | 'wrong-secondTime' | 'correct' | 'not-control' | null
export let nextQuestion export let nextQuestion
export let attempt: 1 | 2 = 1
const answerCheckBox = async () => { const answerCheckBox = async () => {
const arr = checkPoint.CPOptions.filter((item, i) => { const arr = checkPoint.CPOptions.filter((item, i) => {
if (myAnswers[i] === true) return item if (myAnswers[i] === true) return item
}) })
control = await answer(checkPoint.$id, arr) const res = await answer(checkPoint.$id, arr)
if (res) control = 'correct'
else if (attempt === 1) control = 'wrong-firstTime'
else control = 'wrong-secondTime'
attempt++
} }
</script> </script>
@ -30,6 +35,7 @@
> >
<span slot="title">{name}</span> <span slot="title">{name}</span>
<span slot="about">{@html checkPoint.CPText}</span> <span slot="about">{@html checkPoint.CPText}</span>
<span slot="hint"> {@html checkPoint.CPHint} </span>
<div slot="answers"> <div slot="answers">
{#each checkPoint.CPOptions as label, i} {#each checkPoint.CPOptions as label, i}
<span class="self-baseline"> <span class="self-baseline">

10
src/routes/game/Forms/NumberForm.svelte
View File

@ -8,11 +8,16 @@
const { checkPoint, name } = data const { checkPoint, name } = data
let myAnswer = '' let myAnswer = ''
export let control = null export let control: 'wrong-firstTime' | 'wrong-secondTime' | 'correct' | 'not-control' | null
export let nextQuestion export let nextQuestion
export let attempt: 1 | 2 = 1
const answer_ = async () => { const answer_ = async () => {
control = await answer(checkPoint.$id, myAnswer) const res = await answer(checkPoint.$id, myAnswer)
if (res) control = 'correct'
else if (attempt === 1) control = 'wrong-firstTime'
else control = 'wrong-secondTime'
attempt++
} }
</script> </script>
@ -27,6 +32,7 @@
> >
<span slot="title">{name}</span> <span slot="title">{name}</span>
<span slot="about">{@html checkPoint.CPText}</span> <span slot="about">{@html checkPoint.CPText}</span>
<span slot="hint"> {@html checkPoint.CPHint} </span>
<div slot="answers"> <div slot="answers">
<span class="self-baseline"> <span class="self-baseline">
<Input type="number" bind:value={myAnswer} class="w-full min-w-[400px] max-w-[500px] h-12" /> <Input type="number" bind:value={myAnswer} class="w-full min-w-[400px] max-w-[500px] h-12" />

41
src/routes/game/Forms/Renderer.svelte
View File

@ -22,8 +22,8 @@
INFO: Info, INFO: Info,
} }
let control = null // if true => spravne if false spatne export let control: 'wrong-firstTime' | 'wrong-secondTime' | 'correct' | 'not-control' | null = null
let view: 'question' | 'map' = 'map' let view: 'question' | 'map' | 'end' = 'map'
export let gameData: any = {} //data export let gameData: any = {} //data
$: console.log(gameData) $: console.log(gameData)
@ -31,32 +31,37 @@
let clientAnswers = { let clientAnswers = {
//user data about game //user data about game
pos: 0, pos: 0,
end: gameData.checkPoints.length, //kolik otázek end: gameData.checkPoints.length - 1, //kolik otázek
points: 0, //body points: 0, //body
} }
$: if (control === true) clientAnswers.points += 2 //body bodování $: console.log(clientAnswers.pos === clientAnswers.end + 1)
$: if (control === 'correct') clientAnswers.points += 2 //body bodování
const nextQuestion = () => { const nextQuestion = () => {
//další otázka //další otázka
if (control !== null) { if (control !== null) {
control = null control = null
clientAnswers.pos++ if (clientAnswers.pos === clientAnswers.end) view = 'end'
view = 'map' else {
clientAnswers.pos++
view = 'map'
}
} }
} }
//let answers //let answers
//$: if (clientAnswers.pos < clientAnswers.end) answers = parseQuestion(gameData.questions[clientAnswers.pos].answer, gameData.questions[clientAnswers.pos].type) //delete //$: if (clientAnswers.pos < clientAnswers.end) answers = parseQuestion(gameData.questions[clientAnswers.pos].answer, gameData.questions[clientAnswers.pos].type) //delete
let page = null let page = null
$: if (clientAnswers.pos < clientAnswers.end) page = components[gameData.checkPoints[clientAnswers.pos].CPType] $: page = view === 'question' ? components[gameData.checkPoints[clientAnswers.pos].CPType] : null
let [lat, lng] = [null, null] let [lat, lng] = [null, null]
$: if (clientAnswers.pos < clientAnswers.end) [lat, lng] = $data.checkPoints[clientAnswers.pos].CPLocation $: if (clientAnswers.pos < clientAnswers.end) [lat, lng] = $data.checkPoints[clientAnswers.pos].CPLocation
let user = { lat: null, lng: null } let user = { lat: null, lng: null }
$: console.log(page, gameData.checkPoints[clientAnswers.pos].CPType) $: console.log(gameData.checkPoints[clientAnswers.pos].CPType, clientAnswers.pos, view)
/* //set user to localstorage /* //set user to localstorage
$: if (clientAnswers.pos !== clientAnswers.end && clientAnswers.pos !== 0) { $: if (clientAnswers.pos !== clientAnswers.end && clientAnswers.pos !== 0) {
@ -76,18 +81,20 @@
}*/ }*/
</script> </script>
{#if page && view === 'map'} <input type="number" bind:value={clientAnswers.pos} />
<Erantmap center={{ lat, lng }} bind:user class="w-full h-full"> <button on:click={() => (view = 'question')}>disappear map</button>
{#if view === 'map'}
<Erantmap bind:user class="w-full h-full">
<Marker on:enter={() => (view = 'question')} {lat} {lng} {user} /> <Marker on:enter={() => (view = 'question')} {lat} {lng} {user} />
</Erantmap> </Erantmap>
{/if} {/if}
{#if view === 'question'} {#if view === 'question'}
{#if clientAnswers.pos !== clientAnswers.end} <svelte:component this={page} data={{ checkPoint: gameData.checkPoints[clientAnswers.pos], name: gameData.ExpName }} {nextQuestion} bind:control />
<svelte:component this={page} data={{ checkPoint: gameData.checkPoints[clientAnswers.pos], name: gameData.ExpName }} {nextQuestion} bind:control /> {/if}
{:else} {#if view === 'end'}
<Finish img={gameData.thumbnail}> <Finish img={gameData.thumbnail}>
<span> Získali jste {clientAnswers.points} / {clientAnswers.end * 2} bodů</span> <span> Získali jste {clientAnswers.points} / {clientAnswers.end * 2} bodů</span>
</Finish> </Finish>
{/if}
{/if} {/if}

13
src/routes/game/Forms/SingleChoiceForm.svelte
View File

@ -8,13 +8,16 @@
const { checkPoint, name } = data const { checkPoint, name } = data
let myAnswer = '' let myAnswer = ''
$: console.log(data) export let control: 'wrong-firstTime' | 'wrong-secondTime' | 'correct' | 'not-control' | null
export let control = null
export let nextQuestion export let nextQuestion
export let attempt: 1 | 2 = 1
const answer_ = async () => { const answer_ = async () => {
control = await answer(checkPoint.$id, myAnswer) const res = await answer(checkPoint.$id, myAnswer)
if (res) control = 'correct'
else if (attempt === 1) control = 'wrong-firstTime'
else control = 'wrong-secondTime'
attempt++
} }
</script> </script>
@ -25,7 +28,7 @@
nextQuestion() nextQuestion()
myAnswer = '' myAnswer = ''
}} }}
on:submit={() => (control = myAnswer !== '' ? answer_() : null)} on:submit={() => (myAnswer !== '' ? answer_() : null)}
> >
<span slot="title">{name}</span> <span slot="title">{name}</span>
<span slot="about">{@html checkPoint.CPText}</span> <span slot="about">{@html checkPoint.CPText}</span>

10
src/routes/game/Forms/TextForm.svelte
View File

@ -8,11 +8,16 @@
const { checkPoint, name } = data const { checkPoint, name } = data
let myAnswer = '' let myAnswer = ''
export let control = null export let control: 'wrong-firstTime' | 'wrong-secondTime' | 'correct' | 'not-control' | null
export let nextQuestion export let nextQuestion
export let attempt: 1 | 2 = 1
const answer_ = async () => { const answer_ = async () => {
control = await answer(checkPoint.$id, myAnswer) const res = await answer(checkPoint.$id, myAnswer)
if (res) control = 'correct'
else if (attempt === 1) control = 'wrong-firstTime'
else control = 'wrong-secondTime'
attempt++
} }
</script> </script>
@ -27,6 +32,7 @@
> >
<span slot="title">{name}</span> <span slot="title">{name}</span>
<span slot="about">{@html checkPoint.CPText}</span> <span slot="about">{@html checkPoint.CPText}</span>
<span slot="hint"> {@html checkPoint.CPHint} </span>
<div slot="answers"> <div slot="answers">
<span class="self-baseline"> <span class="self-baseline">
<Input type="text" bind:value={myAnswer} class="w-full min-w-[400px] max-w-[500px] h-12" /> <Input type="text" bind:value={myAnswer} class="w-full min-w-[400px] max-w-[500px] h-12" />

26
src/routes/homepage/Components/Discover.svelte
View File

@ -1,19 +1,16 @@
<script> <script>
import { navigate } from '$lib/router'
</script> </script>
<div class="discover"> <div class="discover">
<h2> <h2>Dicoveries around</h2>
Dicoveries around
</h2>
<button> <button on:click={() => navigate('/explore')}> Start your trips! </button>
Start your trips!
</button>
</div> </div>
<style> <style>
/*min 370px*/ /*min 370px*/
.discover { .discover {
background-color: #110042; background-color: #110042;
color: white; color: white;
@ -31,7 +28,7 @@
gap: 18px; gap: 18px;
} }
.discover > h2{ .discover > h2 {
font-family: 'Source Sans Pro'; font-family: 'Source Sans Pro';
font-style: normal; font-style: normal;
font-weight: 600; font-weight: 600;
@ -40,10 +37,10 @@
margin: 0; margin: 0;
text-align: center; text-align: center;
} }
.discover > button{ .discover > button {
text-align: center; text-align: center;
color: #110042; color: #110042;
background-color: #FFFFFF; background-color: #ffffff;
font-family: 'Source Sans Pro'; font-family: 'Source Sans Pro';
font-style: normal; font-style: normal;
@ -55,24 +52,25 @@
border-radius: 15px; border-radius: 15px;
} }
.discover > button:hover, .discover > button:active{ .discover > button:hover,
.discover > button:active {
opacity: 80%; opacity: 80%;
cursor: pointer; cursor: pointer;
} }
@media screen and (max-width: 370px){ @media screen and (max-width: 370px) {
.discover { .discover {
width: calc(100% - 24px); width: calc(100% - 24px);
height: 33.5vw; height: 33.5vw;
border-radius: 8vw; border-radius: 8vw;
} }
.discover > button{ .discover > button {
font-size: 4.3vw; font-size: 4.3vw;
line-height: 5.4vw; line-height: 5.4vw;
padding: 2.2vw 14.8vw 2.2vw 14.8vw; padding: 2.2vw 14.8vw 2.2vw 14.8vw;
border-radius: 15px; border-radius: 15px;
} }
.discover > h2{ .discover > h2 {
font-size: 6.4vw; font-size: 6.4vw;
line-height: 8.6vw; line-height: 8.6vw;
} }

24
src/routes/homepage/homepage.svelte
View File

@ -37,23 +37,21 @@
</script> </script>
{#if !fitstTime} {#if !fitstTime}
<NavigationBarLayout> <Top headline={city + state} />
<Top headline={city + state} />
<Discover /> <Discover />
<div class="line" /> <div class="line" />
<Categories /> <Categories />
{#await getExpiriences()} {#await getExpiriences()}
<div class="w-full h-24 flex items-center justify-center"> <div class="w-full h-24 flex items-center justify-center">
<Loading /> <Loading />
</div> </div>
{:then expiriences} {:then expiriences}
<Comparment items={expiriences} /> <Comparment items={expiriences} />
{/await} {/await}
</NavigationBarLayout>
{:else} {:else}
<div class="content"> <div class="content">
<Animation /> <Animation />

9
src/routes/log_in.svelte
View File

@ -7,13 +7,14 @@
export let purpose = 'login' //possible values login, register export let purpose = 'login' //possible values login, register
let email = '' let email = 'aaahoj@ahoj.ahoj'
let password = '' let password = 'ahojahoj'
$: console.log($user) $: console.log($user)
const emailLogin = async () => { const emailLogin = async () => {
await account.createEmailSession(email, password) await user.createEmailSession(email, password)
//if (navigation.canGoBack) navigation.back()
navigate('/') navigate('/')
} }
</script> </script>
@ -48,7 +49,7 @@
<p>Continue with Google</p> <p>Continue with Google</p>
</button> </button>
<button on:click={() => account.createOAuth2Session('facebook')}> <button on:click={() => account.createOAuth2Session('facebook', `${location.origin}/create/account`, `${location.origin}/register/failed`)}>
<p>Continue with Facebook</p> <p>Continue with Facebook</p>
</button> </button>
</div> </div>

146
src/routes/profile/functions/Profile-Update.svelte
View File

@ -1,92 +1,92 @@
<script lang="ts"> <script lang="ts">
import HiddenInput from '$lib/components/Inputs/Hidden_Input_type2.svelte' import { user } from '$lib/appwrite'
import collections from '$lib/collections'
import HiddenInput from '$lib/components/Inputs/Hidden_Input_type2.svelte'
import { Query } from 'appwrite'
let c_password:string = '' let c_password: string = ''
let n_password:string = '' let n_password: string = ''
let nr_password:string = '' let nr_password: string = ''
$: userName = $userInfo?.userName
$: [userInfo] = collections.users.getDocument([Query.equal('userId', $user.$id)])
</script> </script>
<div class="container"> <div class="container">
<div class="photo"> <div class="photo">
<div class="currentPhoto"> <div class="currentPhoto" />
<button class="changePhoto"> Update your photo </button>
</div>
</div> <form class="inputs">
<button class="changePhoto"> <input type="text" bind:value={userName} placeholder="Your name" />
Update your photo <input type="email" placeholder="Your email" />
</button>
</div>
<form class="inputs"> <HiddenInput bind:value={c_password} placeholder="Your current password" />
<input type="text" placeholder="Your name"> <HiddenInput bind:value={n_password} placeholder="New password" />
<input type="email" placeholder="Your email"> <HiddenInput bind:value={nr_password} placeholder="Re-type new password" />
</form>
<HiddenInput bind:value={c_password} placeholder="Your current password" />
<HiddenInput bind:value={n_password} placeholder="New password" />
<HiddenInput bind:value={nr_password} placeholder="Re-type new password" />
</form>
</div> </div>
<style lang="scss"> <style lang="scss">
.container{ .container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
.photo{ .photo {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
gap: 8px; gap: 8px;
.currentPhoto{ .currentPhoto {
width: 100%; width: 100%;
aspect-ratio: 1/1; aspect-ratio: 1/1;
/* background */ /* background */
background: #EFEFF0; background: #efeff0;
/* subtle-light */ /* subtle-light */
border: 2px solid #AFB1B6; border: 2px solid #afb1b6;
border-radius: 200px; border-radius: 200px;
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_1380_1768' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='20' height='20'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.000488281 0H19.9601V19.9498H0.000488281V0Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_1380_1768)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.65049 1.5C3.12949 1.5 1.50049 3.227 1.50049 5.899V14.051C1.50049 16.724 3.12949 18.45 5.65049 18.45H14.3005C16.8275 18.45 18.4605 16.724 18.4605 14.051V5.899C18.4605 3.227 16.8275 1.5 14.3005 1.5H5.65049ZM14.3005 19.95H5.65049C2.27049 19.95 0.000488281 17.579 0.000488281 14.051V5.899C0.000488281 2.371 2.27049 0 5.65049 0H14.3005C17.6855 0 19.9605 2.371 19.9605 5.899V14.051C19.9605 17.579 17.6855 19.95 14.3005 19.95Z' fill='%23AFB1B6'/%3E%3C/g%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.28126 15.1799C3.09526 15.1799 2.91026 15.1119 2.76526 14.9739C2.46426 14.6899 2.45226 14.2139 2.73726 13.9149L4.26526 12.3019C5.07426 11.4429 6.43926 11.4009 7.30226 12.2109L8.26026 13.1829C8.52726 13.4529 8.96126 13.4579 9.22926 13.1939C9.33026 13.0749 11.5083 10.4299 11.5083 10.4299C11.9223 9.92789 12.5063 9.61789 13.1553 9.55389C13.8053 9.49689 14.4363 9.68589 14.9393 10.0989C14.9823 10.1339 15.0213 10.1679 17.2173 12.4229C17.5063 12.7189 17.5013 13.1939 17.2043 13.4829C16.9083 13.7739 16.4323 13.7649 16.1433 13.4689C16.1433 13.4689 14.0943 11.3659 13.9483 11.2239C13.7933 11.0969 13.5443 11.0229 13.2993 11.0469C13.0503 11.0719 12.8263 11.1909 12.6673 11.3839C10.3433 14.2029 10.3153 14.2299 10.2773 14.2669C9.41926 15.1089 8.03426 15.0949 7.19126 14.2349C7.19126 14.2349 6.26126 13.2909 6.24526 13.2719C6.01426 13.0579 5.60226 13.0719 5.35526 13.3329L3.82526 14.9459C3.67726 15.1019 3.47926 15.1799 3.28126 15.1799Z' fill='%23AFB1B6'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.55769 6.12891C6.00469 6.12891 5.55469 6.57891 5.55469 7.13291C5.55469 7.68691 6.00469 8.13791 6.55869 8.13791C7.11269 8.13791 7.56369 7.68691 7.56369 7.13291C7.56369 6.57991 7.11269 6.12991 6.55769 6.12891ZM6.55869 9.63791C5.17769 9.63791 4.05469 8.51391 4.05469 7.13291C4.05469 5.75191 5.17769 4.62891 6.55869 4.62891C7.94069 4.62991 9.06369 5.75391 9.06369 7.13291C9.06369 8.51391 7.93969 9.63791 6.55869 9.63791Z' fill='%23AFB1B6'/%3E%3C/svg%3E"); background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_1380_1768' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='20' height='20'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.000488281 0H19.9601V19.9498H0.000488281V0Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_1380_1768)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.65049 1.5C3.12949 1.5 1.50049 3.227 1.50049 5.899V14.051C1.50049 16.724 3.12949 18.45 5.65049 18.45H14.3005C16.8275 18.45 18.4605 16.724 18.4605 14.051V5.899C18.4605 3.227 16.8275 1.5 14.3005 1.5H5.65049ZM14.3005 19.95H5.65049C2.27049 19.95 0.000488281 17.579 0.000488281 14.051V5.899C0.000488281 2.371 2.27049 0 5.65049 0H14.3005C17.6855 0 19.9605 2.371 19.9605 5.899V14.051C19.9605 17.579 17.6855 19.95 14.3005 19.95Z' fill='%23AFB1B6'/%3E%3C/g%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.28126 15.1799C3.09526 15.1799 2.91026 15.1119 2.76526 14.9739C2.46426 14.6899 2.45226 14.2139 2.73726 13.9149L4.26526 12.3019C5.07426 11.4429 6.43926 11.4009 7.30226 12.2109L8.26026 13.1829C8.52726 13.4529 8.96126 13.4579 9.22926 13.1939C9.33026 13.0749 11.5083 10.4299 11.5083 10.4299C11.9223 9.92789 12.5063 9.61789 13.1553 9.55389C13.8053 9.49689 14.4363 9.68589 14.9393 10.0989C14.9823 10.1339 15.0213 10.1679 17.2173 12.4229C17.5063 12.7189 17.5013 13.1939 17.2043 13.4829C16.9083 13.7739 16.4323 13.7649 16.1433 13.4689C16.1433 13.4689 14.0943 11.3659 13.9483 11.2239C13.7933 11.0969 13.5443 11.0229 13.2993 11.0469C13.0503 11.0719 12.8263 11.1909 12.6673 11.3839C10.3433 14.2029 10.3153 14.2299 10.2773 14.2669C9.41926 15.1089 8.03426 15.0949 7.19126 14.2349C7.19126 14.2349 6.26126 13.2909 6.24526 13.2719C6.01426 13.0579 5.60226 13.0719 5.35526 13.3329L3.82526 14.9459C3.67726 15.1019 3.47926 15.1799 3.28126 15.1799Z' fill='%23AFB1B6'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.55769 6.12891C6.00469 6.12891 5.55469 6.57891 5.55469 7.13291C5.55469 7.68691 6.00469 8.13791 6.55869 8.13791C7.11269 8.13791 7.56369 7.68691 7.56369 7.13291C7.56369 6.57991 7.11269 6.12991 6.55769 6.12891ZM6.55869 9.63791C5.17769 9.63791 4.05469 8.51391 4.05469 7.13291C4.05469 5.75191 5.17769 4.62891 6.55869 4.62891C7.94069 4.62991 9.06369 5.75391 9.06369 7.13291C9.06369 8.51391 7.93969 9.63791 6.55869 9.63791Z' fill='%23AFB1B6'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
} }
.changePhoto{ .changePhoto {
font-weight: 600; font-weight: 600;
font-size: 14px; font-size: 14px;
color: #FFFFFF; color: #ffffff;
padding: 8px 12px; padding: 8px 12px;
background: #110042; background: #110042;
border-radius: 15px; border-radius: 15px;
} }
} }
.inputs{ .inputs {
padding: 0 24px; padding: 0 24px;
margin-top: 16px; margin-top: 16px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
width: 100%; width: 100%;
gap: 16px; gap: 16px;
input[type='text'], input[type='email']{ input[type='text'],
padding: 12px 24px; input[type='email'] {
background: #EEEEEE; padding: 12px 24px;
width: 100%; background: #eeeeee;
border-radius: 15px; width: 100%;
border-radius: 15px;
font-weight: 600;
font-size: 18px;
}
}
}
font-weight: 600;
font-size: 18px;
}
}
}
</style> </style>

89
src/routes/profile/profile-functions.svelte
View File

@ -1,63 +1,66 @@
<script lang="ts"> <script lang="ts">
import NavigationBarLayout from '../../lib/components/Layouts/NavigationBarLayout.svelte' import NavigationBarLayout from '../../lib/components/Layouts/NavigationBarLayout.svelte'
import { navigate } from 'svelte-routing' import { navigate } from 'svelte-routing'
import ArrowBack from '$lib/svg/ArrowBack.svelte' import ArrowBack from '$lib/svg/ArrowBack.svelte'
import ProfileUpdate from './functions/Profile-Update.svelte'; import ProfileUpdate from './functions/Profile-Update.svelte'
import Setting from './functions/Setting.svelte'; import Setting from './functions/Setting.svelte'
import Cookies from './functions/Cookies.svelte'; import Cookies from './functions/Cookies.svelte'
import InterestsUpdate from './functions/Interests-Update.svelte'; import InterestsUpdate from './functions/Interests-Update.svelte'
const functions = [{name: "profile_update", display_name:"Update Your Profile", view: ProfileUpdate}, {name: "interests_update", display_name:"Update your interests", view: InterestsUpdate}, {name: "settings", display_name:"Setting", view: Setting}, {name: "cookies", display_name:"Cookies", view: Cookies}] const functions = [
{ name: 'profile_update', display_name: 'Update Your Profile', view: ProfileUpdate },
{ name: 'interests_update', display_name: 'Update your interests', view: InterestsUpdate },
{ name: 'settings', display_name: 'Setting', view: Setting },
{ name: 'cookies', display_name: 'Cookies', view: Cookies },
]
export let params: { function: string } export let params: { function: string }
let data = functions.find(element => element.name === params.function.toLowerCase()) || null let data = functions.find((element) => element.name === params.function.toLowerCase()) || null
if (data === null){
window.location.href = '/profile'
}
if (data === null) {
window.location.href = '/profile'
}
</script> </script>
<NavigationBarLayout class="p-4"> <div class="head">
<div class="head"> <button
<button on:click={() => {navigate("/profile")}}> on:click={() => {
<ArrowBack /> navigate('/profile')
</button> }}
<h1>{data.display_name}</h1> >
</div> <ArrowBack />
</button>
<h1>{data.display_name}</h1>
</div>
<svelte:component this={data.view} />
<svelte:component this={data.view}/>
</NavigationBarLayout>
<style lang="scss"> <style lang="scss">
.head{ .head {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 16px; gap: 16px;
margin-top: 16px; margin-top: 16px;
margin-bottom: 20px; margin-bottom: 20px;
position: relative; position: relative;
h1{ h1 {
font-weight: 600; font-weight: 600;
font-size: 32px; font-size: 32px;
line-height: 40px; line-height: 40px;
color: #000000; color: #000000;
margin: 0; margin: 0;
} }
button{ button {
position: absolute; position: absolute;
left: 8px; left: 8px;
top: 50%; top: 50%;
transform: translate(0, -50%); transform: translate(0, -50%);
min-height: 30px; min-height: 30px;
} }
} }
</style> </style>

44
src/routes/profile/profile.svelte
View File

@ -1,4 +1,4 @@
<script> <script lang="ts">
import Logout from './../../lib/svg/Logout.svelte' import Logout from './../../lib/svg/Logout.svelte'
import Help from './../../lib/svg/Help.svelte' import Help from './../../lib/svg/Help.svelte'
import Line from '$lib/components/Common/Line.svelte' import Line from '$lib/components/Common/Line.svelte'
@ -13,6 +13,12 @@
import PointSmall from '$lib/svg/PointSmall.svelte' import PointSmall from '$lib/svg/PointSmall.svelte'
import InputPicture from '$lib/components/Inputs/InputPicture.svelte' import InputPicture from '$lib/components/Inputs/InputPicture.svelte'
import { account, user } from '$lib/appwrite' import { account, user } from '$lib/appwrite'
import collections from '$lib/collections'
import { Query } from 'appwrite'
export let params: { erantId: string }
//
$: [userInfo] = collections.users.getDocument([Query.equal('erantId', params.erantId)])
$: console.log($user) $: console.log($user)
@ -20,34 +26,33 @@
{ {
title: 'Account', title: 'Account',
itms: [ itms: [
{ icon: Profile, text: 'Update Your Profile', link:"/profile/profile_update"}, { icon: Profile, text: 'Update Your Profile', link: '/profile/setting/profile_update' },
{ icon: Pen, text: 'Update Your Interests', link:"/profile/interests_update"}, { icon: Pen, text: 'Update Your Interests', link: '/profile/setting/interests_update' },
], ],
}, },
{ {
title: 'Settings', title: 'Settings',
itms: [ itms: [
{ icon: Setting2, text: 'Setting', link:"/profile/settings"}, { icon: Setting2, text: 'Setting', link: '/profile/setting/settings' },
{ icon: CookieMonster, text: 'Cookies', link:"/profile/cookies"} { icon: CookieMonster, text: 'Cookies', link: '/profile/setting/cookies' },
], ],
}, },
{ {
title: 'Legal', title: 'Legal',
itms: [ itms: [
{ icon: Help, text: 'Help', link:"/"}, { icon: Help, text: 'Help', link: '/' },
{ icon: Warning, text: 'Terms & Condition', link:"/"}, { icon: Warning, text: 'Terms & Condition', link: '/' },
{ icon: Logout, text: 'Log out', link: () => user.deleteSessions() },, { icon: Logout, text: 'Log out', link: () => user.deleteSessions() },
,
], ],
}, },
] ]
</script> </script>
<NavigationBarLayout class="p-4"> {#if $userInfo}
<div class="w-full h-[188px] flex flex-wrap flex-col gap-4 justify-center items-center mb-8"> <div class="w-full h-[188px] flex flex-wrap flex-col gap-4 justify-center items-center mb-8">
<InputPicture /> <InputPicture />
<span class="font-semibold text-[24px]">User name</span> <span class="font-semibold text-[24px]">{$userInfo.userName}</span>
<SettingRow class="w-auto gap-2"> <SettingRow class="w-auto gap-2">
<PointSmall /> <PointSmall />
<span class="text-[16px] text-[#61646B]">Prague, Czechia</span> <span class="text-[16px] text-[#61646B]">Prague, Czechia</span>
@ -58,12 +63,12 @@
<div class="w-full h-auto flex flex-wrap flex-row mt-4 gap-4"> <div class="w-full h-auto flex flex-wrap flex-row mt-4 gap-4">
{#each items as { title, itms }} {#each items as { title, itms }}
<div class="mb-4 text-[18px] text-[#61646B]">{title}</div> <div class="mb-4 text-[18px] text-[#61646B]">{title}</div>
{#each itms as { icon, text, link}} {#each itms as { icon, text, link }}
{#if (typeof link === 'function')} {#if typeof link === 'function'}
<SettingRow> <SettingRow>
<svelte:component this={icon} /> <svelte:component this={icon} />
<button class="font-semibold text-[18px]" on:click={() => link()}>{text}</button> <button class="font-semibold text-[18px]" on:click={link}>{text}</button>
</SettingRow> </SettingRow>
{:else} {:else}
<SettingRow> <SettingRow>
<svelte:component this={icon} /> <svelte:component this={icon} />
@ -71,8 +76,7 @@
</SettingRow> </SettingRow>
<Line /> <Line />
{/if} {/if}
{/each} {/each}
{/each} {/each}
</div> </div>
</NavigationBarLayout> {/if}

23
src/routes/register/createAccount.svelte Normal file
View File

@ -0,0 +1,23 @@
<script lang="ts">
import { user } from '$lib/appwrite'
import collections from '$lib/collections'
import Loading from '$lib/components/Common/Loading.svelte'
import { navigate } from '$lib/router'
import { Permission, Role } from 'appwrite'
export let params
;(async () => {
await collections.users.createDocument(
{
erantId: params.erantId,
userName: $user.name,
userId: $user.$id,
},
[Permission.delete(Role.user($user.$id)), Permission.update(Role.user($user.$id))],
)
navigate('/')
})()
</script>
<div class="w-full h-full flex items-center justify-center">
<Loading />
</div>

24
src/routes/register/emailVerification.svelte Normal file
View File

@ -0,0 +1,24 @@
<script lang="ts">
import { user } from '$lib/appwrite'
import Loading from '$lib/components/Common/Loading.svelte'
import { navigate } from '$lib/router'
export let params
//register email verification
const urlParams = new URLSearchParams(location.search)
const userId = urlParams.get('userId')
const secret = urlParams.get('secret')
;(async () => {
try {
await user.updateVerification(userId, secret)
navigate(`/create/account/${params.erantId}`)
} catch (err) {
console.log(err)
}
})()
</script>
<div class="w-full h-full flex items-center justify-center">
<Loading />
</div>

111
src/routes/register/register.svelte
View File

@ -1,91 +1,76 @@
<script> <script lang="ts">
import { account } from '$lib/appwrite' import { account, user } from '$lib/appwrite'
import Loading from '$lib/components/Common/Loading.svelte'
import { navigate } from '$lib/router'
import Error from '$root/src/__error.svelte'
import { ID } from 'appwrite' import { ID } from 'appwrite'
import HiddenInput from '../../lib/components/Inputs/Hidden_Input.svelte' import HiddenInput from '../../lib/components/Inputs/Hidden_Input.svelte'
import GoogleLogo from '../../lib/svg/GoogleLogo.svelte' import GoogleLogo from '../../lib/svg/GoogleLogo.svelte'
import TopImage from '../../lib/svg/Top-Image.svelte' import TopImage from '../../lib/svg/Top-Image.svelte'
export let purpose = 'register' //possible values login, register let email = 'otaprokopec@gmail.com'
let password = 'aaaaaaaa'
let repeatPassword = 'aaaaaaaa'
let name = 'test'
let erantId = '@otik'
let email = '' let state: 'email-sent' | 'register' | 'loading' = 'register'
let password = ''
let repeatPassword = ''
let name = ''
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')
await account.create(ID.unique(), email, password, name)
await account.createEmailSession(email, password, name)
await account.createVerification(`${location.origin}/`)
}
//register email verification
/*const urlParams = new URLSearchParams(location.search)
const userId = urlParams.get('userId')
const secret = urlParams.get('secret')
;(async () => {
try { try {
await account.updateVerification(userId, secret) state = 'loading'
navigate('/') await account.create(ID.unique(), email, password, name)
} catch (err) { await account.createEmailSession(email, password)
console.log(err) await account.createVerification(`${location.origin}/register/emailverification/${erantId}`)
state = 'email-sent'
} catch (error) {
state = 'register'
} }
})()*/ }
</script> </script>
<div class="main"> {#if state === 'register'}
<!--Top image static link form lib/svg--> <div class="main">
<div class="top-image"> <div class="top-image">
<TopImage /> <TopImage />
</div> </div>
<!--Welcome sign 2 options for Log in and for register--> <h1 class="headline">Register</h1>
<h1 class="headline">
{#if purpose === 'login'}
Welcome Back
{:else}
Register
{/if}
</h1>
<!--2 forms from components--> <div class="form">
<div class="form">
{#if purpose === 'login'}
<form>
<input type="text" placeholder="E-mail" autocomplete="email" required />
<HiddenInput placeholder="Password" />
<input type="submit" value="Sign in" />
</form>
{:else}
<form> <form>
<input bind:value={name} type="text" placeholder="Name" autocomplete="full-name" required /> <input bind:value={name} type="text" placeholder="Name" autocomplete="full-name" required />
<input bind:value={email} type="text" placeholder="E-mail" autocomplete="email" required /> <input bind:value={email} type="text" placeholder="E-mail" autocomplete="email" required />
<input bind:value={erantId} type="text" placeholder="E-mail" autocomplete="email" required />
<HiddenInput bind:value={password} placeholder="Password" /> <HiddenInput bind:value={password} placeholder="Password" />
<HiddenInput bind:value={repeatPassword} placeholder="Re-type password" /> <HiddenInput bind:value={repeatPassword} placeholder="Re-type password" />
<input class="cursor-pointer" on:click={() => register()} type="submit" value="Sign up" /> <input class="cursor-pointer" on:click={() => register()} type="button" value="Sign up" />
</form> </form>
{/if} </div>
</div>
<div class="continue_with"> <div class="continue_with">
<button on:click={() => account.createOAuth2Session('google', '/', '/register/failed')}> <button on:click={() => account.createOAuth2Session('google', location.origin, `${location.origin}/register/failed`)}>
<GoogleLogo /> <GoogleLogo />
<p>Continue with Google</p> <p>Continue with Google</p>
</button> </button>
<button on:click={() => account.createOAuth2Session('facebook', '/', '/register/failed')}> <button on:click={() => account.createOAuth2Session('facebook', `${location.origin}/`, `${location.origin}/register/failed`)}>
<p>Continue with Facebook</p> <p>Continue with Facebook</p>
</button> </button>
</div> </div>
<div class="LR_switch"> <div class="LR_switch">
<!--LR switch = login / register switch-->
{#if purpose === 'login'}
<p>Don’t have an account? <a href="/register">Sign-up</a></p>
{:else}
<p>Already have an account? <a href="/login">Log In</a></p> <p>Already have an account? <a href="/login">Log In</a></p>
{/if} </div>
</div> </div>
</div> {:else if state === 'email-sent'}
<div class="w-full h-full flex justify-center items-center">email has been sent</div>
{:else if state === 'loading'}
<div class="w-full h-full flex items-center justify-center">
<Loading />
</div>
{/if}
<style lang="scss"> <style lang="scss">
$gap: 20px; $gap: 20px;
@ -217,7 +202,7 @@
line-height: 28px; line-height: 28px;
} }
input[type='submit'] { input[type='button'] {
background-color: #4263eb; background-color: #4263eb;
color: white; color: white;