Skip to content

Commit

Permalink
Merge pull request #101 from seanmorley15/development
Browse files Browse the repository at this point in the history 
Development
  • Loading branch information
@seanmorley15
seanmorley15 authored Jun 16, 2024
2 parents cd13e58 + 563e9d2 commit 28a5d42
Show file tree
Hide file tree
Showing 3 changed files with 98 additions and 38 deletions.
2 changes: 2 additions & 0 deletions src/lib/components/CreateNewAdventure.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,8 @@
name={newAdventure.name}
on:submit={upload}
on:close={() => (isImageModalOpen = false)}
bucket="adventures"
existingImageKey={newAdventure.imageUrl}
/>
{/if}

Expand Down
109 changes: 72 additions & 37 deletions src/lib/components/EditModal.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@
console.log(adventureToEdit.name);
const desc = await generateDescription(adventureToEdit.name);
adventureToEdit.description = desc;
// Do something with the updated newAdventure object
// Do something with the updated adventureToEdit object
} catch (error) {
console.error(error);
// Handle the error
Expand All @@ -91,6 +91,11 @@
let isImageModalOpen: boolean = false;
/**
* Handles the upload event and updates the adventure's image URL.
*
* @param {CustomEvent<any>} e - The custom event containing the key.
*/
function upload(e: CustomEvent<any>) {
let key = e.detail;
console.log("EE" + key);
Expand All @@ -103,106 +108,136 @@
name={adventureToEdit.name}
on:submit={upload}
on:close={() => (isImageModalOpen = false)}
existingImageKey={adventureToEdit.imageUrl}
bucket="adventures"
/>
{/if}

<dialog id="my_modal_1" class="modal">
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
<div class="modal-box" role="dialog" on:keydown={handleKeydown} tabindex="0">
<h3 class="font-bold text-lg">Edit Adventure {originalName}</h3>
<p class="py-4">Press ESC key or click the button below to close</p>
<h3 class="font-bold text-lg">Edit Adventure: {adventureToEdit.name}</h3>
<div
class="modal-action items-center"
style="display: flex; flex-direction: column; align-items: center; width: 100%;"
>
<form method="dialog" style="width: 100%;">
<div>
<label for="name">Name</label>
<div class="mb-2">
<label for="name">Name</label><br />
<input
type="text"
id="name"
bind:value={adventureToEdit.name}
class="input input-bordered w-full max-w-xs"
class="input input-bordered w-full max-w-xs mt-1"
/>
</div>
<div>
<label for="location">Location</label>
<div class="mb-2">
<label for="location"
>Location<iconify-icon
icon="mdi:map-marker"
class="text-lg ml-0.5 -mb-0.5"
></iconify-icon></label
><br />
<input
type="text"
id="location"
bind:value={adventureToEdit.location}
class="input input-bordered w-full max-w-xs"
class="input input-bordered w-full max-w-xs mt-1"
/>
</div>
<div>
<label for="date">Date</label>
<div class="mb-2">
<label for="date"
>Date<iconify-icon icon="mdi:calendar" class="text-lg ml-1 -mb-0.5"
></iconify-icon></label
><br />
<input
type="date"
id="date"
bind:value={adventureToEdit.date}
class="input input-bordered w-full max-w-xs"
class="input input-bordered w-full max-w-xs mt-1"
/>
</div>
<div>
<label for="date">Description</label>
<input
type="text"
id="description"
bind:value={adventureToEdit.description}
class="input input-bordered w-full max-w-xs"
/>
<div class="mb-2">
<label for="date"
>Description<iconify-icon
icon="mdi:notebook"
class="text-lg ml-1 -mb-0.5"
></iconify-icon></label
><br />
<div class="flex">
<input
type="text"
id="description"
bind:value={adventureToEdit.description}
class="input input-bordered w-full max-w-xs mt-1 mb-2"
/>
<button
class="btn btn-neutral ml-2"
type="button"
on:click={generate}
><iconify-icon icon="mdi:wikipedia" class="text-xl -mb-1"
></iconify-icon>Generate Description</button
>
</div>
</div>
<div>
<div class="mb-2">
<label for="activityTypes"
>Activity Types <iconify-icon
icon="mdi:clipboard-list"
class="text-xl -mb-1"
></iconify-icon></label
><br />
<input
type="text"
hidden
id="activityTypes"
bind:value={activityInput}
class="input input-bordered w-full max-w-xs"
class="input input-bordered w-full max-w-xs mt-1"
/>
<label for="date">Activity Types (Comma Seperated)</label>

<AutoComplete
items={activityTypes}
bind:selectedItem={selected}
bind:displayValue={activityInput}
/>
</div>
<div>
<label for="rating">Rating</label>
<div class="mb-2">
<label for="rating"
>Rating <iconify-icon icon="mdi:star" class="text-xl -mb-1"
></iconify-icon></label
><br />
<input
type="number"
min="0"
max="5"
id="rating"
bind:value={adventureToEdit.rating}
class="input input-bordered w-full max-w-xs"
class="input input-bordered w-full max-w-xs mt-1"
/>
</div>
<div>
<button
type="button"
class="btn btn-secondary"
class="btn btn-neutral"
on:click={() => {
isImageModalOpen = true;
}}
>
Upload Image
<iconify-icon icon="mdi:upload" class="text-xl"
></iconify-icon>Upload Image
</button>
</div>
<button class="btn btn-primary mr-4 mt-4" on:click={submit}>Save</button

<button
type="submit"
class="btn btn-primary mr-4 mt-4"
on:click={submit}>Create</button
>
<!-- 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 class="flex items-center justify-center flex-wrap gap-4 mt-4"></div>
</div>
</div>
</dialog>
25 changes: 24 additions & 1 deletion src/lib/components/ImageModal.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@
import { onMount } from "svelte";
let modal: HTMLDialogElement;
export let name: string;
export let existingImageKey: string | undefined;
export let bucket: string;
let viewType: string = "upload";
Expand Down Expand Up @@ -104,12 +106,30 @@
// Handle the error
}
}
function removeImage() {
existingImageKey = undefined;
imageUrl = "";
dispatch("submit", "");
}
</script>

<dialog id="my_modal_1" class="modal">
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
<div class="modal-box" role="dialog" on:keydown={handleKeydown} tabindex="0">
{#if existingImageKey}
<h2 class="text-center font-bold text-xl mb-2">Existing Image</h2>

<img src="/cdn/{bucket}/{existingImageKey}" alt="Existing" class="mb-2" />
<div class="flex items-center justify-center">
<button class="btn btn-warning" on:click={removeImage}
>Remove Image<iconify-icon icon="mdi:delete" class="text-xl -ml-1"
></iconify-icon></button
>
</div>
{/if}

<h3 class="font-bold text-lg">Image Upload</h3>
<div class="join items-center justify-center flex mb-8">
<input
Expand Down Expand Up @@ -162,7 +182,10 @@
</form>
{/if}

<button class="btn btn-primary" on:click={submit}>Submit</button>
<button class="btn btn-primary" on:click={submit}
>Submit <iconify-icon icon="mdi:upload" class="text-xl"
></iconify-icon></button
>
<button class="btn btn-neutral" on:click={close}>Close</button>
</div>
</dialog>

0 comments on commit 28a5d42

Please sign in to comment.