erant map - checkpoint, fix future problems in exp

src/lib/TStypes/experiences.ts

@@ -1,4 +1,4 @@
-export type checkPoint = {
+export type CheckPoint = {
 	$id: string
 	CPAfter: string
 	CPAnswerID: string
@@ -12,7 +12,7 @@ export type checkPoint = {
 	CPType: 'CHECKBOX' | 'TEXT' | 'INFO' | 'RADIO' | 'NUMBER'
 }
 
-export type expirience = {
+export type Experience = {
 	ExpApproved: boolean
 	ExpCpsID: string[]
 	ExpCategory?: string
@@ -27,5 +27,5 @@ export type expirience = {
 	ExpTestingCode: string
 	ExpURL: string
 	UserID: string
-	checkPoint: Array<checkPoint>
+	checkPoint: Array<CheckPoint>
 }

src/lib/components/Map/Marker.svelte

@@ -1,11 +1,13 @@
-<script>
+<script lang="ts">
 	import { Marker } from '@beyonk/svelte-mapbox'
+	import { Tooltip } from 'flowbite-svelte'
 	import { createEventDispatcher, getContext } from 'svelte'
 	const dispatch = createEventDispatcher()
 
 	export let lat = 0
 	export let lng = 0
 	export let user = { lat: 0, lng: 0 }
+	export let popup: string | null = null
 
 	export let round = (1 / 110.574 / 1000) * 12 //cca 12m nutno pozměnit!!!!!!!!!! tento komentář nemazat
 	let Mlat = [lat - round, lat + round]
@@ -16,33 +18,38 @@
 </script>
 
 <Marker popup={false} {lat} {lng}>
-	<svg width="28" height="27" viewBox="0 0 112 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<button on:click>
-		<path
+		<svg width="28" height="27" viewBox="0 0 112 108" fill="none" xmlns="http://www.w3.org/2000/svg">
-			d="M64.488 103.367L89.7283 62.4464C106.409 35.4037 86.9542 0.547852 55.1801 0.547852C22.7617 0.547852 3.42399 36.6756 21.4041 63.6502L48.0703 103.656C52.0131 109.571 60.7561 109.417 64.488 103.367Z"
+			<path
-			fill="url(#paint0_radial_1068_1071)"
+				d="M64.488 103.367L89.7283 62.4464C106.409 35.4037 86.9542 0.547852 55.1801 0.547852C22.7617 0.547852 3.42399 36.6756 21.4041 63.6502L48.0703 103.656C52.0131 109.571 60.7561 109.417 64.488 103.367Z"
-			fill-opacity="0.4"
+				fill="url(#paint0_radial_1068_1071)"
-		/>
+				fill-opacity="0.4"
-		<path
+			/>
-			d="M63.4756 91.4251L82.4058 60.4583C94.9161 39.9936 80.3252 13.6162 56.4947 13.6162C32.1808 13.6162 17.6776 40.9562 31.1627 61.3693L51.1623 91.644C54.1194 96.1203 60.6766 96.0037 63.4756 91.4251Z"
+			<path
-			fill="url(#paint1_linear_1068_1071)"
+				d="M63.4756 91.4251L82.4058 60.4583C94.9161 39.9936 80.3252 13.6162 56.4947 13.6162C32.1808 13.6162 17.6776 40.9562 31.1627 61.3693L51.1623 91.644C54.1194 96.1203 60.6766 96.0037 63.4756 91.4251Z"
-		/>
+				fill="url(#paint1_linear_1068_1071)"
-		<circle cx="55.6164" cy="35.6164" r="11.6164" fill="white" />
+			/>
-		<defs>
+			<circle cx="55.6164" cy="35.6164" r="11.6164" fill="white" />
-			<radialGradient
+			<defs>
-				id="paint0_radial_1068_1071"
+				<radialGradient
-				cx="0"
+					id="paint0_radial_1068_1071"
-				cy="0"
+					cx="0"
-				r="1"
+					cy="0"
-				gradientUnits="userSpaceOnUse"
+					r="1"
-				gradientTransform="translate(55.1781 54.2739) rotate(90.2138) scale(47.7265 37.7293)"
+					gradientUnits="userSpaceOnUse"
-			>
+					gradientTransform="translate(55.1781 54.2739) rotate(90.2138) scale(47.7265 37.7293)"
-				<stop offset="0.865366" stop-color="#FFD325" />
+				>
-				<stop offset="1" stop-color="#FFE066" stop-opacity="0.1" />
+					<stop offset="0.865366" stop-color="#FFD325" />
-			</radialGradient>
+					<stop offset="1" stop-color="#FFE066" stop-opacity="0.1" />
-			<linearGradient id="paint1_linear_1068_1071" x1="40.9078" y1="34.3967" x2="71.9265" y2="73.4203" gradientUnits="userSpaceOnUse">
+				</radialGradient>
-				<stop stop-color="#FFBF00" />
+				<linearGradient id="paint1_linear_1068_1071" x1="40.9078" y1="34.3967" x2="71.9265" y2="73.4203" gradientUnits="userSpaceOnUse">
-				<stop offset="1" stop-color="#DD8706" />
+					<stop stop-color="#FFBF00" />
-			</linearGradient>
+					<stop offset="1" stop-color="#DD8706" />
-		</defs>
+				</linearGradient>
-	</svg>
+			</defs>
+		</svg>
+	</button>
+	{#if popup}
+		<Tooltip class="absolute">{popup}</Tooltip>
+	{/if}
 </Marker>

src/lib/utils/database/game.ts

@@ -2,6 +2,8 @@ import { databases } from '$lib/appwrite'
 import { Query } from 'appwrite'
 import database from 'svelte-appwrite-client/src/lib/database'
 import { getLocationDataFromLatAndLong } from '../locations'
+import { writable } from 'svelte/store'
+import { Experience } from '$lib/TStypes/experiences'
 
 export const load = async (pathName: string, previewQuestionsCount?: number, preview?: Function) => {
 	const checkPoints = []
@@ -44,14 +46,31 @@ export const answer = async (checkPointId: string, answer: any) => {
 
 export const getExpiriences = async () => {
 	const expiriences = (await databases.listDocuments('63cef30d6da945dd4250', '63cef4bd210fdf2e5888', [Query.equal('ExpApproved', true)])).documents
-	let items: Array<{ location: string; name: string; link: string }> = []
+	let items = []
 	for (const expirience of expiriences) {
 		items.push({
-			location: (await getLocationDataFromLatAndLong(expirience.ExpLocation[0], expirience.ExpLocation[1])).city,
+			city: (await getLocationDataFromLatAndLong(expirience.ExpLocation[0], expirience.ExpLocation[1])).city,
-			name: expirience.ExpName,
+			...expirience,
-			link: `${expirience.ExpURL}`,
 		})
 	}
 
 	return items
 }
+
+export const getExpiriencesAsStore = () => {
+	const store = writable([])
+	const loading = writable<boolean>(true)
+	databases.listDocuments('63cef30d6da945dd4250', '63cef4bd210fdf2e5888', [Query.equal('ExpApproved', true)]).then(async ({ documents }) => {
+		let items: Array<any> = []
+		for (const expirience of documents) {
+			items.push({
+				city: (await getLocationDataFromLatAndLong(expirience.ExpLocation[0], expirience.ExpLocation[1])).city,
+				...expirience,
+			})
+		}
+		loading.set(false)
+		store.set(items)
+	})
+
+	return [store, loading] as const
+}

src/routes/homepage/Components/Comparment.svelte

@@ -13,7 +13,7 @@
 
 	<div class="options">
 		{#each items as item}
-			<CompartmentItem on:click={() => navigate(`${item.link}`)} price={item.price} location={item.location} name={item.name} image={item.image} />
+			<CompartmentItem on:click={() => navigate(`${item.ExpURL}`)} price={item.price} location={item.location} name={item.ExpName} image={item.image} />
 		{/each}
 	</div>
 </div>

src/routes/map/map.svelte

@@ -2,6 +2,9 @@
 	import NavigationBarLayout from '$lib/components/Layouts/NavigationBarLayout.svelte'
 	import Erantmap from '$lib/components/Map/Erantmap.svelte'
 	import LocationRequest from '$lib/components/Map/LocationRequest.svelte'
+	import Marker from '$lib/components/Map/Marker.svelte'
+	import { navigate } from '$lib/router'
+	import { getExpiriencesAsStore } from '$lib/utils/database/game'
 	import { onMount } from 'svelte'
 
 	let user: { lat: number; lng: number } = { lat: 0, lng: 0 }
@@ -14,28 +17,19 @@
 		granted = true
 	}
 
-	onMount(() => {
+	navigator.geolocation.getCurrentPosition(handleLocationGranted)
-		if ('permissions' in navigator) {
+
-			navigator.permissions.query({ name: 'geolocation' }).then((permissionStatus) => {
+	$: [experiences] = getExpiriencesAsStore()
-				if (permissionStatus.state === 'granted') {
-					navigator.geolocation.getCurrentPosition(
-						(position) => {
-							handleLocationGranted(position)
-						},
-						(error) => {
-							console.log(error)
-						},
-					)
-				}
-			})
-		}
-	})
 </script>
 
 <NavigationBarLayout>
 	{#if granted}
 		<!-- Conditionally center on current location if granted is true. -->
-		<Erantmap class="w-full h-full" center={{ lng: user.lng, lat: user.lat }} bind:user />
+		<Erantmap class="w-full h-full" center={{ lng: user.lng, lat: user.lat }} bind:user>
+			{#each $experiences as experience}
+				<Marker popup={experience.ExpName} on:click={() => navigate(`/${experience.ExpURL}`)} lat={experience.ExpLocation[0]} lng={experience.ExpLocation[1]} {user} />
+			{/each}
+		</Erantmap>
 	{:else}
 		<!--If not granted, the LocationRequest component is displayed and when it is granted center map. -->
 		<LocationRequest on:locationGranted={() => (granted = true)} />