Docker/AdventureLog
Docker/AdventureLog
1
0
Fork 0
mirror of https://github.com/seanmorley15/AdventureLog.git synced 2025-07-24 23:39:37 +02:00
Code Issues Releases Activity

Update adventure type label handling and improve map marker display

Browse source
This commit is contained in:
Sean Morley 2024-11-02 21:29:42 -04:00
parent 07263c5697
commit 6137411b84
2 changed files with 23 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

12
frontend/src/lib/index.ts
View file

@ -279,11 +279,13 @@ export let ADVENTURE_TYPE_ICONS = {
other: '❓'
};
type AdventureType = keyof typeof ADVENTURE_TYPE_ICONS;
export function getAdventureTypeLabel(type: AdventureType) {
const typeObj = ADVENTURE_TYPE_ICONS[type];
return typeObj;
export function getAdventureTypeLabel(type: string) {
// return the emoji ADVENTURE_TYPE_ICONS label for the given type if not found return ? emoji
if (type in ADVENTURE_TYPE_ICONS) {
return ADVENTURE_TYPE_ICONS[type as keyof typeof ADVENTURE_TYPE_ICONS];
} else {
return '❓';
}
}
export function getRandomBackground() {

36
frontend/src/routes/map/+page.svelte
View file

@ -3,6 +3,7 @@
import { DefaultMarker, MapEvents, MapLibre, Popup, Marker } from 'svelte-maplibre';
import { t } from 'svelte-i18n';
import type { Adventure, VisitedRegion } from '$lib/types.js';
import { getAdventureTypeLabel } from '$lib';
export let data;
let createModalOpen: boolean = false;
@ -20,6 +21,14 @@
);
}
// Reset the longitude and latitude when the newMarker is set to null so new adventures are not created at the wrong location
$: {
if (!newMarker) {
newLongitude = null;
newLatitude = null;
}
}
console.log(data);
let showVisited: boolean = true;
@ -110,24 +119,11 @@
lngLat={[adventure.longitude, adventure.latitude]}
class="grid h-8 w-8 place-items-center rounded-full border border-gray-200 bg-{adventure.is_visited
? 'red'
: 'blue'}-300 text-black shadow-md"
: '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={adventure.is_visited ? 'red' : 'blue'}
stroke-width="2"
fill={adventure.is_visited ? 'red' : 'blue'}
/>
</svg>
<span class="text-xl">
{getAdventureTypeLabel(adventure.type)}
</span>
<Popup openOn="click" offset={[0, -10]}>
<div class="text-lg text-black font-bold">{adventure.name}</div>
<p class="font-semibold text-black text-md">
@ -167,7 +163,7 @@
{#each visitedRegions as region}
{#if showGeo}
<Marker
lngLat={[region.latitude, region.longitude]}
lngLat={[region.longitude, region.latitude]}
class="grid h-8 w-8 place-items-center rounded-full border border-gray-200 bg-green-300 text-black shadow-md"
>
<svg
@ -180,8 +176,8 @@
<circle cx="12" cy="12" r="10" stroke="green" stroke-width="2" fill="green" />
</svg>
<Popup openOn="click" offset={[0, -10]}>
<div class="text-lg text-black font-bold">{name}</div>
<p class="font-semibold text-black text-md">{region.name}</p>
<div class="text-lg text-black font-bold">{region.name}</div>
<p class="font-semibold text-black text-md">{region.region}</p>
</Popup>
</Marker>
{/if}