erant map - checkpoint, fix future problems in exp
This commit is contained in:
parent
a8b376e369
commit
50b731341a
|
@ -1,4 +1,4 @@
|
||||||
export type checkPoint = {
|
export type CheckPoint = {
|
||||||
$id: string
|
$id: string
|
||||||
CPAfter: string
|
CPAfter: string
|
||||||
CPAnswerID: string
|
CPAnswerID: string
|
||||||
|
@ -12,7 +12,7 @@ export type checkPoint = {
|
||||||
CPType: 'CHECKBOX' | 'TEXT' | 'INFO' | 'RADIO' | 'NUMBER'
|
CPType: 'CHECKBOX' | 'TEXT' | 'INFO' | 'RADIO' | 'NUMBER'
|
||||||
}
|
}
|
||||||
|
|
||||||
export type expirience = {
|
export type Experience = {
|
||||||
ExpApproved: boolean
|
ExpApproved: boolean
|
||||||
ExpCpsID: string[]
|
ExpCpsID: string[]
|
||||||
ExpCategory?: string
|
ExpCategory?: string
|
||||||
|
@ -27,5 +27,5 @@ export type expirience = {
|
||||||
ExpTestingCode: string
|
ExpTestingCode: string
|
||||||
ExpURL: string
|
ExpURL: string
|
||||||
UserID: string
|
UserID: string
|
||||||
checkPoint: Array<checkPoint>
|
checkPoint: Array<CheckPoint>
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,11 +1,13 @@
|
||||||
<script>
|
<script lang="ts">
|
||||||
import { Marker } from '@beyonk/svelte-mapbox'
|
import { Marker } from '@beyonk/svelte-mapbox'
|
||||||
|
import { Tooltip } from 'flowbite-svelte'
|
||||||
import { createEventDispatcher, getContext } from 'svelte'
|
import { createEventDispatcher, getContext } from 'svelte'
|
||||||
const dispatch = createEventDispatcher()
|
const dispatch = createEventDispatcher()
|
||||||
|
|
||||||
export let lat = 0
|
export let lat = 0
|
||||||
export let lng = 0
|
export let lng = 0
|
||||||
export let user = { lat: 0, 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
|
export let round = (1 / 110.574 / 1000) * 12 //cca 12m nutno pozměnit!!!!!!!!!! tento komentář nemazat
|
||||||
let Mlat = [lat - round, lat + round]
|
let Mlat = [lat - round, lat + round]
|
||||||
|
@ -16,6 +18,7 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Marker popup={false} {lat} {lng}>
|
<Marker popup={false} {lat} {lng}>
|
||||||
|
<button on:click>
|
||||||
<svg width="28" height="27" viewBox="0 0 112 108" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="28" height="27" viewBox="0 0 112 108" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path
|
<path
|
||||||
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"
|
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"
|
||||||
|
@ -45,4 +48,8 @@
|
||||||
</linearGradient>
|
</linearGradient>
|
||||||
</defs>
|
</defs>
|
||||||
</svg>
|
</svg>
|
||||||
|
</button>
|
||||||
|
{#if popup}
|
||||||
|
<Tooltip class="absolute">{popup}</Tooltip>
|
||||||
|
{/if}
|
||||||
</Marker>
|
</Marker>
|
||||||
|
|
|
@ -2,6 +2,8 @@ import { databases } from '$lib/appwrite'
|
||||||
import { Query } from 'appwrite'
|
import { Query } from 'appwrite'
|
||||||
import database from 'svelte-appwrite-client/src/lib/database'
|
import database from 'svelte-appwrite-client/src/lib/database'
|
||||||
import { getLocationDataFromLatAndLong } from '../locations'
|
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) => {
|
export const load = async (pathName: string, previewQuestionsCount?: number, preview?: Function) => {
|
||||||
const checkPoints = []
|
const checkPoints = []
|
||||||
|
@ -44,14 +46,31 @@ export const answer = async (checkPointId: string, answer: any) => {
|
||||||
|
|
||||||
export const getExpiriences = async () => {
|
export const getExpiriences = async () => {
|
||||||
const expiriences = (await databases.listDocuments('63cef30d6da945dd4250', '63cef4bd210fdf2e5888', [Query.equal('ExpApproved', true)])).documents
|
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) {
|
for (const expirience of expiriences) {
|
||||||
items.push({
|
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
|
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
|
||||||
|
}
|
||||||
|
|
|
@ -13,7 +13,7 @@
|
||||||
|
|
||||||
<div class="options">
|
<div class="options">
|
||||||
{#each items as item}
|
{#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}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -2,6 +2,9 @@
|
||||||
import NavigationBarLayout from '$lib/components/Layouts/NavigationBarLayout.svelte'
|
import NavigationBarLayout from '$lib/components/Layouts/NavigationBarLayout.svelte'
|
||||||
import Erantmap from '$lib/components/Map/Erantmap.svelte'
|
import Erantmap from '$lib/components/Map/Erantmap.svelte'
|
||||||
import LocationRequest from '$lib/components/Map/LocationRequest.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'
|
import { onMount } from 'svelte'
|
||||||
|
|
||||||
let user: { lat: number; lng: number } = { lat: 0, lng: 0 }
|
let user: { lat: number; lng: number } = { lat: 0, lng: 0 }
|
||||||
|
@ -14,28 +17,19 @@
|
||||||
granted = true
|
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>
|
</script>
|
||||||
|
|
||||||
<NavigationBarLayout>
|
<NavigationBarLayout>
|
||||||
{#if granted}
|
{#if granted}
|
||||||
<!-- Conditionally center on current location if granted is true. -->
|
<!-- 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}
|
{:else}
|
||||||
<!--If not granted, the LocationRequest component is displayed and when it is granted center map. -->
|
<!--If not granted, the LocationRequest component is displayed and when it is granted center map. -->
|
||||||
<LocationRequest on:locationGranted={() => (granted = true)} />
|
<LocationRequest on:locationGranted={() => (granted = true)} />
|
||||||
|
|
Loading…
Reference in New Issue