Integration of Client pages to Main GUI
authorseshukm <seshu.kumar.m@huawei.com>
Thu, 6 Apr 2017 11:53:36 +0000 (17:23 +0530)
committerseshukm <seshu.kumar.m@huawei.com>
Thu, 6 Apr 2017 11:53:36 +0000 (17:23 +0530)
IssueId : CLIENT-189

Change-Id: I616498c3dbf030a85151f42e3f692297da68249e
Signed-off-by: seshukm <seshu.kumar.m@huawei.com>
provincemgr/src/main/webapp/bak/provincemgr/index.html [new file with mode: 0644]
provincemgr/src/main/webapp/bak/provincemgr/js/app.js [new file with mode: 0644]
provincemgr/src/main/webapp/bak/provincemgr/js/rest.js [new file with mode: 0644]
provincemgr/src/main/webapp/bak/provincemgr/templates/management.html [new file with mode: 0644]
provincemgr/src/main/webapp/provincemgr/js/DataService.js [new file with mode: 0644]
provincemgr/src/main/webapp/provincemgr/templates/templateContainer.html [new file with mode: 0644]
provincemgr/src/main/webapp/provincemgr/templates/templateFunctional.html [new file with mode: 0644]
provincemgr/src/main/webapp/provincemgr/templates/templateNotification.html [new file with mode: 0644]
provincemgr/src/main/webapp/provincemgr/templates/templateWidget.html [new file with mode: 0644]

