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

Update note and checklist modals as well as add an unlinked state in the collection page for better organization

Browse source
This commit is contained in:
Sean Morley 2024-12-26 21:56:14 -05:00
parent f7c998ab58
commit df2ce01910
12 changed files with 460 additions and 326 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -41,6 +41,24 @@
} }
} }
let unlinked: boolean = false;
// Reactive block to update `unlinked` when dependencies change
$: {
if (collection && collection?.start_date && collection.end_date) {
unlinked = adventure.visits.every((visit) => {
// Check if visit dates exist
if (!visit.start_date || !visit.end_date) return true; // Consider "unlinked" for incomplete visit data
// Check if collection dates are completely outside this visit's range
const isBeforeVisit = collection.end_date && collection.end_date < visit.start_date;
const isAfterVisit = collection.start_date && collection.start_date > visit.end_date;
return isBeforeVisit || isAfterVisit;
});
}
}
async function deleteAdventure() { async function deleteAdventure() {
let res = await fetch(`/adventures/${adventure.id}?/delete`, { let res = await fetch(`/adventures/${adventure.id}?/delete`, {
method: 'POST', method: 'POST',
@ -140,6 +158,9 @@
{adventure.is_public ? $t('adventures.public') : $t('adventures.private')} {adventure.is_public ? $t('adventures.public') : $t('adventures.private')}
</div> </div>
</div> </div>
{#if unlinked}
<div class="badge badge-error">{$t('adventures.out_of_range')}</div>
{/if}
{#if adventure.location && adventure.location !== ''} {#if adventure.location && adventure.location !== ''}
<div class="inline-flex items-center"> <div class="inline-flex items-center">
<MapMarker class="w-5 h-5 mr-1" /> <MapMarker class="w-5 h-5 mr-1" />

23
frontend/src/lib/components/ChecklistCard.svelte
View file

@ -16,6 +16,24 @@
let isWarningModalOpen: boolean = false; let isWarningModalOpen: boolean = false;
let unlinked: boolean = false;
$: {
if (collection?.start_date && collection.end_date) {
const startOutsideRange =
checklist.date &&
collection.start_date < checklist.date &&
collection.end_date < checklist.date;
const endOutsideRange =
checklist.date &&
collection.start_date > checklist.date &&
collection.end_date > checklist.date;
unlinked = !!(startOutsideRange || endOutsideRange);
}
}
function editChecklist() { function editChecklist() {
dispatch('edit', checklist); dispatch('edit', checklist);
} }
@ -61,6 +79,9 @@
{checklist.items.length > 1 ? $t('checklist.items') : $t('checklist.item')} {checklist.items.length > 1 ? $t('checklist.items') : $t('checklist.item')}
</p> </p>
{/if} {/if}
{#if unlinked}
<div class="badge badge-error">{$t('adventures.out_of_range')}</div>
{/if}
{#if checklist.date && checklist.date !== ''} {#if checklist.date && checklist.date !== ''}
<div class="inline-flex items-center"> <div class="inline-flex items-center">
<Calendar class="w-5 h-5 mr-1" /> <Calendar class="w-5 h-5 mr-1" />
@ -71,7 +92,7 @@
<button class="btn btn-neutral-200 mb-2" on:click={editChecklist}> <button class="btn btn-neutral-200 mb-2" on:click={editChecklist}>
<Launch class="w-6 h-6" />{$t('notes.open')} <Launch class="w-6 h-6" />{$t('notes.open')}
</button> </button>
{#if checklist.user_id == user?.uuid || (collection && user && collection.shared_with.includes(user.uuid))} {#if checklist.user_id == user?.uuid || (collection && user && collection.shared_with && collection.shared_with.includes(user.uuid))}
<button <button
id="delete_adventure" id="delete_adventure"
data-umami-event="Delete Checklist" data-umami-event="Delete Checklist"

272
frontend/src/lib/components/ChecklistModal.svelte
View file

@ -12,10 +12,16 @@
let items: ChecklistItem[] = []; let items: ChecklistItem[] = [];
let constrainDates: boolean = false;
items = checklist?.items || []; items = checklist?.items || [];
let warning: string | null = ''; let warning: string | null = '';
let isReadOnly =
!(checklist && user?.uuid == checklist?.user_id) &&
!(user && collection && collection.shared_with && collection.shared_with.includes(user.uuid)) &&
!!checklist;
let newStatus: boolean = false; let newStatus: boolean = false;
let newItem: string = ''; let newItem: string = '';
@ -56,8 +62,6 @@
is_public: collection.is_public is_public: collection.is_public
}; };
let initialName: string = checklist?.name || '';
onMount(() => { onMount(() => {
modal = document.getElementById('my_modal_1') as HTMLDialogElement; modal = document.getElementById('my_modal_1') as HTMLDialogElement;
if (modal) { if (modal) {
@ -127,86 +131,130 @@
</script> </script>
<dialog id="my_modal_1" class="modal"> <dialog id="my_modal_1" class="modal">
<!-- 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 mb-2">{$t('checklist.checklist_editor')}</h3> <div class="modal-box w-11/12 max-w-3xl" role="dialog" on:keydown={handleKeydown} tabindex="0">
{#if initialName} <h3 class="font-bold text-2xl">
<p class="font-semibold text-md mb-2">{$t('checklist.editing_checklist')} {initialName}</p> {#if checklist?.id}
{/if} <p class="font-semibold text-md mb-2">
{$t('checklist.checklist_editor')}
{#if (checklist && user?.uuid == checklist?.user_id) || (user && collection && collection.shared_with.includes(user.uuid)) || !checklist} </p>
<form on:submit|preventDefault> {:else}
<div class="form-control mb-2"> {$t('checklist.new_checklist')}
<label for="name">{$t('adventures.name')}</label> {/if}
<input </h3>
type="text" <div class="modal-action items-center">
id="name" <form method="post" style="width: 100%;" on:submit|preventDefault>
class="input input-bordered w-full max-w-xs" <!-- Basic Information Section -->
bind:value={newChecklist.name} <div class="collapse collapse-plus bg-base-200 mb-4">
/> <input type="checkbox" id="collapse-plus-1" checked />
</div> <div class="collapse-title text-lg font-bold">
<div class="form-control mb-2"> {$t('adventures.basic_information')}
<label for="content">{$t('adventures.date')}</label>
<input
type="date"
id="date"
name="date"
min={collection.start_date || ''}
max={collection.end_date || ''}
bind:value={newChecklist.date}
class="input input-bordered w-full max-w-xs mt-1"
/>
</div>
<div class="form-control mb-2 flex flex-row">
<input type="checkbox" bind:checked={newStatus} class="checkbox mt-4 mr-2" />
<input
type="text"
id="new_item"
placeholder={$t('checklist.new_item')}
name="new_item"
bind:value={newItem}
class="input input-bordered w-full max-w-xs mt-1"
on:keydown={(e) => {
if (e.key === 'Enter') {
e.preventDefault();
addItem();
}
}}
/>
<button
type="button"
class="btn btn-sm btn-primary absolute right-0 mt-2.5 mr-4"
on:click={addItem}
>
{$t('adventures.add')}
</button>
</div>
{#if items.length > 0}
<div class="divider"></div>
<h2 class=" text-xl font-semibold mb-4 -mt-3">{$t('checklist.items')}</h2>
{/if}
{#each items as item, i}
<div class="form-control mb-2 flex flex-row">
<input type="checkbox" bind:checked={item.is_checked} class="checkbox mt-4 mr-2" />
<input
type="text"
id="item_{i}"
name="item_{i}"
bind:value={item.name}
class="input input-bordered w-full max-w-xs mt-1"
/>
<button
type="button"
class="btn btn-sm btn-error absolute right-0 mt-2.5 mr-4"
on:click={() => removeItem(i)}
>
{$t('adventures.remove')}
</button>
</div> </div>
{/each} <div class="collapse-content">
<div class="form-control mb-2">
<label for="name">{$t('adventures.name')}</label>
<input
type="text"
id="name"
class="input input-bordered w-full max-w-xs"
bind:value={newChecklist.name}
readonly={isReadOnly}
/>
</div>
<div class="form-control mb-2">
<label for="content">{$t('adventures.date')}</label>
{#if collection && collection.start_date && collection.end_date && !isReadOnly}<label
class="label cursor-pointer flex items-start space-x-2"
>
<span class="label-text">{$t('adventures.date_constrain')}</span>
<input
type="checkbox"
class="toggle toggle-primary"
id="constrain_dates"
name="constrain_dates"
on:change={() => (constrainDates = !constrainDates)}
/></label
>
{/if}
<input
type="date"
id="date"
name="date"
min={constrainDates ? collection.start_date : ''}
max={constrainDates ? collection.end_date : ''}
bind:value={newChecklist.date}
class="input input-bordered w-full max-w-xs mt-1"
readonly={isReadOnly}
/>
</div>
</div>
</div>
<!-- Items Section -->
<div class="collapse collapse-plus bg-base-200 mb-4">
<input type="checkbox" id="collapse-plus-2" checked />
<div class="collapse-title text-lg font-bold">
{$t('checklist.items')}
</div>
<div class="collapse-content">
{#if !isReadOnly}
<div class="form-control mb-2 flex flex-row">
<input type="checkbox" bind:checked={newStatus} class="checkbox mt-4 mr-2" />
<input
type="text"
id="new_item"
placeholder={$t('checklist.new_item')}
name="new_item"
bind:value={newItem}
class="input input-bordered w-full max-w-xs mt-1"
on:keydown={(e) => {
if (e.key === 'Enter') {
e.preventDefault();
addItem();
}
}}
/>
<button
type="button"
class="btn btn-sm btn-primary absolute right-0 mt-2.5 mr-4"
on:click={addItem}
>
{$t('adventures.add')}
</button>
</div>
{/if}
{#if items.length > 0}
<div class="divider"></div>
<h2 class=" text-xl font-semibold mb-4 -mt-3">{$t('checklist.items')}</h2>
{/if}
{#each items as item, i}
<div class="form-control mb-2 flex flex-row">
<input
type="checkbox"
bind:checked={item.is_checked}
class="checkbox mt-4 mr-2"
readonly={isReadOnly}
/>
<input
type="text"
id="item_{i}"
name="item_{i}"
bind:value={item.name}
class="input input-bordered w-full max-w-xs mt-1"
readonly={isReadOnly}
/>
<button
type="button"
class="btn btn-sm btn-error absolute right-0 mt-2.5 mr-4"
on:click={() => removeItem(i)}
disabled={isReadOnly}
>
{$t('adventures.remove')}
</button>
</div>
{/each}
</div>
</div>
{#if warning} {#if warning}
<div role="alert" class="alert alert-error"> <div role="alert" class="alert alert-error">
<svg <svg
@ -225,10 +273,6 @@
<span>{warning}</span> <span>{warning}</span>
</div> </div>
{/if} {/if}
<button class="btn btn-primary mr-1" on:click={save}>{$t('notes.save')}</button>
<button class="btn btn-neutral" on:click={close}>{$t('about.close')}</button>
{#if collection.is_public} {#if collection.is_public}
<div role="alert" class="alert mt-4"> <div role="alert" class="alert mt-4">
<svg <svg
@ -247,60 +291,14 @@
<span>{$t('checklist.checklist_public')}</span> <span>{$t('checklist.checklist_public')}</span>
</div> </div>
{/if} {/if}
</form>
{:else} <div class="mt-4">
<form> <button class="btn btn-neutral" on:click={close}>{$t('about.close')}</button>
<div class="form-control mb-2"> <button class="btn btn-primary mr-1" disabled={isReadOnly} on:click={save}
<label for="name">{$t('adventures.name')}</label> >{$t('notes.save')}</button
<input >
type="text"
id="name"
class="input input-bordered w-full max-w-xs"
bind:value={newChecklist.name}
readonly
/>
</div> </div>
<div class="form-control mb-2">
<label for="content">{$t('adventures.date')}</label>
<input
type="date"
id="date"
name="date"
min={collection.start_date || ''}
max={collection.end_date || ''}
bind:value={newChecklist.date}
readonly
class="input input-bordered w-full max-w-xs mt-1"
/>
</div>
{#if items.length > 0}
<div class="divider"></div>
<h2 class=" text-xl font-semibold mb-4 -mt-3">{$t('checklist.items')}</h2>
{/if}
{#each items as item, i}
<div class="form-control mb-2 flex flex-row">
<input
type="checkbox"
checked={item.is_checked}
class="checkbox mt-4 mr-2"
readonly={true}
disabled
/>
<input
type="text"
id="item_{i}"
name="item_{i}"
bind:value={item.name}
readonly
class="input input-bordered w-full max-w-xs mt-1"
/>
</div>
{/each}
<button class="btn btn-neutral" on:click={close}>{$t('about.close')}</button>
</form> </form>
{/if} </div>
</div> </div>
</dialog> </dialog>

6
frontend/src/lib/components/CollectionModal.svelte
View file

@ -21,7 +21,7 @@
is_public: collectionToEdit?.is_public || false, is_public: collectionToEdit?.is_public || false,
adventures: collectionToEdit?.adventures || [], adventures: collectionToEdit?.adventures || [],
link: collectionToEdit?.link || '', link: collectionToEdit?.link || '',
shared_with: collectionToEdit?.shared_with || [] shared_with: undefined
}; };
console.log(collection); console.log(collection);
@ -47,6 +47,10 @@
event.preventDefault(); event.preventDefault();
console.log(collection); console.log(collection);
if (collection.start_date && !collection.end_date) {
collection.end_date = collection.start_date;
}
if (collection.id === '') { if (collection.id === '') {
let res = await fetch('/api/collections', { let res = await fetch('/api/collections', {
method: 'POST', method: 'POST',

18
frontend/src/lib/components/NoteCard.svelte
View file

@ -15,6 +15,19 @@
export let collection: Collection | null = null; export let collection: Collection | null = null;
let isWarningModalOpen: boolean = false; let isWarningModalOpen: boolean = false;
let unlinked: boolean = false;
$: {
if (collection?.start_date && collection.end_date) {
const startOutsideRange =
note.date && collection.start_date < note.date && collection.end_date < note.date;
const endOutsideRange =
note.date && collection.start_date > note.date && collection.end_date > note.date;
unlinked = !!(startOutsideRange || endOutsideRange);
}
}
function editNote() { function editNote() {
dispatch('edit', note); dispatch('edit', note);
@ -55,6 +68,9 @@
</h2> </h2>
</div> </div>
<div class="badge badge-primary">{$t('adventures.note')}</div> <div class="badge badge-primary">{$t('adventures.note')}</div>
{#if unlinked}
<div class="badge badge-error">{$t('adventures.out_of_range')}</div>
{/if}
{#if note.links && note.links.length > 0} {#if note.links && note.links.length > 0}
<p> <p>
{note.links.length} {note.links.length}
@ -74,7 +90,7 @@
<button class="btn btn-neutral-200 mb-2" on:click={editNote}> <button class="btn btn-neutral-200 mb-2" on:click={editNote}>
<Launch class="w-6 h-6" />{$t('notes.open')} <Launch class="w-6 h-6" />{$t('notes.open')}
</button> </button>
{#if note.user_id == user?.uuid || (collection && user && collection.shared_with.includes(user.uuid))} {#if note.user_id == user?.uuid || (collection && user && collection.shared_with && collection.shared_with.includes(user.uuid))}
<button <button
id="delete_adventure" id="delete_adventure"
data-umami-event="Delete Adventure" data-umami-event="Delete Adventure"

279
frontend/src/lib/components/NoteModal.svelte
View file

@ -5,12 +5,25 @@
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { t } from 'svelte-i18n'; import { t } from 'svelte-i18n';
import MarkdownEditor from './MarkdownEditor.svelte';
let modal: HTMLDialogElement; let modal: HTMLDialogElement;
import { marked } from 'marked'; // Import the markdown parser
const renderMarkdown = (markdown: string) => {
return marked(markdown);
};
export let note: Note | null = null; export let note: Note | null = null;
export let collection: Collection; export let collection: Collection;
export let user: User | null = null; export let user: User | null = null;
let constrainDates: boolean = false;
let isReadOnly =
!(note && user?.uuid == note?.user_id) &&
!(user && collection && collection.shared_with && collection.shared_with.includes(user.uuid)) &&
!!note;
let warning: string | null = ''; let warning: string | null = '';
let newLink: string = ''; let newLink: string = '';
@ -105,85 +118,137 @@
</script> </script>
<dialog id="my_modal_1" class="modal"> <dialog id="my_modal_1" class="modal">
<!-- 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">{$t('notes.note_editor')}</h3> <div class="modal-box w-11/12 max-w-3xl" role="dialog" on:keydown={handleKeydown} tabindex="0">
{#if initialName} <h3 class="font-bold text-2xl">
<p class="font-semibold text-md mb-2">{$t('notes.editing_note')} {initialName}</p> {#if note?.id && !isReadOnly}
{/if} <p class="font-semibold text-md mb-2">
{$t('notes.editing_note')}
{initialName}
</p>
{:else if !isReadOnly}
{$t('notes.note_editor')}
{:else}
{$t('notes.note_viewer')}
{/if}
</h3>
{#if (note && user?.uuid == note?.user_id) || (collection && user && collection.shared_with.includes(user.uuid)) || !note} <div class="modal-action items-center">
<form on:submit|preventDefault> <form method="post" style="width: 100%;" on:submit|preventDefault>
<div class="form-control mb-2"> <!-- Basic Information Section -->
<label for="name">{$t('adventures.name')}</label> <div class="collapse collapse-plus bg-base-200 mb-4">
<input <input type="checkbox" id="collapse-plus-1" checked />
type="text" <div class="collapse-title text-lg font-bold">
id="name" {$t('adventures.basic_information')}
class="input input-bordered w-full max-w-xs" </div>
bind:value={newNote.name} <div class="collapse-content">
/> <!-- Name Input -->
</div> <div class="form-control mb-2">
<div class="form-control mb-2"> <label for="name">{$t('adventures.name')}</label>
<label for="content">{$t('adventures.date')}</label> <input
<input type="text"
type="date" id="name"
id="date" readonly={isReadOnly}
name="date" class="input input-bordered w-full max-w-xs"
min={collection.start_date || ''} bind:value={newNote.name}
max={collection.end_date || ''} />
bind:value={newNote.date} </div>
class="input input-bordered w-full max-w-xs mt-1"
/> <!-- Date Input -->
</div> <div class="form-control mb-2">
<div class="form-control mb-2"> <label for="content">{$t('adventures.date')}</label>
<label for="content">{$t('notes.content')}</label> {#if collection && collection.start_date && collection.end_date && !isReadOnly}<label
<textarea class="label cursor-pointer flex items-start space-x-2"
id="content"
class="textarea textarea-bordered"
bind:value={newNote.content}
rows="5"
></textarea>
</div>
<div class="form-control mb-2">
<label for="content">{$t('adventures.links')}</label>
<input
type="url"
class="input input-bordered w-full mb-1"
placeholder="{$t('notes.add_a_link')} (e.g. https://example.com)"
bind:value={newLink}
on:keydown={(e) => {
if (e.key === 'Enter') {
e.preventDefault();
addLink();
}
}}
/>
<button type="button" class="btn btn-sm btn-primary" on:click={addLink}
>{$t('adventures.add')}</button
>
</div>
{#if newNote.links.length > 0}
<ul class="list-none">
{#each newNote.links as link, i}
<li class="mb-4">
<a href={link} class="link link-primary" target="_blank">{link}</a>
<button
type="button"
class="btn btn-sm btn-error absolute right-0 mr-4"
on:click={() => {
newNote.links = newNote.links.filter((_, index) => index !== i);
}}
> >
{$t('adventures.remove')} <span class="label-text">{$t('adventures.date_constrain')}</span>
</button> <input
</li> type="checkbox"
{/each} class="toggle toggle-primary"
</ul> id="constrain_dates"
{/if} name="constrain_dates"
on:change={() => (constrainDates = !constrainDates)}
/></label
>
{/if}
<input
type="date"
id="date"
name="date"
readonly={isReadOnly}
min={constrainDates ? collection.start_date : ''}
max={constrainDates ? collection.end_date : ''}
bind:value={newNote.date}
class="input input-bordered w-full max-w-xs mt-1"
/>
</div>
<!-- Content Textarea -->
<div>
<label for="content">{$t('notes.content')}</label><br />
{#if !isReadOnly}
<MarkdownEditor bind:text={newNote.content} editor_height={'h-32'} />
{:else if note}
<p class="text-sm text-muted-foreground" style="white-space: pre-wrap;"></p>
<article
class="prose overflow-auto h-full max-w-full p-4 border border-base-300 rounded-lg mb-4 mt-4"
>
{@html renderMarkdown(note.content || '')}
</article>
{/if}
</div>
<!-- Links Section -->
{#if !isReadOnly}
<div class="form-control mb-2">
<label for="content">{$t('adventures.links')}</label>
<input
type="url"
class="input input-bordered w-full mb-1"
placeholder="{$t('notes.add_a_link')} (e.g. https://example.com)"
bind:value={newLink}
on:keydown={(e) => {
if (e.key === 'Enter') {
e.preventDefault();
addLink();
}
}}
/>
<button type="button" class="btn btn-sm btn-primary mt-1" on:click={addLink}>
{$t('adventures.add')}
</button>
</div>
{/if}
<!-- Links List -->
{#if newNote.links.length > 0}
<ul class="list-none">
{#each newNote.links as link, i}
<li class="mb-4 flex justify-between items-center">
<a href={link} class="link link-primary" target="_blank">
{link}
</a>
<button
type="button"
class="btn btn-sm btn-error"
disabled={isReadOnly}
on:click={() => {
newNote.links = newNote.links.filter((_, index) => index !== i);
}}
>
{$t('adventures.remove')}
</button>
</li>
{/each}
</ul>
{/if}
</div>
</div>
<!-- Warning Message -->
{#if warning} {#if warning}
<div role="alert" class="alert alert-error"> <div role="alert" class="alert alert-error mb-4">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 shrink-0 stroke-current" class="h-6 w-6 shrink-0 stroke-current"
@ -201,11 +266,9 @@
</div> </div>
{/if} {/if}
<button class="btn btn-primary mr-1" on:click={save}>{$t('notes.save')}</button> <!-- Public Note Alert -->
<button class="btn btn-neutral" on:click={close}>{$t('about.close')}</button>
{#if collection.is_public} {#if collection.is_public}
<div role="alert" class="alert mt-4"> <div role="alert" class="alert mb-4">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
fill="none" fill="none"
@ -222,57 +285,17 @@
<span>{$t('notes.note_public')}</span> <span>{$t('notes.note_public')}</span>
</div> </div>
{/if} {/if}
</form>
{:else}
<form>
<div class="form-control mb-2">
<label for="name">{$t('adventures.public')}</label>
<input
type="text"
id="name"
class="input input-bordered w-full max-w-xs"
bind:value={newNote.name}
readonly
/>
</div>
<div class="form-control mb-2">
<label for="content">{$t('adventures.date')}</label>
<input
type="date"
id="date"
name="date"
min={collection.start_date || ''}
max={collection.end_date || ''}
bind:value={newNote.date}
class="input input-bordered w-full max-w-xs mt-1"
readonly
/>
</div>
<div class="form-control mb-2">
<label for="content">{$t('notes.content')}</label>
<textarea
id="content"
class="textarea textarea-bordered"
bind:value={newNote.content}
rows="5"
readonly
></textarea>
</div>
<div class="form-control mb-2">
<label for="content">{$t('adventures.links')}</label>
</div>
{#if newNote.links.length > 0}
<ul class="list-none">
{#each newNote.links as link, i}
<li class="mb-1">
<a href={link} target="_blank">{link}</a>
</li>
{/each}
</ul>
{/if}
<button class="btn btn-neutral" on:click={close}>{$t('about.close')}</button> <!-- Action Buttons -->
<div class="mt-4">
<button class="btn btn-neutral" on:click={close}>
{$t('about.close')}
</button>
<button class="btn btn-primary mr-1" disabled={isReadOnly} on:click={save}>
{$t('notes.save')}
</button>
</div>
</form> </form>
{/if} </div>
</div> </div>
</dialog> </dialog>

18
frontend/src/lib/components/ShareModal.svelte
View file

@ -24,7 +24,11 @@
}); });
if (res.ok) { if (res.ok) {
sharedWithUsers = sharedWithUsers.concat(user); sharedWithUsers = sharedWithUsers.concat(user);
collection.shared_with.push(user.uuid); if (collection.shared_with) {
collection.shared_with.push(user.uuid);
} else {
collection.shared_with = [user.uuid];
}
notSharedWithUsers = notSharedWithUsers.filter((u) => u.uuid !== user.uuid); notSharedWithUsers = notSharedWithUsers.filter((u) => u.uuid !== user.uuid);
addToast( addToast(
'success', 'success',
@ -42,7 +46,9 @@
}); });
if (res.ok) { if (res.ok) {
notSharedWithUsers = notSharedWithUsers.concat(user); notSharedWithUsers = notSharedWithUsers.concat(user);
collection.shared_with = collection.shared_with.filter((u) => u !== user.uuid); if (collection.shared_with) {
collection.shared_with = collection.shared_with.filter((u) => u !== user.uuid);
}
sharedWithUsers = sharedWithUsers.filter((u) => u.uuid !== user.uuid); sharedWithUsers = sharedWithUsers.filter((u) => u.uuid !== user.uuid);
addToast( addToast(
'success', 'success',
@ -60,8 +66,12 @@
if (res.ok) { if (res.ok) {
let data = await res.json(); let data = await res.json();
allUsers = data; allUsers = data;
sharedWithUsers = allUsers.filter((user) => collection.shared_with.includes(user.uuid)); sharedWithUsers = allUsers.filter((user) =>
notSharedWithUsers = allUsers.filter((user) => !collection.shared_with.includes(user.uuid)); (collection.shared_with ?? []).includes(user.uuid)
);
notSharedWithUsers = allUsers.filter(
(user) => !(collection.shared_with ?? []).includes(user.uuid)
);
console.log(sharedWithUsers); console.log(sharedWithUsers);
console.log(notSharedWithUsers); console.log(notSharedWithUsers);
} }

24
frontend/src/lib/components/TransportationCard.svelte
View file

@ -20,6 +20,25 @@
dispatch('edit', transportation); dispatch('edit', transportation);
} }
let unlinked: boolean = false;
// unlinked if collection.start_date and collection.end_date are not within transportation.date and transportation.end_date. check for null in the collection dates first to avoid errors
$: {
if (collection?.start_date && collection.end_date) {
const startOutsideRange =
transportation.date &&
collection.start_date < transportation.date &&
collection.end_date < transportation.date;
const endOutsideRange =
transportation.end_date &&
collection.start_date > transportation.end_date &&
collection.end_date > transportation.end_date;
unlinked = !!(startOutsideRange || endOutsideRange);
}
}
async function deleteTransportation() { async function deleteTransportation() {
let res = await fetch(`/api/transportations/${transportation.id}`, { let res = await fetch(`/api/transportations/${transportation.id}`, {
method: 'DELETE', method: 'DELETE',
@ -64,6 +83,9 @@
{/if} {/if}
</div> </div>
</div> </div>
{#if unlinked}
<div class="badge badge-error">{$t('adventures.out_of_range')}</div>
{/if}
<!-- Locations --> <!-- Locations -->
<div class="space-y-2"> <div class="space-y-2">
@ -100,7 +122,7 @@
</div> </div>
<!-- Actions --> <!-- 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 && collection.shared_with.includes(user.uuid))}
<div class="card-actions justify-end"> <div class="card-actions justify-end">
<button <button
class="btn btn-primary btn-sm flex items-center gap-1" class="btn btn-primary btn-sm flex items-center gap-1"

2
frontend/src/lib/types.ts
View file

@ -93,7 +93,7 @@ export type Collection = {
notes?: Note[]; notes?: Note[];
checklists?: Checklist[]; checklists?: Checklist[];
is_archived?: boolean; is_archived?: boolean;
shared_with: string[]; shared_with: string[] | undefined;
link?: string | null; link?: string | null;
}; };

4
frontend/src/locales/en.json
View file

@ -235,6 +235,7 @@
"download_calendar": "Download Calendar", "download_calendar": "Download Calendar",
"date_information": "Date Information", "date_information": "Date Information",
"flight_information": "Flight Information", "flight_information": "Flight Information",
"out_of_range": "Not in itinerary date range",
"preview": "Preview", "preview": "Preview",
"md_instructions": "Write your markdown here...", "md_instructions": "Write your markdown here...",
"days": "days", "days": "days",
@ -384,6 +385,7 @@
"open": "Open", "open": "Open",
"failed_to_save": "Failed to save note", "failed_to_save": "Failed to save note",
"note_editor": "Note Editor", "note_editor": "Note Editor",
"note_viewer": "Note Viewer",
"editing_note": "Editing note", "editing_note": "Editing note",
"content": "Content", "content": "Content",
"save": "Save", "save": "Save",
@ -396,7 +398,9 @@
"checklist_delete_error": "Error deleting checklist", "checklist_delete_error": "Error deleting checklist",
"failed_to_save": "Failed to save checklist", "failed_to_save": "Failed to save checklist",
"checklist_editor": "Checklist Editor", "checklist_editor": "Checklist Editor",
"checklist_viewer": "Checklist Viewer",
"editing_checklist": "Editing checklist", "editing_checklist": "Editing checklist",
"new_checklist": "New Checklist",
"item": "Item", "item": "Item",
"items": "Items", "items": "Items",
"add_item": "Add Item", "add_item": "Add Item",

43
frontend/src/routes/collections/+page.svelte
View file

@ -2,6 +2,7 @@
import { enhance } from '$app/forms'; import { enhance } from '$app/forms';
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import CollectionCard from '$lib/components/CollectionCard.svelte'; import CollectionCard from '$lib/components/CollectionCard.svelte';
import CollectionLink from '$lib/components/CollectionLink.svelte';
import CollectionModal from '$lib/components/CollectionModal.svelte'; import CollectionModal from '$lib/components/CollectionModal.svelte';
import NotFound from '$lib/components/NotFound.svelte'; import NotFound from '$lib/components/NotFound.svelte';
import type { Collection } from '$lib/types'; import type { Collection } from '$lib/types';
@ -73,26 +74,31 @@
collections = collections.filter((collection) => collection.id !== event.detail); collections = collections.filter((collection) => collection.id !== event.detail);
} }
function sort({ attribute, order }: { attribute: string; order: string }) { // function sort({ attribute, order }: { attribute: string; order: string }) {
currentSort.attribute = attribute; // currentSort.attribute = attribute;
currentSort.order = order; // currentSort.order = order;
if (attribute === 'name') { // if (attribute === 'name') {
if (order === 'asc') { // if (order === 'asc') {
collections = collections.sort((a, b) => b.name.localeCompare(a.name)); // collections = collections.sort((a, b) => b.name.localeCompare(a.name));
} else { // } else {
collections = collections.sort((a, b) => a.name.localeCompare(b.name)); // collections = collections.sort((a, b) => a.name.localeCompare(b.name));
} // }
} // }
} // }
let collectionToEdit: Collection | null = null; let collectionToEdit: Collection | null = null;
function deleteAdventure(event: CustomEvent<string>) { function saveOrCreate(event: CustomEvent<Collection>) {
collections = collections.filter((adventure) => adventure.id !== event.detail); if (collections.find((collection) => collection.id === event.detail.id)) {
} collections = collections.map((collection) => {
if (collection.id === event.detail.id) {
function createAdventure(event: CustomEvent<Collection>) { return event.detail;
collections = [event.detail, ...collections]; }
return collection;
});
} else {
collections = [event.detail, ...collections];
}
isShowingCollectionModal = false; isShowingCollectionModal = false;
} }
@ -123,6 +129,7 @@
{collectionToEdit} {collectionToEdit}
on:close={() => (isShowingCollectionModal = false)} on:close={() => (isShowingCollectionModal = false)}
on:saveEdit={saveEdit} on:saveEdit={saveEdit}
on:save={saveOrCreate}
/> />
{/if} {/if}
<div class="fixed bottom-4 right-4 z-[999]"> <div class="fixed bottom-4 right-4 z-[999]">
@ -256,6 +263,6 @@
</div> </div>
<svelte:head> <svelte:head>
<title>{$t(`navbar.collections`)}</title> <title>Collections</title>
<meta name="description" content="View your adventure collections." /> <meta name="description" content="View your adventure collections." />
</svelte:head> </svelte:head>

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

@ -315,7 +315,7 @@
</div> </div>
{/if} {/if}
{#if collection} {#if collection}
{#if data.user && data.user.uuid && (data.user.uuid == collection.user_id || collection.shared_with.includes(data.user.uuid)) && !collection.is_archived} {#if data.user && data.user.uuid && (data.user.uuid == collection.user_id || (collection.shared_with && collection.shared_with.includes(data.user.uuid))) && !collection.is_archived}
<div class="fixed bottom-4 right-4 z-[999]"> <div class="fixed bottom-4 right-4 z-[999]">
<div class="flex flex-row items-center justify-center gap-4"> <div class="flex flex-row items-center justify-center gap-4">
<div class="dropdown dropdown-top dropdown-end"> <div class="dropdown dropdown-top dropdown-end">
@ -428,7 +428,8 @@
{#if collection.description} {#if collection.description}
<div class="flex justify-center mt-4"> <div class="flex justify-center mt-4">
<article <article
class="prose overflow-auto h-96 max-w-full p-4 border border-base-300 rounded-lg bg-base-300" class="prose overflow-auto max-h-96 max-w-full p-4 border border-base-300 rounded-lg bg-base-300 mb-4"
style="overflow-y: auto;"
> >
{@html renderMarkdown(collection.description)} {@html renderMarkdown(collection.description)}
</article> </article>
@ -451,40 +452,42 @@
</div> </div>
{/if} {/if}
<div class="flex justify-center mx-auto"> {#if collection.start_date}
<!-- svelte-ignore a11y-missing-attribute --> <div class="flex justify-center mx-auto">
<div role="tablist" class="tabs tabs-boxed tabs-lg max-w-xl">
<!-- svelte-ignore a11y-missing-attribute --> <!-- svelte-ignore a11y-missing-attribute -->
<a <div role="tablist" class="tabs tabs-boxed tabs-lg max-w-xl">
role="tab" <!-- svelte-ignore a11y-missing-attribute -->
class="tab {currentView === 'itinerary' ? 'tab-active' : ''}" <a
tabindex="0" role="tab"
on:click={() => (currentView = 'itinerary')} class="tab {currentView === 'itinerary' ? 'tab-active' : ''}"
on:keydown={(e) => e.key === 'Enter' && (currentView = 'itinerary')}>Itinerary</a tabindex="0"
> on:click={() => (currentView = 'itinerary')}
<a on:keydown={(e) => e.key === 'Enter' && (currentView = 'itinerary')}>Itinerary</a
role="tab" >
class="tab {currentView === 'all' ? 'tab-active' : ''}" <a
tabindex="0" role="tab"
on:click={() => (currentView = 'all')} class="tab {currentView === 'all' ? 'tab-active' : ''}"
on:keydown={(e) => e.key === 'Enter' && (currentView = 'all')}>All Linked Items</a tabindex="0"
> on:click={() => (currentView = 'all')}
<a on:keydown={(e) => e.key === 'Enter' && (currentView = 'all')}>All Linked Items</a
role="tab" >
class="tab {currentView === 'calendar' ? 'tab-active' : ''}" <a
tabindex="0" role="tab"
on:click={() => (currentView = 'calendar')} class="tab {currentView === 'calendar' ? 'tab-active' : ''}"
on:keydown={(e) => e.key === 'Enter' && (currentView = 'calendar')}>Calendar</a tabindex="0"
> on:click={() => (currentView = 'calendar')}
<a on:keydown={(e) => e.key === 'Enter' && (currentView = 'calendar')}>Calendar</a
role="tab" >
class="tab {currentView === 'map' ? 'tab-active' : ''}" <a
tabindex="0" role="tab"
on:click={() => (currentView = 'map')} class="tab {currentView === 'map' ? 'tab-active' : ''}"
on:keydown={(e) => e.key === 'Enter' && (currentView = 'map')}>Map</a tabindex="0"
> on:click={() => (currentView = 'map')}
on:keydown={(e) => e.key === 'Enter' && (currentView = 'map')}>Map</a
>
</div>
</div> </div>
</div> {/if}
{#if currentView == 'all'} {#if currentView == 'all'}
{#if adventures.length > 0} {#if adventures.length > 0}
@ -559,6 +562,11 @@
{/each} {/each}
</div> </div>
{/if} {/if}
<!-- if none found -->
{#if adventures.length == 0 && transportations.length == 0 && notes.length == 0 && checklists.length == 0}
<NotFound error={undefined} />
{/if}
{/if} {/if}
{#if collection.start_date && collection.end_date} {#if collection.start_date && collection.end_date}