From af0cd5058e38a2425ed2f252700375c6f6385fb6 Mon Sep 17 00:00:00 2001 From: Adsumus Date: Wed, 6 May 2020 09:33:43 +0300 Subject: [PATCH] WIP on trip-animation settings --- .../components/widget/lib/maps/map-models.ts | 95 +++- .../widget/lib/maps/map-widget.interface.ts | 2 +- .../components/widget/lib/maps/map-widget2.ts | 100 +--- .../components/widget/lib/maps/polygon.ts | 9 +- .../components/widget/lib/maps/schemes.ts | 489 +++++++++--------- .../trip-animation.component.ts | 17 +- 6 files changed, 361 insertions(+), 351 deletions(-) diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts index 523f078bc7..3532514a56 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts @@ -15,13 +15,19 @@ /// import { LatLngTuple } from 'leaflet'; -import { Datasource } from '@app/shared/models/widget.models'; +import { Datasource, JsonSettingsSchema } from '@app/shared/models/widget.models'; +import { Type } from '@angular/core'; +import LeafletMap from './leaflet-map'; +import { OpenStreetMap, TencentMap, GoogleMap, HEREMap, ImageMap } from './providers'; +import { + openstreetMapSettingsSchema, tencentMapSettingsSchema, + googleMapSettingsSchema, hereMapSettingsSchema, imageMapSettingsSchema +} from './schemes'; export type GenericFunction = (data: FormattedData, dsData: FormattedData[], dsIndex: number) => string; export type MarkerImageFunction = (data: FormattedData, dsData: FormattedData[], dsIndex: number) => string; export type MapSettings = { - polygonKeyName: any; draggableMarker: boolean; initCallback?: () => any; posFunction: (origXPos, origYPos) => { x, y }; @@ -106,7 +112,8 @@ export interface FormattedData { export type PolygonSettings = { showPolygon: boolean; - showTooltip: any; + polygonKeyName: string; + polKeyName: string;// deprecated polygonStrokeOpacity: number; polygonOpacity: number; polygonStrokeWeight: number; @@ -114,12 +121,12 @@ export type PolygonSettings = { polygonColor: string; showPolygonTooltip: boolean; autocloseTooltip: boolean; - tooltipFunction: GenericFunction; showTooltipAction: string; tooltipAction: { [name: string]: actionsHandler }; - tooltipPattern: string; - useTooltipFunction: boolean; + polygonTooltipPattern: string; + usePolygonTooltipFunction: boolean; polygonClick: { [name: string]: actionsHandler }; + polygonTooltipFunction: GenericFunction; polygonColorFunction?: GenericFunction; } @@ -155,3 +162,79 @@ export interface HistorySelectSettings { export type actionsHandler = ($event: Event, datasource: Datasource) => void; export type UnitedMapSettings = MapSettings & PolygonSettings & MarkerSettings & PolylineSettings; + +interface IProvider { + MapClass: Type, + schema: JsonSettingsSchema, + name: string +} + +export const providerSets: { [key: string]: IProvider } = { + 'openstreet-map': { + MapClass: OpenStreetMap, + schema: openstreetMapSettingsSchema, + name: 'openstreet-map', + }, + 'tencent-map': { + MapClass: TencentMap, + schema: tencentMapSettingsSchema, + name: 'tencent-map' + }, + 'google-map': { + MapClass: GoogleMap, + schema: googleMapSettingsSchema, + name: 'google-map' + }, + here: { + MapClass: HEREMap, + schema: hereMapSettingsSchema, + name: 'here' + }, + 'image-map': { + MapClass: ImageMap, + schema: imageMapSettingsSchema, + name: 'image-map' + } +}; + +export const defaultSettings: any = { + xPosKeyName: 'xPos', + yPosKeyName: 'yPos', + markerOffsetX: 0.5, + markerOffsetY: 1, + latKeyName: 'latitude', + lngKeyName: 'longitude', + polygonKeyName: 'coordinates', + showLabel: false, + label: '${entityName}', + showTooltip: false, + useDefaultCenterPosition: false, + showTooltipAction: 'click', + autocloseTooltip: false, + showPolygon: false, + labelColor: '#000000', + color: '#FE7569', + polygonColor: '#0000ff', + polygonStrokeColor: '#fe0001', + polygonOpacity: 0.5, + polygonStrokeOpacity: 1, + polygonStrokeWeight: 1, + useLabelFunction: false, + markerImages: [], + strokeWeight: 2, + strokeOpacity: 1.0, + initCallback: () => { }, + defaultZoomLevel: 8, + disableScrollZooming: false, + minZoomLevel: 16, + credentials: '', + markerClusteringSetting: null, + draggableMarker: false, + fitMapBounds: true +}; + +export const hereProviders = [ + 'HERE.normalDay', + 'HERE.normalNight', + 'HERE.hybridDay', + 'HERE.terrainDay'] diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget.interface.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget.interface.ts index 9900d98e0b..be618128dd 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget.interface.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget.interface.ts @@ -26,7 +26,7 @@ export interface MapWidgetInterface { export interface MapWidgetStaticInterface { settingsSchema(mapProvider?: MapProviders, drawRoutes?: boolean): JsonSettingsSchema; - getProvidersSchema(mapProvider?: MapProviders): JsonSettingsSchema + getProvidersSchema(mapProvider?: MapProviders, ignoreImageMap?: boolean): JsonSettingsSchema dataKeySettingsSchema(): object; actionSources(): object; } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts index 3f4c4ab3f4..5d38e7f5bc 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts @@ -14,23 +14,17 @@ /// limitations under the License. /// -import { MapProviders, UnitedMapSettings } from './map-models'; +import { MapProviders, UnitedMapSettings, providerSets, hereProviders, defaultSettings } from './map-models'; import LeafletMap from './leaflet-map'; import { - openstreetMapSettingsSchema, - googleMapSettingsSchema, - imageMapSettingsSchema, - tencentMapSettingsSchema, commonMapSettingsSchema, routeMapSettingsSchema, markerClusteringSettingsSchema, markerClusteringSettingsSchemaLeaflet, - hereMapSettingsSchema, mapProviderSchema, mapPolygonSchema } from './schemes'; import { MapWidgetStaticInterface, MapWidgetInterface } from './map-widget.interface'; -import { OpenStreetMap, TencentMap, GoogleMap, HEREMap, ImageMap } from './providers'; import { initSchema, addToSchema, mergeSchemes, addCondition, addGroupInfo } from '@core/schema-utils'; import { of, Subject } from 'rxjs'; import { WidgetContext } from '@app/modules/home/models/widget-component.models'; @@ -39,7 +33,6 @@ import { JsonSettingsSchema, WidgetActionDescriptor, DatasourceType, widgetType, import { EntityId } from '@shared/models/id/entity-id'; import { AttributeScope, DataKeyType, LatestTelemetry } from '@shared/models/telemetry/telemetry.models'; import { AttributeService } from '@core/http/attribute.service'; -import { Type } from '@angular/core'; import { TranslateService } from '@ngx-translate/core'; import { UtilsService } from '@core/services/utils.service'; @@ -85,11 +78,19 @@ export class MapWidgetController implements MapWidgetInterface { return {}; } - public static getProvidersSchema(mapProvider: MapProviders) { - mapProviderSchema.schema.properties.provider.default = mapProvider; - return mergeSchemes([mapProviderSchema, + public static getProvidersSchema(mapProvider: MapProviders, ignoreImageMap = false) { + if (mapProvider) + mapProviderSchema.schema.properties.provider.default = mapProvider; + const providerSchema = mapProviderSchema; + if (ignoreImageMap) { + providerSchema.form[0].items = providerSchema.form[0]?.items.filter(item => item.value !== 'image-map'); + } + return mergeSchemes([providerSchema, ...Object.keys(providerSets)?.map( - (key: string) => { const setting = providerSets[key]; return addCondition(setting?.schema, `model.provider === '${setting.name}'`) })]); + (key: string) => { + const setting = providerSets[key]; + return addCondition(setting?.schema, `model.provider === '${setting.name}'`); + })]); } public static settingsSchema(mapProvider: MapProviders, drawRoutes: boolean): JsonSettingsSchema { @@ -218,6 +219,7 @@ export class MapWidgetController implements MapWidgetInterface { polygonColorFunction: parseFunction(settings.polygonColorFunction, functionParams), markerImageFunction: parseFunction(settings.markerImageFunction, ['data', 'images', 'dsData', 'dsIndex']), labelColor: this.ctx.widgetConfig.color, + polygonKeyName: settings.polKeyName ? settings.polKeyName : settings.polygonKeyName, tooltipPattern: settings.tooltipPattern || '${entityName}

