diff --git a/src/app/app.component.html b/src/app/app.component.html
index 135c6a62..5f10ff1d 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -7,6 +7,7 @@
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 6333af70..9162482e 100644
--- a/src/app/app.component.ts
+++ b/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() {
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index ec76d3e8..2d8de0b7 100644
--- a/src/app/app.module.ts
+++ b/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,
diff --git a/src/app/core-components/toast-notifications/toast-notifications.component.css b/src/app/core-components/toast-notifications/toast-notifications.component.css
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/core-components/toast-notifications/toast-notifications.component.html b/src/app/core-components/toast-notifications/toast-notifications.component.html
new file mode 100644
index 00000000..cc26def5
--- /dev/null
+++ b/src/app/core-components/toast-notifications/toast-notifications.component.html
@@ -0,0 +1,14 @@
+
\ No newline at end of file
diff --git a/src/app/core-components/toast-notifications/toast-notifications.component.spec.ts b/src/app/core-components/toast-notifications/toast-notifications.component.spec.ts
new file mode 100644
index 00000000..66c65ae1
--- /dev/null
+++ b/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;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ToastNotificationsComponent]
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(ToastNotificationsComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/core-components/toast-notifications/toast-notifications.component.ts b/src/app/core-components/toast-notifications/toast-notifications.component.ts
new file mode 100644
index 00000000..72e9b5ec
--- /dev/null
+++ b/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);
+ }
+
+}
diff --git a/src/app/core-components/toast-notifications/toast-notifications.service.spec.ts b/src/app/core-components/toast-notifications/toast-notifications.service.spec.ts
new file mode 100644
index 00000000..072c5e96
--- /dev/null
+++ b/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();
+ });
+});
diff --git a/src/app/core-components/toast-notifications/toast-notifications.service.ts b/src/app/core-components/toast-notifications/toast-notifications.service.ts
new file mode 100644
index 00000000..8b785d0c
--- /dev/null
+++ b/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;
+
+ constructor() {
+ this.toastNotification = new BehaviorSubject(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.
+ 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';
\ No newline at end of file