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

collections v3

Browse source
This commit is contained in:
Sean Morley 2024-07-15 18:01:49 -04:00
parent e533dda328
commit 7e5e4edd4d
9 changed files with 266 additions and 158 deletions
Download patch file Download diff file Expand all files Collapse all files

2
backend/server/adventures/serializers.py
View file

@ -24,7 +24,7 @@ class CollectionSerializer(serializers.ModelSerializer):
class Meta: class Meta:
model = Collection model = Collection
# fields are all plus the adventures field # fields are all plus the adventures field
fields = ['id', 'user_id', 'name', 'is_public', 'adventures'] fields = ['id', 'description', 'user_id', 'name', 'is_public', 'adventures']

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

@ -30,7 +30,7 @@ class AdventureViewSet(viewsets.ModelViewSet):
def apply_sorting(self, queryset): def apply_sorting(self, queryset):
order_by = self.request.query_params.get('order_by', 'name') order_by = self.request.query_params.get('order_by', 'name')
order_direction = self.request.query_params.get('order_direction', 'asc') order_direction = self.request.query_params.get('order_direction', 'asc')
include_collections = self.request.query_params.get('include_collections', 'false') include_collections = self.request.query_params.get('include_collections', 'true')
valid_order_by = ['name', 'type', 'date', 'rating'] valid_order_by = ['name', 'type', 'date', 'rating']
if order_by not in valid_order_by: if order_by not in valid_order_by:

1
frontend/src/lib/components/AdventureLink.svelte
View file

@ -49,6 +49,7 @@
<!-- svelte-ignore a11y-no-noninteractive-element-interactions --> <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<!-- svelte-ignore a11y-no-noninteractive-tabindex --> <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
<div class="modal-box" role="dialog" on:keydown={handleKeydown} tabindex="0"> <div class="modal-box" role="dialog" on:keydown={handleKeydown} tabindex="0">
<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 type="link" {adventure} on:link={add} />

11
frontend/src/lib/components/CollectionCard.svelte
View file

