Docker/AdventureLog
Docker/AdventureLog
1
0
Fork 0
mirror of https://github.com/seanmorley15/AdventureLog.git synced 2025-08-02 19:55:18 +02:00
Code Issues Releases Activity

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

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

14
src/lib/components/CreateNewAdventure.svelte
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>

32
src/lib/components/EditModal.svelte
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>

28
src/routes/worldtravel/+page.svelte
View file

@ -12,19 +12,21 @@
<h1 class="text-center font-bold text-4xl mb-4">Country List</h1>
{#each data.response as item}
<button
class="btn btn-primary mr-4 mb-2"
on:click={() => nav(item.country_code)}
>{item.name}
<img
src={getFlag(24, item.country_code)}
class="inline-block -mt-1 mr-1"
alt="Flag"
/></button
>
<!-- <p>Name: {item.name}, Continent: {item.continent}</p> -->
{/each}
<div class="flex items-center justify-center flex-wrap">
{#each data.response as item}
<button
class="btn btn-primary mr-2 ml-2 mb-2"
on:click={() => nav(item.country_code)}
>{item.name}
<img
src={getFlag(24, item.country_code)}
class="inline-block -mt-1 mr-1"
alt="Flag"
/></button
>
<!-- <p>Name: {item.name}, Continent: {item.continent}</p> -->
{/each}
</div>
<svelte:head>
<title>WorldTravel | AdventureLog</title>