Docker/AdventureLog
Docker/AdventureLog
1
0
Fork 0
mirror of https://github.com/seanmorley15/AdventureLog.git synced 2025-07-24 15:29:36 +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';
// @ts-ignore
import toGeoJSON from '@mapbox/togeojson';
// @ts-ignore
import { DateTime } from 'luxon';
import LightbulbOn from '~icons/mdi/lightbulb-on';
import WeatherSunset from '~icons/mdi/weather-sunset';
@ -412,33 +414,41 @@
</p>
<!-- show each visit start and end date as well as notes -->
{#each adventure.visits as visit}
<div class="flex flex-col gap-2">
<div class="flex gap-2 items-center">
<p>
{#if isAllDay(visit.start_date)}
<!-- For all-day events, show just the date -->
{new Date(visit.start_date).toLocaleDateString(undefined, {
timeZone: 'UTC'
})}
<div
class="p-4 border border-neutral rounded-lg bg-base-100 shadow-sm flex flex-col gap-2 mb-1"
>
{#if isAllDay(visit.start_date)}
<p class="text-sm text-base-content font-medium">
<span class="badge badge-outline mr-2">All Day</span>
{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}
<!-- For timed events, show date and time -->
{new Date(visit.start_date).toLocaleDateString()} ({new Date(
visit.start_date
).toLocaleTimeString()})
<!-- Fallback to local browser time -->
🕓 <strong>Local Time</strong><br />
{DateTime.fromISO(visit.start_date).toLocaleString(
DateTime.DATETIME_MED
)} –
{DateTime.fromISO(visit.end_date).toLocaleString(
DateTime.DATETIME_MED
)}
{/if}
</p>
{#if visit.end_date && visit.end_date !== visit.start_date}
<p>
- {new Date(visit.end_date).toLocaleDateString(undefined, {
timeZone: 'UTC'
})}
{#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>
{/if}
{#if visit.notes}
<p class="text-sm text-base-content opacity-70 italic">"{visit.notes}"</p>
{/if}
</div>
{/each}
</div>
@ -527,13 +537,29 @@
'T'
)[0]}
{:else}
{new Date(visit.start_date).toLocaleString()} – {new Date(
visit.end_date
).toLocaleString()}
<span>
<strong>Local:</strong>
{DateTime.fromISO(visit.start_date).toLocaleString(
DateTime.DATETIME_MED
)} –
{DateTime.fromISO(visit.end_date).toLocaleString(
DateTime.DATETIME_MED
)}
</span>
{/if}
</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}
<p class="text-sm text-base-content opacity-70 italic">