WIP: import mat-slide toggle

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

@@ -25,6 +25,7 @@ import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatInputModule} from '@angular/material/input';
 import {MatTableModule} from '@angular/material/table';
 import {AutoRefreshComponent} from './map/auto-refresh/auto-refresh.component';
+import {MatSlideToggleModule} from '@angular/material/slide-toggle';
 
 @NgModule({
   declarations: [
@@ -55,7 +56,8 @@ import {AutoRefreshComponent} from './map/auto-refresh/auto-refresh.component';
     FormsModule,
     ReactiveFormsModule,
     MatInputModule,
-    MatTableModule
+    MatTableModule,
+    MatSlideToggleModule
   ],
   providers: [],
   bootstrap: [AppComponent]

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

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

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

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
 
 @Component({
   selector: 'app-auto-refresh',
@@ -6,10 +6,16 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./auto-refresh.component.scss']
 })
 export class AutoRefreshComponent implements OnInit {
+  isChecked: boolean;
+  @Input() isFlagActive: boolean;
+  @Output() sendData = new EventEmitter<boolean>();
 
-  constructor() { }
+  constructor() {
+    console.log('is Active? ' + this.isFlagActive);
+  }
 
   ngOnInit(): void {
   }
 
+
 }

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

@@ -2,6 +2,10 @@
   <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>
     <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

@@ -1,5 +1,6 @@
 import {Component, OnInit} from '@angular/core';
 import {MapService} from '../service/map.service';
+import {BehaviorSubject, Observable, of, Subject} from 'rxjs';
 
 
 @Component({
@@ -8,11 +9,20 @@ 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> {
@@ -21,4 +31,8 @@ export class MapComponent implements OnInit {
     this.service.drawHeatmap();
     this.service.drawAccidents();
   }
+
+  autoRefresh(isActive: boolean): void {
+    this.service.setAutoRefreshFlag(isActive);
+  }
 }

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

@@ -6,6 +6,7 @@ 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 = L.icon({
@@ -19,6 +20,9 @@ const createIcon = L.icon({
   providedIn: 'root'
 })
 export class MapService {
+  isAutoRefreshActive: boolean;
+  isAutoRefreshActive$: Subject<boolean>;
+
   public map;
   public miniMap;
   bikePoints: Array<IMapBikePoint> = [];
@@ -28,7 +32,16 @@ export class MapService {
     private client: HttpClient,
     private popUpService: PopUpService,
   ) {
+    this.isAutoRefreshActive$ = new Subject<boolean>();
+  }
 
+  public setAutoRefreshFlag(isActive: boolean): void {
+    this.isAutoRefreshActive = isActive;
+    this.isAutoRefreshActive$.next(isActive);
+  }
+
+  public getAutoRefreshFlag(): Observable<boolean> {
+    return this.isAutoRefreshActive$.asObservable();
   }
 
   public initMap(lat: number, lon: number, zoom: number): void {
@@ -42,7 +55,7 @@ export class MapService {
   }
 
   public initDashboardMap(lat: number, lon: number, zoom: number): void {
-    if(this.miniMap) {
+    if (this.miniMap) {
       this.miniMap.off();
       this.miniMap.remove();
     }