finish work on auto-refresh

* remove stupidy
* implement it the marcel way
* fix control-duplicates

projects/project-3/frontend/package.json

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

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

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

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

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

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

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

projects/project-3/frontend/src/app/map/auto-refresh/auto-refresh.component.ts

@@ -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;
+  isFlagActive: boolean;
-  @Input() isFlagActive: boolean;
-  @Output() sendData = new EventEmitter<boolean>();
 
-  constructor() {
+  constructor(private map: MapService) {
-    console.log('is Active? ' + this.isFlagActive);
+    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));
+  }
 }

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

@@ -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
+    <app-auto-refresh></app-auto-refresh>
-      (sendData)="autoRefresh($event)"
-      [isFlagActive]="isRefreshActive"
-    ></app-auto-refresh>
     <a class="button-wiki" color="primary"
        href="https://gitlab.com/marcel.schwarz/geovisualisierung/-/wikis/Projektarbeit%203" mat-flat-button
        target="_blank">

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

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

projects/project-3/frontend/src/app/service/map.service.ts

@@ -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 {
+  public async autoRefresh(): Promise<any> {
-    this.isAutoRefreshActive = isActive;
+    for (const name in this.mapOverlays) {
-    this.isAutoRefreshActive$.next(isActive);
+      this.map.removeLayer(this.mapOverlays[name]);
     }
-
+    await this.drawStationMarkers();
-  public getAutoRefreshFlag(): Observable<boolean> {
+    this.drawHeatmap();
-    return this.isAutoRefreshActive$.asObservable();
+    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);
+    this.map.removeControl(this.layerControl);
-    L.control.scale({position: 'bottomleft'}).addTo(this.map);
+    this.layerControl = L.control.layers(null, this.mapOverlays, {position: 'bottomright'});
+    this.map.addControl(this.layerControl);
   }
 
   private fetchBikePointGeoData(): Promise<any> {