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

new adventure card

Browse source
This commit is contained in:
Sean Morley 2024-07-16 14:50:30 -04:00
parent 58cb6baab0
commit e643362011
2 changed files with 61 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -16,6 +16,7 @@
import LinkVariantRemove from '~icons/mdi/link-variant-remove'; import LinkVariantRemove from '~icons/mdi/link-variant-remove';
import Plus from '~icons/mdi/plus'; import Plus from '~icons/mdi/plus';
import CollectionLink from './CollectionLink.svelte'; import CollectionLink from './CollectionLink.svelte';
import DotsHorizontal from '~icons/mdi/dots-horizontal';
export let type: string; export let type: string;
@ -108,7 +109,7 @@
{/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-primary-content shadow-xl overflow-hidden text-base-content" class="card w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-md xl:max-w-md bg-primary-content shadow-xl text-base-content"
> >
<figure> <figure>
<!-- svelte-ignore a11y-img-redundant-alt --> <!-- svelte-ignore a11y-img-redundant-alt -->
@ -157,52 +158,50 @@
</ul> </ul>
{/if} {/if}
<div class="card-actions justify-end mt-2"> <div class="card-actions justify-end mt-2">
{#if type == 'visited'} <!-- action options dropdown -->
<button class="btn btn-primary" on:click={() => goto(`/adventures/${adventure.id}`)} <div class="dropdown dropdown-end">
><Launch class="w-6 h-6" /></button <div tabindex="0" role="button" class="btn btn-neutral">
<DotsHorizontal class="w-6 h-6" />
</div>
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
<ul
tabindex="0"
class="dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow"
> >
<button class="btn btn-primary" on:click={editAdventure}> <button class="btn btn-neutral mb-2" on:click={() => goto(`/adventures/${adventure.id}`)}
<FileDocumentEdit class="w-6 h-6" /> ><Launch class="w-6 h-6" />Open Details</button
</button> >
<button class="btn btn-warning" on:click={deleteAdventure} <button class="btn btn-neutral mb-2" on:click={editAdventure}>
><TrashCan class="w-6 h-6" /></button <FileDocumentEdit class="w-6 h-6" />Edit Adventure
> </button>
{/if} {#if adventure.type == 'visited'}
{#if type == 'planned'} <button class="btn btn-neutral mb-2" on:click={changeType('planned')}
<button class="btn btn-primary" on:click={() => goto(`/adventures/${adventure.id}`)} ><FormatListBulletedSquare class="w-6 h-6" />Change to Plan</button
><Launch class="w-6 h-6" /></button >
> {/if}
<button class="btn btn-primary" on:click={editAdventure}> {#if adventure.type == 'planned'}
<FileDocumentEdit class="w-6 h-6" /> <button class="btn btn-neutral mb-2" on:click={changeType('visited')}
</button> ><CheckBold class="w-6 h-6" />Mark Visited</button
<button class="btn btn-warning" on:click={deleteAdventure} >
><TrashCan class="w-6 h-6" /></button {/if}
> {#if adventure.collection}
{/if} <button class="btn btn-neutral mb-2" on:click={removeFromCollection}
{#if type == 'link'} ><LinkVariantRemove class="w-6 h-6" />Remove from Collection</button
<button class="btn btn-primary" on:click={link}><Link class="w-6 h-6" /></button> >
{/if} {/if}
{#if adventure.type == 'visited'} {#if !adventure.collection}
<button class="btn btn-secondary" on:click={changeType('planned')} <button class="btn btn-neutral mb-2" on:click={() => (isCollectionModalOpen = true)}
><FormatListBulletedSquare class="w-6 h-6" /></button ><Plus class="w-6 h-6" />Add to Collection</button
> >
{/if} {/if}
{#if type == 'link'}
{#if adventure.type == 'planned'} <button class="btn btn-primary" on:click={link}><Link class="w-6 h-6" /></button>
<button class="btn btn-secondary" on:click={changeType('visited')} {/if}
><CheckBold class="w-6 h-6" /></button <button class="btn btn-warning" on:click={deleteAdventure}
> ><TrashCan class="w-6 h-6" />Delete</button
{/if} >
{#if adventure.collection} </ul>
<button class="btn btn-secondary" on:click={removeFromCollection} </div>
><LinkVariantRemove class="w-6 h-6" /></button
>
{/if}
{#if !adventure.collection}
<button class="btn btn-secondary" on:click={() => (isCollectionModalOpen = true)}
><Plus class="w-6 h-6" /></button
>
{/if}
</div> </div>
</div> </div>
</div> </div>

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

@ -15,6 +15,7 @@
let collection: Collection; let collection: Collection;
let adventures: Adventure[] = []; let adventures: Adventure[] = [];
let numVisited: number = adventures.filter((a) => a.type == 'visited').length;
let notFound: boolean = false; let notFound: boolean = false;
let isShowingCreateModal: boolean = false; let isShowingCreateModal: boolean = false;
@ -151,6 +152,21 @@
{#if collection.name} {#if collection.name}
<h1 class="text-center font-extrabold text-4xl mb-2">{collection.name}</h1> <h1 class="text-center font-extrabold text-4xl mb-2">{collection.name}</h1>
{/if} {/if}
{#if adventures.length > 0}
<div class="flex items-center justify-center mb-4">
<div class="stats shadow bg-base-300">
<div class="stat">
<div class="stat-title">Region Stats</div>
<div class="stat-value">{numVisited}/{adventures.length} Visited</div>
{#if numVisited === adventures.length}
<div class="stat-desc">You've completed this collection! 🎉!</div>
{:else}
<div class="stat-desc">Keep exploring!</div>
{/if}
</div>
</div>
</div>
{/if}
<h1 class="text-center font-semibold text-2xl mt-4 mb-2">Linked Adventures</h1> <h1 class="text-center font-semibold text-2xl mt-4 mb-2">Linked Adventures</h1>
<div class="flex flex-wrap gap-4 mr-4 justify-center content-center"> <div class="flex flex-wrap gap-4 mr-4 justify-center content-center">
{#each adventures as adventure} {#each adventures as adventure}