@ -1,11 +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 Launch from '~icons/mdi/launch';
import TrashCanOutline from '~icons/mdi/trash-can-outline'; import TrashCanOutline from '~icons/mdi/trash-can-outline';
import FileDocumentEdit from '~icons/mdi/file-document-edit';
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import type { Collection } from '$lib/types'; import type { Collection } from '$lib/types';
import { addToast } from '$lib/toasts'; import { addToast } from '$lib/toasts';
@ -13,6 +13,10 @@
// export let type: String; // export let type: String;
function editAdventure() {
dispatch('edit', collection);
}
export let collection: Collection; export let collection: Collection;
async function deleteCollection() { async function deleteCollection() {
@ -42,6 +46,9 @@
<button on:click={deleteCollection} class="btn btn-secondary" <button on:click={deleteCollection} class="btn btn-secondary"
><TrashCanOutline class="w-5 h-5 mr-1" /></button ><TrashCanOutline class="w-5 h-5 mr-1" /></button
> >
<button class="btn btn-primary" on:click={editAdventure}>
<FileDocumentEdit class="w-6 h-6" />
</button>
<button class="btn btn-primary" on:click={() => goto(`/collections/${collection.id}`)} <button class="btn btn-primary" on:click={() => goto(`/collections/${collection.id}`)}
><Launch class="w-5 h-5 mr-1" /></button ><Launch class="w-5 h-5 mr-1" /></button
> >

162
frontend/src/lib/components/EditCollection.svelte Normal file
View file

@ -0,0 +1,162 @@
<script lang="ts">
export let collectionToEdit: Collection;
import { createEventDispatcher } from 'svelte';
import type { Adventure, Collection } from '$lib/types';
const dispatch = createEventDispatcher();
import { onMount } from 'svelte';
import { addToast } from '$lib/toasts';
let modal: HTMLDialogElement;
console.log(collectionToEdit.id);
let originalName = collectionToEdit.name;
let isPointModalOpen: boolean = false;
import MapMarker from '~icons/mdi/map-marker';
import Calendar from '~icons/mdi/calendar';
import Notebook from '~icons/mdi/notebook';
import ClipboardList from '~icons/mdi/clipboard-list';
import Image from '~icons/mdi/image';
import Star from '~icons/mdi/star';
import Attachment from '~icons/mdi/attachment';
import PointSelectionModal from './PointSelectionModal.svelte';
import Earth from '~icons/mdi/earth';
onMount(async () => {
modal = document.getElementById('my_modal_1') as HTMLDialogElement;
if (modal) {
modal.showModal();
}
});
function submit() {}
function close() {
dispatch('close');
}
function handleKeydown(event: KeyboardEvent) {
if (event.key === 'Escape') {
close();
}
}
async function handleSubmit(event: Event) {
event.preventDefault();
const form = event.target as HTMLFormElement;
const formData = new FormData(form);
const response = await fetch(form.action, {
method: form.method,
body: formData
});
if (response.ok) {
const result = await response.json();
const data = JSON.parse(result.data);
console.log(data);
if (data) {
addToast('success', 'Adventure edited successfully!');
dispatch('saveEdit', collectionToEdit);
close();
} else {
addToast('warning', 'Error editing adventure');
console.log('Error editing adventure');
}
}
}
</script>
<dialog id="my_modal_1" class="modal">
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
<div class="modal-box" role="dialog" on:keydown={handleKeydown} tabindex="0">
<h3 class="font-bold text-lg">Edit Collection: {originalName}</h3>
<div
class="modal-action items-center"
style="display: flex; flex-direction: column; align-items: center; width: 100%;"
>
<form method="post" style="width: 100%;" on:submit={handleSubmit} action="/collections?/edit">
<div class="mb-2">
<input
type="text"
id="adventureId"
name="adventureId"
hidden
readonly
bind:value={collectionToEdit.id}
class="input input-bordered w-full max-w-xs mt-1"
/>
<label for="name">Name</label><br />
<input
type="text"
name="name"
id="name"
bind:value={collectionToEdit.name}
class="input input-bordered w-full max-w-xs mt-1"
/>
</div>
<div class="mb-2">
<label for="date">Description <Notebook class="inline-block -mt-1 mb-1 w-6 h-6" /></label
><br />
<div class="flex">
<input
type="text"
id="description"
name="description"
bind:value={collectionToEdit.description}
class="input input-bordered w-full max-w-xs mt-1 mb-2"
/>
<!-- <button
class="btn btn-neutral ml-2"
type="button"
on:click={generate}
><iconify-icon icon="mdi:wikipedia" class="text-xl -mb-1"
></iconify-icon>Generate Description</button
> -->
</div>
</div>
<div class="mb-2">
<label for="is_public">Public <Earth class="inline-block -mt-1 mb-1 w-6 h-6" /></label><br
/>
<input
type="checkbox"
class="toggle toggle-primary"
id="is_public"
name="is_public"
bind:checked={collectionToEdit.is_public}
/>
</div>
{#if collectionToEdit.is_public}
<div class="bg-neutral p-4 rounded-md shadow-sm">
<p class=" font-semibold">Share this Adventure!</p>
<div class="flex items-center justify-between">
<p class="text-card-foreground font-mono">
{window.location.origin}/collections/{collectionToEdit.id}
</p>
<button
type="button"
on:click={() => {
navigator.clipboard.writeText(
`${window.location.origin}/collections/${collectionToEdit.id}`
);
}}
class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-10 px-4 py-2"
>
Copy Link
</button>
</div>
</div>
{/if}
<button type="submit" class="btn btn-primary mr-4 mt-4" on:click={submit}>Edit</button>
<!-- if there is a button in form, it will close the modal -->
<button class="btn mt-4" on:click={close}>Close</button>
</form>
<div class="flex items-center justify-center flex-wrap gap-4 mt-4"></div>
</div>
</div>
</dialog>

3
frontend/src/routes/adventures/+page.server.ts
View file

@ -18,7 +18,7 @@ export const load = (async (event) => {
let count = 0; let count = 0;
let adventures: Adventure[] = []; let adventures: Adventure[] = [];
let initialFetch = await fetch( let initialFetch = await fetch(
`${serverEndpoint}/api/adventures/filtered?types=visited,planned`, `${serverEndpoint}/api/adventures/filtered?types=visited,planned&include_collections=false`,
{ {
headers: { headers: {
Cookie: `${event.cookies.get('auth')}` Cookie: `${event.cookies.get('auth')}`
@ -369,6 +369,7 @@ export const actions: Actions = {
} else { } else {
include_collections = 'false'; include_collections = 'false';
} }
const order_direction = formData.get('order_direction') as string; const order_direction = formData.get('order_direction') as string;
const order_by = formData.get('order_by') as string; const order_by = formData.get('order_by') as string;

224
frontend/src/routes/collections/+page.server.ts
View file

@ -129,164 +129,96 @@ export const actions: Actions = {
return { id, user_id }; return { id, user_id };
}, },
// edit: async (event) => { edit: async (event) => {
// const formData = await event.request.formData(); const formData = await event.request.formData();
// const adventureId = formData.get('adventureId') as string; const collectionId = formData.get('adventureId') as string;
// const type = formData.get('type') as string; const name = formData.get('name') as string;
// const name = formData.get('name') as string; const description = formData.get('description') as string | null;
// const location = formData.get('location') as string | null; let is_public = formData.get('is_public') as string | null | boolean;
// let date = (formData.get('date') as string | null) ?? null;
// const description = formData.get('description') as string | null;
// let activity_types = formData.get('activity_types')
// ? (formData.get('activity_types') as string).split(',')
// : null;
// const rating = formData.get('rating') ? Number(formData.get('rating')) : null;
// let link = formData.get('link') as string | null;
// let latitude = formData.get('latitude') as string | null;
// let longitude = formData.get('longitude') as string | null;
// let is_public = formData.get('is_public') as string | null | boolean;
// if (is_public) { if (is_public) {
// is_public = true; is_public = true;
// } else { } else {
// is_public = false; is_public = false;
// } }
// // check if latitude and longitude are valid if (!name) {
// if (latitude && longitude) { return {
// if (isNaN(Number(latitude)) || isNaN(Number(longitude))) { status: 400,
// return { body: { error: 'Missing name.' }
// status: 400, };
// body: { error: 'Invalid latitude or longitude' } }
// };
// }
// }
// // round latitude and longitude to 6 decimal places const formDataToSend = new FormData();
// if (latitude) { formDataToSend.append('name', name);
// latitude = Number(latitude).toFixed(6); formDataToSend.append('description', description || '');
// } formDataToSend.append('is_public', is_public.toString());
// if (longitude) {
// longitude = Number(longitude).toFixed(6);
// }
// const image = formData.get('image') as File; let auth = event.cookies.get('auth');
// // console.log(activity_types); if (!auth) {
const refresh = event.cookies.get('refresh');
if (!refresh) {
return {
status: 401,
body: { message: 'Unauthorized' }
};
}
let res = await tryRefreshToken(refresh);
if (res) {
auth = res;
event.cookies.set('auth', auth, {
httpOnly: true,
sameSite: 'lax',
expires: new Date(Date.now() + 60 * 60 * 1000), // 60 minutes
path: '/'
});
} else {
return {
status: 401,
body: { message: 'Unauthorized' }
};
}
}
// if (!type || !name) { if (!auth) {
// return { return {
// status: 400, status: 401,
// body: { error: 'Missing required fields' } body: { message: 'Unauthorized' }
// }; };
// } }
// if (date == null || date == '') { const csrfToken = await fetchCSRFToken();
// date = null;
// }
// if (link) { if (!csrfToken) {
// link = checkLink(link); return {
// } status: 500,
body: { message: 'Failed to fetch CSRF token' }
};
}
// const formDataToSend = new FormData(); const res = await fetch(`${serverEndpoint}/api/collections/${collectionId}/`, {
// formDataToSend.append('type', type); method: 'PATCH',
// formDataToSend.append('name', name); headers: {
// formDataToSend.append('location', location || ''); 'X-CSRFToken': csrfToken,
// formDataToSend.append('date', date || ''); Cookie: auth
// formDataToSend.append('description', description || ''); },
// formDataToSend.append('latitude', latitude || ''); body: formDataToSend
// formDataToSend.append('longitude', longitude || ''); });
// formDataToSend.append('is_public', is_public.toString());
// if (activity_types) {
// // Filter out empty and duplicate activity types, then trim each activity type
// const cleanedActivityTypes = Array.from(
// new Set(
// activity_types
// .map((activity_type) => activity_type.trim())
// .filter((activity_type) => activity_type !== '' && activity_type !== ',')
// )
// );
// // Append each cleaned activity type to formDataToSend if (!res.ok) {
// cleanedActivityTypes.forEach((activity_type) => { const errorBody = await res.json();
// formDataToSend.append('activity_types', activity_type); return {
// }); status: res.status,
// } body: { error: errorBody }
// formDataToSend.append('rating', rating ? rating.toString() : ''); };
// formDataToSend.append('link', link || ''); }
// if (image && image.size > 0) { return {
// formDataToSend.append('image', image); status: 200
// } };
},
// let auth = event.cookies.get('auth');
// if (!auth) {
// const refresh = event.cookies.get('refresh');
// if (!refresh) {
// return {
// status: 401,
// body: { message: 'Unauthorized' }
// };
// }
// let res = await tryRefreshToken(refresh);
// if (res) {
// auth = res;
// event.cookies.set('auth', auth, {
// httpOnly: true,
// sameSite: 'lax',
// expires: new Date(Date.now() + 60 * 60 * 1000), // 60 minutes
// path: '/'
// });
// } else {
// return {
// status: 401,
// body: { message: 'Unauthorized' }
// };
// }
// }
// if (!auth) {
// return {
// status: 401,
// body: { message: 'Unauthorized' }
// };
// }
// const csrfToken = await fetchCSRFToken();
// if (!csrfToken) {
// return {
// status: 500,
// body: { message: 'Failed to fetch CSRF token' }
// };
// }
// const res = await fetch(`${serverEndpoint}/api/adventures/${adventureId}/`, {
// method: 'PATCH',
// headers: {
// 'X-CSRFToken': csrfToken,
// Cookie: auth
// },
// body: formDataToSend
// });
// if (!res.ok) {
// const errorBody = await res.json();
// return {
// status: res.status,
// body: { error: errorBody }
// };
// }
// let adventure = await res.json();
// let image_url = adventure.image;
// let link_url = adventure.link;
// return { image_url, link_url };
// },
get: async (event) => { get: async (event) => {
if (!event.locals.user) { if (!event.locals.user) {
} }

13
frontend/src/routes/collections/+page.svelte
View file

@ -3,6 +3,7 @@
import AdventureCard from '$lib/components/AdventureCard.svelte'; import AdventureCard from '$lib/components/AdventureCard.svelte';
import CollectionCard from '$lib/components/CollectionCard.svelte'; import CollectionCard from '$lib/components/CollectionCard.svelte';
import EditAdventure from '$lib/components/EditAdventure.svelte'; import EditAdventure from '$lib/components/EditAdventure.svelte';
import EditCollection from '$lib/components/EditCollection.svelte';
import NewAdventure from '$lib/components/NewAdventure.svelte'; import NewAdventure from '$lib/components/NewAdventure.svelte';
import NewCollection from '$lib/components/NewCollection.svelte'; import NewCollection from '$lib/components/NewCollection.svelte';
import NotFound from '$lib/components/NotFound.svelte'; import NotFound from '$lib/components/NotFound.svelte';
@ -94,7 +95,7 @@
isShowingCreateModal = false; isShowingCreateModal = false;
} }
function editAdventure(event: CustomEvent<Collection>) { function editCollection(event: CustomEvent<Collection>) {
collectionToEdit = event.detail; collectionToEdit = event.detail;
isEditModalOpen = true; isEditModalOpen = true;
} }
@ -120,13 +121,13 @@
<NewCollection on:create={createAdventure} on:close={() => (isShowingCreateModal = false)} /> <NewCollection on:create={createAdventure} on:close={() => (isShowingCreateModal = false)} />
{/if} {/if}
<!-- {#if isEditModalOpen} {#if isEditModalOpen}
<EditAdventure <EditCollection
adventureToEdit={collectionToEdit} {collectionToEdit}
on:close={() => (isEditModalOpen = false)} on:close={() => (isEditModalOpen = false)}
on:saveEdit={saveEdit} on:saveEdit={saveEdit}
/> />
{/if} --> {/if}
<div class="fixed bottom-4 right-4 z-[999]"> <div class="fixed bottom-4 right-4 z-[999]">
<div class="flex flex-row items-center justify-center gap-4"> <div class="flex flex-row items-center justify-center gap-4">
@ -178,7 +179,7 @@
{#if currentView == 'cards'} {#if currentView == 'cards'}
<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 collections as collection} {#each collections as collection}
<CollectionCard {collection} on:delete={deleteCollection} /> <CollectionCard {collection} on:delete={deleteCollection} on:edit={editCollection} />
{/each} {/each}
</div> </div>
{/if} {/if}

6
frontend/src/routes/collections/[id]/+page.svelte
View file

@ -27,6 +27,10 @@
} }
}); });
function deleteAdventure(event: CustomEvent<number>) {
adventures = adventures.filter((a) => a.id !== event.detail);
}
async function addAdventure(event: CustomEvent<Adventure>) { async function addAdventure(event: CustomEvent<Adventure>) {
console.log(event.detail); console.log(event.detail);
if (adventures.find((a) => a.id === event.detail.id)) { if (adventures.find((a) => a.id === event.detail.id)) {
@ -123,7 +127,7 @@
<h1 class="text-center font-semibold text-2xl mt-4 mb-2">Linked Adventures</h1> <h1 class="text-center font-semibold text-2xl mt-4 mb-2">Linked 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={adventure.type} {adventure} /> <AdventureCard on:delete={deleteAdventure} type={adventure.type} {adventure} />
{/each} {/each}
</div> </div>