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

Enhance visit date display with timezone support and improved formatting

Browse source
This commit is contained in:
Sean Morley 2025-05-10 21:40:18 -04:00
parent 330fabb3e0
commit abc2d86dcf
1 changed files with 54 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

82
frontend/src/routes/adventures/[id]/+page.svelte
View file

@ -10,6 +10,8 @@
import DOMPurify from 'dompurify'; import DOMPurify from 'dompurify';
// @ts-ignore // @ts-ignore
import toGeoJSON from '@mapbox/togeojson'; import toGeoJSON from '@mapbox/togeojson';
// @ts-ignore
import { DateTime } from 'luxon';
import LightbulbOn from '~icons/mdi/lightbulb-on'; import LightbulbOn from '~icons/mdi/lightbulb-on';
import WeatherSunset from '~icons/mdi/weather-sunset'; import WeatherSunset from '~icons/mdi/weather-sunset';
@ -412,33 +414,41 @@
</p> </p>
<!-- show each visit start and end date as well as notes --> <!-- show each visit start and end date as well as notes -->
{#each adventure.visits as visit} {#each adventure.visits as visit}
<div class="flex flex-col gap-2"> <div
<div class="flex gap-2 items-center"> class="p-4 border border-neutral rounded-lg bg-base-100 shadow-sm flex flex-col gap-2 mb-1"
<p> >
{#if isAllDay(visit.start_date)} {#if isAllDay(visit.start_date)}
<!-- For all-day events, show just the date --> <p class="text-sm text-base-content font-medium">
{new Date(visit.start_date).toLocaleDateString(undefined, { <span class="badge badge-outline mr-2">All Day</span>
timeZone: 'UTC' {visit.start_date.split('T')[0]} – {visit.end_date.split('T')[0]}
})} </p>
{:else}
<p class="text-sm text-base-content font-medium">
{#if visit.timezone}
<!-- Use visit.timezone -->
🕓 <strong>{visit.timezone}</strong><br />
{DateTime.fromISO(visit.start_date, { zone: 'utc' })
.setZone(visit.timezone)
.toLocaleString(DateTime.DATETIME_MED)} –
{DateTime.fromISO(visit.end_date, { zone: 'utc' })
.setZone(visit.timezone)
.toLocaleString(DateTime.DATETIME_MED)}
{:else} {:else}
<!-- For timed events, show date and time --> <!-- Fallback to local browser time -->
{new Date(visit.start_date).toLocaleDateString()} ({new Date( 🕓 <strong>Local Time</strong><br />
visit.start_date {DateTime.fromISO(visit.start_date).toLocaleString(
).toLocaleTimeString()}) DateTime.DATETIME_MED
)} –
{DateTime.fromISO(visit.end_date).toLocaleString(
DateTime.DATETIME_MED
)}
{/if} {/if}
</p> </p>
{#if visit.end_date && visit.end_date !== visit.start_date} {/if}
<p>
- {new Date(visit.end_date).toLocaleDateString(undefined, { {#if visit.notes}
timeZone: 'UTC' <p class="text-sm text-base-content opacity-70 italic">"{visit.notes}"</p>
})} {/if}
{#if !isAllDay(visit.end_date)}
({new Date(visit.end_date).toLocaleTimeString()})
{/if}
</p>
{/if}
</div>
<p class="whitespace-pre-wrap -mt-2 mb-2">{visit.notes}</p>
</div> </div>
{/each} {/each}
</div> </div>
@ -527,13 +537,29 @@
'T' 'T'
)[0]} )[0]}
{:else} {:else}
{new Date(visit.start_date).toLocaleString()} – {new Date( <span>
visit.end_date <strong>Local:</strong>
).toLocaleString()} {DateTime.fromISO(visit.start_date).toLocaleString(
DateTime.DATETIME_MED
)} –
{DateTime.fromISO(visit.end_date).toLocaleString(
DateTime.DATETIME_MED
)}
</span>
{/if} {/if}
</p> </p>
<!-- If the selected timezone is not the current one show the timezone + the time converted there --> {#if !isAllDay(visit.start_date) && visit.timezone}
<p class="text-sm text-base-content opacity-80">
<strong>{visit.timezone}:</strong>
{DateTime.fromISO(visit.start_date, { zone: 'utc' })
.setZone(visit.timezone)
.toLocaleString(DateTime.DATETIME_MED)} –
{DateTime.fromISO(visit.end_date, { zone: 'utc' })
.setZone(visit.timezone)
.toLocaleString(DateTime.DATETIME_MED)}
</p>
{/if}
{#if visit.notes} {#if visit.notes}
<p class="text-sm text-base-content opacity-70 italic"> <p class="text-sm text-base-content opacity-70 italic">