Docker/AdventureLog
Docker/AdventureLog
1
0
Fork 0
mirror of https://github.com/seanmorley15/AdventureLog.git synced 2025-07-21 22:09:36 +02:00
Code Issues Releases Activity

chore: Update date formatting in AdventureCard and CollectionCard components

Browse source
This commit is contained in:
Sean Morley 2024-07-27 14:38:43 -04:00
parent c94a4379c7
commit 59a3a2d72a
3 changed files with 75 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/lib/components/AdventureCard.svelte
View file

@ -163,7 +163,7 @@
{#if adventure.date && adventure.date !== ''}
<div class="inline-flex items-center">
<Calendar class="w-5 h-5 mr-1" />
<p>{new Date(adventure.date).toLocaleDateString()}</p>
<p>{new Date(adventure.date).toLocaleDateString('en-US', { timeZone: 'UTC' })}</p>
</div>
{/if}
{#if adventure.activity_types && adventure.activity_types.length > 0}

2
frontend/src/lib/components/CollectionCard.svelte
View file

@ -58,7 +58,7 @@
Duration: {Math.floor(
(new Date(collection.end_date).getTime() - new Date(collection.start_date).getTime()) /
(1000 * 60 * 60 * 24)
)}{' '}
) + 1}{' '}
days
</p>{/if}
<div class="card-actions justify-end">

75
frontend/src/routes/collections/[id]/+page.svelte
View file

@ -18,6 +18,8 @@
let adventures: Adventure[] = [];
let numVisited: number = 0;
let numberOfDays: number = NaN;
$: {
numVisited = adventures.filter((a) => a.type === 'visited').length;
}
@ -32,12 +34,44 @@
} else {
notFound = true;
}
if (collection.start_date && collection.end_date) {
numberOfDays =
Math.floor(
(new Date(collection.end_date).getTime() - new Date(collection.start_date).getTime()) /
(1000 * 60 * 60 * 24)
) + 1;
}
});
function deleteAdventure(event: CustomEvent<number>) {
adventures = adventures.filter((a) => a.id !== event.detail);
}
function groupAdventuresByDate(
adventures: Adventure[],
startDate: Date
): Record<string, Adventure[]> {
const groupedAdventures: Record<string, Adventure[]> = {};
for (let i = 0; i < numberOfDays; i++) {
const currentDate = new Date(startDate);
currentDate.setDate(startDate.getDate() + i);
const dateString = currentDate.toISOString().split('T')[0];
groupedAdventures[dateString] = [];
}
adventures.forEach((adventure) => {
if (adventure.date) {
const adventureDate = new Date(adventure.date).toISOString().split('T')[0];
if (groupedAdventures[adventureDate]) {
groupedAdventures[adventureDate].push(adventure);
}
}
});
return groupedAdventures;
}
async function addAdventure(event: CustomEvent<Adventure>) {
console.log(event.detail);
if (adventures.find((a) => a.id === event.detail.id)) {
@ -203,7 +237,44 @@
{/each}
</div>
{#if collection.description}
<p class="text-center text-lg mt-4 pl-16 pr-16">{collection.description}</p>
{#if numberOfDays}
<p class="text-center text-lg mt-4 pl-16 pr-16">Duration: {numberOfDays} days</p>
{/if}
{#if collection.start_date && collection.end_date}
<p class="text-center text-lg mt-4 pl-16 pr-16">
Dates: {new Date(collection.start_date).toLocaleDateString('en-US', { timeZone: 'UTC' })} - {new Date(
collection.end_date
).toLocaleDateString('en-US', { timeZone: 'UTC' })}
</p>
{#each Array(numberOfDays) as _, i}
{@const currentDate = new Date(collection.start_date)}
{@const temp = currentDate.setDate(currentDate.getDate() + i)}
{@const dateString = currentDate.toISOString().split('T')[0]}
{@const dayAdventures = groupAdventuresByDate(adventures, new Date(collection.start_date))[
dateString
]}
<h2 class="text-center text-xl mt-4">
Day {i + 1} - {currentDate.toLocaleDateString('en-US', { timeZone: 'UTC' })}
</h2>
{#if dayAdventures.length > 0}
<div class="flex flex-wrap gap-4 mr-4 justify-center content-center">
{#each dayAdventures as adventure}
<AdventureCard
user={data.user}
on:edit={editAdventure}
on:delete={deleteAdventure}
type={adventure.type}
{adventure}
on:typeChange={changeType}
/>
{/each}
</div>
{:else}
<p class="text-center text-lg mt-2">No adventures planned for this day.</p>
{/if}
{/each}
{/if}
{/if}