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

adventure card improvements

This commit is contained in:
Sean Morley 2024-07-18 18:37:46 -04:00
parent 704eb6f6de
commit 2ca24b9f15
6 changed files with 65 additions and 47 deletions

View file

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import { createEventDispatcher } from 'svelte'; import { createEventDispatcher } from 'svelte';
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import type { Adventure } from '$lib/types'; import type { Adventure, User } from '$lib/types';
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
import Launch from '~icons/mdi/launch'; import Launch from '~icons/mdi/launch';
@ -20,6 +20,8 @@
export let type: string; export let type: string;
export let user: User | null;
let isCollectionModalOpen: boolean = false; let isCollectionModalOpen: boolean = false;
export let adventure: Adventure; export let adventure: Adventure;
@ -130,9 +132,9 @@
{adventure.name} {adventure.name}
</h2> </h2>
<div> <div>
{#if adventure.type == 'visited'} {#if adventure.type == 'visited' && user?.pk == adventure.user_id}
<div class="badge badge-primary">Visited</div> <div class="badge badge-primary">Visited</div>
{:else} {:else if user?.pk == adventure.user_id}
<div class="badge badge-secondary">Planned</div> <div class="badge badge-secondary">Planned</div>
{/if} {/if}
<div class="badge badge-neutral">{adventure.is_public ? 'Public' : 'Private'}</div> <div class="badge badge-neutral">{adventure.is_public ? 'Public' : 'Private'}</div>
@ -162,48 +164,54 @@
<div class="card-actions justify-end mt-2"> <div class="card-actions justify-end mt-2">
<!-- action options dropdown --> <!-- action options dropdown -->
{#if type != 'link'} {#if type != 'link'}
<div class="dropdown dropdown-end"> {#if user?.pk == adventure.user_id}
<div tabindex="0" role="button" class="btn btn-neutral"> <div class="dropdown dropdown-end">
<DotsHorizontal class="w-6 h-6" /> <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-neutral mb-2"
on:click={() => goto(`/adventures/${adventure.id}`)}
><Launch class="w-6 h-6" />Open Details</button
>
<button class="btn btn-neutral mb-2" on:click={editAdventure}>
<FileDocumentEdit class="w-6 h-6" />Edit Adventure
</button>
{#if adventure.type == 'visited'}
<button class="btn btn-neutral mb-2" on:click={changeType('planned')}
><FormatListBulletedSquare class="w-6 h-6" />Change to Plan</button
>
{/if}
{#if adventure.type == 'planned'}
<button class="btn btn-neutral mb-2" on:click={changeType('visited')}
><CheckBold class="w-6 h-6" />Mark Visited</button
>
{/if}
{#if adventure.collection}
<button class="btn btn-neutral mb-2" on:click={removeFromCollection}
><LinkVariantRemove class="w-6 h-6" />Remove from Collection</button
>
{/if}
{#if !adventure.collection}
<button class="btn btn-neutral mb-2" on:click={() => (isCollectionModalOpen = true)}
><Plus class="w-6 h-6" />Add to Collection</button
>
{/if}
<button class="btn btn-warning" on:click={deleteAdventure}
><TrashCan class="w-6 h-6" />Delete</button
>
</ul>
</div> </div>
<!-- svelte-ignore a11y-no-noninteractive-tabindex --> {:else}
<ul <button class="btn btn-neutral mb-2" on:click={() => goto(`/adventures/${adventure.id}`)}
tabindex="0" ><Launch class="w-6 h-6" /></button
class="dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow"
> >
<button {/if}
class="btn btn-neutral mb-2"
on:click={() => goto(`/adventures/${adventure.id}`)}
><Launch class="w-6 h-6" />Open Details</button
>
<button class="btn btn-neutral mb-2" on:click={editAdventure}>
<FileDocumentEdit class="w-6 h-6" />Edit Adventure
</button>
{#if adventure.type == 'visited'}
<button class="btn btn-neutral mb-2" on:click={changeType('planned')}
><FormatListBulletedSquare class="w-6 h-6" />Change to Plan</button
>
{/if}
{#if adventure.type == 'planned'}
<button class="btn btn-neutral mb-2" on:click={changeType('visited')}
><CheckBold class="w-6 h-6" />Mark Visited</button
>
{/if}
{#if adventure.collection}
<button class="btn btn-neutral mb-2" on:click={removeFromCollection}
><LinkVariantRemove class="w-6 h-6" />Remove from Collection</button
>
{/if}
{#if !adventure.collection}
<button class="btn btn-neutral mb-2" on:click={() => (isCollectionModalOpen = true)}
><Plus class="w-6 h-6" />Add to Collection</button
>
{/if}
<button class="btn btn-warning" on:click={deleteAdventure}
><TrashCan class="w-6 h-6" />Delete</button
>
</ul>
</div>
{/if} {/if}
{#if type == 'link'} {#if type == 'link'}
<button class="btn btn-primary" on:click={link}><Link class="w-6 h-6" /></button> <button class="btn btn-primary" on:click={link}><Link class="w-6 h-6" /></button>

View file

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { deserialize } from '$app/forms'; import { deserialize } from '$app/forms';
import type { Adventure } from '$lib/types'; import type { Adventure, User } from '$lib/types';
import { createEventDispatcher } from 'svelte'; import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
import type { ActionResult } from '@sveltejs/kit'; import type { ActionResult } from '@sveltejs/kit';
@ -10,6 +10,8 @@
let adventures: Adventure[] = []; let adventures: Adventure[] = [];
export let user: User | null;
onMount(async () => { onMount(async () => {
modal = document.getElementById('my_modal_1') as HTMLDialogElement; modal = document.getElementById('my_modal_1') as HTMLDialogElement;
if (modal) { if (modal) {
@ -53,7 +55,7 @@
<h1 class="text-center font-bold text-4xl mb-6">My Adventures</h1> <h1 class="text-center font-bold text-4xl mb-6">My 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}
<AdventureCard type="link" {adventure} on:link={add} /> <AdventureCard user={user ?? null} type="link" {adventure} on:link={add} />
{/each} {/each}
{#if adventures.length === 0} {#if adventures.length === 0}
<p class="text-center text-lg"> <p class="text-center text-lg">

View file

@ -185,6 +185,7 @@
<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}
<AdventureCard <AdventureCard
user={data.user}
type={adventure.type} type={adventure.type}
{adventure} {adventure}
on:delete={deleteAdventure} on:delete={deleteAdventure}

View file

@ -167,7 +167,7 @@
<h1 class="text-center font-bold text-4xl mb-6">My Collections</h1> <h1 class="text-center font-bold text-4xl mb-6">My Collections</h1>
<p class="text-center">This search returned {count} results.</p> <p class="text-center">This search returned {count} results.</p>
{#if collections.length === 0} {#if collections.length === 0}
<NotFound /> <NotFound error={undefined} />
{/if} {/if}
<div class="p-4"> <div class="p-4">
<button <button

View file

@ -77,6 +77,7 @@
{#if isShowingCreateModal} {#if isShowingCreateModal}
<AdventureLink <AdventureLink
user={data?.user ?? null}
on:close={() => { on:close={() => {
isShowingCreateModal = false; isShowingCreateModal = false;
}} }}
@ -171,6 +172,7 @@
<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}
<AdventureCard <AdventureCard
user={data.user}
on:edit={editAdventure} on:edit={editAdventure}
on:delete={deleteAdventure} on:delete={deleteAdventure}
type={adventure.type} type={adventure.type}

View file

@ -48,7 +48,12 @@
<h2 class="text-center font-bold text-2xl mb-4">AdventureLog Results</h2> <h2 class="text-center font-bold text-2xl mb-4">AdventureLog Results</h2>
<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}
<AdventureCard type={adventure.type} {adventure} on:delete={deleteAdventure} /> <AdventureCard
user={data.user}
type={adventure.type}
{adventure}
on:delete={deleteAdventure}
/>
{/each} {/each}
</div> </div>
<div class="divider"></div> <div class="divider"></div>