diff --git a/provincemgr/src/main/webapp/bak/provincemgr/index.html b/provincemgr/src/main/webapp/bak/provincemgr/index.html
new file mode 100644 (file)
index 0000000..f53edcc
--- /dev/null
@@ -0,0 +1,49 @@
+<!--
+
+    Copyright 2017, Huawei Technologies Co., Ltd.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+
+-->
+
+<!DOCTYPE html>
+<html>
+<head lang="en">
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Province Management</title>
+    <link href="thirdparty/css/bootstrap.min.css" rel="stylesheet"/>
+    <link href="thirdparty/css/font-awesome.min.css" rel="stylesheet">
+    <link href="thirdparty/css/zTreeStyle.css" rel="stylesheet"/>
+    <link href="thirdparty/css/magic-check.css" rel="stylesheet"/>
+    <link href="thirdparty/css/ng-table.min.css" rel="stylesheet"/>
+    <link href="framework/css/open-ostyle.css" rel="stylesheet"/>
+    <script src="thirdparty/js/angular.min.js"></script>
+    <script src="thirdparty/js/angular-ui-router.min.js"></script>
+    <script src="thirdparty/js/ng-table.min.js"></script>
+    <script src="thirdparty/js/jquery_1.12.4.min.js"></script>
+    <script src="thirdparty/js/jquery-ui.js"></script>
+    <script type="text/javascript" src="thirdparty/js/bootstrap.min.js"></script>
+    <script src="js/app.js"></script>
+    <script src="js/rest.js"></script>
+    <script src="framework/js/DataService.js"></script>
+    <script src="thirdparty/js/mustache.js"></script>
+    <script src="thirdparty/js/jquery.ztree.core-3.5.js"></script>
+
+</head>
+
+<body ng-app="ProvinceManagementApp" onload="loadTemplate()">
+<ui-view></ui-view>
+</body>
+</html>
\ No newline at end of file
diff --git a/provincemgr/src/main/webapp/bak/provincemgr/js/app.js b/provincemgr/src/main/webapp/bak/provincemgr/js/app.js
new file mode 100644 (file)
index 0000000..b8979dd
--- /dev/null
@@ -0,0 +1,303 @@
+/*\r
+\r
+ Copyright 2017, Huawei Technologies Co., Ltd.\r
+\r
+ Licensed under the Apache License, Version 2.0 (the "License");\r
+ you may not use this file except in compliance with the License.\r
+ You may obtain a copy of the License at\r
+\r
+      http://www.apache.org/licenses/LICENSE-2.0\r
+\r
+ Unless required by applicable law or agreed to in writing, software\r
+ distributed under the License is distributed on an "AS IS" BASIS,\r
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
+ See the License for the specific language governing permissions and\r
+ limitations under the License.\r
+\r
+ */\r
+\r
+var app = angular.module("ProvinceManagementApp", ["ui.router", "ngTable"])\r
+\r
+    .config(function($stateProvider, $urlRouterProvider, $urlMatcherFactoryProvider){\r
+\r
+        $urlMatcherFactoryProvider.caseInsensitive(true);\r
+        $urlRouterProvider.otherwise('/provinceMgmt');\r
+        $stateProvider\r
+            .state("" +\r
+                "provinceMgmt", {\r
+                url: "/provinceMgmt",\r
+                templateUrl : "templates/management.html",\r
+                controller : "managementCtrl"\r
+            })\r
+    })\r
+\r
+\r
+    .controller("managementCtrl", function($scope, $log, provinceDataService, $state, $compile, NgTableParams){\r
+        $scope.message = "Management";\r
+\r
+        $scope.init = function() {\r
+            provinceDataService.getAllProvinceData()\r
+                .then(function(data){\r
+                    $scope.provinceData = data.provinceData;\r
+                    console.log("Data: ");\r
+                    loadButtons();\r
+                    $log.info(data.provinceData);\r
+                }, function(reason){\r
+                    $scope.message = "Error is :" + JSON.stringify(reason);\r
+                });\r
+\r
+            /*DataService.post("http://localhost:4000/api/getAllJSONData", {"wdgtType":$scope.provinceTip})\r
+                .then(function(data){\r
+                    $scope.provinceTipData = data.data.provinceTip;\r
+                });*/\r
+        }\r
+\r
+        function loadButtons() {\r
+\r
+            console.log("modelTemplate issss"+modelTemplate);\r
+            var def_button_tpl = $(modelTemplate).filter('#defaultButtons').html();\r
+            var def_iconbutton_tpl = $(modelTemplate).filter('#defaultIconButtons').html();\r
+            var dialog = $(modelTemplate).filter('#dialog').html();\r
+\r
+            var add_data = {"title":"Create", "type":"btn btn-default", "gType": "plus-icon", "iconPosition":"left", "clickAction":"showAddModal()"};\r
+\r
+            var delete_data = {"title":"Delete Selected", "type":"btn btn-default", "gType": "delete-icon", "iconPosition":"left", "clickAction":"deleteData()"};\r
+            var addhtml = Mustache.to_html(def_iconbutton_tpl, add_data);\r
+            var deletehtml = Mustache.to_html(def_iconbutton_tpl, delete_data);\r
+            $('#provinceAction').html($compile(addhtml)($scope));\r
+\r
+\r
+\r
+            $('#provinceAction').append($compile(deletehtml)($scope));\r
+\r
+            $('#managementDialog').html($compile(dialog)($scope));\r
+\r
+            $scope.checkboxes = { 'checked': false, items: {} };\r
+\r
+            $scope.tableParams = new NgTableParams({count: 5, sorting: {province_name: 'asc'}    //{page: 1,count: 10,filter: {name: 'M'},sorting: {name: 'desc'}\r
+            }, { counts:[5, 10, 20, 50], dataset: $scope.provinceData});\r
+\r
+            $scope.$watch('checkboxes.checked', function(value) {\r
+                angular.forEach($scope.provinceData, function(item) {\r
+                    if (angular.isDefined(item.id)) {\r
+                        $scope.checkboxes.items[item.id] = value;\r
+                    }\r
+                });\r
+            });\r
+\r
+            var text = $(modelTemplate).filter('#textfield').html();\r
+            var ipv4 = $(modelTemplate).filter('#ipv4').html();\r
+            var number = $(modelTemplate).filter('#numeric').html();\r
+\r
+            $('#managementDialog .modalHeader').html('<h5 class="modal-title titlestyle">Modal Header</h5>');\r
+            $('#managementDialog .modalBodyContent').html('<div class="form-group row"> <label class="col-xs-4 col-form-label labelstyle">Name</label> <div class="col-xs-8 provinceName" > </div> </div>');\r
+            $('#managementDialog .modalBodyContent').append('<div class="form-group row"> <label class="col-xs-4 col-form-label labelstyle">IP Address</label> <div class="col-xs-8 ipAddress" > </div> </div>');\r
+            $('#managementDialog .modalBodyContent').append(' <div class="form-group row"> <label for="port" class="col-xs-4 col-form-label labelstyle">Port</label> <div class="col-xs-8 port" > </div> </div>');\r
+            $('#managementDialog .modalBodyContent').append(' <div class="form-group row"> <label for="desc" class="col-xs-4 col-form-label labelstyle">Description</label> <div class="col-xs-8 desc" > </div> </div>');\r
+\r
+\r
+\r
+            var dataText = {"ErrMsg" :     {"errmsg" : "Please input Name.", "modalVar":"province.province_name", "placeholder":"Name", "errtag":"ptextboxErr", "errfunc":"validatetextbox", "required":true}};\r
+            $('#managementDialog .provinceName').html($compile(Mustache.to_html(text, dataText.ErrMsg))($scope));\r
+\r
+            var dataIP = {"ErrMsg" :     {"errmsg" : "Please input IP Address.", "modalVar":"province.ip", "placeholder":"IP Address"}};\r
+            $('#managementDialog .ipAddress').html($compile(Mustache.to_html(ipv4, dataIP.ErrMsg))($scope));\r
+\r
+            var dataNum = {"ErrMsg" :     {"errmsg" : "Please input port.", "modalVar":"province.port", "placeholder":"Port"}};\r
+            $('#managementDialog .port').html($compile(Mustache.to_html(number, dataNum.ErrMsg))($scope));\r
+\r
+            var dataText = {"ErrMsg" :     {"errmsg" : "Please input description.", "modalVar":"province.desc", "placeholder":"Description"}};\r
+            $('#managementDialog .desc').html($compile(Mustache.to_html(text, dataText.ErrMsg))($scope));\r
+\r
+            var modelSubmit_data = {"title":"OK", "clickAction":"saveData(province.id)"};\r
+            var modelSubmit_html = Mustache.to_html(def_button_tpl, modelSubmit_data);\r
+            $('#managementDialog #footerBtns').html($compile(modelSubmit_html)($scope));\r
+\r
+            var modelBtn_data = {"title":"Cancel", "clickAction":"closeModal()"};\r
+            var modelBtn_html = Mustache.to_html(def_button_tpl, modelBtn_data);\r
+            $('#managementDialog #footerBtns').append($compile(modelBtn_html)($scope));\r
+        }\r
+\r
+        $scope.validatetextbox = function (value){\r
+            if($scope.province.province_name) {\r
+                $scope.ptextboxErr = false;\r
+            }\r
+            else\r
+                $scope.ptextboxErr = true;\r
+        }\r
+\r
+        $scope.checkAll = function() {\r
+            console.log("Checked ..");\r
+            angular.forEach($scope.provinceData, function(data) {\r
+                $scope.checkboxes.items[user.id]\r
+            });\r
+        };\r
+\r
+        $scope.closeModal = function() {\r
+            console.log("Closing Modal...");\r
+            $('#uniModal').modal('hide');\r
+            console.log("@@@@@@@@@@@@@@@@@@");\r
+            $state.reload();\r
+        }\r
+\r
+        $scope.showAddModal = function() {\r
+            console.log("Showing Modal to Add data");\r
+            $scope.province = {};\r
+            $scope.textboxErr = false;\r
+            $scope.ipv4Err = false;\r
+            $scope.numericErr = false;\r
+            //$("#myModal").modal();\r
+            $("#uniModal").modal({}).draggable();\r
+        }\r
+        $scope.saveData = function(id) {\r
+            if(id) {\r
+                //edit data\r
+                console.log("Editing data.." + JSON.stringify($scope.province));\r
+                provinceDataService.editProvinceData($scope.province)\r
+                    .then(function (data) {\r
+                            $scope.message = "Success :-)";\r
+                            $state.reload();\r
+                        },\r
+                        function (reason) {\r
+                            $scope.message = reason.status + " " + reason.statusText;\r
+                        });\r
+            }\r
+            else {\r
+                console.log("Adding data.." + JSON.stringify($scope.province));\r
+                provinceDataService.addProvinceData($scope.province)\r
+                    .then(function (data) {\r
+                            $scope.message = "Success :-)";\r
+                            $state.reload();\r
+                        },\r
+                        function (reason) {\r
+                            $scope.message = reason.status + " " + reason.statusText;\r
+                        });\r
+            }\r
+            $('#uniModal').modal('hide');\r
+        }\r
+\r
+        /*$scope.deleteIndividualData = function(id) {\r
+            var deleteArr = [];\r
+            //$log.info($scope.checkboxes);\r
+            deleteArr.push(id);\r
+\r
+            console.log("To be deleted : "+deleteArr);\r
+            //$log.info(deleteArr);\r
+\r
+\r
+            provinceDataService.post("http://localhost:4000/api/deleteProvinceData", {'idList':deleteArr})\r
+                .then(function(data){\r
+                        $scope.message = "Successfully deleted :-)";\r
+                        $state.reload();\r
+                    },\r
+                    function(reason){\r
+                        //$log.info(reason);\r
+                        $scope.message = reason.status + " " + reason.statusText;\r
+                    });\r
+        }*/\r
+        $scope.deleteData = function(id) {\r
+            var confirmation=false;\r
+            var dialog_tpl = $(modelTemplate).filter('#personDialog').html();\r
+            var error = {"err_data" : { "title": "Error",\r
+                "showClose": "true",\r
+                "closeBtnTxt": "Cancel",\r
+                "icon": "glyphicon glyphicon-exclamation-sign",\r
+                "iconColor": "icon_error",\r
+                "msg": "Do you really wanted to Delete?.",\r
+                "buttons": [\r
+                    {\r
+                        "text": "OK", "action": "deleteConfirmation("+id+")"\r
+                    }]\r
+            }};\r
+            angular.forEach($scope.checkboxes.items, function(value) {\r
+                if(value) {\r
+                    checkbox = true;\r
+                }\r
+            });\r
+            if (checkbox || (typeof id !== "undefined")) {\r
+                var html = Mustache.to_html(dialog_tpl, error.err_data);\r
+                $($compile(html)($scope)).modal({backdrop: "static"});\r
+            }\r
+        }\r
+\r
+        $scope.deleteConfirmation = function(id) {\r
+            console.log("data in province data is :");\r
+            $log.info($scope.provinceData);\r
+            var deleteArr = [];\r
+            if (typeof id !== "undefined"){\r
+\r
+                deleteArr.push(id);\r
+            }else{\r
+                angular.forEach($scope.checkboxes.items, function (value, key) {\r
+                    if (value) {\r
+                        console.log("deleting name is :" + key);\r
+                        deleteArr.push(key);\r
+                    }\r
+                });\r
+\r
+            }\r
+\r
+            console.log("To be deleted : " + deleteArr);\r
+\r
+            for(var i = 0; i < deleteArr.length; i++) {\r
+                console.log("To be deleted : "+deleteArr[i]);\r
+                provinceDataService.deleteProvinceData(deleteArr[i])\r
+                    .then(function(data){\r
+                            $scope.message = "Successfully deleted :-)";\r
+                            $state.reload();\r
+                        },\r
+                        function(reason){\r
+                            $scope.message = reason.status + " " + reason.statusText;\r
+                        });\r
+            }\r
+\r
+           /* provinceDataService.post("http://localhost:4000/api/deleteProvinceData", {'idList':deleteArr})\r
+                .then(function (data) {\r
+                        $scope.message = "Successfully deleted :-)";\r
+                        $state.reload();\r
+                    },\r
+                    function (reason) {\r
+                        $scope.message = reason.status + " " + reason.statusText;\r
+                    });*/\r
+        }\r
+\r
+        $scope.editData = function(id) {\r
+            $scope.textboxErr = false;\r
+            $scope.ipv4Err = false;\r
+            $scope.numericErr = false;\r
+            console.log("To be edited : " + id);\r
+            var dataFound = false;\r
+            angular.forEach($scope.provinceData, function(data) {\r
+                if(!dataFound) {\r
+                    if (data.id == id) {\r
+                        console.log("Found : " + data.id);\r
+                        $scope.province = data;\r
+\r
+                        $("#uniModal").modal();\r
+                        dataFound = true;\r
+                    }\r
+                }\r
+            });\r
+        }\r
+\r
+    })\r
+\r
+var modelTemplate = "";\r
+function loadTemplate() {\r
+    $.get('framework/template.html', function (template) {\r
+        modelTemplate += template;\r
+    });\r
+    $.get('framework/templateContainer.html', function (template) {\r
+        modelTemplate += template;\r
+    });\r
+    $.get('framework/templateWidget.html', function (template) {\r
+        //console.log("Template is : "+template);\r
+        modelTemplate += template;\r
+    });\r
+    $.get('framework/templateNotification.html', function (template) {\r
+        modelTemplate += template;\r
+    });\r
+    $.get('framework/templateFunctional.html', function (template) {\r
+        modelTemplate += template;\r
+    });\r
+}
\ No newline at end of file
diff --git a/provincemgr/src/main/webapp/bak/provincemgr/js/rest.js b/provincemgr/src/main/webapp/bak/provincemgr/js/rest.js
new file mode 100644 (file)
index 0000000..6432ca1
--- /dev/null
@@ -0,0 +1,94 @@
+/*\r
+\r
+ Copyright 2017, Huawei Technologies Co., Ltd.\r
+\r
+ Licensed under the Apache License, Version 2.0 (the "License");\r
+ you may not use this file except in compliance with the License.\r
+ You may obtain a copy of the License at\r
+\r
+     http://www.apache.org/licenses/LICENSE-2.0\r
+\r
+ Unless required by applicable law or agreed to in writing, software\r
+ distributed under the License is distributed on an "AS IS" BASIS,\r
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
+ See the License for the specific language governing permissions and\r
+ limitations under the License.\r
+\r
+ */\r
+\r
+\r
+app.factory("provinceDataService", function($http,DataService, $log){\r
+    var uri ;//'http://192.168.9.13:18008';\r
+    return {\r
+        getAllProvinceData : function() {\r
+            /*return $http({\r
+                url: 'http://localhost:4000/api/getAllProvinceData',\r
+                method: 'GET',\r
+                headers: {'Content-Type': 'application/json'}\r
+            }).then(function(response){\r
+                //$log.info(response);\r
+                return response.data;\r
+            });*/\r
+            return DataService.get(uri+'/api/getAllProvinceData')\r
+                .then(function(response){\r
+                    $log.info("in get data service data is  :"+response);\r
+                    console.log(response);\r
+                    return response;\r
+                });\r
+        },\r
+        addProvinceData : function(provinceDetail) {\r
+            /*return $http({\r
+                url: 'http://localhost:4000/api/addProvinceData',\r
+                method: 'POST',\r
+                data: provinceDetail,\r
+                headers: {'Content-Type': 'application/json '}\r
+            }).then(function(response){\r
+                console.log("Response : ");\r
+                $log.info(response.data);\r
+                return response.data;\r
+            });*/\r
+            return DataService.post(uri+'/api/addProvinceData', provinceDetail)\r
+                .then(function(response){\r
+                    console.log("Successfully added.. Data returned in DataService is");\r
+                    console.log(response);\r
+                    return response;\r
+                });\r
+        },\r
+        deleteProvinceData : function(id) {\r
+            /*return $http({\r
+                url: 'http://localhost:4000/api/deleteProvinceData',\r
+                method: 'POST',\r
+                data: {'idList':idList},\r
+                headers: {'Content-Type': 'application/json'}\r
+            }).then(function(response){\r
+                console.log("Successfully Deleted..");\r
+                $log.info(response);\r
+                return response.data;\r
+            });*/\r
+            return DataService.delete(uri+'/api/deleteProvinceData'+"/"+id)\r
+                .then(function(response){\r
+                    $log.info("in delete data service data is  :"+response);\r
+                    console.log(response);\r
+                    return response;\r
+                });\r
+        },\r
+        editProvinceData : function(provinceDetail) {\r
+            /*return $http({\r
+                url: 'http://localhost:4000/api/editProvinceData',\r
+                method: 'POST',\r
+                data: provinceDetail,\r
+                headers: {'Content-Type': 'application/json'}\r
+            }).then(function(response){\r
+                console.log("Successfully Edited...");\r
+                $log.info(response);\r
+                return response.data;\r
+            });*/\r
+            return DataService.put(uri+'/api/editProvinceData', provinceDetail)\r
+                .then(function(response){\r
+                    console.log("Successfully edited.. Data returned in DataService is");\r
+                    console.log(response);\r
+                    return response;\r
+                });\r
+        }\r
+    }\r
+});\r
diff --git a/provincemgr/src/main/webapp/bak/provincemgr/templates/management.html b/provincemgr/src/main/webapp/bak/provincemgr/templates/management.html
new file mode 100644 (file)
index 0000000..934eff0
--- /dev/null
@@ -0,0 +1,110 @@
+<!--\r
+\r
+    Copyright 2017, Huawei Technologies Co., Ltd.\r
+\r
+    Licensed under the Apache License, Version 2.0 (the "License");\r
+    you may not use this file except in compliance with the License.\r
+    You may obtain a copy of the License at\r
+\r
+            http://www.apache.org/licenses/LICENSE-2.0\r
+\r
+    Unless required by applicable law or agreed to in writing, software\r
+    distributed under the License is distributed on an "AS IS" BASIS,\r
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
+    See the License for the specific language governing permissions and\r
+    limitations under the License.\r
+\r
+-->\r
+<div class="homecontent center">\r
+<div class="col-md-12 col-sm-12 col-lg-12">\r
+    <h4>{{message}}</h4>\r
+    <br><br>\r
+    <div id="provinceAction" ng-init="init()">\r
+\r
+    </div>\r
+    <br>\r
+    <br>\r
+\r
+    <table ng-table="tableParams" class="table table-bordered table-striped customtable" show-filter="true">\r
+        <tr ng-repeat="provinceData in $data">\r
+            <td header="'ng-table/headers/checkbox.html'">\r
+                <input type="checkbox" ng-model="checkboxes.items[provinceData.id]" />\r
+            </td>\r
+            <td title="'Name'" filter="{ province_name: 'text'}" sortable="'province_name'">\r
+                {{provinceData.province_name}}\r
+            </td>\r
+            <td title="'IP Address'" filter="{ ip: 'text'}" sortable="'ip'">\r
+                {{provinceData.ip}}\r
+            </td>\r
+            <td title="'Port'" filter="{ port: 'number'}" sortable="'port'">\r
+                {{provinceData.port}}\r
+            </td>\r
+            <td title="'Description'" filter="{ port: 'text'}" sortable="'desc'">\r
+                {{provinceData.desc}}\r
+            </td>\r
+            <td title="'Action'">\r
+                <span  ng-click="editData(provinceData.id)" style="cursor: pointer;margin: 0 5px"> <img src="framework/images/edit.png" height="15" align="left"/></span>\r
+                <span  ng-click="deleteData(provinceData.id)" style="cursor: pointer;margin: 0 5px"><img src="framework/images/delete.png" height="15" align="middle"/></span>\r
+            </td>\r
+        </tr>\r
+    </table>\r
+\r
+\r
+    <script type="text/ng-template" id="ng-table/headers/checkbox.html">\r
+        <input type="checkbox" ng-model="checkboxes.checked" name="filter-checkbox" value="" />\r
+    </script>\r
+\r
+    <!--<div id="myTable"></div>-->\r
+\r
+\r
+     <!--Modal-->\r
+    <!--<div id="managementDialog" class="modal fade" role="dialog">\r
+        <div class="modal-dialog">\r
+\r
+            &lt;!&ndash; Modal content&ndash;&gt;\r
+            <div class="modal-content">\r
+                <div class="modal-header">\r
+                    <button type="button" class="close" data-dismiss="modal">&times;</button>\r
+                    <h5 class="modal-title titlestyle">Modal Header</h5>\r
+                </div>\r
+                <form name="provinceForm" method="post">\r
+                    <div class="modal-body">\r
+\r
+                        <div class="form-group row">\r
+                            <label class="col-xs-4 col-form-label labelstyle">Name</label>\r
+                            <div class="col-xs-8 provinceName" >\r
+                                &lt;!&ndash;<input class="form-control" ng-model="province.province_name" type="text" value="" placeholder="Province Name" id="pname" required><br>&ndash;&gt;\r
+                            </div>\r
+                        </div>\r
+                        <div class="form-group row">\r
+                            <label class="col-xs-4 col-form-label labelstyle">IP Address</label>\r
+                            <div class="col-xs-8 ipAddress" >\r
+                                &lt;!&ndash;<input class="form-control" ng-model="province.ip" type="ipv4" pattern="((^|\.)((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9]?\d))){4}$" value="" placeholder="IP Address" id="ipaddress" required><br>&ndash;&gt;\r
+                            </div>\r
+                        </div>\r
+                        <div class="form-group row">\r
+                            <label class="col-xs-4 col-form-label labelstyle">Port</label>\r
+                            <div class="col-xs-8 port" >\r
+                                &lt;!&ndash;<input class="form-control" ng-model="province.port" type="number" value="" placeholder="Port" id="port"  required>&ndash;&gt;\r
+\r
+                            </div>\r
+                        </div>\r
+\r
+                        &lt;!&ndash;<input type="submit" class="btn btn-default" value="validate"/>&ndash;&gt;\r
+\r
+                    </div>\r
+\r
+                    <div id="footerBtns" class="modal-footer">\r
+\r
+                    </div>\r
+                </form>\r
+            </div>\r
+\r
+\r
+        </div>\r
+    </div>-->\r
+    <!--<div id="myModal" class="modal-header">-->\r
+    <div id="managementDialog"></div>\r
+    <!--</div>-->\r
+</div>\r
+</div>
\ No newline at end of file
diff --git a/provincemgr/src/main/webapp/provincemgr/js/DataService.js b/provincemgr/src/main/webapp/provincemgr/js/DataService.js
new file mode 100644 (file)
index 0000000..750e802
--- /dev/null
@@ -0,0 +1,80 @@
+app.factory("DataService", function($http, $log) {\r
+    return {\r
+        /**\r
+         *\r
+         * @param url - url of the service\r
+         * @param data - data as an object (used as query string in url)\r
+         * @returns {*}\r
+         */\r
+        get: function (url, data) {\r
+            if(data) {\r
+                url += "?";\r
+                for(key in data){\r
+                    url += key+ "=" + data[key];\r
+                }\r
+            }\r
+            return $http({\r
+                url: url,\r
+                method: 'GET',\r
+                data: null,\r
+                headers: {'Content-Type': 'application/json'}\r
+            }).then(function (response) {\r
+                return response.data;\r
+            });\r
+        },\r
+        /**\r
+         *\r
+         * @param url - url of the service\r
+         * @param data - data as an object (used for post method)\r
+         * @returns {*}\r
+         */\r
+        post: function (url, data) {\r
+            return $http({\r
+                url: url,\r
+                method: 'POST',\r
+                data: data,\r
+                headers: {'Content-Type': 'application/json '}\r
+            }).then(function (response) {\r
+                console.log("Response : ");\r
+                $log.info(response.data);\r
+                return response.data;\r
+            });\r
+        },\r
+        /**\r
+         * TODO - To Check for Delete\r
+         * @param url\r
+         * @param data\r
+         * @returns {*}\r
+         */\r
+        delete: function (url) {\r
+            return $http({\r
+                url: url,\r
+                method: 'DELETE',\r
+                data: null,\r
+                headers: {'Content-Type': 'application/json '}\r
+            }).then(function (response) {\r
+                console.log("Response : ");\r
+                $log.info(response.data);\r
+                return response.data;\r
+            });\r
+        },\r
+        /**\r
+         *\r
+         * @param url\r
+         * @param data\r
+         */\r
+        put: function (url, data) {\r
+            return $http({\r
+                url: url,\r
+                method: 'PUT',\r
+                data: data,\r
+                headers: {'Content-Type': 'application/json '}\r
+            }).then(function (response) {\r
+                console.log("Response : ");\r
+                $log.info(response.data);\r
+                return response.data;\r
+            });\r
+        }\r
+\r
+    }\r
+})
\ No newline at end of file
diff --git a/provincemgr/src/main/webapp/provincemgr/templates/templateContainer.html b/provincemgr/src/main/webapp/provincemgr/templates/templateContainer.html
new file mode 100644 (file)
index 0000000..ef6f01c
--- /dev/null
@@ -0,0 +1,79 @@
+<!--\r
+\r
+    Copyright 2016-2017, Huawei Technologies Co., Ltd.\r
+\r
+    Licensed under the Apache License, Version 2.0 (the "License");\r
+    you may not use this file except in compliance with the License.\r
+    You may obtain a copy of the License at\r
+\r
+            http://www.apache.org/licenses/LICENSE-2.0\r
+\r
+    Unless required by applicable law or agreed to in writing, software\r
+    distributed under the License is distributed on an "AS IS" BASIS,\r
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
+    See the License for the specific language governing permissions and\r
+    limitations under the License.\r
+\r
+-->\r
+<!-- Accordion -->\r
+<script id="accordion" type="text/html">\r
+    {{#items}}\r
+    <div class="panel panel-default">\r
+        <h3 class="panel-title">\r
+            <a data-toggle="collapse" data-parent="#accordion" data-target="#{{tabId}}">{{header}}</a>\r
+        </h3>\r
+        <div id="{{tabId}}" class="panel-collapse collapse {{#isActive}}in{{/isActive}}">\r
+            <div class="panel-body"> {{msg}} </div>\r
+        </div>\r
+    </div>\r
+    {{/items}}\r
+</script>\r
+\r
+<!--Tabs-->\r
+<script id="tabs" type="text/html">\r
+    <ul class="nav nav-tabs">\r
+        {{#items}}<li {{#isActive}}class="active"{{/isActive}}><a data-toggle="tab" data-target="#{{target}}">{{tablabel}}</a></li>{{/items}}\r
+    </ul>\r
+    <div class="tab-content">\r
+        {{#items}}\r
+        <div id="{{target}}" class="tab-pane fade {{#isActive}}in active{{/isActive}}">\r
+            <h3>{{tablabel}}</h3>\r
+            <p>{{msg}}</p>\r
+        </div>\r
+        {{/items}}\r
+    </div>\r
+</script>\r
+\r
+<!--Vertical Tabs-->\r
+<script id="vtabs" type="text/html">\r
+    <ul class="nav nav-stacked col-sm-4 col-md-4 col-lg-4">\r
+        {{#items}}<li {{#isActive}}class="active"{{/isActive}}><a data-toggle="tab" data-target="#{{target}}">{{tablabel}}</a></li>{{/items}}\r
+    </ul>\r
+    <div class="tab-content col-sm-8 col-md-8 col-lg-8">\r
+        {{#items}}\r
+        <div id="{{target}}" class="tab-pane fade {{#isActive}}in active{{/isActive}}">\r
+            <h3>{{tablabel}}</h3>\r
+            <p>{{msg}}</p>\r
+        </div>\r
+        {{/items}}\r
+    </div>\r
+</script>\r
+\r
+<!--Table-->\r
+<script id="table" type="text/html">\r
+    {{#filter}}<input type="text" id="myInput" onkeyup="{{action}}" placeholder="Search for {{searchField}}">{{/filter}}\r
+    <table id="myTable{{#filter}}_search{{/filter}}" class="table {{#striped}}table-striped{{/striped}} {{#border}}table-bordered{{/border}} {{#hover}}table-hover{{/hover}} {{#condensed}}table-condensed{{/condensed}}">\r
+        <thead>\r
+        <tr>\r
+            {{#itemHeader}}<th>{{.}}</th>{{/itemHeader}}\r
+        </tr>\r
+        </thead>\r
+        <tbody>\r
+        {{#rowitem}}\r
+        <tr>\r
+            {{#values}}<td>{{.}}</td>{{/values}}\r
+        </tr>\r
+        {{/rowitem}}\r
+        </tbody>\r
+    </table>\r
+</script>
\ No newline at end of file
diff --git a/provincemgr/src/main/webapp/provincemgr/templates/templateFunctional.html b/provincemgr/src/main/webapp/provincemgr/templates/templateFunctional.html
new file mode 100644 (file)
index 0000000..ff2f53f
--- /dev/null
@@ -0,0 +1,82 @@
+<!--\r
+\r
+    Copyright 2016-2017, Huawei Technologies Co., Ltd.\r
+\r
+    Licensed under the Apache License, Version 2.0 (the "License");\r
+    you may not use this file except in compliance with the License.\r
+    You may obtain a copy of the License at\r
+\r
+            http://www.apache.org/licenses/LICENSE-2.0\r
+\r
+    Unless required by applicable law or agreed to in writing, software\r
+    distributed under the License is distributed on an "AS IS" BASIS,\r
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
+    See the License for the specific language governing permissions and\r
+    limitations under the License.\r
+\r
+-->\r
+\r
+<script id="functionalDialog" type="text/html">\r
+    <div id="funModal" class="modal fade" role="dialog" ng-init="getDetail()">\r
+        <div class="modal-dialog modal-md">\r
+\r
+            <!-- Modal content-->\r
+            <div class="modal-content">\r
+                <div class="modal-header">\r
+                    <button type="button" class="close" data-dismiss="modal">&times;</button>\r
+                    <h4 class="modal-title titlestyle">{{title}}</h4>\r
+                </div>\r
+                <div class="modal-body">\r
+                    <div>\r
+                        <form class="form-horizontal" role="form">\r
+                            {{#labels}}\r
+                            <div class="form-group">\r
+                                <label class="control-label col-sm-3 labelstyle" for={{input_id}}>{{text}}</label>\r
+                                <div class="col-sm-7">\r
+                                    <input type={{type}} class="form-control" id={{input_id}}>\r
+                                </div>\r
+                            </div>\r
+                            {{/labels}}\r
+                        </form>\r
+                    </div>\r
+                </div>\r
+                <div class="modal-footer">\r
+                    <div>{{#buttons}} <button type="button" class="btn btnDefault btnmrg" data-dismiss="modal" >{{text}}</button> {{/buttons}}\r
+                        {{#showClose}}<button type="button" class="btn btnDefault btnmrg" data-dismiss="modal">{{closeBtnTxt}}</button>{{/showClose}}\r
+                    </div>\r
+                    <!--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>-->\r
+                </div>\r
+            </div>\r
+\r
+        </div>\r
+    </div>\r
+</script>\r
+\r
+\r
+<script id="dialog" type="text/html">\r
+    <div id="uniModal" class="modal fade" role="dialog">\r
+        <div class="modal-dialog">\r
+\r
+            <!-- Modal content-->\r
+            <div class="modal-content">\r
+                <div class="modal-header">\r
+                    <button type="button" class="close" data-dismiss="modal">&times;</button>\r
+                    <div class="modalHeader"></div>\r
+                </div>\r
+                <form name="provinceForm" method="post"><!-- ng-submit="saveData(province.id)"-->\r
+                    <div class="modal-body">\r
+                        <div class="modalBodyContent">\r
+                        </div>\r
+                    </div>\r
+\r
+                    <div id="footerBtns" class="modal-footer">\r
+                    </div>\r
+\r
+                </form>\r
+            </div>\r
+\r
+\r
+        </div>\r
+    </div>\r
+\r
+</script>
\ No newline at end of file
diff --git a/provincemgr/src/main/webapp/provincemgr/templates/templateNotification.html b/provincemgr/src/main/webapp/provincemgr/templates/templateNotification.html
new file mode 100644 (file)
index 0000000..97f26e3
--- /dev/null
@@ -0,0 +1,48 @@
+<!--\r
+\r
+    Copyright 2016-2017, Huawei Technologies Co., Ltd.\r
+\r
+    Licensed under the Apache License, Version 2.0 (the "License");\r
+    you may not use this file except in compliance with the License.\r
+    You may obtain a copy of the License at\r
+\r
+            http://www.apache.org/licenses/LICENSE-2.0\r
+\r
+    Unless required by applicable law or agreed to in writing, software\r
+    distributed under the License is distributed on an "AS IS" BASIS,\r
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
+    See the License for the specific language governing permissions and\r
+    limitations under the License.\r
+\r
+-->\r
+\r
+<!--Dialog-->\r
+<script id="personDialog" type="text/html">\r
+    <div id="msgModal" class="modal fade" role="dialog">\r
+        <div class="modal-dialog modal-md">\r
+\r
+            <!-- Modal content-->\r
+            <div class="modal-content">\r
+                <div class="modal-header">\r
+                    <button type="button" class="close" data-dismiss="modal">&times;</button>\r
+                    <h4 class="modal-title titlestyle">{{title}}</h4>\r
+                </div>\r
+                <div class="modal-body">\r
+                    <div class="container center">\r
+                        <div class="row">\r
+                            <div class="col-xs-2 col-sm-2 col-md-1 col-lg-1 icon {{icon}} {{iconColor}}"></div>\r
+                            <div class="msg col-xs-10 col-sm-10 col-md-11 col-lg-11" style="text-align:left;vertical-align: middle;">{{msg}}</div>\r
+                        </div>\r
+                    </div>\r
+                </div>\r
+                <div class="modal-footer">\r
+                    <div>{{#buttons}} <button type="button" class="btn btnDefault btnmrg" data-dismiss="modal" ng-click={{action}}>{{text}}</button> {{/buttons}}\r
+                        {{#showClose}}<button type="button" class="btn btnDefault btnmrg" data-dismiss="modal">{{closeBtnTxt}}</button>{{/showClose}}\r
+                    </div>\r
+                    <!--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>-->\r
+                </div>\r
+            </div>\r
+\r
+        </div>\r
+    </div>\r
+</script>
\ No newline at end of file
diff --git a/provincemgr/src/main/webapp/provincemgr/templates/templateWidget.html b/provincemgr/src/main/webapp/provincemgr/templates/templateWidget.html
new file mode 100644 (file)
index 0000000..bb8eef4
--- /dev/null
@@ -0,0 +1,222 @@
+<!--\r
+\r
+    Copyright 2016-2017, Huawei Technologies Co., Ltd.\r
+\r
+    Licensed under the Apache License, Version 2.0 (the "License");\r
+    you may not use this file except in compliance with the License.\r
+    You may obtain a copy of the License at\r
+\r
+            http://www.apache.org/licenses/LICENSE-2.0\r
+\r
+    Unless required by applicable law or agreed to in writing, software\r
+    distributed under the License is distributed on an "AS IS" BASIS,\r
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
+    See the License for the specific language governing permissions and\r
+    limitations under the License.\r
+\r
+-->\r
+\r
+<!-- Default Buttons <button class="btnDefault" ng-click="{{clickAction}}">{{title}}</button>-->\r
+<script id="defaultButtons" type="text/html">\r
+    <input type="button" class="btnDefault btnmrg" ng-click="{{clickAction}}" value="{{title}}"/>\r
+</script>\r
+\r
+<script id="defaultIconButtons" type="text/html">\r
+    <button id="iconBtn" type="button" class="btnDefault  btnmrg {{type}}" ng-click="{{clickAction}}">{{title}}\r
+        <span class="glyphicon {{gType}} pull-{{iconPosition}}"></span>\r
+    </button>\r
+</script>\r
+\r
+<!-- Visual Buttons -->\r
+<script id="visualButtons" type="text/html">\r
+    <button type="button" class="btn btn-{{type}}">{{title}}</button>\r
+</script>\r
+\r
+<!-- Different sized Buttons -->\r
+<script id="sizeButtons" type="text/html">\r
+    <button type="button" class="btn btn-{{type}} {{size}}">{{title}}</button>\r
+</script>\r
+\r
+<!-- Icon Buttons -->\r
+<script id="iconButtons" type="text/html">\r
+    <button type="button" class="btn btn-{{type}}">{{title}}\r
+        <span class="glyphicon {{gType}}"></span>\r
+    </button>\r
+</script>\r
+\r
+<!--Dropdown template-->\r
+<script id="dropDown" type="text/html">\r
+    <div class="drop{{position}}">\r
+        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">{{title}}\r
+            <span class="caret"></span>\r
+        </button>\r
+        <ul class="dropdown-menu">\r
+            {{#items}}<li><a href="#">{{itemLabel}}</a></li>{{/items}}\r
+        </ul>\r
+    </div>\r
+</script>\r
+\r
+<script id="dropDownHeader" type="text/html">\r
+    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">{{title}}\r
+        <span class="caret"></span>\r
+    </button>\r
+    <ul class="dropdown-menu">\r
+        {{#items}}\r
+        {{#isheader}}<li class="divider"></li><li class="dropdown-header">{{itemLabel}}</li><li class="divider"></li>{{/isheader}}\r
+        {{^isheader}}<li><a href="#">{{itemLabel}}</a></li>{{/isheader}}\r
+        {{/items}}\r
+    </ul>\r
+</script>\r
+\r
+<script id="simpleDropdownTmpl" type="text/html">\r
+    <div class="dropdownplain">\r
+\r
+        <select class="inputfield form-control" ng-model="{{modalVar}}" ng-options="item.{{labelField}} for item in {{optionsValue}}">\r
+            <option style="display:none" value="">--select--</option>\r
+        </select>\r
+    </div>\r
+</script>\r
+\r
+\r
+<!--Radio Buttons-->\r
+<script id="radioButtons" type="text/html">\r
+    <div>\r
+        <input class="magic-radio" type="radio" name="radio" id="radio{{id}}"/>\r
+        <label for="radio{{id}}">{{label}}</label></br>\r
+    </div>\r
+</script>\r
+\r
+<!--Check boxes template-->\r
+<script id="checkBoxes" type="text/html">\r
+    <div class="funkyradio-{{type}}">\r
+        <input type="checkbox" name="check" id="checkbox{{id}}" {{#checked}}checked{{/checked}} />\r
+        <label for="checkbox{{id}}">{{label}}</label>\r
+    </div>\r
+</script>\r
+\r
+<!--text-->\r
+<script id="textfield" type="text/html">\r
+    <div class="css-form">\r
+       <input id ="textbox" name="textbox" class="form-control inputfield" placeholder="{{placeholder}}" ng-model="{{modalVar}}" type="text"  ng-blur="{{errfunc}}({{modalVar}})" {{#required}}required{{/required}}> {{#required}}<span class="staricon">*</span>{{/required}}\r
+        <span class="errMsg" ng-show="{{errtag}}">{{errmsg}}</span>\r
+    </div>\r
+</script>\r
+\r
+<!--email-->\r
+<script id="email" type="text/html">\r
+    <div class="css-form">\r
+        <input class="form-control inputfield"  placeholder="{{placeholder}}" ng-model="{{modalVar}}" type="email"  ng-blur="{{errfunc}}({{modalVar}})" {{#required}}required{{/required}}>{{#required}}<span class="staricon">*</span>{{/required}}\r
+        <span class="errMsg" ng-show="{{errtag}}">{{errmsg}}</span>\r
+    </div>\r
+</script>\r
+\r
+<!--url-->\r
+<script  id="url" type="text/html">\r
+    <div class="css-form">\r
+        <input class="form-control inputfield" placeholder="{{placeholder}}" ng-model="{{modalVar}}" type="url"  ng-blur="{{errfunc}}({{modalVar}})" {{#required}}required{{/required}}>{{#required}}<span class="staricon">*</span>{{/required}}\r
+        <span class="errMsg" ng-show="{{errtag}}">{{errmsg}}</span>\r
+    </div>\r
+</script>\r
+\r
+<!--password-->\r
+<script  id="password" type="text/html">\r
+    <div class="css-form">\r
+\r
+\r
+        <input class="form-control inputfield" placeholder="{{placeholder}}" ng-model="{{modalVar}}" type="password" pattern=".{3,}" maxlength="{{#maxLength}}{{maxLength}}{{/maxLength}}{{^maxLength}}9{{/maxLength}}" ng-blur="{{errfunc}}({{modalVar}})" {{#required}}required{{/required}}>{{#required}}<span class="staricon">*</span>{{/required}}\r
+        <span class="errMsg" ng-show="{{errtag}}">{{errmsg}}</span>\r
+    </div>\r
+</script>\r
+\r
+<!--numeric-->\r
+<script id="numeric" type="text/html">\r
+    <div class="css-form">\r
+        <input  class="form-control inputfield" placeholder="{{placeholder}}" ng-model="{{modalVar}}" type="number"  ng-blur="{{errfunc}}({{modalVar}})" {{#required}}required{{/required}}/>{{#required}}<span class="staricon">*</span>{{/required}}\r
+        <span class="errMsg" ng-show="{{errtag}}">{{errmsg}}</span>\r
+    </div>\r
+</script>\r
+\r
+<!--dot-->\r
+<script  id="dot" type="text/html">\r
+    <div class="css-form">\r
+        <input class="form-control inputfield"  placeholder="{{placeholder}}" ng-model="{{modalVar}}" type="datetime-local"  ng-blur="{{errfunc}}({{modalVar}})" {{#required}}required{{/required}}>{{#required}}<span class="staricon">*</span>{{/required}}\r
+        <span class="errMsg" ng-show="{{errtag}}">{{errmsg}}</span>\r
+    </div>\r
+</script>\r
+\r
+<!--date-->\r
+<script  id="dateinput" type="text/html">\r
+    <div class="css-form">\r
+        <input class="form-control inputfield"  placeholder="{{placeholder}}" ng-model="{{modalVar}}" type="date" ng-blur="{{errfunc}}({{modalVar}})" {{#required}}required{{/required}}>{{#required}}<span class="staricon">*</span>{{/required}}\r
+        <span class="errMsg" ng-show="{{errtag}}">{{errmsg}}</span>\r
+    </div>\r
+</script>\r
+\r
+<!--Month-->\r
+<script  id="monthinput" type="text/html">\r
+    <div class="css-form">\r
+        <input class="form-control inputfield" placeholder="{{placeholder}}" ng-model="{{modalVar}}" type="month"  ng-blur="{{errfunc}}({{modalVar}})" {{#required}}required{{/required}}>{{#required}}<span class="staricon">*</span>{{/required}}\r
+        <span class="errMsg" ng-show="{{errtag}}">{{errmsg}}</span>\r
+    </div>\r
+</script>\r
+\r
+\r
+<!--Week-->\r
+<script   id="weekinput" type="text/html">\r
+    <div class="css-form">\r
+        <input class="form-control inputfield"  placeholder="{{placeholder}}" ng-model="{{modalVar}}" type="week"  ng-blur="{{errfunc}}({{modalVar}})" {{#required}}required{{/required}}>{{#required}}<span class="staricon">*</span>{{/required}}\r
+        <span class="errMsg" ng-show="{{errtag}}">{{errmsg}}</span>\r
+    </div>\r
+</script>\r
+\r
+<!--time-->\r
+<script   id="timeinput" type="text/html">\r
+    <div class="css-form">\r
+        <input class="form-control inputfield"  placeholder="{{placeholder}}" ng-model="{{modalVar}}" type="time"  ng-blur="{{errfunc}}({{modalVar}})" {{#required}}required{{/required}}>{{#required}}<span class="staricon">*</span>{{/required}}\r
+        <span class="errMsg" ng-show="{{errtag}}">{{errmsg}}</span>\r
+    </div>\r
+</script>\r
+\r
+<!--ipv4-->\r
+<script   id="ipv4" type="text/html">\r
+    <div class="css-form">\r
+        <input class="form-control inputfield" type="ipv4" placeholder="{{placeholder}}" ng-model="{{modalVar}}" pattern="((^|\.)((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9]?\d))){4}$"  ng-blur="{{errfunc}}({{modalVar}})" {{#required}}required{{/required}}>{{#required}}<span class="staricon">*</span>{{/required}}\r
+        <span class="errMsg" ng-show="{{errtag}}">{{errmsg}}</span>\r
+    </div>\r
+</script>\r
+\r
+<!--ipv6-->\r
+<script   id="ipv6" type="text/html">\r
+    <div class="css-form">\r
+        <input class="form-control inputfield"   placeholder="{{placeholder}}" ng-model="{{modalVar}}" type="ipv6"  pattern="^([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])" ng-blur="{{errfunc}}({{modalVar}})" {{#required}}required{{/required}}>{{#required}}<span class="staricon">*</span>{{/required}}\r
+        <span class="errMsg" ng-show="{{errtag}}">{{errmsg}}</span>\r
+    </div>\r
+</script>\r
+\r
+<!--textarea-->\r
+<script id="textarea" type="text/html">\r
+    <div class="css-form">\r
+        <textarea class="form-control inputfield"  rows="4" cols="50" placeholder="{{placeholder}}" ng-model="{{modalVar}}"  ng-blur="{{errfunc}}({{modalVar}})" {{#required}}required{{/required}}></textarea>{{#required}}<span class="staricon">*</span>{{/required}}\r
+        <span class="errMsg" ng-show="{{errtag}}">{{errmsg}}</span>\r
+    </div>\r
+</script>\r
+\r
+<!--note-->\r
+<script id="note" type="text/html">\r
+\r
+    <a  id="noteanchor" href="#/home/textarea" title="Note" data-toggle="popover" data-trigger="focus" data-placement="{{placement}}">\r
+        <span class="glyphicon glyphicon-info-sign "></span></a>\r
+</script>\r
+\r
+<!-- list -->\r
+<script id="list" type="text/html">\r
+\r
+    {{#items}}\r
+\r
+    <div>\r
+        <button type="button" class="btn btn-primary btn-block" ng-click="loadSubMenuPage('{{id}}', '{{level}}', '{{row}}')">{{title}}</button>\r
+    </div>\r
+\r
+    {{/items}}\r
+\r
+</script>\r