From e0444528d70028f833ee3e7cdc7de1a1aa19d257 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= <t@mldk.cz>
Date: Sun, 16 Jan 2022 22:58:05 +0100
Subject: [PATCH] [ui] base of file/url upload dialog

---
 webui/src/App.svelte                      |  2 ++
 webui/src/components/AddModal.svelte      | 44 +++++++++++++++++++++++
 webui/src/components/DropAdd.svelte       | 11 +++---
 webui/src/components/layout/Header.svelte | 15 +++++++-
 4 files changed, 66 insertions(+), 6 deletions(-)
 create mode 100644 webui/src/components/AddModal.svelte

diff --git a/webui/src/App.svelte b/webui/src/App.svelte
index 3260efb..8fc9bc2 100644
--- a/webui/src/App.svelte
+++ b/webui/src/App.svelte
@@ -7,6 +7,7 @@
   import Browse from "./views/Browse.svelte";
   import Search from "./views/Search.svelte";
   import DropAdd from "./components/DropAdd.svelte";
+  import AddModal from "./components/AddModal.svelte";
 
   const history = createHistory(createHashSource());
 
@@ -35,6 +36,7 @@
 </Router>
 
 <DropAdd />
+<AddModal />
 
 <style global lang="scss">
   @use "normalize.css/normalize.css";
diff --git a/webui/src/components/AddModal.svelte b/webui/src/components/AddModal.svelte
new file mode 100644
index 0000000..272dd1a
--- /dev/null
+++ b/webui/src/components/AddModal.svelte
@@ -0,0 +1,44 @@
+<script context="module" lang="ts">
+  export type AddEvents = {
+    files: File[];
+    urls: string[];
+  };
+  export const addEmitter = mitt<AddEvents>();
+</script>
+
+<script lang="ts">
+  import mitt from "mitt";
+
+  let files: File[] = [];
+  let URLs: string[] = [];
+  $: visible = files.length + URLs.length > 0;
+
+  addEmitter.on("files", (ev) => {
+    files = ev;
+  });
+</script>
+
+<div class="addmodal-container" class:visible>
+  <div class="addmodal">
+    {#each files as file}
+      <div>{file.name}</div>
+    {/each}
+  </div>
+</div>
+
+<style lang="scss">
+  .addmodal-container {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0, 0, 0, 0.5);
+    color: var(--foreground);
+
+    display: none;
+    &.visible {
+      display: unset;
+    }
+  }
+</style>
diff --git a/webui/src/components/DropAdd.svelte b/webui/src/components/DropAdd.svelte
index 6895046..3377378 100644
--- a/webui/src/components/DropAdd.svelte
+++ b/webui/src/components/DropAdd.svelte
@@ -1,23 +1,24 @@
 <script lang="ts">
+  import { addEmitter } from "./AddModal.svelte";
   import Icon from "./utils/Icon.svelte";
 
   let dragging = false;
 
   function onDrop(ev: DragEvent) {
-    console.log(ev.dataTransfer);
+    console.debug(ev.dataTransfer);
+    if (ev.dataTransfer.files.length > 0) {
+      addEmitter.emit("files", Array.from(ev.dataTransfer.files));
+    } // TODO: else check for URLs
     dragging = false;
   }
 
-  function onDragEnter(ev: DragEvent) {
-    console.log("dragstart!");
-  }
+  function onDragEnter(ev: DragEvent) {}
 
   function onDragOver(ev: DragEvent) {
     dragging = true;
   }
 
   function onDragLeave(ev: DragEvent) {
-    console.log("dragleave!");
     dragging = false;
   }
 </script>
diff --git a/webui/src/components/layout/Header.svelte b/webui/src/components/layout/Header.svelte
index ee5c460..4055234 100644
--- a/webui/src/components/layout/Header.svelte
+++ b/webui/src/components/layout/Header.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { Link, useLocation, useNavigate, useParams } from "svelte-navigator";
   import { useMatch } from "svelte-navigator";
+  import { addEmitter } from "../AddModal.svelte";
   import Icon from "../utils/Icon.svelte";
   import Input from "../utils/Input.svelte";
   const navigate = useNavigate();
@@ -19,6 +20,13 @@
       navigate("/");
     }
   }
+
+  let fileInput: HTMLInputElement;
+  function onFileChange() {
+    if (fileInput.files.length > 0) {
+      addEmitter.emit("files", Array.from(fileInput.files));
+    }
+  }
 </script>
 
 <div class="header">
@@ -37,8 +45,9 @@
       <Icon name="search" slot="prefix" />
     </Input>
   </div>
-  <button class="add-button">
+  <button class="add-button" on:click={() => fileInput.click()}>
     <Icon name="plus-circle" />
+    <input type="file" bind:this={fileInput} on:change={onFileChange} />
   </button>
 </div>
 
@@ -91,6 +100,10 @@
       line-height: 1;
       display: block;
       cursor: pointer;
+
+      input {
+        display: none;
+      }
     }
   }
 </style>