From e0c6b1464c894f0f3876c2ee89bf2247c49c6377 Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Tue, 25 Apr 2017 10:51:39 +0300 Subject: [PATCH] Widget subscriptions improvements. --- ui/src/app/api/subscription.js | 41 +++++++++++++++++++------ ui/src/app/common/utils.service.js | 1 + ui/src/app/widget/lib/flot-widget.js | 9 ++++++ ui/src/app/widget/lib/google-map.js | 4 ++- ui/src/app/widget/lib/map-widget.js | 20 +++++++----- ui/src/app/widget/lib/openstreet-map.js | 4 ++- 6 files changed, 60 insertions(+), 19 deletions(-) diff --git a/ui/src/app/api/subscription.js b/ui/src/app/api/subscription.js index d63b02a530..1e7a716c25 100644 --- a/ui/src/app/api/subscription.js +++ b/ui/src/app/api/subscription.js @@ -169,15 +169,7 @@ export default class Subscription { }); this.registrations.push(registration); } else { - registration = this.ctx.$scope.$watch(function () { - return subscription.timeWindowConfig; - }, function (newTimewindow, prevTimewindow) { - if (!angular.equals(newTimewindow, prevTimewindow)) { - subscription.unsubscribe(); - subscription.subscribe(); - } - }); - this.registrations.push(registration); + this.startWatchingTimewindow(); } } @@ -188,6 +180,29 @@ export default class Subscription { this.registrations.push(registration); } + startWatchingTimewindow() { + var subscription = this; + this.timeWindowWatchRegistration = this.ctx.$scope.$watch(function () { + return subscription.timeWindowConfig; + }, function (newTimewindow, prevTimewindow) { + if (!angular.equals(newTimewindow, prevTimewindow)) { + subscription.unsubscribe(); + subscription.subscribe(); + } + }, true); + this.registrations.push(this.timeWindowWatchRegistration); + } + + stopWatchingTimewindow() { + if (this.timeWindowWatchRegistration) { + this.timeWindowWatchRegistration(); + var index = this.registrations.indexOf(this.timeWindowWatchRegistration); + if (index > -1) { + this.registrations.splice(index, 1); + } + } + } + initRpc() { if (this.targetDeviceAliasIds && this.targetDeviceAliasIds.length > 0) { @@ -354,9 +369,13 @@ export default class Subscription { this.ctx.dashboardTimewindowApi.onResetTimewindow(); } else { if (this.originalTimewindow) { + this.stopWatchingTimewindow(); this.timeWindowConfig = angular.copy(this.originalTimewindow); this.originalTimewindow = null; this.callbacks.timeWindowUpdated(this, this.timeWindowConfig); + this.unsubscribe(); + this.subscribe(); + this.startWatchingTimewindow(); } } } @@ -365,11 +384,15 @@ export default class Subscription { if (this.useDashboardTimewindow) { this.ctx.dashboardTimewindowApi.onUpdateTimewindow(startTimeMs, endTimeMs); } else { + this.stopWatchingTimewindow(); if (!this.originalTimewindow) { this.originalTimewindow = angular.copy(this.timeWindowConfig); } this.timeWindowConfig = this.ctx.timeService.toHistoryTimewindow(this.timeWindowConfig, startTimeMs, endTimeMs); this.callbacks.timeWindowUpdated(this, this.timeWindowConfig); + this.unsubscribe(); + this.subscribe(); + this.startWatchingTimewindow(); } } diff --git a/ui/src/app/common/utils.service.js b/ui/src/app/common/utils.service.js index 64fb6d8919..09d0fc894b 100644 --- a/ui/src/app/common/utils.service.js +++ b/ui/src/app/common/utils.service.js @@ -342,6 +342,7 @@ function Utils($mdColorPalette, $rootScope, $window, $q, deviceService, types) { datasource = { type: subscriptionInfo.type, deviceName: device.name, + name: device.name, deviceId: device.id.id, dataKeys: [] } diff --git a/ui/src/app/widget/lib/flot-widget.js b/ui/src/app/widget/lib/flot-widget.js index be61de7f93..af70de184b 100644 --- a/ui/src/app/widget/lib/flot-widget.js +++ b/ui/src/app/widget/lib/flot-widget.js @@ -374,6 +374,10 @@ export default class TbFlot { } update() { + if (this.updateTimeoutHandle) { + this.ctx.$scope.$timeout.cancel(this.updateTimeoutHandle); + this.updateTimeoutHandle = null; + } if (this.subscription) { if (!this.isMouseInteraction && this.ctx.plot) { if (this.chartType === 'line' || this.chartType === 'bar') { @@ -396,6 +400,11 @@ export default class TbFlot { this.ctx.plot.draw(); } } + } else if (this.isMouseInteraction && this.ctx.plot){ + var tbFlot = this; + this.updateTimeoutHandle = this.ctx.$scope.$timeout(function() { + tbFlot.update(); + }, 30, false); } } } diff --git a/ui/src/app/widget/lib/google-map.js b/ui/src/app/widget/lib/google-map.js index caac144415..0e104ebfa9 100644 --- a/ui/src/app/widget/lib/google-map.js +++ b/ui/src/app/widget/lib/google-map.js @@ -217,7 +217,9 @@ export default class TbGoogleMap { this.updateMarkerImage(marker, settings, settings.markerImage, settings.markerImageSize || 34); } - this.createTooltip(marker, settings.tooltipPattern, settings.tooltipReplaceInfo); + if (settings.displayTooltip) { + this.createTooltip(marker, settings.tooltipPattern, settings.tooltipReplaceInfo); + } if (onClickListener) { marker.addListener('click', onClickListener); diff --git a/ui/src/app/widget/lib/map-widget.js b/ui/src/app/widget/lib/map-widget.js index c39a1421bd..694f83a192 100644 --- a/ui/src/app/widget/lib/map-widget.js +++ b/ui/src/app/widget/lib/map-widget.js @@ -19,7 +19,7 @@ import tinycolor from 'tinycolor2'; import TbGoogleMap from './google-map'; import TbOpenStreetMap from './openstreet-map'; -function procesTooltipPattern(tbMap, pattern, datasources) { +function procesTooltipPattern(tbMap, pattern, datasources, dsIndex) { var match = tbMap.varsRegex.exec(pattern); var replaceInfo = {}; replaceInfo.variables = []; @@ -48,11 +48,13 @@ function procesTooltipPattern(tbMap, pattern, datasources) { var offset = 0; for (var i=0;iLatitude: ${#"+latKeyIndex+":7}
Longitude: ${#"+lngKeyIndex+":7}" + tooltipPattern: subscriptionLocationSettings.tooltipPattern || "Latitude: ${latitude:7}
Longitude: ${longitude:7}" }; - locationsSettings.tooltipReplaceInfo = procesTooltipPattern(this, locationsSettings.tooltipPattern, this.subscription.datasources); + locationsSettings.tooltipReplaceInfo = procesTooltipPattern(this, locationsSettings.tooltipPattern, this.subscription.datasources, i); locationsSettings.useColorFunction = subscriptionLocationSettings.useColorFunction === true; if (angular.isDefined(subscriptionLocationSettings.colorFunction) && subscriptionLocationSettings.colorFunction.length > 0) { @@ -211,6 +214,7 @@ export default class TbMapWidget { latKeyName: "lat", lngKeyName: "lng", showLabel: true, + displayTooltip: true, label: "", labelColor: this.ctx.widgetConfig.color || '#000000', color: "#FE7569", diff --git a/ui/src/app/widget/lib/openstreet-map.js b/ui/src/app/widget/lib/openstreet-map.js index 77332d5677..65f7c7f06f 100644 --- a/ui/src/app/widget/lib/openstreet-map.js +++ b/ui/src/app/widget/lib/openstreet-map.js @@ -109,7 +109,9 @@ export default class TbOpenStreetMap { this.updateMarkerImage(marker, settings, settings.markerImage, settings.markerImageSize || 34); } - this.createTooltip(marker, settings.tooltipPattern, settings.tooltipReplaceInfo); + if (settings.displayTooltip) { + this.createTooltip(marker, settings.tooltipPattern, settings.tooltipReplaceInfo); + } if (onClickListener) { marker.on('click', onClickListener);