Commit c1b53afd8a965617e0443f245d9e03b5039ccfde

Authored by Igor Kulikov
1 parent d542b24a

Add entity description to datasource. Fix map markers color.

@@ -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 }