chore: Add buttons for generating description and searching image in CreateNewAdventure and EditModal components

This commit is contained in:
Sean Morley
2024-05-28 16:48:20 +00:00
parent 2913ceb394
commit 41b019b610
3 changed files with 54 additions and 20 deletions

View File

@@ -163,12 +163,14 @@
<!-- if there is a button in form, it will close the modal -->
<button class="btn mt-4" on:click={close}>Close</button>
</form>
<button class="btn btn-secondary" on:click={generate}
>Generate Description</button
>
<button class="btn btn-secondary" on:click={searchImage}
>Search for Image</button
>
<div class="flex items-center justify-center flex-wrap gap-4 mt-4">
<button class="btn btn-secondary" on:click={generate}
>Generate Description</button
>
<button class="btn btn-secondary" on:click={searchImage}
>Search for Image</button
>
</div>
</div>
</div>
</dialog>

View File

@@ -4,7 +4,7 @@
import type { Adventure } from "$lib/utils/types";
const dispatch = createEventDispatcher();
import { onMount } from "svelte";
import { addActivityType } from "$lib";
import { addActivityType, generateDescription, getImage } from "$lib";
let modal: HTMLDialogElement;
console.log(adventureToEdit.id);
@@ -41,6 +41,28 @@
adventureToEdit = addActivityType(activityInput, adventureToEdit);
activityInput = "";
}
async function generate() {
try {
console.log(adventureToEdit.name);
const desc = await generateDescription(adventureToEdit.name);
adventureToEdit.description = desc;
// Do something with the updated newAdventure object
} catch (error) {
console.error(error);
// Handle the error
}
}
async function searchImage() {
try {
const imageUrl = await getImage(adventureToEdit.name);
adventureToEdit.imageUrl = imageUrl;
} catch (error) {
console.error(error);
// Handle the error
}
}
</script>
<dialog id="my_modal_1" class="modal">
@@ -124,6 +146,14 @@
<!-- if there is a button in form, it will close the modal -->
<button class="btn mt-4" on:click={close}>Close</button>
</form>
<div class="flex items-center justify-center flex-wrap gap-4 mt-4">
<button class="btn btn-secondary" on:click={generate}
>Generate Description</button
>
<button class="btn btn-secondary" on:click={searchImage}
>Search for Image</button
>
</div>
</div>
</div>
</dialog>