mirror of
https://github.com/seanmorley15/AdventureLog.git
synced 2025-07-22 06:19:38 +02:00
Add geographic coordinates to Transportation model and update related components
This commit is contained in:
Sean Morley
parent
57f2bdb8ba
commit
7c68dc839a
11 changed files with 1025 additions and 289 deletions
|
|
@ -0,0 +1,33 @@
|
||||||
|
# Generated by Django 5.0.8 on 2024-12-19 17:16
|
||||||
|
|
||||||
|
from django.db import migrations, models
|
||||||
|
|
||||||
|
|
||||||
|
class Migration(migrations.Migration):
|
||||||
|
|
||||||
|
dependencies = [
|
||||||
|
('adventures', '0014_alter_category_unique_together'),
|
||||||
|
]
|
||||||
|
|
||||||
|
operations = [
|
||||||
|
migrations.AddField(
|
||||||
|
model_name='transportation',
|
||||||
|
name='destination_latitude',
|
||||||
|
field=models.DecimalField(blank=True, decimal_places=6, max_digits=9, null=True),
|
||||||
|
),
|
||||||
|
migrations.AddField(
|
||||||
|
model_name='transportation',
|
||||||
|
name='destination_longitude',
|
||||||
|
field=models.DecimalField(blank=True, decimal_places=6, max_digits=9, null=True),
|
||||||
|
),
|
||||||
|
migrations.AddField(
|
||||||
|
model_name='transportation',
|
||||||
|
name='origin_latitude',
|
||||||
|
field=models.DecimalField(blank=True, decimal_places=6, max_digits=9, null=True),
|
||||||
|
),
|
||||||
|
migrations.AddField(
|
||||||
|
model_name='transportation',
|
||||||
|
name='origin_longitude',
|
||||||
|
field=models.DecimalField(blank=True, decimal_places=6, max_digits=9, null=True),
|
||||||
|
),
|
||||||
|
]
|
||||||
|
|
@ -167,6 +167,10 @@ class Transportation(models.Model):
|
||||||
end_date = models.DateTimeField(blank=True, null=True)
|
end_date = models.DateTimeField(blank=True, null=True)
|
||||||
flight_number = models.CharField(max_length=100, blank=True, null=True)
|
flight_number = models.CharField(max_length=100, blank=True, null=True)
|
||||||
from_location = models.CharField(max_length=200, blank=True, null=True)
|
from_location = models.CharField(max_length=200, blank=True, null=True)
|
||||||
|
origin_latitude = models.DecimalField(max_digits=9, decimal_places=6, null=True, blank=True)
|
||||||
|
origin_longitude = models.DecimalField(max_digits=9, decimal_places=6, null=True, blank=True)
|
||||||
|
destination_latitude = models.DecimalField(max_digits=9, decimal_places=6, null=True, blank=True)
|
||||||
|
destination_longitude = models.DecimalField(max_digits=9, decimal_places=6, null=True, blank=True)
|
||||||
to_location = models.CharField(max_length=200, blank=True, null=True)
|
to_location = models.CharField(max_length=200, blank=True, null=True)
|
||||||
is_public = models.BooleanField(default=False)
|
is_public = models.BooleanField(default=False)
|
||||||
collection = models.ForeignKey('Collection', on_delete=models.CASCADE, blank=True, null=True)
|
collection = models.ForeignKey('Collection', on_delete=models.CASCADE, blank=True, null=True)
|
||||||
|
|
|
||||||
|
|
@ -170,7 +170,7 @@ class TransportationSerializer(CustomModelSerializer):
|
||||||
fields = [
|
fields = [
|
||||||
'id', 'user_id', 'type', 'name', 'description', 'rating',
|
'id', 'user_id', 'type', 'name', 'description', 'rating',
|
||||||
'link', 'date', 'flight_number', 'from_location', 'to_location',
|
'link', 'date', 'flight_number', 'from_location', 'to_location',
|
||||||
'is_public', 'collection', 'created_at', 'updated_at', 'end_date'
|
'is_public', 'collection', 'created_at', 'updated_at', 'end_date', 'origin_latitude', 'origin_longitude', 'destination_latitude', 'destination_longitude'
|
||||||
]
|
]
|
||||||
read_only_fields = ['id', 'created_at', 'updated_at', 'user_id']
|
read_only_fields = ['id', 'created_at', 'updated_at', 'user_id']
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,14 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { createEventDispatcher } from 'svelte';
|
import { createEventDispatcher } from 'svelte';
|
||||||
const dispatch = createEventDispatcher();
|
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from 'svelte';
|
||||||
let modal: HTMLDialogElement;
|
|
||||||
import { t } from 'svelte-i18n';
|
import { t } from 'svelte-i18n';
|
||||||
import { appVersion, copyrightYear, versionChangelog } from '$lib/config';
|
import { appVersion, copyrightYear, versionChangelog } from '$lib/config';
|
||||||
|
|
||||||
|
const dispatch = createEventDispatcher();
|
||||||
|
let modal: HTMLDialogElement;
|
||||||
|
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
modal = document.getElementById('my_modal_1') as HTMLDialogElement;
|
modal = document.getElementById('about_modal') as HTMLDialogElement;
|
||||||
if (modal) {
|
if (modal) {
|
||||||
modal.showModal();
|
modal.showModal();
|
||||||
}
|
}
|
||||||
|
|
@ -24,56 +25,126 @@
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<dialog id="my_modal_1" class="modal">
|
<dialog id="about_modal" class="modal backdrop-blur-md bg-opacity-70">
|
||||||
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
|
|
||||||
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
|
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
|
||||||
<div class="modal-box" role="dialog" on:keydown={handleKeydown} tabindex="0">
|
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
|
||||||
<h3 class="font-bold text-lg">
|
<div
|
||||||
{$t('about.about')} AdventureLog<span class=" inline-block"
|
class="modal-box rounded-xl shadow-lg backdrop-blur-lg bg-white/80 dark:bg-gray-900/80 transition-transform duration-300 ease-out transform scale-100"
|
||||||
><img src="/favicon.png" alt="Map Logo" class="w-10 -mb-3 ml-2" /></span
|
role="dialog"
|
||||||
|
on:keydown={handleKeydown}
|
||||||
|
tabindex="0"
|
||||||
>
|
>
|
||||||
|
<!-- Branding -->
|
||||||
|
<div class="text-center">
|
||||||
|
<h3
|
||||||
|
class="text-2xl font-extrabold text-gray-800 dark:text-white flex items-center justify-center"
|
||||||
|
>
|
||||||
|
{$t('about.about')} AdventureLog
|
||||||
|
<img src="/favicon.png" alt="Map Logo" class="w-12 h-12 ml-3 inline-block" />
|
||||||
</h3>
|
</h3>
|
||||||
<p class="py-1">
|
<p class="mt-2 text-gray-500 dark:text-gray-300 text-sm">
|
||||||
AdventureLog <a
|
AdventureLog
|
||||||
|
<a
|
||||||
|
href={versionChangelog}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
class="text-primary-500 underline"
|
class="text-primary hover:underline"
|
||||||
href={versionChangelog}>{appVersion}</a
|
|
||||||
>
|
>
|
||||||
|
{appVersion}
|
||||||
|
</a>
|
||||||
</p>
|
</p>
|
||||||
<p class="py-1">
|
</div>
|
||||||
|
|
||||||
|
<!-- Links and Details -->
|
||||||
|
<div class="mt-4 text-center">
|
||||||
|
<p class="text-sm text-gray-600 dark:text-gray-400">
|
||||||
© {copyrightYear}
|
© {copyrightYear}
|
||||||
<a
|
<a
|
||||||
href="https://seanmorley.com"
|
href="https://seanmorley.com"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
class="text-primary-500 underline">Sean Morley</a
|
class="text-primary hover:underline"
|
||||||
>
|
>
|
||||||
|
Sean Morley
|
||||||
|
</a>
|
||||||
</p>
|
</p>
|
||||||
<p class="py-1">{$t('about.license')}</p>
|
<p class="text-sm text-gray-600 dark:text-gray-400">{$t('about.license')}</p>
|
||||||
<p class="py-1">
|
<p class="text-sm text-gray-600 dark:text-gray-400">
|
||||||
<a
|
<a
|
||||||
href="https://github.com/seanmorley15/AdventureLog"
|
href="https://github.com/seanmorley15/AdventureLog"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
class="text-primary-500 underline">{$t('about.source_code')}</a
|
class="text-primary hover:underline"
|
||||||
>
|
>
|
||||||
|
{$t('about.source_code')}
|
||||||
|
</a>
|
||||||
</p>
|
</p>
|
||||||
<p class="py-1">{$t('about.message')}</p>
|
<p class="text-sm text-gray-600 dark:text-gray-400">{$t('about.message')}</p>
|
||||||
<div class="divider"></div>
|
</div>
|
||||||
<h3 class="font-bold text-md">{$t('about.oss_attributions')}</h3>
|
|
||||||
<p class="py-1 mb-4">
|
<!-- Divider -->
|
||||||
|
<div class="my-6 border-t border-gray-200 dark:border-gray-700"></div>
|
||||||
|
|
||||||
|
<!-- OSS Acknowledgments -->
|
||||||
|
<div class="text-left">
|
||||||
|
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">
|
||||||
|
{$t('about.oss_attributions')}
|
||||||
|
</h3>
|
||||||
|
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
|
||||||
{$t('about.nominatim_1')}
|
{$t('about.nominatim_1')}
|
||||||
<a
|
<a
|
||||||
|
href="https://operations.osmfoundation.org/policies/nominatim/"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
class="text-primary-500 underline"
|
class="text-primary hover:underline"
|
||||||
href="https://operations.osmfoundation.org/policies/nominatim/">OpenStreepMap</a
|
>
|
||||||
>. {$t('about.nominatim_2')}
|
OpenStreetMap
|
||||||
<br />
|
</a>
|
||||||
{$t('about.other_attributions')}
|
. {$t('about.nominatim_2')}
|
||||||
</p>
|
</p>
|
||||||
|
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400">{$t('about.other_attributions')}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<button class="btn btn-primary" on:click={close}>{$t('about.close')}</button>
|
<!-- Close Button -->
|
||||||
|
<div class="flex justify-center mt-6">
|
||||||
|
<button
|
||||||
|
class="px-6 py-2 text-sm font-medium text-white bg-primary rounded-full shadow-md hover:shadow-lg hover:scale-105 transform transition"
|
||||||
|
on:click={close}
|
||||||
|
>
|
||||||
|
{$t('about.close')}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</dialog>
|
</dialog>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.modal {
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
animation: fadeIn 0.3s ease-in-out;
|
||||||
|
}
|
||||||
|
.modal-box {
|
||||||
|
max-width: 600px;
|
||||||
|
padding: 2rem;
|
||||||
|
animation: slideUp 0.4s ease-out;
|
||||||
|
}
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes slideUp {
|
||||||
|
from {
|
||||||
|
transform: translateY(20%);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: translateY(0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -3,6 +3,7 @@
|
||||||
import { t } from 'svelte-i18n';
|
import { t } from 'svelte-i18n';
|
||||||
|
|
||||||
export let text: string | null | undefined = ''; // Markdown text
|
export let text: string | null | undefined = ''; // Markdown text
|
||||||
|
export let editor_height: string = 'h-64'; // Editor height
|
||||||
let is_preview: boolean = false; // Toggle between Edit and Preview mode
|
let is_preview: boolean = false; // Toggle between Edit and Preview mode
|
||||||
|
|
||||||
// Function to parse markdown to HTML
|
// Function to parse markdown to HTML
|
||||||
|
|
@ -46,7 +47,7 @@
|
||||||
<!-- Markdown Editor -->
|
<!-- Markdown Editor -->
|
||||||
{#if !is_preview}
|
{#if !is_preview}
|
||||||
<textarea
|
<textarea
|
||||||
class="textarea textarea-bordered resize-none h-64 w-full"
|
class="textarea textarea-bordered resize-none {editor_height} w-full"
|
||||||
bind:this={editorRef}
|
bind:this={editorRef}
|
||||||
bind:value={text}
|
bind:value={text}
|
||||||
placeholder={$t('adventures.md_instructions')}
|
placeholder={$t('adventures.md_instructions')}
|
||||||
|
|
|
||||||
|
|
@ -5,8 +5,7 @@
|
||||||
import type { Collection, Transportation, User } from '$lib/types';
|
import type { Collection, Transportation, User } from '$lib/types';
|
||||||
import { addToast } from '$lib/toasts';
|
import { addToast } from '$lib/toasts';
|
||||||
import { t } from 'svelte-i18n';
|
import { t } from 'svelte-i18n';
|
||||||
|
// import ArrowDownThick from '~icons/mdi/arrow-down-thick';
|
||||||
import ArrowDownThick from '~icons/mdi/arrow-down-thick';
|
|
||||||
|
|
||||||
const dispatch = createEventDispatcher();
|
const dispatch = createEventDispatcher();
|
||||||
|
|
||||||
|
|
@ -37,35 +36,67 @@
|
||||||
<div
|
<div
|
||||||
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"
|
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 class="card-body space-y-4">
|
||||||
<h2 class="card-title overflow-ellipsis">{transportation.name}</h2>
|
<!-- Title and Type -->
|
||||||
<div class="badge badge-secondary">{$t(`transportation.modes.${transportation.type}`)}</div>
|
<div class="flex items-center justify-between">
|
||||||
<div>
|
<h2 class="card-title text-lg font-semibold truncate">{transportation.name}</h2>
|
||||||
|
<div class="badge badge-secondary">
|
||||||
|
{$t(`transportation.modes.${transportation.type}`)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Locations -->
|
||||||
|
<div class="space-y-2">
|
||||||
{#if transportation.from_location}
|
{#if transportation.from_location}
|
||||||
<p class="break-words text-wrap">{transportation.from_location}</p>
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="font-medium text-sm">{$t('adventures.from')}:</span>
|
||||||
|
<p class="break-words">{transportation.from_location}</p>
|
||||||
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
{#if transportation.to_location}
|
{#if transportation.to_location}
|
||||||
<ArrowDownThick class="w-6 h-6" />
|
<!-- <ArrowDownThick class="w-4 h-4" /> -->
|
||||||
<p class="break-words text-wrap">{transportation.to_location}</p>
|
<div class="flex items-center gap-2">
|
||||||
{/if}
|
<span class="font-medium text-sm">{$t('adventures.to')}:</span>
|
||||||
|
|
||||||
|
<p class="break-words">{transportation.to_location}</p>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
|
||||||
{#if transportation.date}
|
|
||||||
<p>{new Date(transportation.date).toLocaleString(undefined, { timeZone: 'UTC' })}</p>
|
|
||||||
{/if}
|
|
||||||
{#if transportation.end_date}
|
|
||||||
<ArrowDownThick class="w-6 h-6" />
|
|
||||||
<p>{new Date(transportation.end_date).toLocaleString(undefined, { timeZone: 'UTC' })}</p>
|
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Dates -->
|
||||||
|
<div class="space-y-2">
|
||||||
|
{#if transportation.date}
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
{#if transportation.end_date}
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="font-medium text-sm">{$t('adventures.end')}:</span>
|
||||||
|
<p>{new Date(transportation.end_date).toLocaleString(undefined, { timeZone: 'UTC' })}</p>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Actions -->
|
||||||
{#if transportation.user_id == user?.uuid || (collection && user && collection.shared_with.includes(user.uuid))}
|
{#if transportation.user_id == user?.uuid || (collection && user && collection.shared_with.includes(user.uuid))}
|
||||||
<div class="card-actions justify-end">
|
<div class="card-actions justify-end">
|
||||||
<button on:click={deleteTransportation} class="btn btn-secondary"
|
<button
|
||||||
><TrashCanOutline class="w-5 h-5 mr-1" /></button
|
class="btn btn-primary btn-sm flex items-center gap-1"
|
||||||
|
on:click={editTransportation}
|
||||||
|
title="Edit"
|
||||||
>
|
>
|
||||||
<button class="btn btn-primary" on:click={editTransportation}>
|
<FileDocumentEdit class="w-5 h-5" />
|
||||||
<FileDocumentEdit class="w-6 h-6" />
|
<span>{$t('transportation.edit')}</span>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
on:click={deleteTransportation}
|
||||||
|
class="btn btn-secondary btn-sm flex items-center gap-1"
|
||||||
|
title="Delete"
|
||||||
|
>
|
||||||
|
<TrashCanOutline class="w-5 h-5" />
|
||||||
|
<span>{$t('adventures.delete')}</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
|
||||||
562
frontend/src/lib/components/TransportationModal.svelte
Normal file
562
frontend/src/lib/components/TransportationModal.svelte
Normal file
|
|
@ -0,0 +1,562 @@
|
||||||
|
<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';
|
||||||
|
import { appVersion } from '$lib/config';
|
||||||
|
import { DefaultMarker, MapLibre } from 'svelte-maplibre';
|
||||||
|
|
||||||
|
export let collection: Collection;
|
||||||
|
export let transportationToEdit: Transportation | null = null;
|
||||||
|
|
||||||
|
function toLocalDatetime(value: string | null): string {
|
||||||
|
if (!value) return '';
|
||||||
|
const date = new Date(value);
|
||||||
|
return date.toISOString().slice(0, 16); // Format: YYYY-MM-DDTHH:mm
|
||||||
|
}
|
||||||
|
|
||||||
|
let transportation: Transportation = {
|
||||||
|
id: transportationToEdit?.id || '',
|
||||||
|
type: transportationToEdit?.type || '',
|
||||||
|
name: transportationToEdit?.name || '',
|
||||||
|
description: transportationToEdit?.description || '',
|
||||||
|
date: transportationToEdit?.date ? toLocalDatetime(transportationToEdit.date) : null,
|
||||||
|
end_date: transportationToEdit?.end_date
|
||||||
|
? toLocalDatetime(transportationToEdit.end_date)
|
||||||
|
: null,
|
||||||
|
rating: transportationToEdit?.rating || 0,
|
||||||
|
link: transportationToEdit?.link || '',
|
||||||
|
flight_number: transportationToEdit?.flight_number || '',
|
||||||
|
from_location: transportationToEdit?.from_location || '',
|
||||||
|
to_location: transportationToEdit?.to_location || '',
|
||||||
|
user_id: transportationToEdit?.user_id || '',
|
||||||
|
is_public: transportationToEdit?.is_public || false,
|
||||||
|
collection: transportationToEdit?.collection || collection.id,
|
||||||
|
created_at: transportationToEdit?.created_at || '',
|
||||||
|
updated_at: transportationToEdit?.updated_at || '',
|
||||||
|
origin_latitude: transportationToEdit?.origin_latitude || NaN,
|
||||||
|
origin_longitude: transportationToEdit?.origin_longitude || NaN,
|
||||||
|
destination_latitude: transportationToEdit?.destination_latitude || NaN,
|
||||||
|
destination_longitude: transportationToEdit?.destination_longitude || NaN
|
||||||
|
};
|
||||||
|
|
||||||
|
let fullStartDate: string = '';
|
||||||
|
let fullEndDate: string = '';
|
||||||
|
|
||||||
|
let starting_airport: string = '';
|
||||||
|
let ending_airport: string = '';
|
||||||
|
|
||||||
|
if (collection.start_date && collection.end_date) {
|
||||||
|
fullStartDate = `${collection.start_date}T00:00`;
|
||||||
|
fullEndDate = `${collection.end_date}T23:59`;
|
||||||
|
}
|
||||||
|
|
||||||
|
$: {
|
||||||
|
if (!transportation.rating) {
|
||||||
|
transportation.rating = NaN;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(transportation);
|
||||||
|
|
||||||
|
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 geocode(e: Event | null) {
|
||||||
|
if (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
}
|
||||||
|
|
||||||
|
const fetchLocation = async (query: string) => {
|
||||||
|
let res = await fetch(`https://nominatim.openstreetmap.org/search?q=${query}&format=jsonv2`, {
|
||||||
|
headers: {
|
||||||
|
'User-Agent': `AdventureLog / ${appVersion} `
|
||||||
|
}
|
||||||
|
});
|
||||||
|
let data = await res.json();
|
||||||
|
return data;
|
||||||
|
};
|
||||||
|
|
||||||
|
let startingData = null;
|
||||||
|
let endingData = null;
|
||||||
|
|
||||||
|
if (transportation.type == 'plane') {
|
||||||
|
if (!starting_airport || !ending_airport) {
|
||||||
|
alert($t('adventures.no_location'));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
startingData = await fetchLocation(starting_airport + ' Airport');
|
||||||
|
endingData = await fetchLocation(ending_airport + ' Airport');
|
||||||
|
} else {
|
||||||
|
if (!transportation.from_location || !transportation.to_location) {
|
||||||
|
alert($t('adventures.no_location'));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
startingData = await fetchLocation(transportation?.from_location || '');
|
||||||
|
endingData = await fetchLocation(transportation?.to_location || '');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (startingData.length === 0 || endingData.length === 0) {
|
||||||
|
alert($t('adventures.no_location_found'));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (transportation.type == 'plane') {
|
||||||
|
transportation.from_location = startingData[0].name + ' (' + starting_airport + ')';
|
||||||
|
transportation.to_location = endingData[0].name + ' (' + ending_airport + ')';
|
||||||
|
} else {
|
||||||
|
transportation.from_location = startingData[0].display_name;
|
||||||
|
transportation.to_location = endingData[0].display_name;
|
||||||
|
}
|
||||||
|
transportation.origin_latitude = startingData[0].lat;
|
||||||
|
transportation.origin_longitude = startingData[0].lon;
|
||||||
|
transportation.destination_latitude = endingData[0].lat;
|
||||||
|
transportation.destination_longitude = endingData[0].lon;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleSubmit(event: Event) {
|
||||||
|
event.preventDefault();
|
||||||
|
console.log(transportation);
|
||||||
|
|
||||||
|
// If the user has entered airport codes, but not location names, fetch the location names
|
||||||
|
if (
|
||||||
|
starting_airport &&
|
||||||
|
ending_airport &&
|
||||||
|
(!transportation.from_location || !transportation.to_location)
|
||||||
|
) {
|
||||||
|
transportation.from_location = starting_airport;
|
||||||
|
transportation.to_location = ending_airport;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Round coordinates to 6 decimal places
|
||||||
|
if (transportation.origin_latitude) {
|
||||||
|
transportation.origin_latitude = Math.round(transportation.origin_latitude * 1e6) / 1e6;
|
||||||
|
}
|
||||||
|
if (transportation.origin_longitude) {
|
||||||
|
transportation.origin_longitude = Math.round(transportation.origin_longitude * 1e6) / 1e6;
|
||||||
|
}
|
||||||
|
if (transportation.destination_latitude) {
|
||||||
|
transportation.destination_latitude =
|
||||||
|
Math.round(transportation.destination_latitude * 1e6) / 1e6;
|
||||||
|
}
|
||||||
|
if (transportation.destination_longitude) {
|
||||||
|
transportation.destination_longitude =
|
||||||
|
Math.round(transportation.destination_longitude * 1e6) / 1e6;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (transportation.id === '') {
|
||||||
|
let res = await fetch('/api/transportations', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify(transportation)
|
||||||
|
});
|
||||||
|
let data = await res.json();
|
||||||
|
if (data.id) {
|
||||||
|
transportation = data as Transportation;
|
||||||
|
addToast('success', $t('adventures.adventure_created'));
|
||||||
|
dispatch('save', transportation);
|
||||||
|
} else {
|
||||||
|
console.error(data);
|
||||||
|
addToast('error', $t('adventures.adventure_create_error'));
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
let res = await fetch(`/api/transportations/${transportation.id}`, {
|
||||||
|
method: 'PATCH',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify(transportation)
|
||||||
|
});
|
||||||
|
let data = await res.json();
|
||||||
|
if (data.id) {
|
||||||
|
transportation = data as Transportation;
|
||||||
|
addToast('success', $t('adventures.adventure_updated'));
|
||||||
|
dispatch('save', transportation);
|
||||||
|
} else {
|
||||||
|
addToast('error', $t('adventures.adventure_update_error'));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</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">
|
||||||
|
{transportationToEdit
|
||||||
|
? $t('transportation.edit_transportation')
|
||||||
|
: $t('transportation.new_transportation')}
|
||||||
|
</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">
|
||||||
|
<!-- Type selection -->
|
||||||
|
<div>
|
||||||
|
<label for="type">
|
||||||
|
{$t('transportation.type')}<span class="text-red-500">*</span>
|
||||||
|
</label>
|
||||||
|
<div>
|
||||||
|
<select
|
||||||
|
class="select select-bordered w-full max-w-xs"
|
||||||
|
name="type"
|
||||||
|
id="type"
|
||||||
|
bind:value={transportation.type}
|
||||||
|
>
|
||||||
|
<option disabled selected>{$t('transportation.type')}</option>
|
||||||
|
<option value="car">{$t('transportation.modes.car')}</option>
|
||||||
|
<option value="plane">{$t('transportation.modes.plane')}</option>
|
||||||
|
<option value="train">{$t('transportation.modes.train')}</option>
|
||||||
|
<option value="bus">{$t('transportation.modes.bus')}</option>
|
||||||
|
<option value="boat">{$t('transportation.modes.boat')}</option>
|
||||||
|
<option value="bike">{$t('transportation.modes.bike')}</option>
|
||||||
|
<option value="walking">{$t('transportation.modes.walking')}</option>
|
||||||
|
<option value="other">{$t('transportation.modes.other')}</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Name -->
|
||||||
|
<div>
|
||||||
|
<label for="name">
|
||||||
|
{$t('adventures.name')}<span class="text-red-500">*</span>
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="name"
|
||||||
|
name="name"
|
||||||
|
bind:value={transportation.name}
|
||||||
|
class="input input-bordered w-full"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<!-- Description -->
|
||||||
|
<div>
|
||||||
|
<label for="description">{$t('adventures.description')}</label><br />
|
||||||
|
<MarkdownEditor bind:text={transportation.description} editor_height={'h-32'} />
|
||||||
|
</div>
|
||||||
|
<!-- Rating -->
|
||||||
|
<div>
|
||||||
|
<label for="rating">{$t('adventures.rating')}</label><br />
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
min="0"
|
||||||
|
max="5"
|
||||||
|
hidden
|
||||||
|
bind:value={transportation.rating}
|
||||||
|
id="rating"
|
||||||
|
name="rating"
|
||||||
|
class="input input-bordered w-full max-w-xs mt-1"
|
||||||
|
/>
|
||||||
|
<div class="rating -ml-3 mt-1">
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
name="rating-2"
|
||||||
|
class="rating-hidden"
|
||||||
|
checked={Number.isNaN(transportation.rating)}
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
name="rating-2"
|
||||||
|
class="mask mask-star-2 bg-orange-400"
|
||||||
|
on:click={() => (transportation.rating = 1)}
|
||||||
|
checked={transportation.rating === 1}
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
name="rating-2"
|
||||||
|
class="mask mask-star-2 bg-orange-400"
|
||||||
|
on:click={() => (transportation.rating = 2)}
|
||||||
|
checked={transportation.rating === 2}
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
name="rating-2"
|
||||||
|
class="mask mask-star-2 bg-orange-400"
|
||||||
|
on:click={() => (transportation.rating = 3)}
|
||||||
|
checked={transportation.rating === 3}
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
name="rating-2"
|
||||||
|
class="mask mask-star-2 bg-orange-400"
|
||||||
|
on:click={() => (transportation.rating = 4)}
|
||||||
|
checked={transportation.rating === 4}
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
name="rating-2"
|
||||||
|
class="mask mask-star-2 bg-orange-400"
|
||||||
|
on:click={() => (transportation.rating = 5)}
|
||||||
|
checked={transportation.rating === 5}
|
||||||
|
/>
|
||||||
|
{#if transportation.rating}
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="btn btn-sm btn-error ml-2"
|
||||||
|
on:click={() => (transportation.rating = NaN)}
|
||||||
|
>
|
||||||
|
{$t('adventures.remove')}
|
||||||
|
</button>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Link -->
|
||||||
|
<div>
|
||||||
|
<label for="link">{$t('adventures.link')}</label>
|
||||||
|
<input
|
||||||
|
type="url"
|
||||||
|
id="link"
|
||||||
|
name="link"
|
||||||
|
bind:value={transportation.link}
|
||||||
|
class="input input-bordered w-full"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="collapse collapse-plus bg-base-200 mb-4">
|
||||||
|
<input type="checkbox" checked />
|
||||||
|
<div class="collapse-title text-xl font-medium">
|
||||||
|
{$t('adventures.date_information')}
|
||||||
|
</div>
|
||||||
|
<div class="collapse-content">
|
||||||
|
<!-- Start Date -->
|
||||||
|
<div>
|
||||||
|
<label for="date">
|
||||||
|
{$t('adventures.start_date')}
|
||||||
|
</label>
|
||||||
|
<div>
|
||||||
|
<input
|
||||||
|
type="datetime-local"
|
||||||
|
id="date"
|
||||||
|
name="date"
|
||||||
|
bind:value={transportation.date}
|
||||||
|
min={fullStartDate || ''}
|
||||||
|
max={fullEndDate || ''}
|
||||||
|
class="input input-bordered w-full max-w-xs mt-1"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- End Date -->
|
||||||
|
{#if transportation.date}
|
||||||
|
<div>
|
||||||
|
<label for="end_date">
|
||||||
|
{$t('adventures.end_date')}
|
||||||
|
</label>
|
||||||
|
<div>
|
||||||
|
<input
|
||||||
|
type="datetime-local"
|
||||||
|
id="end_date"
|
||||||
|
name="end_date"
|
||||||
|
min={fullStartDate || ''}
|
||||||
|
max={fullEndDate || ''}
|
||||||
|
bind:value={transportation.end_date}
|
||||||
|
class="input input-bordered w-full max-w-xs mt-1"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Flight Information -->
|
||||||
|
|
||||||
|
<div class="collapse collapse-plus bg-base-200 mb-4">
|
||||||
|
<input type="checkbox" checked />
|
||||||
|
<div class="collapse-title text-xl font-medium">
|
||||||
|
{$t('adventures.flight_information')}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="collapse-content">
|
||||||
|
{#if transportation?.type == 'plane'}
|
||||||
|
<!-- Flight Number -->
|
||||||
|
<div class="mb-4">
|
||||||
|
<label for="flight_number" class="label">
|
||||||
|
<span class="label-text">{$t('transportation.flight_number')}</span>
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="flight_number"
|
||||||
|
name="flight_number"
|
||||||
|
bind:value={transportation.flight_number}
|
||||||
|
class="input input-bordered w-full"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Starting Airport -->
|
||||||
|
{#if !transportation.from_location || !transportation.to_location}
|
||||||
|
<div class="mb-4">
|
||||||
|
<label for="starting_airport" class="label">
|
||||||
|
<span class="label-text">{$t('adventures.starting_airport')}</span>
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="starting_airport"
|
||||||
|
bind:value={starting_airport}
|
||||||
|
name="starting_airport"
|
||||||
|
class="input input-bordered w-full"
|
||||||
|
placeholder="Enter starting airport code (e.g., JFK)"
|
||||||
|
/>
|
||||||
|
<label for="ending_airport" class="label">
|
||||||
|
<span class="label-text">{$t('adventures.ending_airport')}</span>
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="ending_airport"
|
||||||
|
bind:value={ending_airport}
|
||||||
|
name="ending_airport"
|
||||||
|
class="input input-bordered w-full"
|
||||||
|
placeholder="Enter ending airport code (e.g., LAX)"
|
||||||
|
/>
|
||||||
|
<button type="button" class="btn btn-primary mt-2" on:click={geocode}>
|
||||||
|
Fetch Location Information
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if transportation.from_location && transportation.to_location}
|
||||||
|
<!-- From Location -->
|
||||||
|
<div class="mb-4">
|
||||||
|
<label for="from_location" class="label">
|
||||||
|
<span class="label-text">{$t('transportation.from_location')}</span>
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="from_location"
|
||||||
|
name="from_location"
|
||||||
|
bind:value={transportation.from_location}
|
||||||
|
class="input input-bordered w-full"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<!-- To Location -->
|
||||||
|
<div class="mb-4">
|
||||||
|
<label for="to_location" class="label">
|
||||||
|
<span class="label-text">{$t('transportation.to_location')}</span>
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="to_location"
|
||||||
|
name="to_location"
|
||||||
|
bind:value={transportation.to_location}
|
||||||
|
class="input input-bordered w-full"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
{:else}
|
||||||
|
<!-- From Location -->
|
||||||
|
<div class="mb-4">
|
||||||
|
<label for="from_location" class="label">
|
||||||
|
<span class="label-text">{$t('transportation.from_location')}</span>
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="from_location"
|
||||||
|
name="from_location"
|
||||||
|
bind:value={transportation.from_location}
|
||||||
|
class="input input-bordered w-full"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<!-- To Location -->
|
||||||
|
<div class="mb-4">
|
||||||
|
<label for="to_location" class="label">
|
||||||
|
<span class="label-text">{$t('transportation.to_location')}</span>
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="to_location"
|
||||||
|
name="to_location"
|
||||||
|
bind:value={transportation.to_location}
|
||||||
|
class="input input-bordered w-full"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<button type="button" class="btn btn-primary mt-2" on:click={geocode}>
|
||||||
|
Fetch Location Information
|
||||||
|
</button>
|
||||||
|
{/if}
|
||||||
|
<div class="mt-4">
|
||||||
|
<MapLibre
|
||||||
|
style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"
|
||||||
|
class="relative aspect-[9/16] max-h-[70vh] w-full sm:aspect-video sm:max-h-full"
|
||||||
|
standardControls
|
||||||
|
>
|
||||||
|
<!-- MapEvents gives you access to map events even from other components inside the map,
|
||||||
|
where you might not have access to the top-level `MapLibre` component. In this case
|
||||||
|
it would also work to just use on:click on the MapLibre component itself. -->
|
||||||
|
<!-- @ts-ignore -->
|
||||||
|
|
||||||
|
{#if transportation.origin_latitude && transportation.origin_longitude}
|
||||||
|
<DefaultMarker
|
||||||
|
lngLat={[transportation.origin_longitude, transportation.origin_latitude]}
|
||||||
|
/>
|
||||||
|
{/if}
|
||||||
|
{#if transportation.destination_latitude && transportation.destination_longitude}
|
||||||
|
<DefaultMarker
|
||||||
|
lngLat={[
|
||||||
|
transportation.destination_longitude,
|
||||||
|
transportation.destination_latitude
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
{/if}
|
||||||
|
</MapLibre>
|
||||||
|
<!-- button to clear to and from location -->
|
||||||
|
</div>
|
||||||
|
{#if transportation.from_location && transportation.to_location}
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="btn btn-error btn-sm mt-2"
|
||||||
|
on:click={() => {
|
||||||
|
transportation.from_location = '';
|
||||||
|
transportation.to_location = '';
|
||||||
|
starting_airport = '';
|
||||||
|
ending_airport = '';
|
||||||
|
transportation.origin_latitude = NaN;
|
||||||
|
transportation.origin_longitude = NaN;
|
||||||
|
transportation.destination_latitude = NaN;
|
||||||
|
transportation.destination_longitude = NaN;
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{$t('adventures.clear_location')}
|
||||||
|
</button>
|
||||||
|
{/if}
|
||||||
|
</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>
|
||||||
|
|
@ -127,8 +127,12 @@ export type Transportation = {
|
||||||
flight_number: string | null;
|
flight_number: string | null;
|
||||||
from_location: string | null;
|
from_location: string | null;
|
||||||
to_location: string | null;
|
to_location: string | null;
|
||||||
|
origin_latitude: number | null;
|
||||||
|
origin_longitude: number | null;
|
||||||
|
destination_latitude: number | null;
|
||||||
|
destination_longitude: number | null;
|
||||||
is_public: boolean;
|
is_public: boolean;
|
||||||
collection: Collection | null;
|
collection: Collection | null | string;
|
||||||
created_at: string; // ISO 8601 date string
|
created_at: string; // ISO 8601 date string
|
||||||
updated_at: string; // ISO 8601 date string
|
updated_at: string; // ISO 8601 date string
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -216,8 +216,18 @@
|
||||||
"copy_failed": "Copy failed",
|
"copy_failed": "Copy failed",
|
||||||
"show": "Show",
|
"show": "Show",
|
||||||
"hide": "Hide",
|
"hide": "Hide",
|
||||||
|
"clear_location": "Clear Location",
|
||||||
|
"starting_airport": "Starting Airport",
|
||||||
|
"ending_airport": "Ending Airport",
|
||||||
|
"no_location_found": "No location found",
|
||||||
|
"from": "From",
|
||||||
|
"to": "To",
|
||||||
|
"start": "Start",
|
||||||
|
"end": "End",
|
||||||
"emoji_picker": "Emoji Picker",
|
"emoji_picker": "Emoji Picker",
|
||||||
"download_calendar": "Download Calendar",
|
"download_calendar": "Download Calendar",
|
||||||
|
"date_information": "Date Information",
|
||||||
|
"flight_information": "Flight Information",
|
||||||
"preview": "Preview",
|
"preview": "Preview",
|
||||||
"md_instructions": "Write your markdown here...",
|
"md_instructions": "Write your markdown here...",
|
||||||
"days": "days",
|
"days": "days",
|
||||||
|
|
|
||||||
|
|
@ -12,8 +12,6 @@
|
||||||
import NotFound from '$lib/components/NotFound.svelte';
|
import NotFound from '$lib/components/NotFound.svelte';
|
||||||
import { DefaultMarker, MapLibre, Popup } from 'svelte-maplibre';
|
import { DefaultMarker, MapLibre, Popup } from 'svelte-maplibre';
|
||||||
import TransportationCard from '$lib/components/TransportationCard.svelte';
|
import TransportationCard from '$lib/components/TransportationCard.svelte';
|
||||||
import EditTransportation from '$lib/components/EditTransportation.svelte';
|
|
||||||
import NewTransportation from '$lib/components/NewTransportation.svelte';
|
|
||||||
import NoteCard from '$lib/components/NoteCard.svelte';
|
import NoteCard from '$lib/components/NoteCard.svelte';
|
||||||
import NoteModal from '$lib/components/NoteModal.svelte';
|
import NoteModal from '$lib/components/NoteModal.svelte';
|
||||||
|
|
||||||
|
|
@ -26,6 +24,7 @@
|
||||||
import ChecklistCard from '$lib/components/ChecklistCard.svelte';
|
import ChecklistCard from '$lib/components/ChecklistCard.svelte';
|
||||||
import ChecklistModal from '$lib/components/ChecklistModal.svelte';
|
import ChecklistModal from '$lib/components/ChecklistModal.svelte';
|
||||||
import AdventureModal from '$lib/components/AdventureModal.svelte';
|
import AdventureModal from '$lib/components/AdventureModal.svelte';
|
||||||
|
import TransportationModal from '$lib/components/TransportationModal.svelte';
|
||||||
|
|
||||||
export let data: PageData;
|
export let data: PageData;
|
||||||
console.log(data);
|
console.log(data);
|
||||||
|
|
@ -108,9 +107,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
let adventureToEdit: Adventure | null = null;
|
let adventureToEdit: Adventure | null = null;
|
||||||
let transportationToEdit: Transportation;
|
let transportationToEdit: Transportation | null = null;
|
||||||
let isAdventureModalOpen: boolean = false;
|
let isAdventureModalOpen: boolean = false;
|
||||||
let isTransportationEditModalOpen: boolean = false;
|
|
||||||
let isNoteModalOpen: boolean = false;
|
let isNoteModalOpen: boolean = false;
|
||||||
let noteToEdit: Note | null;
|
let noteToEdit: Note | null;
|
||||||
let checklistToEdit: Checklist | null;
|
let checklistToEdit: Checklist | null;
|
||||||
|
|
@ -122,17 +120,12 @@
|
||||||
isAdventureModalOpen = true;
|
isAdventureModalOpen = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
function saveNewTransportation(event: CustomEvent<Transportation>) {
|
function editTransportation(event: CustomEvent<Transportation>) {
|
||||||
transportations = transportations.map((transportation) => {
|
transportationToEdit = event.detail;
|
||||||
if (transportation.id === event.detail.id) {
|
isShowingTransportationModal = true;
|
||||||
return event.detail;
|
|
||||||
}
|
|
||||||
return transportation;
|
|
||||||
});
|
|
||||||
isTransportationEditModalOpen = false;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function saveOrCreate(event: CustomEvent<Adventure>) {
|
function saveOrCreateAdventure(event: CustomEvent<Adventure>) {
|
||||||
if (adventures.find((adventure) => adventure.id === event.detail.id)) {
|
if (adventures.find((adventure) => adventure.id === event.detail.id)) {
|
||||||
adventures = adventures.map((adventure) => {
|
adventures = adventures.map((adventure) => {
|
||||||
if (adventure.id === event.detail.id) {
|
if (adventure.id === event.detail.id) {
|
||||||
|
|
@ -145,6 +138,22 @@
|
||||||
}
|
}
|
||||||
isAdventureModalOpen = false;
|
isAdventureModalOpen = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function saveOrCreateTransportation(event: CustomEvent<Transportation>) {
|
||||||
|
if (transportations.find((transportation) => transportation.id === event.detail.id)) {
|
||||||
|
// Update existing transportation
|
||||||
|
transportations = transportations.map((transportation) => {
|
||||||
|
if (transportation.id === event.detail.id) {
|
||||||
|
return event.detail;
|
||||||
|
}
|
||||||
|
return transportation;
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
// Create new transportation
|
||||||
|
transportations = [event.detail, ...transportations];
|
||||||
|
}
|
||||||
|
isShowingTransportationModal = false;
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if isShowingLinkModal}
|
{#if isShowingLinkModal}
|
||||||
|
|
@ -157,13 +166,12 @@
|
||||||
/>
|
/>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
{#if isTransportationEditModalOpen}
|
{#if isShowingTransportationModal}
|
||||||
<EditTransportation
|
<TransportationModal
|
||||||
{transportationToEdit}
|
{transportationToEdit}
|
||||||
on:close={() => (isTransportationEditModalOpen = false)}
|
on:close={() => (isShowingTransportationModal = false)}
|
||||||
on:saveEdit={saveNewTransportation}
|
on:save={saveOrCreateTransportation}
|
||||||
startDate={collection.start_date}
|
{collection}
|
||||||
endDate={collection.end_date}
|
|
||||||
/>
|
/>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
|
|
@ -171,7 +179,7 @@
|
||||||
<AdventureModal
|
<AdventureModal
|
||||||
{adventureToEdit}
|
{adventureToEdit}
|
||||||
on:close={() => (isAdventureModalOpen = false)}
|
on:close={() => (isAdventureModalOpen = false)}
|
||||||
on:save={saveOrCreate}
|
on:save={saveOrCreateAdventure}
|
||||||
{collection}
|
{collection}
|
||||||
/>
|
/>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
@ -221,19 +229,6 @@
|
||||||
/>
|
/>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
{#if isShowingTransportationModal}
|
|
||||||
<NewTransportation
|
|
||||||
on:close={() => (isShowingTransportationModal = false)}
|
|
||||||
on:add={(event) => {
|
|
||||||
transportations = [event.detail, ...transportations];
|
|
||||||
isShowingTransportationModal = false;
|
|
||||||
}}
|
|
||||||
{collection}
|
|
||||||
startDate={collection.start_date}
|
|
||||||
endDate={collection.end_date}
|
|
||||||
/>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
{#if notFound}
|
{#if notFound}
|
||||||
<div
|
<div
|
||||||
class="flex min-h-[100dvh] flex-col items-center justify-center bg-background px-4 py-12 sm:px-6 lg:px-8 -mt-20"
|
class="flex min-h-[100dvh] flex-col items-center justify-center bg-background px-4 py-12 sm:px-6 lg:px-8 -mt-20"
|
||||||
|
|
@ -300,6 +295,8 @@
|
||||||
<button
|
<button
|
||||||
class="btn btn-primary"
|
class="btn btn-primary"
|
||||||
on:click={() => {
|
on:click={() => {
|
||||||
|
// Reset the transportation object for creating a new one
|
||||||
|
transportationToEdit = null;
|
||||||
isShowingTransportationModal = true;
|
isShowingTransportationModal = true;
|
||||||
newType = '';
|
newType = '';
|
||||||
}}
|
}}
|
||||||
|
|
@ -415,10 +412,7 @@
|
||||||
on:delete={(event) => {
|
on:delete={(event) => {
|
||||||
transportations = transportations.filter((t) => t.id != event.detail);
|
transportations = transportations.filter((t) => t.id != event.detail);
|
||||||
}}
|
}}
|
||||||
on:edit={(event) => {
|
on:edit={editTransportation}
|
||||||
transportationToEdit = event.detail;
|
|
||||||
isTransportationEditModalOpen = true;
|
|
||||||
}}
|
|
||||||
{collection}
|
{collection}
|
||||||
/>
|
/>
|
||||||
{/each}
|
{/each}
|
||||||
|
|
@ -534,7 +528,7 @@
|
||||||
}}
|
}}
|
||||||
on:edit={(event) => {
|
on:edit={(event) => {
|
||||||
transportationToEdit = event.detail;
|
transportationToEdit = event.detail;
|
||||||
isTransportationEditModalOpen = true;
|
isShowingTransportationModal = true;
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
{/each}
|
{/each}
|
||||||
|
|
|
||||||
|
|
@ -7,6 +7,7 @@
|
||||||
import { browser } from '$app/environment';
|
import { browser } from '$app/environment';
|
||||||
import { t } from 'svelte-i18n';
|
import { t } from 'svelte-i18n';
|
||||||
import TotpModal from '$lib/components/TOTPModal.svelte';
|
import TotpModal from '$lib/components/TOTPModal.svelte';
|
||||||
|
import { appTitle, appVersion } from '$lib/config.js';
|
||||||
|
|
||||||
export let data;
|
export let data;
|
||||||
let user: User;
|
let user: User;
|
||||||
|
|
@ -154,113 +155,144 @@
|
||||||
/>
|
/>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<h1 class="text-center font-extrabold text-4xl mb-6">{$t('settings.settings_page')}</h1>
|
<div class="container mx-auto p-6 max-w-4xl">
|
||||||
|
<h1 class="text-3xl font-extrabold text-center mb-6">
|
||||||
|
{$t('settings.settings_page')}
|
||||||
|
</h1>
|
||||||
|
|
||||||
<h1 class="text-center font-extrabold text-xl">{$t('settings.account_settings')}</h1>
|
<!-- Account Settings Section -->
|
||||||
<div class="flex justify-center">
|
<section class="space-y-8">
|
||||||
|
<h2 class="text-2xl font-semibold text-center">
|
||||||
|
{$t('settings.account_settings')}
|
||||||
|
</h2>
|
||||||
|
<div class=" bg-neutral p-6 rounded-lg shadow-md">
|
||||||
<form
|
<form
|
||||||
method="post"
|
method="post"
|
||||||
action="?/changeDetails"
|
action="?/changeDetails"
|
||||||
use:enhance
|
use:enhance
|
||||||
class="w-full max-w-xs"
|
|
||||||
enctype="multipart/form-data"
|
enctype="multipart/form-data"
|
||||||
|
class="space-y-6"
|
||||||
>
|
>
|
||||||
<label for="username">{$t('auth.username')}</label>
|
<div>
|
||||||
|
<label for="username" class="text-sm font-medium">{$t('auth.username')}</label>
|
||||||
<input
|
<input
|
||||||
bind:value={user.username}
|
type="text"
|
||||||
name="username"
|
|
||||||
id="username"
|
id="username"
|
||||||
class="block mb-2 input input-bordered w-full max-w-xs"
|
name="username"
|
||||||
/><br />
|
bind:value={user.username}
|
||||||
<label for="first_name">{$t('auth.first_name')}</label>
|
class="block w-full mt-1 input input-bordered input-primary"
|
||||||
<input
|
/>
|
||||||
type="text"
|
</div>
|
||||||
bind:value={user.first_name}
|
|
||||||
name="first_name"
|
|
||||||
id="first_name"
|
|
||||||
class="block mb-2 input input-bordered w-full max-w-xs"
|
|
||||||
/><br />
|
|
||||||
|
|
||||||
<label for="last_name">{$t('auth.last_name')}</label>
|
<div>
|
||||||
|
<label for="first_name" class="text-sm font-medium">{$t('auth.first_name')}</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="first_name"
|
||||||
|
name="first_name"
|
||||||
|
bind:value={user.first_name}
|
||||||
|
class="block w-full mt-1 input input-bordered input-primary"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="last_name" class="text-sm font-medium">{$t('auth.last_name')}</label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
bind:value={user.last_name}
|
|
||||||
name="last_name"
|
|
||||||
id="last_name"
|
id="last_name"
|
||||||
class="block mb-2 input input-bordered w-full max-w-xs"
|
name="last_name"
|
||||||
/><br />
|
bind:value={user.last_name}
|
||||||
<label for="profilePicture">{$t('auth.profile_picture')}</label>
|
class="block w-full mt-1 input input-bordered input-primary"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="profile_pic" class="text-sm font-medium">{$t('auth.profile_picture')}</label>
|
||||||
<input
|
<input
|
||||||
type="file"
|
type="file"
|
||||||
name="profile_pic"
|
|
||||||
id="profile_pic"
|
id="profile_pic"
|
||||||
class="file-input file-input-bordered w-full max-w-xs mb-2"
|
name="profile_pic"
|
||||||
/><br />
|
class="file-input file-input-bordered file-input-primary mt-1 w-full"
|
||||||
<div class="form-control">
|
/>
|
||||||
<div class="tooltip tooltip-info" data-tip={$t('auth.public_tooltip')}>
|
</div>
|
||||||
<label class="label cursor-pointer">
|
|
||||||
<span class="label-text">{$t('auth.public_profile')}</span>
|
|
||||||
|
|
||||||
|
<div class="flex items-center">
|
||||||
<input
|
<input
|
||||||
|
type="checkbox"
|
||||||
id="public_profile"
|
id="public_profile"
|
||||||
name="public_profile"
|
name="public_profile"
|
||||||
type="checkbox"
|
bind:checked={user.public_profile}
|
||||||
class="toggle"
|
class="toggle toggle-primary"
|
||||||
checked={user.public_profile}
|
|
||||||
/>
|
/>
|
||||||
</label>
|
<label for="public_profile" class="ml-2 text-sm">{$t('auth.public_profile')}</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<button class="py-2 mt-2 px-4 btn btn-primary">{$t('settings.update')}</button>
|
<button class="w-full mt-4 btn btn-primary py-2">{$t('settings.update')}</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
|
||||||
|
|
||||||
{#if $page.form?.message}
|
|
||||||
<div class="text-center text-error mt-4">
|
|
||||||
{$t($page.form.message)}
|
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
</section>
|
||||||
|
|
||||||
<h1 class="text-center font-extrabold text-xl mt-4 mb-2">{$t('settings.password_change')}</h1>
|
<!-- Password Change Section -->
|
||||||
<div class="flex justify-center">
|
<section class="space-y-8">
|
||||||
<form action="?/changePassword" method="post" class="w-full max-w-xs" use:enhance>
|
<h2 class="text-2xl font-semibold text-center mt-8">
|
||||||
|
{$t('settings.password_change')}
|
||||||
|
</h2>
|
||||||
|
<div class="bg-neutral p-6 rounded-lg shadow-md">
|
||||||
|
<form method="post" action="?/changePassword" use:enhance class="space-y-6">
|
||||||
|
<div>
|
||||||
|
<label for="current_password" class="text-sm font-medium"
|
||||||
|
>{$t('settings.current_password')}</label
|
||||||
|
>
|
||||||
<input
|
<input
|
||||||
type="password"
|
type="password"
|
||||||
name="current_password"
|
|
||||||
placeholder={$t('settings.current_password')}
|
|
||||||
id="current_password"
|
id="current_password"
|
||||||
class="block mb-2 input input-bordered w-full max-w-xs"
|
name="current_password"
|
||||||
|
class="block w-full mt-1 input input-bordered input-primary"
|
||||||
/>
|
/>
|
||||||
<br />
|
|
||||||
<input
|
|
||||||
type="password"
|
|
||||||
name="password1"
|
|
||||||
placeholder={$t('settings.new_password')}
|
|
||||||
id="password1"
|
|
||||||
class="block mb-2 input input-bordered w-full max-w-xs"
|
|
||||||
/>
|
|
||||||
<br />
|
|
||||||
<input
|
|
||||||
type="password"
|
|
||||||
name="password2"
|
|
||||||
id="password2"
|
|
||||||
placeholder={$t('settings.confirm_new_password')}
|
|
||||||
class="block mb-2 input input-bordered w-full max-w-xs"
|
|
||||||
/>
|
|
||||||
<div class="tooltip tooltip-warning" data-tip={$t('settings.password_change_lopout_warning')}>
|
|
||||||
<button class="py-2 px-4 btn btn-primary mt-2">{$t('settings.password_change')}</button>
|
|
||||||
</div>
|
</div>
|
||||||
<br />
|
|
||||||
|
<div>
|
||||||
|
<label for="password1" class="text-sm font-medium">{$t('settings.new_password')}</label>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
id="password1"
|
||||||
|
name="password1"
|
||||||
|
class="block w-full mt-1 input input-bordered input-primary"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="password2" class="text-sm font-medium"
|
||||||
|
>{$t('settings.confirm_new_password')}</label
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
id="password2"
|
||||||
|
name="password2"
|
||||||
|
class="block w-full mt-1 input input-bordered input-primary"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="tooltip tooltip-warning"
|
||||||
|
data-tip={$t('settings.password_change_lopout_warning')}
|
||||||
|
>
|
||||||
|
<button class="w-full btn btn-primary py-2 mt-4">{$t('settings.password_change')}</button>
|
||||||
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<h1 class="text-center font-extrabold text-xl mt-4 mb-2">{$t('settings.email_change')}</h1>
|
<!-- Email Change Section -->
|
||||||
|
<section class="space-y-8">
|
||||||
<div class="flex justify-center mb-4">
|
<h2 class="text-2xl font-semibold text-center mt-8">
|
||||||
|
{$t('settings.email_change')}
|
||||||
|
</h2>
|
||||||
|
<div class="bg-neutral p-6 rounded-lg shadow-md">
|
||||||
<div>
|
<div>
|
||||||
{#each emails as email}
|
{#each emails as email}
|
||||||
<p class="mb-2">
|
<div class="flex items-center space-x-2 mb-2">
|
||||||
{email.email}
|
<span>{email.email}</span>
|
||||||
{#if email.verified}
|
{#if email.verified}
|
||||||
<div class="badge badge-success">{$t('settings.verified')}</div>
|
<div class="badge badge-success">{$t('settings.verified')}</div>
|
||||||
{:else}
|
{:else}
|
||||||
|
|
@ -270,78 +302,72 @@
|
||||||
<div class="badge badge-primary">{$t('settings.primary')}</div>
|
<div class="badge badge-primary">{$t('settings.primary')}</div>
|
||||||
{/if}
|
{/if}
|
||||||
{#if !email.verified}
|
{#if !email.verified}
|
||||||
<button class="btn btn-sm btn-secondary ml-2" on:click={() => verifyEmail(email)}
|
<button class="btn btn-sm btn-secondary" on:click={() => verifyEmail(email)}
|
||||||
>{$t('settings.verify')}</button
|
>{$t('settings.verify')}</button
|
||||||
>
|
>
|
||||||
{/if}
|
{/if}
|
||||||
{#if !email.primary}
|
{#if !email.primary}
|
||||||
<button class="btn btn-sm btn-secondary ml-2" on:click={() => primaryEmail(email)}
|
<button class="btn btn-sm btn-secondary" on:click={() => primaryEmail(email)}
|
||||||
>{$t('settings.make_primary')}</button
|
>{$t('settings.make_primary')}</button
|
||||||
>
|
>
|
||||||
{/if}
|
{/if}
|
||||||
<button class="btn btn-sm btn-warning ml-2" on:click={() => removeEmail(email)}
|
<button class="btn btn-sm btn-warning" on:click={() => removeEmail(email)}
|
||||||
>{$t('adventures.remove')}</button
|
>{$t('adventures.remove')}</button
|
||||||
>
|
>
|
||||||
</p>
|
</div>
|
||||||
{/each}
|
{/each}
|
||||||
{#if emails.length === 0}
|
{#if emails.length === 0}
|
||||||
<p>{$t('settings.no_emai_set')}</p>
|
<p class="text-center">{$t('settings.no_email_set')}</p>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex justify-center mt-4">
|
<form class="mt-4" on:submit={addEmail}>
|
||||||
<form class="w-full max-w-xs" on:submit={addEmail}>
|
|
||||||
<div class="mb-4">
|
|
||||||
<input
|
<input
|
||||||
type="email"
|
type="email"
|
||||||
name="new_email"
|
|
||||||
placeholder={$t('settings.new_email')}
|
|
||||||
bind:value={new_email}
|
|
||||||
id="new_email"
|
id="new_email"
|
||||||
class="block mb-2 input input-bordered w-full max-w-xs"
|
name="new_email"
|
||||||
|
bind:value={new_email}
|
||||||
|
placeholder={$t('settings.new_email')}
|
||||||
|
class="block w-full input input-bordered input-primary"
|
||||||
/>
|
/>
|
||||||
</div>
|
<button class="w-full mt-4 btn btn-primary py-2">{$t('settings.email_change')}</button>
|
||||||
<div>
|
|
||||||
<button class="py-2 px-4 mb-4 btn btn-primary">{$t('settings.email_change')}</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<h1 class="text-center font-extrabold text-xl mt-4 mb-2">{$t('settings.mfa_page_title')}</h1>
|
<!-- MFA Section -->
|
||||||
|
<section class="space-y-8">
|
||||||
<div class="flex justify-center mb-4">
|
<h2 class="text-2xl font-semibold text-center mt-8">
|
||||||
<div>
|
{$t('settings.mfa_page_title')}
|
||||||
|
</h2>
|
||||||
|
<div class="bg-neutral p-6 rounded-lg shadow-md text-center">
|
||||||
{#if !data.props.authenticators}
|
{#if !data.props.authenticators}
|
||||||
<p>{$t('settings.mfa_not_enabled')}</p>
|
<p>{$t('settings.mfa_not_enabled')}</p>
|
||||||
<button class="btn btn-primary mt-2" on:click={() => (isMFAModalOpen = true)}
|
<button class="btn btn-primary mt-4" on:click={() => (isMFAModalOpen = true)}
|
||||||
>{$t('settings.enable_mfa')}</button
|
>{$t('settings.enable_mfa')}</button
|
||||||
>
|
>
|
||||||
{:else}
|
{:else}
|
||||||
<button class="btn btn-warning mt-2" on:click={disableMfa}
|
<button class="btn btn-warning mt-4" on:click={disableMfa}
|
||||||
>{$t('settings.disable_mfa')}</button
|
>{$t('settings.disable_mfa')}</button
|
||||||
>
|
>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
|
|
||||||
<div class="flex flex-col items-center mt-4">
|
<!-- Visited Region Check Section -->
|
||||||
<h1 class="text-center font-extrabold text-xl mt-4 mb-2">
|
<section class="text-center mt-8">
|
||||||
{$t('adventures.visited_region_check')}
|
<h2 class="text-2xl font-semibold">{$t('adventures.visited_region_check')}</h2>
|
||||||
</h1>
|
<p>{$t('adventures.visited_region_check_desc')}</p>
|
||||||
<p>
|
<button class="btn btn-neutral mt-4" on:click={checkVisitedRegions}
|
||||||
{$t('adventures.visited_region_check_desc')}
|
|
||||||
</p>
|
|
||||||
<p>{$t('adventures.update_visited_regions_disclaimer')}</p>
|
|
||||||
|
|
||||||
<button class="btn btn-neutral mt-2 mb-2" on:click={checkVisitedRegions}
|
|
||||||
>{$t('adventures.update_visited_regions')}</button
|
>{$t('adventures.update_visited_regions')}</button
|
||||||
>
|
>
|
||||||
</div>
|
</section>
|
||||||
|
|
||||||
<small class="text-center"
|
<small class="text-center block mt-8">
|
||||||
><b>For Debug Use:</b> UUID={user.uuid} | Staff user: {user.is_staff}</small
|
<b>For Debug Use:</b> UUID={user.uuid} | Staff user: {user.is_staff} | {appTitle}
|
||||||
>
|
{appVersion}
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
|
|
||||||
<svelte:head>
|
<svelte:head>
|
||||||
<title>User Settings | AdventureLog</title>
|
<title>User Settings | AdventureLog</title>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue