From 7a80335860b9ac5ed3732fca69e442d82eb23791 Mon Sep 17 00:00:00 2001
From: tim-herbst <herbst.tim@icloud.com>
Date: Fri, 1 Jan 2021 15:31:57 +0100
Subject: [PATCH] add popUp to miniMap for better usability

---
 .../app/dashboard/dashboard.component.html    | 38 +++++++++----------
 .../src/app/dashboard/dashboard.component.ts  |  4 +-
 .../frontend/src/app/map/map.component.html   |  2 +-
 .../frontend/src/app/service/map.service.ts   | 11 +++++-
 4 files changed, 31 insertions(+), 24 deletions(-)

diff --git a/projects/project-3/frontend/src/app/dashboard/dashboard.component.html b/projects/project-3/frontend/src/app/dashboard/dashboard.component.html
index fa9ffbf..9b2c3f7 100644
--- a/projects/project-3/frontend/src/app/dashboard/dashboard.component.html
+++ b/projects/project-3/frontend/src/app/dashboard/dashboard.component.html
@@ -1,6 +1,6 @@
 <meta content="width=device-width, initial-scale=1.0" name="viewport">
 <mat-toolbar class="mat-toolbar" color="primary">
-  <span>Bike Stations in London</span>
+  <span routerLink="/">Bike Stations in London</span>
   <span class="toolbar-spacer"></span>
   <a class="button-wiki" color="primary"
      href="https://gitlab.com/marcel.schwarz/geovisualisierung/-/wikis/Projektarbeit%203" mat-flat-button
@@ -49,8 +49,6 @@
             <div class="chart-bikepoint-availability" fxFlex fxLayout="column">
               <div id="chart">
                 <apx-chart
-                  [title]="bikePointChartOptions.title"
-                  [subtitle]="bikePointChartOptions.subtitle"
                   [chart]="bikePointChartOptions.chart"
                   [colors]="bikePointChartOptions.colors"
                   [dataLabels]="bikePointChartOptions.dataLabels"
@@ -59,6 +57,8 @@
                   [plotOptions]="bikePointChartOptions.plotOptions"
                   [series]="bikePointChartOptions.series"
                   [stroke]="bikePointChartOptions.stroke"
+                  [subtitle]="bikePointChartOptions.subtitle"
+                  [title]="bikePointChartOptions.title"
                   [tooltip]="bikePointChartOptions.tooltip"
                   [xaxis]="bikePointChartOptions.xaxis"
                   [yaxis]="bikePointChartOptions.yaxis"
@@ -81,12 +81,12 @@
       <div class="dashboard-table-to" fxFlex>
         <table [dataSource]="stationToSource" class="mat-elevation-z8" fxFill mat-table>
           <ng-container matColumnDef="select">
-            <th mat-header-cell *matHeaderCellDef></th>
-            <td mat-cell *matCellDef="let row">
-              <mat-checkbox matTooltip="toggle to view marker on map" matTooltipPosition="above"
-                            (click)="$event.stopPropagation()"
-                            (change)="$event ? selectRow($event, row) : null"
-                            [checked]="selectionModel.isSelected(row)">
+            <th *matHeaderCellDef mat-header-cell></th>
+            <td *matCellDef="let row" mat-cell>
+              <mat-checkbox (change)="$event ? selectRow($event, row) : null" (click)="$event.stopPropagation()"
+                            [checked]="selectionModel.isSelected(row)"
+                            matTooltip="toggle to view marker on map"
+                            matTooltipPosition="above">
               </mat-checkbox>
             </td>
           </ng-container>
@@ -108,7 +108,7 @@
 
           <ng-container matColumnDef="marker">
             <th *matHeaderCellDef mat-header-cell> icon on map</th>
-            <td *matCellDef="let element" mat-cell> <img [src]="drawIconInTable(element)" alt="marker"> </td>
+            <td *matCellDef="let element" mat-cell><img [src]="drawIconInTable(element)" alt="marker"></td>
           </ng-container>
 
           <tr *matHeaderRowDef="displayedColumnsTo" mat-header-row></tr>
@@ -118,12 +118,12 @@
       <div class="dashboard-table-from" fxFlex>
         <table [dataSource]="stationFromSource" class="mat-elevation-z9" fxFill mat-table>
           <ng-container matColumnDef="select">
-            <th mat-header-cell *matHeaderCellDef></th>
-            <td mat-cell *matCellDef="let row">
-              <mat-checkbox matTooltip="toggle to view marker on map" matTooltipPosition="above"
-                            (click)="$event.stopPropagation()"
-                            (change)="$event ? selectRow($event, row) : null"
-                            [checked]="selectionModel.isSelected(row)">
+            <th *matHeaderCellDef mat-header-cell></th>
+            <td *matCellDef="let row" mat-cell>
+              <mat-checkbox (change)="$event ? selectRow($event, row) : null" (click)="$event.stopPropagation()"
+                            [checked]="selectionModel.isSelected(row)"
+                            matTooltip="toggle to view marker on map"
+                            matTooltipPosition="above">
               </mat-checkbox>
             </td>
           </ng-container>
@@ -145,7 +145,7 @@
 
           <ng-container matColumnDef="marker">
             <th *matHeaderCellDef mat-header-cell> icon on map</th>
