Skip to content

Commit

Permalink
Merge pull request #100 from seanmorley15/development
Browse files Browse the repository at this point in the history 
Development
  • Loading branch information
@seanmorley15
seanmorley15 authored Jun 15, 2024
2 parents d197a60 + ea20f1a commit cd13e58
Show file tree
Hide file tree
Showing 2 changed files with 74 additions and 44 deletions.
92 changes: 58 additions & 34 deletions src/lib/components/CreateNewAdventure.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@
function create() {
activitySetup();
if (newAdventure.name.trim() === "") {
alert("Name is required");
close();
return;
}
dispatch("create", newAdventure);
Expand Down Expand Up @@ -110,58 +110,82 @@
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
<div class="modal-box" role="dialog" on:keydown={handleKeydown} tabindex="0">
<h3 class="font-bold text-lg">New Adventure</h3>
<p class="py-4">Press ESC key or click the button below to close</p>
<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"
required
bind:value={newAdventure.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={newAdventure.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={newAdventure.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={newAdventure.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={newAdventure.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>
<label for="date">Activity Types (Comma Seperated)</label>
<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"
/>

<AutoComplete
Expand All @@ -170,26 +194,30 @@
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={newAdventure.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>

Expand All @@ -201,11 +229,7 @@
<!-- 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
>
</div>
<div class="flex items-center justify-center flex-wrap gap-4 mt-4"></div>
</div>
</div>
</dialog>
26 changes: 16 additions & 10 deletions src/lib/components/ImageModal.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,10 @@
}
async function submit() {
if (!imageUrl && !imageFile) {
close();
}
try {
let key: string;
if (viewType === "url") {
Expand Down Expand Up @@ -125,32 +129,34 @@
/>
</div>
{#if viewType == "url"}
<button class="btn btn-secondary mb-2" on:click={searchImage}
>Search for Image</button
>
<form method="dialog" style="width: 100%;" class="mb-4">
<div>
<label for="rating">Image URL</label>
<form method="dialog" style="width: 100%;" class="mb-8">
<div class="flex justify-center items-center gap-2">
<input
type="text"
id="imageUrl"
bind:value={imageUrl}
class="input input-bordered w-full max-w-xs"
placeholder="Enter the URL of the image"
/>
<button
type="button"
class="btn btn-neutral mb-2"
on:click={searchImage}
>Search for Image <iconify-icon icon="mdi:magnify" class="text-xl"
></iconify-icon></button
>
</div>
</form>
{/if}
{#if viewType == "upload"}
<form method="dialog" style="width: 100%;" class="mb-4">
<div>
<label for="rating">Image Upload</label>
<form method="dialog" style="width: 100%;" class="mb-8">
<div class="flex justify-center items-center">
<input
type="file"
id="imageFile"
on:change={handleFileChange}
placeholder="Upload an image file"
class="input input-bordered w-full max-w-xs"
class="file-input file-input-bordered w-full max-w-xs"
/>
</div>
</form>
Expand Down

0 comments on commit cd13e58

Please sign in to comment.