Client unified styling
authorseshukm <seshu.kumar.m@huawei.com>
Tue, 24 Jan 2017 05:14:53 +0000 (10:44 +0530)
committerseshukm <seshu.kumar.m@huawei.com>
Tue, 24 Jan 2017 05:14:53 +0000 (10:44 +0530)
CSS for the unified look and feel of the OPEN-O GUI pages

Issue-Id : CLIENT-11

Change-Id: Ifb2ac768022f3b921d5f5b067a51e928e46fb5cc
Signed-off-by: seshukm <seshu.kumar.m@huawei.com>
portal-common/src/main/webapp/framework/browser/css/open-ostyle.css [new file with mode: 0644]
portal-common/src/main/webapp/framework/browser/js/DataService.js [new file with mode: 0644]
portal-common/src/main/webapp/framework/browser/js/app.js [new file with mode: 0644]

diff --git a/portal-common/src/main/webapp/framework/browser/css/open-ostyle.css b/portal-common/src/main/webapp/framework/browser/css/open-ostyle.css
new file mode 100644 (file)
index 0000000..789dbd1
--- /dev/null
@@ -0,0 +1,873 @@
+/*\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
+body {\r
+    margin: 0;\r
+    padding: 0;\r
+    width: 100%;\r
+    height: 100%;\r
+    font-family: "Microsoft Yahei",Arial,Tahoma,Verdana,SimSun;\r
+}\r
+\r
+.container{\r
+    background: #fafafa;\r
+}\r
+\r
+.accordion_parent {\r
+    position: relative;\r
+    width: 220px;\r
+    background-color: #f5f5f5;\r
+}\r
+\r
+.openo-accordion-resizable-handle {\r
+    z-index: 1 !important;\r
+    cursor: e-resize;\r
+    width: 7px;\r
+    right: -5px;\r
+    top: 0;\r
+    height: 100%;\r
+    position: absolute;\r
+    font-size: .1px;\r
+    display: block;\r
+}\r
+\r
+.openoAccordian_accordionmenu {\r
+    width: 100%;\r
+    margin: 0;\r
+    padding: 0;\r
+    list-style-type: none;\r
+    line-height: 17px;\r
+}\r
+\r
+.openoAccordian_accordionmenu li {\r
+    min-width: 75px;\r
+    margin: 0;\r
+    padding: 0;\r
+    list-style-type: none;\r
+    color: #000;\r
+    clear: both;\r
+}\r
+\r
+.openo_accordion_ui-icon-collapse, .openo_accordion_ui-icon-expand {\r
+    display: block;\r
+    float: left;\r
+    margin-bottom: -1px;\r
+    border-bottom: 1px solid #e5e5e5;\r
+    cursor: pointer;\r
+    width: 13px;\r
+    padding-top: 26px;\r
+}\r
+\r
+.openo_accordion_ui-icon-expand {\r
+    background: url(/images/collapse_arrow.png) right 20px no-repeat;\r
+    margin-top: 8px;\r
+}\r
+\r
+.openo_accordion_ui-icon-expand.current {\r
+    background: url(../images/expand_arrow.png) right 20px no-repeat;\r
+}\r
+\r
+.openoAccordian_showHideArrow_hide, .openoAccordian_showHideArrow_show {\r
+    display: block;\r
+    position: absolute;\r
+    right: 0;\r
+    top: 4px;\r
+    width: 18px;\r
+    height: 41px;\r
+    cursor: pointer;\r
+    background-color: #f5f5f5;\r
+}\r
+\r
+.openoAccordian_showHideArrow_hide {\r
+    background-image: url(../images/openo.png);\r
+    background-position: -7px 0 !important;\r
+    border-collapse: separate;\r
+    /*box-shadow: inset -1px 0 0 #e5e5e5;*/\r
+}\r
+\r
+a.header.opened, a.header.closed {\r
+    font-size: 16px;\r
+    padding-top: 24px;\r
+    padding-bottom: 25px;\r
+    color: #999999;\r
+}\r
+\r
+.openoAccordian_accordionmenu .closed, .openoAccordian_accordionmenu .opened {\r
+    padding-right: 10px;\r
+    background-position: 98% 50%;\r
+    background-repeat: no-repeat;\r
+}\r
+\r
+\r
+.openoAccordian_accordionmenu li a {\r
+    padding: 11px 10px 12px;\r
+    color: #333333;\r
+    margin-top: -1px;\r
+    text-align: left !important;\r
+    font-family: "Microsoft Yahei",Arial,Tahoma,Verdana,SimSun;\r
+    font-size: 14px;\r
+    text-overflow: ellipsis;\r
+    white-space: nowrap;\r
+    overflow: hidden;\r
+    border-top: 1px solid #e5e5e5;\r
+    border-bottom: 1px solid #e5e5e5;\r
+    /*height: 19px;*/\r
+}\r
+\r
+.openoAccordian_accordionmenu ul {\r
+    margin: 0;\r
+    padding: 0;\r
+    overflow: hidden;\r
+}\r
+\r
+.openoAccordian_accordionmenu a {\r
+    display: block;\r
+    text-decoration: none;\r
+}\r
+\r
+a {\r
+    color: #428bca;\r
+    text-decoration: none;\r
+    background: 0 0;\r
+}\r
+\r
+.bar {\r
+    height: 834px;\r
+    width: 18px;\r
+    background: #f8f8f8;\r
+    display: none;\r
+}\r
+\r
+.bar span {\r
+    width: 13px;\r
+    height: 34px;\r
+    background-image: url(../images/openo.png);\r
+    background-position: -39px 0 !important;\r
+    display: block;\r
+    /*margin-top: -430px;*/\r
+}\r
+\r
+li {\r
+    cursor: pointer;\r
+}\r
+\r
+#puer_base_openo {\r
+    border: 1px solid #ddd;\r
+}\r
+\r
+.openo_accordion_selected {\r
+    margin-left: 0;\r
+    margin-right: 0;\r
+    background: #fafafa;\r
+    border-left: 3px solid #4ac9ff !important;\r
+    box-shadow: none;\r
+    position: relative;\r
+}\r
+\r
+a:hover {\r
+    color: #4ac9ff;\r
+}\r
+\r
+.openoAccordian_accordionmenu li.openo_accordion_selected a {\r
+    position: relative;\r
+    left: -3px;\r
+    color: #009ae7;\r
+}\r
+\r
+.openo-accordion-resizable-handle {\r
+    z-index: 1 !important;\r
+    cursor: e-resize;\r
+    width: 7px;\r
+    right: -5px;\r
+    top: 0;\r
+    height: 100%;\r
+    position: absolute;\r
+    font-size: .1px;\r
+    display: block;\r
+}\r
+\r
+#iframeContainer iframe {\r
+    width: 100%;\r
+    height: 100%;\r
+    border: 0;\r
+}\r
+\r
+#accordionContent, #iframeContainer {\r
+    margin: 0;\r
+    padding: 0;\r
+    border: 0;\r
+    width: 100%;\r
+    height: 100%;\r
+}\r
+\r
+.openoAccordian_showHideArrow_show {\r
+    background-image: url(../images/openo.png);\r
+    background-position: -39px 0 !important;\r
+    box-shadow: inset 1px 0 0 #e5e5e5, inset -1px 0 0 #e5e5e5;\r
+}\r
+\r
+.homecontent {\r
+    text-align: center;\r
+    letter-spacing: 1.4px;\r
+}\r
+\r
+.homecontent h3, .homecontent h4, .homecontent h5{\r
+    font-size: 24px;\r
+    color: #333;\r
+    text-transform: capitalize;\r
+    border-top: 2px solid #f1f1f1;\r
+    border-bottom: 2px solid #f1f1f1;\r
+    padding: 15px 5px;\r
+    display: inline-block;\r
+    letter-spacing: 5px;\r
+    -webkit-animation: textScroll 500ms linear;\r
+    animation: textScroll 500ms linear;\r
+}\r
+.homecontent h4 {\r
+    font-size: 28px;\r
+    font-weight: bold;\r
+}\r
+.homecontent h5 {\r
+    font-size: 16px;\r
+    text-align: left;\r
+    border: none;\r
+}\r
+@-webkit-keyframes textScroll {\r
+     from {opacity: 0;}\r
+     to {opacity: 1;}\r
+ }\r
+\r
+@keyframes textScroll {\r
+    from {opacity: 0;}\r
+    to {opacity: 1;}\r
+}\r
+\r
+.modal-body span {\r
+    font-size: 18px;\r
+    color: #00f;\r
+}\r
+\r
+#msgModal .modal-body .container {\r
+    width: 100%;\r
+}\r
+#msgModal .modal-body .icon {\r
+    /*color: red;*/\r
+    font-size: 37px;\r
+}\r
+#msgModal .modal-body .icon_error {\r
+    color: red;\r
+}\r
+#msgModal .modal-body .icon_info {\r
+    color: green;\r
+}\r
+#msgModal .modal-body .icon_warning{\r
+    color: orange;\r
+}\r
+#msgModal .modal-body .icon_confirm {\r
+    color: blue;\r
+}\r
+#msgModal .modal-body .msg {\r
+    color: #333;\r
+    padding-left: 30px;\r
+}\r
+/*#msgModal .modal-body .container .row {\r
+}*/\r
+#msgModal .modal-body .row {\r
+    height: 100%;\r
+    white-space: nowrap;\r
+}\r
+#msgModal .modal-body .row:before{\r
+    content: "";\r
+    display: inline-block;\r
+    vertical-align: middle;\r
+    width: 0;\r
+    /* adjust for white space between pseudo element and next sibling */\r
+    margin-right: -.25em;\r
+    /* stretch line height */\r
+    height: 100%;\r
+}\r
+\r
+#msgModal .modal-body .row .msg {\r
+    /*display: inline-block;\r
+    vertical-align: middle;\r
+    white-space: normal;*/\r
+    /* vertical-align: middle; */\r
+    position: absolute;\r
+    top: 50%;\r
+    -webkit-transform: translateY(-50%);\r
+    -ms-transform: translateY(-50%);\r
+    transform: translateY(-50%);\r
+    padding-left: 70px;\r
+    white-space: normal;\r
+}\r
+\r
+/* Functional */\r
+\r
+#funModal .modal-content .modal-header{\r
+    padding-bottom: 4px;\r
+    border-radius: 5px 5px 0 0;\r
+}\r
+\r
+\r
+/* Buttons */\r
+.btnDefault {\r
+    border-radius: 6px;\r
+    /*height: 24px;*/\r
+    font-size: 12px;\r
+    font-family: "Microsoft Yahei",Arial,Tahoma,Verdana,SimSun;\r
+    line-height: 24px;\r
+    color: #000;\r
+    border: 1px solid #d3d3d3;\r
+    text-align: center;\r
+    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);\r
+    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);\r
+    background: linear-gradient(to bottom, #fff, #fafafa);\r
+    padding: 0 19px;\r
+}\r
+.btnDefault:hover {\r
+    border-color: #4ac9ff;\r
+    color: #009ae7;\r
+}\r
+#iconBtn {\r
+    padding: 0 15px;\r
+}\r
+#iconBtn span {\r
+    font-size: 12px;\r
+    margin-top: 4px;\r
+    width: 16px;\r
+    height: 16px;\r
+}\r
+#iconBtn span.pull-left {\r
+    margin-right: 5px;\r
+}\r
+#iconBtn span.pull-right {\r
+    margin-left: 5px;\r
+}\r
+\r
+#buttonArea {\r
+    text-align: left;\r
+}\r
+#buttonArea div {\r
+    margin: 10px 0 20px;\r
+}\r
+\r
+#buttonArea div .btn-block{\r
+    margin: 10px 0;\r
+}\r
+\r
+/* Dropdown*/\r
+\r
+#dropdown {\r
+    text-align: left;\r
+}\r
+\r
+#dropdown div {\r
+    margin: 10px 0 20px;\r
+}\r
+\r
+#dropdown .dropup .dropdown-menu {\r
+    top: auto;\r
+    bottom: 45% !important;\r
+    margin-bottom: 1px;\r
+}\r
+#dropdown .dropdown-menu {\r
+    top: auto;\r
+    left: auto;\r
+    margin-bottom: 1px;\r
+}\r
+\r
+#plainDropDown > .dropdownplain {\r
+    position: relative;\r
+    clear: both;\r
+    float: left;\r
+    width: 100%;\r
+}\r
+#plainDropDown > .dropdownplain > ul > li {\r
+    border: 1px solid #c3c3c3;\r
+    border-radius: 4px;\r
+    min-width: 200px;\r
+}\r
+#plainDropDown ul li a {\r
+    padding: 5px 10px;\r
+    color: #333;\r
+}\r
+#plainDropDown > .dropdownplain > ul > li > a > span {\r
+    top: 4px;\r
+}\r
+#plainDropDown ul li a:hover {\r
+    color: #333;\r
+}\r
+#plainDropDown .dropdown-menu {\r
+    width: 100%;\r
+}\r
+\r
+\r
+\r
+/* Credit to bootsnipp.com for the css for the color graph */\r
+.colorgraph {\r
+    height: 5px;\r
+    border-top: 0;\r
+    background: #c4e17f;\r
+    border-radius: 5px;\r
+    background-image: -webkit-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);\r
+    background-image: -moz-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);\r
+    background-image: -o-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);\r
+    background-image: linear-gradient(to right, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);\r
+}\r
+\r
+/* Radio  and CheckBoxes------------*/\r
+\r
+\r
+.funkyradio div {\r
+    clear: both;\r
+    overflow: hidden;\r
+}\r
+\r
+.funkyradio label {\r
+    width: 100%;\r
+    border-radius: 3px;\r
+    border: 1px solid #D1D3D4;\r
+    font-weight: normal;\r
+}\r
+\r
+.funkyradio input[type="radio"]:empty,\r
+.funkyradio input[type="checkbox"]:empty {\r
+    display: none;\r
+}\r
+\r
+.funkyradio input[type="radio"]:empty ~ label,\r
+.funkyradio input[type="checkbox"]:empty ~ label {\r
+    position: relative;\r
+    line-height: 2.5em;\r
+    text-indent: 3.25em;\r
+    margin-top: 2em;\r
+    cursor: pointer;\r
+    -webkit-user-select: none;\r
+    -moz-user-select: none;\r
+    -ms-user-select: none;\r
+    user-select: none;\r
+}\r
+\r
+.funkyradio input[type="radio"]:empty ~ label:before,\r
+.funkyradio input[type="checkbox"]:empty ~ label:before {\r
+    position: absolute;\r
+    display: block;\r
+    top: 0;\r
+    bottom: 0;\r
+    left: 0;\r
+    content: '';\r
+    width: 2.5em;\r
+    background: #D1D3D4;\r
+    border-radius: 3px 0 0 3px;\r
+}\r
+\r
+.funkyradio input[type="radio"]:hover:not(:checked) ~ label,\r
+.funkyradio input[type="checkbox"]:hover:not(:checked) ~ label {\r
+    color: #888;\r
+}\r
+\r
+.funkyradio input[type="radio"]:hover:not(:checked) ~ label:before,\r
+.funkyradio input[type="checkbox"]:hover:not(:checked) ~ label:before {\r
+    content: '\2714';\r
+    text-indent: .9em;\r
+    color: #C2C2C2;\r
+}\r
+\r
+.funkyradio input[type="radio"]:checked ~ label,\r
+.funkyradio input[type="checkbox"]:checked ~ label {\r
+    color: #777;\r
+}\r
+\r
+.funkyradio input[type="radio"]:checked ~ label:before,\r
+.funkyradio input[type="checkbox"]:checked ~ label:before {\r
+    content: '\2714';\r
+    text-indent: .9em;\r
+    color: #333;\r
+    background-color: #ccc;\r
+}\r
+\r
+.funkyradio input[type="radio"]:focus ~ label:before,\r
+.funkyradio input[type="checkbox"]:focus ~ label:before {\r
+    box-shadow: 0 0 0 3px #999;\r
+}\r
+\r
+.funkyradio-default input[type="radio"]:checked ~ label:before,\r
+.funkyradio-default input[type="checkbox"]:checked ~ label:before {\r
+    color: #333;\r
+    background-color: #ccc;\r
+}\r
+\r
+.funkyradio-primary input[type="radio"]:checked ~ label:before,\r
+.funkyradio-primary input[type="checkbox"]:checked ~ label:before {\r
+    color: #fff;\r
+    background-color: #337ab7;\r
+}\r
+\r
+.funkyradio-success input[type="radio"]:checked ~ label:before,\r
+.funkyradio-success input[type="checkbox"]:checked ~ label:before {\r
+    color: #fff;\r
+    background-color: #5cb85c;\r
+}\r
+\r
+.funkyradio-danger input[type="radio"]:checked ~ label:before,\r
+.funkyradio-danger input[type="checkbox"]:checked ~ label:before {\r
+    color: #fff;\r
+    background-color: #d9534f;\r
+}\r
+\r
+.funkyradio-warning input[type="radio"]:checked ~ label:before,\r
+.funkyradio-warning input[type="checkbox"]:checked ~ label:before {\r
+    color: #fff;\r
+    background-color: #f0ad4e;\r
+}\r
+\r
+.funkyradio-info input[type="radio"]:checked ~ label:before,\r
+.funkyradio-info input[type="checkbox"]:checked ~ label:before {\r
+    color: #fff;\r
+    background-color: #5bc0de;\r
+}\r
+\r
+.btn-primary {\r
+  color: #fff;\r
+  background-color: #428bca;\r
+  border-color: #357ebd;\r
+  min-width:70px\r
+}\r
+\r
+.btn.outline {\r
+    background: none;\r
+    \r
+}\r
+.btn-primary.outline {\r
+    border: 2px solid #0099cc;\r
+    color: #0099cc;\r
+}\r
+.modal-header {\r
+       /*background-color: #cccccc;*/\r
+    background: linear-gradient(to bottom, #fbfbfb 0, #f6f6f6 70%, #f0f0f0 100%);\r
+}\r
+\r
+/* Tree */\r
+\r
+#tree1 ul li {\r
+    list-style: none;\r
+    text-align: left;\r
+    margin-top: 7px;\r
+}\r
+\r
+/* Accordian Area */\r
+#accordionArea .panel-group .panel-title a:before {\r
+    font-family: "Glyphicons Halflings";\r
+    content:"\e259";/*\e094*/\r
+    /*position: absolute;\r
+    right: 20px;*/\r
+    font-size: 20px;\r
+    margin-right: 20px;\r
+    text-decoration: none !important;\r
+}\r
+#accordionArea .panel-group .panel-title a.collapsed:before {\r
+    content:"\e258";/*\e092*/\r
+}\r
+\r
+#accordionArea h3 {\r
+    width: 100%;\r
+    text-align: left;\r
+    background-color: #eaeaea;\r
+    border: none;\r
+    padding: 8px;\r
+    font-size: 20px;\r
+}\r
+#accordionArea h3 a {\r
+    text-decoration: none;\r
+}\r
+#accordionArea .panel-group .panel {\r
+    border: none;\r
+    box-shadow: none;\r
+    -webkit-box-shadow: none;\r
+}\r
+ div.panel-body {\r
+    text-align: justify;\r
+}\r
+\r
+/* Tab */\r
+#tabArea .tab-content div p {\r
+    text-align: justify;\r
+}\r
+\r
+/*Table*/\r
+#tableArea h3 {\r
+    text-align: left;\r
+    border: none;\r
+    padding-top: 5px;\r
+}\r
+\r
+#tableArea h3 span {\r
+    font-size: 12px;\r
+}\r
+\r
+/* Vertical Tab */\r
+.nav-stacked {\r
+    margin-top: 20px;\r
+    text-align: left;\r
+    border:none;\r
+}\r
+\r
+.nav-tabs>li.active>a {\r
+    border-top: 3px solid #4ac9ff;\r
+}\r
+.nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {\r
+    border-top: 3px solid #4ac9ff;\r
+}\r
+.nav-tabs>li>a:hover {\r
+    border-color: transparent;\r
+    background-color: transparent;\r
+}\r
+.nav-stacked>li.active>a {\r
+    background-color: #ccc;\r
+    border: none;\r
+    border-radius: 4px;\r
+}\r
+\r
+#vtabArea .tab-content .tab-pane {\r
+    text-align: left;\r
+}\r
+#vtabArea .tab-content .tab-pane p {\r
+    text-align: justify;\r
+}\r
+\r
+.link_active {\r
+    /*background-color: lightslategrey;*/\r
+    font-style: italic;\r
+    color: #4ac9ff !important;\r
+    background:#fafafa;\r
+    border-left: 3px solid #4ac9ff;\r
+\r
+\r
+}\r
+\r
+/*input.ng-invalid {\r
+    background-color:yellow;\r
+}*/\r
+\r
+/* Functional & Notification*/\r
+\r
+#msgModal .modal-header, #funModal .modal-header {\r
+    padding: 9px 15px;\r
+    border-radius: 5px 5px 0 0;\r
+    color: #666;\r
+}\r
+\r
+#msgModal .modal-content {\r
+    width: 70%;\r
+    position: absolute;\r
+    left: 15%;\r
+    box-shadow: 0 6px 10px rgba(0,0,0,.3);\r
+    -webkit-box-shadow: 0 6px 10px rgba(0,0,0,.3);\r
+}\r
+#msgModal .modal-footer, #funModal .modal-footer {\r
+    border: none;\r
+    margin: 0 auto;\r
+    width: 100%;\r
+    text-align: center;\r
+}\r
+\r
+\r
+#myInput {\r
+    background-image: url('../images/searchicon.png'); /* Add a search icon to input */\r
+    background-position: 10px 9px; /* Position the search icon */\r
+    background-repeat: no-repeat; /* Do not repeat the icon image */\r
+    width: 100%; /* Full-width */\r
+    font-size: 16px; /* Increase font-size */\r
+    padding: 5px 20px 5px 40px; /* Add some padding */\r
+    border: 1px solid #ddd; /* Add a grey border */\r
+    margin-bottom: 12px; /* Add some space below the input */\r
+}\r
+\r
+#myTable_search {\r
+    border-collapse: collapse; /* Collapse borders */\r
+    width: 100%; /* Full-width */\r
+    border: 1px solid #ddd; /* Add a grey border */\r
+    font-size: 18px; /* Increase font-size */\r
+}\r
+\r
+#myTable_search th, #myTable td {\r
+    text-align: left; /* Left-align text */\r
+    padding: 12px; /* Add padding */\r
+}\r
+\r
+#myTable_search tr {\r
+    /* Add a bottom border to all table rows */\r
+    border-bottom: 1px solid #ddd;\r
+}\r
+\r
+#myTable_search tr.header, #myTable tr:hover {\r
+    /* Add a grey background color to the table header and on hover */\r
+    background-color: #f1f1f1;\r
+}\r
+\r
+/* List */\r
+#listArea {\r
+    margin-top: 25px;\r
+}\r
+#listArea .list {\r
+    /*border: 1px solid #333;*/\r
+    padding: 5px;\r
+}\r
+#listArea .list div {\r
+    margin: 5px 0;\r
+}\r
+\r
+#menu_accordion {\r
+    margin-top: 20px;\r
+}\r
+\r
+#menu_accordion li a{\r
+    padding-left: 42px;\r
+}\r
+#menu_accordion li a:hover {\r
+    color: #4ac9ff;\r
+}\r
+\r
+#rightContainer {\r
+    margin-top:20px;\r
+}\r
+\r
+#panel1 li:first-child{\r
+    margin-top:1px;\r
+}\r
+\r
+#menu_accordion #container, #menu_accordion #widgets, #menu_accordion #notifications, #menu_accordion #functional{\r
+    margin-bottom : 0px;\r
+    text-align : left;\r
+    background-color: #F5F5F5;\r
+}\r
+\r
+#menu_accordion h5{\r
+    margin-bottom : 0px;\r
+    text-align : left;\r
+    padding-left : 10px;\r
+    cursor: pointer;\r
+    letter-spacing: 3px;\r
+    width:100%;\r
+}\r
+\r
+.tableAlign{\r
+    text-align:left;\r
+}\r
+\r
+.chkboxAlign{\r
+    text-align:center;\r
+}\r
+\r
+#provinceTable th {\r
+    background-color: #e3e3e3;\r
+}\r
+\r
+#provinceTable.table-striped>tbody>tr:nth-child(even)>td {\r
+    background-color:#fafafa;\r
+}\r
+\r
+#provinceTable.table-striped>tbody>tr:nth-child(odd)>td {\r
+    background-color:#f7f7f7\r
+}\r
+#provinceTable.table-striped>tbody>tr:hover {\r
+    background-color: red;\r
+}\r
+\r
+.prvdel{\r
+    margin-left:20px;\r
+}\r
+\r
+.shortnoteHeader{\r
+    margin-top:50px;\r
+    text-align:left;\r
+    font-weight: bold;\r
+}\r
+.shortnoteText{\r
+    margin-top:20px;\r
+    text-align:left;\r
+}\r
+\r
+.ztree *{\r
+    font-family: "Microsoft Yahei",Arial,Tahoma,Verdana,SimSun;\r
+}\r
+\r
+.noChild_link_active {\r
+    /*background-color: lightslategrey;*/\r
+    font-style: italic;\r
+    color: #4ac9ff !important;\r
+    background:#fafafa;\r
+}\r
+\r
+.rmpadding{\r
+    padding-left:0px !important;\r
+    padding-right:0px !important;\r
+}\r
+\r
+#menu_accordion .collapsed span {\r
+    background: url(../images/expand_arrow.png) 1px 3px no-repeat;\r
+    display: block;\r
+    float: left;\r
+    margin-bottom: -1px;\r
+    cursor: pointer;\r
+    width: 100%;\r
+    padding-left: 20px;\r
+}\r
+#menu_accordion span {\r
+    background: url(../images/collapse_arrow.png) 1px 3px no-repeat;\r
+    display: block;\r
+    float: left;\r
+    margin-bottom: -1px;\r
+    cursor: pointer;\r
+    width: 100%;\r
+    padding-left: 20px;\r
+}\r
+\r
+.magic-radio + label{\r
+    font-size:14px;\r
+}\r
+\r
+.panelbr{\r
+    border-left:0px;\r
+    border-right:0px;\r
+}\r
+\r
+.popover-title {\r
+    margin: 0;\r
+    padding: 8px 14px;\r
+    font-size: 14px;\r
+    font-weight: normal;\r
+    line-height: 18px;}\r
+\r
+.customPopover{\r
+    padding:10px 20px;\r
+}\r
+\r
+\r
+.css-form input.ng-invalid.ng-touched, textarea.ng-invalid.ng-touched {\r
+    background-color: #FA787E;\r
+}\r
+\r
+.css-form input.ng-valid.ng-touched, textarea.ng-valid.ng-touched {\r
+    background-color: white;\r
+}\r
+\r
+.errMsg{\r
+\r
+    color:red;\r
+}\r
diff --git a/portal-common/src/main/webapp/framework/browser/js/DataService.js b/portal-common/src/main/webapp/framework/browser/js/DataService.js
new file mode 100644 (file)
index 0000000..c7da841
--- /dev/null
@@ -0,0 +1,137 @@
+/*
+
+    Copyright 2016-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.
+
+*/
+
+app.factory("DataService", function($http, $log){
+    return {
+        getAllData: function (value) {
+            //var value = $scope.param;
+            return $http({
+                url: 'http://localhost:8080/POC_NodeToServletPorting_Server/?widgetType=' + value,
+                headers: {'Content-Type': 'application/json'},
+                method: 'GET'
+            }).then(function (response) {
+                $log.info(response.data);
+                return response.data;
+            })
+        },
+
+        getAllProvinceData : function() {
+            return $http({
+                url: 'http://localhost:3000/api/getAllProvinceData',
+                method: 'GET',
+                headers: {'Content-Type': 'application/json'}
+            }).then(function(response){
+                //$log.info(response);
+                return response.data;
+            });
+        },
+        addProvinceData : function(provinceDetail) {
+            return $http({
+                url: 'http://localhost:3000/api/addProvinceData',
+                method: 'POST',
+                data: provinceDetail,
+                headers: {'Content-Type': 'application/json '}
+            }).then(function(response){
+                console.log("Response : ");
+                $log.info(response.data);
+                return response.data;
+            });
+        },
+        deleteProvinceData : function(idList) {
+            return $http({
+                url: 'http://localhost:3000/api/deleteProvinceData',
+                method: 'POST',
+                data: {'idList':idList},
+                headers: {'Content-Type': 'application/json'}
+            }).then(function(response){
+                console.log("Successfully Deleted..");
+                $log.info(response);
+                return response.data;
+            });
+        },
+        editProvinceData : function(provinceDetail) {
+            return $http({
+                url: 'http://localhost:3000/api/editProvinceData',
+                method: 'POST',
+                data: provinceDetail,
+                headers: {'Content-Type': 'application/json'}
+            }).then(function(response){
+                console.log("Successfully Edited...");
+                $log.info(response);
+                return response.data;
+            });
+        }
+    }
+});
+
+app.factory('LoginService', function($http, $log) {
+    var admin = 'admin';
+    var pass = 'pass';
+    var isAuthenticated = false;
+
+    return {
+        login : function(user) {
+            console.log(user);
+            return $http({
+                url: 'http://localhost:8081/api/signin',//http://192.168.4.161:3000/api/login
+                method: 'POST',
+                data: {'name':user.username, 'pswd':user.password},
+                headers: {'Content-Type': 'application/json'}
+            }).then(function(response){
+                $log.info(response);
+                if(response.status == 200) {
+                    console.log("Success");
+                    //Success
+                    isAuthenticated = true;
+                }
+                else {
+                    console.log("Fail");
+                    isAuthenticated = false;
+                }
+                console.log("isAuthenticated: " + isAuthenticated);
+                return isAuthenticated;
+            }, function(reason){
+                $log.info(reason);
+                console.log("Fail");
+                isAuthenticated = false;
+                return reason;
+            });
+            /*isAuthenticated = user.username === admin && user.password === pass;
+            return isAuthenticated;*/
+        },
+        isAuthenticated : function() {
+            return isAuthenticated;
+        },
+        registerUser: function(user){
+            console.log("New Registration: " + JSON.stringify(user));
+            return $http({
+                url: 'http://localhost:8081/api/signup',//http://192.168.4.161:3000/api/login
+                method: 'POST',
+                data: {'name':user.username, 'pswd':user.password, 'email':user.email},
+                headers: {'Content-Type': 'application/json'}
+            }).then(function(response){
+                $log.info(response);
+            },function(reason){
+                $log.info(reason);
+            });
+
+
+        }
+    };
+
+});
\ No newline at end of file
diff --git a/portal-common/src/main/webapp/framework/browser/js/app.js b/portal-common/src/main/webapp/framework/browser/js/app.js
new file mode 100644 (file)
index 0000000..4ffe2c8
--- /dev/null
@@ -0,0 +1,1312 @@
+/*\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
+var app = angular.module("POCApp", ["ui.router", "ngTable"])\r
+\r
+    /*.run(function($rootScope, $location, $state, LoginService) {\r
+        $rootScope.$on("$stateChangeStart", function(event, toState, toParams, fromState, fromParams){\r
+            if (toState.authenticate && !LoginService.isAuthenticated()){\r
+                // User isn’t authenticated\r
+                $state.transitionTo("login");\r
+                event.preventDefault();\r
+            }\r
+        });\r
+    })*/\r
+    .config(function($stateProvider, $urlRouterProvider, $urlMatcherFactoryProvider){\r
+        //$routeProvider.caseInsensitiveMatch = true;\r
+        $urlMatcherFactoryProvider.caseInsensitive(true);\r
+        $urlRouterProvider.otherwise('/login');\r
+        //$locationProvider.html5Mode(true).hashPrefix('!');\r
+        $stateProvider\r
+            .state('login', {\r
+                url : '/login',\r
+                templateUrl : 'templates/login.html',\r
+                controller : 'LoginController',\r
+                authenticate: false\r
+            })\r
+            .state('register', {\r
+                url : '/register',\r
+                templateUrl : 'templates/register.html',\r
+                controller : 'registerController',\r
+                authenticate: false\r
+            })\r
+            .state("home", {\r
+                url: "/home",\r
+                templateUrl : "templates/home.html",\r
+                controller : "homeCtrl",\r
+                authenticate: true\r
+            })\r
+            .state("home.tree", {\r
+                url: "/tree",\r
+                templateUrl : "templates/tree.html",\r
+                controller : "treeCtrl",\r
+                authenticate: true\r
+            })\r
+            .state("home.accordion", {\r
+                url: "/accordion",\r
+                templateUrl : "templates/accordion.html",\r
+                controller : "accordionCtrl",\r
+                authenticate: true\r
+            })\r
+            .state("home.tabs", {\r
+                url: "/tabs",\r
+                templateUrl : "templates/tabs.html",\r
+                controller : "tabsCtrl",\r
+                authenticate: true\r
+            })\r
+            .state("home.vtabs", {\r
+                url: "/vtabs",\r
+                templateUrl : "templates/verticalTab.html",\r
+                controller : "vTabCtrl",\r
+                authenticate: true\r
+            })\r
+            .state("home.table", {\r
+                url: "/table",\r
+                templateUrl : "templates/table.html",\r
+                controller : "tableCtrl",\r
+                authenticate: true\r
+            })\r
+            .state("home.buttons", {\r
+                url: "/buttons",\r
+                templateUrl : "templates/buttons.html",\r
+                controller : "buttonsCtrl",\r
+                authenticate: true\r
+            })\r
+            /*state for radio button and checkboxes-------------------------------------------------*/\r
+            .state("home.radiobuttons", {\r
+                url: "/radiobuttons",\r
+                templateUrl : "templates/radioButtons.html",\r
+                controller : "radioCtrl",\r
+                authenticate: true\r
+            })\r
+            .state("home.checkboxes", {\r
+                url: "/checkboxes",\r
+                templateUrl : "templates/checkBoxes.html",\r
+                controller : "checkBoxCtrl",\r
+                authenticate: true\r
+            })\r
+            .state("home.dropdown", {\r
+                url: "/dropdown",\r
+                templateUrl: "templates/dropdown.html",\r
+                controller: "dropdownCtrl",\r
+                authenticate: true\r
+            })\r
+\r
+            .state("home.list", {\r
+                url: "/list",\r
+                /*template:"<h3>Under Progress</h3>",*/\r
+                templateUrl : "templates/list.html",\r
+                controller : "listCtrl",\r
+                authenticate: true\r
+            })\r
+\r
+            .state("home.provinceMgmt", {\r
+                url: "/provinceMgmt",\r
+                templateUrl : "templates/provinceMgmt.html",\r
+                controller : "provinceMgmtCtrl",\r
+                authenticate: true\r
+            })\r
+            .state("home.tooltip", {\r
+                url: "/tooltip",\r
+                templateUrl : "templates/textarea.html",\r
+                controller : "toolCtrl",\r
+                authenticate: true\r
+            })\r
+\r
+            .state("home.notification", {\r
+                url: "/notification",\r
+                templateUrl : "templates/notification.html",\r
+                controller : "notificationCtrl",\r
+                authenticate: true\r
+            })\r
+            .state("home.functional", {\r
+                url: "/functional",\r
+                templateUrl : "templates/functional.html",\r
+                controller : "functionalCtrl",\r
+                authenticate: true\r
+            })\r
+\r
+\r
+    })\r
+    .controller('LoginController', function($scope, $rootScope, $stateParams, $state, LoginService) {\r
+        $rootScope.title = "AngularJS Login Sample";\r
+\r
+        $scope.formSubmit = function() {\r
+            LoginService.login($scope.user)\r
+                .then(function (data) {\r
+                    if (data) {\r
+                        $scope.error = '';\r
+                        $scope.user.username = '';\r
+                        $scope.user.password = '';\r
+                        $state.transitionTo('home.tree');\r
+                    }\r
+                    else {\r
+                        $scope.error = "Incorrect username/password !";\r
+                    }\r
+                }, function (reason) {\r
+                    $scope.error = "Incorrect username/password !";\r
+                });\r
+        };\r
+\r
+    })\r
+    .controller('registerController', function($scope, $state, LoginService){\r
+        $scope.formSubmit = function() {\r
+            if($scope.user.password === $scope.user.confpassword) {\r
+                LoginService.registerUser($scope.user)\r
+                    .then(function (data) {\r
+                        $state.transitionTo("login");\r
+                    }, function () {\r
+                        console.log("Failed to register");\r
+                    });\r
+            }\r
+            else {\r
+                console.log("Password not matched...");\r
+                var dialog_tpl = $(modelTemplate).filter('#personDialog').html();\r
+                var data = {'title':'Error',showClose:true, 'closeBtnTxt':'Ok', 'icon':'glyphicon glyphicon-exclamation-sign','iconColor':'icon_error','msg':'Password and Confirm password does not match.', buttons:[]};\r
+                var html = Mustache.to_html(dialog_tpl, data);\r
+                $(html).modal({backdrop: "static"});   //backdrop: "static" - for grayed out and no outside click work, backdrop: false - no grayed out*/\r
+            }\r
+        };\r
+    })\r
+    .controller("homeCtrl", function($scope, $state, DataService){\r
+        $scope.message = "Home Page";\r
+\r
+        /*$scope.geticonClass = function() {\r
+            if($( "#panel1" ).hasClass( "in" )){\r
+                return "openo_accordion_ui-icon-expand";\r
+            }\r
+            else{\r
+               return "openo_accordion_ui-icon-expand.current";\r
+            }\r
+\r
+\r
+        }*/\r
+\r
+\r
+\r
+        /* $scope.accordionLoaded  = function() {\r
+             if(modelTemplate != null) {\r
+                 console.log("left menu loading..");\r
+                 menuaccordion();\r
+                 return true;\r
+             }\r
+             console.log("left menu not loading..");\r
+             return false;\r
+         }\r
+\r
+         function menuaccordion() {\r
+             var accordion_tpl = $(modelTemplate).filter('#menu_accordion').html();\r
+\r
+             $.getJSON('./data/homelinks.json', function (accordion) {\r
+                 var html = Mustache.to_html(accordion_tpl, accordion.accordion_data);\r
+                 $('#accordionmenuid').html(html);\r
+             });\r
+         }*/\r
+\r
+    })\r
+\r
+    /* Tree Controller */\r
+    .controller("treeCtrl", function($scope,DataService,$log){\r
+        $scope.message = "Tree Data";\r
+        var setting = {};\r
+        /*$scope.treeLoaded = function() {\r
+            if(modelTemplate != null) {\r
+                console.log("Tree data loading..");\r
+                tree();\r
+                return true;\r
+            }\r
+            console.log("Tree data not loading..");\r
+            return false;\r
+        }*/\r
+        $scope.init = function() {\r
+            $scope.param="treeData";\r
+            $scope.shortNote="shortNote";\r
+            DataService.getAllData($scope.param)\r
+                .then(function(data){\r
+                    $scope.treeData = data;\r
+                    tree();\r
+                    console.log("inside tree");\r
+                    $log.info($scope.treeData);\r
+                });\r
+            DataService.getAllData($scope.shortNote)\r
+                .then(function(data1){\r
+                    $scope.treeTip = data1.treeTip;\r
+                    console.log("inside treeTip");\r
+                    $log.info(data1);\r
+                });\r
+        }\r
+        function tree() {\r
+            zNodes = $scope.treeData;\r
+            $.fn.zTree.init($("#tree1"), setting, zNodes);\r
+\r
+        }\r
+    })\r
+\r
+    /* Accordian Controller */\r
+    .controller("accordionCtrl", function($scope,DataService, $log){\r
+\r
+        $scope.message = "Accordion";\r
+\r
+        $scope.accordionLoaded  = function() {\r
+            if(modelTemplate != null) {\r
+                console.log("accordion loading..");\r
+\r
+                accordion();\r
+                return true;\r
+            }\r
+            console.log("accordion not loading..");\r
+            return false;\r
+        }\r
+\r
+        $scope.init = function() {\r
+            $scope.param="accordionData";\r
+            $scope.accordionTip="shortNote";\r
+            DataService.getAllData($scope.param)\r
+                .then(function(data){\r
+                    $scope.accordion = data;\r
+                    accordion();\r
+                    console.log("inside accordion");\r
+                    $log.info(data);\r
+                });\r
+            DataService.getAllData($scope.accordionTip)\r
+                .then(function(data){\r
+                    $scope.accordionTipData = data.accordionTip;\r
+                    console.log("inside accordion");\r
+                    $log.info(data);\r
+                });\r
+        }\r
+\r
+        function accordion() {\r
+\r
+            var accordion_tpl = $(modelTemplate).filter('#accordion').html();\r
+            console.log("in acc" );\r
+            var html = Mustache.to_html(accordion_tpl, $scope.accordion.accordion_data);\r
+            $('#accordion').html(html);\r
+        }\r
+    })\r
+    .controller("tabsCtrl", function($scope, $state, DataService, $log){\r
+        $scope.message = "Tabs";\r
+        $scope.tabLoaded  = function() {\r
+            if(modelTemplate != null) {\r
+                console.log("Tab is loading..");\r
+                loadTabData();\r
+                return true;\r
+            }\r
+            console.log("Not ready..");\r
+            return false;\r
+        }\r
+\r
+        $scope.init = function() {\r
+            $scope.param="tabData";\r
+            $scope.tabTip="shortNote";\r
+            DataService.getAllData($scope.param)\r
+                .then(function(data){\r
+                    $scope.tabdata = data;\r
+                    loadTabData();\r
+                    console.log("inside tabs");\r
+                    $log.info(data);\r
+                });\r
+            DataService.getAllData($scope.tabTip)\r
+                .then(function(data){\r
+                    $scope.tabTipData = data.tabTip;\r
+                    $log.info(data);\r
+                });\r
+        }\r
+\r
+        function loadTabData() {\r
+            var tab_tpl = $(modelTemplate).filter('#tabs').html();\r
+            var html = Mustache.to_html(tab_tpl, $scope.tabdata.tabData);\r
+            $('#tabArea').html(html);\r
+        }\r
+\r
+    })\r
+    .controller("vTabCtrl", function($scope, $state, DataService){\r
+        $scope.message = "Vertical Tabs";\r
+\r
+        $scope.vtabLoaded  = function() {\r
+            if(modelTemplate != null) {\r
+                console.log("Vertical Tab is loading..");\r
+                loadvTabData();\r
+                return true;\r
+            }\r
+            console.log("Not ready..");\r
+            return false;\r
+        }\r
+\r
+        $scope.init = function() {\r
+            $scope.param="vtabData";\r
+            $scope.vtabTip="shortNote";\r
+            DataService.getAllData($scope.param)\r
+                .then(function(vtabdata){\r
+                    $scope.data = vtabdata;\r
+                    loadvTabData();\r
+                    console.log("inside vTab");\r
+                });\r
+            DataService.getAllData($scope.vtabTip)\r
+                .then(function(vtabdata){\r
+                    $scope.vtabTipdata = vtabdata.vtabTip;\r
+                    console.log("inside vTab");\r
+                });\r
+        }\r
+\r
+        function loadvTabData() {\r
+\r
+            var vtab_tpl = $(modelTemplate).filter('#vtabs').html();\r
+            var html = Mustache.to_html(vtab_tpl, $scope.data.vtabData);\r
+            $('#vtabArea').html(html);\r
+        }\r
+    })\r
+    .controller("tableCtrl", function($scope, $state, DataService){\r
+        $scope.message = "Tables";\r
+\r
+        $scope.tableLoaded  = function() {\r
+            if(modelTemplate != null) {\r
+                console.log("Table is loading..");\r
+                loadTableData();\r
+                return true;\r
+            }\r
+            console.log("Not ready..");\r
+            return false;\r
+        }\r
+\r
+        $scope.init = function() {\r
+            $scope.param="tableData";\r
+            $scope.tableTip="shortNote";\r
+            DataService.getAllData($scope.param)\r
+                .then(function(data){\r
+                    $scope.tableData = data;\r
+                    loadTableData();\r
+                    console.log("inside table");\r
+                });\r
+\r
+            DataService.getAllData($scope.tableTip)\r
+                .then(function(data){\r
+                    $scope.tableTipData = data.tableTip;\r
+                    console.log("inside table");\r
+                });\r
+        }\r
+\r
+        function loadTableData() {\r
+\r
+            var table_tpl = $(modelTemplate).filter('#table').html();\r
+\r
+            var html = Mustache.to_html(table_tpl, $scope.tableData.basic_table_data);\r
+            $('#basictableArea').html(html);\r
+\r
+            var html = Mustache.to_html(table_tpl, $scope.tableData.str_table_data);\r
+            $('#strippedtableArea').html(html);\r
+\r
+            var html = Mustache.to_html(table_tpl, $scope.tableData.cond_table_data);\r
+            $('#condensedtableArea').html(html);\r
+        }\r
+    })\r
+\r
+    /* Buttons Controller */\r
+    .controller("buttonsCtrl", function($scope,DataService,$log){\r
+        $scope.message = "Types of Buttons";\r
+        $scope.buttonTip="shortNote";\r
+\r
+        $scope.init = function() {\r
+            $scope.param="buttonsData";\r
+            DataService.getAllData($scope.param)\r
+                .then(function(data){\r
+                    $scope.buttons = data;\r
+                    defaultButtons();\r
+                    visualButtons();\r
+                    sizeButtons();\r
+                    iconButtons();\r
+                    console.log("inside accordion");\r
+                    $log.info(data);\r
+                });\r
+            DataService.getAllData($scope.buttonTip)\r
+                .then(function(data){\r
+                    $scope.buttonTipData = data.buttonTip;\r
+                    console.log("inside table");\r
+                });\r
+        }\r
+\r
+        function defaultButtons(){\r
+            console.log("Default buttons Loaded..");\r
+            //Here your view content is fully loaded !!\r
+            var def_button_tpl = $(modelTemplate).filter('#defaultButtons').html();\r
+            var def_icon_button_tpl = $(modelTemplate).filter('#defaultIconButtons').html();\r
+\r
+            var html = Mustache.to_html(def_button_tpl, $scope.buttons.default_btn_data.def_button);\r
+            $('#defaultButtonArea').html(html);\r
+\r
+            var html = Mustache.to_html(def_icon_button_tpl, $scope.buttons.default_btn_data.def_print_button);\r
+            $('#defaultButtonArea').append(html);\r
+\r
+            var html = Mustache.to_html(def_icon_button_tpl, $scope.buttons.default_btn_data.def_print_button_right);\r
+            $('#defaultButtonArea').append(html);\r
+        }\r
+\r
+\r
+        function visualButtons(){\r
+            console.log("Loaded..");\r
+            //Here your view content is fully loaded !!\r
+            var visual_button_tpl = $(modelTemplate).filter('#visualButtons').html();\r
+\r
+            var html = Mustache.to_html(visual_button_tpl, $scope.buttons.visual_btn_data.vis_pri_btn_data);\r
+            $('#visualButtonArea').html(html);\r
+\r
+            var html = Mustache.to_html(visual_button_tpl, $scope.buttons.visual_btn_data.vis_sec_btn_data);\r
+            $('#visualButtonArea').append(html);\r
+\r
+            var html = Mustache.to_html(visual_button_tpl, $scope.buttons.visual_btn_data.vis_succ_btn_data);\r
+            $('#visualButtonArea').append(html);\r
+\r
+            var html = Mustache.to_html(visual_button_tpl, $scope.buttons.visual_btn_data.vis_inf_btn_data);\r
+            $('#visualButtonArea').append(html);\r
+\r
+            var html = Mustache.to_html(visual_button_tpl, $scope.buttons.visual_btn_data.vis_warn_btn_data);\r
+            $('#visualButtonArea').append(html);\r
+\r
+            var html = Mustache.to_html(visual_button_tpl, $scope.buttons.visual_btn_data.vis_dang_btn_data);\r
+            $('#visualButtonArea').append(html);\r
+\r
+            var html = Mustache.to_html(visual_button_tpl, $scope.buttons.visual_btn_data.vis_link_btn_data);\r
+            $('#visualButtonArea').append(html);\r
+        }\r
+\r
+        function sizeButtons() {\r
+            var size_button_tpl = $(modelTemplate).filter('#sizeButtons').html();\r
+\r
+            var html = Mustache.to_html(size_button_tpl, $scope.buttons.diffSize_btn_data.size_small_btn_data);\r
+            $('#sizeButtonArea').html(html);\r
+\r
+            var html = Mustache.to_html(size_button_tpl, $scope.buttons.diffSize_btn_data.size_large_btn_data);\r
+            $('#sizeButtonArea').append(html);\r
+\r
+            var html = Mustache.to_html(size_button_tpl, $scope.buttons.diffSize_btn_data.size_block_btn_data);\r
+            $('#sizeButtonArea').append(html);\r
+\r
+        }\r
+\r
+        function iconButtons() {\r
+            var icon_button_tpl = $(modelTemplate).filter('#iconButtons').html();\r
+\r
+            var html = Mustache.to_html(icon_button_tpl, $scope.buttons.icon_btn_data.search_icon_btn_data);\r
+            $('#iconButtonArea').html(html);\r
+\r
+            var html = Mustache.to_html(icon_button_tpl, $scope.buttons.icon_btn_data.search_icon_styled_btn_data);\r
+            $('#iconButtonArea').append(html);\r
+\r
+            var html = Mustache.to_html(icon_button_tpl, $scope.buttons.icon_btn_data.print_icon_btn_data);\r
+            $('#iconButtonArea').append(html);\r
+\r
+        }\r
+\r
+        $scope.defaultButtonsLoaded  = function() {\r
+            if(modelTemplate != null) {\r
+                console.log("default buttons loading..");\r
+                defaultButtons();\r
+                return true;\r
+            }\r
+            console.log("default buttons not loading..");\r
+            return false;\r
+        }\r
+\r
+        $scope.visualButtonsLoaded  = function() {\r
+            if(modelTemplate != null) {\r
+                console.log("visual buttons loading..");\r
+                visualButtons();\r
+                return true;\r
+            }\r
+            console.log("visual buttons not loading..");\r
+            return false;\r
+        }\r
+\r
+        $scope.sizeButtonsLoaded  = function() {\r
+            if(modelTemplate != null) {\r
+                console.log("size buttons loading..");\r
+                sizeButtons();\r
+                return true;\r
+            }\r
+            console.log("size buttons not loading..");\r
+            return false;\r
+        }\r
+\r
+        $scope.iconButtonsLoaded  = function() {\r
+            if(modelTemplate != null) {\r
+                console.log("icon buttons loading..");\r
+                iconButtons();\r
+                return true;\r
+            }\r
+            console.log("icon buttons not loading..");\r
+            return false;\r
+        }\r
+    })\r
+    /* Drop down----------------------*/\r
+    .controller("dropdownCtrl", function($scope, DataService) {\r
+        $scope.message = "You selected drop down";\r
+        $scope.subIsLoaded = function () {\r
+            if (modelTemplate != null) {\r
+                console.log("Loading..");\r
+                loadDrop();\r
+                return true;\r
+            }\r
+            console.log("Not Loaded..");\r
+            return false;\r
+        }\r
+\r
+        $scope.init = function() {\r
+            $scope.param="dropdownData";\r
+            $scope.dropdownTip="shortNote";\r
+            DataService.getAllData($scope.param)\r
+                .then(function(data){\r
+                    $scope.dropdown = data;\r
+                    loadDrop();\r
+                });\r
+            DataService.getAllData($scope.dropdownTip)\r
+                .then(function(data){\r
+                    $scope.dropdownTipData = data.dropdownTip;\r
+                    console.log("inside table");\r
+                });\r
+        }\r
+        function loadDrop() {\r
+            var drop_tpl = $(modelTemplate).filter('#dropDown').html();\r
+            var dropHeader_tpl = $(modelTemplate).filter('#dropDownHeader').html();\r
+            var dropSimple_tpl = $(modelTemplate).filter('#simpleDropdownTmpl').html();\r
+\r
+            var html = Mustache.to_html(drop_tpl, $scope.dropdown.dropped_down_data);\r
+            $('#dropArea').html(html);\r
+\r
+            var html = Mustache.to_html(drop_tpl, $scope.dropdown.dropped_up_data);\r
+            $('#dropAreaUP').html(html);\r
+\r
+            var html = Mustache.to_html(dropHeader_tpl, $scope.dropdown.dropHeader_data);\r
+            $('#dropAreaHeader').html(html);\r
+\r
+            var html = Mustache.to_html(dropSimple_tpl, $scope.dropdown.dropSimple_data);\r
+            $('#plainDropDown').html(html);\r
+\r
+        }\r
+    })\r
+    .controller("radioCtrl", function($scope, DataService, $log) {\r
+        $scope.message = "You selected radio button tab";\r
+        var lodedOnce = false;\r
+        $scope.subIsLoaded  = function() {\r
+            if(modelTemplate != null) {\r
+                console.log("Loading..");\r
+                loadRadioBtn();\r
+                return true;\r
+            }\r
+            console.log("Not Loaded..");\r
+            return false;\r
+        }\r
+\r
+        $scope.init = function() {\r
+            $scope.param="radioData";\r
+            $scope.radioTip="shortNote";\r
+            DataService.getAllData($scope.param)\r
+                .then(function(data){\r
+                    $scope.radioButton = data;\r
+                    loadRadioBtn();\r
+                    console.log("inside button");\r
+                    $log.info(data);\r
+                });\r
+\r
+            DataService.getAllData($scope.radioTip)\r
+                .then(function(data){\r
+                    $scope.radioTipData = data.radioTip;\r
+                    console.log("inside table");\r
+                });\r
+        }\r
+        function loadRadioBtn(){\r
+            console.log("lodedOnce : "+lodedOnce);\r
+\r
+            var radio_button_tpl = $(modelTemplate).filter('#radioButtons').html();\r
+            var html = Mustache.to_html(radio_button_tpl, $scope.radioButton .radio_btn_default_data);\r
+            $('#radioBtnArea').html(html);\r
+\r
+            var html = Mustache.to_html(radio_button_tpl, $scope.radioButton .radio_btn_primary_data);\r
+            $('#radioBtnArea').append(html);\r
+\r
+            var html = Mustache.to_html(radio_button_tpl, $scope.radioButton .radio_btn_success_data);\r
+            $('#radioBtnArea').append(html);\r
+\r
+            var html = Mustache.to_html(radio_button_tpl, $scope.radioButton .radio_btn_danger_data);\r
+            $('#radioBtnArea').append(html);\r
+\r
+            var html = Mustache.to_html(radio_button_tpl, $scope.radioButton .radio_btn_Warn_data);\r
+            $('#radioBtnArea').append(html);\r
+\r
+            var html = Mustache.to_html(radio_button_tpl, $scope.radioButton .radio_btn_info_data);\r
+            $('#radioBtnArea').append(html);\r
+\r
+        }\r
+    })\r
+    .controller("checkBoxCtrl", function($scope, DataService) {\r
+        $scope.message = "You selected checkbox tab";\r
+        $scope.subIsLoaded  = function() {\r
+            if(modelTemplate != null) {\r
+                console.log("Loading..");\r
+                loadCheckBox();\r
+                return true;\r
+            }\r
+            console.log("Not Loaded..");\r
+            return false;\r
+        }\r
+        $scope.init = function() {\r
+            $scope.param="checkboxData";\r
+            $scope.checkboxTip="shortNote";\r
+            DataService.getAllData($scope.param)\r
+                .then(function(data){\r
+                    $scope.checkBox = data;\r
+                    loadCheckBox();\r
+                });\r
+            DataService.getAllData($scope.checkboxTip)\r
+                .then(function(data){\r
+                    $scope.checkboxTipData = data.checkboxTip;\r
+                    console.log("inside table");\r
+                });\r
+        }\r
+        function loadCheckBox() {\r
+            var check_box_tpl = $(modelTemplate).filter('#checkBoxes').html();\r
+\r
+            var html = Mustache.to_html(check_box_tpl, $scope.checkBox.checkbox_default_data);\r
+            $('#CheckBoxArea').html(html);\r
+\r
+            var html = Mustache.to_html(check_box_tpl, $scope.checkBox.checkbox_primary_data);\r
+            $('#CheckBoxArea').append(html);\r
+\r
+            var html = Mustache.to_html(check_box_tpl, $scope.checkBox.checkbox_success_data);\r
+            $('#CheckBoxArea').append(html);\r
+\r
+            var html = Mustache.to_html(check_box_tpl, $scope.checkBox.checkbox_danger_data);\r
+            $('#CheckBoxArea').append(html);\r
+\r
+            var html = Mustache.to_html(check_box_tpl, $scope.checkBox.checkbox_warn_data);\r
+            $('#CheckBoxArea').append(html);\r
+\r
+            var html = Mustache.to_html(check_box_tpl, $scope.checkBox.checkbox_info_data);\r
+            $('#CheckBoxArea').append(html);\r
+\r
+            /*$.getJSON('./data/checkboxData.json', function(c_data) {\r
+             var html = Mustache.to_html(check_box_tpl, c_data.checkbox_default_data);\r
+             $('#CheckBoxArea').html(html);\r
+\r
+             var html = Mustache.to_html(check_box_tpl, c_data.checkbox_primary_data);\r
+             $('#CheckBoxArea').append(html);\r
+\r
+             var html = Mustache.to_html(check_box_tpl, c_data.checkbox_success_data);\r
+             $('#CheckBoxArea').append(html);\r
+\r
+             var html = Mustache.to_html(check_box_tpl, c_data.checkbox_danger_data);\r
+             $('#CheckBoxArea').append(html);\r
+\r
+             var html = Mustache.to_html(check_box_tpl, c_data.checkbox_warn_data);\r
+             $('#CheckBoxArea').append(html);\r
+\r
+             var html = Mustache.to_html(check_box_tpl, c_data.checkbox_info_data);\r
+             $('#CheckBoxArea').append(html);\r
+             });*/\r
+        }\r
+    })\r
+\r
+    /* Reference Code -- Remove after use */\r
+    .controller("coursesCtrl", function($scope, DataService){\r
+        $scope.message = "Courses Offered";\r
+        $scope.courses = ["Java", "C/C++", "JavaScript", "AngularJS", "NodeJS", "HTML", "Python", "Action Script"];\r
+        $scope.showDialog = function() {\r
+            /*var dialog_tpl = $(modelTemplate).filter('#personDialog').html();\r
+             var data = {'title':'Shahid Noor','showClose':true,'closeBtnTxt':'Cancel','icon':'glyphicon glyphicon-off','iconColor':'icon_warn','msg':'Good! There is a message that can be used to show on the screen. There is a message that can be used to show on the screen', buttons:[{"text": "Ok", 'action':'callThis()'},{"text": "Show"}]};\r
+             var html = Mustache.to_html(dialog_tpl, data);\r
+             $(html).modal({backdrop: "static"});   //backdrop: "static" - for grayed out and no outside click work, backdrop: false - no grayed out*/\r
+\r
+            var def_button_tpl = $(modelTemplate).filter('#visualButtons').html();\r
+            var def_btn_data = {'title':"asas", 'type':'primary'};\r
+            var html = Mustache.to_html(def_button_tpl, def_btn_data);\r
+            $('#sampleArea').html(html);\r
+        };\r
+\r
+        // $scope.$on('$viewContentLoaded', function(){\r
+        function loaded(){\r
+            console.log("Loaded..");\r
+            //Here your view content is fully loaded !!\r
+            var def_button_tpl = $(modelTemplate).filter('#dropDown').html();\r
+            var def_btn_data = {'title':'Shahid Noor','position':'down', items:[{"itemLabel": "Ok"},{"itemLabel": "Show"}]};\r
+            var html = Mustache.to_html(def_button_tpl, def_btn_data);\r
+            $('#sampleArea').html(html);\r
+\r
+        }\r
+        $scope.subIsLoaded  = function() {\r
+            if(modelTemplate != null) {\r
+                console.log("Loading..");\r
+                loaded();\r
+                return true;\r
+            }\r
+            console.log("Not Loaded..");\r
+            return false;\r
+        }\r
+    })\r
+\r
+    .controller("toolCtrl", function($scope, DataService, $compile, $log){\r
+                 $scope.toolTip = "shortNote";\r
+                $scope.toolTipContent = "textArea";\r
+\r
+            DataService.getAllData($scope.toolTipContent)\r
+            .then(function(data){\r
+                $log.info(data.Note.placement);\r
+                $scope.noteContent = data.Note.message;\r
+                $scope.notePlacement = data.Note.placement;\r
+                $scope.errMsg = data.ErrMsg;\r
+                console.log($scope.noteContent + " " + $scope.notePlacement);\r
+                loadTextArea();\r
+            });\r
+            DataService.getAllData($scope.toolTip)\r
+                .then(function(data){\r
+                    $scope.toolTipData = data.toolTip;\r
+                    //loadTextArea();\r
+                });\r
+\r
+        //$('[data-toggle="popover"]').popover();\r
+\r
+\r
+\r
+        function loadTextArea() {\r
+            var text = $(modelTemplate).filter('#fname').html();\r
+            var email = $(modelTemplate).filter('#email').html();\r
+            var url = $(modelTemplate).filter('#url').html();\r
+            var password = $(modelTemplate).filter('#password').html();\r
+            var numeric = $(modelTemplate).filter('#numeric').html();\r
+            var dot = $(modelTemplate).filter('#dot').html();\r
+            var dateinput = $(modelTemplate).filter('#dateinput').html();\r
+            var monthinput = $(modelTemplate).filter('#monthinput').html();\r
+            var weekinput = $(modelTemplate).filter('#weekinput').html();\r
+            var timeinput = $(modelTemplate).filter('#timeinput').html();\r
+            var ipv4 = $(modelTemplate).filter('#ipv4').html();\r
+            var ipv6 = $(modelTemplate).filter('#ipv6').html();\r
+            var textarea = $(modelTemplate).filter('#textarea').html();\r
+\r
+            var note = $(modelTemplate).filter('#note').html();\r
+\r
+            var html = Mustache.to_html(text, $scope.errMsg);\r
+            $('#fname').html($compile(html)($scope));\r
+\r
+            var html = Mustache.to_html(email, $scope.errMsg);\r
+            $('#email').html($compile(html)($scope));\r
+\r
+            var html = Mustache.to_html(url, $scope.errMsg);\r
+            $('#url').html($compile(html)($scope));\r
+\r
+            var html = Mustache.to_html(password, $scope.errMsg);\r
+            $('#password').html($compile(html)($scope));\r
+\r
+            var html = Mustache.to_html(numeric, $scope.errMsg);\r
+            $('#numeric').html($compile(html)($scope));\r
+\r
+\r
+            var html = Mustache.to_html(dot, $scope.errMsg);\r
+            $('#dot').html($compile(html)($scope));\r
+\r
+            var html = Mustache.to_html(dateinput, $scope.errMsg);\r
+            $('#dateinput').html($compile(html)($scope));\r
+\r
+            var html = Mustache.to_html(monthinput, $scope.errMsg);\r
+            $('#monthinput').html($compile(html)($scope));\r
+\r
+            var html = Mustache.to_html(weekinput, $scope.errMsg);\r
+            $('#weekinput').html($compile(html)($scope));\r
+\r
+            var html = Mustache.to_html(timeinput, $scope.errMsg);\r
+            $('#timeinput').html($compile(html)($scope));\r
+\r
+            var html = Mustache.to_html(ipv4, $scope.errMsg);\r
+            $('#ipv4').html($compile(html)($scope));\r
+\r
+            var html = Mustache.to_html(ipv6, $scope.errMsg);\r
+            $('#ipv6').html($compile(html)($scope));\r
+\r
+            var html = Mustache.to_html(textarea, $scope.errMsg);\r
+            $('#textarea').html($compile(html)($scope));\r
+\r
+\r
+\r
+            var html = Mustache.to_html(note, {"placement":$scope.notePlacement});\r
+            $('#note').html(html);\r
+            $("#noteanchor").popover({\r
+                template: '<div class="popover fade bottom in customPopover"><div class="arrow"></div>'+$scope.noteContent+'</div>'\r
+            });\r
+\r
+            $scope.validatetextbox = function (value){\r
+               if($scope.textbox) {\r
+                    $scope.textboxErr = false;\r
+                }\r
+                else\r
+                    $scope.textboxErr = true;\r
+\r
+            }\r
+            $scope.validateemail = function (value){\r
+                if($scope.email) {\r
+                    $scope.emailErr = false;\r
+                }\r
+                else\r
+                    $scope.emailErr = true;\r
+\r
+            }\r
+            $scope.validateurl = function (value){\r
+                if($scope.url) {\r
+                    $scope.urlErr = false;\r
+                }\r
+                else\r
+                    $scope.urlErr = true;\r
+\r
+            }\r
+            $scope.validatepassword = function (value){\r
+                if($scope.password) {\r
+                    $scope.passwordErr = false;\r
+                }\r
+                else\r
+                    $scope.passwordErr = true;\r
+\r
+            }\r
+            $scope.validatenumeric = function (value){\r
+                if($scope.number) {\r
+                    $scope.numericErr = false;\r
+                }\r
+                else\r
+                    $scope.numericErr = true;\r
+\r
+            }\r
+            $scope.validatedot = function (value){\r
+                if($scope.datetime) {\r
+                    $scope.dotErr = false;\r
+                }\r
+                else\r
+                    $scope.dotErr = true;\r
+\r
+            }\r
+            $scope.validatedateinput = function (value){\r
+                if($scope.date) {\r
+                    $scope.dateinputErr = false;\r
+                }\r
+                else\r
+                    $scope.dateinputErr = true;\r
+\r
+            }\r
+            $scope.validatemonthinput = function (value){\r
+                if($scope.month) {\r
+                    $scope.monthinputErr = false;\r
+                }\r
+                else\r
+                    $scope.monthinputErr = true;\r
+\r
+            }\r
+            $scope.validateweek = function (value){\r
+                if($scope.week) {\r
+                    $scope.weekinputErr = false;\r
+                }\r
+                else\r
+                    $scope.weekinputErr = true;\r
+\r
+            }\r
+            $scope.validatetime = function (value){\r
+                if($scope.time) {\r
+                    $scope.timeinputErr = false;\r
+                }\r
+                else\r
+                    $scope.timeinputErr = true;\r
+\r
+            }\r
+            $scope.validateipv4 = function (value){\r
+                if($scope.ipv4) {\r
+                    $scope.ipv4Err = false;\r
+                }\r
+                else\r
+                    $scope.ipv4Err = true;\r
+\r
+            }\r
+            $scope.validateipv6 = function (value){\r
+                if($scope.ipv6) {\r
+                    $scope.ipv6Err = false;\r
+                }\r
+                else\r
+                    $scope.ipv6Err = true;\r
+\r
+            }\r
+\r
+            $scope.validatetextarea = function (value){\r
+                if($scope.textarea) {\r
+                    $scope.textareaErr = false;\r
+                }\r
+                else\r
+                    $scope.textareaErr = true;\r
+\r
+            }\r
+\r
+\r
+\r
+        }\r
+\r
+\r
+    })\r
+\r
+\r
+\r
+\r
+\r
+\r
+\r
+    .controller("notificationCtrl", function($scope, DataService){\r
+        $scope.message = "Notification and Messages";\r
+        $scope.notificationTip = "shortNote";\r
+\r
+        var dialog_tpl;\r
+        $scope.templateLoaded  = function() {\r
+            if(modelTemplate != null) {\r
+                console.log("Loading..");\r
+\r
+                return true;\r
+            }\r
+            console.log("Not Loaded..");\r
+            return false;\r
+        }\r
+        $scope.init = function() {\r
+            $scope.param="notificationData";\r
+            $scope.notificationTip="shortNote";\r
+            DataService.getAllData($scope.param)\r
+                .then(function(data){\r
+                    $scope.notification = data;\r
+                });\r
+            DataService.getAllData($scope.notificationTip)\r
+                .then(function(data){\r
+                    $scope.notificationTipData = data.notificationTip;\r
+                });\r
+        }\r
+\r
+        $scope.showError = function() {\r
+            dialog_tpl = $(modelTemplate).filter('#personDialog').html();\r
+            var html = Mustache.to_html(dialog_tpl, $scope.notification.err_data);\r
+            $(html).modal({backdrop: "static"});//backdrop: "static" - for grayed out and no outside click work, backdrop: false - no grayed out*!\r
+        }\r
+\r
+        $scope.showWarning = function() {\r
+            dialog_tpl = $(modelTemplate).filter('#personDialog').html();\r
+            var html = Mustache.to_html(dialog_tpl, $scope.notification.warn_data);\r
+            $(html).modal();\r
+        }\r
+\r
+        $scope.showInfo = function() {\r
+            dialog_tpl = $(modelTemplate).filter('#personDialog').html();\r
+            var html = Mustache.to_html(dialog_tpl, $scope.notification.info_data);\r
+            $(html).modal();\r
+        }\r
+        $scope.showConfirm = function() {\r
+            dialog_tpl = $(modelTemplate).filter('#personDialog').html();\r
+            var html = Mustache.to_html(dialog_tpl, $scope.notification.confirm_data);\r
+            $(html).modal({backdrop: "static"});   //backdrop: "static" - for grayed out and no outside click work, backdrop: false - no grayed out*!/\r
+        }\r
+\r
+    })\r
+\r
+    .controller("functionalCtrl", function($scope, DataService){\r
+        $scope.message = "Functional Flow";\r
+\r
+        var dialog_tpl;\r
+        $scope.templateLoaded  = function() {\r
+            if(modelTemplate != null) {\r
+                console.log("Loading..");\r
+\r
+                return true;\r
+            }\r
+            console.log("Not Loaded..");\r
+            return false;\r
+        }\r
+\r
+        $scope.init = function() {\r
+            $scope.param="functionalData";\r
+            $scope.functionalTip="shortNote";\r
+            DataService.getAllData($scope.param)\r
+                .then(function(data){\r
+                    $scope.functional = data;\r
+                });\r
+            DataService.getAllData($scope.functionalTip)\r
+                .then(function(data){\r
+                    $scope.functionalTipData = data.functionalTip;\r
+                });\r
+        }\r
+        $scope.showCreate = function() {\r
+            dialog_tpl = $(modelTemplate).filter('#functionalDialog').html();\r
+            var html = Mustache.to_html(dialog_tpl, $scope.functional.create_data);\r
+            $(html).modal();\r
+        }\r
+        $scope.showModify = function() {\r
+            dialog_tpl = $(modelTemplate).filter('#functionalDialog').html();\r
+            var html = Mustache.to_html(dialog_tpl, $scope.functional.modify_data);\r
+            $(html).modal();\r
+        }\r
+        $scope.showDelete = function() {\r
+            dialog_tpl = $(modelTemplate).filter('#functionalDialog').html();\r
+            var html = Mustache.to_html(dialog_tpl, $scope.functional.delete_data);\r
+            $(html).modal();\r
+        }\r
+        $scope.showWorkflow = function() {\r
+            dialog_tpl = $(modelTemplate).filter('#functionalDialog').html();\r
+            var html = Mustache.to_html(dialog_tpl, $scope.functional.workflow_data);\r
+            $(html).modal();\r
+        }\r
+    })\r
+\r
+    .controller("listCtrl", function($scope, $log, DataService){\r
+        $scope.message = "List Page";\r
+        $scope.listTip = "shortNote";\r
+        $scope.init = function() {\r
+            console.log("Shahid... ng-init");\r
+            $scope.param="list";\r
+            DataService.getAllData($scope.param)\r
+                .then(function(data){\r
+                    $scope.mainlistItem = data;\r
+                }, function(reason){\r
+                    $scope.portfolios = [];\r
+\r
+                });\r
+\r
+            DataService.getAllData($scope.listTip)\r
+                .then(function(data){\r
+                    $scope.listTipData = data.listTip;\r
+                });\r
+        }\r
+        $scope.loadSubMenuPage = function(index) {\r
+            $log.info($scope.mainlistItem);\r
+            $scope.subMenuListItem = $scope.mainlistItem[index].subMenu;\r
+            $scope.subsubMenuListItem = [];\r
+        }\r
+        $scope.loadSubSubMenuPage = function(index) {\r
+            $log.info($scope.subMenuListItem);\r
+            console.log("index: "+index);\r
+            $scope.subsubMenuListItem = $scope.subMenuListItem[index].subsubMenu;\r
+        }\r
+    })\r
+\r
+    .controller("provinceMgmtCtrl", function($scope, $log, DataService, $state, $compile, NgTableParams){\r
+        $scope.message = "Province Management";\r
+        $scope.provinceTip = "shortNote";\r
+        /*$scope.provinceData = [\r
+            {id:1, province_name:'First', ip:'192.168.1.45', port:'8080'},\r
+            {id:2, province_name:'Second', ip:'192.168.1.5', port:'8081'},\r
+            {id:3, province_name:'Third', ip:'192.168.1.15', port:'8082'},\r
+            {id:4, province_name:'Fourth', ip:'192.168.1.28', port:'8083'},\r
+            {id:5, province_name:'Fifth', ip:'192.168.1.19', port:'8084'}\r
+        ];*/\r
+\r
+        $scope.init = function() {\r
+            console.log("Shahid... ng-init");\r
+            DataService.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.getAllData($scope.provinceTip)\r
+                .then(function(data){\r
+                    $scope.provinceTipData = data.provinceTip;\r
+                });\r
+        }\r
+\r
+        /*DataService.getAllProvinceData()\r
+            .then(function(data){\r
+                $scope.provinceData = data.provinceData;\r
+                console.log("Data: ");\r
+                $log.info(data.provinceData);\r
+            }, function(reason){\r
+                $scope.message = "Error is :" + JSON.stringify(reason);\r
+            });*/\r
+        /*DataService.getAllData($scope.provinceTip)\r
+            .then(function(data){\r
+                $scope.provinceTipData = data.provinceTip;\r
+            });*/\r
+\r
+        function loadButtons() {\r
+            var def_button_tpl = $(modelTemplate).filter('#defaultButtons').html();\r
+            var add_data = {"title":"Add", "clickAction":"showAddModal()"};\r
+            var delete_data = {"title":"Delete Selected", "clickAction":"deleteData()"};\r
+            var addhtml = Mustache.to_html(def_button_tpl, add_data);\r
+            var deletehtml = Mustache.to_html(def_button_tpl, delete_data);\r
+            $('#provinceAction').html($compile(addhtml)($scope));\r
+            $('#provinceAction').append($compile(deletehtml)($scope));\r
+\r
+            $scope.checkboxes = { 'checked': false, items: {} };\r
+\r
+            //var data = [{id: 1, name: "Moroni", age: 50}, {id: 2, name: "ABC", age: 30}, {id: 3, name: "Morhoni", age: 10}, {id: 4, name: "DABC", age: 31}, {id: 5, name: "Noor", age: 30}, {id: 6, name: "ABCD", age: 40}, {id: 7, name: "DABC", age: 31}, {id: 8, name: "Noor", age: 30}, {id: 9, name: "ABCD", age: 40}, {id: 10, name: "DABC", age: 31}, {id: 11, name: "Noor", age: 30}, {id: 12, name: "ABCD", age: 40}];\r
+            $scope.tableParams = new NgTableParams({count: 5, sorting: {id: '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 modelBtn_data = {"title":"Close me", "clickAction":"closeModal()"};\r
+            var modelBtn_html = Mustache.to_html(def_button_tpl, modelBtn_data);\r
+            $('#myModal #footerBtns').append($compile(modelBtn_html)($scope));\r
+        }\r
+\r
+        $scope.closeModal = function() {\r
+            console.log("Closing Modal...");\r
+            $('#myModal').modal('hide');\r
+        }\r
+\r
+\r
+        $scope.checkAll = function() {\r
+            console.log("Checked ..");\r
+            angular.forEach($scope.provinceData, function(data) {\r
+                //data.select = $scope.selectAll;\r
+                $scope.checkboxes.items[user.id]\r
+            });\r
+        };\r
+\r
+        $scope.showAddModal = function() {\r
+            console.log("Showing Modal to Add data");\r
+            $scope.province = {};\r
+            $("#myModal").modal();\r
+        }\r
+        $scope.saveData = function(id) {\r
+            if(id) {\r
+                //edit data\r
+                console.log("Editing data.." + JSON.stringify($scope.province));\r
+                DataService.editProvinceData($scope.province)\r
+                    .then(function (data) {\r
+                            $scope.message = "Success :-)";\r
+                            $state.reload();\r
+                            //$state.go($state.current.name, {}, {reload: true})\r
+                        },\r
+                        function (reason) {\r
+                            //$log.info(reason);\r
+                            $scope.message = reason.status + " " + reason.statusText;\r
+                        });\r
+            }\r
+            else {\r
+                console.log("Adding data.." + JSON.stringify($scope.province));\r
+                DataService.addProvinceData($scope.province)\r
+                    .then(function (data) {\r
+                            $scope.message = "Success :-)";\r
+                            $state.reload();\r
+                            //$state.go($state.current.name, {}, {reload: true})\r
+                        },\r
+                        function (reason) {\r
+                            //$log.info(reason);\r
+                            $scope.message = reason.status + " " + reason.statusText;\r
+                        });\r
+            }\r
+            $('#myModal').modal('hide');\r
+        }\r
+\r
+        $scope.deleteData = function() {\r
+            var deleteArr = [];\r
+            //$log.info($scope.checkboxes);\r
+            angular.forEach($scope.checkboxes.items, function(value , key) {\r
+                //$log.info(data);\r
+                if(value) {\r
+                    deleteArr.push(key);\r
+                }\r
+            });\r
+\r
+            console.log("To be deleted : "+deleteArr);\r
+            //$log.info(deleteArr);\r
+            DataService.deleteProvinceData(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
+\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
+            DataService.deleteProvinceData(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
+\r
+        $scope.editData = function(id) {\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
+                        /*$scope.province.province_name = data.province_name;\r
+                        $scope.province.ip = data.ip;\r
+                        $scope.province.port = data.port;*/\r
+\r
+                        $("#myModal").modal();\r
+                        dataFound = true;\r
+                    }\r
+                }\r
+            });\r
+        }\r
+\r
+    })\r
+\r
+var modelTemplate;\r
+function loadTemplate() {\r
+    $.get('template.html', function(template) {\r
+        modelTemplate = template;\r
+    });\r
+}\r
+\r
+function callThis() {\r
+    alert("Going Great!");\r
+}\r
+\r
+function searchTable() {\r
+    var filter, table, tr, td;\r
+    filter = $("#myInput").val().toUpperCase();\r
+    table = $("#myTable_search");\r
+    tr = $("#myTable_search tr");\r
+\r
+    // Loop through all table rows, and hide those who don't match the search query\r
+    for (var i = 0; i < tr.length; i++) {\r
+        td = tr[i].getElementsByTagName("td")[0];\r
+        if (td) {\r
+            if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {\r
+                tr[i].style.display = "";\r
+            } else {\r
+                tr[i].style.display = "none";\r
+            }\r
+        }\r
+    }\r
+}\r
+\r
+function linkClicked(state) {\r
+    console.log("State to : " + state);\r
+}
\ No newline at end of file