better toast/notifications.

- configurable autohide
- success style
- notifications on sync ocomplete.

CONTRIBUTING.md

@@ -6,7 +6,7 @@ go mod vendor
 go run backend/cmd/fasten/fasten.go start --config ./config.example.yaml --debug
 
 docker build -t fasten-couchdb -f docker/couchdb/Dockerfile .
-docker run --rm -it -p 5984:5984 -v `pwd`/.couchdb/data:/opt/couchdb/data fasten-couchdb
+docker run --rm -it -p 5984:5984 -v `pwd`/.couchdb/data:/opt/couchdb/data -v `pwd`/.couchdb/config:/opt/couchdb/etc/local.d fasten-couchdb
 ```
 
 # Docker 

frontend/src/app/components/toast/toast.component.html

@@ -1,8 +1,8 @@
-<div class="pos-absolute t-10 r-10">
+<div class="toast-container">
   <ngb-toast
     *ngFor="let toast of toastService.toasts"
     [class]="toast.displayClass"
-    [autohide]="true"
+    [autohide]="toast.autohide"
     [delay]="toast.delay || 5000"
     (hidden)="toastService.remove(toast)"
   >

frontend/src/app/models/fasten/toast.ts

@@ -1,5 +1,6 @@
 export enum ToastType {
   Error = "error",
+  Success = "success",
   Info = "info"
 }
 
@@ -8,4 +9,5 @@ export class ToastNotification {
   message: string
   type: ToastType = ToastType.Info
   displayClass: string = 'demo-static-toast'
+  autohide: boolean = true
 }

frontend/src/app/pages/medical-sources/medical-sources.component.ts

@@ -12,6 +12,8 @@ import {ActivatedRoute, Router} from '@angular/router';
 import {Location} from '@angular/common';
 import {SourceType} from '../../../lib/models/database/source_types';
 import {QueueService} from '../../workers/queue.service';
+import {ToastService} from '../../services/toast.service';
+import {ToastNotification, ToastType} from '../../models/fasten/toast';
 // If you dont import this angular will import the wrong "Location"
 
 export const sourceConnectWindowTimeout = 24*5000 //wait 2 minutes (5 * 24 = 120)
@@ -38,6 +40,7 @@ export class MedicalSourcesComponent implements OnInit {
     private router: Router,
     private location: Location,
     private queueService: QueueService,
+    private toastService: ToastService
   ) { }
   status: { [name: string]: string } = {}
 
@@ -250,11 +253,21 @@ export class MedicalSourcesComponent implements OnInit {
           //remove item from available sources list, add to connected sources.
           this.availableSourceList.splice(this.availableSourceList.findIndex((item) => item.metadata.source_type == sourceType), 1);
           this.connectedSourceList.push({source: sourceSyncMessage.source, metadata: this.metadataSources[sourceType]})
+
+          const toastNotificaiton = new ToastNotification()
+          toastNotificaiton.type = ToastType.Success
+          toastNotificaiton.message = `Successfully connected ${sourceType}`
+          this.toastService.show(toastNotificaiton)
         },
         (err) => {
           delete this.status[sourceType]
           // window.location.reload();
 
+          const toastNotificaiton = new ToastNotification()
+          toastNotificaiton.type = ToastType.Error
+          toastNotificaiton.message = `An error occurred while accessing ${sourceType}: ${err}`
+          toastNotificaiton.autohide = false
+          this.toastService.show(toastNotificaiton)
           console.error(err)
         });
   }

frontend/src/app/services/toast.service.ts

@@ -11,11 +11,19 @@ export class ToastService {
 
   show(toastNotification: ToastNotification) {
     if(!toastNotification.title){
-      toastNotification.title = toastNotification.type == ToastType.Error ? "Error" : "Notification"
+      if(toastNotification.type == ToastType.Error){
+        toastNotification.title = "Error"
+      }else if(toastNotification.type == ToastType.Success){
+        toastNotification.title = "Success"
+      }else{
+        toastNotification.title = "Notification"
+      }
     }
 
     if(toastNotification.type == ToastType.Error){
       toastNotification.displayClass += ' bg-danger text-light'
+    } else if(toastNotification.type == ToastType.Success){
+      toastNotification.displayClass += ' bg-indigo text-light'
     }
 
     this.toasts.push(toastNotification);

frontend/src/app/workers/queue.service.ts

@@ -3,13 +3,15 @@ import {Observable, of} from 'rxjs';
 import {fromWorker} from 'observable-webworker';
 import {Source} from '../../lib/models/database/source';
 import {SourceSyncMessage} from '../models/queue/source-sync-message';
+import {ToastService} from '../services/toast.service';
+import {ToastNotification, ToastType} from '../models/fasten/toast';
 
 @Injectable({
   providedIn: 'root'
 })
 export class QueueService {
 
-  constructor() { }
+  constructor(private toastService: ToastService) { }
 
   runSourceSyncWorker(source: Source):Observable<string> {
     if (typeof Worker !== 'undefined') {
@@ -26,6 +28,12 @@ export class QueueService {
       // Web workers are not supported in this environment.
       // You should add a fallback so that your program still executes correctly.
       console.error("WORKERS ARE NOT SUPPORTED")
+
+      const toastNotificaiton = new ToastNotification()
+      toastNotificaiton.type = ToastType.Error
+      toastNotificaiton.message = "Your browser does not support web-workers. Cannot continue."
+      toastNotificaiton.autohide = false
+      this.toastService.show(toastNotificaiton)
     }
 
   }

frontend/src/styles.scss

@@ -22,6 +22,15 @@
   text-overflow: ellipsis;
 }
 
+// toast notifications container
+// sticky-top float-right pt-3 pr-3
+.toast-container {
+  position: fixed;
+  right: 20px;
+  top: 20px;
+  z-index: 1000;
+}
+
 /* You can add global styles to this file, and also import other style files */
 /*
 * Azia v1.0.0 (https://www.bootstrapdash.com/demo/azia/v1.0/)