hft-informatik/geovisualisierung
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source 
* outsource toolbar to own component
* ngIf to listen to activated route => display user-interaction based on route
* remove unecessary code
This commit is contained in:
tim-herbst 2021-01-10 14:59:12 +01:00
parent 860d351323
commit a8bff8965c
19 changed files with 16394 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16229
projects/project-3/frontend/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
projects/project-3/frontend/src/app/app.component.html
View File

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

8
projects/project-3/frontend/src/app/app.module.ts
View File

@ -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,

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

@ -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">

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

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

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

@ -1,19 +1,6 @@
<div class="myApp">
<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>
<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 class="map-container" fxLayout="row">
<div class="map-frame" fxFill>
<div id="map"></div>
</div>
</div>

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

@ -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;
}

13
projects/project-3/frontend/src/app/toolbar/dashboard-interaction/dashboard-interaction.component.html Normal file
View File

@ -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>

4
projects/project-3/frontend/src/app/toolbar/dashboard-interaction/dashboard-interaction.component.scss Normal file
View File

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

25
projects/project-3/frontend/src/app/toolbar/dashboard-interaction/dashboard-interaction.component.spec.ts Normal file
View File

@ -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();
});
});

15
projects/project-3/frontend/src/app/toolbar/dashboard-interaction/dashboard-interaction.component.ts Normal file
View File

@ -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 {
}
}

9
projects/project-3/frontend/src/app/toolbar/map-interaction/map-interaction.component.html Normal file
View File

@ -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>

3
projects/project-3/frontend/src/app/toolbar/map-interaction/map-interaction.component.scss Normal file
View File

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

25
projects/project-3/frontend/src/app/toolbar/map-interaction/map-interaction.component.spec.ts Normal file
View File

@ -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();
});
});

15
projects/project-3/frontend/src/app/toolbar/map-interaction/map-interaction.component.ts Normal file
View File

@ -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 {
}
}

10
projects/project-3/frontend/src/app/toolbar/toolbar.component.html Normal file
View File

@ -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>

11
projects/project-3/frontend/src/app/toolbar/toolbar.component.scss Normal file
View File

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

25
projects/project-3/frontend/src/app/toolbar/toolbar.component.spec.ts Normal file
View File

@ -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();
});
});

20
projects/project-3/frontend/src/app/toolbar/toolbar.component.ts Normal file
View File

@ -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);
}
}