diff --git a/frontend/src/lib/components/EditAdventure.svelte b/frontend/src/lib/components/EditAdventure.svelte
index 5e5592a..23e3872 100644
--- a/frontend/src/lib/components/EditAdventure.svelte
+++ b/frontend/src/lib/components/EditAdventure.svelte
@@ -28,6 +28,7 @@
let url: string = '';
let imageError: string = '';
+ let wikiImageError: string = '';
images = adventureToEdit.images || [];
@@ -106,6 +107,10 @@
async function fetchWikiImage() {
let res = await fetch(`/api/generate/img/?name=${imageSearch}`);
let data = await res.json();
+ if (!res.ok) {
+ wikiImageError = 'Failed to fetch image';
+ return;
+ }
if (data.source) {
let imageUrl = data.source;
let res = await fetch(imageUrl);
@@ -128,6 +133,7 @@
addToast('success', 'Image uploaded');
} else {
addToast('error', 'Failed to upload image');
+ wikiImageError = 'Failed to upload image';
}
}
}
@@ -574,18 +580,24 @@ it would also work to just use on:click on the MapLibre component itself. -->
>Fetch Image
-
+
+ {#if images.length > 0}
+
My Images
+ {:else}
+
No Images
+ {/if}
+
{#each images as image}
-
-
-
-
+
+
+
+
{/each}
diff --git a/frontend/src/lib/components/NewAdventure.svelte b/frontend/src/lib/components/NewAdventure.svelte
index fa4a00d..b6b1d15 100644
--- a/frontend/src/lib/components/NewAdventure.svelte
+++ b/frontend/src/lib/components/NewAdventure.svelte
@@ -2,7 +2,7 @@
import { createEventDispatcher } from 'svelte';
import type { Adventure, OpenStreetMapPlace, Point } from '$lib/types';
import { onMount } from 'svelte';
- import { enhance } from '$app/forms';
+ import { deserialize, enhance } from '$app/forms';
import { addToast } from '$lib/toasts';
export let type: string = 'visited';
@@ -26,6 +26,7 @@
let noPlaces: boolean = false;
let wikiError: string = '';
+ let wikiImageError: string = '';
let newAdventure: Adventure = {
id: '',
@@ -66,6 +67,10 @@
newAdventure.name = markers[0].name;
}
+ let url: string = '';
+ let imageSearch: string = '';
+ let imageError: string = '';
+
async function geocode(e: Event | null) {
if (e) {
e.preventDefault();
@@ -90,6 +95,81 @@
}
}
+ async function fetchImage() {
+ let res = await fetch(url);
+ let data = await res.blob();
+ if (!data) {
+ imageError = 'No image found at that URL.';
+ return;
+ }
+ let file = new File([data], 'image.jpg', { type: 'image/jpeg' });
+ let formData = new FormData();
+ formData.append('image', file);
+ formData.append('adventure', newAdventure.id);
+ let res2 = await fetch(`/adventures?/image`, {
+ method: 'POST',
+ body: formData
+ });
+ let data2 = await res2.json();
+ console.log(data2);
+ if (data2.type === 'success') {
+ images = [...images, data2];
+ newAdventure.images = images;
+ addToast('success', 'Image uploaded');
+ } else {
+ addToast('error', 'Failed to upload image');
+ }
+ }
+
+ async function fetchWikiImage() {
+ let res = await fetch(`/api/generate/img/?name=${imageSearch}`);
+ let data = await res.json();
+ if (!res.ok) {
+ wikiImageError = 'Failed to fetch image';
+ return;
+ }
+ if (data.source) {
+ let imageUrl = data.source;
+ let res = await fetch(imageUrl);
+
+ let blob = await res.blob();
+ let file = new File([blob], `${imageSearch}.jpg`, { type: 'image/jpeg' });
+ let formData = new FormData();
+ formData.append('image', file);
+ formData.append('adventure', newAdventure.id);
+ let res2 = await fetch(`/adventures?/image`, {
+ method: 'POST',
+ body: formData
+ });
+ if (res2.ok) {
+ let newData = deserialize(await res2.text()) as { data: { id: string; image: string } };
+ console.log(newData);
+ let newImage = { id: newData.data.id, image: newData.data.image };
+ console.log(newImage);
+ images = [...images, newImage];
+ newAdventure.images = images;
+ addToast('success', 'Image uploaded');
+ } else {
+ addToast('error', 'Failed to upload image');
+ wikiImageError = 'Failed to upload image';
+ }
+ }
+ }
+
+ async function removeImage(id: string) {
+ let res = await fetch(`/api/images/${id}/image_delete`, {
+ method: 'POST'
+ });
+ if (res.status === 204) {
+ images = images.filter((image) => image.id !== id);
+ newAdventure.images = images;
+ console.log(images);
+ addToast('success', 'Image removed');
+ } else {
+ addToast('error', 'Failed to remove image');
+ }
+ }
+
async function reverseGeocode() {
let res = await fetch(
`https://nominatim.openstreetmap.org/search?q=${newAdventure.latitude},${newAdventure.longitude}&format=jsonv2`,
@@ -177,6 +257,7 @@
let data = await res.json();
if (data.id) {
newAdventure = data as Adventure;
+ imageSearch = newAdventure.name;
} else {
addToast('error', 'Failed to create adventure');
}
@@ -473,9 +554,51 @@ it would also work to just use on:click on the MapLibre component itself. -->
-
+