Merge pull request #25 from NREL/issue-20

Initial routing for linear project application flow.

src/app/app-routing.module.ts

@@ -2,6 +2,14 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { WelcomeComponent } from './core-components/welcome/welcome.component';
 import { PageNotFoundComponent } from './core-components/page-not-found/page-not-found.component';
+import { UserDashboardComponent } from './user-dashboard/user-dashboard.component';
+import { UserDashboardHomeComponent } from './user-dashboard/user-dashboard-home/user-dashboard-home.component';
+import { CompanyDashboardComponent } from './company-dashboard/company-dashboard.component';
+import { CompanyDashboardHomeComponent } from './company-dashboard/company-dashboard-home/company-dashboard-home.component';
+import { FacilityDashboardComponent } from './facility-dashboard/facility-dashboard.component';
+import { FacilityDashboardHomeComponent } from './facility-dashboard/facility-dashboard-home/facility-dashboard-home.component';
+import { ProjectDashboardComponent } from './project-dashboard/project-dashboard.component';
+import { ProjectDashboardHomeComponent } from './project-dashboard/project-dashboard-home/project-dashboard-home.component';
 
 const routes: Routes = [
   {
@@ -13,6 +21,46 @@ const routes: Routes = [
     path: 'welcome',
     component: WelcomeComponent
   },
+  {
+    path: 'user',
+    component: UserDashboardComponent,
+    children: [
+      {
+        path: '',
+        component: UserDashboardHomeComponent
+      },
+      {
+        path: 'company/:id',
+        component: CompanyDashboardComponent,
+        children: [
+          {
+            path: '',
+            component: CompanyDashboardHomeComponent
+          },
+          {
+            path: 'facility/:id',
+            component: FacilityDashboardComponent,
+            children: [
+              {
+                path: '',
+                component: FacilityDashboardHomeComponent
+              },
+              {
+                path: 'project/:id',
+                component: ProjectDashboardComponent,
+                children: [
+                  {
+                    path: '',
+                    component: ProjectDashboardHomeComponent
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
   //wildcard/page not found needs to be last route
   //triggered after entire route tree is checked
   { path: "**", component: PageNotFoundComponent },

src/app/app.component.ts

@@ -1,5 +1,4 @@
 import { Component } from '@angular/core';
-import { ElectronService } from './electron/electron.service';
 
 @Component({
   selector: 'app-root',
@@ -8,6 +7,6 @@ import { ElectronService } from './electron/electron.service';
 })
 export class AppComponent {
 
-  constructor(private electronService: ElectronService){
+  constructor(){
   }
 }

src/app/app.module.ts

@@ -6,6 +6,10 @@ import { AppComponent } from './app.component';
 import { NavbarComponent } from './core-components/navbar/navbar.component';
 import { WelcomeComponent } from './core-components/welcome/welcome.component';
 import { PageNotFoundComponent } from './core-components/page-not-found/page-not-found.component';
+import { UserDashboardModule } from './user-dashboard/user-dashboard.module';
+import { CompanyDashboardModule } from './company-dashboard/company-dashboard.module';
+import { FacilityDashboardModule } from './facility-dashboard/facility-dashboard.module';
+import { ProjectDashboardModule } from './project-dashboard/project-dashboard.module';
 
 @NgModule({
   declarations: [
@@ -16,7 +20,11 @@ import { PageNotFoundComponent } from './core-components/page-not-found/page-not
   ],
   imports: [
     BrowserModule,
-    AppRoutingModule
+    AppRoutingModule,
+    UserDashboardModule,
+    CompanyDashboardModule,
+    FacilityDashboardModule,
+    ProjectDashboardModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/company-dashboard/company-dashboard-home/company-dashboard-home.component.html

@@ -0,0 +1,28 @@
+<div class="row justify-content-center pt-3">
+    <div class="col-lg-8 col-sm-12">
+        <nav aria-label="breadcrumb">
+            <ol class="breadcrumb">
+                <li class="breadcrumb-item"><a [routerLink]="'/user'">Dashboard</a></li>
+                <li class="breadcrumb-item active" aria-current="page">Company {{companyId}}</li>
+            </ol>
+        </nav>
+        <div class="h4 pt-2">Company {{companyId}} Facilities:</div>
+        <ul>
+            <li>
+                <a [routerLink]="'/user/company/'+companyId+'/facility/A'">Facility A</a>
+                <ul>
+                    <li>
+                        <a [routerLink]="'/user/company/'+companyId+'/facility/A/project/1'">Project 1</a>
+
+                    </li>
+                    <li>
+                        <a [routerLink]="'/user/company/'+companyId+'/facility/A/project/2'">Project 2</a>
+                    </li>
+                </ul>
+            </li>
+            <li>
+                <a [routerLink]="'/user/company/'+companyId+'/facility/B'">Facility B</a>
+            </li>
+        </ul>
+    </div>
+</div>

src/app/company-dashboard/company-dashboard-home/company-dashboard-home.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CompanyDashboardHomeComponent } from './company-dashboard-home.component';
+import { RouterTestingModule } from '@angular/router/testing';
+
+describe('CompanyDashboardHomeComponent', () => {
+  let component: CompanyDashboardHomeComponent;
+  let fixture: ComponentFixture<CompanyDashboardHomeComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [RouterTestingModule],
+      declarations: [CompanyDashboardHomeComponent]
+    });
+    fixture = TestBed.createComponent(CompanyDashboardHomeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/company-dashboard/company-dashboard-home/company-dashboard-home.component.ts

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'app-company-dashboard-home',
+  templateUrl: './company-dashboard-home.component.html',
+  styleUrls: ['./company-dashboard-home.component.css']
+})
+export class CompanyDashboardHomeComponent {
+
+  companyId: string = '';
+  constructor(private activatedRoute: ActivatedRoute) {
+  }
+
+  ngOnInit() {
+    this.activatedRoute.params.subscribe(params => {
+      this.companyId = params['id'];
+    });
+  }
+}

src/app/company-dashboard/company-dashboard.component.html

@@ -0,0 +1 @@
+<router-outlet></router-outlet>

src/app/company-dashboard/company-dashboard.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CompanyDashboardComponent } from './company-dashboard.component';
+import { RouterTestingModule } from '@angular/router/testing';
+
+describe('CompanyDashboardComponent', () => {
+  let component: CompanyDashboardComponent;
+  let fixture: ComponentFixture<CompanyDashboardComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [RouterTestingModule],
+      declarations: [CompanyDashboardComponent]
+    });
+    fixture = TestBed.createComponent(CompanyDashboardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/company-dashboard/company-dashboard.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-company-dashboard',
+  templateUrl: './company-dashboard.component.html',
+  styleUrls: ['./company-dashboard.component.css']
+})
+export class CompanyDashboardComponent {
+
+}

src/app/company-dashboard/company-dashboard.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CompanyDashboardComponent } from './company-dashboard.component';
+import { CompanyDashboardHomeComponent } from './company-dashboard-home/company-dashboard-home.component';
+import { RouterModule } from '@angular/router';
+
+@NgModule({
+  declarations: [
+    CompanyDashboardComponent,
+    CompanyDashboardHomeComponent
+  ],
+  imports: [
+    CommonModule,
+    RouterModule
+  ]
+})
+export class CompanyDashboardModule { }

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

@@ -1,5 +1,5 @@
 <nav class="navbar bg-primary">
     <div class="container-fluid">
-        <a class="navbar-brand" href="#">NEB Tool</a>
+        <a class="navbar-brand" routerLink="/welcome">NEB Tool</a>
     </div>
 </nav>

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

@@ -1,11 +1,61 @@
 <div class="container-fluid">
-    <div class="card">
-        <div class="card-body">
-            <h5 class="card-title">Welcome to the Non-Energy Benefits Tool!</h5>
-            <p class="card-text">
-                Use this tool to find the potential impact of projects in your organization by quantifying their
-                Non-Energy Benefits!
-            </p>
+    <div class="row justify-content-center pt-3">
+        <div class="card col-lg-6 col-sm-10">
+            <div class="card-body">
+                <div class="card-title display-5">
+                    Welcome to the Non-Energy Benefits Tool!
+                </div>
+                <p class="card-text">
+                    Use this tool to find the potential impact of projects in your organization by quantifying their
+                    non-energy benefits.
+                </p>
+                <hr>
+                <button class="btn btn-secondary" routerLink="/user">Go to Project Dashboard</button>
+
+                <div class="input-group pt-3">
+                    <label>
+                        <input class="form-check-input mt-0" type="checkbox" value=""
+                            aria-label="Checkbox for following text input">
+                        Skip this screen next time and go directly to dashboard.</label>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="row justify-content-center pt-3">
+        <div class="card m-1 col-lg-4 col-sm-10">
+            <div class="card-body">
+                <button class="btn btn-secondary">Explore NEBs</button>
+                <p class="card-text">
+                    Explore common projects with Non-Energy Benefits.
+                </p>
+            </div>
+        </div>
+        <div class="card m-1 col-lg-4 col-sm-10">
+            <div class="card-body">
+                <button class="btn btn-secondary">Learn More</button>
+                <p class="card-text">
+                    Learn more about NEBs research at NREL.
+                </p>
+            </div>
+        </div>
+
+    </div>
+    <div class="row justify-content-center pt-3">
+        <div class="card m-1 col-lg-4 col-sm-10">
+            <div class="card-body">
+                <button class="btn btn-secondary">Settings</button>
+                <p class="card-text">
+                    Manage application wide settings.
+                </p>
+            </div>
+        </div>
+        <div class="card m-1 col-lg-4 col-sm-10">
+            <div class="card-body">
+                <button class="btn btn-secondary">Help & Tutorials</button>
+                <p class="card-text">
+                    View help documents and tutorials to learn more about using the NEB-Tool application.
+                </p>
+            </div>
         </div>
     </div>
 </div>

src/app/facility-dashboard/facility-dashboard-home/facility-dashboard-home.component.html

@@ -0,0 +1,20 @@
+<div class="row justify-content-center pt-3">
+    <div class="col-lg-8 col-sm-12">
+        <nav aria-label="breadcrumb">
+            <ol class="breadcrumb">
+                <li class="breadcrumb-item"><a [routerLink]="'/user'">Dashboard</a></li>
+                <li class="breadcrumb-item"><a [routerLink]="'/user/company/'+companyId">Company {{companyId}}</a></li>
+                <li class="breadcrumb-item active">Facility {{facilityId}}</li>
+            </ol>
+        </nav>
+        <div class="h4 pt-2">Facility {{facilityId}} Project:</div>
+        <ul>
+            <li>
+                <a [routerLink]="'/user/company/'+companyId+'/facility/A/project/1'">Project 1</a>
+            </li>
+            <li>
+                <a [routerLink]="'/user/company/'+companyId+'/facility/A/project/2'">Project 2</a>
+            </li>
+        </ul>
+    </div>
+</div>

src/app/facility-dashboard/facility-dashboard-home/facility-dashboard-home.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FacilityDashboardHomeComponent } from './facility-dashboard-home.component';
+import { RouterTestingModule } from '@angular/router/testing';
+
+describe('FacilityDashboardHomeComponent', () => {
+  let component: FacilityDashboardHomeComponent;
+  let fixture: ComponentFixture<FacilityDashboardHomeComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [RouterTestingModule],
+      declarations: [FacilityDashboardHomeComponent]
+    });
+    fixture = TestBed.createComponent(FacilityDashboardHomeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/facility-dashboard/facility-dashboard-home/facility-dashboard-home.component.ts

@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'app-facility-dashboard-home',
+  templateUrl: './facility-dashboard-home.component.html',
+  styleUrls: ['./facility-dashboard-home.component.css']
+})
+export class FacilityDashboardHomeComponent {
+
+  companyId: string = 'A';
+  facilityId: string = '';
+  constructor(private activatedRoute: ActivatedRoute) {
+  }
+
+  ngOnInit() {
+    this.activatedRoute.params.subscribe(params => {
+      this.facilityId = params['id'];
+    });
+  }
+}

src/app/facility-dashboard/facility-dashboard.component.html

@@ -0,0 +1 @@
+<router-outlet></router-outlet>