feat: load units into the map layer

src/app/dashboard/components/dashboard.component.html

@@ -7,7 +7,7 @@
     </p-tabPanel>
     <p-tabPanel header="Map view">
       <ng-template pTemplate="content">
-        <app-map></app-map>
+        <app-map [units]="units"></app-map>
       </ng-template>
     </p-tabPanel>
   </p-tabView>

src/app/dashboard/components/map/map.component.ts

@@ -1,10 +1,16 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { ConfirmationService, MenuItem, MessageService } from 'primeng/api';
-import { HttpResponse } from '@angular/common/http';
-import { Group, Tile } from 'ol/layer';
-import { OSM, TileWMS, ImageWMS, TileArcGISRest, Vector as VectorSource } from 'ol/source';
+import { Group, Tile, Vector as VectorLayer } from 'ol/layer';
+import { OSM, TileWMS, Vector as VectorSource } from 'ol/source';
+import GeoJSON from 'ol/format/GeoJSON';
 import { transform, transformExtent } from 'ol/proj';
+import { Circle as CircleStyle, Fill, Stroke, Style } from 'ol/style';
 import View from 'ol/View';
+import { Unit } from '../../../shared/api/endpoints/models/unit';
+import { Lastpos } from '../../../shared/api/endpoints/models/lastpos';
+import { Drivers } from '../../../shared/api/endpoints/models/drivers';
+import { GeneralInfo } from '../../../shared/api/endpoints/models/general-info';
+import { Sensor } from '../../../shared/api/endpoints/models/sensor';
 import {
   HsConfig,
   HsMapService,
@@ -20,6 +26,8 @@ import {
 })
 export class MapComponent implements OnInit, OnDestroy {
 
+  @Input('units') units: Array<{ drivers?: Drivers; generalInfo?: GeneralInfo; holder?: any; lastpos?: Lastpos; sensors?: Array<Sensor>; unit?: Unit }>;
+
 
   constructor(
     private confirmationService: ConfirmationService,
@@ -30,8 +38,6 @@ export class MapComponent implements OnInit, OnDestroy {
     public HsLayerEditorService: HsLayerEditorService,
     public HsEventBusService: HsEventBusService
   ) {
-    this.initData();
-
     this.HsConfig.update({
       assetsPath: 'https://unpkg.com/hslayers-ng-app@3.1.0/assets/',
       proxyPrefix: window.location.hostname.includes('localhost')
@@ -70,17 +76,7 @@ export class MapComponent implements OnInit, OnDestroy {
               },
               visible: false,
             }),
-            new Tile({
-              properties: {
-                title: 'Esri World',
-                base: true,
-                thumbnail: 'https://www.smartafrihub.com/hsl-ng/esri-world.jpg'
-              },
-              visible: false,
-              source: new TileArcGISRest({
-                url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/'
-              })
-            })
+            this.initUnitsLayer()
           ]
         })
       ],
@@ -119,8 +115,48 @@ export class MapComponent implements OnInit, OnDestroy {
   }
 
   /**
-   * Get necessary data from backend
+   * Crete vector layer from units positions
    */
-  initData() {
+  initUnitsLayer(): any {
+    var geoJsonUnits = {
+      'type': 'FeatureCollection',
+      'crs': {
+        'type': 'name',
+        'properties': {
+          'name': 'EPSG:3857',
+        }
+      }
+    };
+    geoJsonUnits['features'] = this.units ? this.units.map(u => this.getUnitPos(u.lastpos)) : [];
+
+    const vectorSource = new VectorSource({
+      features: new GeoJSON().readFeatures(geoJsonUnits),
+    });
+    const vectorLayer = new VectorLayer({
+      source: vectorSource,
+      style: this.styleFunction,
+    });
+
+    return vectorLayer;
+  }
+
+  styleFunction(feature: any): Style {
+    return new Style({
+      image: new CircleStyle({
+        radius: 5,
+        fill: null,
+        stroke: new Stroke({ color: 'red', width: 1 }),
+      }),
+    })
+  }
+
+  getUnitPos(pos: Lastpos): any {
+    return {
+      'type': 'Feature',
+      'geometry': {
+        'type': 'Point',
+        'coordinates': [pos.position.x, pos.position.y]
+      }
+    }
   }
 }

src/app/dashboard/components/unit-list/unit-list.component.ts

@@ -91,12 +91,12 @@ export class UnitListComponent implements OnInit, OnDestroy {
   /**
    * Get all units and theirs sensors from backend
    */
-  getUnits() {
-    this.dataService.getData().subscribe(data => {
-      this.units = data;
-      this.units.forEach(unit => unit.sensors.sort((a, b) => a.sensorId - b.sensorId));
-    }, err => this.toastService.showError(err.error.message));
-  }
+  //getUnits() {
+  //  this.dataService.getData().subscribe(data => {
+  //    this.units = data;
+  //    this.units.forEach(unit => unit.sensors.sort((a, b) => a.sensorId - b.sensorId));
+  //  }, err => this.toastService.showError(err.error.message));
+  //}
 
   /**
    * Show edit unit

src/app/shared/api/endpoints/services/data.service.ts

@@ -80,5 +80,4 @@ export class DataService extends BaseService {
       map((r: StrictHttpResponse<Array<{ 'drivers'?: Drivers, 'generalInfo'?: GeneralInfo, 'holder'?: any, 'lastpos'?: Lastpos, 'sensors'?: Array<Sensor>, 'unit'?: Unit }>>) => r.body as Array<{ 'drivers'?: Drivers, 'generalInfo'?: GeneralInfo, 'holder'?: any, 'lastpos'?: Lastpos, 'sensors'?: Array<Sensor>, 'unit'?: Unit }>)
     );
   }
-
 }