GUI -- Device details panel work - Panel resizes on window resize, DOM manipulation moved out of controller into directive.
Change-Id: I680984343ee550a3cf7c76183c257b69785750c4
diff --git a/web/gui/src/main/webapp/app/view/device/device.html b/web/gui/src/main/webapp/app/view/device/device.html
index 0c202e0..2e0045e 100644
--- a/web/gui/src/main/webapp/app/view/device/device.html
+++ b/web/gui/src/main/webapp/app/view/device/device.html
@@ -59,4 +59,6 @@
</div>
+ <device-details-panel></device-details-panel>
+
</div>
diff --git a/web/gui/src/main/webapp/app/view/device/device.js b/web/gui/src/main/webapp/app/view/device/device.js
index 03faf64..9fbbd8a 100644
--- a/web/gui/src/main/webapp/app/view/device/device.js
+++ b/web/gui/src/main/webapp/app/view/device/device.js
@@ -203,8 +203,7 @@
function respDetailsCb(data) {
$scope.panelData = data.details;
- populateDetails($scope.panelData);
- detailsPanel.show();
+ $scope.$apply();
}
function createDetailsPane() {
@@ -240,10 +239,6 @@
ttip = _ttip_;
var handlers = {};
$scope.panelData = [];
- pStartY = fs.noPxStyle(d3.select('.tabular-header'), 'height')
- + mast.mastHeight() + topPdg;
- wSize = fs.windowSize(pStartY);
- pHeight = wSize.height;
function selCb($event, row) {
selRow = angular.element($event.currentTarget);
@@ -260,17 +255,56 @@
tag: 'device',
selCb: selCb
});
- createDetailsPane();
// details panel handlers
handlers[detailsResp] = respDetailsCb;
wss.bindHandlers(handlers);
$scope.$on('$destroy', function () {
- ps.destroyPanel(pName);
wss.unbindHandlers(handlers);
});
$log.log('OvDeviceCtrl has been created');
+ }])
+
+ .directive('deviceDetailsPanel', ['$rootScope', '$window',
+ function ($rootScope, $window) {
+ return function (scope) {
+
+ function heightCalc() {
+ pStartY = fs.noPxStyle(d3.select('.tabular-header'), 'height')
+ + mast.mastHeight() + topPdg;
+ wSize = fs.windowSize(pStartY);
+ pHeight = wSize.height;
+ }
+ heightCalc();
+
+ createDetailsPane();
+
+ scope.$watch('panelData', function () {
+ if (!fs.isEmptyObject(scope.panelData)) {
+ populateDetails(scope.panelData);
+ detailsPanel.show();
+ }
+ });
+
+ $rootScope.$watchCollection(
+ function () {
+ return {
+ h: $window.innerHeight,
+ w: $window.innerWidth
+ }
+ }, function () {
+ if (!fs.isEmptyObject(scope.panelData)) {
+ heightCalc();
+ populateDetails(scope.panelData);
+ }
+ }
+ );
+
+ scope.$on('$destroy', function () {
+ ps.destroyPanel(pName);
+ });
+ };
}]);
}());