Docker/AdventureLog
Docker/AdventureLog
1
0
Fork 0
mirror of https://github.com/seanmorley15/AdventureLog.git synced 2025-07-29 17:59:36 +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} on:typeChange={changeType}
/> />
{/each} {/each}
{:else if dayTransportations.length > 0} {/if}
{#if dayTransportations.length > 0}
{#each dayTransportations as transportation} {#each dayTransportations as transportation}
<TransportationCard <TransportationCard
{transportation} {transportation}
@ -438,42 +439,42 @@
}} }}
/> />
{/each} {/each}
{:else} {/if}
{#if dayAdventures.length == 0 && dayTransportations.length == 0}
<p class="text-center text-lg mt-2"> <p class="text-center text-lg mt-2">
No adventures or transportaions planned for this day. No adventures or transportaions planned for this day.
</p> </p>
{/if} {/if}
</div> </div>
{/each} {/each}
<div class="flex items-center justify-center w-10/12">
<MapLibre <MapLibre
style="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json" 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" 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 standardControls
> >
<!-- MapEvents gives you access to map events even from other components inside the map, <!-- 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 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. --> 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} {#each adventures as adventure}
{#if adventure.longitude && adventure.latitude} {#if adventure.longitude && adventure.latitude}
<DefaultMarker lngLat={{ lng: adventure.longitude, lat: adventure.latitude }}> <DefaultMarker lngLat={{ lng: adventure.longitude, lat: adventure.latitude }}>
<Popup openOn="click" offset={[0, -10]}> <Popup openOn="click" offset={[0, -10]}>
<div class="text-lg text-black font-bold">{adventure.name}</div> <div class="text-lg text-black font-bold">{adventure.name}</div>
<p class="font-semibold text-black text-md"> <p class="font-semibold text-black text-md">
{adventure.type.charAt(0).toUpperCase() + adventure.type.slice(1)} {adventure.type.charAt(0).toUpperCase() + adventure.type.slice(1)}
</p> </p>
<p> <p>
{adventure.date {adventure.date
? new Date(adventure.date).toLocaleDateString('en-US', { timeZone: 'UTC' }) ? new Date(adventure.date).toLocaleDateString('en-US', { timeZone: 'UTC' })
: ''} : ''}
</p> </p>
</Popup> </Popup>
</DefaultMarker> </DefaultMarker>
{/if} {/if}
{/each} {/each}
</MapLibre> </MapLibre>
</div>
{/if} {/if}
{/if} {/if}