dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #8287 from vvlladd28/feaure/map/here/version-3

Browse Source 
API version 3 support has been added to HERE map widget
This commit is contained in:
Igor Kulikov 2023-03-30 12:31:48 +03:00 committed by GitHub
commit f8a1615582
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 70 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
application/src/main/data/json/system/widget_bundles/maps.json
View File

File diff suppressed because one or more lines are too long

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

@ -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'
}
};

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

@ -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);
}

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

@ -27,6 +27,11 @@
<section class="tb-widget-settings" formGroupName="credentials">
<fieldset class="fields-group">
<legend class="group-title" translate>widgets.maps.credentials</legend>
<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">
@ -35,6 +40,13 @@
<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>

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

@ -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,

2
ui-ngx/src/assets/locale/locale.constant-en_US.json
View File

@ -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",