Docker/AdventureLog
Docker/AdventureLog
1
0
Fork 0
mirror of https://github.com/seanmorley15/AdventureLog.git synced 2025-07-19 21:09:37 +02:00
Code Issues Releases Activity

feat(collections): enhance collections page with sorting, filtering, and pagination features

Browse source 
- Updated the collections loading logic to include sorting and pagination parameters from the URL.
- Refactored the collections page to manage owned, shared, and archived collections with a tabbed interface.
- Added sorting functionality to allow users to sort collections by different attributes.
- Implemented a sidebar for filtering and sorting options.
- Improved the UI for better user experience, including a floating action button for creating new collections.
- Added a not found page for collections that do not exist, enhancing error handling.
This commit is contained in:
Sean Morley 2025-06-13 12:11:42 -04:00
parent 7eb96bcc2a
commit 14eb4ca802
23 changed files with 1691 additions and 1251 deletions
Download patch file Download diff file Expand all files Collapse all files

2
backend/server/adventures/serializers.py
View file

@ -209,8 +209,6 @@ class AdventureSerializer(CustomModelSerializer):
category_data = validated_data.pop('category', None) category_data = validated_data.pop('category', None)
collections_data = validated_data.pop('collections', None) collections_data = validated_data.pop('collections', None)
collections_add = validated_data.pop('collections_add', [])
collections_remove = validated_data.pop('collections_remove', [])
# Update regular fields # Update regular fields
for attr, value in validated_data.items(): for attr, value in validated_data.items():

3
backend/server/adventures/views/collection_view.py
View file

@ -55,7 +55,7 @@ class CollectionViewSet(viewsets.ModelViewSet):
# make sure the user is authenticated # make sure the user is authenticated
if not request.user.is_authenticated: if not request.user.is_authenticated:
return Response({"error": "User is not authenticated"}, status=400) return Response({"error": "User is not authenticated"}, status=400)
queryset = Collection.objects.filter(user_id=request.user.id) queryset = Collection.objects.filter(user_id=request.user.id, is_archived=False)
queryset = self.apply_sorting(queryset) queryset = self.apply_sorting(queryset)
collections = self.paginate_and_respond(queryset, request) collections = self.paginate_and_respond(queryset, request)
return collections return collections
@ -226,7 +226,6 @@ class CollectionViewSet(viewsets.ModelViewSet):
(Q(user_id=self.request.user.id) | Q(shared_with=self.request.user)) & Q(is_archived=False) (Q(user_id=self.request.user.id) | Q(shared_with=self.request.user)) & Q(is_archived=False)
).distinct() ).distinct()
def perform_create(self, serializer): def perform_create(self, serializer):
# This is ok because you cannot share a collection when creating it # This is ok because you cannot share a collection when creating it
serializer.save(user_id=self.request.user) serializer.save(user_id=self.request.user)

4
frontend/src/lib/components/AdventureModal.svelte
View file

