1
0
Fork 0
mirror of https://github.com/seanmorley15/AdventureLog.git synced 2025-07-22 22:39:36 +02:00

better error managment

This commit is contained in:
Sean Morley 2024-08-17 16:28:56 -04:00
parent d7db09693a
commit 620c7298a9
2 changed files with 149 additions and 14 deletions

View file

@ -28,6 +28,7 @@
let url: string = ''; let url: string = '';
let imageError: string = ''; let imageError: string = '';
let wikiImageError: string = '';
images = adventureToEdit.images || []; images = adventureToEdit.images || [];
@ -106,6 +107,10 @@
async function fetchWikiImage() { async function fetchWikiImage() {
let res = await fetch(`/api/generate/img/?name=${imageSearch}`); let res = await fetch(`/api/generate/img/?name=${imageSearch}`);
let data = await res.json(); let data = await res.json();
if (!res.ok) {
wikiImageError = 'Failed to fetch image';
return;
}
if (data.source) { if (data.source) {
let imageUrl = data.source; let imageUrl = data.source;
let res = await fetch(imageUrl); let res = await fetch(imageUrl);
@ -128,6 +133,7 @@
addToast('success', 'Image uploaded'); addToast('success', 'Image uploaded');
} else { } else {
addToast('error', 'Failed to upload image'); 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</button >Fetch Image</button
> >
</div> </div>
<div class=" inline-flex gap-2"> <div class="divider"></div>
{#if images.length > 0}
<h1 class="font-semibold text-xl">My Images</h1>
{:else}
<h1 class="font-semibold text-xl">No Images</h1>
{/if}
<div class="flex flex-wrap gap-2 mt-2">
{#each images as image} {#each images as image}
<!-- remove button --> <div class="relative h-32 w-32">
<button <button
type="button" type="button"
class="btn btn-error" class="absolute top-0 left-0 btn btn-error btn-sm z-10"
on:click={() => { on:click={() => removeImage(image.id)}
removeImage(image.id); >
}}>X</button X
> </button>
<img src={image.image} alt={image.id} class="w-full h-full object-cover" />
<img src={image.image} alt={image.id} class="w-32 h-32" /> </div>
{/each} {/each}
</div> </div>
</div> </div>

View file

@ -2,7 +2,7 @@
import { createEventDispatcher } from 'svelte'; import { createEventDispatcher } from 'svelte';
import type { Adventure, OpenStreetMapPlace, Point } from '$lib/types'; import type { Adventure, OpenStreetMapPlace, Point } from '$lib/types';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { enhance } from '$app/forms'; import { deserialize, enhance } from '$app/forms';
import { addToast } from '$lib/toasts'; import { addToast } from '$lib/toasts';
export let type: string = 'visited'; export let type: string = 'visited';
@ -26,6 +26,7 @@
let noPlaces: boolean = false; let noPlaces: boolean = false;
let wikiError: string = ''; let wikiError: string = '';
let wikiImageError: string = '';
let newAdventure: Adventure = { let newAdventure: Adventure = {
id: '', id: '',
@ -66,6 +67,10 @@
newAdventure.name = markers[0].name; newAdventure.name = markers[0].name;
} }
let url: string = '';
let imageSearch: string = '';
let imageError: string = '';
async function geocode(e: Event | null) { async function geocode(e: Event | null) {
if (e) { if (e) {
e.preventDefault(); 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() { async function reverseGeocode() {
let res = await fetch( let res = await fetch(
`https://nominatim.openstreetmap.org/search?q=${newAdventure.latitude},${newAdventure.longitude}&format=jsonv2`, `https://nominatim.openstreetmap.org/search?q=${newAdventure.latitude},${newAdventure.longitude}&format=jsonv2`,
@ -177,6 +257,7 @@
let data = await res.json(); let data = await res.json();
if (data.id) { if (data.id) {
newAdventure = data as Adventure; newAdventure = data as Adventure;
imageSearch = newAdventure.name;
} else { } else {
addToast('error', 'Failed to create adventure'); addToast('error', 'Failed to create adventure');
} }
@ -473,9 +554,51 @@ it would also work to just use on:click on the MapLibre component itself. -->
<button class="btn btn-neutral mt-2 mb-2" type="submit">Upload Image</button> <button class="btn btn-neutral mt-2 mb-2" type="submit">Upload Image</button>
</form> </form>
</div> </div>
<div class=" inline-flex gap-2"> <div class="mt-2">
<label for="url">URL</label><br />
<input
type="text"
id="url"
name="url"
bind:value={url}
class="input input-bordered w-full"
/>
<button class="btn btn-neutral mt-2" type="button" on:click={fetchImage}
>Fetch Image</button
>
</div>
<div class="mt-2">
<label for="name">Wikipedia</label><br />
<input
type="text"
id="name"
name="name"
bind:value={imageSearch}
class="input input-bordered w-full"
/>
<button class="btn btn-neutral mt-2" type="button" on:click={fetchWikiImage}
>Fetch Image</button
>
<p class="text-red-500">{wikiImageError}</p>
</div>
<div class="divider"></div>
{#if images.length > 0}
<h1 class="font-semibold text-xl">My Images</h1>
{:else}
<h1 class="font-semibold text-xl">No Images</h1>
{/if}
<div class="flex flex-wrap gap-2 mt-2">
{#each images as image} {#each images as image}
<img src={image.image} alt={image.id} class="w-32 h-32" /> <div class="relative h-32 w-32">
<button
type="button"
class="absolute top-0 left-0 btn btn-error btn-sm z-10"
on:click={() => removeImage(image.id)}
>
X
</button>
<img src={image.image} alt={image.id} class="w-full h-full object-cover" />
</div>
{/each} {/each}
</div> </div>
</div> </div>