EPG CRUD 34/39034/1
authorĽubomír Balogh <lubomir.balogh@pantheon.sk>
Wed, 18 May 2016 10:14:41 +0000 (12:14 +0200)
committerĽubomír Balogh <lubomir.balogh@pantheon.sk>
Wed, 18 May 2016 10:23:10 +0000 (12:23 +0200)
Signed-off-by: Ľubomír Balogh <lubomir.balogh@pantheon.sk>
groupbasedpolicy-ui/module/src/main/resources/gbp/epg/add-epg.controller.js [new file with mode: 0644]
groupbasedpolicy-ui/module/src/main/resources/gbp/epg/dialog-add-epg.tpl.html [new file with mode: 0644]
groupbasedpolicy-ui/module/src/main/resources/gbp/epg/epg.controller.js
groupbasedpolicy-ui/module/src/main/resources/gbp/epg/epg.service.js
groupbasedpolicy-ui/module/src/main/resources/gbp/epg/epg.tpl.html

diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/epg/add-epg.controller.js b/groupbasedpolicy-ui/module/src/main/resources/gbp/epg/add-epg.controller.js
new file mode 100644 (file)
index 0000000..eee5e77
--- /dev/null
@@ -0,0 +1,32 @@
+define([
+    'app/gbp/epg/epg.service'
+], function () {
+    'use strict';
+
+    angular.module('app.gbp').controller('AddEpgController', AddEpgController);
+
+    AddEpgController.$inject = ['$mdDialog', '$scope', 'EpgService', 'epg'];
+    /* @ngInject */
+    function AddEpgController($mdDialog, $scope, EpgService, epg) {
+        /* properties */
+        $scope.epg = epg ? epg : EpgService.createObject();
+
+        /* methods */
+        $scope.closeDialog = closeDialog;
+        $scope.save = save;
+
+        /* Implementations */
+
+        function closeDialog(){
+            $mdDialog.cancel();
+            $scope.getEpgList();
+        }
+
+        function save() {
+            $scope.epg.put($scope.rootTenant, function(data) {
+                $scope.closeDialog();
+            }, function(err) {
+            } );
+        }
+    }
+});
diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/epg/dialog-add-epg.tpl.html b/groupbasedpolicy-ui/module/src/main/resources/gbp/epg/dialog-add-epg.tpl.html
new file mode 100644 (file)
index 0000000..65b0483
--- /dev/null
@@ -0,0 +1,68 @@
+<md-dialog ng-cloak class="gbpDialogWrapper">
+    <form name="epgForm">
+        <md-toolbar>
+            <div class="md-toolbar-tools">
+                <h2>EPG</h2>
+                <span flex></span>
+                <md-button ng-click="closeDialog()" class="md-button">Close dialog</md-button>
+            </div>
+        </md-toolbar>
+        <md-dialog-content style="width:350px;">
+            <div layout="column" class="layout-padding-lr15">
+                <div layout="row">
+                    <md-input-container flex>
+                        <label>Id</label>
+                        <input name="id" ng-model="epg.data.id" ng-required="true">
+                        <div ng-messages="epgForm.id.$error" md-auto-hide="false">
+                            <div ng-message="required">Required field</div>
+                        </div>
+                    </md-input-container>
+                    <md-input-container flex>
+                        <label>Name</label>
+                        <input name="name" ng-model="epg.data.name" ng-required="true" ng-pattern="/^[a-zA-Z]([a-zA-Z0-9\\-_.])*$/">
+                        <div ng-messages="epgForm.name.$error" md-auto-hide="false">
+                            <div ng-message="required">Required field</div>
+                            <div ng-message="pattern">
+                                Invalid pattern.
+                                <md-tooltip md-direction="right" style="padding-left: 10px;">Value must matches: ^[a-zA-Z]([a-zA-Z0-9\\-_.])*$</md-tooltip>
+                            </div>
+                        </div>
+                    </md-input-container>
+                </div>
+                <div layout="row">
+                    <md-input-container flex>
+                        <label>Description</label>
+                        <input name="description" ng-model="epg.data.description">
+                    </md-input-container>
+                </div>
+                <div layout="row">
+                    <md-input-container flex>
+                        <label>intra-group-policy</label>
+                        <md-select name="intraGroupPolicy" ng-model="epg.data['intra-group-policy']">
+                            <md-option ng-repeat="igp in ['', 'allow', 'require-contract']" ng-value="igp">{{igp}}</md-option>
+                        </md-select>
+                    </md-input-container>
+                </div>
+                <div layout="row">
+                    <md-input-container flex>
+                        <label>network-domain</label>
+                        <input name="networkDomain" ng-model="epg.data['network-domain']">
+                    </md-input-container>
+                    <md-input-container flex>
+                        <label>parent</label>
+                        <input name="parent" ng-model="epg.data.parent">
+                    </md-input-container>
+                </div>
+            </div>
+        </md-dialog-content>
+        <md-dialog-actions layout="row">
+            <span flex></span>
+            <md-button ng-click="closeDialog()" class="md-primary">
+                Close
+            </md-button>
+            <md-button ng-click="save()" style="margin-right:20px;" ng-disabled="epgForm.$invalid" class="md-primary">
+                Save
+            </md-button>
+        </md-dialog-actions>
+    </form>
+</md-dialog>
index 56272301644ae476c6aa1dbaf7a6455842fed135..d3013969d364cc77916d95bd045dd9f7772ad47d 100644 (file)
@@ -6,16 +6,84 @@ define([
 
     angular.module('app.gbp').controller('EpgController', EpgController);
 
-    EpgController.$inject = ['$scope', 'EpgService', 'EpgListService'];
+    EpgController.$inject = ['$scope', '$stateParams', '$mdDialog', 'EpgService', 'EpgListService'];
 
-    function EpgController($scope, EpgService, EpgListService) {
-        $scope.epg = EpgService.createObject();
-        $scope.epg.get('epg_test', 'tenant_test');
-        console.log('Epg', $scope.epg);
+    function EpgController($scope, $stateParams, $mdDialog, EpgService, EpgListService) {
+        $scope.epgsTableQuery = {};
+
+        // $scope.epg = EpgService.createObject();
+        // $scope.epg.get($stateParams.epgId, $stateParams.tenantId);
 
         $scope.epgs = EpgListService.createList();
-        $scope.epgs.get('config', 'tenant2');
 
-        console.log('Epgs', $scope.epgs);
+        /* methods */
+        $scope.getEpgList = getEpgList;
+        $scope.openEpgDialog = openEpgDialog;
+        $scope.deleteEpgDialog = deleteEpgDialog;
+
+        init();
+
+        /* Implementations */
+
+        /**
+         * fills $scope.epgs array with data from data store
+         */
+        function getEpgList() {
+            if($stateParams.tenantId) {
+                $scope.epgs = EpgListService.createList();
+                $scope.epgs.get('config', $stateParams.tenantId);
+            }
+            else {
+                $scope.epgs = EpgListService.createList();
+                $scope.epgs.get('config', $scope.rootTenant);
+            }
+        }
+
+        /**
+         * Initializing function
+         */
+        function init() {
+            $scope.epgsTableQuery = {
+                order: 'data.id',
+                limit: 25,
+                page: 1,
+                options: [25, 50, 100],
+                filter: ''
+            };
+
+            getEpgList();
+        }
+
+        function openEpgDialog(epgData) {
+            $mdDialog.show({
+                clickOutsideToClose: true,
+                controller: 'AddEpgController',
+                preserveScope: true,
+                templateUrl: 'src/app/gbp/epg/dialog-add-epg.tpl.html',
+                parent: angular.element(document.body),
+                scope: $scope,
+                locals: {
+                    epg: epgData
+                }
+            });
+        }
+
+        function deleteEpgDialog(epgData) {
+            var confirm = $mdDialog.confirm()
+                .title('Delete EPG')
+                .textContent('Do you want to delete EPG ' + epgData.data.name + '?')
+                .ok('Delete')
+                .cancel('Cancel');
+
+            $mdDialog.show(confirm).then(function() {
+                epgData.deleteEpg($scope.rootTenant,
+                    function() {
+                        $scope.getEpgList();
+                    }
+                );
+            }, function() {
+
+            });
+        }
     }
 });
\ No newline at end of file
index bd2c0c58ee36dd858fa26e98d7497bfa11bbe93a..aee88c73ba4f862d749dd8af8b97d8b226051876 100644 (file)
@@ -20,6 +20,8 @@ define([], function() {
             /* methods */
             this.setData = setData;
             this.get = get;
+            this.put = put;
+            this.deleteEpg = deleteEpg;
 
             /* Implementation */
             /**
@@ -30,14 +32,14 @@ define([], function() {
                 this.data.id = data.id;
                 this.data.name = data.name;
                 this.data.description = data.description;
-                this.data.intraGroupPolicy = data['intra-group-policy'];
+                this.data['intra-group-policy'] = data['intra-group-policy'];
 
-                this.data.consumerNamedSelector = data['consumer-named-selector'];
-                this.data.providerNamedSelector = data['provider-named-selector'];
-                this.data.consumerTargetSelector = data['consumer-target-selector'];
-                this.data.providerTargerSelector = data['provider-target-selector'];
+                this.data['consumer-named-selector'] = data['consumer-named-selector'];
+                this.data['provider-named-selector'] = data['provider-named-selector'];
+                this.data['consumer-target-selector'] = data['consumer-target-selector'];
+                this.data['provider-target-selector'] = data['provider-target-selector'];
 
-                this.data.networkDomain = data['network-domain'];
+                this.data['network-domain'] = data['network-domain'];
                 this.data.parent = data.parent;
 
                 this.data.requirement = data.requirement;
@@ -59,6 +61,33 @@ define([], function() {
                     self.setData(data['endpoint-group'][0]);
                 });
             }
+
+            function put(idTenant, successCallback) {
+                var self = this;
+
+                var restObj = Restangular.one('restconf').one('config').one('policy:tenants').one('tenant')
+                    .one(idTenant).one('policy').one('endpoint-group').one(self.data.id),
+                    dataObj = {'endpoint-group': [self.data]};
+
+                return restObj.customPUT(dataObj).then(function(data) {
+                    successCallback(data);
+                }, function(res) {
+
+                });
+            }
+
+            function deleteEpg(idTenant, successCallback) {
+                var self = this;
+
+                var restObj = Restangular.one('restconf').one('config').one('policy:tenants').one('tenant')
+                    .one(idTenant).one('policy').one('endpoint-group').one(self.data.id);
+
+                return restObj.remove().then(function(data) {
+                    successCallback(data);
+                }, function(res) {
+
+                });
+            }
         }
 
         /**
index f391cc8bf88e1e268377f734c554c23121a1d759..52aec48a8ee3a82efea8a248e7d4c98210731f92 100644 (file)
@@ -1,9 +1,45 @@
-EPG<br/>
-id: {{epg.data.id}}<br/>
-name: {{epg.data.name}}<br/>
-description: {{epg.data.description}}<br/>
-intra-group-policy: {{epg.data.intraGroupPolicy}}<br/>
+<section flex layout="column">
+       <div flex layout="row">
+           <md-button ng-click="openEpgDialog()" class="md-primary">Add</md-button>
+           <md-button ng-click="getEpgList()" class="md-primary">Reload</md-button>
+       </div>
+    <md-table-container ng-if="epgs.data.length">
+        <table md-table>
+            <thead md-head md-order="epgsTableQuery.order">
+            <tr md-row>
+                   <th md-column md-order-by="data.id"><span>Id</span></th>
+                   <th md-column md-order-by="data.name"><span>Name</span></th>
+                   <th md-column md-order-by="data.description"><span>Description</span></th>
+                   <th md-column md-order-by="data['intra-group-policy']"><span>intra-group-policy</span></th>
+                   <th md-column md-order-by="data['network-domain']"><span>network-domain</span></th>
+                   <th md-column md-order-by="data.parent"><span>Parent</span></th>
+            </tr>
+            </thead>
+            <tbody md-body>
+            <tr md-row ng-repeat="epg in epgs.data | filter: epgsTableQuery.filter  | orderBy : epgsTableQuery.order | limitTo: epgsTableQuery.limit : (epgsTableQuery.page -1) * epgsTableQuery.limit">
+                   <td md-cell>{{epg.data.id}}</td>
+                   <td md-cell>{{epg.data.name}}</td>
+                   <td md-cell>{{epg.data.description}}</td>
+                   <td md-cell>{{epg.data['intra-group-policy']}}</td>
+                   <td md-cell>{{epg.data['network-domain']}}</td>
+                   <td md-cell>{{epg.data.parent}}</td>
+                <td md-cell>
+                    <md-button class="md-icon-button" ng-click="openEpgDialog(epg)">
+                        <md-icon>edit</md-icon>
+                    </md-button>
+                    <md-button class="md-icon-button" ng-click="deleteEpgDialog(epg)">
+                        <md-icon>delete</md-icon>
+                    </md-button>
+                </td>
+            </tr>
 
-<div ng-repeat="epgElement in epgs.data">
-    {{epgElement.data.id}}, {{epgElement.data.name}}, {{epgElement.data.description}}, {{epgElement.data.intraGroupPolicy}}, {{epgElement.data.networkDomain}}<br/>
-</div>
+            </tbody>
+        </table>
+        <md-table-pagination md-limit="epgsTableQuery.limit"
+                             md-page="epgsTableQuery.page"
+                             md-options="epgsTableQuery.options"
+                             md-total="{{epgs.data.length}}"
+                             md-page-select="options.pageSelect">
+        </md-table-pagination>
+    </md-table-container>
+</section>
\ No newline at end of file