From 8cc6ca417ab48e7f234b8a75bdc69f04298cb72d Mon Sep 17 00:00:00 2001
From: Schenky <jakub.schenk@post.cz>
Date: Tue, 14 Mar 2023 15:38:51 +0100
Subject: [PATCH] Update 14.3.2023

---
 package.json                                  |   2 +-
 src/lib/components/Interests/Interests.svelte | 181 ++++++++++++++++++
 .../Layouts/NavigationBarLayout.svelte        |   2 +-
 src/routes/explore/Components/Search.svelte   |   3 +
 .../profile/functions/Interests-Update.svelte |  86 ++++-----
 src/routes/profile/profile-functions.svelte   |  71 ++++---
 src/routes/profile/profile.svelte             |   3 +-
 7 files changed, 266 insertions(+), 82 deletions(-)
 create mode 100644 src/lib/components/Interests/Interests.svelte

diff --git a/package.json b/package.json
index 6a2cb96..16ecaef 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host",
     "build": "vite build",
     "preview": "vite preview",
     "appwrite": "docker compose -f ./appwrite/docker-compose.yml up"
diff --git a/src/lib/components/Interests/Interests.svelte b/src/lib/components/Interests/Interests.svelte
new file mode 100644
index 0000000..27e124f
--- /dev/null
+++ b/src/lib/components/Interests/Interests.svelte
@@ -0,0 +1,181 @@
+<script lang="ts">
+    import { user } from '$lib/appwrite'
+	import collections from '$lib/collections'
+	import { Query } from 'appwrite'
+    import { navigate } from 'svelte-routing'
+
+    export let current_state = 1
+
+    $: [userInfo] = collections.users.getDocument([Query.equal('userId', $user?.$id || '')])
+	$: console.log($user)
+
+    let container
+    let scroll_distance
+
+    let selected_inputs = {}
+
+    function change_state(){
+        const input = event.currentTarget as HTMLInputElement
+
+        if (input){
+            var input_type = input.parentElement.parentElement.parentElement.classList[1]
+            selected_inputs[input_type] = input.parentElement.querySelector("p").innerText
+            console.log(selected_inputs)
+        }
+
+        if (current_state + 1 === 4){
+            navigate(`/profile/${$userInfo?.erantId}`)
+            return
+        }
+
+        setTimeout(() => {
+            current_state = current_state + 1
+
+            container.scroll({
+                top: 0,
+                left: scroll_distance * (current_state-1),
+                behavior: 'smooth'
+            })
+        }, 300)
+    }
+</script>
+
+<div bind:this={container} bind:clientWidth={scroll_distance} class="container">
+    <div class="container_page interests">
+        <h2>What are you most interested in?</h2>
+
+        <div class="radio_container">
+            <label class="item">
+                <input type="radio" on:change={change_state} name="interests">
+                <div>
+                    <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg"/>
+                    <p>Fun</p>
+                </div>
+            </label>
+
+            <label class="item">
+                <input type="radio" on:change={change_state} name="interests">
+                <div>
+                    <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg"/>
+                    <p>Fun</p>
+                </div>
+            </label>
+        </div>
+    </div>
+
+    <div class="container_page travel">
+        <h2>Who do you like to travel with?</h2>
+        <div class="radio_container">
+            <label class="item">
+                <input type="radio" on:change={change_state} name="travel">
+                <div>
+                    <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg"/>
+                    <p>Fun</p>
+                </div>
+            </label>
+        </div>
+    </div>
+
+    <div class="container_page to_us">
+        <h2>What brought you to our app?</h2>
+        <div class="radio_container">
+            <label class="item">
+                <input type="radio" on:change={change_state} name="to_us">
+                <div>
+                    <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg"/>
+                    <p>Fun</p>
+                </div>
+            </label>
+        </div>
+    </div>
+</div>
+
+<style lang="scss">
+    .container{
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+
+        gap: 10px;
+        overflow-x: hidden;
+        overflow-y: hidden;
+        white-space: nowrap;
+
+        position: relative;
+        scroll-snap-type: x mandatory;
+
+        -ms-overflow-style: none;  /* IE and Edge */
+        scrollbar-width: none;  /* Firefox */
+
+        height: 100%;
+
+        &::-webkit-scrollbar {
+            display: none;
+        }
+        .container_page {
+            min-width: 100%;
+            min-height: 100%;
+
+            padding: 0px 22px;
+            scroll-snap-align: center;
+
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+            h2{
+                text-align: center;
+                font-weight: 600;
+                font-size: 18px;
+            }
+
+            .radio_container {
+                display: flex;
+                flex-wrap: wrap;
+                gap: 10px;
+                .item{
+                    input{
+                        display: none;
+                    }
+                    div{
+                        display: flex;
+                        flex-direction: column;
+                        align-self: center;
+                        text-align: center;
+
+                        position: relative;
+                        gap: 8px;
+                        padding: 7px;
+                        width: 145px;
+
+                        /* Main Blue */
+                        border-radius: 20px;
+                        position: relative;
+                        border: 1px solid #4264eb00;
+
+                        img {
+                            aspect-ratio: 1/1;
+                            object-fit: cover;
+                            border-radius: 18px;
+                            width: 100%;
+                        }
+
+                        p{
+                            font-weight: 700;
+                            font-size: 17px;
+                            padding: 0;
+                        }
+                    }
+                }
+
+                .item:has(input:checked){
+                    div{
+                        border: 1px dashed #4263EB;
+                        p{
+                            color: #4263EB;
+                        }
+                    }
+                }
+            }
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/lib/components/Layouts/NavigationBarLayout.svelte b/src/lib/components/Layouts/NavigationBarLayout.svelte
index 2240d86..07e474f 100644
--- a/src/lib/components/Layouts/NavigationBarLayout.svelte
+++ b/src/lib/components/Layouts/NavigationBarLayout.svelte
@@ -44,7 +44,7 @@
 	<div class={'section w-full h-[calc(100%-100px)] overflow-auto ' + className}><slot /></div>
 	<div class="footer">
 		{#each items as { name, url, image_url }}
-			{#if location.pathname === url || location.pathname.includes(url + '/')}
+			{#if location.pathname === url || location.pathname.includes("/" + url.split("/")[0] + '/')}
 				<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} />
 				</FooterItem>
diff --git a/src/routes/explore/Components/Search.svelte b/src/routes/explore/Components/Search.svelte
index eabf720..4c0b4f7 100644
--- a/src/routes/explore/Components/Search.svelte
+++ b/src/routes/explore/Components/Search.svelte
@@ -50,11 +50,14 @@
                 transition: flex-grow 2s;
                 transition-delay: 2000ms;
                 
+                border: none;
+                
                 &::placeholder{
                     color: #AFB1B6;
                 }
                 &:focus, &:focus-visible {
                     flex-grow: 1;
+                    box-shadow: none;
                     border: none;
                     outline: none;
                 }
diff --git a/src/routes/profile/functions/Interests-Update.svelte b/src/routes/profile/functions/Interests-Update.svelte
index 45a8f64..c61df4d 100644
--- a/src/routes/profile/functions/Interests-Update.svelte
+++ b/src/routes/profile/functions/Interests-Update.svelte
@@ -1,70 +1,58 @@
 <script lang="ts">
-    import Line from "$lib/components/Common/Line.svelte";
-    function select_tag(){
-        const target = event.currentTarget as HTMLElement
+	import Interests from "$lib/components/Interests/Interests.svelte"
 
-        console.log(target)
-        if (target.parentElement.classList.contains("tag-container-selected")){
-            target.parentElement.parentElement.querySelector(".tag-container").appendChild(target)
-        }
-        else{
-            target.parentElement.parentElement.querySelector(".tag-container-selected").appendChild(target)
-        }
-
-    }
+    let current_state = 1
 </script>
 
 <div class="container">
-    <p class="headline">What are you most interested in?</p>
-    <div class="tag-container-selected">
-
-    </div>
-    <Line />
-    <div class="tag-container">
-        <button class="tag" on:click={select_tag}>History</button>
-        <button class="tag" on:click={select_tag}>Pubs</button>
+    <Interests bind:current_state={current_state} />
+    
+    <div class="navigation">
+        {#each Array(3) as _, index (index)}
+            {#if index === current_state-1}
+                <div class="selected" />
+            {:else}
+                <div />
+            {/if}   
+        {/each}
     </div>
 </div>
 
 <style lang="scss">
     .container{
-        padding: 0 24px;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: flex-start;
+        flex-grow: 1;
+        overflow-y: scroll;
+        overflow-x: hidden;
 
-        text-align: left;
-        .headline{
-            width: 100%;
-            /* Label Large - Source Sans Pro/Medium 16/24 . +0.2 */
+        position: relative;
 
-            font-family: 'Source Sans Pro';
-            font-style: normal;
-            font-weight: 600;
-            font-size: 18px;
-            line-height: 28px;
-            /* or 156% */
+        .navigation {
+            position: absolute;
+            height: 12px;
+
+            bottom: 15px;
+            left: 50%;
+
+            transform: translate(-50%, -0%);
 
             display: flex;
             align-items: center;
-            letter-spacing: 0.2px;
+            gap: 8px;
 
-            color: #000000;
-        }
+            div{
+                background-color: #BBD1C5;
+                border-radius: 12px;
 
-        .tag-container, .tag-container-selected{
-            width: 100%;
-            display: flex;
-            margin: 16px 0;
-            flex-wrap: wrap;
-            gap: 16px 24px;
-            .tag{
-                padding: 4px 10px;
-                background: #FFFFFF;
-                box-shadow: 0px 0px 20px -6px rgba(0, 0, 0, 0.45);
-                border-radius: 6px;
+                width: 12px;
+                height: 12px;
+            }
+
+            .selected{
+                transition-delay: 0.25s;
+                width: 46px;
+                background-color: #14A6AE;
             }
         }
+
     }
 </style>
\ No newline at end of file
diff --git a/src/routes/profile/profile-functions.svelte b/src/routes/profile/profile-functions.svelte
index 6b143ac..a99b878 100644
--- a/src/routes/profile/profile-functions.svelte
+++ b/src/routes/profile/profile-functions.svelte
@@ -24,43 +24,54 @@
 	}
 </script>
 
-<div class="head">
-	<button
-		on:click={() => {
-			navigate('/profile')
-		}}
-	>
-		<ArrowBack />
-	</button>
-	<h1>{data.display_name}</h1>
+<div class="main">
+	<div class="head">
+		<button
+			on:click={() => {
+				navigate('/profile')
+			}}
+		>
+			<ArrowBack />
+		</button>
+		<h1>{data.display_name}</h1>
+	</div>
+	
+	<svelte:component this={data.view} />
 </div>
 
-<svelte:component this={data.view} />
-
 <style lang="scss">
-	.head {
+	.main{
 		display: flex;
+		flex-direction: column;
 		align-items: center;
-		justify-content: center;
-		gap: 16px;
-		margin-top: 16px;
-		margin-bottom: 20px;
+		justify-content: stretch;
+		height: 100%;
+		.head {
+			width: 100%;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			gap: 16px;
+			margin-top: 16px;
+			margin-bottom: 20px;
 
-		position: relative;
-		h1 {
-			font-weight: 600;
-			font-size: 32px;
-			line-height: 40px;
+			position: relative;
+			
+			h1 {
+				font-weight: 600;
+				font-size: 32px;
+				line-height: 40px;
 
-			color: #000000;
-			margin: 0;
-		}
-		button {
-			position: absolute;
-			left: 8px;
-			top: 50%;
-			transform: translate(0, -50%);
-			min-height: 30px;
+				color: #000000;
+				margin: 0;
+			}
+			button {
+				position: absolute;
+				left: 8px;
+				top: 50%;
+				transform: translate(0, -50%);
+				min-height: 30px;
+			}
 		}
 	}
 </style>
diff --git a/src/routes/profile/profile.svelte b/src/routes/profile/profile.svelte
index 1594fdd..7fbf501 100644
--- a/src/routes/profile/profile.svelte
+++ b/src/routes/profile/profile.svelte
@@ -16,9 +16,10 @@
 	import collections from '$lib/collections'
 	import { Query } from 'appwrite'
 
+
 	export let params: { erantId: string }
 	//
-	$: [userInfo] = collections.users.getDocument([Query.equal('erantId', params.erantId)])
+	$: [userInfo] = collections.users.getDocument([Query.equal('userID', params.erantId)])
 
 	$: console.log($user)