mirror of
https://github.com/seanmorley15/AdventureLog.git
synced 2025-07-23 23:09:37 +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 fullStartDate: string = '';
|
||||||
let fullEndDate: string = '';
|
let fullEndDate: string = '';
|
||||||
|
let fullStartDateOnly: string = '';
|
||||||
|
let fullEndDateOnly: string = '';
|
||||||
let allDay: boolean = true;
|
let allDay: boolean = true;
|
||||||
|
|
||||||
// Set full start and end dates from collection
|
// Set full start and end dates from collection
|
||||||
if (collection && collection.start_date && collection.end_date) {
|
if (collection && collection.start_date && collection.end_date) {
|
||||||
fullStartDate = `${collection.start_date}T00:00`;
|
fullStartDate = `${collection.start_date}T00:00`;
|
||||||
fullEndDate = `${collection.end_date}T23:59`;
|
fullEndDate = `${collection.end_date}T23:59`;
|
||||||
|
fullStartDateOnly = collection.start_date;
|
||||||
|
fullEndDateOnly = collection.end_date;
|
||||||
}
|
}
|
||||||
|
|
||||||
const dispatch = createEventDispatcher();
|
const dispatch = createEventDispatcher();
|
||||||
|
@ -742,8 +746,8 @@
|
||||||
type="date"
|
type="date"
|
||||||
class="input input-bordered w-full"
|
class="input input-bordered w-full"
|
||||||
placeholder={$t('adventures.start_date')}
|
placeholder={$t('adventures.start_date')}
|
||||||
min={constrainDates ? fullStartDate : ''}
|
min={constrainDates ? fullStartDateOnly : ''}
|
||||||
max={constrainDates ? fullEndDate : ''}
|
max={constrainDates ? fullEndDateOnly : ''}
|
||||||
bind:value={new_start_date}
|
bind:value={new_start_date}
|
||||||
on:keydown={(e) => {
|
on:keydown={(e) => {
|
||||||
if (e.key === 'Enter') {
|
if (e.key === 'Enter') {
|
||||||
|
@ -757,8 +761,8 @@
|
||||||
class="input input-bordered w-full"
|
class="input input-bordered w-full"
|
||||||
placeholder={$t('adventures.end_date')}
|
placeholder={$t('adventures.end_date')}
|
||||||
bind:value={new_end_date}
|
bind:value={new_end_date}
|
||||||
min={constrainDates ? fullStartDate : ''}
|
min={constrainDates ? fullStartDateOnly : ''}
|
||||||
max={constrainDates ? fullEndDate : ''}
|
max={constrainDates ? fullEndDateOnly : ''}
|
||||||
on:keydown={(e) => {
|
on:keydown={(e) => {
|
||||||
if (e.key === 'Enter') {
|
if (e.key === 'Enter') {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
@ -848,6 +852,53 @@
|
||||||
</p>
|
</p>
|
||||||
{/if}
|
{/if}
|
||||||
<div>
|
<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
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
class="btn btn-sm btn-error"
|
class="btn btn-sm btn-error"
|
||||||
|
|
|
@ -1094,7 +1094,7 @@
|
||||||
<!-- Card Content -->
|
<!-- Card Content -->
|
||||||
<div class="bg-base-200 p-6 rounded-lg shadow-lg">
|
<div class="bg-base-200 p-6 rounded-lg shadow-lg">
|
||||||
<div class="flex justify-between items-center mb-4">
|
<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">
|
<div class="text-sm opacity-80 text-right">
|
||||||
{new Date(orderedItem.start).toLocaleDateString(undefined, {
|
{new Date(orderedItem.start).toLocaleDateString(undefined, {
|
||||||
month: 'short',
|
month: 'short',
|
||||||
|
@ -1106,6 +1106,36 @@
|
||||||
hour: '2-digit',
|
hour: '2-digit',
|
||||||
minute: '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>
|
</div>
|
||||||
{:else}
|
{:else}
|
||||||
<p>{$t('adventures.all_day')} ⏱️</p>
|
<p>{$t('adventures.all_day')} ⏱️</p>
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue