UI: API version 3 support has been added to HERE map widget

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

@@ -133,16 +133,20 @@ export const hereMapProviderTranslationMap = new Map<HereMapProvider, string>(
 export interface HereMapProviderSettings {
   mapProviderHere: HereMapProvider;
   credentials: {
+    useV3: boolean;
     app_id: string;
     app_code: string;
+    apiKey: string;
   };
 }
 
 export const defaultHereMapProviderSettings: HereMapProviderSettings = {
   mapProviderHere: HereMapProvider.hereNormalDay,
   credentials: {
+    useV3: true,
     app_id: 'AhM6TzD9ThyK78CT3ptx',
-    app_code: 'p6NPiITB3Vv0GMUFnkLOOg'
+    app_code: 'p6NPiITB3Vv0GMUFnkLOOg',
+    apiKey: 'kVXykxAfZ6LS4EbCTO02soFVfjA7HoBzNVVH9u7nzoE'
   }
 };
 

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

@@ -18,6 +18,7 @@ import L from 'leaflet';
 import LeafletMap from '../leaflet-map';
 import { DEFAULT_ZOOM_LEVEL, WidgetUnitedMapSettings } from '../map-models';
 import { WidgetContext } from '@home/models/widget-component.models';
+import { isDefinedAndNotNull } from '@core/utils';
 
 export class HEREMap extends LeafletMap {
     constructor(ctx: WidgetContext, $container, options: WidgetUnitedMapSettings) {
@@ -26,7 +27,11 @@ export class HEREMap extends LeafletMap {
           doubleClickZoom: !this.options.disableDoubleClickZooming,
           zoomControl: !this.options.disableZoomControl
         }).setView(options?.parsedDefaultCenterPosition, options?.defaultZoomLevel || DEFAULT_ZOOM_LEVEL);
-        const tileLayer = (L.tileLayer as any).provider(options.mapProviderHere || 'HERE.normalDay', options.credentials);
+        let provider = options.mapProviderHere || 'HERE.normalDay';
+        if (options.credentials.useV3 && isDefinedAndNotNull(options.credentials.apiKey)) {
+          provider = options.mapProviderHere?.replace('HERE', 'HEREv3') || 'HEREv3.normalDay';
+        }
+        const tileLayer = (L.tileLayer as any).provider(provider, options.credentials);
         tileLayer.addTo(map);
         super.setMap(map);
     }

ui-ngx/src/app/modules/home/components/widget/lib/settings/map/here-map-provider-settings.component.html

@@ -27,14 +27,26 @@
   <section class="tb-widget-settings" formGroupName="credentials">
     <fieldset class="fields-group">
       <legend class="group-title" translate>widgets.maps.credentials</legend>
-      <mat-form-field fxFlex class="mat-block">
-        <mat-label translate>widgets.maps.here-app-id</mat-label>
-        <input required matInput formControlName="app_id">
-      </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
-        <mat-label translate>widgets.maps.here-app-code</mat-label>
-        <input required matInput formControlName="app_code">
-      </mat-form-field>
+      <mat-slide-toggle formControlName="useV3" style="margin-bottom: 16px;">
+        {{ 'widgets.maps.here-use-new-version-api-3' | translate }}
+      </mat-slide-toggle>
+      <div *ngIf="!providerSettingsFormGroup.get('credentials.useV3').value; else apiKey" fxLayout="row" fxLayoutGap="8px"
+        fxLayout.xs="column" fxLayoutGap.xs="0">
+        <mat-form-field fxFlex class="mat-block">
+          <mat-label translate>widgets.maps.here-app-id</mat-label>
+          <input required matInput formControlName="app_id">
+        </mat-form-field>
+        <mat-form-field fxFlex class="mat-block">
+          <mat-label translate>widgets.maps.here-app-code</mat-label>
+          <input required matInput formControlName="app_code">
+        </mat-form-field>
+      </div>
+      <ng-template #apiKey>
+        <mat-form-field fxFlex class="mat-block">
+          <mat-label translate>widgets.maps.here-api-key</mat-label>
+          <input required matInput formControlName="apiKey">
+        </mat-form-field>
+      </ng-template>
     </fieldset>
   </section>
 </section>

ui-ngx/src/app/modules/home/components/widget/lib/settings/map/here-map-provider-settings.component.ts

@@ -17,9 +17,9 @@
 import { Component, forwardRef, Input, OnInit } from '@angular/core';
 import {
   ControlValueAccessor,
-  UntypedFormBuilder,
-  UntypedFormControl,
-  UntypedFormGroup,
+  FormBuilder,
+  FormControl,
+  FormGroup,
   NG_VALIDATORS,
   NG_VALUE_ACCESSOR,
   Validator,
@@ -34,6 +34,7 @@ import {
   HereMapProviderSettings,
   hereMapProviderTranslationMap
 } from '@home/components/widget/lib/maps/map-models';
+import { isDefinedAndNotNull } from '@core/utils';
 
 @Component({
   selector: 'tb-here-map-provider-settings',
@@ -61,7 +62,7 @@ export class HereMapProviderSettingsComponent extends PageComponent implements O
 
   private propagateChange = null;
 
-  public providerSettingsFormGroup: UntypedFormGroup;
+  public providerSettingsFormGroup: FormGroup;
 
   hereMapProviders = Object.values(HereMapProvider);
 
@@ -69,7 +70,7 @@ export class HereMapProviderSettingsComponent extends PageComponent implements O
 
   constructor(protected store: Store<AppState>,
               private translate: TranslateService,
-              private fb: UntypedFormBuilder) {
+              private fb: FormBuilder) {
     super(store);
   }
 
@@ -77,10 +78,23 @@ export class HereMapProviderSettingsComponent extends PageComponent implements O
     this.providerSettingsFormGroup = this.fb.group({
       mapProviderHere: [null, [Validators.required]],
       credentials: this.fb.group({
+        useV3: [true],
         app_id: [null, [Validators.required]],
-        app_code: [null, [Validators.required]]
+        app_code: [null, [Validators.required]],
+        apiKey: [null, [Validators.required]]
       })
     });
+    this.providerSettingsFormGroup.get('credentials.useV3').valueChanges.subscribe(value => {
+      if (value) {
+        this.providerSettingsFormGroup.get('credentials.apiKey').enable({emitEvent: false});
+        this.providerSettingsFormGroup.get('credentials.app_id').disable({emitEvent: false});
+        this.providerSettingsFormGroup.get('credentials.app_code').disable({emitEvent: false});
+      } else {
+        this.providerSettingsFormGroup.get('credentials.apiKey').disable({emitEvent: false});
+        this.providerSettingsFormGroup.get('credentials.app_id').enable({emitEvent: false});
+        this.providerSettingsFormGroup.get('credentials.app_code').enable({emitEvent: false});
+      }
+    });
     this.providerSettingsFormGroup.valueChanges.subscribe(() => {
       this.updateModel();
     });
@@ -99,17 +113,24 @@ export class HereMapProviderSettingsComponent extends PageComponent implements O
       this.providerSettingsFormGroup.disable({emitEvent: false});
     } else {
       this.providerSettingsFormGroup.enable({emitEvent: false});
+      this.providerSettingsFormGroup.get('credentials.useV3').updateValueAndValidity({onlySelf: true});
     }
   }
 
   writeValue(value: HereMapProviderSettings): void {
+    if (!isDefinedAndNotNull(value.credentials.useV3)) {
+      if (isDefinedAndNotNull(value.credentials.app_id) && isDefinedAndNotNull(value.credentials.app_code)) {
+        value.credentials.useV3 = false;
+      }
+    }
     this.modelValue = value;
     this.providerSettingsFormGroup.patchValue(
       value, {emitEvent: false}
     );
+    this.providerSettingsFormGroup.get('credentials.useV3').updateValueAndValidity({onlySelf: true});
   }
 
-  public validate(c: UntypedFormControl) {
+  public validate(c: FormControl) {
     return this.providerSettingsFormGroup.valid ? null : {
       hereMapProviderSettings: {
         valid: false,

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

@@ -4818,6 +4818,8 @@
             "credentials": "Credentials",
             "here-app-id": "HERE app id",
             "here-app-code": "HERE app code",
+            "here-api-key": "HERE API key",
+            "here-use-new-version-api-3": "Use API version 3",
             "tencent-maps-api-key": "Tencent Maps API Key",
             "tencent-map-type-roadmap": "Roadmap",
             "tencent-map-type-satelite": "Satellite",