Docker/AdventureLog
Docker/AdventureLog
1
0
Fork 0
mirror of https://github.com/seanmorley15/AdventureLog.git synced 2025-07-28 17:29:36 +02:00
Code Issues Releases Activity

Refactor AdventureCard component and remove FeaturedAdventureCard

Browse source
This commit is contained in:
Sean Morley 2024-04-02 21:33:41 +00:00
parent cde83b35d6
commit f0894a964f
4 changed files with 31 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

28
src/lib/components/AdventureCard.svelte
View file

@ -4,6 +4,8 @@
import calendar from "$lib/assets/calendar.svg";
const dispatch = createEventDispatcher();
export let type:String;
export let name:String;
export let location:String;
export let created:string;
@ -15,13 +17,22 @@
function edit() {
dispatch('edit', id)
}
function add() {
dispatch('add', {name, location});
}
</script>
{#if type === 'mylog'}
<div class="card min-w-max lg:w-96 md:w-80 sm:w-60 xs:w-40 bg-neutral shadow-xl overflow-hidden">
<div class="card-body">
<h2 class="card-title overflow-ellipsis">{name}</h2>
{#if location !== ""}
<p><img src={locationDot} class="inline-block -mt-1 mr-1" alt="Logo" />{location}</p>
{/if}
{#if created !== ""}
<p><img src={calendar} class="inline-block -mt-1 mr-1" alt="Logo" />{created}</p>
{/if}
<div class="card-actions justify-end">
<button class="btn btn-primary" on:click={edit}>Edit</button>
<button class="btn btn-secondary" on:click={remove}>Remove</button>
@ -29,3 +40,20 @@
</div>
</div>
{/if}
{#if type === 'featured'}
<div class="card min-w-max lg:w-96 md:w-80 sm:w-60 xs:w-40 bg-neutral shadow-xl overflow-hidden">
<div class="card-body">
<h2 class="card-title overflow-ellipsis">{name}</h2>
{#if location!=""}
<p><img src={locationDot} class="inline-block -mt-1 mr-1" alt="Logo" />{location}</p>
{/if}
<div class="card-actions justify-end">
<button class="btn btn-primary" on:click={add}>Add</button>
</div>
</div>
</div>
{/if}

24
src/lib/components/FeaturedAdventureCard.svelte
View file

@ -1,24 +0,0 @@
<script lang="ts">
import { createEventDispatcher } from 'svelte';
import locationDot from "$lib/assets/locationDot.svg";
import calendar from "$lib/assets/calendar.svg";
const dispatch = createEventDispatcher();
export let name:String;
export let location:String;
function add() {
dispatch('add', {name, location});
}
</script>
<div class="card min-w-max lg:w-96 md:w-80 sm:w-60 xs:w-40 bg-neutral shadow-xl overflow-hidden">
<div class="card-body">
<h2 class="card-title overflow-ellipsis">{name}</h2>
<p><img src={locationDot} class="inline-block -mt-1 mr-1" alt="Logo" />{location}</p>
<div class="card-actions justify-end">
<button class="btn btn-primary" on:click={add}>Add</button>
</div>
</div>
</div>

4
src/routes/featured/+page.svelte
View file

@ -1,7 +1,7 @@
<script lang="ts">
export let data
console.log(data.result);
import FeaturedAdventureCard from '$lib/components/FeaturedAdventureCard.svelte';
import AdventureCard from '$lib/components/AdventureCard.svelte';
import type { Adventure } from '$lib/utils/types.js';
import { addAdventure, getNextId } from '../../services/adventureService.js';
@ -26,6 +26,6 @@
<div class="grid xl:grid-cols-3 lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-1 gap-4 mt-4 content-center auto-cols-auto ml-6 mr-6">
{#each data.result as adventure (adventure.id)}
<FeaturedAdventureCard on:add={add} name={adventure.name} location={adventure.location} />
<AdventureCard type="featured" on:add={add} name={adventure.name} location={adventure.location} created="" id={NaN} />
{/each}
</div>

2
src/routes/log/+page.svelte
View file

@ -148,7 +148,7 @@
<div class="grid xl:grid-cols-3 lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-1 gap-4 mt-4 content-center auto-cols-auto ml-6 mr-6">
{#each adventures as adventure (adventure.id)}
<AdventureCard id={adventure.id} name={adventure.name} location={adventure.location} created={adventure.created} on:remove={triggerRemoveAdventure} on:edit={editAdventure} />
<AdventureCard type="mylog" id={adventure.id} name={adventure.name} location={adventure.location} created={adventure.created} on:remove={triggerRemoveAdventure} on:edit={editAdventure} />
{/each}
</div>