alex/voyage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add i18n support for transportation, notes, checklist, and collection components

Browse Source
This commit is contained in:
Sean Morley
2024-11-03 22:55:38 -05:00
parent c0aaec1436
commit 3df124b250
11 changed files with 305 additions and 213 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
frontend/src/routes/collections/[id]/+page.svelte
View File

@@ -4,6 +4,7 @@
import type { PageData } from './$types';
import { goto } from '$app/navigation';
import Lost from '$lib/assets/undraw_lost.svg';
import { t } from 'svelte-i18n';
import Plus from '~icons/mdi/plus';
import AdventureCard from '$lib/components/AdventureCard.svelte';
@@ -106,19 +107,6 @@
}
}
function changeType(event: CustomEvent<string>) {
adventures = adventures.map((adventure) => {
if (adventure.id == event.detail) {
if (adventure.type == 'visited') {
adventure.type = 'planned';
} else {
adventure.type = 'visited';
}
}
return adventure;
});
}
let adventureToEdit: Adventure | null = null;
let transportationToEdit: Transportation;
let isAdventureModalOpen: boolean = false;
@@ -255,14 +243,15 @@
<img src={Lost} alt="Lost" class="w-1/2" />
</div>
<h1 class="mt-4 text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
Adventure not Found
{$t('adventures.not_found')}
</h1>
<p class="mt-4 text-muted-foreground">
The adventure you were looking for could not be found. Please try a different adventure or
check back later.
{$t('adventures.not_found_desc')}
</p>
<div class="mt-6">
<button class="btn btn-primary" on:click={() => goto('/')}>Homepage</button>
<button class="btn btn-primary" on:click={() => goto('/')}
>{$t('adventures.homepage')}</button
>
</div>
</div>
</div>
@@ -287,17 +276,17 @@
class="dropdown-content z-[1] menu p-4 shadow bg-base-300 text-base-content rounded-box w-52 gap-4"
>
{#if collection.user_id === data.user.pk}
<p class="text-center font-bold text-lg">Link new...</p>
<p class="text-center font-bold text-lg">{$t('adventures.link_new')}</p>
<button
class="btn btn-primary"
on:click={() => {
isShowingLinkModal = true;
}}
>
Adventure</button
{$t('adventures.adventure')}</button
>
{/if}
<p class="text-center font-bold text-lg">Add new...</p>
<p class="text-center font-bold text-lg">{$t('adventures.add_new')}</p>
<button
class="btn btn-primary"
on:click={() => {
@@ -305,7 +294,7 @@
adventureToEdit = null;
}}
>
Adventure</button
{$t('adventures.adventure')}</button
>
<button
@@ -315,7 +304,7 @@
newType = '';
}}
>
Transportation</button
{$t('adventures.transportation')}</button
>
<button
class="btn btn-primary"
@@ -325,7 +314,7 @@
noteToEdit = null;
}}
>
Note</button
{$t('adventures.note')}</button
>
<button
class="btn btn-primary"
@@ -335,7 +324,7 @@
checklistToEdit = null;
}}
>
Checklist</button
{$t('adventures.checklist')}</button
>
<!-- <button
@@ -363,7 +352,7 @@
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
/>
</svg>
<span>This collection has been archived.</span>
<span>{$t('adventures.collection_archived')}</span>
</div>
</div>
{/if}
@@ -373,7 +362,7 @@
{#if collection.link}
<div class="flex items-center justify-center mb-2">
<a href={collection.link} target="_blank" rel="noopener noreferrer" class="btn btn-primary">
Visit Link
{$t('adventures.visit_link')}
</a>
</div>
{/if}
@@ -385,12 +374,12 @@
<div class="flex items-center justify-center mb-4">
<div class="stats shadow bg-base-300">
<div class="stat">
<div class="stat-title">Collection Stats</div>
<div class="stat-title">{$t('adventures.collection_stats')}</div>
<div class="stat-value">{numVisited}/{numAdventures} Visited</div>
{#if numAdventures === numVisited}
<div class="stat-desc">You've completed this collection! 🎉!</div>
<div class="stat-desc">{$t('adventures.collection_completed')}</div>
{:else}
<div class="stat-desc">Keep exploring!</div>
<div class="stat-desc">{$t('adventures.keep_exploring')}</div>
{/if}
</div>
</div>
@@ -401,7 +390,7 @@
<NotFound error={undefined} />
{/if}
{#if adventures.length > 0}
<h1 class="text-center font-bold text-4xl mt-4 mb-2">Linked Adventures</h1>
<h1 class="text-center font-bold text-4xl mt-4 mb-2">{$t('adventures.linked_adventures')}</h1>
<div class="flex flex-wrap gap-4 mr-4 justify-center content-center">
{#each adventures as adventure}
@@ -411,7 +400,6 @@
on:delete={deleteAdventure}
type={adventure.type}
{adventure}
on:typeChange={changeType}
{collection}
/>
{/each}
@@ -419,7 +407,7 @@
{/if}
{#if transportations.length > 0}
<h1 class="text-center font-bold text-4xl mt-4 mb-4">Transportation</h1>
<h1 class="text-center font-bold text-4xl mt-4 mb-4">{$t('adventures.transportations')}</h1>
<div class="flex flex-wrap gap-4 mr-4 justify-center content-center">
{#each transportations as transportation}
<TransportationCard
@@ -439,7 +427,7 @@
{/if}
{#if notes.length > 0}
<h1 class="text-center font-bold text-4xl mt-4 mb-4">Notes</h1>
<h1 class="text-center font-bold text-4xl mt-4 mb-4">{$t('adventures.notes')}</h1>
<div class="flex flex-wrap gap-4 mr-4 justify-center content-center">
{#each notes as note}
<NoteCard
@@ -459,7 +447,7 @@
{/if}
{#if checklists.length > 0}
<h1 class="text-center font-bold text-4xl mt-4 mb-4">Checklists</h1>
<h1 class="text-center font-bold text-4xl mt-4 mb-4">{$t('adventures.checklists')}</h1>
<div class="flex flex-wrap gap-4 mr-4 justify-center content-center">
{#each checklists as checklist}
<ChecklistCard
@@ -480,9 +468,12 @@
{#if collection.start_date && collection.end_date}
<div class="divider"></div>
<h1 class="text-center font-bold text-4xl mt-4">Itinerary by Date</h1>
<h1 class="text-center font-bold text-4xl mt-4">{$t('adventures.itineary_by_date')}</h1>
{#if numberOfDays}
<p class="text-center text-lg pl-16 pr-16">Duration: {numberOfDays} days</p>
<p class="text-center text-lg pl-16 pr-16">
{$t('adventures.duration')}: {numberOfDays}
{$t('adventures.days')}
</p>
{/if}
<p class="text-center text-lg pl-16 pr-16">
Dates: {new Date(collection.start_date).toLocaleDateString(undefined, { timeZone: 'UTC' })} - {new Date(
@@ -531,7 +522,6 @@
on:delete={deleteAdventure}
type={adventure.type}
{adventure}
on:typeChange={changeType}
/>
{/each}
{/if}
@@ -582,7 +572,7 @@
{/if}
{#if dayAdventures.length == 0 && dayTransportations.length == 0 && dayNotes.length == 0 && dayChecklists.length == 0}
<p class="text-center text-lg mt-2">Nothing planned for this day. Enjoy the journey!</p>
<p class="text-center text-lg mt-2">{$t('adventures.nothing_planned')}</p>
{/if}
</div>
{/each}
@@ -605,11 +595,6 @@
<p class="font-semibold text-black text-md">
{adventure.type.charAt(0).toUpperCase() + adventure.type.slice(1)}
</p>
<!-- <p>
{adventure.
? new Date(adventure.date).toLocaleDateString(undefined, { timeZone: 'UTC' })
: ''}
</p> -->
</Popup>
</DefaultMarker>
{/if}
@@ -622,7 +607,7 @@
<title
>{data.props.adventure && data.props.adventure.name
? `${data.props.adventure.name}`
: 'Collection'}</title
: $t('adventures.collection')}</title
>
<meta
name="description"