Latitude: ${' + settings.latKeyName + ':7}
Longitude: ${' + settings.lngKeyName + ':7}', @@ -295,78 +297,4 @@ export class MapWidgetController implements MapWidgetInterface { export let TbMapWidgetV2: MapWidgetStaticInterface = MapWidgetController; -interface IProvider { - MapClass: Type, - schema: JsonSettingsSchema, - name: string -} - -export const providerSets: { [key: string]: IProvider } = { - 'openstreet-map': { - MapClass: OpenStreetMap, - schema: openstreetMapSettingsSchema, - name: 'openstreet-map', - }, - 'tencent-map': { - MapClass: TencentMap, - schema: tencentMapSettingsSchema, - name: 'tencent-map' - }, - 'google-map': { - MapClass: GoogleMap, - schema: googleMapSettingsSchema, - name: 'google-map' - }, - here: { - MapClass: HEREMap, - schema: hereMapSettingsSchema, - name: 'here' - }, - 'image-map': { - MapClass: ImageMap, - schema: imageMapSettingsSchema, - name: 'image-map' - } -}; - -export const defaultSettings: any = { - xPosKeyName: 'xPos', - yPosKeyName: 'yPos', - markerOffsetX: 0.5, - markerOffsetY: 1, - latKeyName: 'latitude', - lngKeyName: 'longitude', - polygonKeyName: 'coordinates', - showLabel: false, - label: '${entityName}', - showTooltip: false, - useDefaultCenterPosition: false, - showTooltipAction: 'click', - autocloseTooltip: false, - showPolygon: false, - labelColor: '#000000', - color: '#FE7569', - polygonColor: '#0000ff', - polygonStrokeColor: '#fe0001', - polygonOpacity: 0.5, - polygonStrokeOpacity: 1, - polygonStrokeWeight: 1, - useLabelFunction: false, - markerImages: [], - strokeWeight: 2, - strokeOpacity: 1.0, - initCallback: () => { }, - defaultZoomLevel: 8, - disableScrollZooming: false, - minZoomLevel: 16, - credentials: '', - markerClusteringSetting: null, - draggableMarker: false, - fitMapBounds: true -}; -export const hereProviders = [ - 'HERE.normalDay', - 'HERE.normalNight', - 'HERE.hybridDay', - 'HERE.terrainDay'] diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/polygon.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/polygon.ts index 4f1fc9dd72..dc6b699dd3 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/polygon.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/polygon.ts @@ -53,8 +53,9 @@ export class Polygon { } updateTooltip(data: DatasourceData) { - const pattern = this.settings.useTooltipFunction ? - safeExecute(this.settings.tooltipFunction, [this.data, this.dataSources, this.data.dsIndex]) : this.settings.tooltipPattern; + const pattern = this.settings.usePolygonTooltipFunction ? + safeExecute(this.settings.polygonTooltipFunction, [this.data, this.dataSources, this.data.dsIndex]) : + this.settings.polygonTooltipPattern; this.tooltip.setContent(parseWithTranslation.parseTemplate(pattern, data, true)); } @@ -72,9 +73,11 @@ export class Polygon { } updatePolygonColor(settings) { + const color = settings.usePolygonColorFunction ? + safeExecute(settings.polygoncolorFunction, [this.data, this.dataSources, this.data.dsIndex]) : settings.polygonColor; const style: L.PathOptions = { fill: true, - fillColor: settings.polygonColor, + fillColor: color, color: settings.polygonStrokeColor, weight: settings.polygonStrokeWeight, fillOpacity: settings.polygonOpacity, diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/schemes.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/schemes.ts index 5008758e69..2b6546f26b 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/schemes.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/schemes.ts @@ -482,6 +482,20 @@ export const mapPolygonSchema = type: 'boolean', default: false }, + polygonTooltipPattern: { + title: 'Tooltip (for ex. \'Text ${keyName} units.\' or Link text\')', + type: 'string', + default: '${entityName}

