download templates

ui/src/App.svelte

@@ -4,7 +4,6 @@
   import { pipe } from 'fp-ts/lib/function';
   import { onDestroy } from 'svelte';
   import DownloadCard from './lib/DownloadCard.svelte';
-  import FloatingAction from './lib/FloatingAction.svelte';
   import Footer from './lib/Footer.svelte';
   import Navbar from './lib/Navbar.svelte';
   import Spinner from './lib/Spinner.svelte';
@@ -58,7 +57,7 @@
       {/each}
     </div>
   {/if}
-  <FloatingAction />
+  <!-- <FloatingAction /> -->
   <Footer />
   <SvelteToast />
 </main>

ui/src/lib/Footer.svelte

@@ -11,7 +11,7 @@
   });
 
   const minHeight = 52;
-  const maxHeight = 600;
+  const maxHeight = window.innerHeight - 60;
 
   let open = false;
   $: open = $height > minHeight;

ui/src/lib/NewDownload.svelte

@@ -2,11 +2,13 @@
   import { get } from 'svelte/store';
   import Button from './Button.svelte';
   import TextField from './TextField.svelte';
-  import { rpcClient } from './store';
+  import { downloadTemplates, rpcClient } from './store';
 
   let url: string = '';
   let args: string = '';
 
+  $: console.log(args);
+
   const download = () =>
     get(rpcClient).download({
       url,
@@ -14,8 +16,15 @@
     });
 </script>
 
-<div>
+<div class="w-full">
-  <TextField label="url" bind:value={url} />
+  <div class="flex gap-2 w-full mb-2">
-  <TextField label="args" bind:value={args} />
+    <TextField label="url" class="w-96" bind:value={url} />
+    <TextField label="args" class="w-96" bind:value={args} />
+  </div>
   <Button on:click={download}>Download</Button>
+  <select bind:value={args}>
+    {#each $downloadTemplates as template}
+      <option id={template.id} value={template.content}>{template.name}</option>
+    {/each}
+  </select>
 </div>

ui/src/lib/TextField.svelte

@@ -1,14 +1,19 @@
 <script lang="ts">
+  let clazz: string = '';
   export let label: string;
   export let value: any;
+
+  export let disabled: boolean = false;
+  export { clazz as class };
 </script>
 
 <div class="flex flex-col gap-0.5 text-sm">
   <label for=""> {label} </label>
   <input
     type="text"
-    class="p-2 bg-neutral-50 border rounded-lg"
+    class={`p-2 bg-neutral-50 border rounded-lg ${clazz}`}
     on:keyup
     bind:value
+    {disabled}
   />
 </div>

ui/src/lib/store.ts

@@ -1,7 +1,7 @@
 import * as O from 'fp-ts/lib/Option'
-import { derived, writable } from 'svelte/store'
+import { derived, readable, writable } from 'svelte/store'
 import { RPCClient } from './RPCClient'
-import type { RPCResult } from './types'
+import { type CustomTemplate, type RPCResult } from './types'
 
 export const rpcHost = writable<string>(localStorage.getItem('rpcHost') ?? 'localhost')
 export const rpcPort = writable<number>(Number(localStorage.getItem('rpcPort')) || 3033)
@@ -45,3 +45,13 @@ export const rpcClient = derived(
 export const downloads = writable<O.Option<RPCResult[]>>(O.none)
 
 export const cookiesTemplate = writable<string>('')
+
+/**
+ * fetches download templates, needs manual update
+ */
+export const downloadTemplates = readable<CustomTemplate[]>([], (set) => {
+  serverApiEndpoint
+    .subscribe(ep => fetch(`${ep}/api/v1/template/all`)
+      .then(res => res.json())
+      .then(data => set(data)))
+})