Skip to content

Commit

Permalink
Merge pull request #116 from seanmorley15/development
Browse files Browse the repository at this point in the history 
Development
  • Loading branch information
@seanmorley15
seanmorley15 authored Jul 11, 2024
2 parents 3993c1a + 23af6b2 commit 9029614
Show file tree
Hide file tree
Showing 5 changed files with 339 additions and 29 deletions.
10 changes: 2 additions & 8 deletions frontend/src/lib/components/Navbar.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,10 +53,7 @@
>
{#if data.user}
<li>
<button on:click={() => goto('/visited')}>Visited</button>
</li>
<li>
<button on:click={() => goto('/planner')}>Planner</button>
<button on:click={() => goto('/adventures')}>Adventures</button>
</li>
<li>
<button on:click={() => goto('/worldtravel')}>World Travel</button>
Expand Down Expand Up @@ -87,10 +84,7 @@
<ul class="menu menu-horizontal px-1 gap-2">
{#if data.user}
<li>
<button class="btn btn-neutral" on:click={() => goto('/visited')}>Visited</button>
</li>
<li>
<button class="btn btn-neutral" on:click={() => goto('/planner')}>Planner</button>
<button class="btn btn-neutral" on:click={() => goto('/adventures')}>Adventures</button>
</li>
<li>
<button class="btn btn-neutral" on:click={() => goto('/worldtravel')}>World Travel</button
Expand Down
20 changes: 20 additions & 0 deletions frontend/src/lib/components/NotFound.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<script lang="ts">
import Lost from '$lib/assets/undraw_lost.svg';
</script>

<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 adventures found
</h1>
<p class="mt-4 text-muted-foreground">
There are no adventures to display. Add some using the plus button at the bottom right or try
changing filters!
</p>
</div>
</div>
100 changes: 97 additions & 3 deletions frontend/src/routes/adventures/+page.server.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,45 @@ import type { PageServerLoad } from './$types';
const PUBLIC_SERVER_URL = process.env['PUBLIC_SERVER_URL'];
import type { Adventure } from '$lib/types';

const endpoint = PUBLIC_SERVER_URL || 'http://localhost:8000';

import type { Actions } from '@sveltejs/kit';
import { fetchCSRFToken, tryRefreshToken } from '$lib/index.server';
import { checkLink } from '$lib';

const serverEndpoint = PUBLIC_SERVER_URL || 'http://localhost:8000';

export const load = (async (event) => {
if (!event.locals.user) {
return redirect(302, '/login');
} else {
let adventures: Adventure[] = [];
let visitedFetch = await fetch(`${serverEndpoint}/api/adventures/visited/`, {
headers: {
Cookie: `${event.cookies.get('auth')}`
}
});
if (!visitedFetch.ok) {
console.error('Failed to fetch visited adventures');
return redirect(302, '/login');
} else {
let visited = (await visitedFetch.json()) as Adventure[];
adventures = [...adventures, ...visited];
}
let plannedFetch = await fetch(`${serverEndpoint}/api/adventures/planned/`, {
headers: {
Cookie: `${event.cookies.get('auth')}`
}
});
if (!plannedFetch.ok) {
console.error('Failed to fetch visited adventures');
return redirect(302, '/login');
} else {
let planned = (await plannedFetch.json()) as Adventure[];
adventures = [...adventures, ...planned];
}
return { adventures } as { adventures: Adventure[] };
}
}) satisfies PageServerLoad;

export const actions: Actions = {
create: async (event) => {
const formData = await event.request.formData();
Expand Down Expand Up @@ -203,7 +234,7 @@ export const actions: Actions = {

const image = formData.get('image') as File;

console.log(activity_types);
// console.log(activity_types);

if (!type || !name) {
return {
Expand Down Expand Up @@ -316,5 +347,68 @@ export const actions: Actions = {
let image_url = adventure.image;
let link_url = adventure.link;
return { image_url, link_url };
},
get: async (event) => {
if (!event.locals.user) {
}

const formData = await event.request.formData();
const visited = formData.get('visited');
const planned = formData.get('planned');
const featured = formData.get('featured');

let adventures: Adventure[] = [];

if (!event.locals.user) {
return {
status: 401,
body: { message: 'Unauthorized' }
};
}

if (visited) {
let visitedFetch = await fetch(`${serverEndpoint}/api/adventures/visited/`, {
headers: {
Cookie: `${event.cookies.get('auth')}`
}
});
if (!visitedFetch.ok) {
console.error('Failed to fetch visited adventures');
return redirect(302, '/login');
} else {
let visited = (await visitedFetch.json()) as Adventure[];
adventures = [...adventures, ...visited];
}
}
if (planned) {
let plannedFetch = await fetch(`${serverEndpoint}/api/adventures/planned/`, {
headers: {
Cookie: `${event.cookies.get('auth')}`
}
});
if (!plannedFetch.ok) {
console.error('Failed to fetch visited adventures');
return redirect(302, '/login');
} else {
let planned = (await plannedFetch.json()) as Adventure[];
adventures = [...adventures, ...planned];
}
}
if (featured) {
let featuredFetch = await fetch(`${serverEndpoint}/api/adventures/featured/`, {
headers: {
Cookie: `${event.cookies.get('auth')}`
}
});
if (!featuredFetch.ok) {
console.error('Failed to fetch visited adventures');
return redirect(302, '/login');
} else {
let featured = (await featuredFetch.json()) as Adventure[];
adventures = [...adventures, ...featured];
}
}
// console.log(adventures);
return adventures as Adventure[];
}
};
217 changes: 217 additions & 0 deletions frontend/src/routes/adventures/+page.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,217 @@
<script lang="ts">
import { enhance } from '$app/forms';
import AdventureCard from '$lib/components/AdventureCard.svelte';
import EditAdventure from '$lib/components/EditAdventure.svelte';
import NewAdventure from '$lib/components/NewAdventure.svelte';
import NotFound from '$lib/components/NotFound.svelte';
import type { Adventure } from '$lib/types';
import Plus from '~icons/mdi/plus';
export let data: any;
console.log(data);
let adventures: Adventure[] = data.adventures || [];
let currentSort = { attribute: 'name', order: 'asc' };
let isShowingCreateModal: boolean = false;
let newType: string = '';
function handleSubmit() {
return async ({ result, update }: any) => {
// First, call the update function with reset: false
update({ reset: false });
// Then, handle the result
if (result.type === 'success') {
if (result.data) {
// console.log(result.data);
adventures = result.data as Adventure[];
sort(currentSort);
}
}
};
}
function sort({ attribute, order }: { attribute: string; order: string }) {
currentSort.attribute = attribute;
currentSort.order = order;
if (attribute === 'name') {
if (order === 'asc') {
adventures = adventures.sort((a, b) => a.name.localeCompare(b.name));
} else {
adventures = adventures.sort((a, b) => b.name.localeCompare(a.name));
}
}
}
let adventureToEdit: Adventure;
let isEditModalOpen: boolean = false;
function deleteAdventure(event: CustomEvent<number>) {
adventures = adventures.filter((adventure) => adventure.id !== event.detail);
}
function createAdventure(event: CustomEvent<Adventure>) {
adventures = [event.detail, ...adventures];
isShowingCreateModal = false;
}
function editAdventure(event: CustomEvent<Adventure>) {
adventureToEdit = event.detail;
isEditModalOpen = true;
}
function saveEdit(event: CustomEvent<Adventure>) {
adventures = adventures.map((adventure) => {
if (adventure.id === event.detail.id) {
return event.detail;
}
return adventure;
});
isEditModalOpen = false;
}
let sidebarOpen = false;
function toggleSidebar() {
sidebarOpen = !sidebarOpen;
}
</script>

{#if isShowingCreateModal}
<NewAdventure
type={newType}
on:create={createAdventure}
on:close={() => (isShowingCreateModal = false)}
/>
{/if}

{#if isEditModalOpen}
<EditAdventure
{adventureToEdit}
on:close={() => (isEditModalOpen = false)}
on:saveEdit={saveEdit}
/>
{/if}

<div class="fixed bottom-4 right-4 z-[999]">
<div class="flex flex-row items-center justify-center gap-4">
<div class="dropdown dropdown-top dropdown-end">
<div tabindex="0" role="button" class="btn m-1 size-16 btn-primary">
<Plus class="w-8 h-8" />
</div>
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
<ul
tabindex="0"
class="dropdown-content z-[1] menu p-4 shadow bg-base-300 text-base-content rounded-box w-52 gap-4"
>
<p class="text-center font-bold text-lg">Create new...</p>
<button
class="btn btn-primary"
on:click={() => {
isShowingCreateModal = true;
newType = 'visited';
}}
>
Visited Adventure</button
>
<!-- <button
class="btn btn-primary"
on:click={() => (isShowingNewTrip = true)}>Trip Planner</button
> -->
</ul>
</div>
</div>
</div>

<div class="drawer lg:drawer-open">
<input id="my-drawer" type="checkbox" class="drawer-toggle" bind:checked={sidebarOpen} />
<div class="drawer-content">
<!-- Page content -->
<h1 class="text-center font-bold text-4xl mb-6">My Adventures</h1>
{#if adventures.length === 0}
<NotFound />
{/if}
<div class="p-4">
<button
class="btn btn-primary drawer-button lg:hidden mb-4 fixed bottom-0 left-0 ml-2 z-[999]"
on:click={toggleSidebar}
>
{sidebarOpen ? 'Close Filters' : 'Open Filters'}
</button>
<div class="flex flex-wrap gap-4 mr-4 justify-center content-center">
{#each adventures as adventure}
<AdventureCard
type={adventure.type}
{adventure}
on:delete={deleteAdventure}
on:edit={editAdventure}
/>
{/each}
</div>
</div>
</div>
<div class="drawer-side">
<label for="my-drawer" class="drawer-overlay"></label>
<ul class="menu p-4 w-80 h-full bg-base-200 text-base-content rounded-lg">
<!-- Sidebar content here -->
<h3 class="text-center font-semibold text-lg mb-4">Adventure Types</h3>
<div class="form-control">
<form action="?/get" method="post" use:enhance={handleSubmit}>
<label class="label cursor-pointer">
<span class="label-text">Completed</span>
<input
type="checkbox"
name="visited"
id="visited"
class="checkbox checkbox-primary"
checked
/>
</label>
<label class="label cursor-pointer">
<span class="label-text">Planned</span>
<input
type="checkbox"
id="planned"
name="planned"
class="checkbox checkbox-primary"
checked
/>
</label>
<label class="label cursor-pointer">
<span class="label-text">Featured</span>
<input
type="checkbox"
id="featured"
name="featured"
class="checkbox checkbox-primary"
/>
</label>

<button type="submit" class="btn btn-primary mt-4">Filter</button>
<div class="divider"></div>
<h3 class="text-center font-semibold text-lg mb-4">Sort</h3>
<label for="name-asc">Name ASC</label>
<input
type="radio"
name="name"
id="name-asc"
class="radio radio-primary"
checked
on:click={() => sort({ attribute: 'name', order: 'asc' })}
/>
<label for="name-desc">Name DESC</label>
<input
type="radio"
name="name"
id="name-desc"
class="radio radio-primary"
on:click={() => sort({ attribute: 'name', order: 'desc' })}
/>
</form>
</div>
</ul>
</div>
</div>
Loading

0 comments on commit 9029614

Please sign in to comment.