Add routing

src/app/app-routing-module.ts

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Router, RouterModule } from '@angular/router';
+
+import { NotFoundComponent } from './not-found/not-found.component';
+import {DashboardComponent} from './dashboard/dashboard.component';
+import {ImpressumComponent} from './impressum/impressum.component';
+
+export const appRoutes = [
+  { path: 'impressum', component: ImpressumComponent },
+  { path: 'dashboard', component: DashboardComponent },
+  { path: '', pathMatch: 'full', redirectTo: '/dashboard' },
+  { path: '**', component: NotFoundComponent }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    RouterModule.forRoot(appRoutes)
+  ],
+  declarations: [],
+  exports: [
+    RouterModule
+  ]
+})
+export class AppRoutingModule { }

src/app/app.component.html

@@ -1,7 +1,7 @@
 <div class="page-wrap">
   <app-header></app-header>
   <main class="content">
-    <app-dashboard></app-dashboard>
+    <router-outlet></router-outlet>
   </main>
   <footer>
     <app-footer></app-footer>

src/app/app.module.ts

@@ -1,36 +1,33 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {ChartsModule} from 'ng2-charts';
+import {HttpClientModule} from '@angular/common/http';
+import {DatePipe} from '@angular/common';
+import {FlexLayoutModule} from '@angular/flex-layout';
 import { CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
 
-
 import { AppComponent } from './app.component';
 import { FooterComponent } from './menu/footer/footer.component';
 import { HeaderComponent } from './menu/header/header.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { WelcomeComponent } from './dashboard/welcome/welcome.component';
 import { FormComponent } from './dashboard/form/form.component';
 import { MetricComponent } from './dashboard/metric/metric.component';
-import {PublicChartsComponent} from "./dashboard/charts/public-charts/public-charts.component";
-import {PrivateChartsComponent} from "./dashboard/charts/private-charts/private-charts.component";
-import {BarchartComponent} from "./dashboard/charts/barchart/barchart.component";
-import {LinechartComponent} from "./dashboard/charts/linechart/linechart.component";
-
-
+import { PublicChartsComponent } from './dashboard/charts/public-charts/public-charts.component';
+import { PrivateChartsComponent } from './dashboard/charts/private-charts/private-charts.component';
+import { BarchartComponent } from './dashboard/charts/barchart/barchart.component';
+import { LinechartComponent } from './dashboard/charts/linechart/linechart.component';
+import { NotFoundComponent } from './not-found/not-found.component';
+import { AppRoutingModule } from './app-routing-module';
 
 import {
   MatButtonModule, MatIconModule, MatToolbarModule, MatCardModule, MatCheckboxModule,
-  MatDatepickerModule, MatFormFieldModule, MatNativeDateModule, MatInputModule, 
+  MatDatepickerModule, MatFormFieldModule, MatNativeDateModule, MatInputModule,
   MatSnackBarModule, MatSelectModule,
-} from "@angular/material";
-import {FormsModule, ReactiveFormsModule} from "@angular/forms";
-import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
-import {ChartsModule} from "ng2-charts";
-import {HttpClientModule} from "@angular/common/http";
-import {DatePipe} from "@angular/common";
-import {FlexLayoutModule} from "@angular/flex-layout";
-
-
-
+} from '@angular/material';
+import { ImpressumComponent } from './impressum/impressum.component';
 
 @NgModule({
   declarations: [
@@ -45,6 +42,8 @@ import {FlexLayoutModule} from "@angular/flex-layout";
     PrivateChartsComponent,
     BarchartComponent,
     LinechartComponent,
+    NotFoundComponent,
+    ImpressumComponent,
   ],
   imports: [
     BrowserModule,
@@ -54,6 +53,7 @@ import {FlexLayoutModule} from "@angular/flex-layout";
     ChartsModule,
     HttpClientModule,
     FlexLayoutModule,
+    AppRoutingModule,
     MatToolbarModule,
     MatButtonModule,
     MatIconModule,

src/app/dashboard/dashboard.component.css

@@ -0,0 +1,5 @@
+.margin {
+  margin-left: 10px;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}

src/app/dashboard/dashboard.component.html

@@ -1,9 +1,17 @@
 <app-welcome></app-welcome>
 <br>
-<div fxLayout="row" fxLayoutAlign="space-evenly center">
+<div fxLayout="row" fxLayoutAlign="space-evenly center" *ngIf="!publicCheck && !privateCheck">
   <app-form (showData)="loadRequestedData($event)"></app-form>
   <app-metric [publicStatistics]="currentPublicStatistics" [privateStatistics]="currentPrivateStatistics"></app-metric>
 </div>
+<div  class ="margin" *ngIf="publicCheck || privateCheck">
+  <button mat-raised-button (click)="resetChecks()">
+    <mat-icon>
+      arrow_back
+    </mat-icon>
+    Update Data
+  </button>
+</div>
 <br>
 <div fxLayout="row" fxLayoutAlign="center start" *ngIf="currentPrivateStatistics && currentPublicStatistics">
   <div *ngIf="publicCheck" fxFlex="45">
@@ -25,7 +33,14 @@
   <div *ngIf="!timeBasedPrivateStatistics">
     <app-private-charts [currentPrivateData]="currentPrivateStatistics"></app-private-charts>
   </div>
-  </div>  
+  </div>
+</div>
+<div  class ="margin" *ngIf="(publicCheck || privateCheck) && (timeBasedPrivateStatistics || timeBasedPublicStatistics)">
+  <button mat-raised-button (click)="resetChecks()">
+    <mat-icon>
+      arrow_back
+    </mat-icon>
+    Update Data
+  </button>
 </div>
-
 

src/app/dashboard/dashboard.component.ts

@@ -1,8 +1,8 @@
 import {Component, OnDestroy, OnInit} from '@angular/core';
-import {PrivateStatisticsService} from "../services/private-statistics.service";
-import {PublicStatisticsService} from "../services/public-statistics.service";
-import {PrivateStatistics} from "../services/PrivateStatistics";
-import {PublicStatistics} from "../services/PublicStatistics";
+import {PrivateStatisticsService} from '../services/private-statistics.service';
+import {PublicStatisticsService} from '../services/public-statistics.service';
+import {PrivateStatistics} from '../services/PrivateStatistics';
+import {PublicStatistics} from '../services/PublicStatistics';
 
 @Component({
   selector: 'app-dashboard',
@@ -22,7 +22,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
   currentPrivateStatistics: PrivateStatistics;
   currentPublicStatistics: PublicStatistics;
   timeBasedPublicStatistics: any; // TODO fix type
-  timeBasedPrivateStatistics: any; //TODO fix type
+  timeBasedPrivateStatistics: any; // TODO fix type
 
   constructor(private privateStatisticsService: PrivateStatisticsService, private publicStatisticsService: PublicStatisticsService) { }
 
@@ -51,7 +51,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
         response => {
           this.currentPrivateStatistics = response[0];
         }
-      )
+      );
   }
 
   loadLatestPublicData() {
@@ -60,7 +60,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
         response => {
           this.currentPublicStatistics = response[0];
         }
-      )
+      );
   }
 
   loadRequestedData(userInput: Array<any>) {
@@ -71,38 +71,43 @@ export class DashboardComponent implements OnInit, OnDestroy {
 
     this.timeBasedPublicStatistics = null;
     this.timeBasedPrivateStatistics = null;
-    if(this.startDate && this.endDate){
-      if(this.checkValidDates(this.startDate, this.endDate)) {
+    if (this.startDate && this.endDate) {
+      if (this.checkValidDates(this.startDate, this.endDate)) {
       this.loadTimeBasedPublicData(this.startDate, this.endDate);
       this.loadTimeBasedPrivateData(this.startDate, this.endDate);
       }
     }
   }
 
-  loadTimeBasedPublicData(start: Date, end: Date){
-      let query = 'startTime=' + start.toISOString() + '&endTime=' + end.toISOString();
-      console.log(start);
+  loadTimeBasedPublicData(start: Date, end: Date) {
+      const query = 'startTime=' + start.toISOString() + '&endTime=' + end.toISOString();
       this.publicStatisticsService.query(query)
         .subscribe(
           response => {
             this.timeBasedPublicStatistics = response;
           }
-        )
+        );
   }
 
-  loadTimeBasedPrivateData(start:Date, end:Date) {
-      let query = 'startTime=' + start.toISOString() + '&endTime=' + end.toISOString();
+  loadTimeBasedPrivateData(start: Date, end: Date) {
+      const query = 'startTime=' + start.toISOString() + '&endTime=' + end.toISOString();
+      console.log(start.toISOString());
       this.privateStatisticsService.query(query)
       .subscribe(
         response => {
           this.timeBasedPrivateStatistics = response;
         }
-      )
+      );
   }
 
    checkValidDates(start: Date, end: Date) {
     return start < end;
   }
+
+  resetChecks() {
+    this.privateCheck = false;
+    this.publicCheck = false;
+  }
 }
 
 

src/app/dashboard/form/form.component.html

@@ -55,7 +55,6 @@ <h2 class="mat-h3">Define Time Span</h2>
               send
             </mat-icon></button>
         </mat-card-actions>
-
       </form>
     </mat-card-content>
   </mat-card>

src/app/dashboard/metric/metric.component.css

@@ -3,12 +3,11 @@ mat-card {
 }
 
 table {
-
 }
 
-th, td {
+th,
+td {
   padding: 15px;
   text-align: left;
-  border-bottom: 1px solid #A7A7A7;
-
+  border-bottom: 1px solid #a7a7a7;
 }

src/app/dashboard/welcome/welcome.component.css

@@ -9,24 +9,24 @@
 }
 
 .transparent-background {
-  background-color: rgba(0,0,0,0);
+  background-color: rgba(0, 0, 0, 0);
 }
 
-.spacer{
+.spacer {
   flex: 1 1 auto;
 }
 
-.white-text{
+.white-text {
   color: white;
   text-align: center;
   vertical-align: middle;
 }
 
-.mat-h1{
+.mat-h1 {
   font-size: 4.2rem;
 }
 
-.mat-h2{
+.mat-h2 {
   font-size: 1.64rem;
   font-weight: 300;
   margin: .82rem 0 .656rem 0;

src/app/impressum/impressum.component.css

@@ -0,0 +1,4 @@
+mat-card {
+  background: whitesmoke;
+  width: 50%;
+}

src/app/impressum/impressum.component.html

@@ -0,0 +1,8 @@
+<br>
+<div fxLayout="column" fxLayoutAlign="space-around center" >
+  <mat-card> <!-- TODO write useful text -->
+    <mat-card-title>Lorem ipsum</mat-card-title>
+    <mat-card-content>dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</mat-card-content>
+  </mat-card>
+  <br>
+</div>

src/app/impressum/impressum.component.spec.ts

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

src/app/impressum/impressum.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-impressum',
+  templateUrl: './impressum.component.html',
+  styleUrls: ['./impressum.component.css']
+})
+export class ImpressumComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/menu/footer/footer.component.css

@@ -1,9 +1,9 @@
-.description{
+.description {
   font-size: 12px;
   font-style: normal;
 }
 
-.spacer{
+.spacer {
   flex: 1 1 auto;
 }
 

src/app/menu/header/header.component.css

@@ -1,7 +1,11 @@
 .logo {
-  width:20%;
+  width: 20%;
 }
 
 .mat-h1 {
   font-size: 2rem;
 }
+
+.spacer {
+  flex: 1 1 auto;
+}

src/app/menu/header/header.component.html

@@ -1,8 +1,10 @@
 <mat-toolbar color="secondary">
   <mat-toolbar-row>
-    <a mat-button href="#" aria-label="Chainboard">
+    <a mat-button routerLink="/dashboard" aria-label="Chainboard">
       <img class="logo" src="assets/images/logo.png">
       <span class="mat-h1">Chainboard</span>
     </a>
+    <span class="spacer"></span>
+    <button mat-button routerLink="/impressum">Impressum</button>
   </mat-toolbar-row>
 </mat-toolbar>