Merge pull request #307 from NREL/issue-269

Issue 269: Example Data Groundwork

src/app/core-components/navbar/navbar.component.html

@@ -39,8 +39,8 @@
         <hr>
     </div>
     <div class="popup-footer d-flex justify-content-end">
-        <button class="btn btn-secondary me-2" (click)="closeResetDatabaseModal()">Cancel</button>
-        <button class="btn btn-danger" (click)="resetDatabase()">Reset Database</button>
+        <button class="btn btn-secondary btn-sm me-2" (click)="closeResetDatabaseModal()">Cancel</button>
+        <button class="btn btn-danger btn-sm" (click)="resetDatabase()">Reset Database</button>
     </div>
 </div>
 

src/app/core-components/setup-wizard-modal/setup-wizard-modal.component.html

@@ -75,7 +75,7 @@
         <hr>
     </div>
     <div class="popup-footer d-flex justify-content-end">
-        <button class="btn btn-secondary me-2" (click)="closeCreateNewModal()">Cancel</button>
-        <button class="btn btn-success" (click)="confirmCreate()">Confirm</button>
+        <button class="btn btn-secondary btn-sm me-2" (click)="closeCreateNewModal()">Cancel</button>
+        <button class="btn btn-success btn-sm" (click)="confirmCreate()">Confirm</button>
     </div>
 </div>

src/app/core-components/welcome/welcome.component.html

@@ -7,7 +7,8 @@
                         Welcome to JUSTIFI!
                     </div>
                     <p class="card-text fw-light">
-                        Use this tool to identify, estimate potential and report on non-energy benefits (NEBs) that can be
+                        Use this tool to identify, estimate potential and report on non-energy benefits (NEBs) that can
+                        be
                         found while conducting energy assessments.
                     </p>
                 </div>
@@ -123,6 +124,20 @@
                                 Non-Energy Benefits Resources
                             </div>
                             <div class="d-flex flex-column">
+                                <div>
+                                    <fa-icon [icon]="faFileCirclePlus"></fa-icon>
+                                    <a class="click-link" (click)="openAddExampleModal();">
+                                        Cocoa Co. Example Data
+                                    </a>
+                                    <p class="card-text fw-light">
+                                        Click the above link to add an example company to your portfolio. This will allow
+                                        you to view a completed example visit of a fictional chocolate company's
+                                        candy bar facility.
+                                    </p>
+                                </div>
+                                <div class="col-12">
+                                    <hr>
+                                </div>
                                 <div>
                                     <!-- <a [href]="'https://www.nrel.gov/'" target="_blank">
                                         <fa-icon [icon]="faExternalLink"></fa-icon>
@@ -174,4 +189,27 @@
             </div>
         </div>
     </div>
+</div>
+
+
+<div [ngClass]="{'window-overlay': showAddExampleModal}"></div>
+<div class="popup" [ngClass]="{'open': showAddExampleModal }">
+    <div class="popup-header">Add Example Data
+        <button type="button" class="btn-close float-end" aria-label="Close" (click)="closeAddExampleModal()"></button>
+    </div>
+    <div class="popup-body">
+        <p>
+            We created an example chocolate company and facilities for you to use to explore the JUSTIFI application. In
+            the example you can see some of the potential NEBs associated with a few energy projects...
+
+            <!--
+            TODO: a full description of the example would be good here once it's full flushed out.
+            -->
+        </p>
+        <hr>
+    </div>
+    <div class="popup-footer d-flex justify-content-end">
+        <button class="btn btn-secondary btn-sm me-2" (click)="closeAddExampleModal()">Cancel</button>
+        <button class="btn btn-success btn-sm" (click)="addExample()">Add Example</button>
+    </div>
 </div>

src/app/core-components/welcome/welcome.component.spec.ts

@@ -11,6 +11,17 @@ import { SharedDataService } from 'src/app/shared/shared-services/shared-data.se
 import { OnSiteVisitIdbService } from 'src/app/indexed-db/on-site-visit-idb.service';
 import { FacilityIdbService } from 'src/app/indexed-db/facility-idb.service';
 import { CompanyIdbService } from 'src/app/indexed-db/company-idb.service';
