1
0
Fork 0
mirror of https://github.com/seanmorley15/AdventureLog.git synced 2025-08-05 13:15:18 +02:00

feat: Add image upload functionality to adventure creation and editing

This commit is contained in:
Sean Morley 2024-06-14 16:25:45 +00:00
parent 2acfc1defb
commit 0637ab2df6
3 changed files with 49 additions and 25 deletions

View file

@ -83,16 +83,6 @@
} }
} }
async function searchImage() {
try {
const imageUrl = await getImage(newAdventure.name);
newAdventure.imageUrl = imageUrl;
} catch (error) {
console.error(error);
// Handle the error
}
}
let activityInput: string = ""; let activityInput: string = "";
function activitySetup() { function activitySetup() {
@ -108,7 +98,11 @@
</script> </script>
{#if isImageModalOpen} {#if isImageModalOpen}
<ImageModal on:submit={upload} on:close={() => (isImageModalOpen = false)} /> <ImageModal
name={newAdventure.name}
on:submit={upload}
on:close={() => (isImageModalOpen = false)}
/>
{/if} {/if}
<dialog id="my_modal_1" class="modal"> <dialog id="my_modal_1" class="modal">
@ -188,7 +182,6 @@
/> />
</div> </div>
<div> <div>
<label for="rating">Image URL</label>
<button <button
type="button" type="button"
class="btn btn-secondary" class="btn btn-secondary"
@ -196,6 +189,7 @@
isImageModalOpen = true; isImageModalOpen = true;
}} }}
> >
Upload Image
</button> </button>
</div> </div>
@ -211,9 +205,6 @@
<button class="btn btn-secondary" on:click={generate} <button class="btn btn-secondary" on:click={generate}
>Generate Description</button >Generate Description</button
> >
<button class="btn btn-secondary" on:click={searchImage}
>Search for Image</button
>
</div> </div>
</div> </div>
</div> </div>

View file

@ -6,6 +6,7 @@
import { onMount } from "svelte"; import { onMount } from "svelte";
import { addActivityType, generateDescription, getImage } from "$lib"; import { addActivityType, generateDescription, getImage } from "$lib";
import AutoComplete from "./AutoComplete.svelte"; import AutoComplete from "./AutoComplete.svelte";
import ImageModal from "./ImageModal.svelte";
let modal: HTMLDialogElement; let modal: HTMLDialogElement;
console.log(adventureToEdit.id); console.log(adventureToEdit.id);
@ -87,8 +88,24 @@
// Handle the error // Handle the error
} }
} }
let isImageModalOpen: boolean = false;
function upload(e: CustomEvent<any>) {
let key = e.detail;
console.log("EE" + key);
adventureToEdit.imageUrl = key;
}
</script> </script>
{#if isImageModalOpen}
<ImageModal
name={adventureToEdit.name}
on:submit={upload}
on:close={() => (isImageModalOpen = false)}
/>
{/if}
<dialog id="my_modal_1" class="modal"> <dialog id="my_modal_1" class="modal">
<!-- 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 -->
@ -163,13 +180,15 @@
/> />
</div> </div>
<div> <div>
<label for="rating">Image URL</label> <button
<input type="button"
type="url" class="btn btn-secondary"
id="imageUrl" on:click={() => {
bind:value={adventureToEdit.imageUrl} isImageModalOpen = true;
class="input input-bordered w-full max-w-xs" }}
/> >
Upload Image
</button>
</div> </div>
<button class="btn btn-primary mr-4 mt-4" on:click={submit}>Save</button <button class="btn btn-primary mr-4 mt-4" on:click={submit}>Save</button
> >

View file

@ -1,7 +1,9 @@
<script lang="ts"> <script lang="ts">
import { getImage } from "$lib";
import { createEventDispatcher } from "svelte"; import { createEventDispatcher } from "svelte";
import { onMount } from "svelte"; import { onMount } from "svelte";
let modal: HTMLDialogElement; let modal: HTMLDialogElement;
export let name: string;
let viewType: string = "upload"; let viewType: string = "upload";
@ -89,6 +91,15 @@
imageFile = target.files[0]; imageFile = target.files[0];
} }
} }
async function searchImage() {
try {
imageUrl = await getImage(name);
} catch (error) {
console.error(error);
// Handle the error
}
}
</script> </script>
<dialog id="my_modal_1" class="modal"> <dialog id="my_modal_1" class="modal">
@ -96,7 +107,7 @@
<!-- 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">
<h3 class="font-bold text-lg">Image Upload</h3> <h3 class="font-bold text-lg">Image Upload</h3>
<div class="join items-center justify-center flex"> <div class="join items-center justify-center flex mb-8">
<input <input
class="join-item btn btn-neutral" class="join-item btn btn-neutral"
type="radio" type="radio"
@ -114,7 +125,10 @@
/> />
</div> </div>
{#if viewType == "url"} {#if viewType == "url"}
<form method="dialog" style="width: 100%;"> <button class="btn btn-secondary" on:click={searchImage}
>Search for Image</button
>
<form method="dialog" style="width: 100%;" class="mb-4">
<div> <div>
<label for="rating">Image URL</label> <label for="rating">Image URL</label>
<input <input
@ -127,7 +141,7 @@
</form> </form>
{/if} {/if}
{#if viewType == "upload"} {#if viewType == "upload"}
<form method="dialog" style="width: 100%;"> <form method="dialog" style="width: 100%;" class="mb-4">
<div> <div>
<label for="rating">Image Upload</label> <label for="rating">Image Upload</label>
<input <input