Merge pull request #298 from NREL/issue-28

Initial Toast System and Data Privacy Disclaimer

src/app/app.component.html

@@ -7,6 +7,7 @@
             </div>
             <div class="w-100 main-content" (click)="collapseSidebar()">
                 <router-outlet></router-outlet>
+                <app-toast-notifications></app-toast-notifications>
             </div>
         </div>
         <!-- <router-outlet></router-outlet> -->

src/app/app.component.ts

@@ -14,6 +14,7 @@ import { EnergyOpportunityIdbService } from './indexed-db/energy-opportunity-idb
 import { EnergyEquipmentIdbService } from './indexed-db/energy-equipment-idb.service';
 import { ProcessEquipmentIdbService } from './indexed-db/process-equipment-idb.service';
 import { KeyPerformanceMetricImpactsIdbService } from './indexed-db/key-performance-metric-impacts-idb.service';
+import { ToastNotificationsService } from './core-components/toast-notifications/toast-notifications.service';
 
 @Component({
   selector: 'app-root',
@@ -34,12 +35,14 @@ export class AppComponent {
     private keyPerformanceIndicatorsIdbService: KeyPerformanceIndicatorsIdbService,
     private energyEquipmentIdbService: EnergyEquipmentIdbService,
     private processEquipmentIdbService: ProcessEquipmentIdbService,
-    private keyPerformanceMetricImpactIdbService: KeyPerformanceMetricImpactsIdbService) {
+    private keyPerformanceMetricImpactIdbService: KeyPerformanceMetricImpactsIdbService,
+    private toastNotificationService: ToastNotificationsService) {
   }
 
   async ngOnInit() {
     await this.initializeData();
     this.checkRouter();
+    this.toastNotificationService.showWebDisclaimer();
   }
 
   async initializeData() {

src/app/app.module.ts

@@ -20,6 +20,7 @@ import { AssessmentDashboardModule } from './assessment-dashboard/assessment-das
 import { SetupWizardModalComponent } from './core-components/setup-wizard-modal/setup-wizard-modal.component';
 import { ImportBackupModalComponent } from './core-components/import-backup-modal/import-backup-modal.component';
 import { PlotlyViaWindowModule } from 'angular-plotly.js';
+import { ToastNotificationsComponent } from './core-components/toast-notifications/toast-notifications.component';
 
 @NgModule({
   declarations: [
@@ -30,7 +31,8 @@ import { PlotlyViaWindowModule } from 'angular-plotly.js';
     LoadingComponent,
     SidebarComponent,
     SetupWizardModalComponent,
-    ImportBackupModalComponent
+    ImportBackupModalComponent,
+    ToastNotificationsComponent
   ],
   imports: [
     BrowserModule,

src/app/core-components/toast-notifications/toast-notifications.component.html

@@ -0,0 +1,14 @@
+<div class="toast-container position-fixed bottom-0 end-0 p-3 hide-print">
+    <div #toastItem role="alert" aria-live="assertive" aria-atomic="true" class="toast"
+        [attr.data-bs-autohide]="toastNotification?.autoHide" [ngClass]="toastNotification?.toastClass">
+        <ng-template [ngIf]="toastNotification">
+            <div class="toast-header">
+                <strong class="me-auto">{{toastNotification.title}}</strong>
+                <button type="button" class="btn-close" (click)="closeToast()" aria-label="Close"></button>
+            </div>
+            <div class="toast-body">
+                <span [innerHTML]="toastNotification.body"></span>
+            </div>
+        </ng-template>
+    </div>
+</div>

src/app/core-components/toast-notifications/toast-notifications.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ToastNotificationsComponent } from './toast-notifications.component';
+
+describe('ToastNotificationsComponent', () => {
+  let component: ToastNotificationsComponent;
+  let fixture: ComponentFixture<ToastNotificationsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ToastNotificationsComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ToastNotificationsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/core-components/toast-notifications/toast-notifications.component.ts

@@ -0,0 +1,57 @@
+import { Component, ElementRef, ViewChild } from '@angular/core';
+import * as bootstrap from 'bootstrap';
+import { ToastNotification, ToastNotificationsService } from './toast-notifications.service';
+import { Subscription } from 'rxjs';
+
+@Component({
+  selector: 'app-toast-notifications',
+  templateUrl: './toast-notifications.component.html',
+  styleUrl: './toast-notifications.component.css'
+})
+export class ToastNotificationsComponent {
+
+
+  @ViewChild('toastItem', { static: false }) toastItem: ElementRef;
+  toast: any;
+
+  toastNotification: ToastNotification;
+  toastNotificationSub: Subscription;
+  constructor(private toastNotificationService: ToastNotificationsService) {
+  }
+
+  ngOnInit(): void {
+    this.toastNotificationSub = this.toastNotificationService.toastNotification.subscribe(notification => {
+      this.toastNotification = notification;
+      this.showToast();
+    })
+  }
+
+  ngAfterViewInit() {
+    //Bootstrap toast initialization
+    if (bootstrap) {
+      this.toast = new bootstrap.Toast(this.toastItem.nativeElement);
+      this.showToast();
+    }
+  }
+
+  ngOnDestroy() {
+    this.toastNotificationSub.unsubscribe();
+    if (this.toast) {
+      this.toast.dispose();
+    }
+  }
+
+  showToast() {
+    if (this.toastNotification && this.toast) {
+      this.toast.show();
+    }
+  }
+
+
+
+  closeToast() {
+    this.toast.hide();
+    this.toastNotificationService.toastNotification.next(undefined);
+  }
+
+}

src/app/core-components/toast-notifications/toast-notifications.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ToastNotificationsService } from './toast-notifications.service';
+
+describe('ToastNotificationsService', () => {
+  let service: ToastNotificationsService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ToastNotificationsService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/core-components/toast-notifications/toast-notifications.service.ts

@@ -0,0 +1,40 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ToastNotificationsService {
+
+  toastNotification: BehaviorSubject<ToastNotification>;
+
+  constructor() {
+    this.toastNotification = new BehaviorSubject<ToastNotification>(undefined);
+  }
+
+  showToast(title: string, body: string, toastClass: ToastClass, autoHide: boolean) {
+    this.toastNotification.next({
+      autoHide: autoHide,
+      title: title,
+      body: body,
+      toastClass: toastClass
+    })
+  }
+
+  showWebDisclaimer() {
+    let title: string = "JUSTIFI Web";
+    let body: string = `You are running JUSTIFI in a web browser. All application data is saved within this browser (The DOE does not have access to your data). 
+      It is encouraged that you download backup files of your data frequently. Backups can be uploaded to restore lost or corrupted data. Additionally, sharing backups with the development team can help in their effort to make this tool. <br> <hr>
+      You can download data backups using the "Download Data" button in the upper right hand corner of your screen.`
+    this.showToast(title, body, "bg-info", false);
+  }
+}
+
+export interface ToastNotification {
+  autoHide: boolean,
+  title: string,
+  body: string,
+  toastClass: ToastClass
+}
+
+export type ToastClass = 'bg-success' | 'bg-info' | 'bg-danger' | 'bg-primary' | 'bg-secondary' | 'bg-warning' | 'bg-light' | 'bg-dark';