Docker/AdventureLog
Docker/AdventureLog
1
0
Fork 0
mirror of https://github.com/seanmorley15/AdventureLog.git synced 2025-07-21 22:09:36 +02:00
Code Issues Releases Activity

Merge pull request #100 from seanmorley15/development

Browse source 
Development
This commit is contained in:
Sean Morley 2024-06-15 12:45:13 -04:00 • committed by GitHub
commit cd13e58ead
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 74 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

82
src/lib/components/CreateNewAdventure.svelte
View file

@ -54,7 +54,7 @@
function create() { function create() {
activitySetup(); activitySetup();
if (newAdventure.name.trim() === "") { if (newAdventure.name.trim() === "") {
alert("Name is required"); close();
return; return;
} }
dispatch("create", newAdventure); dispatch("create", newAdventure);
@ -110,58 +110,82 @@
<!-- svelte-ignore a11y-no-noninteractive-tabindex --> <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
<div class="modal-box" role="dialog" on:keydown={handleKeydown} tabindex="0"> <div class="modal-box" role="dialog" on:keydown={handleKeydown} tabindex="0">
<h3 class="font-bold text-lg">New Adventure</h3> <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 <div
class="modal-action items-center" class="modal-action items-center"
style="display: flex; flex-direction: column; align-items: center; width: 100%;" style="display: flex; flex-direction: column; align-items: center; width: 100%;"
> >
<form method="dialog" style="width: 100%;"> <form method="dialog" style="width: 100%;">
<div> <div class="mb-2">
<label for="name">Name</label> <label for="name">Name</label><br />
<input <input
type="text" type="text"
id="name" id="name"
required
bind:value={newAdventure.name} 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>
<div> <div class="mb-2">
<label for="location">Location</label> <label for="location"
>Location<iconify-icon
icon="mdi:map-marker"
class="text-lg ml-0.5 -mb-0.5"
></iconify-icon></label
><br />
<input <input
type="text" type="text"
id="location" id="location"
bind:value={newAdventure.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>
<div> <div class="mb-2">
<label for="date">date</label> <label for="date"
>Date<iconify-icon icon="mdi:calendar" class="text-lg ml-1 -mb-0.5"
></iconify-icon></label
><br />
<input <input
type="date" type="date"
id="date" id="date"
bind:value={newAdventure.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>
<div> <div class="mb-2">
<label for="date">Description</label> <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 <input
type="text" type="text"
id="description" id="description"
bind:value={newAdventure.description} bind:value={newAdventure.description}
class="input input-bordered w-full max-w-xs" 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> <div class="mb-2">
<label for="date">Activity Types (Comma Seperated)</label> <label for="activityTypes"
>Activity Types <iconify-icon
icon="mdi:clipboard-list"
class="text-xl -mb-1"
></iconify-icon></label
><br />
<input <input
type="text" type="text"
hidden hidden
id="activityTypes" id="activityTypes"
bind:value={activityInput} bind:value={activityInput}
class="input input-bordered w-full max-w-xs" class="input input-bordered w-full max-w-xs mt-1"
/> />
<AutoComplete <AutoComplete
@ -170,26 +194,30 @@
bind:displayValue={activityInput} bind:displayValue={activityInput}
/> />
</div> </div>
<div> <div class="mb-2">
<label for="rating">Rating</label> <label for="rating"
>Rating <iconify-icon icon="mdi:star" class="text-xl -mb-1"
></iconify-icon></label
><br />
<input <input
type="number" type="number"
min="0" min="0"
max="5" max="5"
id="rating" id="rating"
bind:value={newAdventure.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>
<div> <div>
<button <button
type="button" type="button"
class="btn btn-secondary" class="btn btn-neutral"
on:click={() => { on:click={() => {
isImageModalOpen = true; isImageModalOpen = true;
}} }}
> >
Upload Image <iconify-icon icon="mdi:upload" class="text-xl"
></iconify-icon>Upload Image
</button> </button>
</div> </div>
@ -201,11 +229,7 @@
<!-- 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"> <div class="flex items-center justify-center flex-wrap gap-4 mt-4"></div>
<button class="btn btn-secondary" on:click={generate}
>Generate Description</button
>
</div>
</div> </div>
</div> </div>
</dialog> </dialog>

26
src/lib/components/ImageModal.svelte
View file

@ -27,6 +27,10 @@
} }
async function submit() { async function submit() {
if (!imageUrl && !imageFile) {
close();
}
try { try {
let key: string; let key: string;
if (viewType === "url") { if (viewType === "url") {
@ -125,12 +129,8 @@
/> />
</div> </div>
{#if viewType == "url"} {#if viewType == "url"}
<button class="btn btn-secondary mb-2" on:click={searchImage} <form method="dialog" style="width: 100%;" class="mb-8">
>Search for Image</button <div class="flex justify-center items-center gap-2">
>
<form method="dialog" style="width: 100%;" class="mb-4">
<div>
<label for="rating">Image URL</label>
<input <input
type="text" type="text"
id="imageUrl" id="imageUrl"
@ -138,19 +138,25 @@
class="input input-bordered w-full max-w-xs" class="input input-bordered w-full max-w-xs"
placeholder="Enter the URL of the image" 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> </div>
</form> </form>
{/if} {/if}
{#if viewType == "upload"} {#if viewType == "upload"}
<form method="dialog" style="width: 100%;" class="mb-4"> <form method="dialog" style="width: 100%;" class="mb-8">
<div> <div class="flex justify-center items-center">
<label for="rating">Image Upload</label>
<input <input
type="file" type="file"
id="imageFile" id="imageFile"
on:change={handleFileChange} on:change={handleFileChange}
placeholder="Upload an image file" 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> </div>
</form> </form>