alex/voyage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add type change functionality to AdventureCard component

Browse Source
This commit is contained in:
Sean Morley
2024-07-22 10:45:25 -04:00
parent e093be31af
commit fe05e5c6cf
4 changed files with 74 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/routes/map/+page.server.ts
View File

@@ -25,7 +25,8 @@ export const load = (async (event) => {
.map((adventure) => {
return {
lngLat: [adventure.longitude, adventure.latitude] as [number, number],
name: adventure.name
name: adventure.name,
type: adventure.type
};
});
return {

56
frontend/src/routes/map/+page.svelte
View File

@@ -1,9 +1,11 @@
<script>
// @ts-nocheck
import { DefaultMarker, MapEvents, MapLibre, Popup } from 'svelte-maplibre';
import { DefaultMarker, MapEvents, MapLibre, Popup, Marker } from 'svelte-maplibre';
export let data;
let clickedName = '';
let markers = data.props.markers;
console.log(markers);
</script>
@@ -13,14 +15,50 @@
class="relative aspect-[9/16] max-h-[70vh] w-full sm:aspect-video sm:max-h-full"
standardControls
>
{#each data.props.markers as { lngLat, name }}
<!-- Unlike the custom marker example, default markers do not have mouse events,
and popups only support the default openOn="click" behavior -->
<DefaultMarker {lngLat}>
<Popup offset={[0, -10]}>
<div class="text-lg font-bold">{name}</div>
</Popup>
</DefaultMarker>
{#each data.props.markers as { lngLat, name, type }}
{#if type == 'visited'}
<Marker
{lngLat}
on:click={() => (clickedName = name)}
class="grid h-8 w-8 place-items-center rounded-full border border-gray-200 bg-red-300 text-black shadow-2xl focus:outline-2 focus:outline-black"
>
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="12" cy="12" r="10" stroke="red" stroke-width="2" fill="red" />
</svg>
<Popup openOn="click" offset={[0, -10]}>
<div class="text-lg font-bold">{name}</div>
<p class="font-semibold text-md">Visited</p>
</Popup>
</Marker>
{/if}
{#if type == 'planned'}
<Marker
{lngLat}
on:click={() => (clickedName = name)}
class="grid h-8 w-8 place-items-center rounded-full border border-gray-200 bg-blue-300 text-black shadow-2xl focus:outline-2 focus:outline-black"
>
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="12" cy="12" r="10" stroke="blue" stroke-width="2" fill="blue" />
</svg>
<Popup openOn="click" offset={[0, -10]}>
<div class="text-lg font-bold">{name}</div>
<p class="font-semibold text-md">Planned</p>
</Popup>
</Marker>
{/if}
{/each}
</MapLibre>