@ -112,7 +112,6 @@
location: null, location: null,
images: [], images: [],
user_id: null, user_id: null,
collection: collection?.id || null,
category: { category: {
id: '', id: '',
name: '', name: '',
@ -138,7 +137,6 @@
location: adventureToEdit?.location || null, location: adventureToEdit?.location || null,
images: adventureToEdit?.images || [], images: adventureToEdit?.images || [],
user_id: adventureToEdit?.user_id || null, user_id: adventureToEdit?.user_id || null,
collection: adventureToEdit?.collection || collection?.id || null,
visits: adventureToEdit?.visits || [], visits: adventureToEdit?.visits || [],
is_visited: adventureToEdit?.is_visited || false, is_visited: adventureToEdit?.is_visited || false,
category: adventureToEdit?.category || { category: adventureToEdit?.category || {
@ -628,7 +626,7 @@
<p class="text-red-500">{wikiError}</p> <p class="text-red-500">{wikiError}</p>
</div> </div>
</div> </div>
{#if !adventure?.collection} {#if adventure.collections && adventure.collections.length == 0}
<div> <div>
<div class="form-control flex items-start mt-1"> <div class="form-control flex items-start mt-1">
<label class="label cursor-pointer flex items-start space-x-2"> <label class="label cursor-pointer flex items-start space-x-2">

2
frontend/src/lib/components/Avatar.svelte
View file

@ -25,7 +25,7 @@
<!-- svelte-ignore a11y-no-noninteractive-tabindex --> <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
<ul <ul
tabindex="0" tabindex="0"
class="dropdown-content z-[1] text-neutral-200 menu p-2 shadow bg-neutral mt-2 rounded-box w-52" class="dropdown-content z-[999] text-neutral-200 menu p-2 shadow bg-neutral mt-2 rounded-box w-52"
> >
<!-- svelte-ignore a11y-missing-attribute --> <!-- svelte-ignore a11y-missing-attribute -->
<!-- svelte-ignore a11y-missing-attribute --> <!-- svelte-ignore a11y-missing-attribute -->

125
frontend/src/lib/components/CollectionCard.svelte
View file

@ -9,7 +9,7 @@
import ShareVariant from '~icons/mdi/share-variant'; import ShareVariant from '~icons/mdi/share-variant';
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import type { Adventure, Collection } from '$lib/types'; import type { Adventure, Collection, User } from '$lib/types';
import { addToast } from '$lib/toasts'; import { addToast } from '$lib/toasts';
import { t } from 'svelte-i18n'; import { t } from 'svelte-i18n';
@ -25,6 +25,7 @@
export let type: String | undefined | null; export let type: String | undefined | null;
export let linkedCollectionList: string[] | null = null; export let linkedCollectionList: string[] | null = null;
export let user: User | null;
let isShareModalOpen: boolean = false; let isShareModalOpen: boolean = false;
function editAdventure() { function editAdventure() {
@ -168,76 +169,78 @@
<Launch class="w-4 h-4" /> <Launch class="w-4 h-4" />
{$t('adventures.open_details')} {$t('adventures.open_details')}
</button> </button>
<div class="dropdown dropdown-end"> {#if user && user.uuid == collection.user_id}
<button type="button" class="btn btn-square btn-sm btn-base-300"> <div class="dropdown dropdown-end">
<DotsHorizontal class="w-5 h-5" /> <button type="button" class="btn btn-square btn-sm btn-base-300">
</button> <DotsHorizontal class="w-5 h-5" />
<ul </button>
class="dropdown-content menu bg-base-100 rounded-box z-[1] w-64 p-2 shadow-xl border border-base-300" <ul
> class="dropdown-content menu bg-base-100 rounded-box z-[1] w-64 p-2 shadow-xl border border-base-300"
{#if type != 'viewonly'} >
<li> {#if type != 'viewonly'}
<button class="flex items-center gap-2" on:click={editAdventure}>
<FileDocumentEdit class="w-4 h-4" />
{$t('adventures.edit_collection')}
</button>
</li>
<li>
<button
class="flex items-center gap-2"
on:click={() => (isShareModalOpen = true)}
>
<ShareVariant class="w-4 h-4" />
{$t('adventures.share')}
</button>
</li>
{#if collection.is_archived}
<li> <li>
<button <button class="flex items-center gap-2" on:click={editAdventure}>
class="flex items-center gap-2" <FileDocumentEdit class="w-4 h-4" />
on:click={() => archiveCollection(false)} {$t('adventures.edit_collection')}
>
<ArchiveArrowUp class="w-4 h-4" />
{$t('adventures.unarchive')}
</button> </button>
</li> </li>
{:else}
<li> <li>
<button <button
class="flex items-center gap-2" class="flex items-center gap-2"
on:click={() => archiveCollection(true)} on:click={() => (isShareModalOpen = true)}
> >
<ArchiveArrowDown class="w-4 h-4" /> <ShareVariant class="w-4 h-4" />
{$t('adventures.archive')} {$t('adventures.share')}
</button>
</li>
{#if collection.is_archived}
<li>
<button
class="flex items-center gap-2"
on:click={() => archiveCollection(false)}
>
<ArchiveArrowUp class="w-4 h-4" />
{$t('adventures.unarchive')}
</button>
</li>
{:else}
<li>
<button
class="flex items-center gap-2"
on:click={() => archiveCollection(true)}
>
<ArchiveArrowDown class="w-4 h-4" />
{$t('adventures.archive')}
</button>
</li>
{/if}
<div class="divider my-1"></div>
<li>
<button
id="delete_collection"
data-umami-event="Delete Collection"
class="text-error flex items-center gap-2"
on:click={() => (isWarningModalOpen = true)}
>
<TrashCan class="w-4 h-4" />
{$t('adventures.delete')}
</button> </button>
</li> </li>
{/if} {/if}
<div class="divider my-1"></div> {#if type == 'viewonly'}
<li> <li>
<button <button
id="delete_collection" class="flex items-center gap-2"
data-umami-event="Delete Collection" on:click={() => goto(`/collections/${collection.id}`)}
class="text-error flex items-center gap-2" >
on:click={() => (isWarningModalOpen = true)} <Launch class="w-4 h-4" />
> {$t('adventures.open_details')}
<TrashCan class="w-4 h-4" /> </button>
{$t('adventures.delete')} </li>
</button> {/if}
</li> </ul>
{/if} </div>
{#if type == 'viewonly'} {/if}
<li>
<button
class="flex items-center gap-2"
on:click={() => goto(`/collections/${collection.id}`)}
>
<Launch class="w-4 h-4" />
{$t('adventures.open_details')}
</button>
</li>
{/if}
</ul>
</div>
</div> </div>
{/if} {/if}
</div> </div>

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

@ -219,6 +219,28 @@
{$t('about.close')} {$t('about.close')}
</button> </button>
</div> </div>
{#if collection.is_public && collection.id}
<div class="bg-neutral p-4 mt-2 rounded-md shadow-sm text-neutral-content">
<p class=" font-semibold">{$t('adventures.share_collection')}</p>
<div class="flex items-center justify-between">
<p class="text-card-foreground font-mono">
{window.location.origin}/collections/{collection.id}
</p>
<button
type="button"
on:click={() => {
navigator.clipboard.writeText(
`${window.location.origin}/collections/${collection.id}`
);
}}
class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-10 px-4 py-2"
>
{$t('adventures.copy_link')}
</button>
</div>
</div>
{/if}
</form> </form>
</div> </div>
</div> </div>

2
frontend/src/lib/components/Navbar.svelte
View file

@ -277,7 +277,7 @@
{#if data.user} {#if data.user}
<Avatar user={data.user} /> <Avatar user={data.user} />
{/if} {/if}
<div class="dropdown dropdown-bottom dropdown-end"> <div class="dropdown dropdown-bottom dropdown-end z-[999]">
<div tabindex="0" role="button" class="btn m-1 p-2"> <div tabindex="0" role="button" class="btn m-1 p-2">
<DotsHorizontal class="w-6 h-6" /> <DotsHorizontal class="w-6 h-6" />
</div> </div>

9
frontend/src/locales/de.json
View file

@ -273,7 +273,8 @@
"all_linked_items": "Alle verknüpften Elemente", "all_linked_items": "Alle verknüpften Elemente",
"itinerary": "Route", "itinerary": "Route",
"joined": "Verbunden", "joined": "Verbunden",
"view_profile": "Profil anzeigen" "view_profile": "Profil anzeigen",
"share_collection": "Teilen Sie diese Sammlung!"
}, },
"home": { "home": {
"desc_1": "Entdecken, planen und erkunden Sie mühelos", "desc_1": "Entdecken, planen und erkunden Sie mühelos",
@ -513,7 +514,8 @@
"social_auth_setup": "Social Authentication Setup", "social_auth_setup": "Social Authentication Setup",
"staff_status": "Personalstatus", "staff_status": "Personalstatus",
"staff_user": "Personalbenutzer", "staff_user": "Personalbenutzer",
"profile_info_desc": "Aktualisieren Sie Ihre persönlichen Daten und Ihr Profilbild" "profile_info_desc": "Aktualisieren Sie Ihre persönlichen Daten und Ihr Profilbild",
"email_verified_error_desc": "Ihre E -Mail konnte nicht überprüft werden. \nBitte versuchen Sie es erneut."
}, },
"checklist": { "checklist": {
"add_item": "Eintrag hinzufügen", "add_item": "Eintrag hinzufügen",
@ -540,7 +542,8 @@
"error_creating_collection": "Fehler beim Erstellen der Sammlung", "error_creating_collection": "Fehler beim Erstellen der Sammlung",
"error_editing_collection": "Fehler beim Bearbeiten der Sammlung", "error_editing_collection": "Fehler beim Bearbeiten der Sammlung",
"new_collection": "Neue Sammlung", "new_collection": "Neue Sammlung",
"public_collection": "Öffentliche Sammlung" "public_collection": "Öffentliche Sammlung",
"manage_collections": "Sammlungen verwalten"
}, },
"notes": { "notes": {
"add_a_link": "Fügen Sie einen Link hinzu", "add_a_link": "Fügen Sie einen Link hinzu",

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

@ -124,6 +124,7 @@
"distance": "Distance", "distance": "Distance",
"upload_images_here": "Upload images here", "upload_images_here": "Upload images here",
"share_adventure": "Share this Adventure!", "share_adventure": "Share this Adventure!",
"share_collection": "Share this Collection!",
"copy_link": "Copy Link", "copy_link": "Copy Link",
"sun_times": "Sun Times", "sun_times": "Sun Times",
"sunrise": "Sunrise", "sunrise": "Sunrise",
@ -404,6 +405,7 @@
"token_required": "Token and UID are required for password reset.", "token_required": "Token and UID are required for password reset.",
"reset_password": "Reset Password", "reset_password": "Reset Password",
"possible_reset": "If the email address you provided is associated with an account, you will receive an email with instructions to reset your password!", "possible_reset": "If the email address you provided is associated with an account, you will receive an email with instructions to reset your password!",
"email_verified_error_desc": "Your email could not be verified. Please try again.",
"missing_email": "Please enter an email address", "missing_email": "Please enter an email address",
"submit": "Submit", "submit": "Submit",
"password_does_not_match": "Passwords do not match", "password_does_not_match": "Passwords do not match",

13
frontend/src/locales/es.json
View file

@ -321,7 +321,8 @@
"all_linked_items": "Todos los artículos vinculados", "all_linked_items": "Todos los artículos vinculados",
"itinerary": "Itinerario", "itinerary": "Itinerario",
"joined": "Unido", "joined": "Unido",
"view_profile": "Ver perfil" "view_profile": "Ver perfil",
"share_collection": "¡Comparte esta colección!"
}, },
"worldtravel": { "worldtravel": {
"all": "Todo", "all": "Todo",
@ -413,7 +414,6 @@
"email_set_primary": "¡El correo electrónico se configuró como principal correctamente!", "email_set_primary": "¡El correo electrónico se configuró como principal correctamente!",
"email_set_primary_error": "Error al configurar el correo electrónico como principal", "email_set_primary_error": "Error al configurar el correo electrónico como principal",
"make_primary": "Hacer primario", "make_primary": "Hacer primario",
"no_email_set": "No hay correo electrónico configurado",
"not_verified": "No verificado", "not_verified": "No verificado",
"primary": "Principal", "primary": "Principal",
"verified": "Verificado", "verified": "Verificado",
@ -433,7 +433,6 @@
"reset_session_error": "Por favor cierre sesión y vuelva a iniciarla para actualizar su sesión e inténtelo nuevamente.", "reset_session_error": "Por favor cierre sesión y vuelva a iniciarla para actualizar su sesión e inténtelo nuevamente.",
"authenticator_code": "Código de autenticación", "authenticator_code": "Código de autenticación",
"email_verified": "¡Correo electrónico verificado exitosamente!", "email_verified": "¡Correo electrónico verificado exitosamente!",
"email_verified_error_desc": "Su correo electrónico no pudo ser verificado. \nPor favor, inténtalo de nuevo.",
"email_verified_error": "Error al verificar el correo electrónico", "email_verified_error": "Error al verificar el correo electrónico",
"email_verified_success": "Su correo electrónico ha sido verificado. \nAhora puedes iniciar sesión.", "email_verified_success": "Su correo electrónico ha sido verificado. \nAhora puedes iniciar sesión.",
"invalid_code": "Código MFA no válido", "invalid_code": "Código MFA no válido",
@ -513,7 +512,10 @@
"staff_status": "Estado del personal", "staff_status": "Estado del personal",
"staff_user": "Usuario de personal", "staff_user": "Usuario de personal",
"license": "Licencia", "license": "Licencia",
"all_rights_reserved": "Reservados todos los derechos." "all_rights_reserved": "Reservados todos los derechos.",
"email_verified_erorr_desc": "Su correo electrónico no pudo ser verificado. \nPor favor intente de nuevo.",
"email_verified_error_desc": "Su correo electrónico no pudo ser verificado. \nPor favor intente de nuevo.",
"no_emai_set": "Sin conjunto de correo electrónico"
}, },
"checklist": { "checklist": {
"add_item": "Añadir elemento", "add_item": "Añadir elemento",
@ -540,7 +542,8 @@
"error_creating_collection": "Error al crear la colección", "error_creating_collection": "Error al crear la colección",
"error_editing_collection": "Error al editar la colección", "error_editing_collection": "Error al editar la colección",
"new_collection": "Nueva colección", "new_collection": "Nueva colección",
"public_collection": "Colección pública" "public_collection": "Colección pública",
"manage_collections": "Gestionar colecciones"
}, },
"notes": { "notes": {
"add_a_link": "Agregar un enlace", "add_a_link": "Agregar un enlace",

9
frontend/src/locales/fr.json
View file

@ -273,7 +273,8 @@
"all_linked_items": "Tous les éléments liés", "all_linked_items": "Tous les éléments liés",
"itinerary": "Itinéraire", "itinerary": "Itinéraire",
"joined": "Joint", "joined": "Joint",
"view_profile": "Afficher le profil" "view_profile": "Afficher le profil",
"share_collection": "Partagez cette collection!"
}, },
"home": { "home": {
"desc_1": "Découvrez, planifiez et explorez en toute simplicité", "desc_1": "Découvrez, planifiez et explorez en toute simplicité",
@ -513,7 +514,8 @@
"disabled": "Désactivé", "disabled": "Désactivé",
"disconnected": "Déconnecté", "disconnected": "Déconnecté",
"email_management": "Gestion des e-mails", "email_management": "Gestion des e-mails",
"enter_last_name": "Entrez votre nom de famille" "enter_last_name": "Entrez votre nom de famille",
"email_verified_error_desc": "Votre e-mail n'a pas pu être vérifié. \nVeuillez réessayer."
}, },
"checklist": { "checklist": {
"add_item": "Ajouter un élément", "add_item": "Ajouter un élément",
@ -540,7 +542,8 @@
"error_creating_collection": "Erreur lors de la création de la collection", "error_creating_collection": "Erreur lors de la création de la collection",
"error_editing_collection": "Erreur lors de la modification de la collection", "error_editing_collection": "Erreur lors de la modification de la collection",
"new_collection": "Nouvelle collection", "new_collection": "Nouvelle collection",
"public_collection": "Collection publique" "public_collection": "Collection publique",
"manage_collections": "Gérer les collections"
}, },
"notes": { "notes": {
"add_a_link": "Ajouter un lien", "add_a_link": "Ajouter un lien",

9
frontend/src/locales/it.json
View file

@ -273,7 +273,8 @@
"all_linked_items": "Tutti gli elementi collegati", "all_linked_items": "Tutti gli elementi collegati",
"itinerary": "Itinerario", "itinerary": "Itinerario",
"joined": "Partecipato", "joined": "Partecipato",
"view_profile": "Visualizza il profilo" "view_profile": "Visualizza il profilo",
"share_collection": "Condividi questa collezione!"
}, },
"home": { "home": {
"desc_1": "Scopri, pianifica ed esplora con facilità", "desc_1": "Scopri, pianifica ed esplora con facilità",
@ -513,7 +514,8 @@
"social_auth_setup": "Setup di autenticazione sociale", "social_auth_setup": "Setup di autenticazione sociale",
"staff_status": "Stato del personale", "staff_status": "Stato del personale",
"staff_user": "Utente del personale", "staff_user": "Utente del personale",
"password_auth": "Autenticazione della password" "password_auth": "Autenticazione della password",
"email_verified_error_desc": "La tua email non poteva essere verificata. \nPer favore riprova."
}, },
"checklist": { "checklist": {
"add_item": "Aggiungi elemento", "add_item": "Aggiungi elemento",
@ -540,7 +542,8 @@
"collection_created": "Collezione creata con successo!", "collection_created": "Collezione creata con successo!",
"collection_edit_success": "Collezione modificata con successo!", "collection_edit_success": "Collezione modificata con successo!",
"create": "Creare", "create": "Creare",
"public_collection": "Collezione pubblica" "public_collection": "Collezione pubblica",
"manage_collections": "Gestisci collezioni"
}, },
"notes": { "notes": {
"add_a_link": "Aggiungi un collegamento", "add_a_link": "Aggiungi un collegamento",

9
frontend/src/locales/ko.json
View file

@ -273,7 +273,8 @@
"all_linked_items": "모든 링크 된 항목", "all_linked_items": "모든 링크 된 항목",
"itinerary": "여정", "itinerary": "여정",
"joined": "가입", "joined": "가입",
"view_profile": "프로필을 봅니다" "view_profile": "프로필을 봅니다",
"share_collection": "이 컬렉션을 공유하십시오!"
}, },
"auth": { "auth": {
"both_passwords_required": "두 암호 모두 필요합니다", "both_passwords_required": "두 암호 모두 필요합니다",
@ -336,7 +337,8 @@
"error_creating_collection": "컬렉션 생성 오류", "error_creating_collection": "컬렉션 생성 오류",
"error_editing_collection": "컬렉션 편집 오류", "error_editing_collection": "컬렉션 편집 오류",
"new_collection": "새로운 컬렉션", "new_collection": "새로운 컬렉션",
"public_collection": "공개 컬렉션" "public_collection": "공개 컬렉션",
"manage_collections": "컬렉션을 관리합니다"
}, },
"dashboard": { "dashboard": {
"add_some": "다음 모험을 계획해 보는게 어떨까요? 아래 버튼을 클릭하여 새로운 모험을 추가할 수 있습니다.", "add_some": "다음 모험을 계획해 보는게 어떨까요? 아래 버튼을 클릭하여 새로운 모험을 추가할 수 있습니다.",
@ -618,7 +620,8 @@
"social_auth_desc_1": "소셜 로그인 옵션 및 비밀번호 설정을 관리합니다", "social_auth_desc_1": "소셜 로그인 옵션 및 비밀번호 설정을 관리합니다",
"social_auth_setup": "소셜 인증 설정", "social_auth_setup": "소셜 인증 설정",
"staff_status": "직원 상태", "staff_status": "직원 상태",
"staff_user": "직원 사용자" "staff_user": "직원 사용자",
"email_verified_error_desc": "귀하의 이메일을 확인할 수 없습니다. \n다시 시도하십시오."
}, },
"share": { "share": {
"go_to_settings": "설정으로 이동", "go_to_settings": "설정으로 이동",

9
frontend/src/locales/nl.json
View file

@ -273,7 +273,8 @@
"all_linked_items": "Alle gekoppelde items", "all_linked_items": "Alle gekoppelde items",
"itinerary": "Routebeschrijving", "itinerary": "Routebeschrijving",
"joined": "Samengevoegd", "joined": "Samengevoegd",
"view_profile": "Bekijk profiel" "view_profile": "Bekijk profiel",
"share_collection": "Deel deze collectie!"
}, },
"home": { "home": {
"desc_1": "Ontdek, plan en verken met gemak", "desc_1": "Ontdek, plan en verken met gemak",
@ -513,7 +514,8 @@
"social_auth_setup": "Sociale authenticatie -opstelling", "social_auth_setup": "Sociale authenticatie -opstelling",
"staff_status": "Status", "staff_status": "Status",
"staff_user": "Personeelsgebruiker", "staff_user": "Personeelsgebruiker",
"connected": "Aangesloten" "connected": "Aangesloten",
"email_verified_error_desc": "Uw e -mail kan niet worden geverifieerd. \nProbeer het opnieuw."
}, },
"checklist": { "checklist": {
"add_item": "Artikel toevoegen", "add_item": "Artikel toevoegen",
@ -540,7 +542,8 @@
"error_creating_collection": "Fout bij aanmaken collectie", "error_creating_collection": "Fout bij aanmaken collectie",
"error_editing_collection": "Fout bij het bewerken van de collectie", "error_editing_collection": "Fout bij het bewerken van de collectie",
"new_collection": "Nieuwe collectie", "new_collection": "Nieuwe collectie",
"public_collection": "Openbare collectie" "public_collection": "Openbare collectie",
"manage_collections": "Beheer collecties"
}, },
"notes": { "notes": {
"add_a_link": "Voeg een link toe", "add_a_link": "Voeg een link toe",

9
frontend/src/locales/no.json
View file

@ -321,7 +321,8 @@
"all_linked_items": "Alle koblede varer", "all_linked_items": "Alle koblede varer",
"itinerary": "Reiserute", "itinerary": "Reiserute",
"joined": "Ble med", "joined": "Ble med",
"view_profile": "Vis profil" "view_profile": "Vis profil",
"share_collection": "Del denne samlingen!"
}, },
"worldtravel": { "worldtravel": {
"country_list": "Liste over land", "country_list": "Liste over land",
@ -513,7 +514,8 @@
"social_auth_desc_1": "Administrer sosiale påloggingsalternativer og passordinnstillinger", "social_auth_desc_1": "Administrer sosiale påloggingsalternativer og passordinnstillinger",
"social_auth_setup": "Sosial autentiseringsoppsett", "social_auth_setup": "Sosial autentiseringsoppsett",
"staff_status": "Personalstatus", "staff_status": "Personalstatus",
"staff_user": "Personalbruker" "staff_user": "Personalbruker",
"email_verified_error_desc": "E -posten din kunne ikke bekreftes. \nVennligst prøv igjen."
}, },
"collection": { "collection": {
"collection_created": "Samling opprettet!", "collection_created": "Samling opprettet!",
@ -523,7 +525,8 @@
"collection_edit_success": "Samling redigert!", "collection_edit_success": "Samling redigert!",
"error_editing_collection": "Feil ved redigering av samling", "error_editing_collection": "Feil ved redigering av samling",
"edit_collection": "Rediger samling", "edit_collection": "Rediger samling",
"public_collection": "Offentlig samling" "public_collection": "Offentlig samling",
"manage_collections": "Administrer samlinger"
}, },
"notes": { "notes": {
"note_deleted": "Notat slettet!", "note_deleted": "Notat slettet!",

9
frontend/src/locales/pl.json
View file

@ -321,7 +321,8 @@
"all_linked_items": "Wszystkie połączone elementy", "all_linked_items": "Wszystkie połączone elementy",
"itinerary": "Trasa", "itinerary": "Trasa",
"joined": "Dołączył", "joined": "Dołączył",
"view_profile": "Zobacz profil" "view_profile": "Zobacz profil",
"share_collection": "Udostępnij tę kolekcję!"
}, },
"worldtravel": { "worldtravel": {
"country_list": "Lista krajów", "country_list": "Lista krajów",
@ -513,7 +514,8 @@
"social_auth_desc_1": "Zarządzaj opcjami logowania społecznościowego i ustawieniami haseł", "social_auth_desc_1": "Zarządzaj opcjami logowania społecznościowego i ustawieniami haseł",
"social_auth_setup": "Konfiguracja uwierzytelniania społecznego", "social_auth_setup": "Konfiguracja uwierzytelniania społecznego",
"staff_status": "Status personelu", "staff_status": "Status personelu",
"staff_user": "Użytkownik personelu" "staff_user": "Użytkownik personelu",
"email_verified_error_desc": "Twój e -mail nie można zweryfikować. \nSpróbuj ponownie."
}, },
"collection": { "collection": {
"collection_created": "Kolekcja została pomyślnie utworzona!", "collection_created": "Kolekcja została pomyślnie utworzona!",
@ -523,7 +525,8 @@
"collection_edit_success": "Kolekcja została pomyślnie edytowana!", "collection_edit_success": "Kolekcja została pomyślnie edytowana!",
"error_editing_collection": "Błąd podczas edytowania kolekcji", "error_editing_collection": "Błąd podczas edytowania kolekcji",
"edit_collection": "Edytuj kolekcję", "edit_collection": "Edytuj kolekcję",
"public_collection": "Kolekcja publiczna" "public_collection": "Kolekcja publiczna",
"manage_collections": "Zarządzaj kolekcjami"
}, },
"notes": { "notes": {
"note_deleted": "Notatka została pomyślnie usunięta!", "note_deleted": "Notatka została pomyślnie usunięta!",

1457
frontend/src/locales/ru.json
View file

File diff suppressed because it is too large Load diff

9
frontend/src/locales/sv.json
View file

@ -273,7 +273,8 @@
"all_linked_items": "Alla länkade objekt", "all_linked_items": "Alla länkade objekt",
"itinerary": "Resväg", "itinerary": "Resväg",
"joined": "Gick med i", "joined": "Gick med i",
"view_profile": "Visa profil" "view_profile": "Visa profil",
"share_collection": "Dela denna samling!"
}, },
"home": { "home": {
"desc_1": "Upptäck, planera och utforska med lätthet", "desc_1": "Upptäck, planera och utforska med lätthet",
@ -513,7 +514,8 @@
"social_auth_desc_1": "Hantera sociala inloggningsalternativ och lösenordsinställningar", "social_auth_desc_1": "Hantera sociala inloggningsalternativ och lösenordsinställningar",
"social_auth_setup": "Social autentiseringsinställning", "social_auth_setup": "Social autentiseringsinställning",
"staff_status": "Personalstatus", "staff_status": "Personalstatus",
"staff_user": "Personalanvändare" "staff_user": "Personalanvändare",
"email_verified_error_desc": "Ditt e -postmeddelande kunde inte verifieras. \nFörsök igen."
}, },
"checklist": { "checklist": {
"add_item": "Lägg till objekt", "add_item": "Lägg till objekt",
@ -540,7 +542,8 @@
"error_creating_collection": "Det gick inte att skapa samlingen", "error_creating_collection": "Det gick inte att skapa samlingen",
"error_editing_collection": "Ett fel uppstod vid redigering av samling", "error_editing_collection": "Ett fel uppstod vid redigering av samling",
"new_collection": "Ny samling", "new_collection": "Ny samling",
"public_collection": "Offentlig samling" "public_collection": "Offentlig samling",
"manage_collections": "Hantera samlingar"
}, },
"notes": { "notes": {
"add_a_link": "Lägg till en länk", "add_a_link": "Lägg till en länk",

9
frontend/src/locales/zh.json
View file

@ -321,7 +321,8 @@
"all_linked_items": "所有链接的项目", "all_linked_items": "所有链接的项目",
"itinerary": "行程", "itinerary": "行程",
"joined": "加入", "joined": "加入",
"view_profile": "查看个人资料" "view_profile": "查看个人资料",
"share_collection": "分享这个收藏！"
}, },
"auth": { "auth": {
"forgot_password": "忘记密码？", "forgot_password": "忘记密码？",
@ -513,7 +514,8 @@
"staff_user": "员工用户", "staff_user": "员工用户",
"quick_actions": "快速动作", "quick_actions": "快速动作",
"region_updates": "区域更新", "region_updates": "区域更新",
"region_updates_desc": "更新访问了地区和城市" "region_updates_desc": "更新访问了地区和城市",
"email_verified_error_desc": "无法验证您的电子邮件。\n请重试。"
}, },
"checklist": { "checklist": {
"add_item": "添加项目", "add_item": "添加项目",
@ -540,7 +542,8 @@
"error_creating_collection": "创建合集时出错", "error_creating_collection": "创建合集时出错",
"error_editing_collection": "编辑合集时出错", "error_editing_collection": "编辑合集时出错",
"new_collection": "新建合集", "new_collection": "新建合集",
"public_collection": "公开合集" "public_collection": "公开合集",
"manage_collections": "管理收藏"
}, },
"notes": { "notes": {
"add_a_link": "添加链接", "add_a_link": "添加链接",

573
frontend/src/routes/adventures/+page.svelte
View file

@ -11,9 +11,17 @@
import { t } from 'svelte-i18n'; import { t } from 'svelte-i18n';
import Plus from '~icons/mdi/plus'; import Plus from '~icons/mdi/plus';
import Filter from '~icons/mdi/filter-variant';
import Sort from '~icons/mdi/sort';
import MapMarker from '~icons/mdi/map-marker';
import Eye from '~icons/mdi/eye';
import EyeOff from '~icons/mdi/eye-off';
import Calendar from '~icons/mdi/calendar';
import Star from '~icons/mdi/star';
import Tag from '~icons/mdi/tag';
import Compass from '~icons/mdi/compass';
export let data: any; export let data: any;
console.log(data);
let adventures: Adventure[] = data.props.adventures || []; let adventures: Adventure[] = data.props.adventures || [];
@ -27,16 +35,17 @@
}; };
let resultsPerPage: number = 25; let resultsPerPage: number = 25;
let count = data.props.count || 0; let count = data.props.count || 0;
let totalPages = Math.ceil(count / resultsPerPage); let totalPages = Math.ceil(count / resultsPerPage);
let currentPage: number = 1; let currentPage: number = 1;
let is_category_modal_open: boolean = false; let is_category_modal_open: boolean = false;
let typeString: string = ''; let typeString: string = '';
let adventureToEdit: Adventure | null = null;
let isAdventureModalOpen: boolean = false;
let sidebarOpen = false;
// Reactive statements
$: { $: {
if (typeof window !== 'undefined') { if (typeof window !== 'undefined') {
let url = new URL(window.location.href); let url = new URL(window.location.href);
@ -49,9 +58,7 @@
} }
} }
// sets typeString if present in the URL
$: { $: {
// check to make sure its running on the client side
if (typeof window !== 'undefined') { if (typeof window !== 'undefined') {
let url = new URL(window.location.href); let url = new URL(window.location.href);
let types = url.searchParams.get('types'); let types = url.searchParams.get('types');
@ -61,24 +68,6 @@
} }
} }
function handleChangePage(pageNumber: number) {
// let query = new URLSearchParams($page.url.searchParams.toString());
// query.set('page', pageNumber.toString());
// console.log(query.toString());
currentPage = pageNumber;
let url = new URL(window.location.href);
url.searchParams.set('page', pageNumber.toString());
adventures = [];
adventures = data.props.adventures;
goto(url.toString(), { invalidateAll: true, replaceState: true });
// goto(`?${query.toString()}`, { invalidateAll: true });
}
$: { $: {
let url = new URL($page.url); let url = new URL($page.url);
let page = url.searchParams.get('page'); let page = url.searchParams.get('page');
@ -128,14 +117,19 @@
} }
} }
let adventureToEdit: Adventure | null = null; function handleChangePage(pageNumber: number) {
let isAdventureModalOpen: boolean = false; currentPage = pageNumber;
let url = new URL(window.location.href);
url.searchParams.set('page', pageNumber.toString());
adventures = [];
adventures = data.props.adventures;
goto(url.toString(), { invalidateAll: true, replaceState: true });
}
function deleteAdventure(event: CustomEvent<string>) { function deleteAdventure(event: CustomEvent<string>) {
adventures = adventures.filter((adventure) => adventure.id !== event.detail); adventures = adventures.filter((adventure) => adventure.id !== event.detail);
} }
// function that save changes to an existing adventure or creates a new one if it doesn't exist
function saveOrCreate(event: CustomEvent<Adventure>) { function saveOrCreate(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) => {
@ -155,13 +149,24 @@
isAdventureModalOpen = true; isAdventureModalOpen = true;
} }
let sidebarOpen = false;
function toggleSidebar() { function toggleSidebar() {
sidebarOpen = !sidebarOpen; sidebarOpen = !sidebarOpen;
} }
function getVisitedCount() {
return adventures.filter((a) => a.is_visited).length;
}
function getPlannedCount() {
return adventures.filter((a) => !a.is_visited).length;
}
</script> </script>
<svelte:head>
<title>{$t('navbar.adventures')}</title>
<meta name="description" content="View your completed and planned adventures." />
</svelte:head>
{#if isAdventureModalOpen} {#if isAdventureModalOpen}
<AdventureModal <AdventureModal
{adventureToEdit} {adventureToEdit}
@ -174,212 +179,336 @@
<CategoryModal on:close={() => (is_category_modal_open = false)} /> <CategoryModal on:close={() => (is_category_modal_open = false)} />
{/if} {/if}
<div class="fixed bottom-4 right-4 z-[999]"> <div class="min-h-screen bg-gradient-to-br from-base-200 via-base-100 to-base-200">
<div class="flex flex-row items-center justify-center gap-4"> <div class="drawer lg:drawer-open">
<input id="my-drawer" type="checkbox" class="drawer-toggle" bind:checked={sidebarOpen} />
<div class="drawer-content">
<!-- Header Section -->
<div class="sticky top-0 z-40 bg-base-100/80 backdrop-blur-lg border-b border-base-300">
<div class="container mx-auto px-6 py-4">
<div class="flex items-center justify-between">
<div class="flex items-center gap-4">
<button class="btn btn-ghost btn-square lg:hidden" on:click={toggleSidebar}>
<Filter class="w-5 h-5" />
</button>
<div class="flex items-center gap-3">
<div class="p-2 bg-primary/10 rounded-xl">
<Compass class="w-8 h-8 text-primary" />
</div>
<div>
<h1
class="text-3xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent"
>
{$t('navbar.my_adventures')}
</h1>
<p class="text-sm text-base-content/60">
{count} adventures • {getVisitedCount()} visited • {getPlannedCount()} planned
</p>
</div>
</div>
</div>
<!-- Quick Stats -->
<div class="hidden md:flex items-center gap-3">
<div class="stats stats-horizontal bg-base-200/50 border border-base-300/50">
<div class="stat py-2 px-4">
<div class="stat-figure text-primary">
<Eye class="w-5 h-5" />
</div>
<div class="stat-title text-xs">Visited</div>
<div class="stat-value text-lg">{getVisitedCount()}</div>
</div>
<div class="stat py-2 px-4">
<div class="stat-figure text-secondary">
<Calendar class="w-5 h-5" />
</div>
<div class="stat-title text-xs">Planned</div>
<div class="stat-value text-lg">{getPlannedCount()}</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Main Content -->
<div class="container mx-auto px-6 py-8">
{#if adventures.length === 0}
<div class="flex flex-col items-center justify-center py-16">
<div class="p-6 bg-base-200/50 rounded-2xl mb-6">
<Compass class="w-16 h-16 text-base-content/30" />
</div>
<h3 class="text-xl font-semibold text-base-content/70 mb-2">No adventures yet</h3>
<p class="text-base-content/50 text-center max-w-md">
Start documenting your adventures and planning new ones. Every journey has a story
worth telling.
</p>
<button
class="btn btn-primary btn-wide mt-6 gap-2"
on:click={() => {
adventureToEdit = null;
isAdventureModalOpen = true;
}}
>
<Plus class="w-5 h-5" />
Create Adventure
</button>
</div>
{:else}
<!-- Adventures Grid -->
<div
class="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-6"
>
{#each adventures as adventure}
<AdventureCard
user={data.user}
{adventure}
on:delete={deleteAdventure}
on:edit={editAdventure}
/>
{/each}
</div>
<!-- Pagination -->
{#if totalPages > 1}
<div class="flex justify-center mt-12">
<div class="join bg-base-100 shadow-lg rounded-2xl p-2">
{#each Array.from({ length: totalPages }, (_, i) => i + 1) as page}
<button
class="join-item btn btn-sm {currentPage === page
? 'btn-primary'
: 'btn-ghost'}"
on:click={() => handleChangePage(page)}
>
{page}
</button>
{/each}
</div>
</div>
{/if}
{/if}
</div>
</div>
<!-- Sidebar -->
<div class="drawer-side z-50">
<label for="my-drawer" class="drawer-overlay"></label>
<div class="w-80 min-h-full bg-base-100 shadow-2xl">
<div class="p-6">
<!-- Sidebar Header -->
<div class="flex items-center gap-3 mb-8">
<div class="p-2 bg-primary/10 rounded-lg">
<Filter class="w-6 h-6 text-primary" />
</div>
<h2 class="text-xl font-bold">Filters & Sort</h2>
</div>
<!-- Filters Form -->
<form method="get" class="space-y-6">
<!-- Category Filter -->
<div class="card bg-base-200/50 p-4">
<h3 class="font-semibold text-lg mb-4 flex items-center gap-2">
<Tag class="w-5 h-5" />
Categories
</h3>
<CategoryFilterDropdown bind:types={typeString} />
<button
type="button"
on:click={() => (is_category_modal_open = true)}
class="btn btn-outline btn-sm w-full mt-3 gap-2"
>
<Tag class="w-4 h-4" />
{$t('categories.manage_categories')}
</button>
</div>
<!-- Sort Options -->
<div class="card bg-base-200/50 p-4">
<h3 class="font-semibold text-lg mb-4 flex items-center gap-2">
<Sort class="w-5 h-5" />
{$t('adventures.sort')}
</h3>
<div class="space-y-4">
<div>
<label class="label">
<span class="label-text font-medium">{$t('adventures.order_direction')}</span>
</label>
<div class="join w-full">
<input
class="join-item btn btn-sm flex-1"
type="radio"
name="order_direction"
id="asc"
value="asc"
aria-label={$t('adventures.ascending')}
checked={currentSort.order === 'asc'}
/>
<input
class="join-item btn btn-sm flex-1"
type="radio"
name="order_direction"
id="desc"
value="desc"
aria-label={$t('adventures.descending')}
checked={currentSort.order === 'desc'}
/>
</div>
</div>
<div>
<label class="label">
<span class="label-text font-medium">{$t('adventures.order_by')}</span>
</label>
<div class="grid grid-cols-2 gap-2">
<label
class="label cursor-pointer justify-start gap-2 p-2 rounded-lg hover:bg-base-300/50"
>
<input
type="radio"
name="order_by"
value="updated_at"
class="radio radio-primary radio-sm"
checked={currentSort.order_by === 'updated_at'}
/>
<span class="label-text text-sm">{$t('adventures.updated')}</span>
</label>
<label
class="label cursor-pointer justify-start gap-2 p-2 rounded-lg hover:bg-base-300/50"
>
<input
type="radio"
name="order_by"
value="name"
class="radio radio-primary radio-sm"
checked={currentSort.order_by === 'name'}
/>
<span class="label-text text-sm">{$t('adventures.name')}</span>
</label>
<label
class="label cursor-pointer justify-start gap-2 p-2 rounded-lg hover:bg-base-300/50"
>
<input
type="radio"
name="order_by"
value="date"
class="radio radio-primary radio-sm"
checked={currentSort.order_by === 'date'}
/>
<span class="label-text text-sm">{$t('adventures.date')}</span>
</label>
<label
class="label cursor-pointer justify-start gap-2 p-2 rounded-lg hover:bg-base-300/50"
>
<input
type="radio"
name="order_by"
value="rating"
class="radio radio-primary radio-sm"
checked={currentSort.order_by === 'rating'}
/>
<span class="label-text text-sm">{$t('adventures.rating')}</span>
</label>
</div>
</div>
</div>
</div>
<!-- Visit Status Filter -->
<div class="card bg-base-200/50 p-4">
<h3 class="font-semibold text-lg mb-4 flex items-center gap-2">
<Eye class="w-5 h-5" />
{$t('adventures.visited')}
</h3>
<div class="join w-full">
<input
class="join-item btn btn-sm flex-1"
type="radio"
name="is_visited"
id="all"
value="all"
aria-label={$t('adventures.all')}
checked={currentSort.is_visited === 'all'}
/>
<input
class="join-item btn btn-sm flex-1"
type="radio"
name="is_visited"
id="true"
value="true"
aria-label={$t('adventures.visited')}
checked={currentSort.is_visited === 'true'}
/>
<input
class="join-item btn btn-sm flex-1"
type="radio"
name="is_visited"
id="false"
value="false"
aria-label={$t('adventures.not_visited')}
checked={currentSort.is_visited === 'false'}
/>
</div>
</div>
<!-- Sources Filter -->
<div class="card bg-base-200/50 p-4">
<h3 class="font-semibold text-lg mb-4 flex items-center gap-2">
<MapMarker class="w-5 h-5" />
{$t('adventures.sources')}
</h3>
<label class="label cursor-pointer justify-start gap-3">
<input
type="checkbox"
name="include_collections"
id="include_collections"
class="checkbox checkbox-primary"
checked={currentSort.includeCollections}
/>
<span class="label-text">{$t('adventures.collection_adventures')}</span>
</label>
</div>
<button type="submit" class="btn btn-primary w-full gap-2">
<Filter class="w-4 h-4" />
{$t('adventures.filter')}
</button>
</form>
</div>
</div>
</div>
</div>
<!-- Floating Action Button -->
<div class="fixed bottom-6 right-6 z-50">
<div class="dropdown dropdown-top dropdown-end"> <div class="dropdown dropdown-top dropdown-end">
<div tabindex="0" role="button" class="btn m-1 size-16 btn-primary"> <div
tabindex="0"
role="button"
class="btn btn-primary btn-circle w-16 h-16 shadow-2xl hover:shadow-primary/25 transition-all duration-200"
>
<Plus class="w-8 h-8" /> <Plus class="w-8 h-8" />
</div> </div>
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
<ul <ul
tabindex="0" tabindex="0"
class="dropdown-content z-[1] menu p-4 shadow bg-base-300 text-base-content rounded-box w-52 gap-4" class="dropdown-content z-[1] menu p-4 shadow-2xl bg-base-100 rounded-2xl w-64 border border-base-300"
> >
<p class="text-center font-bold text-lg">{$t('adventures.create_new')}</p> <div class="text-center mb-4">
<h3 class="font-bold text-lg">{$t('adventures.create_new')}</h3>
<p class="text-sm text-base-content/60">Document your journey</p>
</div>
<button <button
class="btn btn-primary" class="btn btn-primary gap-2 w-full"
on:click={() => { on:click={() => {
isAdventureModalOpen = true; isAdventureModalOpen = true;
adventureToEdit = null; adventureToEdit = null;
}} }}
> >
{$t('adventures.adventure')}</button <Compass class="w-5 h-5" />
> {$t('adventures.adventure')}
</button>
<!-- <button
class="btn btn-primary"
on:click={() => (isShowingNewTrip = true)}>Trip Planner</button
> -->
</ul> </ul>
</div> </div>
</div> </div>
</div> </div>
<div class="drawer lg:drawer-open">
<input id="my-drawer" type="checkbox" class="drawer-toggle" bind:checked={sidebarOpen} />
<div class="drawer-content">
<!-- Page content -->
<h1 class="text-center font-bold text-4xl mb-2">{$t('navbar.my_adventures')}</h1>
<p class="text-center">{count} {$t('adventures.count_txt')}</p>
{#if adventures.length === 0}
<NotFound error={undefined} />
{/if}
<div class="p-4">
<button
class="btn btn-primary drawer-button lg:hidden mb-4 fixed bottom-0 left-0 ml-2 z-[999]"
on:click={toggleSidebar}
>
{sidebarOpen ? $t(`adventures.close_filters`) : $t(`adventures.open_filters`)}
</button>
<div class="flex flex-wrap gap-4 mr-4 justify-center content-center">
{#each adventures as adventure}
<AdventureCard
user={data.user}
{adventure}
on:delete={deleteAdventure}
on:edit={editAdventure}
/>
{/each}
</div>
<div class="join flex items-center justify-center mt-4">
{#if totalPages > 1}
<div class="join">
{#each Array.from({ length: totalPages }, (_, i) => i + 1) as page}
{#if currentPage != page}
<button class="join-item btn btn-lg" on:click={() => handleChangePage(page)}
>{page}</button
>
{:else}
<button class="join-item btn btn-lg btn-active">{page}</button>
{/if}
{/each}
</div>
{/if}
</div>
</div>
</div>
<div class="drawer-side">
<label for="my-drawer" class="drawer-overlay"></label>
<ul class="menu p-4 w-80 h-full bg-base-200 text-base-content rounded-lg">
<!-- Sidebar content here -->
<div class="form-control">
<!-- <h3 class="text-center font-bold text-lg mb-4">Adventure Types</h3> -->
<form method="get">
<CategoryFilterDropdown bind:types={typeString} />
<button
on:click={() => (is_category_modal_open = true)}
class="btn btn-neutral btn-sm min-w-full">{$t('categories.manage_categories')}</button
>
<div class="divider"></div>
<h3 class="text-center font-bold text-lg mb-4">{$t('adventures.sort')}</h3>
<p class="text-lg font-semibold mb-2">{$t('adventures.order_direction')}</p>
<div class="join">
<input
class="join-item btn btn-neutral"
type="radio"
name="order_direction"
id="asc"
value="asc"
aria-label={$t('adventures.ascending')}
checked={currentSort.order === 'asc'}
/>
<input
class="join-item btn btn-neutral"
type="radio"
name="order_direction"
id="desc"
value="desc"
aria-label={$t('adventures.descending')}
checked={currentSort.order === 'desc'}
/>
</div>
<br />
<p class="text-lg font-semibold mt-2 mb-2">{$t('adventures.order_by')}</p>
<div class="flex flex-wrap gap-2">
<input
class="btn btn-neutral text-wrap"
type="radio"
name="order_by"
id="updated_at"
value="updated_at"
aria-label={$t('adventures.updated')}
checked={currentSort.order_by === 'updated_at'}
/>
<input
class="btn btn-neutral text-wrap"
type="radio"
name="order_by"
id="name"
aria-label={$t('adventures.name')}
value="name"
checked={currentSort.order_by === 'name'}
/>
<input
class="btn btn-neutral text-wrap"
type="radio"
value="date"
name="order_by"
id="date"
aria-label={$t('adventures.date')}
checked={currentSort.order_by === 'date'}
/>
<input
class="btn btn-neutral text-wrap"
type="radio"
name="order_by"
id="rating"
aria-label={$t('adventures.rating')}
value="rating"
checked={currentSort.order_by === 'rating'}
/>
</div>
<!-- is visited true false or all -->
<p class="text-lg font-semibold mt-2 mb-2">{$t('adventures.visited')}</p>
<div class="join">
<input
class="join-item btn btn-neutral"
type="radio"
name="is_visited"
id="all"
value="all"
aria-label={$t('adventures.all')}
checked={currentSort.is_visited === 'all'}
/>
<input
class="join-item btn btn-neutral"
type="radio"
name="is_visited"
id="true"
value="true"
aria-label={$t('adventures.visited')}
checked={currentSort.is_visited === 'true'}
/>
<input
class="join-item btn btn-neutral"
type="radio"
name="is_visited"
id="false"
value="false"
aria-label={$t('adventures.not_visited')}
checked={currentSort.is_visited === 'false'}
/>
</div>
<div class="divider"></div>
<div class="form-control">
<p class="text-lg font-semibold mb-2">{$t('adventures.sources')}</p>
<label class="label cursor-pointer">
<span class="label-text">{$t('adventures.collection_adventures')}</span>
<input
type="checkbox"
name="include_collections"
id="include_collections"
class="checkbox checkbox-primary"
checked={currentSort.includeCollections}
/>
</label>
<button type="submit" class="btn btn-success mt-4">{$t('adventures.filter')}</button>
</div>
</form>
</div>
</ul>
</div>
</div>
<svelte:head>
<title>{$t('navbar.adventures')}</title>
<meta name="description" content="View your completed and planned adventures." />
</svelte:head>

55
frontend/src/routes/collections/+page.server.ts
View file

@ -3,7 +3,7 @@ import type { PageServerLoad } from './$types';
const PUBLIC_SERVER_URL = process.env['PUBLIC_SERVER_URL']; const PUBLIC_SERVER_URL = process.env['PUBLIC_SERVER_URL'];
import type { Adventure, Collection } from '$lib/types'; import type { Adventure, Collection } from '$lib/types';
import type { Actions, RequestEvent } from '@sveltejs/kit'; import type { Actions } from '@sveltejs/kit';
import { fetchCSRFToken } from '$lib/index.server'; import { fetchCSRFToken } from '$lib/index.server';
import { checkLink } from '$lib'; import { checkLink } from '$lib';
@ -16,16 +16,27 @@ export const load = (async (event) => {
let next = null; let next = null;
let previous = null; let previous = null;
let count = 0; let count = 0;
let adventures: Adventure[] = []; let collections: Adventure[] = [];
let sessionId = event.cookies.get('sessionid'); let sessionId = event.cookies.get('sessionid');
let initialFetch = await fetch(`${serverEndpoint}/api/collections/?order_by=updated_at`, {
// Get sorting parameters from URL
const order_by = event.url.searchParams.get('order_by') || 'updated_at';
const order_direction = event.url.searchParams.get('order_direction') || 'desc';
const page = event.url.searchParams.get('page') || '1';
// Build API URL with parameters
let apiUrl = `${serverEndpoint}/api/collections/?order_by=${order_by}&order_direction=${order_direction}&page=${page}`;
console.log('Fetching collections from:', apiUrl);
let initialFetch = await fetch(apiUrl, {
headers: { headers: {
Cookie: `sessionid=${sessionId}` Cookie: `sessionid=${sessionId}`
}, },
credentials: 'include' credentials: 'include'
}); });
if (!initialFetch.ok) { if (!initialFetch.ok) {
console.error('Failed to fetch visited adventures'); console.error('Failed to fetch collections');
return redirect(302, '/login'); return redirect(302, '/login');
} else { } else {
let res = await initialFetch.json(); let res = await initialFetch.json();
@ -33,15 +44,45 @@ export const load = (async (event) => {
next = res.next; next = res.next;
previous = res.previous; previous = res.previous;
count = res.count; count = res.count;
adventures = [...adventures, ...visited]; collections = [...collections, ...visited];
} }
let sharedRes = await fetch(`${serverEndpoint}/api/collections/shared/`, {
headers: {
Cookie: `sessionid=${sessionId}`
}
});
if (!sharedRes.ok) {
console.error('Failed to fetch shared collections');
return redirect(302, '/login');
}
let sharedCollections = (await sharedRes.json()) as Collection[];
let archivedRes = await fetch(`${serverEndpoint}/api/collections/archived/`, {
headers: {
Cookie: `sessionid=${sessionId}`
}
});
if (!archivedRes.ok) {
console.error('Failed to fetch archived collections');
return redirect(302, '/login');
}
let archivedCollections = (await archivedRes.json()) as Collection[];
// Calculate current page from URL
const currentPage = parseInt(page);
return { return {
props: { props: {
adventures, adventures: collections,
next, next,
previous, previous,
count count,
sharedCollections,
currentPage,
order_by,
order_direction,
archivedCollections
} }
}; };
} }

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

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { enhance } from '$app/forms';
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import { page } from '$app/stores';
import CollectionCard from '$lib/components/CollectionCard.svelte'; import CollectionCard from '$lib/components/CollectionCard.svelte';
import CollectionLink from '$lib/components/CollectionLink.svelte'; import CollectionLink from '$lib/components/CollectionLink.svelte';
import CollectionModal from '$lib/components/CollectionModal.svelte'; import CollectionModal from '$lib/components/CollectionModal.svelte';
@ -9,82 +9,128 @@
import { t } from 'svelte-i18n'; import { t } from 'svelte-i18n';
import Plus from '~icons/mdi/plus'; import Plus from '~icons/mdi/plus';
import Filter from '~icons/mdi/filter-variant';
import Sort from '~icons/mdi/sort';
import Archive from '~icons/mdi/archive';
import Share from '~icons/mdi/share-variant';
import CollectionIcon from '~icons/mdi/folder-multiple';
export let data: any; export let data: any;
console.log(data); console.log('Collections page data:', data);
let collections: Collection[] = data.props.adventures || []; let collections: Collection[] = data.props.adventures || [];
let sharedCollections: Collection[] = data.props.sharedCollections || [];
let archivedCollections: Collection[] = data.props.archivedCollections || [];
let newType: string = ''; let newType: string = '';
let resultsPerPage: number = 25; let resultsPerPage: number = 25;
let isShowingCollectionModal: boolean = false; let isShowingCollectionModal: boolean = false;
let activeView: 'owned' | 'shared' | 'archived' = 'owned';
let next: string | null = data.props.next || null; let next: string | null = data.props.next || null;
let previous: string | null = data.props.previous || null; let previous: string | null = data.props.previous || null;
let count = data.props.count || 0; let count = data.props.count || 0;
let totalPages = Math.ceil(count / resultsPerPage); let totalPages = Math.ceil(count / resultsPerPage);
let currentPage: number = 1; let currentPage: number = data.props.currentPage || 1;
let orderBy = data.props.order_by || 'updated_at';
let orderDirection = data.props.order_direction || 'asc';
let sidebarOpen = false;
let collectionToEdit: Collection | null = null;
$: currentCollections =
activeView === 'owned'
? collections
: activeView === 'shared'
? sharedCollections
: activeView === 'archived'
? archivedCollections
: [];
$: currentCount =
activeView === 'owned'
? collections.length
: activeView === 'shared'
? sharedCollections.length
: activeView === 'archived'
? archivedCollections.length
: 0;
// Optionally, keep count in sync with collections only for owned view
$: { $: {
if (count != collections.length) { if (activeView === 'owned' && count !== collections.length) {
count = collections.length; count = collections.length;
} }
} }
function handleChangePage() { // Reactive statements to update collections based on props
return async ({ result }: any) => { $: {
if (result.type === 'success') { if (data.props.adventures) {
console.log(result.data); collections = data.props.adventures;
collections = result.data.body.adventures as Collection[]; }
next = result.data.body.next; if (data.props.archivedCollections) {
previous = result.data.body.previous; archivedCollections = data.props.archivedCollections;
count = result.data.body.count; }
currentPage = result.data.body.page;
totalPages = Math.ceil(count / resultsPerPage);
}
};
} }
function handleSubmit() { function goToPage(pageNum: number) {
return async ({ result, update }: any) => { const url = new URL($page.url);
// First, call the update function with reset: false url.searchParams.set('page', pageNum.toString());
update({ reset: false }); goto(url.toString(), { invalidateAll: true, replaceState: true });
}
// Then, handle the result function updateSort(by: string, direction: string) {
if (result.type === 'success') { const url = new URL($page.url);
if (result.data) { url.searchParams.set('order_by', by);
// console.log(result.data); url.searchParams.set('order_direction', direction);
collections = result.data.adventures as Collection[]; url.searchParams.set('page', '1'); // Reset to first page when sorting changes
next = result.data.next; goto(url.toString(), { invalidateAll: true, replaceState: true });
previous = result.data.previous;
count = result.data.count;
totalPages = Math.ceil(count / resultsPerPage);
currentPage = 1;
console.log(next);
}
}
};
} }
function deleteCollection(event: CustomEvent<string>) { function deleteCollection(event: CustomEvent<string>) {
collections = collections.filter((collection) => collection.id !== event.detail); const collectionId = event.detail;
collections = collections.filter((collection) => collection.id !== collectionId);
sharedCollections = sharedCollections.filter((collection) => collection.id !== collectionId);
archivedCollections = archivedCollections.filter(
(collection) => collection.id !== collectionId
);
} }
// function sort({ attribute, order }: { attribute: string; order: string }) { function archiveCollection(event: CustomEvent<string>) {
// currentSort.attribute = attribute; const collectionId = event.detail;
// currentSort.order = order; // Find the collection in owned collections
// if (attribute === 'name') { const collectionToArchive = collections.find((collection) => collection.id === collectionId);
// if (order === 'asc') {
// collections = collections.sort((a, b) => b.name.localeCompare(a.name));
// } else {
// collections = collections.sort((a, b) => a.name.localeCompare(b.name));
// }
// }
// }
let collectionToEdit: Collection | null = null; if (collectionToArchive) {
// Remove from owned collections
collections = collections.filter((collection) => collection.id !== collectionId);
// Add to archived collections
archivedCollections = [...archivedCollections, { ...collectionToArchive, is_archived: true }];
// Automatically switch to archived tab to show the archived item
activeView = 'archived';
}
}
function unarchiveCollection(event: CustomEvent<string>) {
const collectionId = event.detail;
// Find the collection in archived collections
const collectionToUnarchive = archivedCollections.find(
(collection) => collection.id === collectionId
);
if (collectionToUnarchive) {
// Remove from archived collections
archivedCollections = archivedCollections.filter(
(collection) => collection.id !== collectionId
);
// Add to owned collections
collections = [...collections, { ...collectionToUnarchive, is_archived: false }];
// Automatically switch to owned tab to show the unarchived item
activeView = 'owned';
}
}
function saveOrCreate(event: CustomEvent<Collection>) { function saveOrCreate(event: CustomEvent<Collection>) {
if (collections.find((collection) => collection.id === event.detail.id)) { if (collections.find((collection) => collection.id === event.detail.id)) {
@ -115,13 +161,20 @@
isShowingCollectionModal = false; isShowingCollectionModal = false;
} }
let sidebarOpen = false;
function toggleSidebar() { function toggleSidebar() {
sidebarOpen = !sidebarOpen; sidebarOpen = !sidebarOpen;
} }
function switchView(view: 'owned' | 'shared' | 'archived') {
activeView = view;
}
</script> </script>
<svelte:head>
<title>Collections</title>
<meta name="description" content="View your adventure collections." />
</svelte:head>
{#if isShowingCollectionModal} {#if isShowingCollectionModal}
<CollectionModal <CollectionModal
{collectionToEdit} {collectionToEdit}
@ -130,156 +183,300 @@
on:save={saveOrCreate} on:save={saveOrCreate}
/> />
{/if} {/if}
<div class="fixed bottom-4 right-4 z-[999]">
<div class="flex flex-row items-center justify-center gap-4">
<div class="dropdown dropdown-top dropdown-end">
<div tabindex="0" role="button" class="btn m-1 size-16 btn-primary">
<Plus class="w-8 h-8" />
</div>
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
<ul
tabindex="0"
class="dropdown-content z-[1] menu p-4 shadow bg-base-300 text-base-content rounded-box w-52 gap-4"
>
<p class="text-center font-bold text-lg">{$t(`adventures.create_new`)}</p>
<button
class="btn btn-primary"
on:click={() => {
collectionToEdit = null;
isShowingCollectionModal = true;
newType = 'visited';
}}
>
{$t(`adventures.collection`)}</button
>
</ul>
</div>
</div>
</div>
<div class="drawer lg:drawer-open"> <div class="min-h-screen bg-gradient-to-br from-base-200 via-base-100 to-base-200">
<input id="my-drawer" type="checkbox" class="drawer-toggle" bind:checked={sidebarOpen} /> <div class="drawer lg:drawer-open">
<div class="drawer-content"> <input id="my-drawer" type="checkbox" class="drawer-toggle" bind:checked={sidebarOpen} />
<!-- Page content -->
<h1 class="text-center font-bold text-4xl mb-6">{$t(`adventures.my_collections`)}</h1>
<p class="text-center">{count} {$t(`adventures.count_txt`)}</p>
{#if collections.length === 0}
<NotFound error={undefined} />
{/if}
<div class="p-4">
<button
class="btn btn-primary drawer-button lg:hidden mb-4 fixed bottom-0 left-0 ml-2 z-[999]"
on:click={toggleSidebar}
>
{sidebarOpen ? $t(`adventures.close_filters`) : $t(`adventures.open_filters`)}
</button>
<div class="flex flex-wrap gap-4 mr-4 justify-center content-center"> <div class="drawer-content">
{#each collections as collection} <!-- Header Section -->
<CollectionCard <div class="sticky top-0 z-40 bg-base-100/80 backdrop-blur-lg border-b border-base-300">
type="" <div class="container mx-auto px-6 py-4">
{collection} <div class="flex items-center justify-between">
on:delete={deleteCollection} <div class="flex items-center gap-4">
on:edit={editCollection} <button class="btn btn-ghost btn-square lg:hidden" on:click={toggleSidebar}>
adventures={collection.adventures} <Filter class="w-5 h-5" />
/> </button>
{/each} <div class="flex items-center gap-3">
<div class="p-2 bg-primary/10 rounded-xl">
<CollectionIcon class="w-8 h-8 text-primary" />
</div>
<div>
<h1
class="text-3xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent"
>
{$t(`adventures.my_collections`)}
</h1>
<p class="text-sm text-base-content/60">
{currentCount}
{activeView === 'owned'
? 'collections'
: activeView === 'shared'
? 'shared collections'
: 'archived collections'}
</p>
</div>
</div>
</div>
<!-- View Toggle -->
<div class="tabs tabs-boxed bg-base-200">
<button
class="tab gap-2 {activeView === 'owned' ? 'tab-active' : ''}"
on:click={() => switchView('owned')}
>
<CollectionIcon class="w-4 h-4" />
<span class="hidden sm:inline">My Collections</span>
<div
class="badge badge-sm {activeView === 'owned' ? 'badge-primary' : 'badge-ghost'}"
>
{collections.length}
</div>
</button>
<button
class="tab gap-2 {activeView === 'shared' ? 'tab-active' : ''}"
on:click={() => switchView('shared')}
>
<Share class="w-4 h-4" />
<span class="hidden sm:inline">Shared</span>
<div
class="badge badge-sm {activeView === 'shared' ? 'badge-primary' : 'badge-ghost'}"
>
{sharedCollections.length}
</div>
</button>
<button
class="tab gap-2 {activeView === 'archived' ? 'tab-active' : ''}"
on:click={() => switchView('archived')}
>
<Archive class="w-4 h-4" />
<span class="hidden sm:inline">Archived</span>
<div
class="badge badge-sm {activeView === 'archived'
? 'badge-primary'
: 'badge-ghost'}"
>
{archivedCollections.length}
</div>
</button>
</div>
</div>
</div>
</div> </div>
<div class="join flex items-center justify-center mt-4"> <!-- Main Content -->
{#if next || previous} <div class="container mx-auto px-6 py-8">
<div class="join"> {#if currentCollections.length === 0}
{#each Array.from({ length: totalPages }, (_, i) => i + 1) as page} <div class="flex flex-col items-center justify-center py-16">
<form action="?/changePage" method="POST" use:enhance={handleChangePage}> <div class="p-6 bg-base-200/50 rounded-2xl mb-6">
<input type="hidden" name="page" value={page} /> {#if activeView === 'owned'}
<input type="hidden" name="next" value={next} /> <CollectionIcon class="w-16 h-16 text-base-content/30" />
<input type="hidden" name="previous" value={previous} /> {:else if activeView === 'shared'}
{#if currentPage != page} <Share class="w-16 h-16 text-base-content/30" />
<button class="join-item btn btn-lg">{page}</button> {:else}
{:else} <Archive class="w-16 h-16 text-base-content/30" />
<button class="join-item btn btn-lg btn-active">{page}</button> {/if}
{/if} </div>
</form> <h3 class="text-xl font-semibold text-base-content/70 mb-2">
{activeView === 'owned'
? 'No collections yet'
: activeView === 'shared'
? 'No shared collections'
: 'No archived collections'}
</h3>
<p class="text-base-content/50 text-center max-w-md">
{activeView === 'owned'
? 'Create your first collection to organize your adventures and memories.'
: activeView === 'shared'
? 'Collections shared with you will appear here.'
: 'Archived collections will appear here.'}
</p>
{#if activeView === 'owned'}
<button
class="btn btn-primary btn-wide mt-6 gap-2"
on:click={() => {
collectionToEdit = null;
isShowingCollectionModal = true;
newType = 'visited';
}}
>
<Plus class="w-5 h-5" />
Create Collection
</button>
{/if}
</div>
{:else}
<!-- Collections Grid -->
<div
class="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-6"
>
{#each currentCollections as collection}
<CollectionCard
type=""
{collection}
on:delete={deleteCollection}
on:edit={editCollection}
on:archive={archiveCollection}
on:unarchive={unarchiveCollection}
user={data.user}
/>
{/each} {/each}
</div> </div>
<!-- Pagination -->
{#if activeView === 'owned' && (next || previous)}
<div class="flex justify-center mt-12">
<div class="join bg-base-100 shadow-lg rounded-2xl p-2">
{#each Array.from({ length: totalPages }, (_, i) => i + 1) as page}
<button
class="join-item btn btn-sm {currentPage === page
? 'btn-primary'
: 'btn-ghost'}"
on:click={() => goToPage(page)}
>
{page}
</button>
{/each}
</div>
</div>
{/if}
{/if} {/if}
</div> </div>
</div> </div>
</div>
<div class="drawer-side">
<label for="my-drawer" class="drawer-overlay"></label>
<ul class="menu p-4 w-80 h-full bg-base-200 text-base-content rounded-lg">
<!-- Sidebar content here -->
<div class="form-control">
<form action="?/get" method="post" use:enhance={handleSubmit}>
<h3 class="text-center font-semibold text-lg mb-4">{$t(`adventures.sort`)}</h3>
<p class="text-lg font-semibold mb-2">{$t(`adventures.order_direction`)}</p>
<div class="join">
<input
class="join-item btn btn-neutral"
type="radio"
name="order_direction"
id="asc"
value="asc"
aria-label={$t(`adventures.ascending`)}
checked
/>
<input
class="join-item btn btn-neutral"
type="radio"
name="order_direction"
id="desc"
value="desc"
aria-label={$t(`adventures.descending`)}
/>
</div>
<p class="text-lg font-semibold mt-2 mb-2">{$t('adventures.order_by')}</p>
<div class="join">
<input
class="join-item btn btn-neutral"
type="radio"
name="order_by"
id="upated_at"
value="upated_at"
aria-label={$t('adventures.updated')}
checked
/>
<input
class="join-item btn btn-neutral"
type="radio"
name="order_by"
id="start_date"
value="start_date"
aria-label={$t('adventures.start_date')}
/>
<input
class="join-item btn btn-neutral"
type="radio"
name="order_by"
id="name"
value="name"
aria-label={$t('adventures.name')}
/>
</div>
<br />
<button type="submit" class="btn btn-success btn-primary mt-4" <!-- Sidebar -->
>{$t(`adventures.sort`)}</button <div class="drawer-side z-50">
> <label for="my-drawer" class="drawer-overlay"></label>
</form> <div class="w-80 min-h-full bg-base-100 shadow-2xl">
<div class="divider"></div> <div class="p-6">
<button <!-- Sidebar Header -->
type="submit" <div class="flex items-center gap-3 mb-8">
class="btn btn-neutral btn-primary mt-4" <div class="p-2 bg-primary/10 rounded-lg">
on:click={() => goto('/collections/archived')} <Sort class="w-6 h-6 text-primary" />
>{$t(`adventures.archived_collections`)}</button </div>
> <h2 class="text-xl font-bold">Filters & Sort</h2>
</div>
<!-- Sort Form - Updated to use URL navigation -->
<div class="card bg-base-200/50 p-4">
<h3 class="font-semibold text-lg mb-4 flex items-center gap-2">
<Sort class="w-5 h-5" />
{$t(`adventures.sort`)}
</h3>
<div class="space-y-4">
<div>
<label class="label">
<span class="label-text font-medium">{$t(`adventures.order_direction`)}</span>
</label>
<div class="join w-full">
<button
class="join-item btn btn-sm flex-1 {orderDirection === 'asc'
? 'btn-active'
: ''}"
on:click={() => updateSort(orderBy, 'asc')}
>
{$t(`adventures.ascending`)}
</button>
<button
class="join-item btn btn-sm flex-1 {orderDirection === 'desc'
? 'btn-active'
: ''}"
on:click={() => updateSort(orderBy, 'desc')}
>
{$t(`adventures.descending`)}
</button>
</div>
</div>
<div>
<label class="label">
<span class="label-text font-medium">{$t('adventures.order_by')}</span>
</label>
<div class="space-y-2">
<label class="label cursor-pointer justify-start gap-3">
<input
type="radio"
name="order_by_radio"
class="radio radio-primary radio-sm"
checked={orderBy === 'updated_at'}
on:change={() => updateSort('updated_at', orderDirection)}
/>
<span class="label-text">{$t('adventures.updated')}</span>
</label>
<label class="label cursor-pointer justify-start gap-3">
<input
type="radio"
name="order_by_radio"
class="radio radio-primary radio-sm"
checked={orderBy === 'start_date'}
on:change={() => updateSort('start_date', orderDirection)}
/>
<span class="label-text">{$t('adventures.start_date')}</span>
</label>
<label class="label cursor-pointer justify-start gap-3">
<input
type="radio"
name="order_by_radio"
class="radio radio-primary radio-sm"
checked={orderBy === 'name'}
on:change={() => updateSort('name', orderDirection)}
/>
<span class="label-text">{$t('adventures.name')}</span>
</label>
</div>
</div>
</div>
</div>
<!-- Quick Actions -->
<div class="space-y-3 mt-6">
<button
type="button"
class="btn btn-outline w-full gap-2"
on:click={() => switchView('archived')}
>
<Archive class="w-4 h-4" />
{$t(`adventures.archived_collections`)}
</button>
</div>
</div>
</div> </div>
</ul> </div>
</div> </div>
</div>
<svelte:head> <!-- Floating Action Button -->
<title>Collections</title> {#if activeView === 'owned'}
<meta name="description" content="View your adventure collections." /> <div class="fixed bottom-6 right-6 z-50">
</svelte:head> <div class="dropdown dropdown-top dropdown-end">
<div
tabindex="0"
role="button"
class="btn btn-primary btn-circle w-16 h-16 shadow-2xl hover:shadow-primary/25 transition-all duration-200"
>
<Plus class="w-8 h-8" />
</div>
<ul
tabindex="0"
class="dropdown-content z-[1] menu p-4 shadow-2xl bg-base-100 rounded-2xl w-64 border border-base-300"
>
<div class="text-center mb-4">
<h3 class="font-bold text-lg">{$t(`adventures.create_new`)}</h3>
<p class="text-sm text-base-content/60">Choose what to create</p>
</div>
<button
class="btn btn-primary gap-2 w-full"
on:click={() => {
collectionToEdit = null;
isShowingCollectionModal = true;
newType = 'visited';
}}
>
<CollectionIcon class="w-5 h-5" />
{$t(`adventures.collection`)}
</button>
</ul>
</div>
</div>
{/if}
</div>

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

@ -5,6 +5,7 @@
import { marked } from 'marked'; // Import the markdown parser import { marked } from 'marked'; // Import the markdown parser
import { t } from 'svelte-i18n'; import { t } from 'svelte-i18n';
import Lost from '$lib/assets/undraw_lost.svg';
// @ts-ignore // @ts-ignore
import Calendar from '@event-calendar/core'; import Calendar from '@event-calendar/core';
@ -320,6 +321,10 @@
notFound = true; notFound = true;
} }
if (!collection) {
return;
}
if (collection.start_date && collection.end_date) { if (collection.start_date && collection.end_date) {
numberOfDays = numberOfDays =
Math.floor( Math.floor(
@ -327,7 +332,7 @@
(1000 * 60 * 60 * 24) (1000 * 60 * 60 * 24)
) + 1; ) + 1;
// Update `options.evdateents` when `collection.start_date` changes // Update `options.events` when `collection.start_date` changes
// @ts-ignore // @ts-ignore
options = { ...options, date: collection.start_date }; options = { ...options, date: collection.start_date };
} }
@ -641,7 +646,7 @@
<span class="loading loading-spinner w-24 h-24"></span> <span class="loading loading-spinner w-24 h-24"></span>
</div> </div>
{/if} {/if}
{#if collection} {#if collection && collection.id}
{#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} {#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">
@ -1537,6 +1542,19 @@
</div> </div>
</div> </div>
{/if} {/if}
{:else}
<div class="hero min-h-screen bg-gradient-to-br from-base-200 to-base-300 overflow-x-hidden">
<div class="hero-content text-center">
<div class="max-w-md">
<img src={Lost} alt="Lost" class="w-64 mx-auto mb-8 opacity-80" />
<h1 class="text-5xl font-bold text-primary mb-4">{$t('adventures.not_found')}</h1>
<p class="text-lg opacity-70 mb-8">{$t('adventures.not_found_desc')}</p>
<button class="btn btn-primary btn-lg" on:click={() => goto('/')}>
{$t('adventures.homepage')}
</button>
</div>
</div>
</div>
{/if} {/if}
<svelte:head> <svelte:head>