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

Enhance AdventureCard component with activity type display and rating system; update CardCarousel gradient fallback for no images

Browse source
This commit is contained in:
Sean Morley 2025-05-23 23:00:15 -04:00
parent d3d74f9f35
commit 809cf98169
2 changed files with 193 additions and 111 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -18,6 +18,10 @@
import DeleteWarning from './DeleteWarning.svelte'; import DeleteWarning from './DeleteWarning.svelte';
import CardCarousel from './CardCarousel.svelte'; import CardCarousel from './CardCarousel.svelte';
import { t } from 'svelte-i18n'; import { t } from 'svelte-i18n';
import Star from '~icons/mdi/star';
import StarOutline from '~icons/mdi/star-outline';
import Eye from '~icons/mdi/eye';
import EyeOff from '~icons/mdi/eye-off';
export let type: string | null = null; export let type: string | null = null;
export let user: User | null; export let user: User | null;
@ -28,15 +32,18 @@
let isWarningModalOpen: boolean = false; let isWarningModalOpen: boolean = false;
export let adventure: Adventure; export let adventure: Adventure;
let activityTypes: string[] = []; let displayActivityTypes: string[] = [];
// makes it reactivty to changes so it updates automatically let remainingCount = 0;
// Process activity types for display
$: { $: {
if (adventure.activity_types) { if (adventure.activity_types) {
activityTypes = adventure.activity_types; if (adventure.activity_types.length <= 3) {
if (activityTypes.length > 3) { displayActivityTypes = adventure.activity_types;
activityTypes = activityTypes.slice(0, 3); remainingCount = 0;
let remaining = adventure.activity_types.length - 3; } else {
activityTypes.push('+' + remaining); displayActivityTypes = adventure.activity_types.slice(0, 3);
remainingCount = adventure.activity_types.length - 3;
} }
} }
} }
@ -47,18 +54,28 @@
$: { $: {
if (collection && collection?.start_date && collection.end_date) { if (collection && collection?.start_date && collection.end_date) {
unlinked = adventure.visits.every((visit) => { unlinked = adventure.visits.every((visit) => {
// Check if visit dates exist if (!visit.start_date || !visit.end_date) return true;
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 isBeforeVisit = collection.end_date && collection.end_date < visit.start_date;
const isAfterVisit = collection.start_date && collection.start_date > visit.end_date; const isAfterVisit = collection.start_date && collection.start_date > visit.end_date;
return isBeforeVisit || isAfterVisit; return isBeforeVisit || isAfterVisit;
}); });
} }
} }
// Helper functions for display
function formatVisitCount() {
const count = adventure.visits.length;
return count > 1 ? `${count} ${$t('adventures.visits')}` : `${count} ${$t('adventures.visit')}`;
}
function renderStars(rating: number) {
const stars = [];
for (let i = 1; i <= 5; i++) {
stars.push(i <= rating);
}
return stars;
}
async function deleteAdventure() { async function deleteAdventure() {
let res = await fetch(`/api/adventures/${adventure.id}`, { let res = await fetch(`/api/adventures/${adventure.id}`, {
method: 'DELETE' method: 'DELETE'
@ -131,119 +148,184 @@
{/if} {/if}
<div <div
class="card w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-md xl:max-w-md bg-neutral text-neutral-content shadow-xl" class="card w-full max-w-md bg-base-300 shadow-2xl hover:shadow-3xl transition-all duration-300 border border-base-300 hover:border-primary/20 group"
> >
<!-- Image Section with Overlay -->
<div class="relative overflow-hidden rounded-t-2xl">
<CardCarousel adventures={[adventure]} /> <CardCarousel adventures={[adventure]} />
<div class="card-body"> <!-- Status Overlay -->
<div class="flex justify-between"> <div class="absolute top-4 left-4 flex flex-col gap-2">
<div
class="badge badge-sm {adventure.is_visited ? 'badge-success' : 'badge-warning'} shadow-lg"
>
{adventure.is_visited ? $t('adventures.visited') : $t('adventures.planned')}
</div>
{#if unlinked}
<div class="badge badge-sm badge-error shadow-lg">{$t('adventures.out_of_range')}</div>
{/if}
</div>
<!-- Privacy Indicator -->
<div class="absolute top-4 right-4">
<div
class="tooltip tooltip-left"
data-tip={adventure.is_public ? $t('adventures.public') : $t('adventures.private')}
>
<div
class="btn btn-circle btn-sm btn-ghost bg-black/20 backdrop-blur-sm border-0 text-white"
>
{#if adventure.is_public}
<Eye class="w-4 h-4" />
{:else}
<EyeOff class="w-4 h-4" />
{/if}
</div>
</div>
</div>
<!-- Category Badge -->
{#if adventure.category}
<div class="absolute bottom-4 left-4">
<div class="badge badge-primary shadow-lg font-medium">
{adventure.category.display_name}
{adventure.category.icon}
</div>
</div>
{/if}
</div>
<!-- Content Section -->
<div class="card-body p-6 space-y-4">
<!-- Header Section -->
<div class="space-y-3">
<button <button
on:click={() => goto(`/adventures/${adventure.id}`)} on:click={() => goto(`/adventures/${adventure.id}`)}
class="text-2xl font-semibold -mt-2 break-words text-wrap hover:underline text-left" class="text-xl font-bold text-left hover:text-primary transition-colors duration-200 line-clamp-2 group-hover:underline"
> >
{adventure.name} {adventure.name}
</button> </button>
</div>
<div>
<div class="badge badge-primary">
{adventure.category?.display_name + ' ' + adventure.category?.icon}
</div>
<div class="badge badge-success">
{adventure.is_visited ? $t('adventures.visited') : $t('adventures.planned')}
</div>
<div class="badge badge-secondary">
{adventure.is_public ? $t('adventures.public') : $t('adventures.private')}
</div>
</div>
{#if unlinked}
<div class="badge badge-error">{$t('adventures.out_of_range')}</div>
{/if}
{#if adventure.location && adventure.location !== ''}
<div class="inline-flex items-center">
<MapMarker class="w-5 h-5 mr-1" />
<p class="ml-.5">{adventure.location}</p>
</div>
{/if}
{#if adventure.visits.length > 0}
<!-- visited badge -->
<div class="flex items-center">
<Calendar class="w-5 h-5 mr-1" />
<p class="ml-.5">
{adventure.visits.length}
{adventure.visits.length > 1 ? $t('adventures.visits') : $t('adventures.visit')}
</p>
</div>
{/if}
{#if adventure.activity_types && adventure.activity_types.length > 0}
<ul class="flex flex-wrap">
{#each activityTypes as activity}
<div class="badge badge-primary mr-1 text-md font-semibold pb-2 pt-1 mb-1">
{activity}
</div>
{/each}
</ul>
{/if}
{#if !readOnly}
<div class="card-actions justify-end mt-2">
<!-- action options dropdown -->
<!-- Location -->
{#if adventure.location}
<div class="flex items-center gap-2 text-base-content/70">
<MapMarker class="w-4 h-4 text-primary" />
<span class="text-sm font-medium truncate">{adventure.location}</span>
</div>
{/if}
<!-- Rating -->
{#if adventure.rating}
<div class="flex items-center gap-2">
<div class="flex">
{#each renderStars(adventure.rating) as filled}
{#if filled}
<Star class="w-4 h-4 text-warning fill-current" />
{:else}
<StarOutline class="w-4 h-4 text-base-content/30" />
{/if}
{/each}
</div>
<span class="text-sm text-base-content/60">({adventure.rating}/5)</span>
</div>
{/if}
</div>
<!-- Stats Section -->
{#if adventure.visits.length > 0}
<div class="flex items-center gap-2 p-3 bg-base-200 rounded-lg">
<Calendar class="w-4 h-4 text-primary" />
<span class="text-sm font-medium">{formatVisitCount()}</span>
</div>
{/if}
<!-- Actions Section -->
{#if !readOnly}
<div class="pt-4 border-t border-base-300">
{#if type != 'link'} {#if type != 'link'}
<div class="flex justify-between items-center">
<button
class="btn btn-neutral btn-sm flex-1 mr-2"
on:click={() => goto(`/adventures/${adventure.id}`)}
>
<Launch class="w-4 h-4" />
View Details
</button>
{#if adventure.user_id == user?.uuid || (collection && user && collection.shared_with?.includes(user.uuid))} {#if adventure.user_id == user?.uuid || (collection && user && collection.shared_with?.includes(user.uuid))}
<div class="dropdown dropdown-end"> <div class="dropdown dropdown-end">
<div tabindex="0" role="button" class="btn btn-neutral-200"> <div tabindex="0" role="button" class="btn btn-square btn-sm btn-base-300">
<DotsHorizontal class="w-6 h-6" /> <DotsHorizontal class="w-5 h-5" />
</div> </div>
<!-- svelte-ignore a11y-no-noninteractive-tabindex --> <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
<ul <ul
tabindex="0" tabindex="0"
class="dropdown-content menu bg-base-100 rounded-box z-[1] w-64 p-2 shadow" class="dropdown-content menu bg-base-100 rounded-box z-[1] w-56 p-2 shadow-xl border border-base-300"
> >
<button <li>
class="btn btn-neutral mb-2" <button on:click={editAdventure} class="flex items-center gap-2">
on:click={() => goto(`/adventures/${adventure.id}`)} <FileDocumentEdit class="w-4 h-4" />
><Launch class="w-6 h-6" />{$t('adventures.open_details')}</button
>
<button class="btn btn-neutral mb-2" on:click={editAdventure}>
<FileDocumentEdit class="w-6 h-6" />
{$t('adventures.edit_adventure')} {$t('adventures.edit_adventure')}
</button> </button>
</li>
<!-- remove from collection -->
{#if adventure.collection && user?.uuid == adventure.user_id} {#if adventure.collection && user?.uuid == adventure.user_id}
<button class="btn btn-neutral mb-2" on:click={removeFromCollection} <li>
><LinkVariantRemove class="w-6 h-6" />{$t( <button on:click={removeFromCollection} class="flex items-center gap-2">
'adventures.remove_from_collection' <LinkVariantRemove class="w-4 h-4" />
)}</button {$t('adventures.remove_from_collection')}
> </button>
</li>
{/if} {/if}
{#if !adventure.collection} {#if !adventure.collection}
<li>
<button <button
class="btn btn-neutral mb-2"
on:click={() => (isCollectionModalOpen = true)} on:click={() => (isCollectionModalOpen = true)}
><Plus class="w-6 h-6" />{$t('adventures.add_to_collection')}</button class="flex items-center gap-2"
> >
<Plus class="w-4 h-4" />
{$t('adventures.add_to_collection')}
</button>
</li>
{/if} {/if}
<div class="divider my-1"></div>
<li>
<button <button
id="delete_adventure" id="delete_adventure"
data-umami-event="Delete Adventure" data-umami-event="Delete Adventure"
class="btn btn-warning" class="text-error flex items-center gap-2"
on:click={() => (isWarningModalOpen = true)} on:click={() => (isWarningModalOpen = true)}
><TrashCan class="w-6 h-6" />{$t('adventures.delete')}</button
> >
<TrashCan class="w-4 h-4" />
{$t('adventures.delete')}
</button>
</li>
</ul> </ul>
</div> </div>
{/if}
</div>
{:else} {:else}
<button <button class="btn btn-primary btn-block" on:click={link}>
class="btn btn-neutral-200 mb-2" <Link class="w-4 h-4" />
on:click={() => goto(`/adventures/${adventure.id}`)} Link Adventure
><Launch class="w-6 h-6" /></button </button>
>
{/if}
{/if}
{#if type == 'link'}
<button class="btn btn-primary" on:click={link}><Link class="w-6 h-6" /></button>
{/if} {/if}
</div> </div>
{/if} {/if}
</div> </div>
</div> </div>
<style>
.line-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.shadow-3xl {
box-shadow: 0 35px 60px -12px rgba(0, 0, 0, 0.25);
}
</style>

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

@ -97,12 +97,12 @@
{:else} {:else}
<!-- add a figure with a gradient instead - --> <!-- add a figure with a gradient instead - -->
<div class="w-full h-48 bg-gradient-to-r from-success via-base to-primary relative"> <div class="w-full h-48 bg-gradient-to-r from-success via-base to-primary relative">
<!-- subtle button bottom left text --> <!-- subtle button bottom left text
<div <div
class="absolute bottom-0 left-0 px-2 py-1 text-md font-medium bg-neutral rounded-tr-lg shadow-md" class="absolute bottom-0 left-0 px-2 py-1 text-md font-medium bg-neutral rounded-tr-lg shadow-md"
> >
{$t('adventures.no_image_found')} {$t('adventures.no_image_found')}
</div> </div> -->
</div> </div>
{/if} {/if}
</figure> </figure>