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

refactor: Update +page.svelte to improve rendering performance and fix conditional rendering issue

Browse source
This commit is contained in:
Sean Morley 2024-07-28 12:45:00 -04:00
parent 54ef1677e8
commit 589eb094d5
1 changed files with 30 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

59
frontend/src/routes/collections/[id]/+page.svelte
View file

@ -425,7 +425,8 @@
on:typeChange={changeType}
/>
{/each}
{:else if dayTransportations.length > 0}
{/if}
{#if dayTransportations.length > 0}
{#each dayTransportations as transportation}
<TransportationCard
{transportation}
@ -438,42 +439,42 @@
}}
/>
{/each}
{:else}
{/if}
{#if dayAdventures.length == 0 && dayTransportations.length == 0}
<p class="text-center text-lg mt-2">
No adventures or transportaions planned for this day.
</p>
{/if}
</div>
{/each}
<div class="flex items-center justify-center w-10/12">
<MapLibre
style="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
class="relative aspect-[9/16] max-h-[70vh] w-full sm:aspect-video sm:max-h-full"
standardControls
>
<!-- MapEvents gives you access to map events even from other components inside the map,
<MapLibre
style="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
class="flex items-center self-center justify-center aspect-[9/16] max-h-[70vh] sm:aspect-video sm:max-h-full w-10/12"
standardControls
>
<!-- MapEvents gives you access to map events even from other components inside the map,
where you might not have access to the top-level `MapLibre` component. In this case
it would also work to just use on:click on the MapLibre component itself. -->
<!-- <MapEvents on:click={addMarker} /> -->
<!-- <MapEvents on:click={addMarker} /> -->
{#each adventures as adventure}
{#if adventure.longitude && adventure.latitude}
<DefaultMarker lngLat={{ lng: adventure.longitude, lat: adventure.latitude }}>
<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">
{adventure.type.charAt(0).toUpperCase() + adventure.type.slice(1)}
</p>
<p>
{adventure.date
? new Date(adventure.date).toLocaleDateString('en-US', { timeZone: 'UTC' })
: ''}
</p>
</Popup>
</DefaultMarker>
{/if}
{/each}
</MapLibre>
</div>
{#each adventures as adventure}
{#if adventure.longitude && adventure.latitude}
<DefaultMarker lngLat={{ lng: adventure.longitude, lat: adventure.latitude }}>
<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">
{adventure.type.charAt(0).toUpperCase() + adventure.type.slice(1)}
</p>
<p>
{adventure.date
? new Date(adventure.date).toLocaleDateString('en-US', { timeZone: 'UTC' })
: ''}
</p>
</Popup>
</DefaultMarker>
{/if}
{/each}
</MapLibre>
{/if}
{/if}