Committed by
Gerrit Code Review
GUI -- Playing with application actions; converted to table builder; added selCB support.
Change-Id: I4fee554eadf443b09a786ce00eb5c63821eccca0
Showing
7 changed files
with
54 additions
and
54 deletions
... | @@ -53,7 +53,7 @@ public class ApplicationViewMessageHandler extends AbstractTabularViewMessageHan | ... | @@ -53,7 +53,7 @@ public class ApplicationViewMessageHandler extends AbstractTabularViewMessageHan |
53 | Arrays.sort(rows, rc); | 53 | Arrays.sort(rows, rc); |
54 | ArrayNode applications = generateArrayNode(rows); | 54 | ArrayNode applications = generateArrayNode(rows); |
55 | ObjectNode rootNode = mapper.createObjectNode(); | 55 | ObjectNode rootNode = mapper.createObjectNode(); |
56 | - rootNode.set("applications", applications); | 56 | + rootNode.set("apps", applications); |
57 | 57 | ||
58 | connection().sendMessage("appDataResponse", 0, rootNode); | 58 | connection().sendMessage("appDataResponse", 0, rootNode); |
59 | } | 59 | } | ... | ... |
... | @@ -80,6 +80,11 @@ table.summary-list th:last-child { | ... | @@ -80,6 +80,11 @@ table.summary-list th:last-child { |
80 | color: #ccc; | 80 | color: #ccc; |
81 | } | 81 | } |
82 | 82 | ||
83 | +/* rows are selectable */ | ||
84 | +table.summary-list td { | ||
85 | + cursor: pointer; | ||
86 | +} | ||
87 | + | ||
83 | .dark table.summary-list td { | 88 | .dark table.summary-list td { |
84 | color: #ccc; | 89 | color: #ccc; |
85 | } | 90 | } | ... | ... |
... | @@ -54,7 +54,7 @@ svg.embeddedIcon g.icon .glyph { | ... | @@ -54,7 +54,7 @@ svg.embeddedIcon g.icon .glyph { |
54 | /* color schemes for specific icon classes */ | 54 | /* color schemes for specific icon classes */ |
55 | 55 | ||
56 | svg.embeddedIcon .icon.appInactive .glyph { | 56 | svg.embeddedIcon .icon.appInactive .glyph { |
57 | - fill: rgba(166, 166, 166, 0.52); | 57 | + fill: none; |
58 | } | 58 | } |
59 | 59 | ||
60 | .light svg.embeddedIcon .icon.appActive .glyph { | 60 | .light svg.embeddedIcon .icon.appActive .glyph { | ... | ... |
... | @@ -34,7 +34,8 @@ | ... | @@ -34,7 +34,8 @@ |
34 | var handlers = {}, | 34 | var handlers = {}, |
35 | root = o.tag + 's', | 35 | root = o.tag + 's', |
36 | req = o.tag + 'DataRequest', | 36 | req = o.tag + 'DataRequest', |
37 | - resp = o.tag + 'DataResponse'; | 37 | + resp = o.tag + 'DataResponse', |
38 | + onSel = fs.isF(o.selCb); | ||
38 | 39 | ||
39 | o.self.tableData = []; | 40 | o.self.tableData = []; |
40 | 41 | ||
... | @@ -48,6 +49,13 @@ | ... | @@ -48,6 +49,13 @@ |
48 | } | 49 | } |
49 | o.scope.sortCallback = sortCb; | 50 | o.scope.sortCallback = sortCb; |
50 | 51 | ||
52 | + function selCb(sel) { | ||
53 | + o.scope.sel = (o.scope.sel === sel) ? null : sel; | ||
54 | + onSel && onSel(o.scope.sel); | ||
55 | + } | ||
56 | + o.scope.selectCallback = selCb; | ||
57 | + | ||
58 | + | ||
51 | handlers[resp] = respCb; | 59 | handlers[resp] = respCb; |
52 | wss.bindHandlers(handlers); | 60 | wss.bindHandlers(handlers); |
53 | 61 | ... | ... |
... | @@ -37,21 +37,25 @@ div.ctrl-btns div { | ... | @@ -37,21 +37,25 @@ div.ctrl-btns div { |
37 | cursor: pointer; | 37 | cursor: pointer; |
38 | } | 38 | } |
39 | 39 | ||
40 | -.light div.ctrl-btns div svg.embeddedIcon g.icon use { | 40 | +.light .ctrl-btns g.icon use { |
41 | - fill: white; | 41 | + fill: #fff; |
42 | } | 42 | } |
43 | -.dark div.ctrl-btns div svg.embeddedIcon g.icon use { | 43 | +.dark .ctrl-btns g.icon use { |
44 | fill: #333; | 44 | fill: #333; |
45 | } | 45 | } |
46 | 46 | ||
47 | -.light div.ctrl-btns div svg.embeddedIcon g.icon rect { | 47 | +.light .ctrl-btns g.icon rect { |
48 | - fill: #dde; | 48 | + fill: #bbb; |
49 | } | 49 | } |
50 | -.dark div.ctrl-btns div svg.embeddedIcon g.icon rect { | 50 | +.dark .ctrl-btns g.icon rect { |
51 | - fill: #556; | 51 | + fill: #444; |
52 | } | 52 | } |
53 | 53 | ||
54 | -/* rows are selectable */ | 54 | +/* Inactive */ |
55 | -table.summary-list td { | 55 | +.light .ctrl-btns .disabled g.icon rect { |
56 | - cursor: pointer; | 56 | + fill: #eee; |
57 | +} | ||
58 | +.dark .ctrl-btns .disabled g.icon rect { | ||
59 | + fill: #111; | ||
57 | } | 60 | } |
61 | + | ... | ... |
1 | <!-- app partial HTML --> | 1 | <!-- app partial HTML --> |
2 | <div id="ov-app"> | 2 | <div id="ov-app"> |
3 | <div> | 3 | <div> |
4 | - <h2>Applications ({{ctrl.appData.length}} total)</h2> | 4 | + <h2>Applications ({{ctrl.tableData.length}} total)</h2> |
5 | <div class="ctrl-btns"> | 5 | <div class="ctrl-btns"> |
6 | <div icon icon-size="36" icon-id="appPlus"></div> | 6 | <div icon icon-size="36" icon-id="appPlus"></div> |
7 | - <div icon icon-size="36" icon-id="appMinus"></div> | 7 | + <div icon icon-size="36" icon-id="appMinus" class="disabled"></div> |
8 | - <div icon icon-size="36" icon-id="appPlay"></div> | 8 | + <div icon icon-size="36" icon-id="appPlay" class="disabled"></div> |
9 | - <div icon icon-size="36" icon-id="appStop"></div> | 9 | + <div icon icon-size="36" icon-id="appStop" class="disabled"></div> |
10 | </div> | 10 | </div> |
11 | </div> | 11 | </div> |
12 | <table class="summary-list" | 12 | <table class="summary-list" |
... | @@ -24,9 +24,9 @@ | ... | @@ -24,9 +24,9 @@ |
24 | </thead> | 24 | </thead> |
25 | 25 | ||
26 | <tbody> | 26 | <tbody> |
27 | - <tr ng-repeat="app in ctrl.appData" | 27 | + <tr ng-repeat="app in ctrl.tableData" |
28 | - ng-click="setSelected(app.id)" | 28 | + ng-click="selectCallback(app)" |
29 | - ng-class="{selected: app.id === selectedAppId}" | 29 | + ng-class="{selected: app === sel}" |
30 | ng-repeat-done> | 30 | ng-repeat-done> |
31 | <td class="table-icon"> | 31 | <td class="table-icon"> |
32 | <div icon icon-id="{{app._iconid_state}}"></div> | 32 | <div icon icon-id="{{app._iconid_state}}"></div> | ... | ... |
... | @@ -23,38 +23,21 @@ | ... | @@ -23,38 +23,21 @@ |
23 | 23 | ||
24 | angular.module('ovApp', []) | 24 | angular.module('ovApp', []) |
25 | .controller('OvAppCtrl', | 25 | .controller('OvAppCtrl', |
26 | - ['$log', '$scope', 'FnService', 'WebSocketService', | 26 | + ['$log', '$scope', 'TableBuilderService', |
27 | - | 27 | + |
28 | - function ($log, $scope, fs, wss) { | 28 | + function ($log, $scope, tbs) { |
29 | - var self = this; | 29 | + function selCb(row) { |
30 | - self.appData = []; | 30 | + // adjust which toolbar buttons are selected |
31 | - | 31 | + $log.debug('Got a click on:', row); |
32 | - $scope.responseCallback = function(data) { | 32 | + } |
33 | - self.appData = data.applications; | 33 | + |
34 | - $scope.$apply(); | 34 | + tbs.buildTable({ |
35 | - }; | 35 | + self: this, |
36 | - | 36 | + scope: $scope, |
37 | - $scope.sortCallback = function (requestParams) { | 37 | + tag: 'app', |
38 | - wss.sendEvent('appDataRequest', requestParams); | 38 | + selCb: selCb |
39 | - }; | 39 | + }); |
40 | - | 40 | + |
41 | - $scope.selectedAppId = null; | 41 | + $log.log('OvAppCtrl has been created'); |
42 | - $scope.setSelected = function (appId) { | 42 | + }]); |
43 | - $scope.selectedAppId = appId; | ||
44 | - }; | ||
45 | - | ||
46 | - var handlers = { | ||
47 | - appDataResponse: $scope.responseCallback | ||
48 | - }; | ||
49 | - wss.bindHandlers(handlers); | ||
50 | - | ||
51 | - // Cleanup on destroyed scope | ||
52 | - $scope.$on('$destroy', function () { | ||
53 | - wss.unbindHandlers(handlers); | ||
54 | - }); | ||
55 | - | ||
56 | - $scope.sortCallback(); | ||
57 | - | ||
58 | - $log.log('OvAppCtrl has been created'); | ||
59 | - }]); | ||
60 | }()); | 43 | }()); | ... | ... |
-
Please register or login to post a comment