Real-time communication with frontend

- Frontend shows heatmap of most visit places
- Maximum accuracy can now be set
- Fix bug where battery chart filtered values wrongly

frontend/src/app/dashboard/dashboard.component.ts

@@ -1,6 +1,7 @@
 import { AfterViewInit, Component, OnInit } from '@angular/core';
 import { ChartDataSets, ChartOptions } from 'chart.js';
 import { Label } from 'ng2-charts';
+import * as moment from 'moment';
 import { APIService, IBeat } from '../api.service';
 
 @Component({
@@ -51,10 +52,12 @@ export class DashboardComponent implements AfterViewInit {
       this.lineChartLabels = [];
 
       const batteryLevels: number[] = [];
+      let currentLevel = 0;
 
       const finalBeats = beats.filter((val, i, array) => {
-        if (batteryLevels.indexOf(val.battery) === -1) {
+        if (currentLevel !== val.battery) {
           batteryLevels.push(val.battery);
+          currentLevel = val.battery;
           return true;
         } else {
           return false;
@@ -63,7 +66,7 @@ export class DashboardComponent implements AfterViewInit {
 
       finalBeats.forEach((beat) => {
         this.lineChartData[0].data.push(beat.battery);
-        this.lineChartLabels.push(this.formatDateTime(new Date(beat.createdAt)));
+        this.lineChartLabels.push(moment(new Date(beat.createdAt)).format(this.lineChartOptions.scales.xAxes[0].time.parser.toString()));
       });
 
       let tDistance = 0;
@@ -83,10 +86,6 @@ export class DashboardComponent implements AfterViewInit {
     });
   }
 
-  private formatDateTime(date: Date): string {
-    return `${date.getMonth()}/${date.getDay()}/${date.getFullYear()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
-  }
-
   ngAfterViewInit(): void {
   }