@@ -65,4 +70,59 @@
[context]="context">
+
+
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-settings.component.ts
index e2abdee4ff..3b5c57ecbe 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-settings.component.ts
@@ -22,9 +22,20 @@ import {
UntypedFormBuilder,
UntypedFormControl,
UntypedFormGroup,
- Validator
+ Validator,
+ Validators
} from '@angular/forms';
-import { ImageSourceType, MapDataLayerType, MapSetting, MapType } from '@home/components/widget/lib/maps/models/map.models';
+import {
+ defaultImageMapSourceSettings,
+ ImageMapSourceSettings, imageMapSourceSettingsValidator,
+ mapControlPositions,
+ mapControlsPositionTranslationMap,
+ MapDataLayerType,
+ MapSetting,
+ MapType,
+ mapZoomActions,
+ mapZoomActionTranslationMap
+} from '@home/components/widget/lib/maps/models/map.models';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { merge, Observable } from 'rxjs';
import { coerceBoolean } from '@shared/decorators/coercion';
@@ -36,7 +47,7 @@ import {
DataKeyConfigDialogComponent,
DataKeyConfigDialogData
} from '@home/components/widget/lib/settings/common/key/data-key-config-dialog.component';
-import { deepClone } from '@core/utils';
+import { deepClone, mergeDeep } from '@core/utils';
import { MatDialog } from '@angular/material/dialog';
@Component({
@@ -58,6 +69,14 @@ import { MatDialog } from '@angular/material/dialog';
})
export class MapSettingsComponent implements OnInit, ControlValueAccessor, Validator {
+ mapControlPositions = mapControlPositions;
+
+ mapZoomActions = mapZoomActions;
+
+ mapControlsPositionTranslationMap = mapControlsPositionTranslationMap;
+
+ mapZoomActionTranslationMap = mapZoomActionTranslationMap;
+
MapType = MapType;
@Input()
@@ -105,10 +124,7 @@ export class MapSettingsComponent implements OnInit, ControlValueAccessor, Valid
this.mapSettingsFormGroup = this.fb.group({
mapType: [null, []],
layers: [null, []],
- imageSourceType: [null, []],
- imageUrl: [null, []],
- imageEntityAlias: [null, []],
- imageUrlAttribute: [null, []],
+ imageSource: [null, [imageMapSourceSettingsValidator]],
markers: [null, []],
polygons: [null, []],
circles: [null, []],
@@ -118,8 +134,8 @@ export class MapSettingsComponent implements OnInit, ControlValueAccessor, Valid
fitMapBounds: [null, []],
useDefaultCenterPosition: [null, []],
defaultCenterPosition: [null, []],
- defaultZoomLevel: [null, []],
- mapPageSize: [null, []]
+ defaultZoomLevel: [null, [Validators.min(0), Validators.max(20)]],
+ mapPageSize: [null, [Validators.min(1), Validators.required]]
});
this.mapSettingsFormGroup.valueChanges.pipe(
takeUntilDestroyed(this.destroyRef)
@@ -127,12 +143,17 @@ export class MapSettingsComponent implements OnInit, ControlValueAccessor, Valid
this.updateModel();
});
merge(this.mapSettingsFormGroup.get('mapType').valueChanges,
- this.mapSettingsFormGroup.get('imageSourceType').valueChanges
+ this.mapSettingsFormGroup.get('useDefaultCenterPosition').valueChanges
).pipe(
takeUntilDestroyed(this.destroyRef)
).subscribe(() => {
this.updateValidators();
});
+ this.mapSettingsFormGroup.get('mapType').valueChanges.pipe(
+ takeUntilDestroyed(this.destroyRef)
+ ).subscribe((mapType: MapType) => {
+ this.mapTypeChanged(mapType);
+ });
}
registerOnChange(fn: any): void {
@@ -160,7 +181,7 @@ export class MapSettingsComponent implements OnInit, ControlValueAccessor, Valid
this.updateValidators();
}
- public validate(c: UntypedFormControl) {
+ public validate(_c: UntypedFormControl) {
const valid = this.mapSettingsFormGroup.valid;
return valid ? null : {
mapSettings: {
@@ -171,24 +192,34 @@ export class MapSettingsComponent implements OnInit, ControlValueAccessor, Valid
private updateValidators() {
const mapType: MapType = this.mapSettingsFormGroup.get('mapType').value;
- const imageSourceType: ImageSourceType = this.mapSettingsFormGroup.get('imageSourceType').value;
if (mapType === MapType.geoMap) {
this.mapSettingsFormGroup.get('layers').enable({emitEvent: false});
- this.mapSettingsFormGroup.get('imageSourceType').disable({emitEvent: false});
- this.mapSettingsFormGroup.get('imageUrl').disable({emitEvent: false});
- this.mapSettingsFormGroup.get('imageEntityAlias').disable({emitEvent: false});
- this.mapSettingsFormGroup.get('imageUrlAttribute').disable({emitEvent: false});
+ this.mapSettingsFormGroup.get('imageSource').disable({emitEvent: false});
+ this.mapSettingsFormGroup.get('fitMapBounds').enable({emitEvent: false});
+ this.mapSettingsFormGroup.get('useDefaultCenterPosition').enable({emitEvent: false});
+ const useDefaultCenterPosition: boolean = this.mapSettingsFormGroup.get('useDefaultCenterPosition').value;
+ if (useDefaultCenterPosition) {
+ this.mapSettingsFormGroup.get('defaultCenterPosition').enable({emitEvent: false});
+ } else {
+ this.mapSettingsFormGroup.get('defaultCenterPosition').disable({emitEvent: false});
+ }
+ this.mapSettingsFormGroup.get('defaultZoomLevel').enable({emitEvent: false});
} else {
this.mapSettingsFormGroup.get('layers').disable({emitEvent: false});
- this.mapSettingsFormGroup.get('imageSourceType').enable({emitEvent: false});
- if (imageSourceType === ImageSourceType.image) {
- this.mapSettingsFormGroup.get('imageUrl').enable({emitEvent: false});
- this.mapSettingsFormGroup.get('imageEntityAlias').disable({emitEvent: false});
- this.mapSettingsFormGroup.get('imageUrlAttribute').disable({emitEvent: false});
- } else {
- this.mapSettingsFormGroup.get('imageUrl').disable({emitEvent: false});
- this.mapSettingsFormGroup.get('imageEntityAlias').enable({emitEvent: false});
- this.mapSettingsFormGroup.get('imageUrlAttribute').enable({emitEvent: false});
+ this.mapSettingsFormGroup.get('imageSource').enable({emitEvent: false});
+ this.mapSettingsFormGroup.get('fitMapBounds').disable({emitEvent: false});
+ this.mapSettingsFormGroup.get('useDefaultCenterPosition').disable({emitEvent: false});
+ this.mapSettingsFormGroup.get('defaultCenterPosition').disable({emitEvent: false});
+ this.mapSettingsFormGroup.get('defaultZoomLevel').disable({emitEvent: false});
+ }
+ }
+
+ private mapTypeChanged(mapType: MapType): void {
+ if (mapType === MapType.image) {
+ let imageSource: ImageMapSourceSettings = this.mapSettingsFormGroup.get('imageSource').value;
+ if (!imageSource?.sourceType) {
+ imageSource = mergeDeep({} as ImageMapSourceSettings, defaultImageMapSourceSettings);
+ this.mapSettingsFormGroup.get('imageSource').patchValue(imageSource);
}
}
}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-settings-common.module.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-settings-common.module.ts
index c31bddd8f1..8dd52cb1fe 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-settings-common.module.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-settings-common.module.ts
@@ -230,6 +230,9 @@ import { MapDataSourcesComponent } from '@home/components/widget/lib/settings/co
import {
MapDataSourceRowComponent
} from '@home/components/widget/lib/settings/common/map/map-data-source-row.component';
+import {
+ ImageMapSourceSettingsComponent
+} from '@home/components/widget/lib/settings/common/map/image-map-source-settings.component';
@NgModule({
declarations: [
@@ -303,6 +306,7 @@ import {
MapLayerSettingsPanelComponent,
MapLayerRowComponent,
MapLayersComponent,
+ ImageMapSourceSettingsComponent,
DataLayerColorSettingsComponent,
DataLayerColorSettingsPanelComponent,
DataLayerPatternSettingsComponent,
diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json
index e96d92d6b0..ad986ea403 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -7548,6 +7548,33 @@
"map": "Map",
"image": "Image"
},
+ "image": {
+ "image-source": "Image source",
+ "image-source-image": "Image",
+ "image-source-entity-key": "Entity key",
+ "source-entity-alias": "Source entity alias",
+ "image-url-key": "Image URL key",
+ "image-url-key-required": "Image URL key is required"
+ },
+ "control": {
+ "map-controls": "Map controls",
+ "position": "Position",
+ "position-topleft": "Top-left",
+ "position-topright": "Top-right",
+ "position-bottomleft": "Bottom-left",
+ "position-bottomright": "Bottom-right",
+ "zoom-actions": "Zoom actions",
+ "zoom-scroll": "Scroll",
+ "zoom-double-click": "Double click",
+ "zoom-control-buttons": "Control buttons"
+ },
+ "common": {
+ "common-map-settings": "Common map settings",
+ "fit-map-bounds": "Fit map bounds to cover all markers",
+ "default-map-center-position": "Default map center position",
+ "default-map-zoom-level": "Default map zoom level",
+ "entities-limit": "Limit of entities to load"
+ },
"layer": {
"label": "Label",
"layer": "Layer",
@@ -7667,6 +7694,8 @@
"marker-offset": "Marker offset",
"offset-horizontal": "Horizontal",
"offset-vertical": "Vertical",
+ "position-conversion": "Position conversion",
+ "position-conversion-function": "Position conversion function, should return x,y coordinates as double from 0 to 1 each",
"clustering": {
"use-map-markers-clustering": "Use map markers clustering",
"zoom-on-cluster-click": "Zoom when clicking on a cluster",