From 939e813228f513bed9b614cc47e4f8919875ce10 Mon Sep 17 00:00:00 2001
From: Marcell Mars <ki.ber@kom.uni.st>
Date: Tue, 24 Aug 2021 17:32:12 +0200
Subject: [PATCH] not sandpints key/values...

---
 src/App.svelte       |  4 ++--
 src/SpNotsand.svelte | 23 +++++++++++++++++++----
 2 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index d8f463b..56dce06 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -303,7 +303,7 @@
           {:else if fmItems[0] == "notsand"}
             <div class="fmMeta">
               <div class="fmMetaTitle">
-                {fmItems[0]}<button
+                Not Sandpoints<button
                   type="button"
                   on:click={() => removeTier(fmItems[0], fmItem)}
                   on:mouseover={fmItemDottedBorder}
@@ -311,7 +311,7 @@
                 >
               </div>
               <div class="fmItem">
-                <SpNotsand />
+                <SpNotsand {fmItem}/>
               </div>
             </div>
           {/if}
diff --git a/src/SpNotsand.svelte b/src/SpNotsand.svelte
index 6e7e7d6..2359692 100644
--- a/src/SpNotsand.svelte
+++ b/src/SpNotsand.svelte
@@ -1,4 +1,19 @@
-<label for="notsandkey">Key:</label>
-<input class="notsandkey" type="text" name="notsandkey" />
-<label for="notsandvalue">Value:</label>
-<input class="notsandvalue" type="text" name="notsandvalue" />
+<script>
+  import { onMount } from "svelte";
+  export let fmItem;
+
+  let id = "";
+  let notsandkey = "";
+  let notsandvalue = "";
+
+  onMount(() => {
+    id = Math.random();
+    notsandkey = `notsandkey_${id}`;
+    notsandvalue = `notsandvalue_${id}`;
+  });
+</script>
+
+<label for={notsandkey}>Key:</label>
+<input class="notsandkey" type="text" name={notsandkey} value={!fmItem.fmKey.startsWith("_new") ? fmItem.fmKey : ""} />
+<label for={notsandvalue}>Value:</label>
+<input class="notsandvalue" type="text" name={notsandvalue} value={fmItem.fmValue ? JSON.stringify(fmItem.fmValue) : ""} />