refactor miniMap to component

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

@@ -33,6 +33,7 @@ import { TableComponent } from './dashboard/table/table.component';
 import { RentDurationChartComponent } from './dashboard/rent-duration-chart/rent-duration-chart.component';
 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';
 
 @NgModule({
   declarations: [
@@ -44,7 +45,8 @@ import { UserInputComponent } from './dashboard/user-input/user-input.component'
     TableComponent,
     RentDurationChartComponent,
     RentTimeChartComponent,
-    UserInputComponent
+    UserInputComponent,
+    MiniMapComponent
   ],
   imports: [
     BrowserModule,

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

@@ -24,13 +24,7 @@
           (startEndDate)="onSubmit($event)"
         ></app-user-input>
       </div>
-      <mat-card class="mat-card-map" fxFlex>
-        <div class="mini-map" fxFlex>
-          <div class="map-frame" fxFill>
-            <div fxFill id="minimap"></div>
-          </div>
-        </div>
-      </mat-card>
+      <app-mini-map fxFlex></app-mini-map>
     </div>
 
     <div class="container-table" fxFlex fxLayout="row" fxLayoutAlign="space-evenly center">

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

@@ -1,8 +1,5 @@
-import {ChangeDetectionStrategy, Component, Injectable, OnInit, ViewChild} from '@angular/core';
-import {ActivatedRoute, Router} from '@angular/router';
-import {DashboardService} from '../service/dashboard.service';
+import {ChangeDetectionStrategy, Component, OnInit, ViewChild} from '@angular/core';
 import {IDashboardCommonBikePoint} from '../service/domain/dashboard-common-bike-point';
-import {MapService} from '../service/map.service';
 
 
 import {
@@ -19,8 +16,6 @@ import {
   ApexXAxis,
   ApexYAxis
 } from 'ng-apexcharts';
-import {DateAdapter, MAT_DATE_FORMATS, NativeDateAdapter} from '@angular/material/core';
-import {formatDate} from '@angular/common';
 import {TableComponent} from './table/table.component';
 import {RentDurationChartComponent} from './rent-duration-chart/rent-duration-chart.component';
 import {RentTimeChartComponent} from './rent-time-chart/rent-time-chart.component';
@@ -52,38 +47,15 @@ const chartHeight = 460;
   changeDetection: ChangeDetectionStrategy.Default,
 })
 export class DashboardComponent implements OnInit {
+
   @ViewChild(TableComponent) table: TableComponent;
   @ViewChild(RentDurationChartComponent) durationChart: RentDurationChartComponent;
   @ViewChild(RentTimeChartComponent) timeChart: RentTimeChartComponent;
 
-  public bikePointChartOptions: Partial<ChartOptions>;
-
-  station: IDashboardCommonBikePoint;
-  maxStartDate: Date;
-  maxEndDate: Date;
-
-  constructor(
-    private route: ActivatedRoute,
-    private router: Router,
-    private service: DashboardService,
-    private map: MapService,
-  ) {
+  constructor() {
   }
 
   ngOnInit(): void {
-    this.route.params.subscribe(params => {
-      this.service.fetchDashboardInit(params.id).then(data => {
-        this.station = data;
-        this.maxStartDate = new Date(data.maxStartDate);
-        this.maxEndDate = new Date(data.maxEndDate);
-        this.initDashboard();
-      });
-    });
-  }
-
-  async initDashboard(): Promise<any> {
-    this.map.initDashboardMap(this.station.lat, this.station.lon, 17);
-    this.map.drawDashboardStationMarker(this.station);
   }
 
   async onSubmit(startEndDate: StartEndDate): Promise<any> {

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

@@ -0,0 +1,7 @@
+<mat-card class="mat-card-map" fxFlex>
+  <div class="mini-map" fxFlex>
+    <div class="map-frame" fxFill>
+      <div fxFill id="minimap"></div>
+    </div>
+  </div>
+</mat-card>

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

@@ -0,0 +1,4 @@
+.mat-card {
+  padding: 1px 1px 1px;
+  margin: 10px;
+}

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

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

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

@@ -0,0 +1,36 @@
+import { Component, OnInit } from '@angular/core';
+import {IDashboardCommonBikePoint} from '../../service/domain/dashboard-common-bike-point';
+import {ActivatedRoute} from '@angular/router';
+import {DashboardService} from '../../service/dashboard.service';
+import {MapService} from '../../service/map.service';
+
+@Component({
+  selector: 'app-mini-map',
+  templateUrl: './mini-map.component.html',
+  styleUrls: ['./mini-map.component.scss']
+})
+export class MiniMapComponent implements OnInit {
+
+  bikePoint: IDashboardCommonBikePoint;
+
+  constructor(
+    private route: ActivatedRoute,
+    private service: DashboardService,
+    private map: MapService
+  ) { }
+
+  ngOnInit(): void {
+    this.route.params.subscribe(params => {
+      this.service.fetchDashboardInit(params.id).then(data => {
+        this.bikePoint = data;
+        this.initMap();
+      });
+    });
+  }
+
+  initMap(): void {
+    this.map.initDashboardMap(this.bikePoint.lat, this.bikePoint.lon, 17);
+    this.map.drawDashboardStationMarker(this.bikePoint);
+  }
+
+}

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

@@ -74,6 +74,7 @@ export interface StartEndDate {
   ]
 })
 export class UserInputComponent implements OnInit {
+
   @Output() startEndDate: EventEmitter<StartEndDate> = new EventEmitter<StartEndDate>();
 
   chartOptions: Partial<ChartOptions>;