From c1b53afd8a965617e0443f245d9e03b5039ccfde Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Mon, 10 Aug 2020 14:34:05 +0300 Subject: [PATCH] Add entity description to datasource. Fix map markers color. --- .../app/core/api/entity-data-subscription.ts | 6 ++ ui-ngx/src/app/core/api/widget-api.models.ts | 1 + .../src/app/core/api/widget-subscription.ts | 17 +++++- .../components/widget/lib/maps/leaflet-map.ts | 4 +- .../components/widget/lib/maps/map-models.ts | 2 + .../components/widget/lib/maps/markers.ts | 55 ++++++++++++------- .../lib/timeseries-table-widget.component.ts | 3 +- .../app/shared/models/query/query.models.ts | 17 +++++- 8 files changed, 81 insertions(+), 24 deletions(-) diff --git a/ui-ngx/src/app/core/api/entity-data-subscription.ts b/ui-ngx/src/app/core/api/entity-data-subscription.ts index c1b01daba6..6d2f764d95 100644 --- a/ui-ngx/src/app/core/api/entity-data-subscription.ts +++ b/ui-ngx/src/app/core/api/entity-data-subscription.ts @@ -193,6 +193,12 @@ export class EntityDataSubscription { key: 'label' }); } + if (!entityFields.find(key => key.key === 'additionalInfo')) { + entityFields.push({ + type: EntityKeyType.ENTITY_FIELD, + key: 'additionalInfo' + }); + } this.attrFields = this.entityDataSubscriptionOptions.dataKeys.filter(dataKey => dataKey.type === DataKeyType.attribute).map( dataKey => ({ type: EntityKeyType.ATTRIBUTE, key: dataKey.name }) diff --git a/ui-ngx/src/app/core/api/widget-api.models.ts b/ui-ngx/src/app/core/api/widget-api.models.ts index fe7bb82044..e4b9deae89 100644 --- a/ui-ngx/src/app/core/api/widget-api.models.ts +++ b/ui-ngx/src/app/core/api/widget-api.models.ts @@ -242,6 +242,7 @@ export interface SubscriptionEntityInfo { entityId: EntityId; entityName: string; entityLabel: string; + entityDescription: string; } export interface IWidgetSubscription { diff --git a/ui-ngx/src/app/core/api/widget-subscription.ts b/ui-ngx/src/app/core/api/widget-subscription.ts index d664e06a5e..0eb71c7e90 100644 --- a/ui-ngx/src/app/core/api/widget-subscription.ts +++ b/ui-ngx/src/app/core/api/widget-subscription.ts @@ -455,6 +455,7 @@ export class WidgetSubscription implements IWidgetSubscription { let entityId: EntityId; let entityName: string; let entityLabel: string; + let entityDescription: string; if (this.type === widgetType.rpc) { if (this.targetDeviceId) { entityId = { @@ -474,6 +475,18 @@ export class WidgetSubscription implements IWidgetSubscription { if (labelValue) { entityLabel = labelValue.value; } + const additionalInfoValue = entityFields.additionalInfo; + if (additionalInfoValue) { + const additionalInfo = additionalInfoValue.value; + if (additionalInfo && additionalInfo.length) { + try { + const additionalInfoJson = JSON.parse(additionalInfo); + if (additionalInfoJson && additionalInfoJson.description) { + entityDescription = additionalInfoJson.description; + } + } catch (e) {} + } + } } } } else { @@ -485,6 +498,7 @@ export class WidgetSubscription implements IWidgetSubscription { }; entityName = datasource.entityName; entityLabel = datasource.entityLabel; + entityDescription = datasource.entityDescription; break; } } @@ -493,7 +507,8 @@ export class WidgetSubscription implements IWidgetSubscription { return { entityId, entityName, - entityLabel + entityLabel, + entityDescription }; } else { return null; diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts index 33c36e3ce8..97bbd6e18c 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts @@ -23,11 +23,12 @@ import L, { MarkerClusterGroup, MarkerClusterGroupOptions } from 'leaflet'; - +import tinycolor from 'tinycolor2'; import 'leaflet-providers'; import 'leaflet.markercluster/dist/leaflet.markercluster'; import { + defaultSettings, FormattedData, MapSettings, MarkerSettings, @@ -76,6 +77,7 @@ export default abstract class LeafletMap { } public initSettings(options: MapSettings) { + this.options.tinyColor = tinycolor(this.options.color || defaultSettings.color); const { initCallback, disableScrollZooming, useClusterMarkers, 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 0a41516b6e..d0da933e8a 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 @@ -24,6 +24,7 @@ import { googleMapSettingsSchema, hereMapSettingsSchema, imageMapSettingsSchema } from './schemes'; import { EntityType } from '@shared/models/entity-type.models'; +import tinycolor from 'tinycolor2'; export const DEFAULT_MAP_PAGE_SIZE = 16384; @@ -93,6 +94,7 @@ export type MarkerSettings = { useTooltipFunction: boolean; useColorFunction: boolean; color?: string; + tinyColor?: tinycolor.Instance; autocloseTooltip: boolean; showTooltipAction: string; useClusterMarkers: boolean; diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.ts index cd254ca406..efad5931c9 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.ts @@ -14,7 +14,7 @@ /// limitations under the License. /// -import L, { LeafletMouseEvent } from 'leaflet'; +import L, { Icon, LeafletMouseEvent } from 'leaflet'; import { FormattedData, MarkerSettings } from './map-models'; import { aspectCache, @@ -26,7 +26,7 @@ import { safeExecute } from './maps-utils'; import tinycolor from 'tinycolor2'; -import { isDefined } from '@core/utils'; +import { isDefined, isDefinedAndNotNull } from '@core/utils'; import LeafletMap from './leaflet-map'; export class Marker { @@ -138,8 +138,14 @@ export class Marker { const currentImage = this.settings.useMarkerImageFunction ? safeExecute(this.settings.markerImageFunction, [this.data, this.settings.markerImages, this.dataSources, this.data.dsIndex]) : this.settings.currentImage; - const currentColor = tinycolor(this.settings.useColorFunction ? safeExecute(this.settings.colorFunction, - [this.data, this.dataSources, this.data.dsIndex]) : this.settings.color).toHex(); + let currentColor = this.settings.tinyColor; + if (this.settings.useColorFunction) { + const functionColor = safeExecute(this.settings.colorFunction, + [this.data, this.dataSources, this.data.dsIndex]); + if (isDefinedAndNotNull(functionColor)) { + currentColor = tinycolor(functionColor); + } + } if (currentImage && currentImage.url) { aspectCache(currentImage.url).subscribe( (aspect) => { @@ -174,23 +180,32 @@ export class Marker { } } - createDefaultMarkerIcon(color, onMarkerIconReady) { - if (!this.map.defaultMarkerIconInfo) { - const icon = L.icon({ - iconUrl: 'https://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|' + color, - iconSize: [21, 34], - iconAnchor: [21 * this.markerOffset[0], 34 * this.markerOffset[1]], - popupAnchor: [0, -34], - shadowUrl: 'https://chart.apis.google.com/chart?chst=d_map_pin_shadow', - shadowSize: [40, 37], - shadowAnchor: [12, 35] - }); - this.map.defaultMarkerIconInfo = { - size: [21, 34], - icon - }; + createDefaultMarkerIcon(color: tinycolor.Instance, onMarkerIconReady) { + let icon: { size: number[], icon: Icon }; + if (!tinycolor.equals(color, this.settings.tinyColor)) { + icon = this.createColoredMarkerIcon(color); + } else { + if (!this.map.defaultMarkerIconInfo) { + this.map.defaultMarkerIconInfo = this.createColoredMarkerIcon(color); + } + icon = this.map.defaultMarkerIconInfo; } - onMarkerIconReady(this.map.defaultMarkerIconInfo); + onMarkerIconReady(icon); + } + + createColoredMarkerIcon(color: tinycolor.Instance): { size: number[], icon: Icon } { + return { + size: [21, 34], + icon: L.icon({ + iconUrl: 'https://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|' + color.toHex(), + iconSize: [21, 34], + iconAnchor: [21 * this.markerOffset[0], 34 * this.markerOffset[1]], + popupAnchor: [0, -34], + shadowUrl: 'https://chart.apis.google.com/chart?chst=d_map_pin_shadow', + shadowSize: [40, 37], + shadowAnchor: [12, 35] + }) + }; } removeMarker() { diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.ts index 5523ca2f03..5124490764 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.ts @@ -300,7 +300,8 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI id: datasource.entityId }, entityName: datasource.entityName, - entityLabel: datasource.entityLabel + entityLabel: datasource.entityLabel, + entityDescription: datasource.entityDescription }; } } diff --git a/ui-ngx/src/app/shared/models/query/query.models.ts b/ui-ngx/src/app/shared/models/query/query.models.ts index ae513da25f..a7647b3687 100644 --- a/ui-ngx/src/app/shared/models/query/query.models.ts +++ b/ui-ngx/src/app/shared/models/query/query.models.ts @@ -589,6 +589,10 @@ export const entityInfoFields: EntityKey[] = [ { type: EntityKeyType.ENTITY_FIELD, key: 'label' + }, + { + type: EntityKeyType.ENTITY_FIELD, + key: 'additionalInfo' } ]; @@ -609,7 +613,18 @@ export function entityDataToEntityInfo(entityData: EntityData): EntityInfo { } else { entityInfo.label = ''; } - entityInfo.entityDescription = 'TODO: Not implemented'; + entityInfo.entityDescription = ''; + if (fields.additionalInfo) { + const additionalInfo = fields.additionalInfo.value; + if (additionalInfo && additionalInfo.length) { + try { + const additionalInfoJson = JSON.parse(additionalInfo); + if (additionalInfoJson && additionalInfoJson.description) { + entityInfo.entityDescription = additionalInfoJson.description; + } + } catch (e) {} + } + } } return entityInfo; }