add upload

Ashwagandhae · Aug 17, 2023 · d3d364f · d3d364f
1 parent 3f4ec07
commit d3d364f
Show file tree

Hide file tree

Showing 17 changed files with 580 additions and 185 deletions.
diff --git a/src/components/Icon.svelte b/src/components/Icon.svelte
@@ -15,6 +15,8 @@
   import RobotIcon from './icons/RobotIcon.svelte';
   import VaultIcon from './icons/VaultIcon.svelte';
   import LoginIcon from './icons/LoginIcon.svelte';
+  import UploadIcon from './icons/UploadIcon.svelte';
+  import LockIcon from './icons/LockIcon.svelte';
   let icons = {
     copy: CopyIcon,
     popout: PopoutIcon,
@@ -32,6 +34,8 @@
     robot: RobotIcon,
     vault: VaultIcon,
     login: LoginIcon,
+    upload: UploadIcon,
+    lock: LockIcon,
   };
   export let name: string;
 </script>

diff --git a/src/components/Login.svelte b/src/components/Login.svelte
@@ -30,11 +30,11 @@
     // do basic validation
     if (email.length == 0) {
       emailError = true;
-      messenger.addError('Email is required');
+      messenger.addErrorMessage('Email is required');
     }
     if (password.length == 0) {
       passwordError = true;
-      messenger.addError('Password is required');
+      messenger.addErrorMessage('Password is required');
     }
     if (emailError || passwordError) {
       return;
@@ -46,14 +46,9 @@
         closePopup();
       })
       .catch((err) => {
-        console.log(err);
         emailError = true;
         passwordError = true;
-        if (typeof err == 'number') {
-          messenger.addError(`Login error: ${err}`);
-        } else {
-          messenger.addError('Login error');
-        }
+        messenger.addError('login', err);
       });
   }
 </script>

diff --git a/src/components/Main.svelte b/src/components/Main.svelte
@@ -28,7 +28,9 @@
   setContext('currentTool', currentTool);
   let currentEditor: Writable<string | null> = writable(null);
   setContext('currentEditor', currentEditor);
-  let shrunk = false;
+
+  let shrunk: Writable<boolean> = writable(false);
+  setContext('shrunk', shrunk);
 
   let card: Writable<ICard> = writable(null);
   setContext('card', card);
@@ -164,7 +166,7 @@
     );
   }
   function copyAndMessage() {
-    copyCard($card, shrunk);
+    copyCard($card, $shrunk);
     messenger.addMessage('Copied to clipboard!');
   }
 </script>
@@ -215,9 +217,9 @@
         <ParaTools
           paras={$card.paras}
           floating={paraToolsFloating}
-          bind:shrunk
+          bind:shrunk={$shrunk}
         />
-        <Paras {shrunk} />
+        <Paras shrunk={$shrunk} />
       </div>
     </div>
     {#if $popups.length > 0}

diff --git a/src/components/ParaTools.svelte b/src/components/ParaTools.svelte
@@ -13,7 +13,8 @@
     logout,
     autoCut as arguflowAutoCut,
     htmlToParas,
-    getUserLink,
+    getUserId,
+    URL_USER,
   } from './arguflow';
 
   let currentTool: Writable<null | 'highlight' | 'underline' | 'eraser'> =
@@ -30,34 +31,30 @@
       }
     }
     if (text.length == 0) {
-      messenger.addError('No text');
+      messenger.addErrorMessage('No text');
       return;
     }
     if (text.length >= 4300) {
-      messenger.addError(`Too much text, ${text.length}/4300 characters`);
+      messenger.addErrorMessage(
+        `Too much text, ${text.length}/4300 characters`
+      );
       return;
     }
     if (text.length <= 200) {
-      messenger.addError(`Too little text ${text.length}/200 characters`);
+      messenger.addErrorMessage(
+        `Too little text ${text.length}/200 characters`
+      );
       return;
     }
     messenger.addMessage('Auto cutting...');
 
     arguflowAutoCut(text)
       .then((cardHtml) => {
         messenger.addMessage('Done!');
-        history.action('autoCutParas', htmlToParas(cardHtml));
+        history.action('autoCutParas', htmlToParas(cardHtml.completion));
       })
       .catch((err) => {
-        if (err == 401) {
-          messenger.addError('Auto cut failed: Not logged in');
-          return;
-        }
-        if (typeof err == 'string' || typeof err == 'number') {
-          messenger.addError(`Auto cut failed: ${err}`);
-          return;
-        }
-        messenger.addError('Auto cut failed');
+        messenger.addError('auto cut', err);
       });
   }
   let transition = createTransition(
@@ -105,7 +102,7 @@
                   messenger.addMessage('Logged out');
                 })
                 .catch((err) => {
-                  messenger.addMessage('Failed to log out');
+                  messenger.addError('logout', err);
                 });
             } else {
               $popups.push('login');
@@ -119,21 +116,27 @@
           tooltip="Account"
           disabled={!$auth.loggedIn}
           on:click={() => {
-            getUserLink()
-              .then((link) => {
-                window.open(link, '_blank');
+            getUserId()
+              .then((id) => {
+                window.open(URL_USER + id, '_blank');
               })
               .catch((err) => {
-                if (err == 401) {
-                  messenger.addError('Failed to get user info: Not logged in');
-                  return;
-                }
-                messenger.addError('Failed to get user info');
+                messenger.addError('user info', err);
               });
           }}
         >
           <Icon name="person" />
         </Button>
+      </ButtonGroup>
+      <ButtonGroup>
+        <Button
+          tooltip="Upload to arguflow"
+          disabled={!$auth.loggedIn}
+          on:click={() => {
+            $popups.push('upload');
+            $popups = $popups;
+          }}><Icon name="upload" /></Button
+        >
         <Button
           tooltip="Auto cut"
           disabled={!$auth.loggedIn}

diff --git a/src/components/Popups.svelte b/src/components/Popups.svelte
@@ -3,6 +3,7 @@
   import Login from './Login.svelte';
   import { clickOutside } from './outclick';
   import { createTransition } from './transition';
+  import Upload from './Upload.svelte';
   export let name: IPopupKeys;
   export let closePopup: () => void;
   let transition = createTransition(
@@ -30,6 +31,8 @@
   >
     {#if name == 'login'}
       <Login {closePopup} />
+    {:else if name == 'upload'}
+      <Upload {closePopup} />
     {/if}
   </div>
 </div>

diff --git a/src/components/TextButton.svelte b/src/components/TextButton.svelte
@@ -1,4 +1,9 @@
-<button on:click><slot /></button>
+<script lang="ts">
+  export let expand = false;
+  export let disabled = false;
+</script>
+
+<button class:expand {disabled} on:click><slot /></button>
 
 <style>
   button {
@@ -24,6 +29,9 @@
       color var(--transition-duration), border var(--transition-duration);
     gap: var(--padding);
   }
+  button.expand {
+    width: 100%;
+  }
   button:hover,
   button:focus {
     background: var(--background-select-weak-secondary);

diff --git a/src/components/Tooltip.svelte b/src/components/Tooltip.svelte
@@ -6,7 +6,7 @@
   export let exist: boolean = true;
   export let content: string = '';
   export let disabled: boolean = false;
-  export const layout: string = 'bottom';
+  export let layout: string = 'bottom';
 
   let isHovered: boolean = false;
   let x: number = 0;