iterative marker color

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

@@ -16,8 +16,8 @@ import {
   ChartComponent 
 } from 'ng-apexcharts';
 
-import { MarkerColorMap } from 'src/environments/environment';
-import {NotificationType, Object, PositionUpdate, validateTypeObject} from 'src/app/model/base-model';
+import { getMarkerConfig } from 'src/environments/environment';
+import { Object, PositionUpdate, validateTypeObject} from 'src/app/model/base-model';
 
 export type ChartOptions = {
   series: ApexAxisChartSeries;
@@ -99,10 +99,12 @@ export class ChartTimelineComponent implements OnInit {
     } 
 
     // --- Marker
-    if (name in MarkerColorMap) {
-      var markerConf = MarkerColorMap[name]
-      this.chartOptions.series[idx]["color"] = markerConf?.circle
-    }
+    // if (name in MarkerColorMap) {
+    //   var markerConf = MarkerColorMap[name]
+    //   this.chartOptions.series[idx]["color"] = markerConf?.circle
+    // }
+    var markerConf = getMarkerConfig(idx+1) // 0 is root
+    this.chartOptions.series[idx]["color"] = markerConf?.circle
 
     // --- Add new data
     obj.zoneDescriptors.forEach(zone => {

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

@@ -5,7 +5,7 @@ import * as L from "leaflet";
 import 'leaflet-arrowheads';
 import { IMqttMessage, MqttService } from 'ngx-mqtt';
 
-import { environment, MarkerColorMap } from 'src/environments/environment';
+import { environment, getMarkerConfig} from 'src/environments/environment';
 import {Position, PositionUpdate, RelativePos, WGS84, validateTypePosition, validateTypeObject} from 'src/app/model/base-model';
 
 
@@ -94,10 +94,6 @@ export class MapComponent implements OnInit {
       props = `<p><h3>${key}</h3></p>`
     }
 
-    // Rotaion
-    let quter = desc.orientation
-
-
     this.addMarker(key, pos, props, desc.extractedAttributes?.theta)
   }
 
@@ -122,13 +118,18 @@ export class MapComponent implements OnInit {
     } else {
       var globPos = L.latLng([point.latitude, point.longitude]);
     }
-
+ 
     // --- Marker
-    if (key in MarkerColorMap) {
-      var markerConf = MarkerColorMap[key]
-    } else {
-      var markerConf = MarkerColorMap['Default']
-    }
+    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 in MarkerColorMap) {
+    //   var markerConf = MarkerColorMap[key]
+    // } else {
+    //   var markerConf = MarkerColorMap['Default']
+    // }
       
     let marker = L.marker(globPos, {
       icon: L.icon({

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

@@ -44,11 +44,38 @@
             </th>
             <td mat-cell *matCellDef="let element">
                 <span *ngFor="let dim of (element.position.point | keyvalue)">
-                    {{dim.key}}: {{dim.value}}
+                    {{dim.key}}: {{dim.value}} <br>
+                </span>
+                <span *ngIf="element?.extractedAttributes">
+                    theta: {{element?.extractedAttributes?.theta}}
                 </span>
             </td>
         </ng-container>
 
+        <!-- Battery -->
+        <ng-container matColumnDef="battery">
+            <th mat-header-cell *matHeaderCellDef>
+                <mat-icon aria-hidden="false" aria-label="battery">battery_5_bar</mat-icon> <br> Battery 
+            </th>
+            <td mat-cell *matCellDef="let element"> {{element?.extractedAttributes?.batteryChargeLevel}}%</td>
+        </ng-container>
+
+        <!-- Items -->
+        <ng-container matColumnDef="loadedItems">
+            <th mat-header-cell *matHeaderCellDef>
+                <mat-icon aria-hidden="false" aria-label="items">feed</mat-icon> Items
+            </th>
+            <td mat-cell *matCellDef="let element"> {{element?.extractedAttributes?.loadedItems}}</td>
+        </ng-container>
+
+        <!-- Errors -->
+        <ng-container matColumnDef="errors">
+            <th mat-header-cell *matHeaderCellDef>
+                <mat-icon aria-hidden="false" aria-label="errors">error</mat-icon> Errors
+            </th>
+            <td mat-cell *matCellDef="let element"> {{element?.extractedAttributes?.errors}}</td>
+        </ng-container>
+
         <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
         <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
 

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

@@ -18,7 +18,7 @@ export class TableComponent implements OnInit {
 
   private subsPosition: Subscription;
 
-  displayedColumns: string[] = ['agent', 'type', 'time', 'zone', 'position'];
+  displayedColumns: string[] = ['agent', 'type', 'time', 'zone', 'position', 'battery', 'loadedItems', 'errors'];
 
 
   // testMessages: PositionUpdate[] = [
@@ -37,7 +37,7 @@ export class TableComponent implements OnInit {
     this.subsPosition = this._mqttService.observe('ipos/client/position').subscribe((message: IMqttMessage) => {
       try {
         let upd: PositionUpdate = JSON.parse(message.payload.toString())
-        upd.objects.forEach(obj => validateTypeObject(obj));
+        // upd.objects.forEach(obj => validateTypeObject(obj));
         this.dataSource.push(...upd.objects);
         this.table?.renderRows();
       } catch(e) {

src/app/model/base-model.ts

@@ -73,13 +73,12 @@ interface ExtAttribute {
 
 export function validateTypePosition(obj: any) {
     if (!isPosition(obj)) {
-        throw new TypeError("Object is not Position")  
+        throw new TypeError("Unvalid Position")  
     }
 }
   
 export function validateTypeObject(obj: any) {
     if (!isObject(obj)) {
-        console.log(obj)
         throw new TypeError("Unvalid Object: " + Object.keys(obj))  
     }
 }

src/environments/environment.ts

@@ -35,20 +35,28 @@ export const MQTTconfig: IMqttServiceOptions = {
 //   path: '/mqtt'
 // };
 
-export const MarkerColorMap: { [key: string]: MarkerColor } = {
-  "ROOT": {"marker": "red", "circle": "#d32f2f"},
-  "Employee1": {"marker": "green", "circle": "#008632"},
-  "Employee2": {"marker": "blue", "circle": "#0076EE"},
-  "Employee3": {"marker": "violet", "circle": "#9700ee"},
-  "Employee4": {"marker": "yellow", "circle": "#eee600"},
-  "Default": {"marker": "grey", "circle": "#606060"},
-}
+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"},
+]
 
 interface MarkerColor {
   marker: string
   circle: string
 }
 
+export function getMarkerConfig(counter: number) {
+  let idx = counter
+
+  if (MarkerColorList.length <= counter) {
+    idx = counter - MarkerColorList.length
+  }
+  return MarkerColorList[idx]
+}
 
 /*
  * For easier debugging in development mode, you can import the following file