+import { BackupDataService } from 'src/app/shared/shared-services/backup-data.service';
+import { ToastNotificationsService } from '../toast-notifications/toast-notifications.service';
+import { LoadingService } from '../loading/loading.service';
+import { EnergyOpportunityIdbService } from 'src/app/indexed-db/energy-opportunity-idb.service';
+import { AssessmentIdbService } from 'src/app/indexed-db/assessment-idb.service';
+import { ContactIdbService } from 'src/app/indexed-db/contact-idb.service';
+import { NonEnergyBenefitsIdbService } from 'src/app/indexed-db/non-energy-benefits-idb.service';
+import { KeyPerformanceIndicatorsIdbService } from 'src/app/indexed-db/key-performance-indicators-idb.service';
+import { EnergyEquipmentIdbService } from 'src/app/indexed-db/energy-equipment-idb.service';
+import { ProcessEquipmentIdbService } from 'src/app/indexed-db/process-equipment-idb.service';
+import { KeyPerformanceMetricImpactsIdbService } from 'src/app/indexed-db/key-performance-metric-impacts-idb.service';
 
 describe('WelcomeComponent', () => {
   let component: WelcomeComponent;
@@ -40,6 +51,17 @@ describe('WelcomeComponent', () => {
         { provide: OnSiteVisitIdbService, useValue: onSiteVisitIdbService },
         { provide: FacilityIdbService, useValue: facilityIdbService },
         { provide: CompanyIdbService, useValue: companyIdbService },
+        { provide: BackupDataService, useValue: {}},
+        { provide: ToastNotificationsService, useValue: {}},
+        { provide: LoadingService, useValue: {}},
+        { provide: EnergyOpportunityIdbService, useValue: {}},
+        { provide: AssessmentIdbService, useValue: {}},
+        { provide: ContactIdbService, useValue: {}},
+        { provide: NonEnergyBenefitsIdbService, useValue: {}},
+        { provide: KeyPerformanceIndicatorsIdbService, useValue: {}},
+        { provide: EnergyEquipmentIdbService, useValue: {}},
+        { provide: ProcessEquipmentIdbService, useValue: {}},
+        { provide: KeyPerformanceMetricImpactsIdbService, useValue: {}}
       ]
     });
     fixture = TestBed.createComponent(WelcomeComponent);

src/app/core-components/welcome/welcome.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { IconDefinition, faBookOpen, faBookReader, faBuilding, faChevronRight, faDatabase, faExternalLink, faFolderOpen, faIndustry, faQuestionCircle, faSearchPlus, faStopwatch, faWandMagicSparkles } from '@fortawesome/free-solid-svg-icons';
+import { IconDefinition, faBookOpen, faBookReader, faBuilding, faChevronRight, faDatabase, faExternalLink, faFileCirclePlus, faFolderOpen, faIndustry, faQuestionCircle, faSearchPlus, faStopwatch, faWandMagicSparkles } from '@fortawesome/free-solid-svg-icons';
 import { Subscription } from 'rxjs';
 import { CompanyIdbService } from 'src/app/indexed-db/company-idb.service';
 import { FacilityIdbService } from 'src/app/indexed-db/facility-idb.service';
@@ -11,6 +11,11 @@ import { IdbOnSiteVisit } from 'src/app/models/onSiteVisit';
 import { IdbUser } from 'src/app/models/user';
 import { SharedDataService } from 'src/app/shared/shared-services/shared-data.service';
 import * as _ from 'lodash';
+import { LoadingService } from '../loading/loading.service';
+import { BackupDataService, BackupFile } from 'src/app/shared/shared-services/backup-data.service';
+import { DbChangesService } from 'src/app/indexed-db/db-changes.service';
+import { Router } from '@angular/router';
+import { ToastNotificationsService } from '../toast-notifications/toast-notifications.service';
 
 @Component({
   selector: 'app-welcome',
@@ -29,7 +34,8 @@ export class WelcomeComponent {
   faBuilding: IconDefinition = faBuilding;
   faIndustry: IconDefinition = faIndustry;
   faSearchPlus: IconDefinition = faSearchPlus;
-  faStopwatch: IconDefinition = faStopwatch
+  faStopwatch: IconDefinition = faStopwatch;
+  faFileCirclePlus: IconDefinition = faFileCirclePlus;
 
   userSub: Subscription
   user: IdbUser;
@@ -42,11 +48,18 @@ export class WelcomeComponent {
 
   companies: Array<IdbCompany>;
   companiesSub: Subscription;
+
+  showAddExampleModal: boolean = false;
   constructor(private userIdbService: UserIdbService,
     private sharedDataService: SharedDataService,
     private onSiteVisitIdbService: OnSiteVisitIdbService,
     private facilityIdbService: FacilityIdbService,
-    private companyIdbService: CompanyIdbService
+    private companyIdbService: CompanyIdbService,
+    private loadingService: LoadingService,
+    private backupDataService: BackupDataService,
+    private dbChangesService: DbChangesService,
+    private toastNotificationService: ToastNotificationsService,
+    private router: Router
   ) {
 
   }
@@ -56,7 +69,7 @@ export class WelcomeComponent {
       this.user = user;
     });
     this.onSiteVisitSub = this.onSiteVisitIdbService.onSiteVisits.subscribe(visits => {
-      this.onSiteVisits =  _.orderBy(visits, (visit: IdbOnSiteVisit) => {
+      this.onSiteVisits = _.orderBy(visits, (visit: IdbOnSiteVisit) => {
         return new Date(visit.modifiedDate);
       }, 'desc').slice(0, 5);
     });
@@ -70,7 +83,7 @@ export class WelcomeComponent {
     })
   }
 
-  ngOnDestroy(){
+  ngOnDestroy() {
     this.onSiteVisitSub.unsubscribe();
     this.facilitiesSub.unsubscribe();
     this.companiesSub.unsubscribe();
@@ -91,4 +104,44 @@ export class WelcomeComponent {
     this.onSiteVisitIdbService.setSelectedFromGUID(visit.guid);
     this.sharedDataService.createAssessmentModalOpen.next(true);
   }
+
+  openAddExampleModal() {
+    this.showAddExampleModal = true;
+  }
+
+  closeAddExampleModal() {
+    this.showAddExampleModal = false;
+  }
+
+  addExample() {
+    this.closeAddExampleModal();
+    this.loadingService.setLoadingMessage('Loading Example Data..');
+    this.loadingService.setLoadingStatus(true);
+    var request = new XMLHttpRequest();
+    request.open('GET', 'assets/example-data/ExampleData.json', true);
+    request.responseType = 'blob';
+    request.onload = () => {
+      var reader = new FileReader();
+      reader.readAsText(request.response);
+      reader.onloadend = async (e) => {
+        try {
+          let fileData: string = reader.result as string;
+          let tmpBackupFile: BackupFile = JSON.parse(fileData);
+          let updatedBackupFile: BackupFile = await this.backupDataService.importUserBackupFile(tmpBackupFile, this.user.guid);
+          await this.dbChangesService.selectUser(this.user, false);
+          this.loadingService.setLoadingStatus(false);
+          let exampleVisit: IdbOnSiteVisit = updatedBackupFile.onSiteVisits[0];
+          this.companyIdbService.setSelectedFromGUID(exampleVisit.companyId);
+          this.facilityIdbService.setSelectedFromGUID(exampleVisit.facilityId);
+          this.onSiteVisitIdbService.setSelectedFromGUID(exampleVisit.guid);
+          this.toastNotificationService.showToast('Cocoa Co. Example Added!', 'Our example company and assessments have been added. You can now explore a completed on-site visit to view the possible impacts of NEBs!', 'bg-success', true, false);
+          this.router.navigateByUrl('/setup-wizard/pre-visit/' + exampleVisit.guid);
+        } catch (err) {
+          console.log(err);
+          this.loadingService.setLoadingMessage('Something has gone horribly wrong with the example data..');
+        }
+      };
+    };
+    request.send();
+  }
 }

src/app/shared/shared-services/backup-data.service.ts

@@ -92,7 +92,7 @@ export class BackupDataService {
   }
 
   // Add backup file data to the userGuid
-  async importUserBackupFile(backupFile: BackupFile, userGuid: string): Promise<void> {
+  async importUserBackupFile(backupFile: BackupFile, userGuid: string): Promise<BackupFile> {
     // Overwrite backup user guid with input guid
     this.loadingService.setLoadingMessage('Adding Backup Data to User: ' + userGuid + '...');
     let userGUIDs: { oldId: string, newId: string } = {
@@ -324,7 +324,7 @@ export class BackupDataService {
 
       await firstValueFrom(this.keyPerformanceMetricImpactIdbService.addWithObservable(keyPerformanceMetricImpact));
     }
-
+    return backupFile;
   }
 
   backupFileVersionCheck(fileVersion: string, appVersion: string): boolean {