Commit c1b53afd8a965617e0443f245d9e03b5039ccfde
1 parent
d542b24a
Add entity description to datasource. Fix map markers color.
Showing
8 changed files
with
81 additions
and
24 deletions
@@ -193,6 +193,12 @@ export class EntityDataSubscription { | @@ -193,6 +193,12 @@ export class EntityDataSubscription { | ||
193 | key: 'label' | 193 | key: 'label' |
194 | }); | 194 | }); |
195 | } | 195 | } |
196 | + if (!entityFields.find(key => key.key === 'additionalInfo')) { | ||
197 | + entityFields.push({ | ||
198 | + type: EntityKeyType.ENTITY_FIELD, | ||
199 | + key: 'additionalInfo' | ||
200 | + }); | ||
201 | + } | ||
196 | 202 | ||
197 | this.attrFields = this.entityDataSubscriptionOptions.dataKeys.filter(dataKey => dataKey.type === DataKeyType.attribute).map( | 203 | this.attrFields = this.entityDataSubscriptionOptions.dataKeys.filter(dataKey => dataKey.type === DataKeyType.attribute).map( |
198 | dataKey => ({ type: EntityKeyType.ATTRIBUTE, key: dataKey.name }) | 204 | dataKey => ({ type: EntityKeyType.ATTRIBUTE, key: dataKey.name }) |
@@ -242,6 +242,7 @@ export interface SubscriptionEntityInfo { | @@ -242,6 +242,7 @@ export interface SubscriptionEntityInfo { | ||
242 | entityId: EntityId; | 242 | entityId: EntityId; |
243 | entityName: string; | 243 | entityName: string; |
244 | entityLabel: string; | 244 | entityLabel: string; |
245 | + entityDescription: string; | ||
245 | } | 246 | } |
246 | 247 | ||
247 | export interface IWidgetSubscription { | 248 | export interface IWidgetSubscription { |
@@ -455,6 +455,7 @@ export class WidgetSubscription implements IWidgetSubscription { | @@ -455,6 +455,7 @@ export class WidgetSubscription implements IWidgetSubscription { | ||
455 | let entityId: EntityId; | 455 | let entityId: EntityId; |
456 | let entityName: string; | 456 | let entityName: string; |
457 | let entityLabel: string; | 457 | let entityLabel: string; |
458 | + let entityDescription: string; | ||
458 | if (this.type === widgetType.rpc) { | 459 | if (this.type === widgetType.rpc) { |
459 | if (this.targetDeviceId) { | 460 | if (this.targetDeviceId) { |
460 | entityId = { | 461 | entityId = { |
@@ -474,6 +475,18 @@ export class WidgetSubscription implements IWidgetSubscription { | @@ -474,6 +475,18 @@ export class WidgetSubscription implements IWidgetSubscription { | ||
474 | if (labelValue) { | 475 | if (labelValue) { |
475 | entityLabel = labelValue.value; | 476 | entityLabel = labelValue.value; |
476 | } | 477 | } |
478 | + const additionalInfoValue = entityFields.additionalInfo; | ||
479 | + if (additionalInfoValue) { | ||
480 | + const additionalInfo = additionalInfoValue.value; | ||
481 | + if (additionalInfo && additionalInfo.length) { | ||
482 | + try { | ||
483 | + const additionalInfoJson = JSON.parse(additionalInfo); | ||
484 | + if (additionalInfoJson && additionalInfoJson.description) { | ||
485 | + entityDescription = additionalInfoJson.description; | ||
486 | + } | ||
487 | + } catch (e) {} | ||
488 | + } | ||
489 | + } | ||
477 | } | 490 | } |
478 | } | 491 | } |
479 | } else { | 492 | } else { |
@@ -485,6 +498,7 @@ export class WidgetSubscription implements IWidgetSubscription { | @@ -485,6 +498,7 @@ export class WidgetSubscription implements IWidgetSubscription { | ||
485 | }; | 498 | }; |
486 | entityName = datasource.entityName; | 499 | entityName = datasource.entityName; |
487 | entityLabel = datasource.entityLabel; | 500 | entityLabel = datasource.entityLabel; |
501 | + entityDescription = datasource.entityDescription; | ||
488 | break; | 502 | break; |
489 | } | 503 | } |
490 | } | 504 | } |
@@ -493,7 +507,8 @@ export class WidgetSubscription implements IWidgetSubscription { | @@ -493,7 +507,8 @@ export class WidgetSubscription implements IWidgetSubscription { | ||
493 | return { | 507 | return { |
494 | entityId, | 508 | entityId, |
495 | entityName, | 509 | entityName, |
496 | - entityLabel | 510 | + entityLabel, |
511 | + entityDescription | ||
497 | }; | 512 | }; |
498 | } else { | 513 | } else { |
499 | return null; | 514 | return null; |
@@ -23,11 +23,12 @@ import L, { | @@ -23,11 +23,12 @@ import L, { | ||
23 | MarkerClusterGroup, | 23 | MarkerClusterGroup, |
24 | MarkerClusterGroupOptions | 24 | MarkerClusterGroupOptions |
25 | } from 'leaflet'; | 25 | } from 'leaflet'; |
26 | - | 26 | +import tinycolor from 'tinycolor2'; |
27 | import 'leaflet-providers'; | 27 | import 'leaflet-providers'; |
28 | import 'leaflet.markercluster/dist/leaflet.markercluster'; | 28 | import 'leaflet.markercluster/dist/leaflet.markercluster'; |
29 | 29 | ||
30 | import { | 30 | import { |
31 | + defaultSettings, | ||
31 | FormattedData, | 32 | FormattedData, |
32 | MapSettings, | 33 | MapSettings, |
33 | MarkerSettings, | 34 | MarkerSettings, |
@@ -76,6 +77,7 @@ export default abstract class LeafletMap { | @@ -76,6 +77,7 @@ export default abstract class LeafletMap { | ||
76 | } | 77 | } |
77 | 78 | ||
78 | public initSettings(options: MapSettings) { | 79 | public initSettings(options: MapSettings) { |
80 | + this.options.tinyColor = tinycolor(this.options.color || defaultSettings.color); | ||
79 | const { initCallback, | 81 | const { initCallback, |
80 | disableScrollZooming, | 82 | disableScrollZooming, |
81 | useClusterMarkers, | 83 | useClusterMarkers, |
@@ -24,6 +24,7 @@ import { | @@ -24,6 +24,7 @@ import { | ||
24 | googleMapSettingsSchema, hereMapSettingsSchema, imageMapSettingsSchema | 24 | googleMapSettingsSchema, hereMapSettingsSchema, imageMapSettingsSchema |
25 | } from './schemes'; | 25 | } from './schemes'; |
26 | import { EntityType } from '@shared/models/entity-type.models'; | 26 | import { EntityType } from '@shared/models/entity-type.models'; |
27 | +import tinycolor from 'tinycolor2'; | ||
27 | 28 | ||
28 | export const DEFAULT_MAP_PAGE_SIZE = 16384; | 29 | export const DEFAULT_MAP_PAGE_SIZE = 16384; |
29 | 30 | ||
@@ -93,6 +94,7 @@ export type MarkerSettings = { | @@ -93,6 +94,7 @@ export type MarkerSettings = { | ||
93 | useTooltipFunction: boolean; | 94 | useTooltipFunction: boolean; |
94 | useColorFunction: boolean; | 95 | useColorFunction: boolean; |
95 | color?: string; | 96 | color?: string; |
97 | + tinyColor?: tinycolor.Instance; | ||
96 | autocloseTooltip: boolean; | 98 | autocloseTooltip: boolean; |
97 | showTooltipAction: string; | 99 | showTooltipAction: string; |
98 | useClusterMarkers: boolean; | 100 | useClusterMarkers: boolean; |
@@ -14,7 +14,7 @@ | @@ -14,7 +14,7 @@ | ||
14 | /// limitations under the License. | 14 | /// limitations under the License. |
15 | /// | 15 | /// |
16 | 16 | ||
17 | -import L, { LeafletMouseEvent } from 'leaflet'; | 17 | +import L, { Icon, LeafletMouseEvent } from 'leaflet'; |
18 | import { FormattedData, MarkerSettings } from './map-models'; | 18 | import { FormattedData, MarkerSettings } from './map-models'; |
19 | import { | 19 | import { |
20 | aspectCache, | 20 | aspectCache, |
@@ -26,7 +26,7 @@ import { | @@ -26,7 +26,7 @@ import { | ||
26 | safeExecute | 26 | safeExecute |
27 | } from './maps-utils'; | 27 | } from './maps-utils'; |
28 | import tinycolor from 'tinycolor2'; | 28 | import tinycolor from 'tinycolor2'; |
29 | -import { isDefined } from '@core/utils'; | 29 | +import { isDefined, isDefinedAndNotNull } from '@core/utils'; |
30 | import LeafletMap from './leaflet-map'; | 30 | import LeafletMap from './leaflet-map'; |
31 | 31 | ||
32 | export class Marker { | 32 | export class Marker { |
@@ -138,8 +138,14 @@ export class Marker { | @@ -138,8 +138,14 @@ export class Marker { | ||
138 | const currentImage = this.settings.useMarkerImageFunction ? | 138 | const currentImage = this.settings.useMarkerImageFunction ? |
139 | safeExecute(this.settings.markerImageFunction, | 139 | safeExecute(this.settings.markerImageFunction, |
140 | [this.data, this.settings.markerImages, this.dataSources, this.data.dsIndex]) : this.settings.currentImage; | 140 | [this.data, this.settings.markerImages, this.dataSources, this.data.dsIndex]) : this.settings.currentImage; |
141 | - const currentColor = tinycolor(this.settings.useColorFunction ? safeExecute(this.settings.colorFunction, | ||
142 | - [this.data, this.dataSources, this.data.dsIndex]) : this.settings.color).toHex(); | 141 | + let currentColor = this.settings.tinyColor; |
142 | + if (this.settings.useColorFunction) { | ||
143 | + const functionColor = safeExecute(this.settings.colorFunction, | ||
144 | + [this.data, this.dataSources, this.data.dsIndex]); | ||
145 | + if (isDefinedAndNotNull(functionColor)) { | ||
146 | + currentColor = tinycolor(functionColor); | ||
147 | + } | ||
148 | + } | ||
143 | if (currentImage && currentImage.url) { | 149 | if (currentImage && currentImage.url) { |
144 | aspectCache(currentImage.url).subscribe( | 150 | aspectCache(currentImage.url).subscribe( |
145 | (aspect) => { | 151 | (aspect) => { |
@@ -174,23 +180,32 @@ export class Marker { | @@ -174,23 +180,32 @@ export class Marker { | ||
174 | } | 180 | } |
175 | } | 181 | } |
176 | 182 | ||
177 | - createDefaultMarkerIcon(color, onMarkerIconReady) { | ||
178 | - if (!this.map.defaultMarkerIconInfo) { | ||
179 | - const icon = L.icon({ | ||
180 | - iconUrl: 'https://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|' + color, | ||
181 | - iconSize: [21, 34], | ||
182 | - iconAnchor: [21 * this.markerOffset[0], 34 * this.markerOffset[1]], | ||
183 | - popupAnchor: [0, -34], | ||
184 | - shadowUrl: 'https://chart.apis.google.com/chart?chst=d_map_pin_shadow', | ||
185 | - shadowSize: [40, 37], | ||
186 | - shadowAnchor: [12, 35] | ||
187 | - }); | ||
188 | - this.map.defaultMarkerIconInfo = { | ||
189 | - size: [21, 34], | ||
190 | - icon | ||
191 | - }; | 183 | + createDefaultMarkerIcon(color: tinycolor.Instance, onMarkerIconReady) { |
184 | + let icon: { size: number[], icon: Icon }; | ||
185 | + if (!tinycolor.equals(color, this.settings.tinyColor)) { | ||
186 | + icon = this.createColoredMarkerIcon(color); | ||
187 | + } else { | ||
188 | + if (!this.map.defaultMarkerIconInfo) { | ||
189 | + this.map.defaultMarkerIconInfo = this.createColoredMarkerIcon(color); | ||
190 | + } | ||
191 | + icon = this.map.defaultMarkerIconInfo; | ||
192 | } | 192 | } |
193 | - onMarkerIconReady(this.map.defaultMarkerIconInfo); | 193 | + onMarkerIconReady(icon); |
194 | + } | ||
195 | + | ||
196 | + createColoredMarkerIcon(color: tinycolor.Instance): { size: number[], icon: Icon } { | ||
197 | + return { | ||
198 | + size: [21, 34], | ||
199 | + icon: L.icon({ | ||
200 | + iconUrl: 'https://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|' + color.toHex(), | ||
201 | + iconSize: [21, 34], | ||
202 | + iconAnchor: [21 * this.markerOffset[0], 34 * this.markerOffset[1]], | ||
203 | + popupAnchor: [0, -34], | ||
204 | + shadowUrl: 'https://chart.apis.google.com/chart?chst=d_map_pin_shadow', | ||
205 | + shadowSize: [40, 37], | ||
206 | + shadowAnchor: [12, 35] | ||
207 | + }) | ||
208 | + }; | ||
194 | } | 209 | } |
195 | 210 | ||
196 | removeMarker() { | 211 | removeMarker() { |
@@ -300,7 +300,8 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI | @@ -300,7 +300,8 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI | ||
300 | id: datasource.entityId | 300 | id: datasource.entityId |
301 | }, | 301 | }, |
302 | entityName: datasource.entityName, | 302 | entityName: datasource.entityName, |
303 | - entityLabel: datasource.entityLabel | 303 | + entityLabel: datasource.entityLabel, |
304 | + entityDescription: datasource.entityDescription | ||
304 | }; | 305 | }; |
305 | } | 306 | } |
306 | } | 307 | } |
@@ -589,6 +589,10 @@ export const entityInfoFields: EntityKey[] = [ | @@ -589,6 +589,10 @@ export const entityInfoFields: EntityKey[] = [ | ||
589 | { | 589 | { |
590 | type: EntityKeyType.ENTITY_FIELD, | 590 | type: EntityKeyType.ENTITY_FIELD, |
591 | key: 'label' | 591 | key: 'label' |
592 | + }, | ||
593 | + { | ||
594 | + type: EntityKeyType.ENTITY_FIELD, | ||
595 | + key: 'additionalInfo' | ||
592 | } | 596 | } |
593 | ]; | 597 | ]; |
594 | 598 | ||
@@ -609,7 +613,18 @@ export function entityDataToEntityInfo(entityData: EntityData): EntityInfo { | @@ -609,7 +613,18 @@ export function entityDataToEntityInfo(entityData: EntityData): EntityInfo { | ||
609 | } else { | 613 | } else { |
610 | entityInfo.label = ''; | 614 | entityInfo.label = ''; |
611 | } | 615 | } |
612 | - entityInfo.entityDescription = 'TODO: Not implemented'; | 616 | + entityInfo.entityDescription = ''; |
617 | + if (fields.additionalInfo) { | ||
618 | + const additionalInfo = fields.additionalInfo.value; | ||
619 | + if (additionalInfo && additionalInfo.length) { | ||
620 | + try { | ||
621 | + const additionalInfoJson = JSON.parse(additionalInfo); | ||
622 | + if (additionalInfoJson && additionalInfoJson.description) { | ||
623 | + entityInfo.entityDescription = additionalInfoJson.description; | ||
624 | + } | ||
625 | + } catch (e) {} | ||
626 | + } | ||
627 | + } | ||
613 | } | 628 | } |
614 | return entityInfo; | 629 | return entityInfo; |
615 | } | 630 | } |