Working upload, congratulations, and reset

jmetz · Oct 27, 2023 · e14b875 · e14b875
1 parent 5b6c96e
commit e14b875
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 32 deletions.
diff --git a/src/components/HyphaUploader/Nav.svelte b/src/components/HyphaUploader/Nav.svelte
@@ -1,9 +1,11 @@
 <script>
     //import { Steps } from 'svelte-steps';
     //import Steps  from './Steps.svelte';
-    //export let current=0;
+    export let current=0;
     export let max_step=0;
-    export let steps= new Map();
+    export let steps = [];
+    //export let steps= new Map();
+
     //let ssteps = Array.from(steps.values());
     //let clickables = Array.from(
         //{length: ssteps.length},
@@ -14,41 +16,44 @@
 </script>
 
 <style>
-    /*ul{*/
-        /*list-style-type: none;*/
-        /*display: flex;*/
-    /*}*/
-    /*li{*/
-        /*padding: 0 5px;*/
-    /*}*/
     .boo{
         color: grey;
     }
 </style>
 
-<!--h1>Current: {steps[current].text}</h1-->
-<!--<ul>-->
-    <!--{#each steps as step, i}-->
-        <!--{#if i<=max_step}-->
-            <!--<li on:click={()=> {current=i}}>{step.text}</li>-->
-        <!--{:else}-->
-            <!--<li class="boo">{step.text}</li>-->
-        <!--{/if}-->
-    <!--{/each}-->
-<!--</ul>-->
-
 <nav class="navbar" aria-label="uploader steps">
     <div class="navbar-menu">
-    {#each [...steps] as [key, step], i}
+    {#each steps as step, i}
         {#if i<=max_step}
-            <a class="navbar-item is-hoverable" href="#{key}">
-                {step.text}
-            </a>
+            <div 
+                class="navbar-item is-hoverable" 
+                role="button"
+                tabindex="0"
+                on:click={()=> {current=i}}
+                  on:keypress={() => {current=i}}
+                >{step.text}</div>
         {:else}
-            <a class="navbar-item boo" disabled>{step.text}</a>
+            <div class="navbar-item boo">{step.text}</div>
         {/if}
     {/each}
     </div>
 </nav>
+
+<!--</ul>-->
+
+<!--<nav class="navbar" aria-label="uploader steps">-->
+    <!--<div class="navbar-menu">-->
+    <!--{#each [...steps] as [key, step], i}-->
+        <!--{#if i<=max_step}-->
+            <!--<!-- class="navbar-item is-hoverable" href="#{key}">-->
+            <!--<a class="navbar-item is-hoverable" href="#{key}">-->
+                <!--{step.text}-->
+            <!--</a>-->
+        <!--{:else}-->
+            <!--<a class="navbar-item boo" disabled>{step.text}</a>-->
+        <!--{/if}-->
+    <!--{/each}-->
+    <!--</div>-->
+<!--</nav>-->
 <!--<Steps steps={ssteps} {clickables}/>-->
 
diff --git a/src/components/HyphaUploader/index.svelte b/src/components/HyphaUploader/index.svelte
@@ -126,7 +126,7 @@
         console.log(server);
         connection_retry = 0;
         console.log("Hypha connected");
-    };
+    }
 
     if (browser){
         if(!server) initHypha();
@@ -138,22 +138,40 @@
     }
 
 </script>
-
+<style type="text/css" media="screen">
+    .loader{
+        display: inline-block;
+    }
+</style>
 <section class="container">
-<Steps current={current} {max_step} {steps}/>
+<Nav bind:current={current} {max_step} {steps}/>
+<h1 class="title">Bioimage.io Uploader</h1>
 {#if !token}
-    Connecting to Imjoy
     {#if login_url}
-        <button class="button is-primary" on:click={()=>{window.open(login_url, '_blank')}}>Login to Imjoy</button>
+        <button class="button is-small is-primary" on:click={()=>{window.open(login_url, '_blank')}}>Login to Imjoy</button>
+    {:else}
+        <span class="is-info">Connecting to Imjoy...<span class="loader"></span></span>
     {/if}
 {:else if !server}
-    Initializing...
+    <span class="is-primary">Initializing...<span class="loader"></span></span>
 {:else if all_done === true}
     <p>🥳🎉 Congratulations!!</p>
     <p>You are all done. <button class="button is-info" on:click={reset}>Press here to upload another model</button></p>
+    <div style="
+ position: fixed;
+ top: -50px;
+ left: 0;
+ height: 100vh;
+ width: 100vw;
+ display: flex;
+ justify-content: center;
+ overflow: hidden;
+ pointer-events: none;">
+ <Confetti x={[-5, 5]} y={[0, 0.1]} delay={[500, 2000]} infinite duration=5000 amount=200 fallDistance="100vh" />
+</div>
 {:else}
     <!--{#key current}-->
-    <!--<div transition:slide={{ delay: 250, duration: 300, easing: quintOut, axis: 'x' }}>-->
+    <!--<div transition:slide={{ delay: 250, duration: 500, easing: quintOut, axis: 'x' }}>-->
     <svelte:component 
             this={components[current]._component} 
             {token}