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:
parent
704eb6f6de
commit
2ca24b9f15
6 changed files with 65 additions and 47 deletions
|
@ -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>
|
||||||
|
|
|
@ -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">
|
||||||
|
|
|
@ -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}
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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}
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue