display the upload box for further uploads

codeclou · Dec 29, 2018 · 9ae26b9 · 9ae26b9
1 parent 007124f
commit 9ae26b9
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 5 deletions.
diff --git a/src/app/services/backend.service.ts b/src/app/services/backend.service.ts
@@ -64,6 +64,9 @@ export class BackendService {
       const kartoffelstampfTerminalOutputEntry: KartoffelstampfTerminalOutputEntry = JSON.parse(event.data);
       subject.next(kartoffelstampfTerminalOutputEntry);
     };
+    ws.onerror = function (event) {
+      console.log('websocket onerror', event);
+    };
     ws.onclose = function (event) {
       subject.complete();
     };

diff --git a/src/app/upload-page/upload-page.component.html b/src/app/upload-page/upload-page.component.html
@@ -5,7 +5,6 @@
     [isActive]="activeStep == 1"
   ></app-numbered-headline>
   <div
-    *ngIf="activeStep == 1"
     class="drop-container"
     [class.drop-container---drag-over]="uiStateDragOver"
     [class.drop-container---drag-leave]="uiStateDragLeave"

diff --git a/src/app/upload-page/upload-page.component.ts b/src/app/upload-page/upload-page.component.ts
@@ -18,6 +18,7 @@ import { HttpErrorResponse } from '@angular/common/http';
       display:flex;
       justify-content: center;
       align-items: center;
+      transition: border-color 0.5s linear;
     }`,
     `.drop-container---drag-over { border-color: #0DFF0D; }`,
     `.drop-container---drag-leave { border-color: #ccc; }`,
@@ -70,12 +71,17 @@ export class UploadPageComponent implements OnInit, OnDestroy {
   }
 
   handleDrop(event: any) {
-    this.uiStateDragOver = false;
-    this.uiStateDragLeave = false;
-    this.uiStateDrop = true;
+    const self = this;
+    self.uiStateDragOver = false;
+    self.uiStateDragLeave = false;
+    self.uiStateDrop = true;
+    setTimeout(() => {
+      self.uiStateDrop = false;
+      self.uiStateDragLeave = true;
+    }, 400);
     event.stopPropagation();
     event.preventDefault();
-    this.processFileToBase64DataURI(<FileList>event.dataTransfer.files);
+    self.processFileToBase64DataURI(<FileList>event.dataTransfer.files);
   }
 
   handleDragOver(event: Event) {