From 085be0d51fb0ad414450b3d65dc08c0adba82f38 Mon Sep 17 00:00:00 2001
From: Elias Renman <elias.renman@gmail.com>
Date: Mon, 24 Mar 2025 16:15:13 +0100
Subject: [PATCH] feat: added basic edit form

---
 web/src/pages/Home/components/create.svelte |  2 +-
 web/src/pages/Home/components/row.svelte    | 16 +++++++++++++++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/web/src/pages/Home/components/create.svelte b/web/src/pages/Home/components/create.svelte
index 811d0c6..a0c574f 100644
--- a/web/src/pages/Home/components/create.svelte
+++ b/web/src/pages/Home/components/create.svelte
@@ -33,7 +33,7 @@
   };
 </script>
 
-<form method="POST" on:submit={handleSubmit}>
+<form method="POST" on:submit={handleSubmit} id="form">
   <div class="flex mt-4 p-4 bg-gray-800 rounded-lg shadow-lg gap-4 flex-col">
     <div class="flex flex-row gap-2 justify-center items-center">
       <p>{window.location.origin}/</p>
diff --git a/web/src/pages/Home/components/row.svelte b/web/src/pages/Home/components/row.svelte
index b550657..cc3adcb 100644
--- a/web/src/pages/Home/components/row.svelte
+++ b/web/src/pages/Home/components/row.svelte
@@ -10,6 +10,17 @@
       $mutation.mutate(row.url);
     }
   }
+
+  function editItem() {
+    const form = document.getElementById("form") as HTMLFormElement;
+    form.reset();
+    for (const [key, value] of Object.entries(row)) {
+      const item = form.elements.namedItem(key) as HTMLInputElement;
+      if (!item) continue;
+      if (key === "ttl") continue;
+      item.value = value as string;
+    }
+  }
 </script>
 
 <tr class="border-t border-gray-700 hover:bg-gray-700 transition">
@@ -25,7 +36,10 @@
     >{row.ttl ? new Date(row.ttl).toLocaleTimeString() : "Never"}</td
   >
   <td class="p-3 flex gap-3">
-    <button class="text-blue-600 hover:text-blue-500 cursor-pointer transition">
+    <button
+      onclick={editItem}
+      class="text-blue-600 hover:text-blue-500 cursor-pointer transition"
+    >
       <Edit size={18} />
     </button>
     <button