mirror of
https://github.com/seanmorley15/AdventureLog.git
synced 2025-07-23 14:59:36 +02:00
feat: Enhance AdventureModal date handling for all-day events and improve localization in collections page
This commit is contained in:
parent
db63b6e7d8
commit
794df82ec6
2 changed files with 86 additions and 5 deletions
|
@ -8,12 +8,16 @@
|
|||
|
||||
let fullStartDate: string = '';
|
||||
let fullEndDate: string = '';
|
||||
let fullStartDateOnly: string = '';
|
||||
let fullEndDateOnly: string = '';
|
||||
let allDay: boolean = true;
|
||||
|
||||
// Set full start and end dates from collection
|
||||
if (collection && collection.start_date && collection.end_date) {
|
||||
fullStartDate = `${collection.start_date}T00:00`;
|
||||
fullEndDate = `${collection.end_date}T23:59`;
|
||||
fullStartDateOnly = collection.start_date;
|
||||
fullEndDateOnly = collection.end_date;
|
||||
}
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
@ -742,8 +746,8 @@
|
|||
type="date"
|
||||
class="input input-bordered w-full"
|
||||
placeholder={$t('adventures.start_date')}
|
||||
min={constrainDates ? fullStartDate : ''}
|
||||
max={constrainDates ? fullEndDate : ''}
|
||||
min={constrainDates ? fullStartDateOnly : ''}
|
||||
max={constrainDates ? fullEndDateOnly : ''}
|
||||
bind:value={new_start_date}
|
||||
on:keydown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
|
@ -757,8 +761,8 @@
|
|||
class="input input-bordered w-full"
|
||||
placeholder={$t('adventures.end_date')}
|
||||
bind:value={new_end_date}
|
||||
min={constrainDates ? fullStartDate : ''}
|
||||
max={constrainDates ? fullEndDate : ''}
|
||||
min={constrainDates ? fullStartDateOnly : ''}
|
||||
max={constrainDates ? fullEndDateOnly : ''}
|
||||
on:keydown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
|
@ -848,6 +852,53 @@
|
|||
</p>
|
||||
{/if}
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-neutral"
|
||||
on:click={() => {
|
||||
// Determine if this is an all-day event
|
||||
const isAllDayEvent = isAllDay(visit.start_date);
|
||||
allDay = isAllDayEvent;
|
||||
|
||||
if (isAllDayEvent) {
|
||||
// For all-day events, use date only
|
||||
new_start_date = visit.start_date.split('T')[0];
|
||||
new_end_date = visit.end_date.split('T')[0];
|
||||
} else {
|
||||
// For timed events, format properly for datetime-local input
|
||||
const startDate = new Date(visit.start_date);
|
||||
const endDate = new Date(visit.end_date);
|
||||
|
||||
// Format as yyyy-MM-ddThh:mm
|
||||
new_start_date =
|
||||
startDate.getFullYear() +
|
||||
'-' +
|
||||
String(startDate.getMonth() + 1).padStart(2, '0') +
|
||||
'-' +
|
||||
String(startDate.getDate()).padStart(2, '0') +
|
||||
'T' +
|
||||
String(startDate.getHours()).padStart(2, '0') +
|
||||
':' +
|
||||
String(startDate.getMinutes()).padStart(2, '0');
|
||||
|
||||
new_end_date =
|
||||
endDate.getFullYear() +
|
||||
'-' +
|
||||
String(endDate.getMonth() + 1).padStart(2, '0') +
|
||||
'-' +
|
||||
String(endDate.getDate()).padStart(2, '0') +
|
||||
'T' +
|
||||
String(endDate.getHours()).padStart(2, '0') +
|
||||
':' +
|
||||
String(endDate.getMinutes()).padStart(2, '0');
|
||||
}
|
||||
|
||||
new_notes = visit.notes;
|
||||
adventure.visits = adventure.visits.filter((v) => v !== visit);
|
||||
}}
|
||||
>
|
||||
{$t('lodging.edit')}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-error"
|
||||
|
|
|
@ -1094,7 +1094,7 @@
|
|||
<!-- Card Content -->
|
||||
<div class="bg-base-200 p-6 rounded-lg shadow-lg">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<span class="badge badge-lg">{orderedItem.type}</span>
|
||||
<span class="badge badge-lg">{$t(`adventures.${orderedItem.type}`)}</span>
|
||||
<div class="text-sm opacity-80 text-right">
|
||||
{new Date(orderedItem.start).toLocaleDateString(undefined, {
|
||||
month: 'short',
|
||||
|
@ -1106,6 +1106,36 @@
|
|||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
})}
|
||||
-
|
||||
{new Date(orderedItem.end).toLocaleTimeString(undefined, {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
})}
|
||||
</div>
|
||||
<div>
|
||||
<!-- Duration -->
|
||||
{Math.round(
|
||||
(new Date(orderedItem.end).getTime() -
|
||||
new Date(orderedItem.start).getTime()) /
|
||||
1000 /
|
||||
60 /
|
||||
60
|
||||
)}h
|
||||
{Math.round(
|
||||
((new Date(orderedItem.end).getTime() -
|
||||
new Date(orderedItem.start).getTime()) /
|
||||
1000 /
|
||||
60 /
|
||||
60 -
|
||||
Math.floor(
|
||||
(new Date(orderedItem.end).getTime() -
|
||||
new Date(orderedItem.start).getTime()) /
|
||||
1000 /
|
||||
60 /
|
||||
60
|
||||
)) *
|
||||
60
|
||||
)}m
|
||||
</div>
|
||||
{:else}
|
||||
<p>{$t('adventures.all_day')} ⏱️</p>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue