ONOS-2851 - Web UI - create archetype for table view based app.
- added uitab overlay archetype.
- renamed stuff so ui apps can coexist.
- WIP ... custom view source needs to be pared down.
Change-Id: I196e10d69ddc231eb0bc9cc5923f29872035b4fd
diff --git a/tools/package/archetypes/uitab/src/main/resources/archetype-resources/src/main/resources/app/view/sampleTable/sampleTable.css b/tools/package/archetypes/uitab/src/main/resources/archetype-resources/src/main/resources/app/view/sampleTable/sampleTable.css
new file mode 100644
index 0000000..703ac4d
--- /dev/null
+++ b/tools/package/archetypes/uitab/src/main/resources/archetype-resources/src/main/resources/app/view/sampleTable/sampleTable.css
@@ -0,0 +1,35 @@
+/* css for sample app view */
+
+#ov-sample h2 {
+ display: inline-block;
+}
+
+/* Panel Styling */
+#ov-sample-table-item-details-panel.floatpanel {
+ position: absolute;
+ top: 115px;
+}
+
+.light #ov-sample-table-item-details-panel.floatpanel {
+ background-color: rgb(229, 234, 237);
+}
+.dark #ov-sample-table-item-details-panel.floatpanel {
+ background-color: #3A4042;
+}
+
+#ov-sample-table-item-details-panel h3 {
+ margin: 0;
+ font-size: large;
+}
+
+#ov-sample-table-item-details-panel h4 {
+ margin: 0;
+}
+
+#ov-sample-table-item-details-panel td {
+ padding: 5px;
+}
+#ov-sample-table-item-details-panel td.label {
+ font-style: italic;
+ opacity: 0.8;
+}
diff --git a/tools/package/archetypes/uitab/src/main/resources/archetype-resources/src/main/resources/app/view/sampleTable/sampleTable.html b/tools/package/archetypes/uitab/src/main/resources/archetype-resources/src/main/resources/app/view/sampleTable/sampleTable.html
new file mode 100644
index 0000000..e20a94d
--- /dev/null
+++ b/tools/package/archetypes/uitab/src/main/resources/archetype-resources/src/main/resources/app/view/sampleTable/sampleTable.html
@@ -0,0 +1,46 @@
+<!-- partial HTML -->
+<div id="ov-sample-table">
+ <div class="tabular-header">
+ <h2>Items ({{tableData.length}} total)</h2>
+ <div class="ctrl-btns">
+ <div class="refresh" ng-class="{active: autoRefresh}"
+ icon icon-id="refresh" icon-size="36"
+ tooltip tt-msg="autoRefreshTip"
+ ng-click="toggleRefresh()"></div>
+ </div>
+ </div>
+
+ <div class="summary-list" onos-table-resize>
+
+ <div class="table-header" onos-sortable-header>
+ <table>
+ <tr>
+ <td colId="id" sortable>Item ID </td>
+ <td colId="label" sortable>Label </td>
+ <td colId="code" sortable>Code </td>
+ </tr>
+ </table>
+ </div>
+
+ <div class="table-body">
+ <table>
+ <tr ng-if="!tableData.length" class="no-data">
+ <td colspan="3">
+ No Items found
+ </td>
+ </tr>
+
+ <tr ng-repeat="item in tableData track by $index"
+ ng-click="selectCallback($event, item)"
+ ng-class="{selected: item.id === selId}">
+ <td>{{item.id}}</td>
+ <td>{{item.label}}</td>
+ <td>{{item.code}}</td>
+ </tr>
+ </table>
+ </div>
+
+ </div>
+
+ <ov-sample-table-item-details-panel></ov-sample-table-item-details-panel>
+</div>
diff --git a/tools/package/archetypes/uitab/src/main/resources/archetype-resources/src/main/resources/app/view/sampleTable/sampleTable.js b/tools/package/archetypes/uitab/src/main/resources/archetype-resources/src/main/resources/app/view/sampleTable/sampleTable.js
new file mode 100644
index 0000000..7b92555
--- /dev/null
+++ b/tools/package/archetypes/uitab/src/main/resources/archetype-resources/src/main/resources/app/view/sampleTable/sampleTable.js
@@ -0,0 +1,141 @@
+// js for sample app table view
+(function () {
+ 'use strict';
+
+ // injected refs
+ var $log, $scope, fs, wss;
+
+ // constants
+ var detailsReq = 'sampleTableDetailsRequest',
+ detailsResp = 'sampleTableDetailsResponse',
+ pName = 'ov-sample-table-item-details-panel',
+
+ propOrder = ['id', 'label', 'code'],
+ friendlyProps = ['Item ID', 'Item Label', 'Special Code'];
+
+
+ function addProp(tbody, index, value) {
+ var tr = tbody.append('tr');
+
+ function addCell(cls, txt) {
+ tr.append('td').attr('class', cls).html(txt);
+ }
+ addCell('label', friendlyProps[index] + ' :');
+ addCell('value', value);
+ }
+
+ function populatePanel(panel) {
+ var title = panel.append('h3'),
+ tbody = panel.append('table').append('tbody');
+
+ title.text('Item Details');
+
+ propOrder.forEach(function (prop, i) {
+ addProp(tbody, i, $scope.panelDetails[prop]);
+ });
+
+ panel.append('hr');
+ panel.append('h4').text('Comments');
+ panel.append('p').text($scope.panelDetails.comment);
+ }
+
+ function respDetailsCb(data) {
+ $scope.panelDetails = data.details;
+ $scope.$apply();
+ }
+
+ angular.module('ovSampleTable', [])
+ .controller('OvSampleTableCtrl',
+ ['$log', '$scope', 'TableBuilderService',
+ 'FnService', 'WebSocketService',
+
+ function (_$log_, _$scope_, tbs, _fs_, _wss_) {
+ $log = _$log_;
+ $scope = _$scope_;
+ fs = _fs_;
+ wss = _wss_;
+
+ var handlers = {};
+ $scope.panelDetails = {};
+
+ // details response handler
+ handlers[detailsResp] = respDetailsCb;
+ wss.bindHandlers(handlers);
+
+ // custom selection callback
+ function selCb($event, row) {
+ if ($scope.selId) {
+ wss.sendEvent(detailsReq, { id: row.id });
+ } else {
+ $scope.hidePanel();
+ }
+ $log.debug('Got a click on:', row);
+ }
+
+ // TableBuilderService creating a table for us
+ tbs.buildTable({
+ scope: $scope,
+ tag: 'sampleTable',
+ selCb: selCb
+ });
+
+ // cleanup
+ $scope.$on('$destroy', function () {
+ wss.unbindHandlers(handlers);
+ $log.log('OvSampleTableCtrl has been destroyed');
+ });
+
+ $log.log('OvSampleTableCtrl has been created');
+ }])
+
+ .directive('ovSampleTableItemDetailsPanel', ['PanelService', 'KeyService',
+ function (ps, ks) {
+ return {
+ restrict: 'E',
+ link: function (scope, element, attrs) {
+ // insert details panel with PanelService
+ // create the panel
+ var panel = ps.createPanel(pName, {
+ width: 200,
+ margin: 20,
+ hideMargin: 0
+ });
+ panel.hide();
+ scope.hidePanel = function () { panel.hide(); };
+
+ function closePanel() {
+ if (panel.isVisible()) {
+ $scope.selId = null;
+ panel.hide();
+ return true;
+ }
+ return false;
+ }
+
+ // create key bindings to handle panel
+ ks.keyBindings({
+ esc: [closePanel, 'Close the details panel'],
+ _helpFormat: ['esc']
+ });
+ ks.gestureNotes([
+ ['click', 'Select a row to show item details']
+ ]);
+
+ // update the panel's contents when the data is changed
+ scope.$watch('panelDetails', function () {
+ if (!fs.isEmptyObject(scope.panelDetails)) {
+ panel.empty();
+ populatePanel(panel);
+ panel.show();
+ }
+ });
+
+ // cleanup on destroyed scope
+ scope.$on('$destroy', function () {
+ ks.unbindKeys();
+ ps.destroyPanel(pName);
+ });
+ }
+ };
+ }]);
+}());
diff --git a/tools/package/archetypes/uitab/src/main/resources/archetype-resources/src/main/resources/css.html b/tools/package/archetypes/uitab/src/main/resources/archetype-resources/src/main/resources/css.html
new file mode 100644
index 0000000..26112b0
--- /dev/null
+++ b/tools/package/archetypes/uitab/src/main/resources/archetype-resources/src/main/resources/css.html
@@ -0,0 +1 @@
+<link rel="stylesheet" href="app/view/sampleTable/sampleTable.css">
\ No newline at end of file
diff --git a/tools/package/archetypes/uitab/src/main/resources/archetype-resources/src/main/resources/js.html b/tools/package/archetypes/uitab/src/main/resources/archetype-resources/src/main/resources/js.html
new file mode 100644
index 0000000..4bfa216
--- /dev/null
+++ b/tools/package/archetypes/uitab/src/main/resources/archetype-resources/src/main/resources/js.html
@@ -0,0 +1 @@
+<script src="app/view/sampleTable/sampleTable.js"></script>
\ No newline at end of file