[webui]: add loading overlay to download and upload modal

X-FRI · May 31, 2024 · 8353f93 · 8353f93
1 parent f0723b2
commit 8353f93
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 28 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,5 @@
 .vscode/
 .idea/
 *.gz
-*.zip
+*.zip
+.fake
diff --git a/stoream-webui/src/components/DownloadFile.tsx b/stoream-webui/src/components/DownloadFile.tsx
@@ -46,6 +46,21 @@ interface DownloadFileProps {
 
 const DownloadFile: React.FC<DownloadFileProps> = ({ file, modalState, setModalState }) => {
     const [downloadingWaitState, setDownloadingWaitState] = useDisclosure(false);
+
+    const download = async () => {
+        setDownloadingWaitState.open()
+        const link = URL.createObjectURL(await Request.$$File.cat(file))
+        const download = document.createElement("a")
+        download.href = link
+        download.download = file.filename
+        setDownloadingWaitState.open()
+        download.click()
+        URL.revokeObjectURL(link)
+        setModalState.close()
+        download.remove()
+        setDownloadingWaitState.close()
+    }
+
     return (
         <>
             <Modal
@@ -58,27 +73,19 @@ const DownloadFile: React.FC<DownloadFileProps> = ({ file, modalState, setModalS
                     backgroundOpacity: 0.55,
                     blur: 3,
                 }}>
-                <Box pos="relative">
-                    <LoadingOverlay visible={downloadingWaitState} zIndex={1000} overlayProps={{ radius: "sm", blur: 2 }} />
-                </Box>
+                <LoadingOverlay visible={downloadingWaitState} zIndex={1000} overlayProps={{ radius: "sm", blur: 2 }} />
                 <List>
                     <List.Item>File name: {file.filename}</List.Item>
                     <List.Item>File path: {file.filepath}</List.Item>
                     <List.Item>File size: {stringOfFileSize(file.filesize)}</List.Item>
                 </List>
                 <Center>
-                    <Button mt="lg" leftSection={<IconDownload style={{ width: rem(14), height: rem(14) }} />} onClick={async () => {
-                        const link = URL.createObjectURL(await Request.$$File.cat(file))
-                        const download = document.createElement("a")
-                        download.href = link
-                        download.download = file.filename
-                        setDownloadingWaitState.open()
-                        download.click()
-                        URL.revokeObjectURL(link)
-                        setDownloadingWaitState.close()
-                        setModalState.close()
-                        download.remove()
-                    }}> Click to download </Button>
+                    <Button
+                        mt="lg"
+                        c="dark" bg="orange"
+                        leftSection={<IconDownload style={{ width: rem(14), height: rem(14) }} />}
+                        onClick={async () => await download()}
+                    > Click to download </Button>
                 </Center>
             </Modal>
         </>

diff --git a/stoream-webui/src/components/Header.tsx b/stoream-webui/src/components/Header.tsx
@@ -26,7 +26,7 @@
 /// NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
 /// SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
-import { Avatar, Card, Container, Drawer, Grid, GridCol, Group, Skeleton, Space, Stack, Tooltip } from "@mantine/core";
+import { Avatar, Card, Container, Drawer, Grid, GridCol, Group, Skeleton, Space, Stack, Text, Tooltip } from "@mantine/core";
 import { useDisclosure } from '@mantine/hooks';
 import About from "./About";
 import FileTypes from "./FileTypes";

diff --git a/stoream-webui/src/components/UploadFile.tsx b/stoream-webui/src/components/UploadFile.tsx
@@ -58,6 +58,7 @@ const UploadFile: React.FC<UploadFileProps> = ({ breadcrumbs, setBreadcrumbs, se
     const upload = async () => {
         const data = new FormData()
         data.append(uploadFile?.name as string, uploadFile as File)
+        setUploadingWaitState.open()
 
         await
             Request.$$File
@@ -95,9 +96,7 @@ const UploadFile: React.FC<UploadFileProps> = ({ breadcrumbs, setBreadcrumbs, se
                 }}
                 w={"auto"}
             >
-                <Box pos="relative">
-                    <LoadingOverlay visible={uploadingWaitState} zIndex={1000} overlayProps={{ radius: "sm", blur: 2 }} />
-                </Box>
+                <LoadingOverlay visible={uploadingWaitState} zIndex={1000} overlayProps={{ radius: "sm", blur: 2 }} />
                 <Fieldset legend="Upload File">
                     <FileInput
                         value={uploadFile}

diff --git a/stoream-webui/src/model/Config.res b/stoream-webui/src/model/Config.res
@@ -2,6 +2,15 @@
 type t = {engine: string}
 
 @val @scope(("window", "location"))
-external engine: string = "host"
+external host: string = "host"
 
-let config: t = {engine: engine}
+@val @scope(("window", "localStorage"))
+external devMode: string = "devMode"
+
+let config: t = {
+  engine: if devMode == "true" {
+    "http://localhost:9993"
+  } else {
+    ""
+  },
+}
diff --git a/stoream-webui/src/model/Request.res b/stoream-webui/src/model/Request.res
@@ -28,15 +28,15 @@
 
 module Directory = {
   let tree = async (): Directory.t => {
-    await Fetch.fetch(`/tree`, {mode: #cors})
+    await Fetch.fetch(`${Config.config.engine}/tree`, {mode: #cors})
     ->Promise.then(Fetch.Response.json)
     ->Promise.thenResolve(response =>
       response->Js.Json.decodeObject->Option.getExn->Response.Directory.parse
     )
   }
 
   let capacity = async (): float => {
-    await Fetch.fetch(`/capacity`, {mode: #cors})
+    await Fetch.fetch(`${Config.config.engine}/capacity`, {mode: #cors})
     ->Promise.then(Fetch.Response.json)
     ->Promise.thenResolve(response =>
       switch response->Js.Json.decodeObject->Option.getExn->Js_dict.get("Capacity") {
@@ -47,7 +47,7 @@ module Directory = {
   }
 
   let createdir = async (path: string): unit => {
-    await Fetch.fetch(`/createdir?path=${path}`, {mode: #cors})
+    await Fetch.fetch(`${Config.config.engine}/createdir?path=${path}`, {mode: #cors})
     ->Promise.then(Fetch.Response.json)
     ->Promise.thenResolve(response => {
       response
@@ -64,7 +64,7 @@ module Directory = {
   }
 
   let deletedir = async (path: string): unit => {
-    await Fetch.fetch(`/deletedir?path=${path}`, {mode: #cors})
+    await Fetch.fetch(`${Config.config.engine}/deletedir?path=${path}`, {mode: #cors})
     ->Promise.then(Fetch.Response.json)
     ->Promise.thenResolve(response => {
       response
@@ -114,7 +114,7 @@ module File = {
   }
 
   let deletefile = async (path: string): unit => {
-    await Fetch.fetch(`/deletefile?path=${path}`, {mode: #cors})
+    await Fetch.fetch(`${Config.config.engine}/deletefile?path=${path}`, {mode: #cors})
     ->Promise.then(Fetch.Response.json)
     ->Promise.thenResolve(response => {
       response
@@ -140,7 +140,7 @@ module User = {
     ->(
       async user =>
         await Fetch.fetch(
-          `/login?username=${user.username}&password=${user.password}`,
+          `${Config.config.engine}/login?username=${user.username}&password=${user.password}`,
           {mode: #cors},
         )
         ->Promise.then(Fetch.Response.json)