-            <td *matCellDef="let element" mat-cell> <img [src]="drawIconInTable(element)" alt="marker"> </td>
+            <td *matCellDef="let element" mat-cell><img [src]="drawIconInTable(element)" alt="marker"></td>
           </ng-container>
 
           <tr *matHeaderRowDef="displayedColumnsFrom" mat-header-row></tr>
@@ -187,7 +187,7 @@
         <mat-card-header class="chart-header">
           <mat-card-title>Rental Time</mat-card-title>
           <mat-card-subtitle>
-            This chart shows the workload of the currently selected Station in relation
+            This chart shows the workload of the currently selected station in relation
             of the time of the day. It is visualized at which time of the day a journey begins or ends (blue).
             In addition, the average rental duration of the trips is displayed at the given time (green).
           </mat-card-subtitle>
@@ -199,10 +199,10 @@
               [chart]="timeChartOptions.chart"
               [colors]="timeChartOptions.colors"
               [dataLabels]="timeChartOptions.dataLabels"
-              [tooltip]="timeChartOptions.tooltip"
               [fill]="timeChartOptions.fill"
               [series]="timeChartOptions.series"
               [stroke]="timeChartOptions.stroke"
+              [tooltip]="timeChartOptions.tooltip"
               [xaxis]="timeChartOptions.xaxis"
               [yaxis]="timeChartOptions.yaxis"></apx-chart>
           </div>
diff --git a/projects/project-3/frontend/src/app/dashboard/dashboard.component.ts b/projects/project-3/frontend/src/app/dashboard/dashboard.component.ts
index ddf641c..26fb220 100644
--- a/projects/project-3/frontend/src/app/dashboard/dashboard.component.ts
+++ b/projects/project-3/frontend/src/app/dashboard/dashboard.component.ts
@@ -148,8 +148,8 @@ export class DashboardComponent implements OnInit {
     });
     this.changeDetectorRefs.detectChanges();
     this.map.removeTableStationMarkerOnReload();
-    this.selectionModel.clear();
     this.route.params.subscribe(params => {
+      this.selectionModel.clear();
       this.colors = ['black', 'gray', 'green', 'orange', 'purple', 'red'];
       this.service.fetchDashboardInit(params.id).then(data => {
         this.station = data;
@@ -393,7 +393,7 @@ export class DashboardComponent implements OnInit {
       };
     });
     this.map.initDashboardMap(this.station.lat, this.station.lon, 17);
-    this.map.drawDashboardStationMarker(this.station.lat, this.station.lon);
+    this.map.drawDashboardStationMarker(this.station);
   }
 
   async onSubmit(): Promise<any> {
diff --git a/projects/project-3/frontend/src/app/map/map.component.html b/projects/project-3/frontend/src/app/map/map.component.html
index 11cb0c3..7dd0540 100644
--- a/projects/project-3/frontend/src/app/map/map.component.html
+++ b/projects/project-3/frontend/src/app/map/map.component.html
@@ -1,6 +1,6 @@
 <div class="myApp">
   <mat-toolbar class="mat-toolbar" color="primary">
-    <span>Bike Stations in London</span>
+    <span routerLink="/">Bike Stations in London</span>
     <span class="toolbar-spacer"></span>
     <app-auto-refresh></app-auto-refresh>
     <a class="button-wiki" color="primary"
diff --git a/projects/project-3/frontend/src/app/service/map.service.ts b/projects/project-3/frontend/src/app/service/map.service.ts
index 0d280ba..f10b99b 100644
--- a/projects/project-3/frontend/src/app/service/map.service.ts
+++ b/projects/project-3/frontend/src/app/service/map.service.ts
@@ -6,6 +6,8 @@ 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 {Router} from '@angular/router';
+import {IDashboardCommonBikePoint} from './domain/dashboard-common-bike-point';
 
 
 const createIcon = color => L.icon({
@@ -32,6 +34,7 @@ export class MapService {
   constructor(
     private client: HttpClient,
     private popUpService: PopUpService,
+    private router: Router
   ) {
   }
 
@@ -136,8 +139,10 @@ export class MapService {
     }
   }
 
-  public drawDashboardStationMarker(lat: number, lon: number): void {
-    this.dashBoardMarker = L.marker([lat, lon], {icon: createIcon('blue')}).addTo(this.miniMap);
+  public drawDashboardStationMarker(station: IDashboardCommonBikePoint): void {
+    this.dashBoardMarker = L.marker([station.lat, station.lon], {icon: createIcon('blue')}).addTo(this.miniMap);
+    this.dashBoardMarker.on('mouseover', e => e.target.bindPopup(`<p>${station.commonName}</p>`).openPopup());
+    this.dashBoardMarker.on('mouseout', e => e.target.closePopup());
   }
 
   public removeTableStationMarkerOnReload(): void {
@@ -158,6 +163,8 @@ export class MapService {
     }
     for (const point of bikePoints) {
       const marker = L.marker([point.stationLat, point.stationLon], {icon: createIcon(point.color)}).addTo(this.miniMap);
+      marker.on('mouseover', e => e.target.bindPopup(`<p>${point.stationName}</p>`).openPopup());
+      marker.on('mouseout', e => e.target.closePopup());
       this.markerLayer.push(marker);
       this.miniMap.fitBounds(L.featureGroup([...this.markerLayer, this.dashBoardMarker]).getBounds());
     }