finish work on auto-refresh

* remove stupidy
* implement it the marcel way
* fix control-duplicates
This commit is contained in:
tim-herbst 2020-12-30 12:12:39 +01:00
parent 5e71b3c094
commit 8de1c8cfc3
9 changed files with 16255 additions and 58 deletions

File diff suppressed because it is too large Load Diff

View File

@ -39,9 +39,9 @@
"@angular-devkit/build-angular": "~0.1002.0",
"@angular/cli": "~10.2.0",
"@angular/compiler-cli": "~10.2.0",
"@types/node": "^12.11.1",
"@types/jasmine": "~3.5.0",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^12.11.1",
"codelyzer": "^6.0.0",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",

View File

@ -97,7 +97,6 @@ export class DashboardComponent implements OnInit {
form: FormGroup;
bikePoint: IMapBikePoint;
bikePointWithColor = [];
constructor(
private route: ActivatedRoute,

View File

@ -1,3 +1,3 @@
<div>
<mat-slide-toggle [checked]="isFlagActive" [(ngModel)]="isChecked" (ngModelChange)="sendData.emit(isChecked)">auto refresh</mat-slide-toggle>
<mat-slide-toggle [(ngModel)]="isFlagActive" (ngModelChange)="onChange($event)">auto refresh</mat-slide-toggle>
</div>

View File

@ -0,0 +1,3 @@
mat-slide-toggle {
font-size: 15px;
}

View File

@ -1,4 +1,5 @@
import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
import {Component, OnInit} from '@angular/core';
import {MapService} from '../../service/map.service';
@Component({
selector: 'app-auto-refresh',
@ -6,16 +7,30 @@ import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
styleUrls: ['./auto-refresh.component.scss']
})
export class AutoRefreshComponent implements OnInit {
isChecked: boolean;
@Input() isFlagActive: boolean;
@Output() sendData = new EventEmitter<boolean>();
isFlagActive: boolean;
constructor() {
console.log('is Active? ' + this.isFlagActive);
constructor(private map: MapService) {
const storageFlag = JSON.parse(sessionStorage.getItem('auto-refresh'));
if (storageFlag) {
this.isFlagActive = storageFlag;
} else {
this.isFlagActive = false;
}
}
ngOnInit(): void {
setInterval(() => {
if (this.isFlagActive) {
this.map.autoRefresh();
console.log('Update triggered');
} else {
console.log('no Update triggered');
}
}, 30000);
}
onChange(flag: boolean): void {
sessionStorage.setItem('auto-refresh', JSON.stringify(flag));
}
}

View File

@ -2,10 +2,7 @@
<mat-toolbar class="mat-toolbar" color="primary">
<span>Bike Stations in London</span>
<span class="toolbar-spacer"></span>
<app-auto-refresh
(sendData)="autoRefresh($event)"
[isFlagActive]="isRefreshActive"
></app-auto-refresh>
<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">

View File

@ -8,20 +8,12 @@ import {MapService} from '../service/map.service';
styleUrls: ['./map.component.scss']
})
export class MapComponent implements OnInit {
isRefreshActive = false;
constructor(private service: MapService) {
}
ngOnInit(): void {
this.initMapView();
this.service.getAutoRefreshFlag().subscribe(isChecked => {
this.isRefreshActive = isChecked;
console.log(isChecked);
});
console.log(this.isRefreshActive);
}
async initMapView(): Promise<any> {
@ -31,7 +23,4 @@ export class MapComponent implements OnInit {
this.service.drawAccidents();
}
autoRefresh(isActive: boolean): void {
this.service.setAutoRefreshFlag(isActive);
}
}

View File

@ -6,7 +6,6 @@ import {HttpClient} from '@angular/common/http';
import {environment} from '../../environments/environment';
import {PopUpService} from './pop-up.service';
import {IMapBikePoint} from './domain/map-bike-point';
import {Observable, Subject} from 'rxjs';
const createIcon = color => L.icon({
@ -20,8 +19,6 @@ const createIcon = color => L.icon({
providedIn: 'root'
})
export class MapService {
isAutoRefreshActive: boolean;
isAutoRefreshActive$: Subject<boolean>;
public map;
public miniMap;
@ -30,21 +27,21 @@ export class MapService {
miniMapMarker: L.layerGroup;
markerLayer = [];
dashBoardMarker = L.marker;
layerControl = L.control(null);
constructor(
private client: HttpClient,
private popUpService: PopUpService,
) {
this.isAutoRefreshActive$ = new Subject<boolean>();
}
public setAutoRefreshFlag(isActive: boolean): void {
this.isAutoRefreshActive = isActive;
this.isAutoRefreshActive$.next(isActive);
public async autoRefresh(): Promise<any> {
for (const name in this.mapOverlays) {
this.map.removeLayer(this.mapOverlays[name]);
}
public getAutoRefreshFlag(): Observable<boolean> {
return this.isAutoRefreshActive$.asObservable();
await this.drawStationMarkers();
this.drawHeatmap();
this.drawAccidents();
}
public initMap(lat: number, lon: number, zoom: number): void {
@ -157,8 +154,9 @@ export class MapService {
}
private drawMapControl(): void {
L.control.layers(null, this.mapOverlays, {position: 'bottomright'}).addTo(this.map);
L.control.scale({position: 'bottomleft'}).addTo(this.map);
this.map.removeControl(this.layerControl);
this.layerControl = L.control.layers(null, this.mapOverlays, {position: 'bottomright'});
this.map.addControl(this.layerControl);
}
private fetchBikePointGeoData(): Promise<any> {