new root marker, colors for agents in table

src/app/components/chart-timeline/chart-timeline.component.ts

@@ -17,7 +17,7 @@ import {
 } from 'ng-apexcharts';
 
 import { getMarkerConfig } from 'src/environments/environment';
-import { Object, PositionUpdate, validateTypeObject} from 'src/app/model/base-model';
+import { Agent, PositionUpdate, validateTypeAgent} from 'src/app/model/base-model';
 
 export type ChartOptions = {
   series: ApexAxisChartSeries;
@@ -76,7 +76,7 @@ export class ChartTimelineComponent implements OnInit {
       try {
         let upd: PositionUpdate = JSON.parse(message.payload.toString())
         upd.objects.forEach(obj => {
-          validateTypeObject(obj)
+          validateTypeAgent(obj)
           this.addNewSeries(obj)
         });
       } catch(e) {
@@ -89,7 +89,7 @@ export class ChartTimelineComponent implements OnInit {
   ngOnInit(): void {
   }
 
-  addNewSeries(obj: Object) {
+  addNewSeries(obj: Agent) {
     // --- Get index of the agent in series
     let name = obj.id
     let idx = this.chartOptions.series.findIndex((s: { name: string; }) => s.name === name) 
@@ -104,7 +104,7 @@ export class ChartTimelineComponent implements OnInit {
     //   this.chartOptions.series[idx]["color"] = markerConf?.circle
     // }
     var markerConf = getMarkerConfig(idx+1) // 0 is root
-    this.chartOptions.series[idx]["color"] = markerConf?.circle
+    this.chartOptions.series[idx]["color"] = markerConf?.color
 
     // --- Add new data
     obj.zoneDescriptors.forEach(zone => {
@@ -116,8 +116,8 @@ export class ChartTimelineComponent implements OnInit {
             new Date(obj.lastPosUpdate).getTime(),
             new Date(obj.lastPosUpdate).getTime() + 1000
           ],
-          "fillColor": markerConf?.circle,
-          "strokeColor": markerConf?.circle
+          "fillColor": markerConf?.color,
+          "strokeColor": markerConf?.color
         }
         this.chartOptions.series[idx]["data"].push(patch)
 
@@ -130,8 +130,8 @@ export class ChartTimelineComponent implements OnInit {
             oldData['y'][0],
             new Date(obj.lastPosUpdate).getTime()
           ],
-          "fillColor": markerConf?.circle,
-          "strokeColor": markerConf?.circle
+          "fillColor": markerConf?.color,
+          "strokeColor": markerConf?.color
         }
         this.chartOptions.series[idx]["data"].push(patch)
       }

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

@@ -6,7 +6,7 @@ import 'leaflet-arrowheads';
 import { IMqttMessage, MqttService } from 'ngx-mqtt';
 
 import { environment, getMarkerConfig} from 'src/environments/environment';
-import {Position, PositionUpdate, RelativePos, WGS84, validateTypePosition, validateTypeObject} from 'src/app/model/base-model';
+import {Position, PositionUpdate, RelativePos, WGS84, validateTypePosition, validateTypeAgent} from 'src/app/model/base-model';
 
 
 @Component({
@@ -46,7 +46,7 @@ export class MapComponent implements OnInit {
         let upd: PositionUpdate = <PositionUpdate>JSON.parse(message.payload.toString())
         
         upd.objects.forEach(obj => {
-          validateTypeObject(obj)
+          validateTypeAgent(obj)
           this.registerPoint(obj.id, obj)
         });
       } catch(e) {
@@ -73,14 +73,15 @@ export class MapComponent implements OnInit {
   registerPoint(key: string, desc: { [key: string]: any }) {
     // --- Leyers for markers
     if (key in this.markOverlays) {
+      console.log(this.markOverlays)
       this.markOverlays[key].clearLayers();
     } else {
       this.markOverlays[key] = L.layerGroup().addTo(<L.Map>this.map)
     }
 
     // --- Info
-    let pos = desc["position"]
     this.agentsInfo[key] = desc
+    let pos = desc["position"]
 
     var props = undefined
     if (desc.extractedAttributes) {
@@ -101,7 +102,7 @@ export class MapComponent implements OnInit {
 
     // empty position
     if (pos==undefined) {
-      console.log("Eroro: empty position.")
+      console.log("Error: empty position.")
       return
     }
 
@@ -109,7 +110,7 @@ export class MapComponent implements OnInit {
 
     // empty point
     if (Object.values(point).every((e)=>{e==undefined})) {
-      console.log("Eroro: empty point.")
+      console.log("Error: empty point.")
       return;
     }
 
@@ -119,17 +120,25 @@ export class MapComponent implements OnInit {
       var globPos = L.latLng([point.latitude, point.longitude]);
     }
  
-    // --- Marker
-    let serialNum = Object.keys(this.markOverlays).length - 1 // because this point already exists
-    console.log(this.markOverlays)
-    console.log("serialNum ", serialNum)
-    var markerConf = getMarkerConfig(serialNum)
+    if (key=="ROOT") {
+      // Root Marker
+      let marker = L.marker(globPos, {
+        icon: L.icon({
+          iconSize: [40, 40],
+          iconAnchor: [21, 25],
+          iconUrl: `assets/marker-ball-pink.png`,
+          className: 'true-position-marker'
+        })
+      }).bindPopup(popup).openPopup();
+      marker.addTo(this.markOverlays[key])
       
-    // if (key in MarkerColorMap) {
-    //   var markerConf = MarkerColorMap[key]
-    // } else {
-    //   var markerConf = MarkerColorMap['Default']
+    } else {
+      // --- Marker config
+      let serialNum = Object.keys(this.markOverlays).indexOf(key)
+      // if (serialNum == 0 && Object.keys(this.markOverlays).length > 1) {
+      //   serialNum = 1
       // }
+      var markerConf = getMarkerConfig(serialNum)
 
       let marker = L.marker(globPos, {
         icon: L.icon({
@@ -145,7 +154,7 @@ export class MapComponent implements OnInit {
 
       // --- Accuracy
       if (pos?.accuracy) {
-      L.circle(globPos, pos.accuracy, { color: markerConf.circle}
+        L.circle(globPos, pos.accuracy, { color: markerConf.color}
         ).addTo(this.markOverlays[key]);
       }
 
@@ -159,10 +168,10 @@ export class MapComponent implements OnInit {
         let globPointOrient = this.ref2root(orient)
 
         // add arrow
-      var arrow = L.polyline([globPos, globPointOrient], {color: 'grey'}).arrowheads(
+        var arrow = L.polyline([globPos, globPointOrient], {color: markerConf.color}).arrowheads(
           {
             fill: true,
-          color: 'grey'
+            color: markerConf.color
           }
         );
         arrow.addTo(this.markOverlays[key])
@@ -170,6 +179,8 @@ export class MapComponent implements OnInit {
       }
     }
   
+  }
+
   // @https://asymmetrik.com/ngx-leaflet-tutorial-angular-cli/
   // --- Layers: Define base layers so we can reference them multiple times
   streetMaps = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {

src/app/components/table/table.component.html

@@ -6,7 +6,7 @@
             <th mat-header-cell *matHeaderCellDef>
                 <mat-icon aria-hidden="false" aria-label="Agent">people</mat-icon> Agent
             </th>
-            <td mat-cell *matCellDef="let element"> {{element.id}} </td>
+            <td mat-cell *matCellDef="let element"><span [ngStyle]="{'color': element.color}">⬤</span> {{element.id}} </td>
         </ng-container>
 
         <!-- Type --> 

src/app/components/table/table.component.ts

 import { Component, OnInit, ViewChild } from '@angular/core';
-import {PositionUpdate, validateTypeObject} from 'src/app/model/base-model';
+import {Agent, PositionUpdate} from 'src/app/model/base-model';
 
 import { IMqttMessage, MqttService } from 'ngx-mqtt';
 import { Subscription } from 'rxjs';
 import { MatTable } from '@angular/material/table';
 
+import { getMarkerConfig} from 'src/environments/environment';
 
 @Component({
   selector: 'app-table',
@@ -39,10 +40,19 @@ export class TableComponent implements OnInit {
         let upd: PositionUpdate = JSON.parse(message.payload.toString())
         // upd.objects.forEach(obj => validateTypeObject(obj));
         this.dataSource.push(...upd.objects);
+
+        let agentNames = [...new Set(this.dataSource.map((agent: any) => agent.id))]
+        this.dataSource.forEach((agent: any)=> {
+          let idx = agentNames.indexOf(agent.id) + 1
+          agent.color = getMarkerConfig(idx).color
+        })
+
         this.table?.renderRows();
       } catch(e) {
           console.log(e)
       }
+
+      // console.log(this.dataSource)
     });
   }
 

src/app/model/base-model.ts

    
 export interface PositionUpdate {
-    objects: Object[]
+    objects: Agent[]
     type: NotificationType
 }
 
-export interface Object {
+export interface Agent {
     id: string
     sensorId: string
     type: ObjectType
@@ -77,9 +77,9 @@ export function validateTypePosition(obj: any) {
     }
 }
   
-export function validateTypeObject(obj: any) {
-    if (!isObject(obj)) {
-        throw new TypeError("Unvalid Object: " + Object.keys(obj))  
+export function validateTypeAgent(obj: any) {
+    if (!isAgent(obj)) {
+        throw new TypeError("Unvalid Agent: " + Object.keys(obj))  
     }
 }
 
@@ -101,7 +101,7 @@ export function isPosition(obj: any): obj is Position {
     && Object.prototype.hasOwnProperty.call(obj, "refSystemId")
 } 
 
-export function isObject(obj: any): obj is Object {
+export function isAgent(obj: any): obj is Agent {
     return "id" in obj
         && "type" in obj
         && "sensorId" in obj

src/environments/environment.ts

@@ -36,26 +36,30 @@ export const MQTTconfig: IMqttServiceOptions = {
 // };
 
 export const MarkerColorList: MarkerColor[]  = [
-  {"marker": "red", "circle": "#d32f2f"},
-  {"marker": "green", "circle": "#008632"},
-  {"marker": "blue", "circle": "#0076EE"},
-  {"marker": "violet", "circle": "#9700ee"},
-  {"marker": "yellow", "circle": "#eee600"},
-  {"marker": "grey", "circle": "#606060"},
+  {"marker": "red", "color": "#d32f2f"},
+  {"marker": "green", "color": "#008632"},
+  {"marker": "blue", "color": "#0076EE"},
+  {"marker": "violet", "color": "#9700ee"},
+  {"marker": "yellow", "color": "#eee600"},
+  {"marker": "grey", "color": "#606060"},
 ]
 
 interface MarkerColor {
   marker: string
-  circle: string
+  color: string 
 }
 
 export function getMarkerConfig(counter: number) {
-  let idx = counter
+
+  if (counter < 0) {
+    counter = 0
+  }
 
   if (MarkerColorList.length <= counter) {
-    idx = counter - MarkerColorList.length
+    counter = counter - MarkerColorList.length
   }
-  return MarkerColorList[idx]
+
+  return MarkerColorList[counter]
 }
 
 /*