Patch Panel Application with Ui
Change-Id: I0906983cf494ce82de233e8bfbd66b60d0792c89
diff --git a/apps/patchpanel/src/main/resources/app/view/sampleCustom/sampleCustom.css b/apps/patchpanel/src/main/resources/app/view/sampleCustom/sampleCustom.css
new file mode 100644
index 0000000..ffeac0a
--- /dev/null
+++ b/apps/patchpanel/src/main/resources/app/view/sampleCustom/sampleCustom.css
@@ -0,0 +1,48 @@
+/* css for sample app custom view */
+
+#ov-sample-custom {
+ padding: 20px;
+}
+.light #ov-sample-custom {
+ color: navy;
+}
+.dark #ov-sample-custom {
+ color: #88f;
+}
+
+#ov-sample-custom .button-panel {
+ margin: 10px;
+ width: 200px;
+}
+
+.light #ov-sample-custom .button-panel {
+ background-color: #ccf;
+}
+.dark #ov-sample-custom .button-panel {
+ background-color: #444;
+}
+
+#ov-sample-custom .my-button {
+ cursor: pointer;
+ padding: 4px;
+ text-align: center;
+}
+
+.light #ov-sample-custom .my-button {
+ color: white;
+ background-color: #99d;
+}
+.dark #ov-sample-custom .my-button {
+ color: black;
+ background-color: #aaa;
+}
+
+#ov-sample-custom .number {
+ font-size: 140%;
+ text-align: right;
+}
+
+#ov-sample-custom .quote {
+ margin: 10px 20px;
+ font-style: italic;
+}
\ No newline at end of file
diff --git a/apps/patchpanel/src/main/resources/app/view/sampleCustom/sampleCustom.html b/apps/patchpanel/src/main/resources/app/view/sampleCustom/sampleCustom.html
new file mode 100644
index 0000000..34204b4
--- /dev/null
+++ b/apps/patchpanel/src/main/resources/app/view/sampleCustom/sampleCustom.html
@@ -0,0 +1,54 @@
+<!-- partial HTML of patch panel app -->
+<div id="ov-sample-custom" ng-controller="OvSampleCustomCtrl">
+ <div class="button-panel">
+ <div class="my-button" ng-click="getData()">
+ Load Devices
+ </div>
+
+ </div>
+ <div class="data-panel">
+ <div>
+ <label>Devices:
+ <select ng-model="myDev" ng-options="dev.name for dev in devices"></select>
+ </label>
+
+ </div>
+ </div>
+ <div class="button-panel">
+ <div class="my-button" ng-click="loadPorts()">
+ Load Ports
+ </div>
+ </div>
+ <div class="data-panel2">
+ <label>First Port:
+ <select ng-model="myPort1" ng-options="port.name for port in ports"></select>
+ </label>
+ <label>Second Port:
+ <select ng-model="myPort2" ng-options="port.name for port in ports"></select>
+ </label>
+ </div>
+ <div class="button-panel">
+ <div class="my-button" ng-click="done()">
+ Patch!
+ </div>
+ </div>
+ <div class="data-panel3">
+ <p>
+ <span class="quote">{{data.message}} </span>
+ </p>
+ <pre>
+
+
+ </pre>
+ </div>
+ <div class="button-panel">
+ <div class="my-button" ng-click="used()">
+ ConnectPoints in use
+ </div>
+ </div>
+ <div class="data-panel4">
+ <p>
+ <span class="quote">{{data.cpoints}} </span>
+ </p>
+ </div>
+</div>
\ No newline at end of file
diff --git a/apps/patchpanel/src/main/resources/app/view/sampleCustom/sampleCustom.js b/apps/patchpanel/src/main/resources/app/view/sampleCustom/sampleCustom.js
new file mode 100644
index 0000000..08902e3
--- /dev/null
+++ b/apps/patchpanel/src/main/resources/app/view/sampleCustom/sampleCustom.js
@@ -0,0 +1,122 @@
+// js for patch panel app custom view
+(function () {
+ 'use strict';
+
+ // injected refs
+ var $log, $scope, wss, ks;
+
+ // constants
+ var dataReq = 'sampleCustomDataRequest',
+ dataResp = 'sampleCustomDataResponse';
+ var dataReq2 = 'sampleCustomDataRequest2',
+ dataResp2 = 'sampleCustomDataResponse2';
+ var dataReq3 = 'sampleCustomDataRequest3',
+ dataResp3 = 'sampleCustomDataResponse3';
+
+
+ function addKeyBindings() {
+ var map = {space: [getData, 'Fetch data from server'], _helpFormat: [['space']]};
+ ks.keyBindings(map);
+
+ }
+
+ function getData() {
+ wss.sendEvent(dataReq);
+ }
+ function used() {
+ wss.sendEvent(dataReq3);
+ }
+ function loadPorts(){
+ $scope.ports = [];
+ var i;
+ var index;
+ for(i = 0; i < $scope.cps.length ; i++){
+ if($scope.cps[i] == $scope.myDev){
+ index = i;
+ }
+ }
+ var j = index+1;
+ while( $scope.data.cps[j].indexOf("o") != 0){
+ var tempi = {name : $scope.data.cps[j]};
+ $scope.ports.push(tempi);
+ j++;
+ }
+ }
+ function done(){
+ var temp = [$scope.myDev.name, $scope.myPort1.name, $scope.myPort2.name];
+ var temp1 = {result : temp};
+ wss.sendEvent(dataReq2, temp1);
+
+ }
+ function respDataCb(data) {
+ $scope.data = data;
+ $scope.cps = [];
+ $scope.devices = [];
+ var i;
+ for(i = 0; i < $scope.data.cps.length; i++){
+ $scope.cps.push(temp);
+ if($scope.data.cps[i].indexOf("o") == 0){
+ var temp = {name : $scope.data.cps[i]};
+ $scope.devices.push(temp);
+ }
+ }
+ $scope.$apply();
+ }
+ function respDataCb2(data) {
+ $scope.data = data;
+ $scope.$apply();
+ }
+ function respDataCb3(data) {
+ $scope.data = data;
+ $scope.$apply();
+ }
+
+ var app = angular.module('ovSampleCustom', [])
+ .controller('OvSampleCustomCtrl',
+ ['$log', '$scope', 'WebSocketService', 'KeyService',
+
+ function (_$log_, _$scope_, _wss_, _ks_) {
+ $log = _$log_;
+ $scope = _$scope_;
+ wss = _wss_;
+ ks = _ks_;
+
+ $scope.cps = [];
+ $scope.devices = [];
+ $scope.ports = [];
+ $scope.myDev = $scope.devices[0];
+ $scope.myPort1 = $scope.ports[0];
+ $scope.myPort2 = $scope.ports[0];
+
+
+ var handlers = {};
+ $scope.data = {};
+
+ // data response handler
+ handlers[dataResp] = respDataCb;
+ handlers[dataResp2] = respDataCb2;
+ handlers[dataResp3] = respDataCb3;
+ wss.bindHandlers(handlers);
+
+ addKeyBindings();
+
+ // custom click handler
+ $scope.getData = getData;
+ $scope.loadPorts = loadPorts;
+ $scope.used = used;
+ $scope.done = done;
+
+ // cleanup
+ $scope.$on('$destroy', function () {
+ wss.unbindHandlers(handlers);
+ ks.unbindKeys();
+ $log.log('OvSampleCustomCtrl has been destroyed');
+ });
+
+ $log.log('OvSampleCustomCtrl has been created');
+ }]);
+
+
+
+}());
+