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 | 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 | 203 | this.attrFields = this.entityDataSubscriptionOptions.dataKeys.filter(dataKey => dataKey.type === DataKeyType.attribute).map( |
198 | 204 | dataKey => ({ type: EntityKeyType.ATTRIBUTE, key: dataKey.name }) | ... | ... |
... | ... | @@ -455,6 +455,7 @@ export class WidgetSubscription implements IWidgetSubscription { |
455 | 455 | let entityId: EntityId; |
456 | 456 | let entityName: string; |
457 | 457 | let entityLabel: string; |
458 | + let entityDescription: string; | |
458 | 459 | if (this.type === widgetType.rpc) { |
459 | 460 | if (this.targetDeviceId) { |
460 | 461 | entityId = { |
... | ... | @@ -474,6 +475,18 @@ export class WidgetSubscription implements IWidgetSubscription { |
474 | 475 | if (labelValue) { |
475 | 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 | 492 | } else { |
... | ... | @@ -485,6 +498,7 @@ export class WidgetSubscription implements IWidgetSubscription { |
485 | 498 | }; |
486 | 499 | entityName = datasource.entityName; |
487 | 500 | entityLabel = datasource.entityLabel; |
501 | + entityDescription = datasource.entityDescription; | |
488 | 502 | break; |
489 | 503 | } |
490 | 504 | } |
... | ... | @@ -493,7 +507,8 @@ export class WidgetSubscription implements IWidgetSubscription { |
493 | 507 | return { |
494 | 508 | entityId, |
495 | 509 | entityName, |
496 | - entityLabel | |
510 | + entityLabel, | |
511 | + entityDescription | |
497 | 512 | }; |
498 | 513 | } else { |
499 | 514 | return null; | ... | ... |
... | ... | @@ -23,11 +23,12 @@ import L, { |
23 | 23 | MarkerClusterGroup, |
24 | 24 | MarkerClusterGroupOptions |
25 | 25 | } from 'leaflet'; |
26 | - | |
26 | +import tinycolor from 'tinycolor2'; | |
27 | 27 | import 'leaflet-providers'; |
28 | 28 | import 'leaflet.markercluster/dist/leaflet.markercluster'; |
29 | 29 | |
30 | 30 | import { |
31 | + defaultSettings, | |
31 | 32 | FormattedData, |
32 | 33 | MapSettings, |
33 | 34 | MarkerSettings, |
... | ... | @@ -76,6 +77,7 @@ export default abstract class LeafletMap { |
76 | 77 | } |
77 | 78 | |
78 | 79 | public initSettings(options: MapSettings) { |
80 | + this.options.tinyColor = tinycolor(this.options.color || defaultSettings.color); | |
79 | 81 | const { initCallback, |
80 | 82 | disableScrollZooming, |
81 | 83 | useClusterMarkers, | ... | ... |
... | ... | @@ -24,6 +24,7 @@ import { |
24 | 24 | googleMapSettingsSchema, hereMapSettingsSchema, imageMapSettingsSchema |
25 | 25 | } from './schemes'; |
26 | 26 | import { EntityType } from '@shared/models/entity-type.models'; |
27 | +import tinycolor from 'tinycolor2'; | |
27 | 28 | |
28 | 29 | export const DEFAULT_MAP_PAGE_SIZE = 16384; |
29 | 30 | |
... | ... | @@ -93,6 +94,7 @@ export type MarkerSettings = { |
93 | 94 | useTooltipFunction: boolean; |
94 | 95 | useColorFunction: boolean; |
95 | 96 | color?: string; |
97 | + tinyColor?: tinycolor.Instance; | |
96 | 98 | autocloseTooltip: boolean; |
97 | 99 | showTooltipAction: string; |
98 | 100 | useClusterMarkers: boolean; | ... | ... |
... | ... | @@ -14,7 +14,7 @@ |
14 | 14 | /// limitations under the License. |
15 | 15 | /// |
16 | 16 | |
17 | -import L, { LeafletMouseEvent } from 'leaflet'; | |
17 | +import L, { Icon, LeafletMouseEvent } from 'leaflet'; | |
18 | 18 | import { FormattedData, MarkerSettings } from './map-models'; |
19 | 19 | import { |
20 | 20 | aspectCache, |
... | ... | @@ -26,7 +26,7 @@ import { |
26 | 26 | safeExecute |
27 | 27 | } from './maps-utils'; |
28 | 28 | import tinycolor from 'tinycolor2'; |
29 | -import { isDefined } from '@core/utils'; | |
29 | +import { isDefined, isDefinedAndNotNull } from '@core/utils'; | |
30 | 30 | import LeafletMap from './leaflet-map'; |
31 | 31 | |
32 | 32 | export class Marker { |
... | ... | @@ -138,8 +138,14 @@ export class Marker { |
138 | 138 | const currentImage = this.settings.useMarkerImageFunction ? |
139 | 139 | safeExecute(this.settings.markerImageFunction, |
140 | 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 | 149 | if (currentImage && currentImage.url) { |
144 | 150 | aspectCache(currentImage.url).subscribe( |
145 | 151 | (aspect) => { |
... | ... | @@ -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 | 211 | removeMarker() { | ... | ... |
... | ... | @@ -300,7 +300,8 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI |
300 | 300 | id: datasource.entityId |
301 | 301 | }, |
302 | 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 | 589 | { |
590 | 590 | type: EntityKeyType.ENTITY_FIELD, |
591 | 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 | 613 | } else { |
610 | 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 | 629 | return entityInfo; |
615 | 630 | } | ... | ... |