Module : Chart Intchart.com - Show chart in modal

app/controllers/element.js

@@ -312,6 +312,78 @@ myAppController.controller('ElementBaseController', function ($scope, $q, $inter
 
 });
 
+/**
+ * The controller that handles a device chart.
+ * @class ElementChartController
+ */
+myAppController.controller('ElementChartController', function ($scope, $sce, dataFactory, $interval) {
+    $scope.widgetChart = {
+        find: {},
+        alert: {message: false, status: 'is-hidden', icon: false},
+        hasURL : false,
+        intchartUrl : '',
+        url : {},
+        time : 0,
+        chartOptions: {
+            // Chart.js options can go here.
+            //responsive: true
+        }
+    };
+
+    /**
+     * Reload chart url
+     */
+    $scope.reloadUrl = function () {	
+    	dataFactory.getApi('devices', '/' + $scope.dataHolder.devices.find.id, true).then(function (response) { 	
+        	var device = response.data.data;
+
+            if($scope.widgetChart.time < device.metrics.intchartTime){   
+                $scope.widgetChart.find = device;             
+                $scope.widgetChart.intchartUrl = device.metrics.intchartUrl + '&' + new Date().getTime();
+                $scope.widgetChart.time = device.metrics.intchartTime;
+
+                $scope.widgetChart.url = $sce.trustAsResourceUrl($scope.widgetChart.intchartUrl);  	
+            } 
+        });
+    };
+
+    /**
+     * Load device
+     */
+    $scope.loadDeviceUrl = function () {  	
+    	$scope.widgetChart.alert = {message: $scope._t('loading'), status: 'alert-warning', icon: 'fa-spinner fa-spin'};  	
+
+    	dataFactory.getApi('devices', '/' + $scope.dataHolder.devices.find.id, true).then(function (response) {
+        	var device = response.data.data;  	
+            if (!device) {
+                $scope.widgetChart.alert = {message: $scope._t('error_load_data'), status: 'alert-danger', icon: 'fa-exclamation-triangle'};
+                return;
+            }       
+            $scope.widgetChart.find = device;
+
+            if (!device.metrics.intchartUrl){
+                $scope.widgetChart.alert = {message: $scope._t('error_load_data'), status: 'alert-danger', icon: 'fa-exclamation-triangle'};
+                return;
+            }
+
+            $scope.widgetChart.hasURL = true;
+            $scope.widgetChart.intchartUrl = device.metrics.intchartUrl;
+            $scope.widgetChart.time = device.metrics.intchartTime;
+            $scope.widgetChart.url = $sce.trustAsResourceUrl($scope.widgetChart.intchartUrl);
+
+            $scope.refreshInterval = $interval($scope.reloadUrl, $scope.cfg.interval);
+
+            $scope.widgetChart.alert = {message: false}; 
+
+        }, function (error) {
+        	$scope.widgetChart.alert = {message: $scope._t('error_load_data'), status: 'alert-danger', icon: 'fa-exclamation-triangle'};
+        });
+    };
+    $scope.loadDeviceUrl();
+
+});
+
+
 /**
  * The controller that handles a device history.
  * @class ElementHistoryController
@@ -1203,4 +1275,4 @@ myAppController.controller('ElementIconController', function ($scope, $timeout,
         console.log(output);
     }
     ;
-});
+});

dist/app/views/elements/list.html

@@ -13,6 +13,7 @@
             <div class="widget-header">
                 <!--{{$index}}| {{v.id}} | {{v.deviceType}}-->
                  <a class="widget-icon widget-hidden" href="" ng-click="setVisibility(v,true)" ng-if="!v.visibility"><i class="fa fa-eye-slash"></i></a>
+                <a class="widget-icon widget-history" href="" title="{{_t('chart')}}" ng-click="dataHolder.devices.find = v;handleModal('modalIntchart', $event)" ng-if="v.metrics.intchartUrl"><i class="fa fa-line-chart"></i></a>
                 <a class="widget-icon widget-history" href="" title="{{_t('history')}}" ng-click="dataHolder.devices.find = v;handleModal('modalHistory', $event)" ng-if="v.hasHistory"><i class="fa fa-history"></i></a>
                 <a class="widget-icon widget-config" href="#element/{{v.id}}" title="{{_t('lb_cfg_view')}}" ng-if="elementAccess(cfg.role_access.element)"><i class="fa fa-cog"></i></a>
             </div>
@@ -74,6 +75,7 @@ <h3 title="{{v.metrics.title}}">{{v.metrics.title|cutText:true:25}}</h3>
     </div>
 </div><!-- /.row -->
 <!-- Modal windows -->
+ <div ng-include="'app/views/elements/widgets/intchartModal.html'"></div>
  <div ng-include="'app/views/elements/widgets/historyModal.html'"></div>
  <div ng-include="'app/views/elements/widgets/switchMultilevelModal.html'"></div>
  <div ng-include="'app/views/elements/widgets/thermostatModal.html'"></div>
@@ -86,4 +88,4 @@ <h3 title="{{v.metrics.title}}">{{v.metrics.title|cutText:true:25}}</h3>
  <div ng-include="'app/views/elements/widgets/doorLockControlModal.html'"></div>
  <div ng-include="'app/views/elements/widgets/switchRGBWModal.html'"></div>
 <div ng-include="'app/views/elements/widgets/securityControlModal.html'"></div>
-
+

dist/app/views/elements/widgets/intchartModal.html

@@ -0,0 +1,16 @@
+<!-- modalIntchart -->
+<div id="modalIntchart" class="appmodal" ng-controller="ElementChartController" ng-if="modalArr.modalIntchart">
+	<div class="appmodal-in" style="min-height:128px">
+		<div class="appmodal-header">
+			<span class="appmodal-close" ng-click="handleModal('modalIntchart', $event)"><i class="fa fa-times"></i></span>
+			<h3>{{widgetChart.find.metrics.title}}</h3>
+		</div>
+		<div class="appmodal-body text-center">
+			<bb-alert alert="widgetChart.alert"></bb-alert>
+			<div ng-if="widgetChart.hasURL" ng-include="widgetChart.url">
+			</div>
+		</div>
+	</div>
+</div>
+
+