refactor toolbar to match modern code patterns and make app to a god damn spa

* outsource toolbar to own component
* ngIf to listen to activated route => display user-interaction based on route
* remove unecessary code

projects/project-3/frontend/src/app/app.component.html

@@ -1 +1,2 @@
+<app-toolbar></app-toolbar>
 <router-outlet></router-outlet>

projects/project-3/frontend/src/app/app.module.ts

@@ -34,6 +34,9 @@ import { RentDurationChartComponent } from './dashboard/rent-duration-chart/rent
 import { RentTimeChartComponent } from './dashboard/rent-time-chart/rent-time-chart.component';
 import { UserInputComponent } from './dashboard/user-input/user-input.component';
 import { MiniMapComponent } from './dashboard/mini-map/mini-map.component';
+import { ToolbarComponent } from './toolbar/toolbar.component';
+import { MapInteractionComponent } from './toolbar/map-interaction/map-interaction.component';
+import { DashboardInteractionComponent } from './toolbar/dashboard-interaction/dashboard-interaction.component';
 
 @NgModule({
   declarations: [
@@ -46,7 +49,10 @@ import { MiniMapComponent } from './dashboard/mini-map/mini-map.component';
     RentDurationChartComponent,
     RentTimeChartComponent,
     UserInputComponent,
-    MiniMapComponent
+    MiniMapComponent,
+    ToolbarComponent,
+    MapInteractionComponent,
+    DashboardInteractionComponent
   ],
   imports: [
     BrowserModule,

projects/project-3/frontend/src/app/dashboard/dashboard.component.html

@@ -1,19 +1,4 @@
 <meta content="width=device-width, initial-scale=1.0" name="viewport">
-<mat-toolbar class="toolbar" color="primary">
-  <span id="logo" routerLink="/"><img alt="" class="mx-2 mb-1" height="40" src="../../assets/Logo.png">Bike Stations in London</span>
-  <span class="spacer"></span>
-  <a color="primary"
-     href="https://gitlab.com/marcel.schwarz/geovisualisierung/-/wikis/Projektarbeit%203"
-     mat-flat-button
-     target="_blank">
-    <mat-icon>library_books</mat-icon>
-    Wiki
-  </a>
-  <a color="primary" mat-flat-button routerLink="/">
-    <mat-icon>map</mat-icon>
-    back to map
-  </a>
-</mat-toolbar>
 <div class="px-5 py-3" style="background: #2f2f2f">
   <div>
     <div class="row mb-3">

projects/project-3/frontend/src/app/dashboard/dashboard.component.scss

@@ -1,16 +1 @@
-.toolbar {
-  height: 5vh;
 
-  .toolbar-spacer {
-    flex: 1 1 auto;
-  }
-
-  a:hover {
-    background: #086ed2;
-    text-decoration: none;
-  }
-
-  .spacer {
-    flex: 1 1 auto;
-  }
-}

projects/project-3/frontend/src/app/map/map.component.html

@@ -1,19 +1,6 @@
-<div class="myApp">
+<div class="map-container" fxLayout="row">
-  <mat-toolbar class="mat-toolbar" color="primary">
+  <div class="map-frame" fxFill>
-    <span routerLink="/" id="logo"><img alt="" src="../../assets/Logo.png" height="40" class="mx-2 mb-1">Bike Stations in London</span>
+    <div id="map"></div>
-    <span class="toolbar-spacer"></span>
-    <app-auto-refresh></app-auto-refresh>
-    <a class="button-wiki" color="primary"
-       href="https://gitlab.com/marcel.schwarz/geovisualisierung/-/wikis/Projektarbeit%203" mat-flat-button
-       target="_blank">
-      <mat-icon>library_books</mat-icon>
-      Wiki</a>
-  </mat-toolbar>
-
-  <div class="map-container" fxLayout="row">
-    <div class="map-frame" fxFill>
-      <div id="map" ></div>
-    </div>
   </div>
 </div>
 

projects/project-3/frontend/src/app/map/map.component.scss

@@ -1,24 +1,3 @@
-.myApp {
-  margin: 0;
-  height: 100%;
-}
-
-.toolbar-spacer {
-  flex: 1 1 auto;
-}
-
-.button-wiki:hover {
-  background: #086ed2;
-}
-
-.mat-toolbar {
-  height: 5vh;
-}
-
 #map {
   height: 95vh;
 }
-
-#logo {
-  cursor: pointer;
-}

projects/project-3/frontend/src/app/toolbar/dashboard-interaction/dashboard-interaction.component.html

@@ -0,0 +1,13 @@
+<div class="d-flex">
+  <a color="primary"
+     href="https://gitlab.com/marcel.schwarz/geovisualisierung/-/wikis/Projektarbeit%203"
+     mat-flat-button
+     target="_blank">
+    <mat-icon>library_books</mat-icon>
+    Wiki
+  </a>
+  <a color="primary" mat-flat-button routerLink="/">
+    <mat-icon>map</mat-icon>
+    back to map
+  </a>
+</div>

projects/project-3/frontend/src/app/toolbar/dashboard-interaction/dashboard-interaction.component.scss

@@ -0,0 +1,4 @@
+a:hover {
+  background: #086ed2;
+  text-decoration: none;
+}

projects/project-3/frontend/src/app/toolbar/dashboard-interaction/dashboard-interaction.component.spec.ts

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

projects/project-3/frontend/src/app/toolbar/dashboard-interaction/dashboard-interaction.component.ts

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

projects/project-3/frontend/src/app/toolbar/map-interaction/map-interaction.component.html

@@ -0,0 +1,9 @@
+<div class="d-flex">
+  <app-auto-refresh></app-auto-refresh>
+  <a class="button-wiki" color="primary"
+     href="https://gitlab.com/marcel.schwarz/geovisualisierung/-/wikis/Projektarbeit%203" mat-flat-button
+     target="_blank">
+    <mat-icon>library_books</mat-icon>
+    Wiki
+  </a>
+</div>

projects/project-3/frontend/src/app/toolbar/map-interaction/map-interaction.component.scss

@@ -0,0 +1,3 @@
+.button-wiki:hover {
+  background: #086ed2;
+}

projects/project-3/frontend/src/app/toolbar/map-interaction/map-interaction.component.spec.ts

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

projects/project-3/frontend/src/app/toolbar/map-interaction/map-interaction.component.ts

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

projects/project-3/frontend/src/app/toolbar/toolbar.component.html

@@ -0,0 +1,10 @@
+<mat-toolbar class="mat-toolbar" color="primary">
+  <span routerLink="/" id="logo"><img alt="" src="../../assets/Logo.png" height="40" class="mx-2 mb-1">Bike Stations in London</span>
+  <span class="toolbar-spacer"></span>
+  <div *ngIf="!hasRoute('dashboard')">
+    <app-map-interaction></app-map-interaction>
+  </div>
+  <div *ngIf="hasRoute('dashboard')">
+    <app-dashboard-interaction></app-dashboard-interaction>
+  </div>
+</mat-toolbar>

projects/project-3/frontend/src/app/toolbar/toolbar.component.scss

@@ -0,0 +1,11 @@
+.toolbar-spacer {
+  flex: 1 1 auto;
+}
+
+.mat-toolbar {
+  height: 5vh;
+}
+
+#logo {
+  cursor: pointer;
+}

projects/project-3/frontend/src/app/toolbar/toolbar.component.spec.ts

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

projects/project-3/frontend/src/app/toolbar/toolbar.component.ts

@@ -0,0 +1,20 @@
+import { Component, OnInit } from '@angular/core';
+import {Router} from '@angular/router';
+
+@Component({
+  selector: 'app-toolbar',
+  templateUrl: './toolbar.component.html',
+  styleUrls: ['./toolbar.component.scss']
+})
+export class ToolbarComponent implements OnInit {
+
+  constructor(private router: Router) { }
+
+  ngOnInit(): void {
+  }
+
+  hasRoute(route: string): boolean {
+    return this.router.url.includes(route);
+  }
+
+}