mirror of
https://github.com/seanmorley15/AdventureLog.git
synced 2025-07-19 04:49:37 +02:00
UI changes and updates, collection page refresh
This commit is contained in:
Sean Morley
parent
c9dd5fe33d
commit
f7c998ab58
20 changed files with 834 additions and 834 deletions
|
|
@ -41,7 +41,7 @@ export default defineConfig({
|
|||
|
||||
footer: {
|
||||
message: "AdventureLog",
|
||||
copyright: "Copyright © 2023-2024 Sean Morley",
|
||||
copyright: "Copyright © 2023-2025 Sean Morley",
|
||||
},
|
||||
|
||||
logo: "/adventurelog.png",
|
||||
|
|
|
|||
182
frontend/src/lib/components/CollectionModal.svelte
Normal file
182
frontend/src/lib/components/CollectionModal.svelte
Normal file
|
|
@ -0,0 +1,182 @@
|
|||
<script lang="ts">
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import type { Collection, Transportation } from '$lib/types';
|
||||
const dispatch = createEventDispatcher();
|
||||
import { onMount } from 'svelte';
|
||||
import { addToast } from '$lib/toasts';
|
||||
let modal: HTMLDialogElement;
|
||||
import { t } from 'svelte-i18n';
|
||||
|
||||
import MarkdownEditor from './MarkdownEditor.svelte';
|
||||
|
||||
export let collectionToEdit: Collection | null = null;
|
||||
|
||||
let collection: Collection = {
|
||||
id: collectionToEdit?.id || '',
|
||||
name: collectionToEdit?.name || '',
|
||||
description: collectionToEdit?.description || '',
|
||||
start_date: collectionToEdit?.start_date || null,
|
||||
end_date: collectionToEdit?.end_date || null,
|
||||
user_id: collectionToEdit?.user_id || '',
|
||||
is_public: collectionToEdit?.is_public || false,
|
||||
adventures: collectionToEdit?.adventures || [],
|
||||
link: collectionToEdit?.link || '',
|
||||
shared_with: collectionToEdit?.shared_with || []
|
||||
};
|
||||
|
||||
console.log(collection);
|
||||
|
||||
onMount(async () => {
|
||||
modal = document.getElementById('my_modal_1') as HTMLDialogElement;
|
||||
if (modal) {
|
||||
modal.showModal();
|
||||
}
|
||||
});
|
||||
|
||||
function close() {
|
||||
dispatch('close');
|
||||
}
|
||||
|
||||
function handleKeydown(event: KeyboardEvent) {
|
||||
if (event.key === 'Escape') {
|
||||
close();
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSubmit(event: Event) {
|
||||
event.preventDefault();
|
||||
console.log(collection);
|
||||
|
||||
if (collection.id === '') {
|
||||
let res = await fetch('/api/collections', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(collection)
|
||||
});
|
||||
let data = await res.json();
|
||||
if (data.id) {
|
||||
collection = data as Collection;
|
||||
addToast('success', $t('collection.collection_created'));
|
||||
dispatch('save', collection);
|
||||
} else {
|
||||
console.error(data);
|
||||
addToast('error', $t('collection.error_creating_collection'));
|
||||
}
|
||||
} else {
|
||||
let res = await fetch(`/api/collections/${collection.id}`, {
|
||||
method: 'PATCH',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(collection)
|
||||
});
|
||||
let data = await res.json();
|
||||
if (data.id) {
|
||||
collection = data as Collection;
|
||||
addToast('success', $t('collection.collection_edit_success'));
|
||||
dispatch('save', collection);
|
||||
} else {
|
||||
addToast('error', $t('collection.error_editing_collection'));
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<dialog id="my_modal_1" class="modal">
|
||||
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
|
||||
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
|
||||
<div class="modal-box w-11/12 max-w-3xl" role="dialog" on:keydown={handleKeydown} tabindex="0">
|
||||
<h3 class="font-bold text-2xl">
|
||||
{collectionToEdit ? $t('adventures.edit_collection') : $t('collection.new_collection')}
|
||||
</h3>
|
||||
<div class="modal-action items-center">
|
||||
<form method="post" style="width: 100%;" on:submit={handleSubmit}>
|
||||
<!-- Basic Information Section -->
|
||||
<div class="collapse collapse-plus bg-base-200 mb-4">
|
||||
<input type="checkbox" checked />
|
||||
<div class="collapse-title text-xl font-medium">
|
||||
{$t('adventures.basic_information')}
|
||||
</div>
|
||||
<div class="collapse-content">
|
||||
<!-- Name -->
|
||||
<div>
|
||||
<label for="name">
|
||||
{$t('adventures.name')}<span class="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
bind:value={collection.name}
|
||||
class="input input-bordered w-full"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<!-- Description -->
|
||||
<div>
|
||||
<label for="description">{$t('adventures.description')}</label><br />
|
||||
<MarkdownEditor bind:text={collection.description} editor_height={'h-32'} />
|
||||
</div>
|
||||
<!-- Start Date -->
|
||||
<div>
|
||||
<label for="start_date">{$t('adventures.start_date')}</label>
|
||||
<input
|
||||
type="date"
|
||||
id="start_date"
|
||||
name="start_date"
|
||||
bind:value={collection.start_date}
|
||||
class="input input-bordered w-full"
|
||||
/>
|
||||
</div>
|
||||
<!-- End Date -->
|
||||
<div>
|
||||
<label for="end_date">{$t('adventures.end_date')}</label>
|
||||
<input
|
||||
type="date"
|
||||
id="end_date"
|
||||
name="end_date"
|
||||
bind:value={collection.end_date}
|
||||
class="input input-bordered w-full"
|
||||
/>
|
||||
</div>
|
||||
<!-- Public -->
|
||||
<div>
|
||||
<label class="label cursor-pointer flex items-start space-x-2">
|
||||
<span class="label-text">{$t('collection.public_collection')}</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
class="toggle toggle-primary"
|
||||
id="is_public"
|
||||
name="is_public"
|
||||
bind:checked={collection.is_public}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<!-- Link -->
|
||||
<div>
|
||||
<label for="link">{$t('adventures.link')}</label>
|
||||
<input
|
||||
type="text"
|
||||
id="link"
|
||||
name="link"
|
||||
bind:value={collection.link}
|
||||
class="input input-bordered w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Form Actions -->
|
||||
<div class="mt-4">
|
||||
<button type="submit" class="btn btn-primary">
|
||||
{$t('adventures.save_next')}
|
||||
</button>
|
||||
<button type="button" class="btn" on:click={close}>
|
||||
{$t('about.close')}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
|
|
@ -1,209 +0,0 @@
|
|||
<script lang="ts">
|
||||
export let collectionToEdit: Collection;
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import type { Collection } from '$lib/types';
|
||||
import { t } from 'svelte-i18n';
|
||||
const dispatch = createEventDispatcher();
|
||||
import { onMount } from 'svelte';
|
||||
import { addToast } from '$lib/toasts';
|
||||
let modal: HTMLDialogElement;
|
||||
|
||||
console.log(collectionToEdit.id);
|
||||
|
||||
let originalName = collectionToEdit.name;
|
||||
|
||||
import Calendar from '~icons/mdi/calendar';
|
||||
import Notebook from '~icons/mdi/notebook';
|
||||
import Earth from '~icons/mdi/earth';
|
||||
|
||||
onMount(async () => {
|
||||
modal = document.getElementById('my_modal_1') as HTMLDialogElement;
|
||||
if (modal) {
|
||||
modal.showModal();
|
||||
}
|
||||
});
|
||||
|
||||
function submit() {}
|
||||
|
||||
function close() {
|
||||
dispatch('close');
|
||||
}
|
||||
|
||||
function handleKeydown(event: KeyboardEvent) {
|
||||
if (event.key === 'Escape') {
|
||||
close();
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSubmit(event: Event) {
|
||||
event.preventDefault();
|
||||
const form = event.target as HTMLFormElement;
|
||||
const formData = new FormData(form);
|
||||
|
||||
if (collectionToEdit.end_date && collectionToEdit.start_date) {
|
||||
if (new Date(collectionToEdit.start_date) > new Date(collectionToEdit.end_date)) {
|
||||
addToast('error', $t('adventures.start_before_end_error'));
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (collectionToEdit.end_date && !collectionToEdit.start_date) {
|
||||
addToast('error', $t('adventures.no_start_date'));
|
||||
return;
|
||||
}
|
||||
|
||||
if (collectionToEdit.start_date && !collectionToEdit.end_date) {
|
||||
addToast('error', $t('adventures.no_end_date'));
|
||||
return;
|
||||
}
|
||||
|
||||
const response = await fetch(form.action, {
|
||||
method: form.method,
|
||||
body: formData
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const result = await response.json();
|
||||
const data = JSON.parse(result.data);
|
||||
console.log(data);
|
||||
|
||||
if (data) {
|
||||
addToast('success', $t('collection.collection_edit_success'));
|
||||
dispatch('saveEdit', collectionToEdit);
|
||||
close();
|
||||
} else {
|
||||
addToast('warning', $t('collection.error_editing_collection'));
|
||||
console.log('Error editing collection');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<dialog id="my_modal_1" class="modal">
|
||||
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
|
||||
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
|
||||
<div class="modal-box" role="dialog" on:keydown={handleKeydown} tabindex="0">
|
||||
<h3 class="font-bold text-lg">{$t('adventures.edit_collection')}: {originalName}</h3>
|
||||
<div
|
||||
class="modal-action items-center"
|
||||
style="display: flex; flex-direction: column; align-items: center; width: 100%;"
|
||||
>
|
||||
<form method="post" style="width: 100%;" on:submit={handleSubmit} action="/collections?/edit">
|
||||
<div class="mb-2">
|
||||
<input
|
||||
type="text"
|
||||
id="adventureId"
|
||||
name="adventureId"
|
||||
hidden
|
||||
readonly
|
||||
bind:value={collectionToEdit.id}
|
||||
class="input input-bordered w-full max-w-xs mt-1"
|
||||
/>
|
||||
<label for="name">{$t('adventures.name')}</label><br />
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
id="name"
|
||||
bind:value={collectionToEdit.name}
|
||||
class="input input-bordered w-full max-w-xs mt-1"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label for="date"
|
||||
>{$t('adventures.description')}
|
||||
<Notebook class="inline-block -mt-1 mb-1 w-6 h-6" /></label
|
||||
><br />
|
||||
<div class="flex">
|
||||
<input
|
||||
type="text"
|
||||
id="description"
|
||||
name="description"
|
||||
bind:value={collectionToEdit.description}
|
||||
class="input input-bordered w-full max-w-xs mt-1 mb-2"
|
||||
/>
|
||||
|
||||
<!-- <button
|
||||
class="btn btn-neutral ml-2"
|
||||
type="button"
|
||||
on:click={generate}
|
||||
><iconify-icon icon="mdi:wikipedia" class="text-xl -mb-1"
|
||||
></iconify-icon>Generate Description</button
|
||||
> -->
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label for="start_date"
|
||||
>{$t('adventures.start_date')} <Calendar class="inline-block mb-1 w-6 h-6" /></label
|
||||
><br />
|
||||
<input
|
||||
type="date"
|
||||
id="start_date"
|
||||
name="start_date"
|
||||
bind:value={collectionToEdit.start_date}
|
||||
class="input input-bordered w-full max-w-xs mt-1"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label for="end_date"
|
||||
>{$t('adventures.end_date')} <Calendar class="inline-block mb-1 w-6 h-6" /></label
|
||||
><br />
|
||||
<input
|
||||
type="date"
|
||||
id="end_date"
|
||||
name="end_date"
|
||||
bind:value={collectionToEdit.end_date}
|
||||
class="input input-bordered w-full max-w-xs mt-1"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label for="end_date">{$t('adventures.link')} </label><br />
|
||||
<input
|
||||
type="url"
|
||||
id="link"
|
||||
name="link"
|
||||
bind:value={collectionToEdit.link}
|
||||
class="input input-bordered w-full max-w-xs mt-1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label for="is_public"
|
||||
>{$t('adventures.public')} <Earth class="inline-block -mt-1 mb-1 w-6 h-6" /></label
|
||||
><br />
|
||||
<input
|
||||
type="checkbox"
|
||||
class="toggle toggle-primary"
|
||||
id="is_public"
|
||||
name="is_public"
|
||||
bind:checked={collectionToEdit.is_public}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{#if collectionToEdit.is_public}
|
||||
<div class="bg-neutral p-4 rounded-md shadow-sm">
|
||||
<p class=" font-semibold">{$t('adventures.share_adventure')}</p>
|
||||
<div class="flex items-center justify-between">
|
||||
<p class="text-card-foreground font-mono">
|
||||
{window.location.origin}/collections/{collectionToEdit.id}
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
on:click={() => {
|
||||
navigator.clipboard.writeText(
|
||||
`${window.location.origin}/collections/${collectionToEdit.id}`
|
||||
);
|
||||
}}
|
||||
class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-10 px-4 py-2"
|
||||
>
|
||||
{$t('adventures.copy_link')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<button type="submit" class="btn btn-primary mr-4 mt-4" on:click={submit}>Edit</button>
|
||||
<!-- if there is a button in form, it will close the modal -->
|
||||
<button class="btn mt-4" on:click={close}>{$t('about.close')}</button>
|
||||
</form>
|
||||
<div class="flex items-center justify-center flex-wrap gap-4 mt-4"></div>
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
|
|
@ -1,180 +0,0 @@
|
|||
<script lang="ts">
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import type { Adventure, Collection } from '$lib/types';
|
||||
import { onMount } from 'svelte';
|
||||
import { t } from 'svelte-i18n';
|
||||
import { addToast } from '$lib/toasts';
|
||||
|
||||
import Calendar from '~icons/mdi/calendar';
|
||||
|
||||
let newCollection: Collection = {
|
||||
user_id: '',
|
||||
id: '',
|
||||
name: '',
|
||||
description: '',
|
||||
adventures: [] as Adventure[],
|
||||
is_public: false,
|
||||
shared_with: [],
|
||||
link: ''
|
||||
};
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
let modal: HTMLDialogElement;
|
||||
|
||||
onMount(async () => {
|
||||
modal = document.getElementById('my_modal_1') as HTMLDialogElement;
|
||||
if (modal) {
|
||||
modal.showModal();
|
||||
}
|
||||
});
|
||||
|
||||
function close() {
|
||||
dispatch('close');
|
||||
}
|
||||
|
||||
function handleKeydown(event: KeyboardEvent) {
|
||||
if (event.key === 'Escape') {
|
||||
close();
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSubmit(event: Event) {
|
||||
event.preventDefault();
|
||||
const form = event.target as HTMLFormElement;
|
||||
const formData = new FormData(form);
|
||||
|
||||
// make sure that start_date is before end_date
|
||||
if (new Date(newCollection.start_date ?? '') > new Date(newCollection.end_date ?? '')) {
|
||||
addToast('error', $t('adventures.start_before_end_error'));
|
||||
return;
|
||||
}
|
||||
|
||||
// make sure end date has a start date
|
||||
if (newCollection.end_date && !newCollection.start_date) {
|
||||
addToast('error', $t('adventures.no_start_date'));
|
||||
return;
|
||||
}
|
||||
|
||||
if (newCollection.start_date && !newCollection.end_date) {
|
||||
addToast('error', $t('adventures.no_end_date'));
|
||||
return;
|
||||
}
|
||||
|
||||
const response = await fetch(form.action, {
|
||||
method: form.method,
|
||||
body: formData
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const result = await response.json();
|
||||
const data = JSON.parse(result.data); // Parsing the JSON string in the data field
|
||||
|
||||
if (data[1] !== undefined) {
|
||||
// these two lines here are wierd, because the data[1] is the id of the new adventure and data[2] is the user_id of the new adventure
|
||||
console.log(data);
|
||||
let id = data[1];
|
||||
let user_id = data[2];
|
||||
|
||||
if (id !== undefined && user_id !== undefined) {
|
||||
newCollection.id = id;
|
||||
newCollection.user_id = user_id;
|
||||
console.log(newCollection);
|
||||
dispatch('create', newCollection);
|
||||
addToast('success', $t('collection.collection_created'));
|
||||
close();
|
||||
} else {
|
||||
addToast('error', $t('collection.error_creating_collection'));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
|
||||
<dialog id="my_modal_1" class="modal">
|
||||
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
|
||||
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
|
||||
<div class="modal-box" role="dialog" on:keydown={handleKeydown} tabindex="0">
|
||||
<h3 class="font-bold text-lg">{$t('collection.new_collection')}</h3>
|
||||
<div
|
||||
class="modal-action items-center"
|
||||
style="display: flex; flex-direction: column; align-items: center; width: 100%;"
|
||||
>
|
||||
<form
|
||||
method="post"
|
||||
style="width: 100%;"
|
||||
on:submit={handleSubmit}
|
||||
action="/collections?/create"
|
||||
>
|
||||
<div class="mb-2">
|
||||
<label for="name">{$t('adventures.name')}</label><br />
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
bind:value={newCollection.name}
|
||||
class="input input-bordered w-full max-w-xs mt-1"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label for="description"
|
||||
>{$t('adventures.description')}<iconify-icon
|
||||
icon="mdi:notebook"
|
||||
class="text-lg ml-1 -mb-0.5"
|
||||
></iconify-icon></label
|
||||
><br />
|
||||
<div class="flex">
|
||||
<input
|
||||
type="text"
|
||||
id="description"
|
||||
name="description"
|
||||
bind:value={newCollection.description}
|
||||
class="input input-bordered w-full max-w-xs mt-1 mb-2"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label for="start_date"
|
||||
>{$t('adventures.start_date')} <Calendar class="inline-block mb-1 w-6 h-6" /></label
|
||||
><br />
|
||||
<input
|
||||
type="date"
|
||||
id="start_date"
|
||||
name="start_date"
|
||||
bind:value={newCollection.start_date}
|
||||
class="input input-bordered w-full max-w-xs mt-1"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label for="end_date"
|
||||
>{$t('adventures.end_date')} <Calendar class="inline-block mb-1 w-6 h-6" /></label
|
||||
><br />
|
||||
<input
|
||||
type="date"
|
||||
id="end_date"
|
||||
name="end_date"
|
||||
bind:value={newCollection.end_date}
|
||||
class="input input-bordered w-full max-w-xs mt-1"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label for="end_date">{$t('adventures.link')} </label><br />
|
||||
<input
|
||||
type="url"
|
||||
id="link"
|
||||
name="link"
|
||||
bind:value={newCollection.link}
|
||||
class="input input-bordered w-full max-w-xs mt-1"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<button type="submit" class="btn btn-primary mr-4 mt-4">
|
||||
{$t('collection.create')}
|
||||
</button>
|
||||
<button type="button" class="btn mt-4" on:click={close}>{$t('about.close')}</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
|
|
@ -73,22 +73,22 @@
|
|||
<p class="break-words">{transportation.from_location}</p>
|
||||
</div>
|
||||
{/if}
|
||||
{#if transportation.to_location}
|
||||
<!-- <ArrowDownThick class="w-4 h-4" /> -->
|
||||
{#if transportation.date}
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-medium text-sm">{$t('adventures.to')}:</span>
|
||||
|
||||
<p class="break-words">{transportation.to_location}</p>
|
||||
<span class="font-medium text-sm">{$t('adventures.start')}:</span>
|
||||
<p>{new Date(transportation.date).toLocaleString(undefined, { timeZone: 'UTC' })}</p>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Dates -->
|
||||
<div class="space-y-2">
|
||||
{#if transportation.date}
|
||||
{#if transportation.to_location}
|
||||
<!-- <ArrowDownThick class="w-4 h-4" /> -->
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-medium text-sm">{$t('adventures.start')}:</span>
|
||||
<p>{new Date(transportation.date).toLocaleString(undefined, { timeZone: 'UTC' })}</p>
|
||||
<span class="font-medium text-sm">{$t('adventures.to')}:</span>
|
||||
|
||||
<p class="break-words">{transportation.to_location}</p>
|
||||
</div>
|
||||
{/if}
|
||||
{#if transportation.end_date}
|
||||
|
|
|
|||
|
|
@ -17,34 +17,46 @@
|
|||
class="card w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-md xl:max-w-md bg-neutral text-neutral-content shadow-xl"
|
||||
>
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<!-- Profile Picture and User Info -->
|
||||
<div class="flex flex-col items-center">
|
||||
{#if user.profile_pic}
|
||||
<div class="avatar">
|
||||
<div class="w-24 rounded-full">
|
||||
<div class="avatar mb-4">
|
||||
<div class="w-24 rounded-full ring ring-primary ring-offset-neutral ring-offset-2">
|
||||
<img src={user.profile_pic} alt={user.username} />
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
<h2 class="card-title overflow-ellipsis">{user.first_name} {user.last_name}</h2>
|
||||
|
||||
<h2 class="card-title text-center text-lg font-bold">
|
||||
{user.first_name}
|
||||
{user.last_name}
|
||||
</h2>
|
||||
<p class="text-sm text-center">{user.username}</p>
|
||||
|
||||
<!-- Admin Badge -->
|
||||
{#if user.is_staff}
|
||||
<div class="badge badge-primary mt-2">Admin</div>
|
||||
{/if}
|
||||
</div>
|
||||
<p class="text-sm text-neutral-content">{user.username}</p>
|
||||
{#if user.is_staff}
|
||||
<div class="badge badge-primary">Admin</div>
|
||||
{/if}
|
||||
<!-- member since -->
|
||||
<div class="flex items-center space-x-2">
|
||||
<Calendar class="w-4 h-4 mr-1" />
|
||||
<p class="text-sm text-neutral-content">
|
||||
|
||||
<!-- Member Since -->
|
||||
<div class="flex items-center justify-center mt-4 space-x-2 text-sm">
|
||||
<Calendar class="w-5 h-5 text-primary" />
|
||||
<p>
|
||||
{user.date_joined ? 'Joined ' + new Date(user.date_joined).toLocaleDateString() : ''}
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-actions justify-end">
|
||||
|
||||
<!-- Card Actions -->
|
||||
<div class="card-actions justify-center mt-6">
|
||||
{#if !sharing}
|
||||
<button class="btn btn-primary" on:click={() => goto(`/user/${user.uuid}`)}>View</button>
|
||||
<button class="btn btn-primary" on:click={() => goto(`/user/${user.uuid}`)}>
|
||||
View Profile
|
||||
</button>
|
||||
{:else if shared_with && !shared_with.includes(user.uuid)}
|
||||
<button class="btn btn-primary" on:click={() => dispatch('share', user)}>Share</button>
|
||||
<button class="btn btn-success" on:click={() => dispatch('share', user)}> Share </button>
|
||||
{:else}
|
||||
<button class="btn btn-primary" on:click={() => dispatch('unshare', user)}>Unshare</button>
|
||||
<button class="btn btn-error" on:click={() => dispatch('unshare', user)}> Unshare </button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
export let appVersion = 'Web v0.7.1';
|
||||
export let appVersion = 'v0.7.1';
|
||||
export let versionChangelog = 'https://github.com/seanmorley15/AdventureLog/releases/tag/v0.7.1';
|
||||
export let appTitle = 'AdventureLog';
|
||||
export let copyrightYear = '2024';
|
||||
export let copyrightYear = '2023-2025';
|
||||
|
|
|
|||
|
|
@ -289,6 +289,37 @@ export function getAdventureTypeLabel(type: string) {
|
|||
}
|
||||
|
||||
export function getRandomBackground() {
|
||||
const today = new Date();
|
||||
|
||||
// Special dates for specific backgrounds
|
||||
// New Years week
|
||||
|
||||
const newYearsStart = new Date(today.getFullYear() - 1, 11, 31);
|
||||
newYearsStart.setHours(0, 0, 0, 0);
|
||||
const newYearsEnd = new Date(today.getFullYear(), 0, 7);
|
||||
newYearsEnd.setHours(23, 59, 59, 999);
|
||||
if (today >= newYearsStart && today <= newYearsEnd) {
|
||||
return {
|
||||
url: 'backgrounds/adventurelog_new_year.webp',
|
||||
author: 'Roven Images',
|
||||
location: "Happy New Year's from the AdventureLog team!"
|
||||
} as Background;
|
||||
}
|
||||
|
||||
// Christmas 12/24 - 12/25
|
||||
const christmasStart = new Date(today.getFullYear(), 11, 24);
|
||||
christmasStart.setHours(0, 0, 0, 0);
|
||||
const christmasEnd = new Date(today.getFullYear(), 11, 25);
|
||||
christmasEnd.setHours(23, 59, 59, 999);
|
||||
|
||||
if (today >= christmasStart && today <= christmasEnd) {
|
||||
return {
|
||||
url: 'backgrounds/adventurelog_christmas.webp',
|
||||
author: 'Annie Spratt',
|
||||
location: 'Merry Christmas from the AdventureLog team!'
|
||||
} as Background;
|
||||
}
|
||||
|
||||
const randomIndex = Math.floor(Math.random() * randomBackgrounds.backgrounds.length);
|
||||
return randomBackgrounds.backgrounds[randomIndex] as Background;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -86,9 +86,9 @@ export type Collection = {
|
|||
description: string;
|
||||
is_public: boolean;
|
||||
adventures: Adventure[];
|
||||
created_at?: string;
|
||||
start_date?: string;
|
||||
end_date?: string;
|
||||
created_at?: string | null;
|
||||
start_date: string | null;
|
||||
end_date: string | null;
|
||||
transportations?: Transportation[];
|
||||
notes?: Note[];
|
||||
checklists?: Checklist[];
|
||||
|
|
|
|||
|
|
@ -290,7 +290,7 @@
|
|||
"public_profile": "Public Profile",
|
||||
"public_tooltip": "With a public profile, users can share collections with you and view your profile on the users page.",
|
||||
"email_required": "Email is required",
|
||||
"new_password": "New Password",
|
||||
"new_password": "New Password (6+ characters)",
|
||||
"both_passwords_required": "Both passwords are required",
|
||||
"reset_failed": "Failed to reset password"
|
||||
},
|
||||
|
|
@ -375,7 +375,8 @@
|
|||
"create": "Create",
|
||||
"collection_edit_success": "Collection edited successfully!",
|
||||
"error_editing_collection": "Error editing collection",
|
||||
"edit_collection": "Edit Collection"
|
||||
"edit_collection": "Edit Collection",
|
||||
"public_collection": "Public Collection"
|
||||
},
|
||||
"notes": {
|
||||
"note_deleted": "Note deleted successfully!",
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@
|
|||
view: 'dayGridMonth',
|
||||
events: [...dates]
|
||||
};
|
||||
console.log(dates);
|
||||
</script>
|
||||
|
||||
<h1 class="text-center text-2xl font-bold">{$t('adventures.adventure_calendar')}</h1>
|
||||
|
|
|
|||
|
|
@ -2,8 +2,7 @@
|
|||
import { enhance } from '$app/forms';
|
||||
import { goto } from '$app/navigation';
|
||||
import CollectionCard from '$lib/components/CollectionCard.svelte';
|
||||
import EditCollection from '$lib/components/EditCollection.svelte';
|
||||
import NewCollection from '$lib/components/NewCollection.svelte';
|
||||
import CollectionModal from '$lib/components/CollectionModal.svelte';
|
||||
import NotFound from '$lib/components/NotFound.svelte';
|
||||
import type { Collection } from '$lib/types';
|
||||
import { t } from 'svelte-i18n';
|
||||
|
|
@ -17,10 +16,10 @@
|
|||
|
||||
let currentSort = { attribute: 'name', order: 'asc' };
|
||||
|
||||
let isShowingCreateModal: boolean = false;
|
||||
let newType: string = '';
|
||||
|
||||
let resultsPerPage: number = 25;
|
||||
let isShowingCollectionModal: boolean = false;
|
||||
|
||||
let next: string | null = data.props.next || null;
|
||||
let previous: string | null = data.props.previous || null;
|
||||
|
|
@ -86,8 +85,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
let collectionToEdit: Collection;
|
||||
let isEditModalOpen: boolean = false;
|
||||
let collectionToEdit: Collection | null = null;
|
||||
|
||||
function deleteAdventure(event: CustomEvent<string>) {
|
||||
collections = collections.filter((adventure) => adventure.id !== event.detail);
|
||||
|
|
@ -95,12 +93,12 @@
|
|||
|
||||
function createAdventure(event: CustomEvent<Collection>) {
|
||||
collections = [event.detail, ...collections];
|
||||
isShowingCreateModal = false;
|
||||
isShowingCollectionModal = false;
|
||||
}
|
||||
|
||||
function editCollection(event: CustomEvent<Collection>) {
|
||||
collectionToEdit = event.detail;
|
||||
isEditModalOpen = true;
|
||||
isShowingCollectionModal = true;
|
||||
}
|
||||
|
||||
function saveEdit(event: CustomEvent<Collection>) {
|
||||
|
|
@ -110,7 +108,7 @@
|
|||
}
|
||||
return adventure;
|
||||
});
|
||||
isEditModalOpen = false;
|
||||
isShowingCollectionModal = false;
|
||||
}
|
||||
|
||||
let sidebarOpen = false;
|
||||
|
|
@ -120,18 +118,13 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
{#if isShowingCreateModal}
|
||||
<NewCollection on:create={createAdventure} on:close={() => (isShowingCreateModal = false)} />
|
||||
{/if}
|
||||
|
||||
{#if isEditModalOpen}
|
||||
<EditCollection
|
||||
{#if isShowingCollectionModal}
|
||||
<CollectionModal
|
||||
{collectionToEdit}
|
||||
on:close={() => (isEditModalOpen = false)}
|
||||
on:close={() => (isShowingCollectionModal = false)}
|
||||
on:saveEdit={saveEdit}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
<div class="fixed bottom-4 right-4 z-[999]">
|
||||
<div class="flex flex-row items-center justify-center gap-4">
|
||||
<div class="dropdown dropdown-top dropdown-end">
|
||||
|
|
@ -147,17 +140,13 @@
|
|||
<button
|
||||
class="btn btn-primary"
|
||||
on:click={() => {
|
||||
isShowingCreateModal = true;
|
||||
collectionToEdit = null;
|
||||
isShowingCollectionModal = true;
|
||||
newType = 'visited';
|
||||
}}
|
||||
>
|
||||
{$t(`adventures.collection`)}</button
|
||||
>
|
||||
|
||||
<!-- <button
|
||||
class="btn btn-primary"
|
||||
on:click={() => (isShowingNewTrip = true)}>Trip Planner</button
|
||||
> -->
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,10 +2,17 @@
|
|||
import type { Adventure, Checklist, Collection, Note, Transportation } from '$lib/types';
|
||||
import { onMount } from 'svelte';
|
||||
import type { PageData } from './$types';
|
||||
import { goto } from '$app/navigation';
|
||||
import Lost from '$lib/assets/undraw_lost.svg';
|
||||
import { marked } from 'marked'; // Import the markdown parser
|
||||
|
||||
import { t } from 'svelte-i18n';
|
||||
|
||||
// @ts-ignore
|
||||
import Calendar from '@event-calendar/core';
|
||||
// @ts-ignore
|
||||
import TimeGrid from '@event-calendar/time-grid';
|
||||
// @ts-ignore
|
||||
import DayGrid from '@event-calendar/day-grid';
|
||||
|
||||
import Plus from '~icons/mdi/plus';
|
||||
import AdventureCard from '$lib/components/AdventureCard.svelte';
|
||||
import AdventureLink from '$lib/components/AdventureLink.svelte';
|
||||
|
|
@ -29,8 +36,58 @@
|
|||
export let data: PageData;
|
||||
console.log(data);
|
||||
|
||||
const renderMarkdown = (markdown: string) => {
|
||||
return marked(markdown);
|
||||
};
|
||||
|
||||
let collection: Collection;
|
||||
|
||||
// add christmas and new years
|
||||
// dates = Array.from({ length: 25 }, (_, i) => {
|
||||
// const date = new Date();
|
||||
// date.setMonth(11);
|
||||
// date.setDate(i + 1);
|
||||
// return {
|
||||
// id: i.toString(),
|
||||
// start: date.toISOString(),
|
||||
// end: date.toISOString(),
|
||||
// title: '🎄'
|
||||
// };
|
||||
// });
|
||||
|
||||
let dates: Array<{
|
||||
id: string;
|
||||
start: string;
|
||||
end: string;
|
||||
title: string;
|
||||
backgroundColor?: string;
|
||||
}> = [];
|
||||
|
||||
// Initialize calendar plugins and options
|
||||
let plugins = [TimeGrid, DayGrid];
|
||||
let options = {
|
||||
view: 'dayGridMonth',
|
||||
events: dates // Assign `dates` reactively
|
||||
};
|
||||
|
||||
// Compute `dates` array reactively
|
||||
$: {
|
||||
if (adventures) {
|
||||
dates = adventures.flatMap((adventure) =>
|
||||
adventure.visits.map((visit) => ({
|
||||
id: adventure.id,
|
||||
start: visit.start_date, // Convert to ISO format if needed
|
||||
end: visit.end_date || visit.start_date,
|
||||
title: adventure.name + (adventure.category?.icon ? ' ' + adventure.category.icon : '')
|
||||
}))
|
||||
);
|
||||
}
|
||||
// Update `options.events` when `dates` changes
|
||||
options = { ...options, events: dates };
|
||||
}
|
||||
|
||||
let currentView: string = 'itinerary';
|
||||
|
||||
let adventures: Adventure[] = [];
|
||||
|
||||
let numVisited: number = 0;
|
||||
|
|
@ -364,9 +421,20 @@
|
|||
</div>
|
||||
{/if}
|
||||
|
||||
{#if collection.description}
|
||||
<p class="text-center text-lg mb-2">{collection.description}</p>
|
||||
{#if collection && !collection.start_date && adventures.length == 0 && transportations.length == 0 && notes.length == 0 && checklists.length == 0}
|
||||
<NotFound error={undefined} />
|
||||
{/if}
|
||||
|
||||
{#if collection.description}
|
||||
<div class="flex justify-center mt-4">
|
||||
<article
|
||||
class="prose overflow-auto h-96 max-w-full p-4 border border-base-300 rounded-lg bg-base-300"
|
||||
>
|
||||
{@html renderMarkdown(collection.description)}
|
||||
</article>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if adventures.length > 0}
|
||||
<div class="flex items-center justify-center mb-4">
|
||||
<div class="stats shadow bg-base-300">
|
||||
|
|
@ -383,269 +451,323 @@
|
|||
</div>
|
||||
{/if}
|
||||
|
||||
{#if adventures.length > 0}
|
||||
<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}
|
||||
<AdventureCard
|
||||
user={data.user}
|
||||
on:edit={editAdventure}
|
||||
on:delete={deleteAdventure}
|
||||
{adventure}
|
||||
{collection}
|
||||
/>
|
||||
{/each}
|
||||
<div class="flex justify-center mx-auto">
|
||||
<!-- svelte-ignore a11y-missing-attribute -->
|
||||
<div role="tablist" class="tabs tabs-boxed tabs-lg max-w-xl">
|
||||
<!-- svelte-ignore a11y-missing-attribute -->
|
||||
<a
|
||||
role="tab"
|
||||
class="tab {currentView === 'itinerary' ? 'tab-active' : ''}"
|
||||
tabindex="0"
|
||||
on:click={() => (currentView = 'itinerary')}
|
||||
on:keydown={(e) => e.key === 'Enter' && (currentView = 'itinerary')}>Itinerary</a
|
||||
>
|
||||
<a
|
||||
role="tab"
|
||||
class="tab {currentView === 'all' ? 'tab-active' : ''}"
|
||||
tabindex="0"
|
||||
on:click={() => (currentView = 'all')}
|
||||
on:keydown={(e) => e.key === 'Enter' && (currentView = 'all')}>All Linked Items</a
|
||||
>
|
||||
<a
|
||||
role="tab"
|
||||
class="tab {currentView === 'calendar' ? 'tab-active' : ''}"
|
||||
tabindex="0"
|
||||
on:click={() => (currentView = 'calendar')}
|
||||
on:keydown={(e) => e.key === 'Enter' && (currentView = 'calendar')}>Calendar</a
|
||||
>
|
||||
<a
|
||||
role="tab"
|
||||
class="tab {currentView === 'map' ? 'tab-active' : ''}"
|
||||
tabindex="0"
|
||||
on:click={() => (currentView = 'map')}
|
||||
on:keydown={(e) => e.key === 'Enter' && (currentView = 'map')}>Map</a
|
||||
>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if transportations.length > 0}
|
||||
<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
|
||||
{transportation}
|
||||
user={data?.user}
|
||||
on:delete={(event) => {
|
||||
transportations = transportations.filter((t) => t.id != event.detail);
|
||||
}}
|
||||
on:edit={editTransportation}
|
||||
{collection}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
{#if currentView == 'all'}
|
||||
{#if adventures.length > 0}
|
||||
<h1 class="text-center font-bold text-4xl mt-4 mb-2">{$t('adventures.linked_adventures')}</h1>
|
||||
|
||||
{#if notes.length > 0}
|
||||
<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
|
||||
{note}
|
||||
user={data.user || null}
|
||||
on:edit={(event) => {
|
||||
noteToEdit = event.detail;
|
||||
isNoteModalOpen = true;
|
||||
}}
|
||||
on:delete={(event) => {
|
||||
notes = notes.filter((n) => n.id != event.detail);
|
||||
}}
|
||||
{collection}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
<div class="flex flex-wrap gap-4 mr-4 justify-center content-center">
|
||||
{#each adventures as adventure}
|
||||
<AdventureCard
|
||||
user={data.user}
|
||||
on:edit={editAdventure}
|
||||
on:delete={deleteAdventure}
|
||||
{adventure}
|
||||
{collection}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if checklists.length > 0}
|
||||
<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
|
||||
{checklist}
|
||||
user={data.user || null}
|
||||
on:delete={(event) => {
|
||||
checklists = checklists.filter((n) => n.id != event.detail);
|
||||
}}
|
||||
on:edit={(event) => {
|
||||
checklistToEdit = event.detail;
|
||||
isShowingChecklistModal = true;
|
||||
}}
|
||||
{collection}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
{#if transportations.length > 0}
|
||||
<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
|
||||
{transportation}
|
||||
user={data?.user}
|
||||
on:delete={(event) => {
|
||||
transportations = transportations.filter((t) => t.id != event.detail);
|
||||
}}
|
||||
on:edit={editTransportation}
|
||||
{collection}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if notes.length > 0}
|
||||
<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
|
||||
{note}
|
||||
user={data.user || null}
|
||||
on:edit={(event) => {
|
||||
noteToEdit = event.detail;
|
||||
isNoteModalOpen = true;
|
||||
}}
|
||||
on:delete={(event) => {
|
||||
notes = notes.filter((n) => n.id != event.detail);
|
||||
}}
|
||||
{collection}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if checklists.length > 0}
|
||||
<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
|
||||
{checklist}
|
||||
user={data.user || null}
|
||||
on:delete={(event) => {
|
||||
checklists = checklists.filter((n) => n.id != event.detail);
|
||||
}}
|
||||
on:edit={(event) => {
|
||||
checklistToEdit = event.detail;
|
||||
isShowingChecklistModal = true;
|
||||
}}
|
||||
{collection}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
{#if collection.start_date && collection.end_date}
|
||||
<div class="hero bg-base-200 py-8 mt-8">
|
||||
<div class="hero-content text-center">
|
||||
<div class="max-w-md">
|
||||
<h1 class="text-5xl font-bold mb-4">{$t('adventures.itineary_by_date')}</h1>
|
||||
{#if numberOfDays}
|
||||
<p class="text-lg mb-2">
|
||||
{$t('adventures.duration')}:
|
||||
<span class="badge badge-primary">{numberOfDays} {$t('adventures.days')}</span>
|
||||
</p>
|
||||
{/if}
|
||||
<p class="text-lg">
|
||||
Dates: <span class="font-semibold"
|
||||
>{new Date(collection.start_date).toLocaleDateString(undefined, { timeZone: 'UTC' })} -
|
||||
{new Date(collection.end_date).toLocaleDateString(undefined, {
|
||||
timeZone: 'UTC'
|
||||
})}</span
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container mx-auto px-4">
|
||||
{#each Array(numberOfDays) as _, i}
|
||||
{@const startDate = new Date(collection.start_date)}
|
||||
{@const tempDate = new Date(startDate.getTime())}
|
||||
{@const adjustedDate = new Date(tempDate.setUTCDate(tempDate.getUTCDate() + i))}
|
||||
{@const dateString = adjustedDate.toISOString().split('T')[0]}
|
||||
|
||||
{@const dayAdventures =
|
||||
groupAdventuresByDate(adventures, new Date(collection.start_date), numberOfDays)[
|
||||
dateString
|
||||
] || []}
|
||||
{@const dayTransportations =
|
||||
groupTransportationsByDate(
|
||||
transportations,
|
||||
new Date(collection.start_date),
|
||||
numberOfDays
|
||||
)[dateString] || []}
|
||||
{@const dayNotes =
|
||||
groupNotesByDate(notes, new Date(collection.start_date), numberOfDays)[dateString] || []}
|
||||
{@const dayChecklists =
|
||||
groupChecklistsByDate(checklists, new Date(collection.start_date), numberOfDays)[
|
||||
dateString
|
||||
] || []}
|
||||
|
||||
<div class="card bg-base-100 shadow-xl my-8">
|
||||
<div class="card-body bg-base-200">
|
||||
<h2 class="card-title text-3xl justify-center g">
|
||||
{$t('adventures.day')}
|
||||
{i + 1}
|
||||
<div class="badge badge-lg">
|
||||
{adjustedDate.toLocaleDateString(undefined, { timeZone: 'UTC' })}
|
||||
</div>
|
||||
</h2>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{#if dayAdventures.length > 0}
|
||||
{#each dayAdventures as adventure}
|
||||
<AdventureCard
|
||||
user={data.user}
|
||||
on:edit={editAdventure}
|
||||
on:delete={deleteAdventure}
|
||||
{adventure}
|
||||
/>
|
||||
{/each}
|
||||
{/if}
|
||||
{#if dayTransportations.length > 0}
|
||||
{#each dayTransportations as transportation}
|
||||
<TransportationCard
|
||||
{transportation}
|
||||
user={data?.user}
|
||||
on:delete={(event) => {
|
||||
transportations = transportations.filter((t) => t.id != event.detail);
|
||||
}}
|
||||
on:edit={(event) => {
|
||||
transportationToEdit = event.detail;
|
||||
isShowingTransportationModal = true;
|
||||
}}
|
||||
/>
|
||||
{/each}
|
||||
{/if}
|
||||
{#if dayNotes.length > 0}
|
||||
{#each dayNotes as note}
|
||||
<NoteCard
|
||||
{note}
|
||||
user={data.user || null}
|
||||
on:edit={(event) => {
|
||||
noteToEdit = event.detail;
|
||||
isNoteModalOpen = true;
|
||||
}}
|
||||
on:delete={(event) => {
|
||||
notes = notes.filter((n) => n.id != event.detail);
|
||||
}}
|
||||
/>
|
||||
{/each}
|
||||
{/if}
|
||||
{#if dayChecklists.length > 0}
|
||||
{#each dayChecklists as checklist}
|
||||
<ChecklistCard
|
||||
{checklist}
|
||||
user={data.user || null}
|
||||
on:delete={(event) => {
|
||||
notes = notes.filter((n) => n.id != event.detail);
|
||||
}}
|
||||
on:edit={(event) => {
|
||||
checklistToEdit = event.detail;
|
||||
isShowingChecklistModal = true;
|
||||
}}
|
||||
/>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if dayAdventures.length == 0 && dayTransportations.length == 0 && dayNotes.length == 0 && dayChecklists.length == 0}
|
||||
<p class="text-center text-lg mt-2 italic">{$t('adventures.nothing_planned')}</p>
|
||||
{#if currentView == 'itinerary'}
|
||||
<div class="hero bg-base-200 py-8 mt-8">
|
||||
<div class="hero-content text-center">
|
||||
<div class="max-w-md">
|
||||
<h1 class="text-5xl font-bold mb-4">{$t('adventures.itineary_by_date')}</h1>
|
||||
{#if numberOfDays}
|
||||
<p class="text-lg mb-2">
|
||||
{$t('adventures.duration')}:
|
||||
<span class="badge badge-primary">{numberOfDays} {$t('adventures.days')}</span>
|
||||
</p>
|
||||
{/if}
|
||||
<p class="text-lg">
|
||||
Dates: <span class="font-semibold"
|
||||
>{new Date(collection.start_date).toLocaleDateString(undefined, {
|
||||
timeZone: 'UTC'
|
||||
})} -
|
||||
{new Date(collection.end_date).toLocaleDateString(undefined, {
|
||||
timeZone: 'UTC'
|
||||
})}</span
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<div class="card bg-base-200 shadow-xl my-8 mx-auto w-10/12">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title text-3xl justify-center mb-4">Trip Map</h2>
|
||||
<MapLibre
|
||||
style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"
|
||||
class="aspect-[9/16] max-h-[70vh] sm:aspect-video sm:max-h-full w-full rounded-lg"
|
||||
standardControls
|
||||
>
|
||||
{#each adventures as adventure}
|
||||
{#if adventure.longitude && adventure.latitude}
|
||||
<DefaultMarker lngLat={{ lng: adventure.longitude, lat: adventure.latitude }}>
|
||||
<Popup openOn="click" offset={[0, -10]}>
|
||||
<div class="text-lg text-black font-bold">{adventure.name}</div>
|
||||
<p class="font-semibold text-black text-md">
|
||||
{adventure.category?.display_name + ' ' + adventure.category?.icon}
|
||||
</p>
|
||||
</Popup>
|
||||
</DefaultMarker>
|
||||
{/if}
|
||||
{/each}
|
||||
{#each transportations as transportation}
|
||||
{#if transportation.destination_latitude && transportation.destination_longitude}
|
||||
<Marker
|
||||
lngLat={{
|
||||
lng: transportation.destination_longitude,
|
||||
lat: transportation.destination_latitude
|
||||
}}
|
||||
class="grid h-8 w-8 place-items-center rounded-full border border-gray-200
|
||||
bg-red-300 text-black focus:outline-6 focus:outline-black"
|
||||
>
|
||||
<span class="text-xl">
|
||||
{getTransportationEmoji(transportation.type)}
|
||||
</span>
|
||||
<Popup openOn="click" offset={[0, -10]}>
|
||||
<div class="text-lg text-black font-bold">{transportation.name}</div>
|
||||
<p class="font-semibold text-black text-md">
|
||||
{transportation.type}
|
||||
</p>
|
||||
</Popup>
|
||||
</Marker>
|
||||
{/if}
|
||||
{#if transportation.origin_latitude && transportation.origin_longitude}
|
||||
<Marker
|
||||
lngLat={{
|
||||
lng: transportation.origin_longitude,
|
||||
lat: transportation.origin_latitude
|
||||
}}
|
||||
class="grid h-8 w-8 place-items-center rounded-full border border-gray-200
|
||||
bg-green-300 text-black focus:outline-6 focus:outline-black"
|
||||
>
|
||||
<span class="text-xl">
|
||||
{getTransportationEmoji(transportation.type)}
|
||||
</span>
|
||||
<Popup openOn="click" offset={[0, -10]}>
|
||||
<div class="text-lg text-black font-bold">{transportation.name}</div>
|
||||
<p class="font-semibold text-black text-md">
|
||||
{transportation.type}
|
||||
</p>
|
||||
</Popup>
|
||||
</Marker>
|
||||
{/if}
|
||||
{/each}
|
||||
</MapLibre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container mx-auto px-4">
|
||||
{#each Array(numberOfDays) as _, i}
|
||||
{@const startDate = new Date(collection.start_date)}
|
||||
{@const tempDate = new Date(startDate.getTime())}
|
||||
{@const adjustedDate = new Date(tempDate.setUTCDate(tempDate.getUTCDate() + i))}
|
||||
{@const dateString = adjustedDate.toISOString().split('T')[0]}
|
||||
|
||||
{@const dayAdventures =
|
||||
groupAdventuresByDate(adventures, new Date(collection.start_date), numberOfDays)[
|
||||
dateString
|
||||
] || []}
|
||||
{@const dayTransportations =
|
||||
groupTransportationsByDate(
|
||||
transportations,
|
||||
new Date(collection.start_date),
|
||||
numberOfDays
|
||||
)[dateString] || []}
|
||||
{@const dayNotes =
|
||||
groupNotesByDate(notes, new Date(collection.start_date), numberOfDays)[dateString] ||
|
||||
[]}
|
||||
{@const dayChecklists =
|
||||
groupChecklistsByDate(checklists, new Date(collection.start_date), numberOfDays)[
|
||||
dateString
|
||||
] || []}
|
||||
|
||||
<div class="card bg-base-100 shadow-xl my-8">
|
||||
<div class="card-body bg-base-200">
|
||||
<h2 class="card-title text-3xl justify-center g">
|
||||
{$t('adventures.day')}
|
||||
{i + 1}
|
||||
<div class="badge badge-lg">
|
||||
{adjustedDate.toLocaleDateString(undefined, { timeZone: 'UTC' })}
|
||||
</div>
|
||||
</h2>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{#if dayAdventures.length > 0}
|
||||
{#each dayAdventures as adventure}
|
||||
<AdventureCard
|
||||
user={data.user}
|
||||
on:edit={editAdventure}
|
||||
on:delete={deleteAdventure}
|
||||
{adventure}
|
||||
/>
|
||||
{/each}
|
||||
{/if}
|
||||
{#if dayTransportations.length > 0}
|
||||
{#each dayTransportations as transportation}
|
||||
<TransportationCard
|
||||
{transportation}
|
||||
user={data?.user}
|
||||
on:delete={(event) => {
|
||||
transportations = transportations.filter((t) => t.id != event.detail);
|
||||
}}
|
||||
on:edit={(event) => {
|
||||
transportationToEdit = event.detail;
|
||||
isShowingTransportationModal = true;
|
||||
}}
|
||||
/>
|
||||
{/each}
|
||||
{/if}
|
||||
{#if dayNotes.length > 0}
|
||||
{#each dayNotes as note}
|
||||
<NoteCard
|
||||
{note}
|
||||
user={data.user || null}
|
||||
on:edit={(event) => {
|
||||
noteToEdit = event.detail;
|
||||
isNoteModalOpen = true;
|
||||
}}
|
||||
on:delete={(event) => {
|
||||
notes = notes.filter((n) => n.id != event.detail);
|
||||
}}
|
||||
/>
|
||||
{/each}
|
||||
{/if}
|
||||
{#if dayChecklists.length > 0}
|
||||
{#each dayChecklists as checklist}
|
||||
<ChecklistCard
|
||||
{checklist}
|
||||
user={data.user || null}
|
||||
on:delete={(event) => {
|
||||
notes = notes.filter((n) => n.id != event.detail);
|
||||
}}
|
||||
on:edit={(event) => {
|
||||
checklistToEdit = event.detail;
|
||||
isShowingChecklistModal = true;
|
||||
}}
|
||||
/>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if dayAdventures.length == 0 && dayTransportations.length == 0 && dayNotes.length == 0 && dayChecklists.length == 0}
|
||||
<p class="text-center text-lg mt-2 italic">{$t('adventures.nothing_planned')}</p>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if currentView == 'map'}
|
||||
<div class="card bg-base-200 shadow-xl my-8 mx-auto w-10/12">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title text-3xl justify-center mb-4">Trip Map</h2>
|
||||
<MapLibre
|
||||
style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"
|
||||
class="aspect-[9/16] max-h-[70vh] sm:aspect-video sm:max-h-full w-full rounded-lg"
|
||||
standardControls
|
||||
>
|
||||
{#each adventures as adventure}
|
||||
{#if adventure.longitude && adventure.latitude}
|
||||
<DefaultMarker lngLat={{ lng: adventure.longitude, lat: adventure.latitude }}>
|
||||
<Popup openOn="click" offset={[0, -10]}>
|
||||
<div class="text-lg text-black font-bold">{adventure.name}</div>
|
||||
<p class="font-semibold text-black text-md">
|
||||
{adventure.category?.display_name + ' ' + adventure.category?.icon}
|
||||
</p>
|
||||
</Popup>
|
||||
</DefaultMarker>
|
||||
{/if}
|
||||
{/each}
|
||||
{#each transportations as transportation}
|
||||
{#if transportation.destination_latitude && transportation.destination_longitude}
|
||||
<Marker
|
||||
lngLat={{
|
||||
lng: transportation.destination_longitude,
|
||||
lat: transportation.destination_latitude
|
||||
}}
|
||||
class="grid h-8 w-8 place-items-center rounded-full border border-gray-200
|
||||
bg-red-300 text-black focus:outline-6 focus:outline-black"
|
||||
>
|
||||
<span class="text-xl">
|
||||
{getTransportationEmoji(transportation.type)}
|
||||
</span>
|
||||
<Popup openOn="click" offset={[0, -10]}>
|
||||
<div class="text-lg text-black font-bold">{transportation.name}</div>
|
||||
<p class="font-semibold text-black text-md">
|
||||
{transportation.type}
|
||||
</p>
|
||||
</Popup>
|
||||
</Marker>
|
||||
{/if}
|
||||
{#if transportation.origin_latitude && transportation.origin_longitude}
|
||||
<Marker
|
||||
lngLat={{
|
||||
lng: transportation.origin_longitude,
|
||||
lat: transportation.origin_latitude
|
||||
}}
|
||||
class="grid h-8 w-8 place-items-center rounded-full border border-gray-200
|
||||
bg-green-300 text-black focus:outline-6 focus:outline-black"
|
||||
>
|
||||
<span class="text-xl">
|
||||
{getTransportationEmoji(transportation.type)}
|
||||
</span>
|
||||
<Popup openOn="click" offset={[0, -10]}>
|
||||
<div class="text-lg text-black font-bold">{transportation.name}</div>
|
||||
<p class="font-semibold text-black text-md">
|
||||
{transportation.type}
|
||||
</p>
|
||||
</Popup>
|
||||
</Marker>
|
||||
{/if}
|
||||
{/each}
|
||||
</MapLibre>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{#if currentView == 'calendar'}
|
||||
<div class="card bg-base-200 shadow-xl my-8 mx-auto w-10/12">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title text-3xl justify-center mb-4">
|
||||
{$t('adventures.adventure_calendar')}
|
||||
</h2>
|
||||
<Calendar {plugins} {options} />
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
|
|
|
|||
|
|
@ -11,82 +11,88 @@
|
|||
total_countries: number;
|
||||
} | null;
|
||||
|
||||
if (data.stats) {
|
||||
stats = data.stats;
|
||||
} else {
|
||||
stats = null;
|
||||
}
|
||||
console.log(stats);
|
||||
stats = data.stats || null;
|
||||
</script>
|
||||
|
||||
{#if data.user.profile_pic}
|
||||
<div class="avatar flex items-center justify-center">
|
||||
<div class="w-24 rounded">
|
||||
<!-- svelte-ignore a11y-missing-attribute -->
|
||||
<img src={data.user.profile_pic} class="w-24 rounded-full" />
|
||||
</div>
|
||||
<section class="min-h-screen bg-base-100 py-8 px-4">
|
||||
<div class="flex flex-col items-center">
|
||||
<!-- Profile Picture -->
|
||||
{#if data.user.profile_pic}
|
||||
<div class="avatar">
|
||||
<div
|
||||
class="w-24 rounded-full ring ring-primary ring-offset-base-100 ring-offset-2 shadow-md"
|
||||
>
|
||||
<img src={data.user.profile_pic} alt="Profile" />
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- User Name -->
|
||||
{#if data.user && data.user.first_name && data.user.last_name}
|
||||
<h1 class="text-4xl font-bold text-primary mt-4">
|
||||
{data.user.first_name}
|
||||
{data.user.last_name}
|
||||
</h1>
|
||||
{/if}
|
||||
<p class="text-lg text-base-content mt-2">{data.user.username}</p>
|
||||
|
||||
<!-- Member Since -->
|
||||
{#if data.user && data.user.date_joined}
|
||||
<div class="mt-4 flex items-center text-center text-base-content">
|
||||
<p class="text-lg font-medium">{$t('profile.member_since')}</p>
|
||||
<div class="flex items-center ml-2">
|
||||
<iconify-icon icon="mdi:calendar" class="text-2xl text-primary"></iconify-icon>
|
||||
<p class="ml-2 text-lg">
|
||||
{new Date(data.user.date_joined).toLocaleDateString(undefined, { timeZone: 'UTC' })}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if data.user && data.user.first_name && data.user.last_name}
|
||||
<h1 class="text-center text-4xl font-bold">
|
||||
{data.user.first_name}
|
||||
{data.user.last_name}
|
||||
</h1>
|
||||
{/if}
|
||||
<p class="text-center text-lg mt-2">{data.user.username}</p>
|
||||
<!-- Stats Section -->
|
||||
{#if stats}
|
||||
<div class="divider my-8"></div>
|
||||
|
||||
{#if data.user && data.user.date_joined}
|
||||
<p class="ml-1 text-lg text-center mt-4">{$t('profile.member_since')}</p>
|
||||
<div class="flex items-center justify-center text-center">
|
||||
<iconify-icon icon="mdi:calendar" class="text-2xl"></iconify-icon>
|
||||
<p class="ml-1 text-xl">
|
||||
{new Date(data.user.date_joined).toLocaleDateString(undefined, { timeZone: 'UTC' })}
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
<h2 class="text-2xl font-bold text-center mb-6 text-primary">
|
||||
{$t('profile.user_stats')}
|
||||
</h2>
|
||||
|
||||
{#if stats}
|
||||
<!-- divider -->
|
||||
<div class="divider pr-8 pl-8"></div>
|
||||
|
||||
<h1 class="text-center text-2xl font-bold mt-8 mb-2">{$t('profile.user_stats')}</h1>
|
||||
|
||||
<div class="flex justify-center items-center">
|
||||
<div class="stats stats-vertical lg:stats-horizontal shadow bg-base-200">
|
||||
<div class="stat">
|
||||
<div class="stat-title">{$t('navbar.adventures')}</div>
|
||||
<div class="stat-value text-center">{stats.adventure_count}</div>
|
||||
<!-- <div class="stat-desc">Jan 1st - Feb 1st</div> -->
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-title">{$t('navbar.collections')}</div>
|
||||
<div class="stat-value text-center">{stats.trips_count}</div>
|
||||
<!-- <div class="stat-desc">↘︎ 90 (14%)</div> -->
|
||||
</div>
|
||||
|
||||
<div class="stat">
|
||||
<div class="stat-title">{$t('profile.visited_countries')}</div>
|
||||
<div class="stat-value text-center">
|
||||
{Math.round((stats.country_count / stats.total_countries) * 100)}%
|
||||
<div class="flex justify-center">
|
||||
<div class="stats stats-vertical lg:stats-horizontal shadow bg-base-200">
|
||||
<div class="stat">
|
||||
<div class="stat-title">{$t('navbar.adventures')}</div>
|
||||
<div class="stat-value text-center">{stats.adventure_count}</div>
|
||||
</div>
|
||||
<div class="stat-desc">
|
||||
{stats.country_count}/{stats.total_countries}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat">
|
||||
<div class="stat-title">{$t('profile.visited_regions')}</div>
|
||||
<div class="stat-value text-center">
|
||||
{Math.round((stats.visited_region_count / stats.total_regions) * 100)}%
|
||||
<div class="stat">
|
||||
<div class="stat-title">{$t('navbar.collections')}</div>
|
||||
<div class="stat-value text-center">{stats.trips_count}</div>
|
||||
</div>
|
||||
<div class="stat-desc">
|
||||
{stats.visited_region_count}/{stats.total_regions}
|
||||
|
||||
<div class="stat">
|
||||
<div class="stat-title">{$t('profile.visited_countries')}</div>
|
||||
<div class="stat-value text-center">
|
||||
{Math.round((stats.country_count / stats.total_countries) * 100)}%
|
||||
</div>
|
||||
<div class="stat-desc text-center">
|
||||
{stats.country_count}/{stats.total_countries}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat">
|
||||
<div class="stat-title">{$t('profile.visited_regions')}</div>
|
||||
<div class="stat-value text-center">
|
||||
{Math.round((stats.visited_region_count / stats.total_regions) * 100)}%
|
||||
</div>
|
||||
<div class="stat-desc text-center">
|
||||
{stats.visited_region_count}/{stats.total_regions}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
<svelte:head>
|
||||
<title>Profile | AdventureLog</title>
|
||||
|
|
|
|||
|
|
@ -4,32 +4,47 @@
|
|||
import { t } from 'svelte-i18n';
|
||||
</script>
|
||||
|
||||
<h1 class="text-center font-extrabold text-4xl mb-6">{$t('settings.reset_password')}</h1>
|
||||
<section class="flex flex-col items-center justify-center min-h-screen px-4 py-8 bg-base-100">
|
||||
<h1 class="text-4xl font-bold text-center mb-6 text-primary">{$t('settings.reset_password')}</h1>
|
||||
|
||||
<div class="flex justify-center">
|
||||
<form method="post" action="?/forgotPassword" class="w-full max-w-xs" use:enhance>
|
||||
<label for="email">{$t('auth.email')}</label>
|
||||
<input
|
||||
name="email"
|
||||
type="email"
|
||||
id="email"
|
||||
class="block mb-2 input input-bordered w-full max-w-xs"
|
||||
/><br />
|
||||
<button class="py-2 px-4 btn btn-primary mr-2">{$t('settings.reset_password')}</button>
|
||||
{#if $page.form?.message}
|
||||
<div class="text-center text-error mt-4">
|
||||
{$t(`settings.${$page.form?.message}`)}
|
||||
<div class="w-full max-w-md p-6 shadow-lg rounded-lg bg-base-200">
|
||||
<form method="post" action="?/forgotPassword" class="flex flex-col space-y-4" use:enhance>
|
||||
<div class="form-control">
|
||||
<label for="email" class="label">
|
||||
<span class="label-text">{$t('auth.email')}</span>
|
||||
</label>
|
||||
<input
|
||||
name="email"
|
||||
type="email"
|
||||
id="email"
|
||||
placeholder="Enter your email"
|
||||
class="input input-bordered w-full"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
{#if $page.form?.success}
|
||||
<div class="text-center text-success mt-4">
|
||||
{$t('settings.possible_reset')}
|
||||
|
||||
<div class="form-control mt-4">
|
||||
<button type="submit" class="btn btn-primary w-full">
|
||||
{$t('settings.reset_password')}
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{#if $page.form?.message}
|
||||
<div class="mt-4 text-center text-error">
|
||||
{$t(`settings.${$page.form?.message}`)}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if $page.form?.success}
|
||||
<div class="mt-4 text-center text-success">
|
||||
{$t('settings.possible_reset')}
|
||||
</div>
|
||||
{/if}
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<svelte:head>
|
||||
<title>Forgot Password</title>
|
||||
<title>Reset Password</title>
|
||||
<meta name="description" content="Reset your password for AdventureLog." />
|
||||
</svelte:head>
|
||||
|
|
|
|||
|
|
@ -1,53 +1,66 @@
|
|||
<script lang="ts">
|
||||
import { enhance } from '$app/forms';
|
||||
import { page } from '$app/stores';
|
||||
import type { PageData } from '../../../$types';
|
||||
// import type { PageData } from '../../../$types';
|
||||
import { t } from 'svelte-i18n';
|
||||
|
||||
export let data: PageData;
|
||||
// export let data: PageData;
|
||||
</script>
|
||||
|
||||
<h1 class="text-center font-bold text-4xl mb-4">{$t('settings.change_password')}</h1>
|
||||
<section class="flex flex-col items-center justify-center min-h-screen px-4 py-8 bg-base-100">
|
||||
<h1 class="text-4xl font-bold text-center mb-6 text-primary">
|
||||
{$t('settings.change_password')}
|
||||
</h1>
|
||||
|
||||
<form method="POST" use:enhance class="flex flex-col items-center justify-center space-y-4">
|
||||
<div class="w-full max-w-xs">
|
||||
<label for="password" class="label">
|
||||
<span class="label-text">{$t('auth.new_password')}</span>
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
name="password"
|
||||
required
|
||||
class="input input-bordered w-full"
|
||||
/>
|
||||
<div class="w-full max-w-md p-6 shadow-lg rounded-lg bg-base-200">
|
||||
<form method="POST" use:enhance class="flex flex-col space-y-6">
|
||||
<div class="form-control">
|
||||
<label for="password" class="label">
|
||||
<span class="label-text">{$t('auth.new_password')}</span>
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
name="password"
|
||||
placeholder="Enter new password"
|
||||
required
|
||||
class="input input-bordered w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label for="confirm_password" class="label">
|
||||
<span class="label-text">{$t('auth.confirm_password')}</span>
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
id="confirm_password"
|
||||
name="confirm_password"
|
||||
placeholder="Confirm new password"
|
||||
required
|
||||
class="input input-bordered w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-control mt-4">
|
||||
<button type="submit" class="btn btn-primary w-full">
|
||||
{$t('settings.reset_password')}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{#if $page.form?.message}
|
||||
<div class="mt-4 text-center text-error">
|
||||
{$t($page.form?.message)}
|
||||
</div>
|
||||
{/if}
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="w-full max-w-xs">
|
||||
<label for="confirm_password" class="label">
|
||||
<span class="label-text">{$t('auth.confirm_password')}</span>
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
id="confirm_password"
|
||||
name="confirm_password"
|
||||
required
|
||||
class="input input-bordered w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary">
|
||||
{$t('settings.reset_password')}
|
||||
</button>
|
||||
|
||||
{#if $page.form?.message}
|
||||
<div class="text-error">
|
||||
{$t($page.form?.message)}
|
||||
</div>
|
||||
{/if}
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<svelte:head>
|
||||
<title>Password Reset Confirm</title>
|
||||
<meta name="description" content="Confirm your password reset and make a new password." />
|
||||
<title>Change Password</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Confirm your password reset and create a new password for AdventureLog."
|
||||
/>
|
||||
</svelte:head>
|
||||
|
|
|
|||
|
|
@ -5,10 +5,27 @@
|
|||
export let data: PageData;
|
||||
</script>
|
||||
|
||||
{#if data.verified}
|
||||
<h1>{$t('settings.email_verified')}</h1>
|
||||
<p>{$t('settings.email_verified_success')}</p>
|
||||
{:else}
|
||||
<h1>{$t('settings.email_verified_error')}</h1>
|
||||
<p>{$t('settings.email_verified_erorr_desc')}</p>
|
||||
{/if}
|
||||
<section class="flex flex-col items-center justify-center min-h-screen px-4 py-8 bg-base-100">
|
||||
<div class="w-full max-w-lg p-6 shadow-lg rounded-lg bg-base-200 text-center">
|
||||
{#if data.verified}
|
||||
<h1 class="text-4xl font-bold text-success mb-4">
|
||||
{$t('settings.email_verified')}
|
||||
</h1>
|
||||
<p class="text-lg text-base-content">
|
||||
{$t('settings.email_verified_success')}
|
||||
</p>
|
||||
{:else}
|
||||
<h1 class="text-4xl font-bold text-error mb-4">
|
||||
{$t('settings.email_verified_error')}
|
||||
</h1>
|
||||
<p class="text-lg text-base-content">
|
||||
{$t('settings.email_verified_erorr_desc')}
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<svelte:head>
|
||||
<title>Email Verification</title>
|
||||
<meta name="description" content="View your email verification status for AdventureLog." />
|
||||
</svelte:head>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import type { PageServerLoad } from './$types';
|
|||
const endpoint = PUBLIC_SERVER_URL || 'http://localhost:8000';
|
||||
|
||||
export const load = (async (event) => {
|
||||
const id = event.params.id;
|
||||
const id = event.params.id.toUpperCase();
|
||||
|
||||
let regions: Region[] = [];
|
||||
let visitedRegions: VisitedRegion[] = [];
|
||||
|
|
|
|||
BIN
frontend/static/backgrounds/adventurelog_christmas.webp
Normal file
BIN
frontend/static/backgrounds/adventurelog_christmas.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 179 KiB |
BIN
frontend/static/backgrounds/adventurelog_new_year.webp
Normal file
BIN
frontend/static/backgrounds/adventurelog_new_year.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 340 KiB |
Loading…
Add table
Add a link
Reference in a new issue