update settings

quintindk · Mar 24, 2024 · 40ae053 · 40ae053
1 parent d456879
commit 40ae053
Show file tree

Hide file tree

Showing 2 changed files with 84 additions and 66 deletions.
diff --git a/ui/src/routes/settings/Settings/Input.svelte b/ui/src/routes/settings/Settings/Input.svelte
@@ -1,56 +1,56 @@
 <script>
-    export let type = 'text';
-    export let value = type === 'text' ? '' : null;
-    export let error = '';
-    export let label = '';
-    export let placeholder = '';
-  
-    function handleInput({ target: t }) {
-      if (type === 'number') {
-        value = t.value === '' ? null : t.valueAsNumber;
-      } else {
-        value = t.value;
-      }
+  export let type = "text";
+  export let value = type === "text" ? "" : null;
+  export let error = "";
+  export let label = "";
+  export let placeholder = "";
+
+  function handleInput({ target: t }) {
+    if (type === "number") {
+      value = t.value === "" ? null : t.valueAsNumber;
+    } else {
+      value = t.value;
     }
-  </script>
-
-
-  <label class="block">
-      {#if label}
-          <span class="block">{label}</span>
-      {/if}
-      <input
-      class="block input"
-      class:error
-          {type}
-          {placeholder}
-          {value}
-          on:input={handleInput}
-          on:input
-          on:blur
-      />
-      {#if error}
-          <span class="block error-text">{error}</span>
-      {/if}
-  </label>
-
-  <style>
-      .input {
-          border-radius: 4px;
-          padding: 6px 10px;
-          margin: 0;
-          color:black;
-      }
-      
-      .block {
-      display: block;
-    }
-  
-    .error {
-      border-color: #f55;
-    }
-  
-    .error-text {
-      color: #f55;
-    }
-  </style>
+  }
+</script>
+
+<label class="block">
+  {#if label}
+    <span class="block mb-1">{label}</span>
+  {/if}
+  <input
+    class="block input"
+    class:error
+    {type}
+    {placeholder}
+    {value}
+    on:input={handleInput}
+    on:input
+    on:blur
+  />
+  {#if error}
+    <span class="block error-text">{error}</span>
+  {/if}
+</label>
+
+<style>
+  .input {
+    border-radius: 4px;
+    padding: 6px 10px;
+    margin: 0;
+    color: black;
+    width: 100%;
+  }
+
+  .block {
+    display: block;
+  }
+
+  .error {
+    border-color: #f55;
+  }
+
+  .error-text {
+    color: #f55;
+  }
+</style>
diff --git a/ui/src/routes/settings/Settings/Settings.svelte b/ui/src/routes/settings/Settings/Settings.svelte
@@ -4,28 +4,46 @@
   import Button from "./Button.svelte";
   import Input from "./Input.svelte";
   let result;
+  let settingsLoading;
   onMount(async () => {
     result = await getSettings();
     console.log(result);
   });
 
   async function handleSubmit() {
+    settingsLoading = true;
     const postResult = await setSettings(result);
     console.log(postResult);
+    settingsLoading = false;
   }
 </script>
 
-<form on:submit|preventDefault={handleSubmit}>
-  <p>API_KEYS</p>
+<div class="px-4 py-8 max-w-[600px]">
   {#if result}
-    <div class="pl-4">
-      <Input
-        label="CLAUDE"
-        type="text"
-        bind:value={result["API_KEYS"]["CLAUDE"]}
-      />
-    </div>
+    <form on:submit|preventDefault={handleSubmit}>
+      <div class="space-y-8">
+        {#each Object.keys(result) as mainKey}
+          <div>
+            <p class="mb-4">{mainKey}</p>
+            <div class="pl-4 space-y-3">
+              {#each Object.keys(result[mainKey]) as key}
+                <Input
+                  label={key}
+                  type="text"
+                  bind:value={result[mainKey][key]}
+                />
+              {/each}
+            </div>
+          </div>
+        {/each}
+      </div>
+      <div class="h-[20px]"></div>
+      <Button
+        type="submit"
+        text="Submit"
+        isActive={settingsLoading}
+        activeText="Submitting..."
+      ></Button>
+    </form>
   {/if}
-
-  <Button type="submit" text="Submit"></Button>
-</form>
+</div>