add confirm step for server

hzrd149 · Feb 27, 2024 · 7870259 · 7870259
1 parent 683bcb1
commit 7870259
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 8 deletions.
diff --git a/src/pages/Misc.svelte b/src/pages/Misc.svelte
@@ -10,6 +10,11 @@
   import { BlossomClient, type BlobDescriptor } from "blossom-client";
   import { signEventTemplate } from "../services/ndk";
   import { servers } from "../services/servers";
+  import { onMount } from "svelte";
+
+  onMount(() => {
+    refreshBlobs();
+  });
 
   let selectedDrive = "";
   let selectedType = "";
@@ -21,7 +26,9 @@
 
   $: sortedBlobs = miscBlobs
     .filter((b) => {
-      if (selectedDrive) {
+      if (selectedDrive === "--non--") {
+        if (getBlobDrives(b).length > 0) return false;
+      } else if (selectedDrive) {
         const isInDrive = getBlobDrives(b).some((d) => d.tags.find((t) => t[0] === "d")?.[1] === selectedDrive);
         if (!isInDrive) return false;
       }
@@ -51,10 +58,13 @@
 
 <div class="m-2 flex gap-2">
   <Select placeholder="Select Drive..." bind:value={selectedDrive}>
-    <option value="">None</option>
-    {#each Object.entries($drives) as [id, drive]}
-      <option value={id}>{getDriveName(drive)}</option>
-    {/each}
+    <option value="">Any</option>
+    <option value="--none--">None</option>
+    <optgroup label="Drives">
+      {#each Object.entries($drives) as [id, drive]}
+        <option value={id}>{getDriveName(drive)}</option>
+      {/each}
+    </optgroup>
   </Select>
   <Select placeholder="Select Type..." bind:value={selectedType}>
     <option value="">Any</option>

diff --git a/src/pages/Servers.svelte b/src/pages/Servers.svelte
@@ -3,6 +3,7 @@
     Button,
     Input,
     Table,
+    Modal,
     TableBody,
     TableBodyCell,
     TableBodyRow,
@@ -13,11 +14,22 @@
   import { cloneEvent } from "../helpers/event";
 
   let server = "";
+  let confirmModal = false;
+  async function handleSubmit(e: SubmitEvent) {
+    e.preventDefault();
+    confirmModal = true;
+  }
+
   let loading = false;
-  async function addServer(e: SubmitEvent) {
+  async function addServer() {
+    if (!server) return;
     try {
-      e.preventDefault();
       loading = true;
+
+      if (!server.startsWith("http")) throw new Error("Protocol must be http:// or https://");
+      const res = await fetch(new URL("/upload", server));
+      if (res.status === 404) throw new Error("Server missing upload endpoint");
+
       const draft = cloneEvent($serverEvent, 10063);
       draft.tags.push(["r", new URL(server).toString()]);
       await draft.sign();
@@ -68,7 +80,23 @@
   </TableBody>
 </Table>
 
-<form class="flex gap-2 px-2" on:submit={addServer}>
+<form class="flex gap-2 px-2" on:submit={handleSubmit}>
   <Input placeholder="https://cdn.example.com" bind:value={server} required />
   <Button class="shrink-0" disabled={loading} type="submit">Add Server</Button>
 </form>
+
+{#if server}
+  <Modal title="Add Server" bind:open={confirmModal} autoclose size="xl">
+    <iframe
+      class="w-full"
+      style="height: 70vh;"
+      src={new URL("/", server).toString()}
+      frameborder="0"
+      title="Server info"
+    />
+    <svelte:fragment slot="footer">
+      <Button color="alternative" class="ml-auto">Cancel</Button>
+      <Button on:click={addServer}>Add Server</Button>
+    </svelte:fragment>
+  </Modal>
+{/if}