Merge pull request #130 from seanmorley15/development

Development

README.md

@@ -10,7 +10,7 @@ _**⚠️ AdventureLog is in early development and is not recommended for produc
 
 # Docker 🐋
 
-Docker is the perffered way to run AdventureLog on your local machine. It is a lightweight containerization technology that allows you to run applications in isolated environments called containers.
+Docker is the preferred way to run AdventureLog on your local machine. It is a lightweight containerization technology that allows you to run applications in isolated environments called containers.
 **Note**: This guide mainly focuses on installation with a linux based host machine, but the steps are similar for other operating systems.
 
 ## Prerequisites
@@ -53,6 +53,35 @@ Here is a summary of the configuration options available in the `docker-compose.
 | `PUBLIC_URL`            | Yes      | This is the publically accessible url to the **nginx** container. You should be able to acess nginx from this url where you access your app. | http://127.0.0.1:81  |
 | `CSRF_TRUSTED_ORIGINS`  | Yes      | Need to be changed to the orgins where you use your backend server and frontend. These values are comma seperated.                           | Needs to be changed. |
 
+### Proxy Container (nginx) Configuration
+
+In order to use media files in a production environment, you need to configure the `nginx` container to serve the media files. The container is already in the docker compose file but you need to do a few things to make it work.
+
+1. Create a directory called `proxy` in the same directory as the `docker-compose.yml` file.
+2. Create a file called `nginx.conf` in the `proxy` directory.
+3. Add the following configuration to the `nginx.conf` file:
+
+```nginx
+server {
+    listen 80;
+    server_name localhost;
+
+    location /media/ {
+        alias /app/media/;
+    }
+}
+```
+
+## Running the Containers
+
+To start the containers, run the following command:
+
+```bash
+docker compose up -d
+```
+
+Enjoy AdventureLog! 🎉
+
 # About AdventureLog
 
 AdventureLog is a Svelte Kit and Django application that utilizes a PostgreSQL database. Users can log the adventures they have experienced, as well as plan future ones. Key features include:

frontend/src/lib/components/AdventureCard.svelte

@@ -16,6 +16,7 @@
 	import LinkVariantRemove from '~icons/mdi/link-variant-remove';
 	import Plus from '~icons/mdi/plus';
 	import CollectionLink from './CollectionLink.svelte';
+	import DotsHorizontal from '~icons/mdi/dots-horizontal';
 
 	export let type: string;
 
@@ -108,7 +109,7 @@
 {/if}
 
 <div
-	class="card w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-md xl:max-w-md bg-primary-content shadow-xl overflow-hidden text-base-content"
+	class="card w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-md xl:max-w-md bg-primary-content shadow-xl text-base-content"
 >
 	<figure>
 		<!-- svelte-ignore a11y-img-redundant-alt -->
@@ -124,16 +125,18 @@
 	</figure>
 
 	<div class="card-body">
-		<h2 class="card-title break-words text-wrap">
+		<div class="flex justify-between">
-			{adventure.name}
+			<h2 class="text-2xl font-semibold -mt-2 break-words text-wrap">
-		</h2>
+				{adventure.name}
-		<div>
+			</h2>
-			{#if adventure.type == 'visited'}
+			<div>
-				<div class="badge badge-primary">Visited</div>
+				{#if adventure.type == 'visited'}
-			{:else}
+					<div class="badge badge-primary">Visited</div>
-				<div class="badge badge-secondary">Planned</div>
+				{:else}
-			{/if}
+					<div class="badge badge-secondary">Planned</div>
-			<div class="badge badge-neutral">{adventure.is_public ? 'Public' : 'Private'}</div>
+				{/if}
+				<div class="badge badge-neutral">{adventure.is_public ? 'Public' : 'Private'}</div>
+			</div>
 		</div>
 		{#if adventure.location && adventure.location !== ''}
 			<div class="inline-flex items-center">
@@ -157,52 +160,50 @@
 			</ul>
 		{/if}
 		<div class="card-actions justify-end mt-2">
-			{#if type == 'visited'}
+			<!-- action options dropdown -->
-				<button class="btn btn-primary" on:click={() => goto(`/adventures/${adventure.id}`)}
+			<div class="dropdown dropdown-end">
-					><Launch class="w-6 h-6" /></button
+				<div tabindex="0" role="button" class="btn btn-neutral">
+					<DotsHorizontal class="w-6 h-6" />
+				</div>
+				<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+				<ul
+					tabindex="0"
+					class="dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow"
 				>
-				<button class="btn btn-primary" on:click={editAdventure}>
+					<button class="btn btn-neutral mb-2" on:click={() => goto(`/adventures/${adventure.id}`)}
-					<FileDocumentEdit class="w-6 h-6" />
+						><Launch class="w-6 h-6" />Open Details</button
-				</button>
+					>
-				<button class="btn btn-warning" on:click={deleteAdventure}
+					<button class="btn btn-neutral mb-2" on:click={editAdventure}>
-					><TrashCan class="w-6 h-6" /></button
+						<FileDocumentEdit class="w-6 h-6" />Edit Adventure
-				>
+					</button>
-			{/if}
+					{#if adventure.type == 'visited'}
-			{#if type == 'planned'}
+						<button class="btn btn-neutral mb-2" on:click={changeType('planned')}
-				<button class="btn btn-primary" on:click={() => goto(`/adventures/${adventure.id}`)}
+							><FormatListBulletedSquare class="w-6 h-6" />Change to Plan</button
-					><Launch class="w-6 h-6" /></button
+						>
-				>
+					{/if}
-				<button class="btn btn-primary" on:click={editAdventure}>
+					{#if adventure.type == 'planned'}
-					<FileDocumentEdit class="w-6 h-6" />
+						<button class="btn btn-neutral mb-2" on:click={changeType('visited')}
-				</button>
+							><CheckBold class="w-6 h-6" />Mark Visited</button
-				<button class="btn btn-warning" on:click={deleteAdventure}
+						>
-					><TrashCan class="w-6 h-6" /></button
+					{/if}
-				>
+					{#if adventure.collection}
-			{/if}
+						<button class="btn btn-neutral mb-2" on:click={removeFromCollection}
-			{#if type == 'link'}
+							><LinkVariantRemove class="w-6 h-6" />Remove from Collection</button
-				<button class="btn btn-primary" on:click={link}><Link class="w-6 h-6" /></button>
+						>
-			{/if}
+					{/if}
-			{#if adventure.type == 'visited'}
+					{#if !adventure.collection}
-				<button class="btn btn-secondary" on:click={changeType('planned')}
+						<button class="btn btn-neutral mb-2" on:click={() => (isCollectionModalOpen = true)}
-					><FormatListBulletedSquare class="w-6 h-6" /></button
+							><Plus class="w-6 h-6" />Add to Collection</button
-				>
+						>
-			{/if}
+					{/if}
-
+					{#if type == 'link'}
-			{#if adventure.type == 'planned'}
+						<button class="btn btn-primary" on:click={link}><Link class="w-6 h-6" /></button>
-				<button class="btn btn-secondary" on:click={changeType('visited')}
+					{/if}
-					><CheckBold class="w-6 h-6" /></button
+					<button class="btn btn-warning" on:click={deleteAdventure}
-				>
+						><TrashCan class="w-6 h-6" />Delete</button
-			{/if}
+					>
-			{#if adventure.collection}
+				</ul>
-				<button class="btn btn-secondary" on:click={removeFromCollection}
+			</div>
-					><LinkVariantRemove class="w-6 h-6" /></button
-				>
-			{/if}
-			{#if !adventure.collection}
-				<button class="btn btn-secondary" on:click={() => (isCollectionModalOpen = true)}
-					><Plus class="w-6 h-6" /></button
-				>
-			{/if}
 		</div>
 	</div>
 </div>

frontend/src/lib/components/EditAdventure.svelte

@@ -12,17 +12,21 @@
 	let originalName = adventureToEdit.name;
 
 	let isPointModalOpen: boolean = false;
+	let isImageFetcherOpen: boolean = false;
+
+	let fileInput: HTMLInputElement;
+	let image: File;
 
 	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';
 	import Wikipedia from '~icons/mdi/wikipedia';
+	import ImageFetcher from './ImageFetcher.svelte';
 
 	onMount(async () => {
 		modal = document.getElementById('my_modal_1') as HTMLDialogElement;
@@ -88,6 +92,23 @@
 			}
 		}
 	}
+
+	function handleImageFetch(event: CustomEvent) {
+		const file = event.detail.file;
+		if (file && fileInput) {
+			// Create a DataTransfer object and add the file
+			const dataTransfer = new DataTransfer();
+			dataTransfer.items.add(file);
+
+			// Set the files property of the file input
+			fileInput.files = dataTransfer.files;
+
+			// Update the adventureToEdit object
+			adventureToEdit.image = file;
+		}
+		isImageFetcherOpen = false;
+	}
+
 	function setLongLat(event: CustomEvent<[number, number]>) {
 		console.log(event.detail);
 		adventureToEdit.latitude = event.detail[1];
@@ -105,6 +126,10 @@
 	/>
 {/if}
 
+{#if isImageFetcherOpen}
+	<ImageFetcher on:image={handleImageFetch} on:close={() => (isImageFetcherOpen = false)} />
+{/if}
+
 <dialog id="my_modal_1" class="modal">
 	<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 	<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
@@ -193,14 +218,23 @@
 					/>
 				</div>
 				<div class="mb-2">
-					<label for="image">Image <Image class="inline-block -mt-1 mb-1 w-6 h-6" /></label><br />
+					<label for="image">Image </label><br />
-					<input
+					<div class="flex">
-						type="file"
+						<input
-						id="image"
+							type="file"
-						name="image"
+							id="image"
-						bind:value={adventureToEdit.image}
+							name="image"
-						class="file-input file-input-bordered w-full max-w-xs mt-1"
+							bind:value={image}
-					/>
+							bind:this={fileInput}
+							class="file-input file-input-bordered w-full max-w-xs mt-1"
+						/>
+						<button
+							class="btn btn-neutral ml-2"
+							type="button"
+							on:click={() => (isImageFetcherOpen = true)}
+							><Wikipedia class="inline-block -mt-1 mb-1 w-6 h-6" />Image Search</button
+						>
+					</div>
 				</div>
 				<div class="mb-2">
 					<label for="link">Link <Attachment class="inline-block -mt-1 mb-1 w-6 h-6" /></label><br

frontend/src/lib/components/ImageFetcher.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+	import { addToast } from '$lib/toasts';
+	import { createEventDispatcher } from 'svelte';
+	const dispatch = createEventDispatcher();
+	import { onMount } from 'svelte';
+	let modal: HTMLDialogElement;
+
+	let url: string = '';
+	let query: string = '';
+
+	let error = '';
+
+	onMount(() => {
+		modal = document.getElementById('my_modal_1') as HTMLDialogElement;
+		if (modal) {
+			modal.showModal();
+		}
+	});
+
+	async function fetchImage() {
+		let res = await fetch(url);
+		let data = await res.blob();
+		if (!data) {
+			error = 'No image found at that URL.';
+			return;
+		}
+		let file = new File([data], 'image.jpg', { type: 'image/jpeg' });
+		close();
+		dispatch('image', { file });
+	}
+
+	async function fetchWikiImage() {
+		let res = await fetch(`/api/generate/img/?name=${query}`);
+		let data = await res.json();
+		if (data.source) {
+			let imageUrl = data.source;
+			let res = await fetch(imageUrl);
+			let blob = await res.blob();
+			let file = new File([blob], `${query}.jpg`, { type: 'image/jpeg' });
+			close();
+			dispatch('image', { file });
+		} else {
+			error = 'No image found for that Wikipedia article.';
+		}
+	}
+
+	function close() {
+		dispatch('close');
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === 'Escape') {
+			dispatch('close');
+		}
+	}
+</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">Image Fetcher with URL</h3>
+		<form>
+			<input
+				type="text"
+				class="input input-bordered w-full max-w-xs"
+				bind:value={url}
+				placeholder="Enter a URL"
+			/>
+			<button class="btn btn-primary" on:click={fetchImage}>Submit</button>
+		</form>
+
+		<h3 class="font-bold text-lg">Image Fetcher from Wikipedia</h3>
+		<form>
+			<input
+				type="text"
+				class="input input-bordered w-full max-w-xs"
+				bind:value={query}
+				placeholder="Enter a Wikipedia Article Name"
+			/>
+			<button class="btn btn-primary" on:click={fetchWikiImage}>Submit</button>
+		</form>
+
+		{#if error}
+			<p class="text-red-500">{error}</p>
+		{/if}
+
+		<button class="btn btn-primary" on:click={close}>Close</button>
+	</div>
+</dialog>

frontend/src/lib/components/NewAdventure.svelte

@@ -5,6 +5,7 @@
 	import { enhance } from '$app/forms';
 	import { addToast } from '$lib/toasts';
 	import PointSelectionModal from './PointSelectionModal.svelte';
+	import ImageFetcher from './ImageFetcher.svelte';
 
 	export let type: string = 'visited';
 
@@ -28,8 +29,10 @@
 	};
 
 	let image: File;
+	let fileInput: HTMLInputElement;
 
 	let isPointModalOpen: boolean = false;
+	let isImageFetcherOpen: boolean = false;
 
 	const dispatch = createEventDispatcher();
 	let modal: HTMLDialogElement;
@@ -102,6 +105,22 @@
 		}
 	}
 
+	function handleImageFetch(event: CustomEvent) {
+		const file = event.detail.file;
+		if (file && fileInput) {
+			// Create a DataTransfer object and add the file
+			const dataTransfer = new DataTransfer();
+			dataTransfer.items.add(file);
+
+			// Set the files property of the file input
+			fileInput.files = dataTransfer.files;
+
+			// Update the adventureToEdit object
+			newAdventure.image = file;
+		}
+		isImageFetcherOpen = false;
+	}
+
 	function setLongLat(event: CustomEvent<[number, number]>) {
 		console.log(event.detail);
 		newAdventure.latitude = event.detail[1];
@@ -114,6 +133,10 @@
 	<PointSelectionModal on:close={() => (isPointModalOpen = false)} on:submit={setLongLat} />
 {/if}
 
+{#if isImageFetcherOpen}
+	<ImageFetcher on:image={handleImageFetch} on:close={() => (isImageFetcherOpen = false)} />
+{/if}
+
 <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 <dialog id="my_modal_1" class="modal">
 	<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
@@ -234,16 +257,23 @@
 					/>
 				</div>
 				<div class="mb-2">
-					<label for="image"
+					<label for="image">Image </label><br />
-						>Image <iconify-icon icon="mdi:image" class="text-xl -mb-1"></iconify-icon></label
+					<div class="flex">
-					><br />
+						<input
-					<input
+							type="file"
-						type="file"
+							id="image"
-						id="image"
+							name="image"
-						name="image"
+							bind:value={image}
-						bind:value={image}
+							bind:this={fileInput}
-						class="file-input file-input-bordered w-full max-w-xs mt-1"
+							class="file-input file-input-bordered w-full max-w-xs mt-1"
-					/>
+						/>
+						<button
+							class="btn btn-neutral ml-2"
+							type="button"
+							on:click={() => (isImageFetcherOpen = true)}
+							><Wikipedia class="inline-block -mt-1 mb-1 w-6 h-6" />Image Search</button
+						>
+					</div>
 				</div>
 				<div class="mb-2">
 					<input

frontend/src/routes/api/[...path]/+server.ts

@@ -4,6 +4,12 @@ import { json } from '@sveltejs/kit';
 
 /** @type {import('./$types').RequestHandler} */
 export async function GET({ url, params, request, fetch, cookies }) {
+	// add the param format = json to the url or add additional if anothre param is already present
+	if (url.search) {
+		url.search = url.search + '&format=json';
+	} else {
+		url.search = '?format=json';
+	}
 	return handleRequest(url, params, request, fetch, cookies);
 }
 
@@ -13,7 +19,7 @@ export async function POST({ url, params, request, fetch, cookies }) {
 }
 
 export async function PATCH({ url, params, request, fetch, cookies }) {
-	return handleRequest(url, params, request, fetch, cookies);
+	return handleRequest(url, params, request, fetch, cookies, true);
 }
 
 export async function PUT({ url, params, request, fetch, cookies }) {
@@ -26,9 +32,20 @@ export async function DELETE({ url, params, request, fetch, cookies }) {
 
 // Implement other HTTP methods as needed (PUT, DELETE, etc.)
 
-async function handleRequest(url: any, params: any, request: any, fetch: any, cookies: any) {
+async function handleRequest(
+	url: any,
+	params: any,
+	request: any,
+	fetch: any,
+	cookies: any,
+	requreTrailingSlash: boolean | undefined = false
+) {
 	const path = params.path;
-	const targetUrl = `${endpoint}/api/${path}${url.search}/`;
+	let targetUrl = `${endpoint}/api/${path}${url.search}`;
+
+	if (requreTrailingSlash && !targetUrl.endsWith('/')) {
+		targetUrl += '/';
+	}
 
 	const headers = new Headers(request.headers);
 

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

@@ -15,6 +15,7 @@
 	let collection: Collection;
 
 	let adventures: Adventure[] = [];
+	let numVisited: number = adventures.filter((a) => a.type == 'visited').length;
 
 	let notFound: boolean = false;
 	let isShowingCreateModal: boolean = false;
@@ -151,6 +152,21 @@
 	{#if collection.name}
 		<h1 class="text-center font-extrabold text-4xl mb-2">{collection.name}</h1>
 	{/if}
+	{#if adventures.length > 0}
+		<div class="flex items-center justify-center mb-4">
+			<div class="stats shadow bg-base-300">
+				<div class="stat">
+					<div class="stat-title">Region Stats</div>
+					<div class="stat-value">{numVisited}/{adventures.length} Visited</div>
+					{#if numVisited === adventures.length}
+						<div class="stat-desc">You've completed this collection! 🎉!</div>
+					{:else}
+						<div class="stat-desc">Keep exploring!</div>
+					{/if}
+				</div>
+			</div>
+		</div>
+	{/if}
 	<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">
 		{#each adventures as adventure}