items wip

3 files changed, 112 insertions, 4 deletions

diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte
index a2103cf5..72f10d26 100644
--- a/src/components/AppHeader.svelte
+++ b/src/components/AppHeader.svelte
@@ -1,6 +1,6 @@
 <script>
   import OutClick from "svelte-outclick";
-  import { banner, newPayment, colorTheme } from "$lib/store";
+  import { banner, newPayment } from "$lib/store";
   import { goto } from "$app/navigation";
   import Avatar from "$comp/Avatar.svelte";
   import Icon from "$comp/Icon.svelte";
@@ -42,7 +42,7 @@
 
 {#if !$loading}
   <header
-    class="bg-gradient-to-r {$colorTheme} h-[175px] w-full relative bg-cover mb-20"
+    class="bg-gradient-to-r from-primary to-gradient h-[175px] w-full relative bg-cover mb-20"
     style:background-image={bg}
   >
     <nav class="flex justify-end items-center space-x-4 p-5">
diff --git a/src/components/Avatar.svelte b/src/components/Avatar.svelte
index f13404bd..227200d7 100644
--- a/src/components/Avatar.svelte
+++ b/src/components/Avatar.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { avatar, banner, colorTheme } from "$lib/store";
+  import { avatar, banner } from "$lib/store";
   import Icon from "$comp/Icon.svelte";
   import { punk } from "$lib/utils";
 
@@ -20,7 +20,7 @@
 
 <a href={link} class:pointer-events-none={disabled}>
   <div
-    class="w-{s} h-{s} rounded-full border-4 border-white overflow-hidden bg-gradient-to-r {$colorTheme} flex justify-center items-center"
+    class="w-{s} h-{s} rounded-full border-4 border-white overflow-hidden bg-gradient-to-r from-primary to-gradient flex justify-center items-center"
   >
     <img
       {src}
diff --git a/src/components/ItemForm.svelte b/src/components/ItemForm.svelte
new file mode 100644
index 00000000..044020b7
--- /dev/null
+++ b/src/components/ItemForm.svelte
@@ -0,0 +1,108 @@
+<script>
+  import { t } from "$lib/translations";
+  import { upload } from "$lib/upload";
+  export let item, token;
+
+  let fileInput, formElement, file;
+  let select = () => fileInput.click();
+  let src;
+
+  let tooLarge = {};
+  let handleFile = async ({ target }, type) => {
+    tooLarge[type] = false;
+    file = target.files[0];
+    if (!file) return;
+
+    if (file.size > 10000000) return (tooLarge[type] = true);
+
+    var reader = new FileReader();
+    reader.onload = async (e) => {
+      src = e.target.result;
+    };
+
+    reader.readAsDataURL(file);
+  };
+
+  async function handleSubmit() {
+    try {
+      submitting = true;
+      let data = new FormData(formElement);
+
+      if (src) {
+        try {
+          let { hash } = JSON.parse(
+            await upload(file, "item", progress, token)
+          );
+
+          data.set("image", hash);
+
+          await fetch(`/api/public/${hash}.webp`, {
+              cache: "reload",
+            mode: "no-cors",
+          });
+        } catch (e) {
+          console.log("problem upsubmitting avatar", e);
+        }
+      }
+
+      const response = await fetch(formElement.action, {
+        method: "POST",
+        body: data,
+      });
+
+      const result = deserialize(await response.text());
+
+      applyAction(result);
+    } catch (e) {
+      console.log(e);
+      fail("Something went wrong");
+    }
+
+    submitting = false;
+  }
+</script>
+
+<form
+  method="POST"
+  class="space-y-5"
+  on:submit|preventDefault={handleSubmit}
+  bind:this={formElement}
+>
+  <div>
+    <label for="name" class="font-bold mb-1 block">{$t("items.name")}</label>
+    <input name="name" bind:value={item.name} />
+  </div>
+  <div>
+    <label for="img" class="font-bold mb-1 block">{$t("items.image")}</label>
+    <div class="relative w-full h-64">
+      {#if item.hash}
+        <img
+          src={`/api/public/${item.hash}.webp`}
+          alt={item.name}
+          class="mx-auto object-cover h-full w-full"
+        />
+      {:else if src}
+        <img {src} alt={item.name} class="mx-auto object-cover h-full w-full" />
+      {:else}
+        <div
+          class="bg-gradient-to-r from-primary to-gradient w-full h-48 mb-4 cursor-pointer hover:opacity-80"
+          on:click={select}
+          on:keydown={select}
+          alt="Banner"
+        />
+      {/if}
+      <input
+        type="file"
+        class="hidden"
+        bind:this={fileInput}
+        on:change={(e) => handleFile(e, "item")}
+      />
+    </div>
+  </div>
+
+  <button
+    class="rounded-full py-5 px-6 font-bold hover:opacity-80 flex bg-black text-white text-2xl"
+  >
+    {$t("items.submit")}
+  </button>
+</form>