TimeStamp: ${ts:7}' + }, + usePolygonTooltipFunction: { + title: 'Use polygon tooltip function', + type: 'boolean', + default: false + }, + polygonTooltipFunction: { + title: 'Polygon tooltip function: f(data, dsData, dsIndex)', + type: 'string' + }, usePolygonColorFunction: { title: 'Use polygon color function', type: 'boolean', @@ -506,7 +520,15 @@ export const mapPolygonSchema = key: 'polygonStrokeColor', type: 'color' }, - 'polygonStrokeOpacity', 'polygonStrokeWeight', 'usePolygonColorFunction', 'showPolygonTooltip', + 'polygonStrokeOpacity', 'polygonStrokeWeight', 'showPolygonTooltip', + { + key: 'polygonTooltipPattern', + type: 'textarea' + }, 'usePolygonTooltipFunction', { + key: 'polygonTooltipFunction', + type: 'javascript' + }, + 'usePolygonColorFunction', { key: 'polygonColorFunction', type: 'javascript' @@ -833,6 +855,195 @@ export const imageMapSettingsSchema = ] }; +export const pathSchema = +{ + schema: { + title: 'Trip Animation Path Configuration', + type: 'object', + properties: { + color: { + title: 'Path color', + type: 'string' + }, + strokeWeight: { + title: 'Stroke weight', + type: 'number', + default: 2 + }, + strokeOpacity: { + title: 'Stroke opacity', + type: 'number', + default: 1 + }, + useColorFunction: { + title: 'Use path color function', + type: 'boolean', + default: false + }, + colorFunction: { + title: 'Path color function: f(data, dsData, dsIndex)', + type: 'string' + }, + usePolylineDecorator: { + title: 'Use path decorator', + type: 'boolean', + default: false + }, + decoratorSymbol: { + title: 'Decorator symbol', + type: 'string', + default: 'arrowHead' + }, + decoratorSymbolSize: { + title: 'Decorator symbol size (px)', + type: 'number', + default: 10 + }, + useDecoratorCustomColor: { + title: 'Use path decorator custom color', + type: 'boolean', + default: false + }, + decoratorCustomColor: { + title: 'Decorator custom color', + type: 'string', + default: '#000' + }, + decoratorOffset: { + title: 'Decorator offset', + type: 'string', + default: '20px' + }, + endDecoratorOffset: { + title: 'End decorator offset', + type: 'string', + default: '20px' + }, + decoratorRepeat: { + title: 'Decorator repeat', + type: 'string', + default: '20px' + }, + showPoints: { + title: 'Show points', + type: 'boolean', + default: false + }, + pointColor: { + title: 'Point color', + type: 'string' + }, + pointSize: { + title: 'Point size (px)', + type: 'number', + default: 10 + }, + usePointAsAnchor: { + title: 'Use point as anchor', + type: 'boolean', + default: false + }, + pointAsAnchorFunction: { + title: 'Point as anchor function: f(data, dsData, dsIndex)', + type: 'string' + }, + pointTooltipOnRightPanel: { + title: 'Independant point tooltip', + type: 'boolean', + default: true + }, + }, + required: [] + }, + form: [ + { + key: 'color', + type: 'color' + }, 'useColorFunction', { + key: 'colorFunction', + type: 'javascript' + }, 'strokeWeight', 'strokeOpacity', + 'usePolylineDecorator', { + key: 'decoratorSymbol', + type: 'rc-select', + multiple: false, + items: [{ + value: 'arrowHead', + label: 'Arrow' + }, { + value: 'dash', + label: 'Dash' + }] + }, 'decoratorSymbolSize', 'useDecoratorCustomColor', { + key: 'decoratorCustomColor', + type: 'color' + }, { + key: 'decoratorOffset', + type: 'textarea' + }, { + key: 'endDecoratorOffset', + type: 'textarea' + }, { + key: 'decoratorRepeat', + type: 'textarea' + }, 'showPoints', { + key: 'pointColor', + type: 'color' + }, 'pointSize', 'usePointAsAnchor', { + key: 'pointAsAnchorFunction', + type: 'javascript' + }, 'pointTooltipOnRightPanel', + ] +}; + +export const pointSchema = +{ + schema: { + title: 'Trip Animation Path Configuration', + type: 'object', + properties: { + showPoints: { + title: 'Show points', + type: 'boolean', + default: false + }, + pointColor: { + title: 'Point color', + type: 'string' + }, + pointSize: { + title: 'Point size (px)', + type: 'number', + default: 10 + }, + usePointAsAnchor: { + title: 'Use point as anchor', + type: 'boolean', + default: false + }, + pointAsAnchorFunction: { + title: 'Point as anchor function: f(data, dsData, dsIndex)', + type: 'string' + }, + pointTooltipOnRightPanel: { + title: 'Independant point tooltip', + type: 'boolean', + default: true + }, + }, + required: [] + }, + form: [ + 'showPoints', { + key: 'pointColor', + type: 'color' + }, 'pointSize', 'usePointAsAnchor', { + key: 'pointAsAnchorFunction', + type: 'javascript' + }, 'pointTooltipOnRightPanel', + ] +}; + export const mapProviderSchema = { schema: { @@ -878,7 +1089,6 @@ export const mapProviderSchema = ] }; - export const tripAnimationSchema = { schema: { title: 'Openstreet Map Configuration', @@ -899,11 +1109,6 @@ export const tripAnimationSchema = { type: 'string', default: 'longitude' }, - polKeyName: { - title: 'Polygon key name', - type: 'string', - default: 'coordinates' - }, showLabel: { title: 'Show label', type: 'boolean', @@ -957,148 +1162,6 @@ export const tripAnimationSchema = { title: 'Tooltip function: f(data, dsData, dsIndex)', type: 'string' }, - color: { - title: 'Path color', - type: 'string' - }, - strokeWeight: { - title: 'Stroke weight', - type: 'number', - default: 2 - }, - strokeOpacity: { - title: 'Stroke opacity', - type: 'number', - default: 1 - }, - useColorFunction: { - title: 'Use path color function', - type: 'boolean', - default: false - }, - colorFunction: { - title: 'Path color function: f(data, dsData, dsIndex)', - type: 'string' - }, - usePolylineDecorator: { - title: 'Use path decorator', - type: 'boolean', - default: false - }, - decoratorSymbol: { - title: 'Decorator symbol', - type: 'string', - default: 'arrowHead' - }, - decoratorSymbolSize: { - title: 'Decorator symbol size (px)', - type: 'number', - default: 10 - }, - useDecoratorCustomColor: { - title: 'Use path decorator custom color', - type: 'boolean', - default: false - }, - decoratorCustomColor: { - title: 'Decorator custom color', - type: 'string', - default: '#000' - }, - decoratorOffset: { - title: 'Decorator offset', - type: 'string', - default: '20px' - }, - endDecoratorOffset: { - title: 'End decorator offset', - type: 'string', - default: '20px' - }, - decoratorRepeat: { - title: 'Decorator repeat', - type: 'string', - default: '20px' - }, - showPolygon: { - title: 'Show polygon', - type: 'boolean', - default: false - }, - polygonTooltipPattern: { - title: 'Tooltip (for ex. \'Text ${keyName} units.\' or Link text\')', - type: 'string', - default: '${entityName}

