UI: Map - add attribute scope setting for persisting location.

ui-ngx/src/app/modules/home/components/widget/lib/maps/data-layer/circles-data-layer.ts

@@ -208,7 +208,7 @@ export class TbCirclesDataLayer extends TbShapesDataLayer<CirclesDataLayerSettin
         value: converted
       }
     ];
-    return this.map.saveItemData(data.$datasource, circleData).pipe(
+    return this.map.saveItemData(data.$datasource, circleData, this.settings.edit?.attributeScope).pipe(
       map(() => converted)
     );
   }

ui-ngx/src/app/modules/home/components/widget/lib/maps/data-layer/markers-data-layer.ts

@@ -621,7 +621,7 @@ export class TbMarkersDataLayer extends TbLatestMapDataLayer<MarkersDataLayerSet
         value: converted.y
       }
     ];
-    return this.map.saveItemData(data.$datasource, locationData).pipe(
+    return this.map.saveItemData(data.$datasource, locationData, this.settings.edit?.attributeScope).pipe(
       map(() => converted)
     );
   }

ui-ngx/src/app/modules/home/components/widget/lib/maps/data-layer/polygons-data-layer.ts

@@ -405,7 +405,7 @@ export class TbPolygonsDataLayer extends TbShapesDataLayer<PolygonsDataLayerSett
         value: converted
       }
     ];
-    return this.map.saveItemData(data.$datasource, polygonData).pipe(
+    return this.map.saveItemData(data.$datasource, polygonData, this.settings.edit?.attributeScope).pipe(
       map(() => converted)
     );
   }

ui-ngx/src/app/modules/home/components/widget/lib/maps/map.ts

@@ -72,6 +72,7 @@ import { ComponentRef } from '@angular/core';
 import { TbTripsDataLayer } from '@home/components/widget/lib/maps/data-layer/trips-data-layer';
 import { CompiledTbFunction } from '@shared/models/js-function.models';
 import { TbMapDataLayer } from '@home/components/widget/lib/maps/data-layer/map-data-layer';
+import { EntityType } from '@shared/models/entity-type.models';
 import ITooltipsterInstance = JQueryTooltipster.ITooltipsterInstance;
 import TooltipPositioningSide = JQueryTooltipster.TooltipPositioningSide;
 
@@ -1099,7 +1100,7 @@ export abstract class TbMap<S extends BaseMapSettings> {
     return this.dragMode;
   }
 
