mirror of
https://github.com/seanmorley15/AdventureLog.git
synced 2025-07-23 14:59:36 +02:00
localization v2
This commit is contained in:
Sean Morley
parent
6cf62cfb82
commit
91c0ec8c07
18 changed files with 432 additions and 101 deletions
|
|
@ -11,15 +11,14 @@
|
|||
import MapMarker from '~icons/mdi/map-marker';
|
||||
import { addToast } from '$lib/toasts';
|
||||
import Link from '~icons/mdi/link-variant';
|
||||
import CheckBold from '~icons/mdi/check-bold';
|
||||
import FormatListBulletedSquare from '~icons/mdi/format-list-bulleted-square';
|
||||
import LinkVariantRemove from '~icons/mdi/link-variant-remove';
|
||||
import Plus from '~icons/mdi/plus';
|
||||
import CollectionLink from './CollectionLink.svelte';
|
||||
import DotsHorizontal from '~icons/mdi/dots-horizontal';
|
||||
import DeleteWarning from './DeleteWarning.svelte';
|
||||
import { isAdventureVisited, typeToString } from '$lib';
|
||||
import { isAdventureVisited } from '$lib';
|
||||
import CardCarousel from './CardCarousel.svelte';
|
||||
import { t } from 'svelte-i18n';
|
||||
|
||||
export let type: string;
|
||||
export let user: User | null;
|
||||
|
|
@ -67,34 +66,13 @@
|
|||
body: JSON.stringify({ collection: null })
|
||||
});
|
||||
if (res.ok) {
|
||||
console.log('Adventure removed from collection');
|
||||
addToast('info', 'Adventure removed from collection successfully!');
|
||||
addToast('info', `${$t('adventures.collection_remove_success')}`);
|
||||
dispatch('delete', adventure.id);
|
||||
} else {
|
||||
console.log('Error removing adventure from collection');
|
||||
addToast('error', `${$t('adventures.collection_remove_error')}`);
|
||||
}
|
||||
}
|
||||
|
||||
function changeType(newType: string) {
|
||||
return async () => {
|
||||
let res = await fetch(`/api/adventures/${adventure.id}/`, {
|
||||
method: 'PATCH',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({ type: newType })
|
||||
});
|
||||
if (res.ok) {
|
||||
console.log('Adventure type changed');
|
||||
dispatch('typeChange', adventure.id);
|
||||
addToast('info', 'Adventure type changed successfully!');
|
||||
adventure.type = newType;
|
||||
} else {
|
||||
console.log('Error changing adventure type');
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
async function linkCollection(event: CustomEvent<number>) {
|
||||
let collectionId = event.detail;
|
||||
let res = await fetch(`/api/adventures/${adventure.id}`, {
|
||||
|
|
@ -106,11 +84,11 @@
|
|||
});
|
||||
if (res.ok) {
|
||||
console.log('Adventure linked to collection');
|
||||
addToast('info', 'Adventure linked to collection successfully!');
|
||||
addToast('info', `${$t('adventures.collection_link_success')}`);
|
||||
isCollectionModalOpen = false;
|
||||
dispatch('delete', adventure.id);
|
||||
} else {
|
||||
console.log('Error linking adventure to collection');
|
||||
addToast('error', `${$t('adventures.collection_link_error')}`);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -131,7 +109,7 @@
|
|||
<DeleteWarning
|
||||
title="Delete Adventure"
|
||||
button_text="Delete"
|
||||
description="Are you sure you want to delete this adventure? This action cannot be undone."
|
||||
description={$t('adventures.adventure_delete_confirm')}
|
||||
is_warning={false}
|
||||
on:close={() => (isWarningModalOpen = false)}
|
||||
on:confirm={deleteAdventure}
|
||||
|
|
@ -153,7 +131,7 @@
|
|||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<div class="badge badge-primary">{typeToString(adventure.type)}</div>
|
||||
<div class="badge badge-primary">{$t(`adventures.activities.${adventure.type}`)}</div>
|
||||
<div class="badge badge-success">{isAdventureVisited(adventure) ? 'Visited' : 'Planned'}</div>
|
||||
<div class="badge badge-secondary">{adventure.is_public ? 'Public' : 'Private'}</div>
|
||||
</div>
|
||||
|
|
@ -198,30 +176,24 @@
|
|||
<button
|
||||
class="btn btn-neutral mb-2"
|
||||
on:click={() => goto(`/adventures/${adventure.id}`)}
|
||||
><Launch class="w-6 h-6" />Open Details</button
|
||||
><Launch class="w-6 h-6" />{$t('adventures.open_details')}</button
|
||||
>
|
||||
<button class="btn btn-neutral mb-2" on:click={editAdventure}>
|
||||
<FileDocumentEdit class="w-6 h-6" />Edit Adventure
|
||||
<FileDocumentEdit class="w-6 h-6" />
|
||||
{$t('adventures.edit_adventure')}
|
||||
</button>
|
||||
{#if adventure.type == 'visited' && user?.pk == adventure.user_id}
|
||||
<button class="btn btn-neutral mb-2" on:click={changeType('planned')}
|
||||
><FormatListBulletedSquare class="w-6 h-6" />Change to Plan</button
|
||||
>
|
||||
{/if}
|
||||
{#if adventure.type == 'planned' && user?.pk == adventure.user_id}
|
||||
<button class="btn btn-neutral mb-2" on:click={changeType('visited')}
|
||||
><CheckBold class="w-6 h-6" />Mark Visited</button
|
||||
>
|
||||
{/if}
|
||||
|
||||
<!-- remove from collection -->
|
||||
{#if adventure.collection && user?.pk == adventure.user_id}
|
||||
<button class="btn btn-neutral mb-2" on:click={removeFromCollection}
|
||||
><LinkVariantRemove class="w-6 h-6" />Remove from Collection</button
|
||||
><LinkVariantRemove class="w-6 h-6" />{$t(
|
||||
'adventures.remove_from_collection'
|
||||
)}</button
|
||||
>
|
||||
{/if}
|
||||
{#if !adventure.collection}
|
||||
<button class="btn btn-neutral mb-2" on:click={() => (isCollectionModalOpen = true)}
|
||||
><Plus class="w-6 h-6" />Add to Collection</button
|
||||
><Plus class="w-6 h-6" />{$t('adventures.add_to_collection')}</button
|
||||
>
|
||||
{/if}
|
||||
<button
|
||||
|
|
@ -229,7 +201,7 @@
|
|||
data-umami-event="Delete Adventure"
|
||||
class="btn btn-warning"
|
||||
on:click={() => (isWarningModalOpen = true)}
|
||||
><TrashCan class="w-6 h-6" />Delete</button
|
||||
><TrashCan class="w-6 h-6" />{$t('adventures.delete')}</button
|
||||
>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
<div class="avatar placeholder">
|
||||
<div class="bg-neutral rounded-full text-neutral-200 w-10 ml-4">
|
||||
{#if user.profile_pic}
|
||||
<img src={user.profile_pic} alt="User Profile" />
|
||||
<img src={user.profile_pic} alt={$t('navbar.profile')} />
|
||||
{:else}
|
||||
<span class="text-2xl -mt-1">{letter}</span>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<script lang="ts">
|
||||
import type { Adventure } from '$lib/types';
|
||||
import ImageDisplayModal from './ImageDisplayModal.svelte';
|
||||
import { t } from 'svelte-i18n';
|
||||
|
||||
export let adventures: Adventure[] = [];
|
||||
|
||||
|
|
@ -79,7 +80,7 @@
|
|||
{:else}
|
||||
<!-- svelte-ignore a11y-img-redundant-alt -->
|
||||
<img
|
||||
src={'https://placehold.co/300?text=No%20Image%20Found&font=roboto'}
|
||||
src={`https://placehold.co/300?text=${$t('adventures.no_image_found')}&font=roboto`}
|
||||
alt="No image available"
|
||||
class="w-full h-48 object-cover"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -8,19 +8,25 @@
|
|||
import WeatherSunny from '~icons/mdi/weather-sunny';
|
||||
import WeatherNight from '~icons/mdi/weather-night';
|
||||
import Forest from '~icons/mdi/forest';
|
||||
import Flower from '~icons/mdi/flower';
|
||||
import Water from '~icons/mdi/water';
|
||||
import AboutModal from './AboutModal.svelte';
|
||||
import AccountMultiple from '~icons/mdi/account-multiple';
|
||||
import Avatar from './Avatar.svelte';
|
||||
import PaletteOutline from '~icons/mdi/palette-outline';
|
||||
import { page } from '$app/stores';
|
||||
import { t } from 'svelte-i18n';
|
||||
import { t, locale, locales } from 'svelte-i18n';
|
||||
|
||||
let query: string = '';
|
||||
|
||||
let isAboutModalOpen: boolean = false;
|
||||
|
||||
const submitLocaleChange = (event: Event) => {
|
||||
const select = event.target as HTMLSelectElement;
|
||||
const newLocale = select.value;
|
||||
document.cookie = `locale=${newLocale}; path=/`;
|
||||
locale.set(newLocale);
|
||||
window.location.reload();
|
||||
};
|
||||
const submitUpdateTheme: SubmitFunction = ({ action }) => {
|
||||
const theme = action.searchParams.get('theme');
|
||||
console.log('theme', theme);
|
||||
|
|
@ -104,7 +110,7 @@
|
|||
|
||||
<form class="flex gap-2">
|
||||
<label class="input input-bordered flex items-center gap-2">
|
||||
<input type="text" bind:value={query} class="grow" placeholder="Search" />
|
||||
<input type="text" bind:value={query} class="grow" placeholder={$t('navbar.search')} />
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
@ -172,7 +178,7 @@
|
|||
|
||||
<form class="flex gap-2">
|
||||
<label class="input input-bordered flex items-center gap-2">
|
||||
<input type="text" bind:value={query} class="grow" placeholder="Search" />
|
||||
<input type="text" bind:value={query} class="grow" placeholder={$t('navbar.search')} />
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
@ -206,41 +212,55 @@
|
|||
tabindex="0"
|
||||
class="dropdown-content bg-neutral text-neutral-content z-[1] menu p-2 shadow rounded-box w-52"
|
||||
>
|
||||
<button class="btn" on:click={() => (isAboutModalOpen = true)}>About AdventureLog</button>
|
||||
<button class="btn" on:click={() => (isAboutModalOpen = true)}>{$t('navbar.about')}</button>
|
||||
<button
|
||||
class="btn btn-sm mt-2"
|
||||
on:click={() => (window.location.href = 'https://docs.adventurelog.app/')}
|
||||
>Documentation</button
|
||||
>{$t('navbar.documentation')}</button
|
||||
>
|
||||
<button
|
||||
class="btn btn-sm mt-2"
|
||||
on:click={() => (window.location.href = 'https://discord.gg/wRbQ9Egr8C')}>Discord</button
|
||||
on:click={() => (window.location.href = 'https://discord.gg/wRbQ9Egr8C')}
|
||||
>{$t('navbar.discord')}</button
|
||||
>
|
||||
<p class="font-bold m-4 text-lg">Theme Selection</p>
|
||||
<p class="font-bold m-4 text-lg">{$t('navbar.theme_selection')}</p>
|
||||
<form method="POST" use:enhance={submitUpdateTheme}>
|
||||
<li>
|
||||
<button formaction="/?/setTheme&theme=light"
|
||||
>Light<WeatherSunny class="w-6 h-6" />
|
||||
>{$t('navbar.themes.light')}<WeatherSunny class="w-6 h-6" />
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button formaction="/?/setTheme&theme=dark">Dark<WeatherNight class="w-6 h-6" /></button
|
||||
<button formaction="/?/setTheme&theme=dark"
|
||||
>{$t('navbar.themes.dark')}<WeatherNight class="w-6 h-6" /></button
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<button formaction="/?/setTheme&theme=night"
|
||||
>Night<WeatherNight class="w-6 h-6" /></button
|
||||
>{$t('navbar.themes.night')}<WeatherNight class="w-6 h-6" /></button
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<button formaction="/?/setTheme&theme=forest">Forest<Forest class="w-6 h-6" /></button>
|
||||
<button formaction="/?/setTheme&theme=forest"
|
||||
>{$t('navbar.themes.forest')}<Forest class="w-6 h-6" /></button
|
||||
>
|
||||
<button formaction="/?/setTheme&theme=aestheticLight"
|
||||
>Aesthetic Light<PaletteOutline class="w-6 h-6" /></button
|
||||
>{$t('navbar.themes.aestetic-light')}<PaletteOutline class="w-6 h-6" /></button
|
||||
>
|
||||
<button formaction="/?/setTheme&theme=aestheticDark"
|
||||
>Aesthetic Dark<PaletteOutline class="w-6 h-6" /></button
|
||||
>{$t('navbar.themes.aestetic-dark')}<PaletteOutline class="w-6 h-6" /></button
|
||||
>
|
||||
<button formaction="/?/setTheme&theme=aqua">Aqua<Water class="w-6 h-6" /></button>
|
||||
<button formaction="/?/setTheme&theme=aqua"
|
||||
>{$t('navbar.themes.aqua')}<Water class="w-6 h-6" /></button
|
||||
>
|
||||
<form method="POST" use:enhance>
|
||||
<select class="select" on:change={submitLocaleChange} bind:value={$locale}>
|
||||
{#each $locales as loc}
|
||||
<option value={loc}>{loc}</option>
|
||||
{/each}
|
||||
</select>
|
||||
<input type="hidden" name="locale" value={$locale} />
|
||||
</form>
|
||||
</li>
|
||||
</form>
|
||||
</ul>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue