Docker/AdventureLog
Docker/AdventureLog
1
0
Fork 0
mirror of https://github.com/seanmorley15/AdventureLog.git synced 2025-08-04 12:45:17 +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 --> <!-- if there is a button in form, it will close the modal -->
<button class="btn mt-4" on:click={close}>Close</button> <button class="btn mt-4" on:click={close}>Close</button>
</form> </form>
<button class="btn btn-secondary" on:click={generate} <div class="flex items-center justify-center flex-wrap gap-4 mt-4">
>Generate Description</button <button class="btn btn-secondary" on:click={generate}
> >Generate Description</button
<button class="btn btn-secondary" on:click={searchImage} >
>Search for Image</button <button class="btn btn-secondary" on:click={searchImage}
> >Search for Image</button
>
</div>
</div> </div>
</div> </div>
</dialog> </dialog>

32
src/lib/components/EditModal.svelte
View file

@ -4,7 +4,7 @@
import type { Adventure } from "$lib/utils/types"; import type { Adventure } from "$lib/utils/types";
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
import { onMount } from "svelte"; import { onMount } from "svelte";
import { addActivityType } from "$lib"; import { addActivityType, generateDescription, getImage } from "$lib";
let modal: HTMLDialogElement; let modal: HTMLDialogElement;
console.log(adventureToEdit.id); console.log(adventureToEdit.id);
@ -41,6 +41,28 @@
adventureToEdit = addActivityType(activityInput, adventureToEdit); adventureToEdit = addActivityType(activityInput, adventureToEdit);
activityInput = ""; 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> </script>
<dialog id="my_modal_1" class="modal"> <dialog id="my_modal_1" class="modal">
@ -124,6 +146,14 @@
<!-- if there is a button in form, it will close the modal --> <!-- if there is a button in form, it will close the modal -->
<button class="btn mt-4" on:click={close}>Close</button> <button class="btn mt-4" on:click={close}>Close</button>
</form> </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>
</div> </div>
</dialog> </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> <h1 class="text-center font-bold text-4xl mb-4">Country List</h1>
{#each data.response as item} <div class="flex items-center justify-center flex-wrap">
<button {#each data.response as item}
class="btn btn-primary mr-4 mb-2" <button
on:click={() => nav(item.country_code)} class="btn btn-primary mr-2 ml-2 mb-2"
>{item.name} on:click={() => nav(item.country_code)}
<img >{item.name}
src={getFlag(24, item.country_code)} <img
class="inline-block -mt-1 mr-1" src={getFlag(24, item.country_code)}
alt="Flag" class="inline-block -mt-1 mr-1"
/></button alt="Flag"
> /></button
<!-- <p>Name: {item.name}, Continent: {item.continent}</p> --> >
{/each} <!-- <p>Name: {item.name}, Continent: {item.continent}</p> -->
{/each}
</div>
<svelte:head> <svelte:head>
<title>WorldTravel | AdventureLog</title> <title>WorldTravel | AdventureLog</title>