-  public saveItemData(datasource: TbMapDatasource, data: DataKeyValuePair[]): Observable<any> {
+  public saveItemData(datasource: TbMapDatasource, data: DataKeyValuePair[], attributeScope: AttributeScope): Observable<any> {
     const attributeService = this.ctx.$injector.get(AttributeService);
     const attributes: AttributeData[] = [];
     const timeseries: AttributeData[] = [];
@@ -1107,6 +1108,10 @@ export abstract class TbMap<S extends BaseMapSettings> {
       entityType: datasource.entityType,
       id: datasource.entityId
     };
+
+    const targetAttributeScope =
+      entityId.entityType === EntityType.DEVICE && !!attributeScope ? attributeScope : AttributeScope.SERVER_SCOPE;
+
     data.forEach(pair => {
       const key = pair.dataKey;
       if (key.type === DataKeyType.attribute) {
@@ -1132,7 +1137,7 @@ export abstract class TbMap<S extends BaseMapSettings> {
     if (attributes.length) {
       observables.push(attributeService.saveEntityAttributes(
         entityId,
-        AttributeScope.SERVER_SCOPE,
+        targetAttributeScope,
         attributes
       ));
     }

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-layer-dialog.component.html

@@ -411,6 +411,17 @@
           </mat-chip-option>
         </mat-chip-listbox>
       </div>
+      <div *ngIf="showEditAttributeScope" class="tb-form-row space-between column-lt-md">
+        <div translate>widgets.maps.data-layer.persist-location-attribute-scope</div>
+        <tb-toggle-select formControlName="attributeScope" appearance="fill">
+          <tb-toggle-option [value]="AttributeScope.SERVER_SCOPE">
+            {{ telemetryTypeTranslationsShort.get(AttributeScope.SERVER_SCOPE) | translate }}
+          </tb-toggle-option>
+          <tb-toggle-option [value]="AttributeScope.SHARED_SCOPE">
+            {{ telemetryTypeTranslationsShort.get(AttributeScope.SHARED_SCOPE) | translate }}
+          </tb-toggle-option>
+        </tb-toggle-select>
+      </div>
       <div class="tb-form-row">
         <mat-slide-toggle class="mat-slide" formControlName="snappable">
           {{ 'widgets.maps.data-layer.enable-snapping' | translate }}

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-layer-dialog.component.ts

@@ -26,9 +26,12 @@ import {
   MapDataLayerType,
   MapType,
   MarkersDataLayerSettings,
-  MarkerType, pathDecoratorSymbols, pathDecoratorSymbolTranslationMap,
+  MarkerType,
+  pathDecoratorSymbols,
+  pathDecoratorSymbolTranslationMap,
   PolygonsDataLayerSettings,
-  ShapeDataLayerSettings, TripsDataLayerSettings
+  ShapeDataLayerSettings,
+  TripsDataLayerSettings
 } from '@shared/models/widget/maps/map.models';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
@@ -36,7 +39,7 @@ import { Router } from '@angular/router';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { FormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { DataKey, DatasourceType, datasourceTypeTranslationMap, widgetType } from '@shared/models/widget.models';
-import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
+import { AttributeScope, DataKeyType, telemetryTypeTranslationsShort } from '@shared/models/telemetry/telemetry.models';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { EntityType } from '@shared/models/entity-type.models';
 import { MapSettingsContext } from '@home/components/widget/lib/settings/common/map/map-settings.component.models';
@@ -67,6 +70,9 @@ export class MapDataLayerDialogComponent extends DialogComponent<MapDataLayerDia
 
   DataKeyType = DataKeyType;
 
+  AttributeScope = AttributeScope;
+  telemetryTypeTranslationsShort = telemetryTypeTranslationsShort;
+
   widgetType = widgetType;
 
   MarkerType = MarkerType;
@@ -124,6 +130,31 @@ export class MapDataLayerDialogComponent extends DialogComponent<MapDataLayerDia
     }
   }
 
+  get showEditAttributeScope(): boolean {
+    if (this.dataLayerType !== 'trips') {
+      const editEnabledActions: DataLayerEditAction[] =
+        this.dataLayerFormGroup.get('edit').get('enabledActions').value;
+      if (editEnabledActions && editEnabledActions.length) {
+          switch (this.dataLayerType) {
+            case 'markers':
+              const xKey: DataKey = this.dataLayerFormGroup.get('xKey').value;
+              const yKey: DataKey = this.dataLayerFormGroup.get('yKey').value;
+              return (xKey?.type === DataKeyType.attribute || yKey?.type === DataKeyType.attribute);
+            case 'polygons':
+              const polygonKey: DataKey = this.dataLayerFormGroup.get('polygonKey').value;
+              return polygonKey?.type === DataKeyType.attribute;
+            case 'circles':
+              const circleKey: DataKey = this.dataLayerFormGroup.get('circleKey').value;
+              return circleKey?.type === DataKeyType.attribute;
+          }
+      } else {
+        return false;
+      }
+    } else {
+      return false;
+    }
+  }
+
   constructor(protected store: Store<AppState>,
               protected router: Router,
               @Inject(MAT_DIALOG_DATA) public data: MapDataLayerDialogData,
@@ -158,6 +189,7 @@ export class MapDataLayerDialogComponent extends DialogComponent<MapDataLayerDia
     if (this.dataLayerType !== 'trips') {
       this.dataLayerFormGroup.addControl('edit', this.fb.group({
         enabledActions: [this.settings.edit?.enabledActions, []],
+        attributeScope: [this.settings.edit?.attributeScope, []],
         snappable: [this.settings.edit?.snappable, []]
       }));
     }
@@ -237,7 +269,7 @@ export class MapDataLayerDialogComponent extends DialogComponent<MapDataLayerDia
         this.dataLayerFormGroup.addControl('strokeWeight', this.fb.control(shapeDataLayer.strokeWeight, [Validators.required, Validators.min(0)]));
         if (this.dataLayerType === 'polygons') {
           this.dialogTitle = 'widgets.maps.data-layer.polygon.polygon-configuration';
-          this.dataLayerEditTitle = 'widgets.maps.data-layer.marker.edit';
+          this.dataLayerEditTitle = 'widgets.maps.data-layer.polygon.edit';
           const polygonsDataLayer = this.settings as PolygonsDataLayerSettings;
           this.dataLayerFormGroup.addControl('polygonKey', this.fb.control(polygonsDataLayer.polygonKey, Validators.required));
         } else {

ui-ngx/src/app/shared/models/widget/maps/map.models.ts

@@ -22,7 +22,7 @@ import {
   WidgetAction,
   WidgetActionType
 } from '@shared/models/widget.models';
-import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
+import { AttributeScope, DataKeyType } from '@shared/models/telemetry/telemetry.models';
 import {
   guid,
   hashCode,
@@ -127,6 +127,7 @@ export const dataLayerEditActionTranslationMap = new Map<DataLayerEditAction, st
 
 export interface DataLayerEditSettings {
   enabledActions: DataLayerEditAction[];
+  attributeScope: AttributeScope;
   snappable: boolean;
 }
 
@@ -161,6 +162,7 @@ export const defaultBaseDataLayerSettings = (mapType: MapType): Partial<MapDataL
   },
   edit: {
     enabledActions: [],
+    attributeScope: AttributeScope.SERVER_SCOPE,
     snappable: false
   }
 })

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -7842,6 +7842,7 @@
                 "action-move": "Move",
                 "action-remove": "Remove",
                 "edit-instruments": "Instruments",
+                "persist-location-attribute-scope": "Scope of the attribute to persist location",
                 "enable-snapping": "Enable snapping to other vertices for precision drawing",
                 "drag-drop-mode": "Drag-drop mode",
                 "trip": {