GUI -- Playing with application actions; converted to table builder; added selCB support.
Change-Id: I4fee554eadf443b09a786ce00eb5c63821eccca0
diff --git a/web/gui/src/main/java/org/onosproject/ui/impl/ApplicationViewMessageHandler.java b/web/gui/src/main/java/org/onosproject/ui/impl/ApplicationViewMessageHandler.java
index 800b57d..fbcb8f2 100644
--- a/web/gui/src/main/java/org/onosproject/ui/impl/ApplicationViewMessageHandler.java
+++ b/web/gui/src/main/java/org/onosproject/ui/impl/ApplicationViewMessageHandler.java
@@ -53,7 +53,7 @@
Arrays.sort(rows, rc);
ArrayNode applications = generateArrayNode(rows);
ObjectNode rootNode = mapper.createObjectNode();
- rootNode.set("applications", applications);
+ rootNode.set("apps", applications);
connection().sendMessage("appDataResponse", 0, rootNode);
}
diff --git a/web/gui/src/main/webapp/app/common.css b/web/gui/src/main/webapp/app/common.css
index ac3fff4..ff727a3 100644
--- a/web/gui/src/main/webapp/app/common.css
+++ b/web/gui/src/main/webapp/app/common.css
@@ -80,6 +80,11 @@
color: #ccc;
}
+/* rows are selectable */
+table.summary-list td {
+ cursor: pointer;
+}
+
.dark table.summary-list td {
color: #ccc;
}
diff --git a/web/gui/src/main/webapp/app/fw/svg/icon.css b/web/gui/src/main/webapp/app/fw/svg/icon.css
index 3e8c433..872c476 100644
--- a/web/gui/src/main/webapp/app/fw/svg/icon.css
+++ b/web/gui/src/main/webapp/app/fw/svg/icon.css
@@ -54,7 +54,7 @@
/* color schemes for specific icon classes */
svg.embeddedIcon .icon.appInactive .glyph {
- fill: rgba(166, 166, 166, 0.52);
+ fill: none;
}
.light svg.embeddedIcon .icon.appActive .glyph {
diff --git a/web/gui/src/main/webapp/app/fw/widget/tableBuilder.js b/web/gui/src/main/webapp/app/fw/widget/tableBuilder.js
index ae5f13b..a9330d1 100644
--- a/web/gui/src/main/webapp/app/fw/widget/tableBuilder.js
+++ b/web/gui/src/main/webapp/app/fw/widget/tableBuilder.js
@@ -34,7 +34,8 @@
var handlers = {},
root = o.tag + 's',
req = o.tag + 'DataRequest',
- resp = o.tag + 'DataResponse';
+ resp = o.tag + 'DataResponse',
+ onSel = fs.isF(o.selCb);
o.self.tableData = [];
@@ -48,6 +49,13 @@
}
o.scope.sortCallback = sortCb;
+ function selCb(sel) {
+ o.scope.sel = (o.scope.sel === sel) ? null : sel;
+ onSel && onSel(o.scope.sel);
+ }
+ o.scope.selectCallback = selCb;
+
+
handlers[resp] = respCb;
wss.bindHandlers(handlers);
diff --git a/web/gui/src/main/webapp/app/view/app/app.css b/web/gui/src/main/webapp/app/view/app/app.css
index 9de3e17..481708d 100644
--- a/web/gui/src/main/webapp/app/view/app/app.css
+++ b/web/gui/src/main/webapp/app/view/app/app.css
@@ -37,21 +37,25 @@
cursor: pointer;
}
-.light div.ctrl-btns div svg.embeddedIcon g.icon use {
- fill: white;
+.light .ctrl-btns g.icon use {
+ fill: #fff;
}
-.dark div.ctrl-btns div svg.embeddedIcon g.icon use {
+.dark .ctrl-btns g.icon use {
fill: #333;
}
-.light div.ctrl-btns div svg.embeddedIcon g.icon rect {
- fill: #dde;
+.light .ctrl-btns g.icon rect {
+ fill: #bbb;
}
-.dark div.ctrl-btns div svg.embeddedIcon g.icon rect {
- fill: #556;
+.dark .ctrl-btns g.icon rect {
+ fill: #444;
}
-/* rows are selectable */
-table.summary-list td {
- cursor: pointer;
+/* Inactive */
+.light .ctrl-btns .disabled g.icon rect {
+ fill: #eee;
}
+.dark .ctrl-btns .disabled g.icon rect {
+ fill: #111;
+}
+
diff --git a/web/gui/src/main/webapp/app/view/app/app.html b/web/gui/src/main/webapp/app/view/app/app.html
index 380db5e..6627691 100644
--- a/web/gui/src/main/webapp/app/view/app/app.html
+++ b/web/gui/src/main/webapp/app/view/app/app.html
@@ -1,12 +1,12 @@
<!-- app partial HTML -->
<div id="ov-app">
<div>
- <h2>Applications ({{ctrl.appData.length}} total)</h2>
+ <h2>Applications ({{ctrl.tableData.length}} total)</h2>
<div class="ctrl-btns">
<div icon icon-size="36" icon-id="appPlus"></div>
- <div icon icon-size="36" icon-id="appMinus"></div>
- <div icon icon-size="36" icon-id="appPlay"></div>
- <div icon icon-size="36" icon-id="appStop"></div>
+ <div icon icon-size="36" icon-id="appMinus" class="disabled"></div>
+ <div icon icon-size="36" icon-id="appPlay" class="disabled"></div>
+ <div icon icon-size="36" icon-id="appStop" class="disabled"></div>
</div>
</div>
<table class="summary-list"
@@ -24,9 +24,9 @@
</thead>
<tbody>
- <tr ng-repeat="app in ctrl.appData"
- ng-click="setSelected(app.id)"
- ng-class="{selected: app.id === selectedAppId}"
+ <tr ng-repeat="app in ctrl.tableData"
+ ng-click="selectCallback(app)"
+ ng-class="{selected: app === sel}"
ng-repeat-done>
<td class="table-icon">
<div icon icon-id="{{app._iconid_state}}"></div>
diff --git a/web/gui/src/main/webapp/app/view/app/app.js b/web/gui/src/main/webapp/app/view/app/app.js
index e315072..666b737 100644
--- a/web/gui/src/main/webapp/app/view/app/app.js
+++ b/web/gui/src/main/webapp/app/view/app/app.js
@@ -23,38 +23,21 @@
angular.module('ovApp', [])
.controller('OvAppCtrl',
- ['$log', '$scope', 'FnService', 'WebSocketService',
+ ['$log', '$scope', 'TableBuilderService',
- function ($log, $scope, fs, wss) {
- var self = this;
- self.appData = [];
+ function ($log, $scope, tbs) {
+ function selCb(row) {
+ // adjust which toolbar buttons are selected
+ $log.debug('Got a click on:', row);
+ }
- $scope.responseCallback = function(data) {
- self.appData = data.applications;
- $scope.$apply();
- };
+ tbs.buildTable({
+ self: this,
+ scope: $scope,
+ tag: 'app',
+ selCb: selCb
+ });
- $scope.sortCallback = function (requestParams) {
- wss.sendEvent('appDataRequest', requestParams);
- };
-
- $scope.selectedAppId = null;
- $scope.setSelected = function (appId) {
- $scope.selectedAppId = appId;
- };
-
- var handlers = {
- appDataResponse: $scope.responseCallback
- };
- wss.bindHandlers(handlers);
-
- // Cleanup on destroyed scope
- $scope.$on('$destroy', function () {
- wss.unbindHandlers(handlers);
- });
-
- $scope.sortCallback();
-
- $log.log('OvAppCtrl has been created');
- }]);
+ $log.log('OvAppCtrl has been created');
+ }]);
}());