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

refactor: Update API endpoint for fetching visited adventures

Browse source
This commit is contained in:
Sean Morley 2024-07-12 22:07:36 -04:00
parent 34f26b36dd
commit cab7824510
8 changed files with 16 additions and 269 deletions
Download patch file Download diff file Expand all files Collapse all files

10
backend/server/adventures/views.py
View file

@ -62,6 +62,16 @@ class AdventureViewSet(viewsets.ModelViewSet):
adventures = self.paginate_and_respond(queryset, request)
return adventures
@action(detail=False, methods=['get'])
def all(self, request):
# return error if user is not authenticated
if not request.user.is_authenticated:
return Response({"error": "User is not authenticated"}, status=400)
queryset = Adventure.objects.filter(user_id=request.user.id).exclude(type='featured')
serializer = self.get_serializer(queryset, many=True)
return Response(serializer.data)
def paginate_and_respond(self, queryset, request):
paginator = self.pagination_class()
page = paginator.paginate_queryset(queryset, request)

8
docker-compose.yml
View file

@ -2,8 +2,8 @@ version: "3.9"
services:
web:
build: ./frontend/
#image: ghcr.io/seanmorley15/adventurelog-frontend:latest
#build: ./frontend/
image: ghcr.io/seanmorley15/adventurelog-frontend:latest
environment:
- PUBLIC_SERVER_URL=http://server:8000
- ORIGIN=http://localhost:8080
@ -23,8 +23,8 @@ services:
- postgres_data:/var/lib/postgresql/data/
server:
build: ./backend/
#image: ghcr.io/seanmorley15/adventurelog-backend:latest
#build: ./backend/
image: ghcr.io/seanmorley15/adventurelog-backend:latest
environment:
- PGHOST=db
- PGDATABASE=database

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

@ -40,7 +40,7 @@
</p>
</div>
<div class="flex flex-col gap-2 min-[400px]:flex-row">
<button on:click={() => goto('/visited')} class="btn btn-primary">
<button on:click={() => goto('/adventures')} class="btn btn-primary">
Go To AdventureLog
</button>
</div>

2
frontend/src/routes/map/+page.server.ts
View file

@ -8,7 +8,7 @@ export const load = (async (event) => {
if (!event.locals.user) {
return redirect(302, '/login');
} else {
let visitedFetch = await fetch(`${endpoint}/api/adventures/`, {
let visitedFetch = await fetch(`${endpoint}/api/adventures/all/`, {
headers: {
Cookie: `${event.cookies.get('auth')}`
}

28
frontend/src/routes/planner/+page.server.ts
View file

@ -1,28 +0,0 @@
import { redirect } from '@sveltejs/kit';
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';
export const load = (async (event) => {
if (!event.locals.user) {
return redirect(302, '/login');
} else {
let plannedFetch = await fetch(`${endpoint}/api/adventures/planned/`, {
headers: {
Cookie: `${event.cookies.get('auth')}`
}
});
if (!plannedFetch.ok) {
console.error('Failed to fetch planned adventures');
return redirect(302, '/login');
} else {
let planned = (await plannedFetch.json()) as Adventure[];
return {
props: {
planned
}
};
}
}
}) satisfies PageServerLoad;

111
frontend/src/routes/planner/+page.svelte
View file

@ -1,111 +0,0 @@
<script lang="ts">
import AdventureCard from '$lib/components/AdventureCard.svelte';
import NewAdventure from '$lib/components/NewAdventure.svelte';
import type { Adventure } from '$lib/types';
import Plus from '~icons/mdi/plus';
import type { PageData } from './$types';
import EditAdventure from '$lib/components/EditAdventure.svelte';
import Lost from '$lib/assets/undraw_lost.svg';
export let data: PageData;
console.log(data);
let adventures: Adventure[] = data.props.planned;
let isShowingCreateModal: boolean = false;
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;
}
</script>
{#if isShowingCreateModal}
<NewAdventure
type="planned"
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)}
>Planned Adventure</button
>
<!-- <button
class="btn btn-primary"
on:click={() => (isShowingNewTrip = true)}>Trip Planner</button
> -->
</ul>
</div>
</div>
</div>
{#if adventures.length > 0}
<h1 class="text-center font-bold text-4xl mb-4">Planned Adventures</h1>
{/if}
<div class="flex flex-wrap gap-4 mr-4 ml-4 justify-center content-center">
{#each adventures as adventure}
<AdventureCard type="planned" {adventure} on:delete={deleteAdventure} on:edit={editAdventure} />
{/each}
</div>
{#if adventures.length === 0}
<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 planned 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!
</p>
</div>
</div>
{/if}

28
frontend/src/routes/visited/+page.server.ts
View file

@ -1,28 +0,0 @@
import { redirect } from '@sveltejs/kit';
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';
export const load = (async (event) => {
if (!event.locals.user) {
return redirect(302, '/login');
} else {
let visitedFetch = await fetch(`${endpoint}/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[];
return {
props: {
visited
}
};
}
}
}) satisfies PageServerLoad;

96
frontend/src/routes/visited/+page.svelte
View file

@ -1,96 +0,0 @@
<script lang="ts">
import AdventureCard from '$lib/components/AdventureCard.svelte';
import NewAdventure from '$lib/components/NewAdventure.svelte';
import type { Adventure } from '$lib/types';
import Plus from '~icons/mdi/plus';
import type { PageData } from './$types';
import EditAdventure from '$lib/components/EditAdventure.svelte';
import Lost from '$lib/assets/undraw_lost.svg';
import NotFound from '$lib/components/NotFound.svelte';
export let data: PageData;
console.log(data);
let adventures: Adventure[] = data.props.visited;
let isShowingCreateModal: boolean = false;
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;
}
</script>
{#if isShowingCreateModal}
<NewAdventure
type="visited"
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)}
>Visited Adventure</button
>
<!-- <button
class="btn btn-primary"
on:click={() => (isShowingNewTrip = true)}>Trip Planner</button
> -->
</ul>
</div>
</div>
</div>
{#if adventures.length > 0}
<h1 class="text-center font-bold text-4xl mb-4">Visited Adventures</h1>
{:else}
<NotFound />
{/if}
<div class="flex flex-wrap gap-4 mr-4 ml-4 justify-center content-center">
{#each adventures as adventure}
<AdventureCard type="visited" {adventure} on:delete={deleteAdventure} on:edit={editAdventure} />
{/each}
</div>