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:
parent
d7db09693a
commit
620c7298a9
2 changed files with 149 additions and 14 deletions
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue