├── _config.yml
├── src
    ├── app
    │   ├── task
    │   │   ├── schedule
    │   │   │   ├── schedule.component.css
    │   │   │   ├── schedule.component.html
    │   │   │   └── schedule.component.ts
    │   │   ├── threshold
    │   │   │   ├── threshold.component.css
    │   │   │   ├── threshold.component.html
    │   │   │   └── threshold.component.ts
    │   │   ├── tasks
    │   │   │   ├── tasks.component.html
    │   │   │   ├── tasks.component.ts
    │   │   │   └── tasks.component.css
    │   │   ├── shared
    │   │   │   ├── task.json
    │   │   │   └── task.service.ts
    │   │   ├── task-routing.module.ts
    │   │   └── task.module.ts
    │   ├── shared
    │   │   ├── models
    │   │   │   └── tasks.ts
    │   │   ├── shared.module.ts
    │   │   ├── pipes
    │   │   │   └── file-size.pipe.ts
    │   │   └── services
    │   │   │   └── resource
    │   │   │       └── resource.service.ts
    │   ├── core
    │   │   ├── footer
    │   │   │   ├── footer.component.html
    │   │   │   ├── footer.component.ts
    │   │   │   └── footer.component.css
    │   │   ├── exception.service.ts
    │   │   ├── logger.service.ts
    │   │   ├── navbar
    │   │   │   ├── navbar.component.css
    │   │   │   ├── navbar.component.ts
    │   │   │   └── navbar.component.html
    │   │   └── core.module.ts
    │   ├── app.component.html
    │   ├── app.component.ts
    │   ├── dashboard
    │   │   ├── dashboard.component.css
    │   │   ├── dashboard.component.ts
    │   │   ├── dashboard.component.spec.ts
    │   │   └── dashboard.component.html
    │   ├── app.component.css
    │   ├── app-routing.module.ts
    │   └── app.module.ts
    ├── browserslist
    ├── environments
    │   ├── environment.prod.ts
    │   └── environment.ts
    ├── tsconfig.app.json
    ├── tslint.json
    ├── main.ts
    ├── tsconfig.spec.json
    ├── index.html
    ├── test.ts
    ├── karma.conf.js
    ├── styles.css
    ├── polyfills.ts
    └── favicon.ico
├── e2e
    ├── src
    │   ├── app.po.ts
    │   └── app.e2e-spec.ts
    └── tsconfig.e2e.json
├── .editorconfig
├── README.md
├── tsconfig.json
├── .gitignore
├── package.json
├── tslint.json
└── angular.json


/_config.yml:
--------------------------------------------------------------------------------
1 | theme: jekyll-theme-cayman


--------------------------------------------------------------------------------
/src/app/task/schedule/schedule.component.css:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/app/task/threshold/threshold.component.css:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/browserslist:
--------------------------------------------------------------------------------
1 | > 0.5%
2 | last 2 versions
3 | Firefox ESR
4 | not dead
5 | IE 9-11


--------------------------------------------------------------------------------
/src/app/task/threshold/threshold.component.html:
--------------------------------------------------------------------------------
1 | <p>
2 |   threshold works!
3 | </p>
4 | 


--------------------------------------------------------------------------------
/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 |   production: true
3 | };
4 | 


--------------------------------------------------------------------------------
/src/app/shared/models/tasks.ts:
--------------------------------------------------------------------------------
1 | export class Schedule {
2 |     position: number;
3 |     name: string;
4 |     weight: number;
5 |     symbol: string;
6 | }
7 |   


--------------------------------------------------------------------------------
/src/app/core/footer/footer.component.html:
--------------------------------------------------------------------------------
1 | <div class="footer-main-box11">
2 |  <div class="footer">
3 |    Recreate Solutions - Copyright © 2018 All rights reserved.
4 |  </div>
5 | </div>
6 | 


--------------------------------------------------------------------------------
/src/app/core/exception.service.ts:
--------------------------------------------------------------------------------
 1 | import { Injectable } from '@angular/core';
 2 | 
 3 | @Injectable({
 4 |   providedIn: 'root'
 5 | })
 6 | export class ExceptionService {
 7 | 
 8 |   constructor() { }
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/app/app.component.html:
--------------------------------------------------------------------------------
1 | <app-navbar></app-navbar>
2 | <nav>
3 |   <a routerLink="/dashboard">Dashboard</a>
4 |   <a routerLink="/task">Task</a>
5 | </nav>
6 | <router-outlet></router-outlet>
7 | <app-footer></app-footer>
8 | 


--------------------------------------------------------------------------------
/src/app/task/tasks/tasks.component.html:
--------------------------------------------------------------------------------
1 | <div class="grid grid-pad">
2 |   <a *ngFor="let task of tasks" class="col-md-6"
3 |       routerLink="{{task.routerLink}}">
4 |     <div class="module hero">
5 |       <h4>{{task.name}}</h4>
6 |     </div>
7 |   </a>
8 | </div>
9 | 


--------------------------------------------------------------------------------
/e2e/src/app.po.ts:
--------------------------------------------------------------------------------
 1 | import { browser, by, element } from 'protractor';
 2 | 
 3 | export class AppPage {
 4 |   navigateTo() {
 5 |     return browser.get('/');
 6 |   }
 7 | 
 8 |   getParagraphText() {
 9 |     return element(by.css('app-root h1')).getText();
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-root',
 5 |   templateUrl: './app.component.html',
 6 |   styleUrls: ['./app.component.css']
 7 | })
 8 | export class AppComponent {
 9 |   title = 'Angular Architecture Demo';
10 | }
11 | 


--------------------------------------------------------------------------------
/src/app/core/logger.service.ts:
--------------------------------------------------------------------------------
 1 | import { Injectable } from '@angular/core';
 2 | 
 3 | @Injectable({
 4 |   providedIn: 'root'
 5 | })
 6 | export class LoggerService {
 7 | 
 8 |   constructor() { }
 9 | 
10 |   log(msg: any) {
11 |     console.log(new Date() + ": "
12 |     + JSON.stringify(msg));
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/src/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/app",
 5 |     "baseUrl": "./",
 6 |     "module": "es2015",
 7 |     "types": []
 8 |   },
 9 |   "exclude": [
10 |     "test.ts",
11 |     "**/*.spec.ts",
12 |     "**/testing/*"
13 |   ]
14 | }
15 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # Editor configuration, see http://editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | charset = utf-8
 6 | indent_style = space
 7 | indent_size = 2
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 
11 | [*.md]
12 | max_line_length = off
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/e2e/tsconfig.e2e.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/e2e",
 5 |     "baseUrl": "./",
 6 |     "module": "commonjs",
 7 |     "target": "es5",
 8 |     "types": [
 9 |       "jasmine",
10 |       "jasminewd2",
11 |       "node"
12 |     ]
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/src/app/shared/shared.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { CommonModule } from '@angular/common';
 3 | import { FileSizePipe } from '@app/shared/pipes/file-size.pipe';
 4 | 
 5 | @NgModule({
 6 |   imports: [
 7 |     CommonModule
 8 |   ],
 9 |   declarations: [FileSizePipe]
10 | })
11 | export class SharedModule { }
12 | 


--------------------------------------------------------------------------------
/src/app/core/footer/footer.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-footer',
 5 |   templateUrl: './footer.component.html',
 6 |   styleUrls: ['./footer.component.css']
 7 | })
 8 | export class FooterComponent implements OnInit {
 9 | 
10 |   constructor() { }
11 | 
12 |   ngOnInit() {
13 |   }
14 | 
15 | }
16 | 


--------------------------------------------------------------------------------
/src/app/dashboard/dashboard.component.css:
--------------------------------------------------------------------------------
 1 | .grid-container {
 2 |   margin: 20px;
 3 | }
 4 | 
 5 | .dashboard-card {
 6 |   position: absolute;
 7 |   top: 15px;
 8 |   left: 15px;
 9 |   right: 15px;
10 |   bottom: 15px;
11 | }
12 | 
13 | .more-button {
14 |   position: absolute;
15 |   top: 5px;
16 |   right: 10px;
17 | }
18 | 
19 | .dashboard-card-content {
20 |   text-align: center;
21 | }


--------------------------------------------------------------------------------
/src/app/task/shared/task.json:
--------------------------------------------------------------------------------
 1 | [
 2 |   {
 3 |     "position": 1,
 4 |     "name": "Hydrogen",
 5 |     "weight": 33,
 6 |     "symbol": "H"
 7 |   },
 8 |   {
 9 |     "position": 2,
10 |     "name": "Helium",
11 |     "weight": 43,
12 |     "symbol": "He"
13 |   },
14 |   {
15 |     "position": 1,
16 |     "name": "Lithium",
17 |     "weight": 88,
18 |     "symbol": "Li"
19 |   }
20 | ]
21 | 


--------------------------------------------------------------------------------
/src/app/task/threshold/threshold.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-threshold',
 5 |   templateUrl: './threshold.component.html',
 6 |   styleUrls: ['./threshold.component.css']
 7 | })
 8 | export class ThresholdComponent implements OnInit {
 9 | 
10 |   constructor() { }
11 | 
12 |   ngOnInit() {
13 |   }
14 | 
15 | }
16 | 


--------------------------------------------------------------------------------
/src/app/core/footer/footer.component.css:
--------------------------------------------------------------------------------
 1 | .footer-main-box11 {
 2 |     border-top: 1px solid #d2d2d2;
 3 |     width: 100%;
 4 |     display: inline-block;
 5 |     text-align: center;
 6 | }
 7 | 
 8 | .footer {
 9 |     height: 54px;
10 |     line-height: 54px;
11 |     text-align: center;
12 |     font-size: 15px;
13 |     color: #000;
14 |     margin-top: 1px;
15 |     display: inherit;
16 | }
17 | 


--------------------------------------------------------------------------------
/src/app/shared/pipes/file-size.pipe.ts:
--------------------------------------------------------------------------------
 1 | import { Pipe, PipeTransform } from '@angular/core';
 2 | 
 3 | // <!-- 2.02MB -->
 4 | // {{ file.size | filesize }}
 5 | 
 6 | @Pipe({
 7 |   name: 'fileSize'
 8 | })
 9 | 
10 | export class FileSizePipe implements PipeTransform {
11 | 
12 |   transform(size: number): string {
13 |     return (size / (1024 * 1024)).toFixed(2) + 'MB';
14 |   }
15 | 
16 | }
17 | 


--------------------------------------------------------------------------------
/src/tslint.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "extends": "../tslint.json",
 3 |     "rules": {
 4 |         "directive-selector": [
 5 |             true,
 6 |             "attribute",
 7 |             "app",
 8 |             "camelCase"
 9 |         ],
10 |         "component-selector": [
11 |             true,
12 |             "element",
13 |             "app",
14 |             "kebab-case"
15 |         ]
16 |     }
17 | }
18 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import { enableProdMode } from '@angular/core';
 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 3 | import 'hammerjs';
 4 | 
 5 | import { AppModule } from './app/app.module';
 6 | import { environment } from './environments/environment';
 7 | 
 8 | if (environment.production) {
 9 |   enableProdMode();
10 | }
11 | 
12 | platformBrowserDynamic().bootstrapModule(AppModule);
13 | 


--------------------------------------------------------------------------------
/src/tsconfig.spec.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/spec",
 5 |     "baseUrl": "./",
 6 |     "module": "commonjs",
 7 |     "target": "es5",
 8 |     "types": [
 9 |       "jasmine",
10 |       "node"
11 |     ]
12 |   },
13 |   "files": [
14 |     "test.ts",
15 |     "polyfills.ts"
16 |   ],
17 |   "include": [
18 |     "**/*.spec.ts",
19 |     "**/*.d.ts"
20 |   ]
21 | }
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Angular-6-Architecture
 2 | Robust architecture of an Angular 6 app
 3 | 
 4 | > An Angular project
 5 | 
 6 | ## Pre-requisites
 7 | 
 8 | 1. Node version should be greater than 8.9
 9 | 2. Install Angular CLI from https://angular.io/guide/quickstart
10 | 
11 | ## Build Setup
12 | 
13 | ``` bash
14 | # install dependencies
15 | npm install
16 | 
17 | # serve at localhost:4200
18 | ng serve
19 | 
20 | # serve at localhost:4200 and open it in browser
21 | ng serve --open
22 | ```
23 | 


--------------------------------------------------------------------------------
/src/app/dashboard/dashboard.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'dashboard',
 5 |   templateUrl: './dashboard.component.html',
 6 |   styleUrls: ['./dashboard.component.css']
 7 | })
 8 | export class DashboardComponent {
 9 |   cards = [
10 |     { title: 'Card 1', cols: 2, rows: 1 },
11 |     { title: 'Card 2', cols: 1, rows: 1 },
12 |     { title: 'Card 3', cols: 1, rows: 2 },
13 |     { title: 'Card 4', cols: 1, rows: 1 }
14 |   ];
15 | }
16 | 


--------------------------------------------------------------------------------
/src/app/task/shared/task.service.ts:
--------------------------------------------------------------------------------
 1 | import { Injectable } from '@angular/core';
 2 | import { HttpClient, HttpHeaders } from '@angular/common/http';
 3 | import { Schedule } from '@app/shared/models/tasks';
 4 | 
 5 | @Injectable({
 6 |   providedIn: 'root'
 7 | })
 8 | export class TaskService {
 9 |   configUrl = 'http://localhost:3000/getTempSchedule';
10 | 
11 |   constructor(private http: HttpClient) {}
12 | 
13 |   getTask() {
14 |     return this.http.get<Schedule[]>(this.configUrl);
15 |   }
16 | 
17 | }
18 | 


--------------------------------------------------------------------------------
/src/app/core/navbar/navbar.component.css:
--------------------------------------------------------------------------------
 1 | .sidenav-container {
 2 |   height: 100%;
 3 | }
 4 | 
 5 | .sidenav {
 6 |   width: 200px;
 7 |   box-shadow: 3px 0 6px rgba(0,0,0,.24);
 8 | }
 9 | 
10 | .navbar-default {
11 |   background-color: #3f51b5;
12 |   border-color: #3f51b5;
13 | }
14 | .navbar-custom-color
15 | {
16 |   background-color: #3f51b5 !important;
17 |   border-color: #3f51b5 !important;
18 | }
19 | 
20 | .navbar-custom-font-color
21 | {
22 |   color: white !important;
23 |   font-size: 18px !important;
24 | }
25 | 


--------------------------------------------------------------------------------
/src/app/task/tasks/tasks.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-tasks',
 5 |   templateUrl: './tasks.component.html',
 6 |   styleUrls: ['./tasks.component.css']
 7 | })
 8 | export class TasksComponent implements OnInit {
 9 |   tasks: any[] = [
10 |     { id: 1, name: 'Schedule', routerLink: '/task/schedule' },
11 |     { id: 2, name: 'Threshold', routerLink: '/task/threshold' },    
12 |   ];
13 |   constructor() { }
14 | 
15 |   ngOnInit() {
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | <head>
 4 | <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 5 | <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
 6 |   <meta charset="utf-8">
 7 |   <title>Angular Architecture Demo</title>
 8 |   <base href="/">
 9 | 
10 |   <meta name="viewport" content="width=device-width, initial-scale=1">
11 |   <link rel="icon" type="image/x-icon" href="favicon.ico">
12 | </head>
13 | <body>
14 |   <app-root></app-root>
15 | </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/src/app/core/navbar/navbar.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from '@angular/core';
 2 | import { BreakpointObserver, Breakpoints, BreakpointState } from '@angular/cdk/layout';
 3 | import { Observable } from 'rxjs';
 4 | 
 5 | @Component({
 6 |   selector: 'app-navbar',
 7 |   templateUrl: './navbar.component.html',
 8 |   styleUrls: ['./navbar.component.css']
 9 | })
10 | export class NavbarComponent {
11 |   isHandset: Observable<BreakpointState> = this.breakpointObserver.observe(Breakpoints.Handset);
12 |   constructor(private breakpointObserver: BreakpointObserver) {}
13 | }
14 | 


--------------------------------------------------------------------------------
/src/app/app.component.css:
--------------------------------------------------------------------------------
 1 | /* AppComponent's private CSS styles */
 2 | h1 {
 3 |   font-size: 1.2em;
 4 |   color: #999;
 5 |   margin-bottom: 0;
 6 | }
 7 | h2 {
 8 |   font-size: 2em;
 9 |   margin-top: 0;
10 |   padding-top: 0;
11 | }
12 | nav a {
13 |   padding: 5px 10px;
14 |   text-decoration: none;
15 |   margin-top: 10px;
16 |   display: inline-block;
17 |   background-color: #eee;
18 |   border-radius: 4px;
19 | }
20 | nav a:visited, a:link {
21 |   color: #607D8B;
22 | }
23 | nav a:hover {
24 |   color: #039be5;
25 |   background-color: #CFD8DC;
26 | }
27 | nav a.active {
28 |   color: #039be5;
29 | }
30 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compileOnSave": false,
 3 |   "compilerOptions": {
 4 |     "outDir": "./dist/out-tsc",
 5 |     "sourceMap": true,
 6 |     "declaration": false,
 7 |     "moduleResolution": "node",
 8 |     "emitDecoratorMetadata": true,
 9 |     "experimentalDecorators": true,
10 |     "target": "es5",
11 |     "skipLibCheck": true,
12 |     "typeRoots": [
13 |       "node_modules/@types"
14 |     ],
15 |     "lib": [
16 |       "es2017",
17 |       "dom"
18 |     ],
19 |     "baseUrl": "src",
20 |     "paths": {
21 |       "@app/*": ["app/*"],
22 |       "@env/*": ["environments/*"]
23 |     }
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/src/app/app-routing.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule }             from '@angular/core';
 2 | import { RouterModule, Routes } from '@angular/router';
 3 | 
 4 | import { DashboardComponent }   from './dashboard/dashboard.component';
 5 | 
 6 | const routes: Routes = [
 7 |   { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
 8 |   { path: 'dashboard', component: DashboardComponent },
 9 |   {
10 |     path: 'task',
11 |     loadChildren: 'app/task/task.module#TaskModule'
12 |   },
13 | ];
14 | 
15 | @NgModule({
16 |   imports: [ RouterModule.forRoot(routes) ],
17 |   exports: [ RouterModule ]
18 | })
19 | export class AppRoutingModule {}
20 | 


--------------------------------------------------------------------------------
/src/app/task/task-routing.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { Routes, RouterModule } from '@angular/router';
 3 | import { ThresholdComponent } from './threshold/threshold.component';
 4 | import { TasksComponent } from './tasks/tasks.component';
 5 | import { ScheduleComponent } from './schedule/schedule.component';
 6 | 
 7 | const routes: Routes = [
 8 |   { path: '', component: TasksComponent },
 9 |   { path: 'schedule', component: ScheduleComponent },
10 |   { path: 'threshold', component: ThresholdComponent }
11 | ];
12 | 
13 | @NgModule({
14 |   imports: [RouterModule.forChild(routes)],
15 |   exports: [RouterModule]
16 | })
17 | export class TaskRoutingModule { }
18 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # compiled output
 4 | /dist
 5 | /tmp
 6 | /out-tsc
 7 | 
 8 | # dependencies
 9 | /node_modules
10 | 
11 | # IDEs and editors
12 | /.idea
13 | .project
14 | .classpath
15 | .c9/
16 | *.launch
17 | .settings/
18 | *.sublime-workspace
19 | 
20 | # IDE - VSCode
21 | .vscode/*
22 | !.vscode/settings.json
23 | !.vscode/tasks.json
24 | !.vscode/launch.json
25 | !.vscode/extensions.json
26 | 
27 | # misc
28 | /.sass-cache
29 | /connect.lock
30 | /coverage
31 | /libpeerconnection.log
32 | npm-debug.log
33 | testem.log
34 | /typings
35 | 
36 | # e2e
37 | /e2e/*.js
38 | /e2e/*.map
39 | 
40 | # System Files
41 | .DS_Store
42 | Thumbs.db
43 | 


--------------------------------------------------------------------------------
/src/test.ts:
--------------------------------------------------------------------------------
 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 2 | 
 3 | import 'zone.js/dist/zone-testing';
 4 | import { getTestBed } from '@angular/core/testing';
 5 | import {
 6 |   BrowserDynamicTestingModule,
 7 |   platformBrowserDynamicTesting
 8 | } from '@angular/platform-browser-dynamic/testing';
 9 | 
10 | declare const require: any;
11 | 
12 | // First, initialize the Angular testing environment.
13 | getTestBed().initTestEnvironment(
14 |   BrowserDynamicTestingModule,
15 |   platformBrowserDynamicTesting()
16 | );
17 | // Then we find all the tests.
18 | const context = require.context('./', true, /\.spec\.ts$/);
19 | // And load the modules.
20 | context.keys().map(context);
21 | 


--------------------------------------------------------------------------------
/src/environments/environment.ts:
--------------------------------------------------------------------------------
 1 | // This file can be replaced during build by using the `fileReplacements` array.
 2 | // `ng build ---prod` replaces `environment.ts` with `environment.prod.ts`.
 3 | // The list of file replacements can be found in `angular.json`.
 4 | 
 5 | export const environment = {
 6 |   api: 'http://localhost:3010/',
 7 |   production: false
 8 | };
 9 | 
10 | /*
11 |  * In development mode, to ignore zone related error stack frames such as
12 |  * `zone.run`, `zoneDelegate.invokeTask` for easier debugging, you can
13 |  * import the following file, but please comment it out in production mode
14 |  * because it will have performance impact when throw error
15 |  */
16 | // import 'zone.js/dist/zone-error';  // Included with Angular CLI.
17 | 


--------------------------------------------------------------------------------
/src/app/dashboard/dashboard.component.spec.ts:
--------------------------------------------------------------------------------
 1 | 
 2 | import { fakeAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 3 | 
 4 | import { DashboardComponent } from './dashboard.component';
 5 | 
 6 | describe('DashboardComponent', () => {
 7 |   let component: DashboardComponent;
 8 |   let fixture: ComponentFixture<DashboardComponent>;
 9 | 
10 |   beforeEach(fakeAsync(() => {
11 |     TestBed.configureTestingModule({
12 |       declarations: [ DashboardComponent ]
13 |     })
14 |     .compileComponents();
15 | 
16 |     fixture = TestBed.createComponent(DashboardComponent);
17 |     component = fixture.componentInstance;
18 |     fixture.detectChanges();
19 |   }));
20 | 
21 |   it('should compile', () => {
22 |     expect(component).toBeTruthy();
23 |   });
24 | });
25 | 


--------------------------------------------------------------------------------
/src/app/task/task.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { CommonModule } from '@angular/common';
 3 | 
 4 | import { TaskRoutingModule } from './task-routing.module';
 5 | import { ThresholdComponent } from './threshold/threshold.component';
 6 | import { TasksComponent } from './tasks/tasks.component';
 7 | import { ScheduleComponent } from './schedule/schedule.component';
 8 | import { MatTableModule, MatPaginatorModule, MatSortModule } from '@angular/material';
 9 | 
10 | @NgModule({
11 |   imports: [
12 |     CommonModule,
13 |     TaskRoutingModule,
14 |     MatTableModule,
15 |     MatPaginatorModule,
16 |     MatSortModule
17 |   ],
18 |   declarations: [ThresholdComponent, TasksComponent, ScheduleComponent]
19 | })
20 | export class TaskModule { }
21 | 


--------------------------------------------------------------------------------
/src/app/core/core.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { CommonModule } from '@angular/common';
 3 | 
 4 | import { FooterComponent } from '@app/core/footer/footer.component';
 5 | import { NavbarComponent } from '@app/core/navbar/navbar.component';
 6 | import { LayoutModule } from '@angular/cdk/layout';
 7 | import { MatToolbarModule, MatButtonModule, MatSidenavModule, MatIconModule, MatListModule } from '@angular/material';
 8 | 
 9 | @NgModule({
10 |   imports: [
11 |     CommonModule,
12 |     LayoutModule,
13 |     MatToolbarModule,
14 |     MatButtonModule,
15 |     MatSidenavModule,
16 |     MatIconModule,
17 |     MatListModule
18 |   ],
19 |   declarations: [FooterComponent, NavbarComponent],
20 |   exports: [FooterComponent, NavbarComponent]
21 | })
22 | export class CoreModule { }
23 | 


--------------------------------------------------------------------------------
/src/app/dashboard/dashboard.component.html:
--------------------------------------------------------------------------------
 1 | <div class="grid-container">
 2 |   <h1 class="mat-h1">Dashboard</h1>
 3 |   <mat-grid-list cols="2" rowHeight="350px">
 4 |     <mat-grid-tile *ngFor="let card of cards" [colspan]="card.cols" [rowspan]="card.rows">
 5 |       <mat-card class="dashboard-card">
 6 |         <mat-card-header>
 7 |           <mat-card-title>
 8 |             {{card.title}}
 9 |             <button mat-icon-button class="more-button" [matMenuTriggerFor]="menu" aria-label="Toggle menu">
10 |               <mat-icon>more_vert</mat-icon>
11 |             </button>
12 |             <mat-menu #menu="matMenu" xPosition="before">
13 |               <button mat-menu-item>Expand</button>
14 |               <button mat-menu-item>Remove</button>
15 |             </mat-menu>
16 |           </mat-card-title>
17 |         </mat-card-header>
18 |         <mat-card-content class="dashboard-card-content">
19 |           <div>Card Content Here</div>
20 |         </mat-card-content>
21 |       </mat-card>
22 |     </mat-grid-tile>
23 |   </mat-grid-list>
24 | </div>
25 | 


--------------------------------------------------------------------------------
/src/karma.conf.js:
--------------------------------------------------------------------------------
 1 | // Karma configuration file, see link for more information
 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
 3 | 
 4 | module.exports = function (config) {
 5 |   config.set({
 6 |     basePath: '',
 7 |     frameworks: ['jasmine', '@angular-devkit/build-angular'],
 8 |     plugins: [
 9 |       require('karma-jasmine'),
10 |       require('karma-chrome-launcher'),
11 |       require('karma-jasmine-html-reporter'),
12 |       require('karma-coverage-istanbul-reporter'),
13 |       require('@angular-devkit/build-angular/plugins/karma')
14 |     ],
15 |     client: {
16 |       clearContext: false // leave Jasmine Spec Runner output visible in browser
17 |     },
18 |     coverageIstanbulReporter: {
19 |       dir: require('path').join(__dirname, 'coverage'),
20 |       reports: ['html', 'lcovonly'],
21 |       fixWebpackSourcePaths: true
22 |     },
23 |     angularCli: {
24 |       environment: 'dev'
25 |     },
26 |     reporters: ['progress', 'kjhtml'],
27 |     port: 9876,
28 |     colors: true,
29 |     logLevel: config.LOG_INFO,
30 |     autoWatch: true,
31 |     browsers: ['Chrome'],
32 |     singleRun: false
33 |   });
34 | };


--------------------------------------------------------------------------------
/src/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule }       from '@angular/core';
 2 | import { BrowserModule }  from '@angular/platform-browser';
 3 | import { FormsModule }    from '@angular/forms';
 4 | import { HttpClientModule }    from '@angular/common/http';
 5 | 
 6 | import { CoreModule }     from './core/core.module';
 7 | import { AppRoutingModule }     from './app-routing.module';
 8 | 
 9 | import { AppComponent }         from './app.component';
10 | import { DashboardComponent }   from './dashboard/dashboard.component';
11 | import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
12 | import { MatGridListModule, MatCardModule, MatMenuModule, MatIconModule, MatButtonModule } from '@angular/material';
13 | 
14 | @NgModule({
15 |   imports: [
16 |     BrowserModule,
17 |     FormsModule,
18 |     AppRoutingModule,
19 |     HttpClientModule,
20 |     CoreModule,
21 | 
22 |     BrowserAnimationsModule,
23 | 
24 |     MatGridListModule,
25 | 
26 |     MatCardModule,
27 | 
28 |     MatMenuModule,
29 | 
30 |     MatIconModule,
31 | 
32 |     MatButtonModule
33 |   ],
34 |   declarations: [
35 |     AppComponent,
36 |     DashboardComponent
37 |   ],
38 |   bootstrap: [ AppComponent ]
39 | })
40 | export class AppModule { }
41 | 


--------------------------------------------------------------------------------
/src/app/task/tasks/tasks.component.css:
--------------------------------------------------------------------------------
 1 | [class*='col-'] {
 2 |   float: left;
 3 |   padding-right: 20px;
 4 |   padding-bottom: 20px;
 5 | }
 6 | [class*='col-']:last-of-type {
 7 |   padding-right: 0;
 8 | }
 9 | a {
10 |   text-decoration: none;
11 | }
12 | *, *:after, *:before {
13 |   -webkit-box-sizing: border-box;
14 |   -moz-box-sizing: border-box;
15 |   box-sizing: border-box;
16 | }
17 | h3 {
18 |   text-align: center; margin-bottom: 0;
19 | }
20 | h4 {
21 |   position: relative;
22 | }
23 | .grid {
24 |   margin: 0;
25 | }
26 | .col-1-4 {
27 |   width: 25%;
28 | }
29 | .module {
30 |   padding: 20px;
31 |   text-align: center;
32 |   color: #eee;
33 |   max-height: 120px;
34 |   min-width: 120px;
35 |   background-color: #607D8B;
36 |   border-radius: 2px;
37 | }
38 | .module:hover {
39 |   background-color: #EEE;
40 |   cursor: pointer;
41 |   color: #607d8b;
42 | }
43 | .grid-pad {
44 |   padding: 10px 0;
45 | }
46 | .grid-pad > [class*='col-']:last-of-type {
47 |   padding-right: 20px;
48 | }
49 | @media (max-width: 600px) {
50 |   .module {
51 |     font-size: 10px;
52 |     max-height: 75px; }
53 | }
54 | @media (max-width: 1024px) {
55 |   .grid {
56 |     margin: 0;
57 |   }
58 |   .module {
59 |     min-width: 60px;
60 |   }
61 | }
62 | 


--------------------------------------------------------------------------------
/src/app/shared/services/resource/resource.service.ts:
--------------------------------------------------------------------------------
 1 | import { HttpClient, HttpHeaders } from '@angular/common/http';
 2 | import { Injectable } from '@angular/core';
 3 | import { Observable } from "rxjs";
 4 | import { map } from "rxjs/operators";
 5 | import { environment } from "../../../../environments/environment";
 6 | 
 7 | 
 8 | @Injectable({
 9 |   providedIn: 'root'
10 | })
11 | export class ResourceService {
12 | 
13 |   constructor(private http: HttpClient) {}
14 | 
15 |   getAll(resource: string, options?: any): Observable<any> {
16 |     return this.http.get(`${environment.api}${resource}?${options}`).pipe(
17 |       map(res => {
18 |         return res;
19 |       })
20 |     );
21 |   }
22 | 
23 |   getById(resource: string, id: any) {
24 |     return this.http.get(`${environment.api}${resource}/${id}`);
25 |   }
26 | 
27 |   post(resource: string, data: any) {
28 |     return this.http.post(`${environment.api}${resource}`, data);
29 |   }
30 | 
31 |   save(resource: string, data: any) {
32 |     if (!data._id) {
33 |       return this.http.post(`${environment.api}${resource}`, data);
34 |     }else {
35 |       return this.http.patch(`${environment.api}${resource}/${data._id}`, data);      
36 |     }
37 |   }
38 | 
39 |   delete(resource: string, id: any) {
40 |     return this.http.delete(`${environment.api}${resource}/${id}`);
41 |   }
42 | 
43 | }
44 | 


--------------------------------------------------------------------------------
/src/styles.css:
--------------------------------------------------------------------------------
 1 | /* Master Styles */
 2 | h1 {
 3 |   color: #369;
 4 |   font-family: Arial, Helvetica, sans-serif;
 5 |   font-size: 250%;
 6 | }
 7 | h2, h3 {
 8 |   color: #444;
 9 |   font-family: Arial, Helvetica, sans-serif;
10 |   font-weight: lighter;
11 | }
12 | body {
13 |   margin: 2em;
14 | }
15 | body, input[text], button {
16 |   color: #888;
17 |   font-family: Cambria, Georgia;
18 | }
19 | a {
20 |   cursor: pointer;
21 |   cursor: hand;
22 | }
23 | button {
24 |   font-family: Arial;
25 |   background-color: #eee;
26 |   border: none;
27 |   padding: 5px 10px;
28 |   border-radius: 4px;
29 |   cursor: pointer;
30 |   cursor: hand;
31 | }
32 | button:hover {
33 |   background-color: #cfd8dc;
34 | }
35 | button:disabled {
36 |   background-color: #eee;
37 |   color: #aaa;
38 |   cursor: auto;
39 | }
40 | 
41 | /* Navigation link styles */
42 | nav a {
43 |   padding: 5px 10px;
44 |   text-decoration: none;
45 |   margin-right: 10px;
46 |   margin-top: 10px;
47 |   display: inline-block;
48 |   background-color: #eee;
49 |   border-radius: 4px;
50 | }
51 | nav a:visited, a:link {
52 |   color: #607D8B;
53 | }
54 | nav a:hover {
55 |   color: #039be5;
56 |   background-color: #CFD8DC;
57 | }
58 | nav a.active {
59 |   color: #039be5;
60 | }
61 | 
62 | /* everywhere else */
63 | * {
64 |   font-family: Arial, Helvetica, sans-serif;
65 | }
66 | 
67 | body { margin: 0; }
68 | 


--------------------------------------------------------------------------------
/src/app/task/schedule/schedule.component.html:
--------------------------------------------------------------------------------
 1 | <br/>
 2 | <div class="example-container mat-elevation-z8">
 3 |   <table mat-table #table [dataSource]="dataSource">
 4 | 
 5 |     <!--- Note that these columns can be defined in any order.
 6 |           The actual rendered columns are set as a property on the row definition" -->
 7 | 
 8 |     <!-- Position Column -->
 9 |     <ng-container matColumnDef="position">
10 |       <th mat-header-cell *matHeaderCellDef> No. </th>
11 |       <td mat-cell *matCellDef="let element"> {{element.position}} </td>
12 |     </ng-container>
13 | 
14 |     <!-- Name Column -->
15 |     <ng-container matColumnDef="name">
16 |       <th mat-header-cell *matHeaderCellDef> Name </th>
17 |       <td mat-cell *matCellDef="let element"> {{element.name}} </td>
18 |     </ng-container>
19 | 
20 |     <!-- Weight Column -->
21 |     <ng-container matColumnDef="weight">
22 |       <th mat-header-cell *matHeaderCellDef> Weight </th>
23 |       <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
24 |     </ng-container>
25 | 
26 |     <!-- Symbol Column -->
27 |     <ng-container matColumnDef="symbol">
28 |       <th mat-header-cell *matHeaderCellDef> Symbol </th>
29 |       <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
30 |     </ng-container>
31 | 
32 |     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
33 |     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
34 |   </table>
35 | </div>
36 | 


--------------------------------------------------------------------------------
/src/app/task/schedule/schedule.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | import { TaskService } from '@app/task/shared/task.service';
 3 | import { Schedule } from '@app/shared/models/tasks';
 4 | import { LoggerService } from '@app/core/logger.service';
 5 | 
 6 | @Component({
 7 |   selector: 'task/schedule',
 8 |   templateUrl: './schedule.component.html',
 9 |   styleUrls: ['./schedule.component.css']
10 | })
11 | export class ScheduleComponent implements OnInit {
12 | 
13 |   constructor(private taskService: TaskService, private logger: LoggerService) { }
14 | 
15 |   dataSource = [
16 |     {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
17 |     {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
18 |     {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
19 |     {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
20 |     {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
21 |     {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
22 |     {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
23 |     {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
24 |     {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
25 |     {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'}
26 |   ];
27 | 
28 |   displayedColumns = ['position', 'name', 'weight', 'symbol'];
29 | 
30 |   ngOnInit() {
31 |     this.logger.log('Feting Schedule Data');
32 |     this.getSchedule();
33 |   }
34 | 
35 |   getSchedule(): void {
36 |     this.taskService.getTask()
37 |     .subscribe(schedules => this.dataSource = schedules || this.dataSource);
38 |   }
39 | 
40 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "angular-io-example",
 3 |   "version": "1.0.0",
 4 |   "private": true,
 5 |   "description": "Example project from an angular.io guide.",
 6 |   "scripts": {
 7 |     "ng": "ng",
 8 |     "build": "ng build --prod",
 9 |     "start": "ng serve",
10 |     "test": "ng test",
11 |     "lint": "tslint ./src/**/*.ts -t verbose",
12 |     "e2e": "ng e2e"
13 |   },
14 |   "keywords": [],
15 |   "author": "",
16 |   "license": "MIT",
17 |   "dependencies": {
18 |     "@angular/animations": "^6.0.0",
19 |     "@angular/cdk": "^6.0.2",
20 |     "@angular/common": "^6.0.0",
21 |     "@angular/compiler": "^6.0.0",
22 |     "@angular/core": "^6.0.0",
23 |     "@angular/forms": "^6.0.0",
24 |     "@angular/http": "^6.0.0",
25 |     "@angular/material": "^6.0.2",
26 |     "@angular/platform-browser": "^6.0.0",
27 |     "@angular/platform-browser-dynamic": "^6.0.0",
28 |     "@angular/router": "^6.0.0",
29 |     "@angular/upgrade": "^6.0.0",
30 |     "angular-in-memory-web-api": "^0.6.0",
31 |     "bootstrap": "^4.1.1",
32 |     "core-js": "^2.5.4",
33 |     "hammerjs": "^2.0.8",
34 |     "ngx-bootstrap": "^2.0.5",
35 |     "rxjs": "^6.0.0",
36 |     "zone.js": "^0.8.24"
37 |   },
38 |   "devDependencies": {
39 |     "@angular-devkit/build-angular": "~0.6.0",
40 |     "@angular/cli": "^6.0.0",
41 |     "@angular/compiler-cli": "^6.0.0",
42 |     "@angular/platform-server": "^6.0.0",
43 |     "@types/jasmine": "~2.8.0",
44 |     "@types/jasminewd2": "^2.0.3",
45 |     "@types/node": "^6.0.45",
46 |     "jasmine-core": "~2.99.1",
47 |     "jasmine-spec-reporter": "~4.2.1",
48 |     "karma": "~1.7.1",
49 |     "karma-chrome-launcher": "~2.2.0",
50 |     "karma-coverage-istanbul-reporter": "~1.4.2",
51 |     "karma-jasmine": "~1.1.1",
52 |     "karma-jasmine-html-reporter": "^0.2.2",
53 |     "karma-phantomjs-launcher": "^1.0.2",
54 |     "lodash": "^4.16.2",
55 |     "phantomjs-prebuilt": "^2.1.7",
56 |     "protractor": "~5.3.0",
57 |     "ts-node": "^5.0.1",
58 |     "tslint": "^5.9.1",
59 |     "typescript": "2.7.2"
60 |   },
61 |   "repository": {}
62 | }
63 | 


--------------------------------------------------------------------------------
/src/app/core/navbar/navbar.component.html:
--------------------------------------------------------------------------------
 1 | <div class="navbar navbar-expand-lg navbar-light bg-light navbar-custom-color">
 2 |   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
 3 |     <span class="navbar-toggler-icon"></span>
 4 |   </button>
 5 |   <div class="col-md-9">
 6 |     <a class="navbar-brand navbar-custom-font-color" href="#" style="font-size: 23px !important;">Angular Architecture Demo</a>
 7 |   </div>
 8 |   <div class="col-md-3">
 9 |     <div class="collapse navbar-collapse" id="navbarTogglerDemo03" style="margin-left: 75px;">
10 |       <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
11 |         <li class="nav-item active">
12 |           <a class="nav-link navbar-custom-font-color" href="#">App <span class="sr-only">(current)</span></a>
13 |         </li>
14 |         <li class="nav-item">
15 |           <a class="nav-link navbar-custom-font-color" routerLink="/master">Master</a>
16 |         </li>
17 |         <li class="nav-item">
18 |           <a class="nav-link navbar-custom-font-color" routerLink="/task">Task</a>
19 |         </li>
20 |         <li class="nav-item">
21 |           <a class="nav-link navbar-custom-font-color" routerLink="/task">Help</a>
22 |         </li>
23 |       </ul>
24 |     </div>
25 |   </div>
26 | </div>
27 | <!-- <mat-sidenav-container class="sidenav-container">
28 |   <mat-sidenav
29 |     #drawer
30 |     class="sidenav"
31 |     fixedInViewport="true"
32 |     [attr.role]="isHandset ? 'dialog' : 'navigation'"
33 |     [mode]="(isHandset | async)!.matches ? 'over' : 'side'"
34 |     [opened]="!(isHandset | async)!.matches">
35 |     <mat-toolbar color="primary">Menu</mat-toolbar>
36 |     <mat-nav-list>
37 |       <a mat-list-item href="#">Link 1</a>
38 |       <a mat-list-item href="#">Link 2</a>
39 |       <a mat-list-item href="#">Link 3</a>
40 |     </mat-nav-list>
41 |   </mat-sidenav>
42 |   <mat-sidenav-content>
43 |     <mat-toolbar color="primary">
44 |       <button
45 |         type="button"
46 |         aria-label="Toggle sidenav"
47 |         mat-icon-button
48 |         (click)="drawer.toggle()"
49 |         *ngIf="(isHandset | async)!.matches">
50 |         <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
51 |       </button>
52 |       <span>PERFEQTA</span>
53 |     </mat-toolbar>
54 |   </mat-sidenav-content>
55 | </mat-sidenav-container> -->
56 | 


--------------------------------------------------------------------------------
/src/polyfills.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * This file includes polyfills needed by Angular and is loaded before the app.
 3 |  * You can add your own extra polyfills to this file.
 4 |  *
 5 |  * This file is divided into 2 sections:
 6 |  *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 7 |  *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 8 |  *      file.
 9 |  *
10 |  * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 |  * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12 |  * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13 |  *
14 |  * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
15 |  */
16 | 
17 | /***************************************************************************************************
18 |  * BROWSER POLYFILLS
19 |  */
20 | 
21 | /** IE9, IE10 and IE11 requires all of the following polyfills. **/
22 | // import 'core-js/es6/symbol';
23 | // import 'core-js/es6/object';
24 | // import 'core-js/es6/function';
25 | // import 'core-js/es6/parse-int';
26 | // import 'core-js/es6/parse-float';
27 | // import 'core-js/es6/number';
28 | // import 'core-js/es6/math';
29 | // import 'core-js/es6/string';
30 | // import 'core-js/es6/date';
31 | // import 'core-js/es6/array';
32 | // import 'core-js/es6/regexp';
33 | // import 'core-js/es6/map';
34 | // import 'core-js/es6/weak-map';
35 | // import 'core-js/es6/set';
36 | 
37 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */
38 | // import 'classlist.js';  // Run `npm install --save classlist.js`.
39 | 
40 | /** IE10 and IE11 requires the following for the Reflect API. */
41 | // import 'core-js/es6/reflect';
42 | 
43 | 
44 | /** Evergreen browsers require these. **/
45 | // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
46 | import 'core-js/es7/reflect';
47 | 
48 | 
49 | /**
50 |  * Required to support Web Animations `@angular/platform-browser/animations`.
51 |  * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
52 |  **/
53 | // import 'web-animations-js';
54 | 
55 | /**
56 |  * By default, zone.js will patch all possible macroTask and DomEvents
57 |  * user can disable parts of macroTask/DomEvents patch by setting following flags
58 |  */
59 | 
60 |  // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
61 |  // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
62 |  // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
63 | 
64 |  /*
65 |  * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
66 |  * with the following flag, it will bypass `zone.js` patch for IE/Edge
67 |  */
68 | // (window as any).__Zone_enable_cross_context_check = true;
69 | 
70 | /***************************************************************************************************
71 |  * Zone JS is required by default for Angular itself.
72 |  */
73 | import 'zone.js/dist/zone';  // Included with Angular CLI.
74 | 
75 | 
76 | 
77 | /***************************************************************************************************
78 |  * APPLICATION IMPORTS
79 |  */
80 | 


--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "rulesDirectory": [
  3 |     "node_modules/codelyzer"
  4 |   ],
  5 |   "rules": {
  6 |     "arrow-return-shorthand": true,
  7 |     "callable-types": true,
  8 |     "class-name": true,
  9 |     "comment-format": [
 10 |       true,
 11 |       "check-space"
 12 |     ],
 13 |     "curly": true,
 14 |     "deprecation": {
 15 |       "severity": "warn"
 16 |     },
 17 |     "eofline": true,
 18 |     "forin": true,
 19 |     "import-blacklist": [
 20 |       true,
 21 |       "rxjs",
 22 |       "rxjs/Rx"
 23 |     ],
 24 |     "import-spacing": true,
 25 |     "indent": [
 26 |       true,
 27 |       "spaces"
 28 |     ],
 29 |     "interface-over-type-literal": true,
 30 |     "label-position": true,
 31 |     "max-line-length": [
 32 |       true,
 33 |       140
 34 |     ],
 35 |     "member-access": false,
 36 |     "member-ordering": [
 37 |       true,
 38 |       {
 39 |         "order": [
 40 |           "static-field",
 41 |           "instance-field",
 42 |           "static-method",
 43 |           "instance-method"
 44 |         ]
 45 |       }
 46 |     ],
 47 |     "no-arg": true,
 48 |     "no-bitwise": true,
 49 |     "no-console": [
 50 |       true,
 51 |       "debug",
 52 |       "info",
 53 |       "time",
 54 |       "timeEnd",
 55 |       "trace"
 56 |     ],
 57 |     "no-construct": true,
 58 |     "no-debugger": true,
 59 |     "no-duplicate-super": true,
 60 |     "no-empty": false,
 61 |     "no-empty-interface": true,
 62 |     "no-eval": true,
 63 |     "no-inferrable-types": [
 64 |       true,
 65 |       "ignore-params"
 66 |     ],
 67 |     "no-misused-new": true,
 68 |     "no-non-null-assertion": true,
 69 |     "no-shadowed-variable": true,
 70 |     "no-string-literal": false,
 71 |     "no-string-throw": true,
 72 |     "no-switch-case-fall-through": true,
 73 |     "no-trailing-whitespace": true,
 74 |     "no-unnecessary-initializer": true,
 75 |     "no-unused-expression": true,
 76 |     "no-use-before-declare": true,
 77 |     "no-var-keyword": true,
 78 |     "object-literal-sort-keys": false,
 79 |     "one-line": [
 80 |       true,
 81 |       "check-open-brace",
 82 |       "check-catch",
 83 |       "check-else",
 84 |       "check-whitespace"
 85 |     ],
 86 |     "prefer-const": true,
 87 |     "quotemark": [
 88 |       true,
 89 |       "single"
 90 |     ],
 91 |     "radix": true,
 92 |     "semicolon": [
 93 |       true,
 94 |       "always"
 95 |     ],
 96 |     "triple-equals": [
 97 |       true,
 98 |       "allow-null-check"
 99 |     ],
100 |     "typedef-whitespace": [
101 |       true,
102 |       {
103 |         "call-signature": "nospace",
104 |         "index-signature": "nospace",
105 |         "parameter": "nospace",
106 |         "property-declaration": "nospace",
107 |         "variable-declaration": "nospace"
108 |       }
109 |     ],
110 |     "typeof-compare": true,
111 |     "unified-signatures": true,
112 |     "variable-name": false,
113 |     "whitespace": [
114 |       true,
115 |       "check-branch",
116 |       "check-decl",
117 |       "check-operator",
118 |       "check-separator",
119 |       "check-type"
120 |     ],
121 |     "directive-selector": [
122 |       true,
123 |       "attribute",
124 |       "app",
125 |       "camelCase"
126 |     ],
127 |     "component-selector": [
128 |       true,
129 |       "element",
130 |       "app",
131 |       "kebab-case"
132 |     ],
133 |     "no-output-on-prefix": true,
134 |     "use-input-property-decorator": true,
135 |     "use-output-property-decorator": true,
136 |     "use-host-property-decorator": true,
137 |     "no-input-rename": true,
138 |     "no-output-rename": true,
139 |     "use-life-cycle-interface": true,
140 |     "use-pipe-transform-interface": true,
141 |     "component-class-suffix": true,
142 |     "directive-class-suffix": true
143 |   }
144 | }
145 | 


--------------------------------------------------------------------------------
/angular.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "$schema": "./node_modules/@angular-devkit/core/src/workspace/workspace-schema.json",
  3 |   "version": 1,
  4 |   "newProjectRoot": "projects",
  5 |   "projects": {
  6 |     "angular.io-example": {
  7 |       "root": "",
  8 |       "projectType": "application",
  9 |       "prefix": "app",
 10 |       "architect": {
 11 |         "build": {
 12 |           "builder": "@angular-devkit/build-angular:browser",
 13 |           "options": {
 14 |             "outputPath": "dist/angular.io-example",
 15 |             "index": "src/index.html",
 16 |             "main": "src/main.ts",
 17 |             "polyfills": "src/polyfills.ts",
 18 |             "tsConfig": "src/tsconfig.app.json",
 19 |             "assets": [
 20 |               {
 21 |                 "glob": "favicon.ico",
 22 |                 "input": "src",
 23 |                 "output": "/"
 24 |               },
 25 |               {
 26 |                 "glob": "**/*",
 27 |                 "input": "src/assets",
 28 |                 "output": "/assets"
 29 |               }
 30 |             ],
 31 |             "styles": [
 32 |               {
 33 |                 "input": "node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
 34 |               },
 35 |               {
 36 |                 "input": "src/styles.css"
 37 |               },
 38 |               {
 39 |                 "input": "./node_modules/bootstrap/dist/css/bootstrap.min.css"
 40 |               }
 41 |             ],
 42 |             "scripts": []
 43 |           },
 44 |           "configurations": {
 45 |             "production": {
 46 |               "fileReplacements": [
 47 |                 {
 48 |                   "replace": "src/environments/environment.ts",
 49 |                   "with": "src/environments/environment.prod.ts"
 50 |                 }
 51 |               ],
 52 |               "optimization": true,
 53 |               "outputHashing": "all",
 54 |               "sourceMap": false,
 55 |               "extractCss": true,
 56 |               "namedChunks": false,
 57 |               "aot": true,
 58 |               "extractLicenses": true,
 59 |               "vendorChunk": false,
 60 |               "buildOptimizer": true
 61 |             }
 62 |           }
 63 |         },
 64 |         "serve": {
 65 |           "builder": "@angular-devkit/build-angular:dev-server",
 66 |           "options": {
 67 |             "browserTarget": "angular.io-example:build"
 68 |           },
 69 |           "configurations": {
 70 |             "production": {
 71 |               "browserTarget": "angular.io-example:build:production"
 72 |             }
 73 |           }
 74 |         },
 75 |         "extract-i18n": {
 76 |           "builder": "@angular-devkit/build-angular:extract-i18n",
 77 |           "options": {
 78 |             "browserTarget": "angular.io-example:build"
 79 |           }
 80 |         },
 81 |         "test": {
 82 |           "builder": "@angular-devkit/build-angular:karma",
 83 |           "options": {
 84 |             "main": "src/test.ts",
 85 |             "polyfills": "src/polyfills.ts",
 86 |             "tsConfig": "src/tsconfig.spec.json",
 87 |             "karmaConfig": "src/karma.conf.js",
 88 |             "styles": [
 89 |               {
 90 |                 "input": "node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
 91 |               },
 92 |               {
 93 |                 "input": "styles.css"
 94 |               }
 95 |             ],
 96 |             "scripts": [],
 97 |             "assets": [
 98 |               {
 99 |                 "glob": "favicon.ico",
100 |                 "input": "src/",
101 |                 "output": "/"
102 |               },
103 |               {
104 |                 "glob": "**/*",
105 |                 "input": "src/assets",
106 |                 "output": "/assets"
107 |               }
108 |             ]
109 |           }
110 |         },
111 |         "lint": {
112 |           "builder": "@angular-devkit/build-angular:tslint",
113 |           "options": {
114 |             "tsConfig": [
115 |               "src/tsconfig.app.json",
116 |               "src/tsconfig.spec.json"
117 |             ],
118 |             "exclude": [
119 |               "**/node_modules/**"
120 |             ]
121 |           }
122 |         }
123 |       }
124 |     },
125 |     "angular.io-example-e2e": {
126 |       "root": "e2e/",
127 |       "projectType": "application",
128 |       "architect": {
129 |         "e2e": {
130 |           "builder": "@angular-devkit/build-angular:protractor",
131 |           "options": {
132 |             "protractorConfig": "e2e/protractor.conf.js",
133 |             "devServerTarget": "angular.io-example:serve"
134 |           }
135 |         },
136 |         "lint": {
137 |           "builder": "@angular-devkit/build-angular:tslint",
138 |           "options": {
139 |             "tsConfig": "e2e/tsconfig.e2e.json",
140 |             "exclude": [
141 |               "**/node_modules/**"
142 |             ]
143 |           }
144 |         }
145 |       }
146 |     }
147 |   }
148 | }


--------------------------------------------------------------------------------
/src/favicon.ico:
--------------------------------------------------------------------------------
1 | 
 h&   ��( 
 @���
���
���
���
���
���
71�U61��0-��2.�;���
���
���
���
���
���
���
���
���
���
71�971��71��71��0-��0-��1-��3/�#���
���
���
���
���
���
71�!71�71��71��71��71��0-��0-��0-��0-��1-��3/����
���
���
71�U71��OI��VQ��82��71��71��0-��0-��0-��UR��KH��0-��2.�=���
���
71�71����������mh��71��71��0-��0-��[X����������0-��1.�{���
���
71�71��C=����������71��71��0-��0-����������85��0-��0-�����
���
71��71��71����������������������������������0-��0-��1-�����
���
71��71��71��QL��������������������������?<��0-��0-��0-�����
���
71��71��71��71����������;5��:7����������0-��0-��0-��0-�����
71�#71��71��71��71��d_������}y����������IG��0-��0-��0-��0-��4/�71�M71��71��71��71��71������������������0-��0-��0-��0-��0-��3/�A71�k71��71��71��71��71��zv����������VS��0-��0-��0-��0-��0-��2.�e71�}71��71��71��71��71��93����������0-��0-��0-��0-��0-��0-��1.�{71�A71��71��71��71��71��71������db��0-��0-��0-��0-��0-��1-��0-�E���
���
71�)71�71��71��71��=7��0-��0-��0-��0-��1-��3/�/���
���
���
���
���
���
���
71�A71�61��0-��0-��3.�9���
���
���
���
���
��������������������������������( @
 ����
���
���
���
���
���
���
���
���
���
���
���
���
���
71�61��2.��3/�?���
���
���
���
���
���
���
���
���
���
���
���
���
���
���
���
���
���
���
���
���
���
���
���
���
���
71�_71��71��71��0-��0-��2.��3/����
���
���
���
���
���
���
���
���
���
���
���
���
���
���
���
���
���
���
���
���
���
71�;71��71��71��71��71��0-��0-��0-��0-��3.ŭ4/����
���
���
���
���
���
���
���
���
���
���
���
���
���
���
���
���
���
71�71��71��71��71��71��71��71��0-��0-��0-��0-��0-��1.��3/lj���
���
���
���
���
���
���
���
���
���
���
���
���
���
���
71�	71�71��71��71��71��71��71��71��71��0-��0-��0-��0-��0-��0-��0-��1.��3/�_���
���
���
���
���
���
���
���
���
���
���
���
71�71��71��71��71��71��71��71��71��71��71��0-��0-��0-��0-��0-��0-��0-��0-��0-��2.��3/�;���
���
���
���
���
���
���
���
71�Y71��71��71��71��71��71��71��71��71��71��71��71��0-��0-��0-��0-��0-��0-��0-��0-��0-��0-��0-��2.��3/����
���
���
���
���
���
71��71��71��XS��wr��vr��vr��<7��71��71��71��71��71��0-��0-��0-��0-��0-��0-��wu��~|��~|��NK��0-��0-��2.�����
���
���
���
���
���
71��71��71��UP��������������{w��71��71��71��71��71��0-��0-��0-��0-��0-��YW��������������DB��0-��0-��1.�����
���
���
���
���
71�71��71��71��71������������������71��71��71��71��71��0-��0-��0-��0-��0-������������������0-��0-��0-��1.�����
���
���
���
���
71�O71��71��71��71��hc��������������SN��71��71��71��71��0-��0-��0-��0-��B?��������������PM��0-��0-��0-��0-��50����
���
���
���
71�}71��71��71��71��71������������������71��71��71��71��0-��0-��0-��0-������������������0-��0-��0-��0-��0-��3/�3���
���
���
���
71�71��71��71��71��71��~{����������������������������������������������������������][��0-��0-��0-��0-��0-��3/�i���
���
���
���
71��71��71��71��71��71��;5����������������������������������������������������������0-��0-��0-��0-��0-��0-��3/Ǘ���
���
���
���
71��71��71��71��71��71��71������������������������������������������������������mk��0-��0-��0-��0-��0-��0-��2.Ž���
���
���
���
71��71��71��71��71��71��71��D>������������������ie��ie��db��db������������������1.��0-��0-��0-��0-��0-��0-��2.�����
���
���
���
71��71��71��71��71��71��71��71������������������71��71��0-��0-��������������|z��0-��0-��0-��0-��0-��0-��0-��2.�����
���
���
���
71��71��71��71��71��71��71��71��RL��������������JD��71��0-��XU��������������52��0-��0-��0-��0-��0-��0-��0-��1.�����
���
���
71�+71��71��71��71��71��71��71��71��71������������������71��0-������������������0-��0-��0-��0-��0-��0-��0-��0-��0-��50����
���
71�]71��71��71��71��71��71��71��71��71��ea��������������:4��QO��������������:7��0-��0-��0-��0-��0-��0-��0-��0-��0-��4/�5���
���
71�71��71��71��71��71��71��71��71��71��71��������������wr������������������0-��0-��0-��0-��0-��0-��0-��0-��0-��0-��3/�k���
���
71�71��71��71��71��71��71��71��71��71��71��zv��������������������������C@��0-��0-��0-��0-��0-��0-��0-��0-��0-��0-��3/Ǘ���
���
71��71��71��71��71��71��71��71��71��71��71��:4��������������������������0-��0-��0-��0-��0-��0-��0-��0-��0-��0-��0-��2.Ž���
���
71��71��71��71��71��71��71��71��71��71��71��71����������������������MK��0-��0-��0-��0-��0-��0-��0-��0-��0-��0-��0-��2.�����
���
71��71��71��71��71��71��71��71��71��71��71��71��B<������������������0-��0-��0-��0-��0-��0-��0-��0-��0-��0-��0-��0-��2.�����
���
71��71��71��71��71��71��71��71��71��71��71��71��71��������������[Y��0-��0-��0-��0-��0-��0-��0-��0-��0-��0-��0-��0-��1.�����
���
71��71��71��71��71��71��71��71��71��71��71��71��71��OJ����������0-��0-��0-��0-��0-��0-��0-��0-��0-��0-��0-��0-��0-��0-�����
���
71�71�y71��71��71��71��71��71��71��71��71��71��71��71������jg��0-��0-��0-��0-��0-��0-��0-��0-��0-��0-��0-��2.��3/Ɠ4/����
���
���
���
���
71�71�71��71��71��71��71��71��71��71��71��PK��1.��0-��0-��0-��0-��0-��0-��0-��0-��2.��3/Ǜ3/����
���
���
���
���
���
���
���
���
���
���
71�)71�71��71��71��71��71��71��71��0-��0-��0-��0-��0-��0-��1.��3/ƥ4/�'���
���
���
���
���
���
���
���
���
���
���
���
���
���
���
���
���
71�C71�71��71��71��71��0-��0-��0-��1.��3.ů3/�1���
���
���
���
���
���
���
���
���
���
���
���
���
���
���
���
���
���
���
���
���
���
���
71�a71��61��1.��2.ŷ3/�=���
���
���
���
���
���
���
���
���
���
���
���
���



--------------------------------------------------------------------------------
/e2e/src/app.e2e-spec.ts:
--------------------------------------------------------------------------------
  1 | 'use strict'; // necessary for es6 output in node
  2 | 
  3 | import { browser, element, by, ElementFinder, ElementArrayFinder } from 'protractor';
  4 | import { promise } from 'selenium-webdriver';
  5 | 
  6 | const expectedH1 = 'Tour of Heroes';
  7 | const expectedTitle = `${expectedH1}`;
  8 | const targetHero = { id: 15, name: 'Magneta' };
  9 | const targetHeroDashboardIndex = 3;
 10 | const nameSuffix = 'X';
 11 | const newHeroName = targetHero.name + nameSuffix;
 12 | 
 13 | class Hero {
 14 |   id: number;
 15 |   name: string;
 16 | 
 17 |   // Factory methods
 18 | 
 19 |   // Hero from string formatted as '<id> <name>'.
 20 |   static fromString(s: string): Hero {
 21 |     return {
 22 |       id: +s.substr(0, s.indexOf(' ')),
 23 |       name: s.substr(s.indexOf(' ') + 1),
 24 |     };
 25 |   }
 26 | 
 27 |   // Hero from hero list <li> element.
 28 |   static async fromLi(li: ElementFinder): Promise<Hero> {
 29 |       let stringsFromA = await li.all(by.css('a')).getText();
 30 |       let strings = stringsFromA[0].split(' ');
 31 |       return { id: +strings[0], name: strings[1] };
 32 |   }
 33 | 
 34 |   // Hero id and name from the given detail element.
 35 |   static async fromDetail(detail: ElementFinder): Promise<Hero> {
 36 |     // Get hero id from the first <div>
 37 |     let _id = await detail.all(by.css('div')).first().getText();
 38 |     // Get name from the h2
 39 |     let _name = await detail.element(by.css('h2')).getText();
 40 |     return {
 41 |         id: +_id.substr(_id.indexOf(' ') + 1),
 42 |         name: _name.substr(0, _name.lastIndexOf(' '))
 43 |     };
 44 |   }
 45 | }
 46 | 
 47 | describe('Tutorial part 6', () => {
 48 | 
 49 |   beforeAll(() => browser.get(''));
 50 | 
 51 |   function getPageElts() {
 52 |     let navElts = element.all(by.css('app-root nav a'));
 53 | 
 54 |     return {
 55 |       navElts: navElts,
 56 | 
 57 |       appDashboardHref: navElts.get(0),
 58 |       appDashboard: element(by.css('app-root app-dashboard')),
 59 |       topHeroes: element.all(by.css('app-root app-dashboard > div h4')),
 60 | 
 61 |       appHeroesHref: navElts.get(1),
 62 |       appHeroes: element(by.css('app-root app-heroes')),
 63 |       allHeroes: element.all(by.css('app-root app-heroes li')),
 64 |       selectedHeroSubview: element(by.css('app-root app-heroes > div:last-child')),
 65 | 
 66 |       heroDetail: element(by.css('app-root app-hero-detail > div')),
 67 | 
 68 |       searchBox: element(by.css('#search-box')),
 69 |       searchResults: element.all(by.css('.search-result li'))
 70 |     };
 71 |   }
 72 | 
 73 |   describe('Initial page', () => {
 74 | 
 75 |     it(`has title '${expectedTitle}'`, () => {
 76 |       expect(browser.getTitle()).toEqual(expectedTitle);
 77 |     });
 78 | 
 79 |     it(`has h1 '${expectedH1}'`, () => {
 80 |         expectHeading(1, expectedH1);
 81 |     });
 82 | 
 83 |     const expectedViewNames = ['Dashboard', 'Heroes'];
 84 |     it(`has views ${expectedViewNames}`, () => {
 85 |       let viewNames = getPageElts().navElts.map((el: ElementFinder) => el.getText());
 86 |       expect(viewNames).toEqual(expectedViewNames);
 87 |     });
 88 | 
 89 |     it('has dashboard as the active view', () => {
 90 |       let page = getPageElts();
 91 |       expect(page.appDashboard.isPresent()).toBeTruthy();
 92 |     });
 93 | 
 94 |   });
 95 | 
 96 |   describe('Dashboard tests', () => {
 97 | 
 98 |     beforeAll(() => browser.get(''));
 99 | 
100 |     it('has top heroes', () => {
101 |       let page = getPageElts();
102 |       expect(page.topHeroes.count()).toEqual(4);
103 |     });
104 | 
105 |     it(`selects and routes to ${targetHero.name} details`, dashboardSelectTargetHero);
106 | 
107 |     it(`updates hero name (${newHeroName}) in details view`, updateHeroNameInDetailView);
108 | 
109 |     it(`cancels and shows ${targetHero.name} in Dashboard`, () => {
110 |       element(by.buttonText('go back')).click();
111 |       browser.waitForAngular(); // seems necessary to gets tests to pass for toh-pt6
112 | 
113 |       let targetHeroElt = getPageElts().topHeroes.get(targetHeroDashboardIndex);
114 |       expect(targetHeroElt.getText()).toEqual(targetHero.name);
115 |     });
116 | 
117 |     it(`selects and routes to ${targetHero.name} details`, dashboardSelectTargetHero);
118 | 
119 |     it(`updates hero name (${newHeroName}) in details view`, updateHeroNameInDetailView);
120 | 
121 |     it(`saves and shows ${newHeroName} in Dashboard`, () => {
122 |       element(by.buttonText('save')).click();
123 |       browser.waitForAngular(); // seems necessary to gets tests to pass for toh-pt6
124 | 
125 |       let targetHeroElt = getPageElts().topHeroes.get(targetHeroDashboardIndex);
126 |       expect(targetHeroElt.getText()).toEqual(newHeroName);
127 |     });
128 | 
129 |   });
130 | 
131 |   describe('Heroes tests', () => {
132 | 
133 |     beforeAll(() => browser.get(''));
134 | 
135 |     it('can switch to Heroes view', () => {
136 |       getPageElts().appHeroesHref.click();
137 |       let page = getPageElts();
138 |       expect(page.appHeroes.isPresent()).toBeTruthy();
139 |       expect(page.allHeroes.count()).toEqual(10, 'number of heroes');
140 |     });
141 | 
142 |     it('can route to hero details', async () => {
143 |       getHeroLiEltById(targetHero.id).click();
144 | 
145 |       let page = getPageElts();
146 |       expect(page.heroDetail.isPresent()).toBeTruthy('shows hero detail');
147 |       let hero = await Hero.fromDetail(page.heroDetail);
148 |       expect(hero.id).toEqual(targetHero.id);
149 |       expect(hero.name).toEqual(targetHero.name.toUpperCase());
150 |     });
151 | 
152 |     it(`updates hero name (${newHeroName}) in details view`, updateHeroNameInDetailView);
153 | 
154 |     it(`shows ${newHeroName} in Heroes list`, () => {
155 |       element(by.buttonText('save')).click();
156 |       browser.waitForAngular();
157 |       let expectedText = `${targetHero.id} ${newHeroName}`;
158 |       expect(getHeroAEltById(targetHero.id).getText()).toEqual(expectedText);
159 |     });
160 | 
161 |     it(`deletes ${newHeroName} from Heroes list`, async () => {
162 |       const heroesBefore = await toHeroArray(getPageElts().allHeroes);
163 |       const li = getHeroLiEltById(targetHero.id);
164 |       li.element(by.buttonText('x')).click();
165 | 
166 |       const page = getPageElts();
167 |       expect(page.appHeroes.isPresent()).toBeTruthy();
168 |       expect(page.allHeroes.count()).toEqual(9, 'number of heroes');
169 |       const heroesAfter = await toHeroArray(page.allHeroes);
170 |       // console.log(await Hero.fromLi(page.allHeroes[0]));
171 |       const expectedHeroes =  heroesBefore.filter(h => h.name !== newHeroName);
172 |       expect(heroesAfter).toEqual(expectedHeroes);
173 |       // expect(page.selectedHeroSubview.isPresent()).toBeFalsy();
174 |     });
175 | 
176 |     it(`adds back ${targetHero.name}`, async () => {
177 |       const newHeroName = 'Alice';
178 |       const heroesBefore = await toHeroArray(getPageElts().allHeroes);
179 |       const numHeroes = heroesBefore.length;
180 | 
181 |       element(by.css('input')).sendKeys(newHeroName);
182 |       element(by.buttonText('add')).click();
183 | 
184 |       let page = getPageElts();
185 |       let heroesAfter = await toHeroArray(page.allHeroes);
186 |       expect(heroesAfter.length).toEqual(numHeroes + 1, 'number of heroes');
187 | 
188 |       expect(heroesAfter.slice(0, numHeroes)).toEqual(heroesBefore, 'Old heroes are still there');
189 | 
190 |       const maxId = heroesBefore[heroesBefore.length - 1].id;
191 |       expect(heroesAfter[numHeroes]).toEqual({id: maxId + 1, name: newHeroName});
192 |     });
193 | 
194 |     it('displays correctly styled buttons', async () => {
195 |       element.all(by.buttonText('x')).then(buttons => {
196 |         for (const button of buttons) {
197 |           // Inherited styles from styles.css
198 |           expect(button.getCssValue('font-family')).toBe('Arial');
199 |           expect(button.getCssValue('border')).toContain('none');
200 |           expect(button.getCssValue('padding')).toBe('5px 10px');
201 |           expect(button.getCssValue('border-radius')).toBe('4px');
202 |           // Styles defined in heroes.component.css
203 |           expect(button.getCssValue('left')).toBe('194px');
204 |           expect(button.getCssValue('top')).toBe('-32px');
205 |         }
206 |       });
207 | 
208 |       const addButton = element(by.buttonText('add'));
209 |       // Inherited styles from styles.css
210 |       expect(addButton.getCssValue('font-family')).toBe('Arial');
211 |       expect(addButton.getCssValue('border')).toContain('none');
212 |       expect(addButton.getCssValue('padding')).toBe('5px 10px');
213 |       expect(addButton.getCssValue('border-radius')).toBe('4px');
214 |     });
215 | 
216 |   });
217 | 
218 |   describe('Progressive hero search', () => {
219 | 
220 |     beforeAll(() => browser.get(''));
221 | 
222 |     it(`searches for 'Ma'`, async () => {
223 |       getPageElts().searchBox.sendKeys('Ma');
224 |       browser.sleep(1000);
225 | 
226 |       expect(getPageElts().searchResults.count()).toBe(4);
227 |     });
228 | 
229 |     it(`continues search with 'g'`, async () => {
230 |       getPageElts().searchBox.sendKeys('g');
231 |       browser.sleep(1000);
232 |       expect(getPageElts().searchResults.count()).toBe(2);
233 |     });
234 | 
235 |     it(`continues search with 'e' and gets ${targetHero.name}`, async () => {
236 |       getPageElts().searchBox.sendKeys('n');
237 |       browser.sleep(1000);
238 |       let page = getPageElts();
239 |       expect(page.searchResults.count()).toBe(1);
240 |       let hero = page.searchResults.get(0);
241 |       expect(hero.getText()).toEqual(targetHero.name);
242 |     });
243 | 
244 |     it(`navigates to ${targetHero.name} details view`, async () => {
245 |       let hero = getPageElts().searchResults.get(0);
246 |       expect(hero.getText()).toEqual(targetHero.name);
247 |       hero.click();
248 | 
249 |       let page = getPageElts();
250 |       expect(page.heroDetail.isPresent()).toBeTruthy('shows hero detail');
251 |       let hero2 = await Hero.fromDetail(page.heroDetail);
252 |       expect(hero2.id).toEqual(targetHero.id);
253 |       expect(hero2.name).toEqual(targetHero.name.toUpperCase());
254 |     });
255 |   });
256 | 
257 |   async function dashboardSelectTargetHero() {
258 |     let targetHeroElt = getPageElts().topHeroes.get(targetHeroDashboardIndex);
259 |     expect(targetHeroElt.getText()).toEqual(targetHero.name);
260 |     targetHeroElt.click();
261 |     browser.waitForAngular(); // seems necessary to gets tests to pass for toh-pt6
262 | 
263 |     let page = getPageElts();
264 |     expect(page.heroDetail.isPresent()).toBeTruthy('shows hero detail');
265 |     let hero = await Hero.fromDetail(page.heroDetail);
266 |     expect(hero.id).toEqual(targetHero.id);
267 |     expect(hero.name).toEqual(targetHero.name.toUpperCase());
268 |   }
269 | 
270 |   async function updateHeroNameInDetailView() {
271 |     // Assumes that the current view is the hero details view.
272 |     addToHeroName(nameSuffix);
273 | 
274 |     let page = getPageElts();
275 |     let hero = await Hero.fromDetail(page.heroDetail);
276 |     expect(hero.id).toEqual(targetHero.id);
277 |     expect(hero.name).toEqual(newHeroName.toUpperCase());
278 |   }
279 | 
280 | });
281 | 
282 | function addToHeroName(text: string): promise.Promise<void> {
283 |   let input = element(by.css('input'));
284 |   return input.sendKeys(text);
285 | }
286 | 
287 | function expectHeading(hLevel: number, expectedText: string): void {
288 |     let hTag = `h${hLevel}`;
289 |     let hText = element(by.css(hTag)).getText();
290 |     expect(hText).toEqual(expectedText, hTag);
291 | };
292 | 
293 | function getHeroAEltById(id: number): ElementFinder {
294 |   let spanForId = element(by.cssContainingText('li span.badge', id.toString()));
295 |   return spanForId.element(by.xpath('..'));
296 | }
297 | 
298 | function getHeroLiEltById(id: number): ElementFinder {
299 |   let spanForId = element(by.cssContainingText('li span.badge', id.toString()));
300 |   return spanForId.element(by.xpath('../..'));
301 | }
302 | 
303 | async function toHeroArray(allHeroes: ElementArrayFinder): Promise<Hero[]> {
304 |   let promisedHeroes = await allHeroes.map(Hero.fromLi);
305 |   // The cast is necessary to get around issuing with the signature of Promise.all()
306 |   return <Promise<any>> Promise.all(promisedHeroes);
307 | }
308 | 


--------------------------------------------------------------------------------