diff --git a/src/routes/Tag.svelte b/src/routes/Tag.svelte index f3f64ee8e3baaaa2b295af57237b6e3669b4761b..4ca279ab1d1e3d2f8c48dca58fad183d58bf6a8b 100644 --- a/src/routes/Tag.svelte +++ b/src/routes/Tag.svelte @@ -1,4 +1,5 @@ <script> + import ImageList from "@/lib/ImageList.svelte"; import { fetchAPI } from "@/static/js/helper"; import { paths } from "@/static/js/paths"; import { user } from "@/stores"; @@ -14,6 +15,8 @@ let tag = ""; let tagType = tagTypes[0]; $: validTag = checkTag(tag); + let searchTags = ""; + let searchedSnowflakes = []; function putTag() { const options = { @@ -47,20 +50,43 @@ const regex = /^[a-z0-9()_-]*$/g; return !tag.match(regex) || tag.length > 128; } + async function searchImagesByTags() { + searchedSnowflakes = + (await fetchAPI(paths.SearchField(parseSearchTags(searchTags)))) || + []; + } + function parseSearchTags(searchTags) { + return searchTags.split(" ").join("!"); + } </script> -<div class="space-x-4 m-2"> - <input type="text" placeholder="Tag name" bind:value={tag} /> - <select bind:value={tagType}> - <option disabled>Tag type</option> - {#each tagTypes as type} - <option value={type}>{type}</option> - {/each} - </select> - <button on:click={addTag} disabled={validTag} class="disabled:opacity-50" - >Add</button - > -</div> -{#if validTag} - <div>No space or capital letter in tag name allowed.</div> -{/if} +<section class="m-2 space-y-4"> + <div class="space-x-4"> + <input type="text" placeholder="Tag name" bind:value={tag} /> + <select bind:value={tagType}> + <option disabled>Tag type</option> + {#each tagTypes as type} + <option value={type}>{type}</option> + {/each} + </select> + <button + on:click={addTag} + disabled={validTag} + class="disabled:opacity-50">Add</button + > + {#if validTag} + <div>No space or capital letter in tag name allowed.</div> + {/if} + </div> + + <div class="space-x-4"> + <input type="text" placeholder="Search tag" bind:value={searchTags} /> + <button + disabled={searchTags === ""} + class="disabled:opacity-50" + on:click={searchImagesByTags}>Search</button + > + <div>Delimit tags by space to search multiple</div> + </div> +</section> +<ImageList snowflakes={searchedSnowflakes} />