TimeStamp: ${ts:7}' - }, - usePolygonTooltipFunction: { - title: 'Use polygon tooltip function', - type: 'boolean', - default: false - }, - polygonTooltipFunction: { - title: 'Polygon tooltip function: f(data, dsData, dsIndex)', - type: 'string' - }, - polygonColor: { - title: 'Polygon color', - type: 'string' - }, - polygonOpacity: { - title: 'Polygon opacity', - type: 'number', - default: 0.5 - }, - polygonStrokeColor: { - title: 'Polygon border color', - type: 'string' - }, - polygonStrokeOpacity: { - title: 'Polygon border opacity', - type: 'number', - default: 1 - }, - polygonStrokeWeight: { - title: 'Polygon border weight', - type: 'number', - default: 1 - }, - usePolygonColorFunction: { - title: 'Use polygon color function', - type: 'boolean', - default: false - }, - polygonColorFunction: { - title: 'Polygon Color function: f(data, dsData, dsIndex)', - type: 'string' - }, - showPoints: { - title: 'Show points', - type: 'boolean', - default: false - }, - pointColor: { - title: 'Point color', - type: 'string' - }, - pointSize: { - title: 'Point size (px)', - type: 'number', - default: 10 - }, - usePointAsAnchor: { - title: 'Use point as anchor', - type: 'boolean', - default: false - }, - pointAsAnchorFunction: { - title: 'Point as anchor function: f(data, dsData, dsIndex)', - type: 'string' - }, - pointTooltipOnRightPanel: { - title: 'Independant point tooltip', - type: 'boolean', - default: true - }, autocloseTooltip: { title: 'Auto-close point popup', type: 'boolean', @@ -1138,111 +1201,35 @@ export const tripAnimationSchema = { }, required: [] }, - form: [{ - key: 'mapProvider', - type: 'rc-select', - multiple: false, - items: [{ - value: 'OpenStreetMap.Mapnik', - label: 'OpenStreetMap.Mapnik (Default)' - }, { - value: 'OpenStreetMap.BlackAndWhite', - label: 'OpenStreetMap.BlackAndWhite' - }, { - value: 'OpenStreetMap.HOT', - label: 'OpenStreetMap.HOT' - }, { - value: 'Esri.WorldStreetMap', - label: 'Esri.WorldStreetMap' - }, { - value: 'Esri.WorldTopoMap', - label: 'Esri.WorldTopoMap' - }, { - value: 'CartoDB.Positron', - label: 'CartoDB.Positron' - }, { - value: 'CartoDB.DarkMatter', - label: 'CartoDB.DarkMatter' - }] - }, 'normalizationStep', 'latKeyName', 'lngKeyName', 'polKeyName', 'showLabel', 'label', 'useLabelFunction', { + form: ['normalizationStep', 'latKeyName', 'lngKeyName', 'showLabel', 'label', 'useLabelFunction', { key: 'labelFunction', type: 'javascript' }, 'showTooltip', { - key: 'tooltipColor', - type: 'color' - }, { - key: 'tooltipFontColor', - type: 'color' - }, 'tooltipOpacity', { - key: 'tooltipPattern', - type: 'textarea' - }, 'useTooltipFunction', { - key: 'tooltipFunction', - type: 'javascript' - }, { - key: 'color', - type: 'color' - }, 'useColorFunction', { - key: 'colorFunction', - type: 'javascript' - }, 'usePolylineDecorator', { - key: 'decoratorSymbol', - type: 'rc-select', - multiple: false, - items: [{ - value: 'arrowHead', - label: 'Arrow' + key: 'tooltipColor', + type: 'color' + }, { + key: 'tooltipFontColor', + type: 'color' + }, 'tooltipOpacity', { + key: 'tooltipPattern', + type: 'textarea' + }, 'useTooltipFunction', { + key: 'tooltipFunction', + type: 'javascript' + }, 'autocloseTooltip', { + key: 'markerImage', + type: 'image' + }, 'markerImageSize', 'rotationAngle', 'useMarkerImageFunction', + { + key: 'markerImageFunction', + type: 'javascript' }, { - value: 'dash', - label: 'Dash' + key: 'markerImages', + items: [ + { + key: 'markerImages[]', + type: 'image' + } + ] }] - }, 'decoratorSymbolSize', 'useDecoratorCustomColor', { - key: 'decoratorCustomColor', - type: 'color' - }, { - key: 'decoratorOffset', - type: 'textarea' - }, { - key: 'endDecoratorOffset', - type: 'textarea' - }, { - key: 'decoratorRepeat', - type: 'textarea' - }, 'strokeWeight', 'strokeOpacity', 'showPolygon', { - key: 'polygonTooltipPattern', - type: 'textarea' - }, 'usePolygonTooltipFunction', { - key: 'polygonTooltipFunction', - type: 'javascript' - }, { - key: 'polygonColor', - type: 'color' - }, 'polygonOpacity', { - key: 'polygonStrokeColor', - type: 'color' - }, 'polygonStrokeOpacity', 'polygonStrokeWeight', 'usePolygonColorFunction', { - key: 'polygonColorFunction', - type: 'javascript' - }, 'showPoints', { - key: 'pointColor', - type: 'color' - }, 'pointSize', 'usePointAsAnchor', { - key: 'pointAsAnchorFunction', - type: 'javascript' - }, 'pointTooltipOnRightPanel', 'autocloseTooltip', { - key: 'markerImage', - type: 'image' - }, 'markerImageSize', 'rotationAngle', 'useMarkerImageFunction', - { - key: 'markerImageFunction', - type: 'javascript' - }, { - key: 'markerImages', - items: [ - { - key: 'markerImages[]', - type: 'image' - } - ] - }] } diff --git a/ui-ngx/src/app/modules/home/components/widget/trip-animation/trip-animation.component.ts b/ui-ngx/src/app/modules/home/components/widget/trip-animation/trip-animation.component.ts index 47b7e7f743..b80fa1bada 100644 --- a/ui-ngx/src/app/modules/home/components/widget/trip-animation/trip-animation.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/trip-animation/trip-animation.component.ts @@ -22,8 +22,8 @@ import { interpolateOnPointSegment } from 'leaflet-geometryutil'; import { AfterViewInit, ChangeDetectorRef, Component, Input, OnInit, SecurityContext, ViewChild } from '@angular/core'; import { MapWidgetController, TbMapWidgetV2 } from '../lib/maps/map-widget2'; import { MapProviders } from '../lib/maps/map-models'; -import { initSchema, addToSchema, addGroupInfo } from '@app/core/schema-utils'; -import { tripAnimationSchema } from '../lib/maps/schemes'; +import { initSchema, addToSchema, addGroupInfo, addCondition } from '@app/core/schema-utils'; +import { tripAnimationSchema, mapPolygonSchema, pathSchema, pointSchema } from '../lib/maps/schemes'; import { DomSanitizer } from '@angular/platform-browser'; import { WidgetContext } from '@app/modules/home/models/widget-component.models'; import { findAngle, getRatio, parseArray, parseWithTranslation, safeExecute } from '../lib/maps/maps-utils'; @@ -61,10 +61,16 @@ export class TripAnimationComponent implements OnInit, AfterViewInit { static getSettingsSchema(): JsonSettingsSchema { const schema = initSchema(); - addToSchema(schema, TbMapWidgetV2.getProvidersSchema()); + addToSchema(schema, TbMapWidgetV2.getProvidersSchema(null, true)); addGroupInfo(schema, 'Map Provider Settings'); addToSchema(schema, tripAnimationSchema); addGroupInfo(schema, 'Trip Animation Settings'); + addToSchema(schema, pathSchema); + addGroupInfo(schema, 'Path Settings'); + addToSchema(schema, addCondition(pointSchema, 'model.showPoint === true', ['showPoint'])); + addGroupInfo(schema, 'Polygon Settings'); + addToSchema(schema, addCondition(mapPolygonSchema, 'model.showPolygon === true', ['showPolygon'])); + addGroupInfo(schema, 'Polygon Settings'); return schema; } @@ -79,7 +85,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit { } this.settings = { ...settings, ...this.ctx.settings }; const subscription = this.ctx.subscriptions[Object.keys(this.ctx.subscriptions)[0]]; - if (subscription) subscription.callbacks.onDataUpdated = (updated) => { + if (subscription) subscription.callbacks.onDataUpdated = () => { this.historicalData = parseArray(this.ctx.data); this.activeTrip = this.historicalData[0][0]; this.calculateIntervals(); @@ -107,6 +113,9 @@ export class TripAnimationComponent implements OnInit, AfterViewInit { if (this.settings.showPolygon) { this.mapWidget.map.updatePolygons(this.interpolatedData); } + if(this.settings.showPoint){ + this.mapWidget.map.updateMarkers(this.interpolatedData) + } this.mapWidget.map.updateMarkers(currentPosition); } }