diff --git a/src/routes/ImagePost.svelte b/src/routes/ImagePost.svelte index 9cbf811071b31bc8acf03ae662c72b93fbd789c5..e90504d5569ed7f344aa43ec4154e59379a5869b 100644 --- a/src/routes/ImagePost.svelte +++ b/src/routes/ImagePost.svelte @@ -1,14 +1,27 @@ <script> import { fetchAPI } from "@/static/js/helper"; import { paths } from "@/static/js/paths"; + import { user } from "@/stores"; import { onMount } from "svelte"; export let params = {}; let imageMetadata = {}; + let addTag = false; + let tag = ""; async function getImageMetadata() { return await fetchAPI(paths.ImageField(params.snowflake)); } + function imageTagAdd() { + const options = { + method: "PUT", + headers: { + secret: $user.secret, + }, + }; + fetchAPI(paths.ImageTagField(params.snowflake, tag), options); + tag = ""; + } onMount(async () => { imageMetadata = await getImageMetadata(); @@ -16,11 +29,20 @@ </script> <div class="flex flex-row space-x-12"> - <ul class="pl-2"> - <li><strong>Snowflake: </strong> {imageMetadata.snowflake}</li> - <li><strong>Source: </strong> {imageMetadata.source}</li> - <li><strong>Image type: </strong> {imageMetadata.type}</li> - <li><strong>Uploaded by: </strong> {imageMetadata.user}</li> - </ul> + <div class="pl-2"> + <ul> + <li><strong>Snowflake: </strong> {imageMetadata.snowflake}</li> + <li><strong>Source: </strong> {imageMetadata.source}</li> + <li><strong>Image type: </strong> {imageMetadata.type}</li> + <li><strong>Uploaded by: </strong> {imageMetadata.user}</li> + </ul> + <button on:click={() => (addTag = !addTag)}>Add tag</button> + {#if addTag} + <div class="space-x-2"> + <input type="text" placeholder="Add tag" bind:value={tag} /> + <button on:click={imageTagAdd}>Add</button> + </div> + {/if} + </div> <img src={paths.ImageFile(params.snowflake)} alt="" class="max-w-2xl" /> </div>