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

trips

Browse source
This commit is contained in:
Sean Morley 2024-07-10 13:49:40 -04:00
parent be9c3c6747
commit 6383a623ad
3 changed files with 34 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

15
frontend/src/lib/components/TripCard.svelte
View file

@ -1,6 +1,11 @@
<script lang="ts"> <script lang="ts">
import { createEventDispatcher } from 'svelte'; import { createEventDispatcher } from 'svelte';
import Calendar from '~icons/mdi/calendar';
import MapMarker from '~icons/mdi/map-marker';
import Launch from '~icons/mdi/launch';
import TrashCanOutline from '~icons/mdi/trash-can-outline';
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import type { Trip } from '$lib/types'; import type { Trip } from '$lib/types';
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
@ -31,23 +36,21 @@
<h2 class="card-title overflow-ellipsis">{trip.name}</h2> <h2 class="card-title overflow-ellipsis">{trip.name}</h2>
{#if trip.date && trip.date !== ''} {#if trip.date && trip.date !== ''}
<div class="inline-flex items-center"> <div class="inline-flex items-center">
<!-- <iconify-icon icon="mdi:calendar" class="text-xl"></iconify-icon> --> <Calendar class="w-5 h-5 mr-1" />
<p class="ml-1">{trip.date}</p> <p class="ml-1">{trip.date}</p>
</div> </div>
{/if} {/if}
{#if trip.location && trip.location !== ''} {#if trip.location && trip.location !== ''}
<div class="inline-flex items-center"> <div class="inline-flex items-center">
<!-- <iconify-icon icon="mdi:map-marker" class="text-xl"></iconify-icon> --> <MapMarker class="w-5 h-5 mr-1" />
<p class="ml-1">{trip.location}</p> <p class="ml-1">{trip.location}</p>
</div> </div>
{/if} {/if}
<div class="card-actions justify-end"> <div class="card-actions justify-end">
<button class="btn btn-secondary" <button class="btn btn-secondary"><TrashCanOutline class="w-5 h-5 mr-1" /></button>
><iconify-icon icon="mdi:trash-can-outline" class="text-2xl"></iconify-icon></button
>
<button class="btn btn-primary" on:click={() => goto(`/trip/${trip.id}`)} <button class="btn btn-primary" on:click={() => goto(`/trip/${trip.id}`)}
><iconify-icon icon="mdi:launch" class="text-2xl"></iconify-icon></button ><Launch class="w-5 h-5 mr-1" /></button
> >
</div> </div>
</div> </div>

5
frontend/src/routes/trips/+page.server.ts
View file

@ -9,11 +9,12 @@ export const load = (async (event) => {
} else { } else {
let res = await event.fetch(`${endpoint}/api/trips/`, { let res = await event.fetch(`${endpoint}/api/trips/`, {
headers: { headers: {
Cookies: event.cookies.get('auth') || '' Cookie: `${event.cookies.get('auth')}`
} }
}); });
if (res.ok) { if (res.ok) {
let data = await res.json(); let data = await res.json();
console.log(data);
return { return {
props: { props: {
trips: data trips: data
@ -22,7 +23,7 @@ export const load = (async (event) => {
} else { } else {
return { return {
status: res.status, status: res.status,
error: new Error('Failed to fetch data') error: 'Failed to load trips'
}; };
} }
} }

23
frontend/src/routes/trips/+page.svelte
View file

@ -10,10 +10,13 @@
let trips: Trip[]; let trips: Trip[];
let notFound: boolean = false; let notFound: boolean = false;
let noTrips: boolean = false;
onMount(() => { onMount(() => {
if (data.props && data.props.trips) { if (data.props && data.props.trips?.length > 0) {
trips = data.props.trips; trips = data.props.trips;
} else if (data.props && data.props.trips?.length === 0) {
noTrips = true;
} else { } else {
notFound = true; notFound = true;
} }
@ -44,6 +47,24 @@
</div> </div>
{/if} {/if}
{#if noTrips}
<div
class="flex min-h-[100dvh] flex-col items-center justify-center bg-background px-4 py-12 sm:px-6 lg:px-8 -mt-20"
>
<div class="mx-auto max-w-md text-center">
<div class="flex items-center justify-center">
<img src={Lost} alt="Lost" class="w-1/2" />
</div>
<h1 class="mt-4 text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
No Trips Found
</h1>
<p class="mt-4 text-muted-foreground">
There are no trips to display. Please try again later.
</p>
</div>
</div>
{/if}
{#if trips && !notFound} {#if trips && !notFound}
<div class="flex flex-wrap gap-4 mr-4 ml-4 justify-center content-center"> <div class="flex flex-wrap gap-4 mr-4 ml-4 justify-center content-center">
{#each trips as trip (trip.id)} {#each trips as trip (trip.id)}