Sample code of Widgets for the browser side

Code with the sample usage of the OPEN-O GUI Framework for widgets Issue-Id : CLIENT-11 Change-Id: Ibd66213ff87eacbd9a1eef81991b7d705aa8675b Signed-off-by: Seshu-Kumar-M <seshu.kumar.m@huawei.com>
author: Seshu-Kumar-M <seshu.kumar.m@huawei.com> 2017-02-01 21:40:04 +0530
committer: Seshu-Kumar-M <seshu.kumar.m@huawei.com> 2017-02-01 21:43:52 +0530
commit: 98bb0a4d66a41f2e6046743b134f6c88f434ef4f (patch)
tree: 8ae12097f15a3b1dc3cd06748f3005f8c2f26dfc /common
parent: f205e8d8493616238ca5372d3ea042bbb0472bd1 (diff)
8 files changed, 3658 insertions, 0 deletions
diff --git a/common/src/main/webapp/usage guide/browser/css/RMain.css b/common/src/main/webapp/usage guide/browser/css/RMain.css
new file mode 100644
index 00000000..cbbb8630
--- /dev/null
+++ b/common/src/main/webapp/usage guide/browser/css/RMain.css
@@ -0,0 +1,239 @@
+/* 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.
+ */
+
+#iemp_layout_container {
+    padding: 0px;
+    margin: 1px auto;
+    width: 100%;
+    height: 100%;
+}
+
+#iemp_layout_container .three-cols-layout {
+    width: 100%;
+    height: 100%;
+    border-collapse: collapse;
+    margin-left: 0px;
+    margin-top: 0px;
+    margin-right: 0px;
+    margin-bottom: 0px;
+}
+
+#iemp_layout_container .three-cols-layout {
+    width: 100%;
+    height: 100%;
+    border-collapse: collapse;
+    margin-left: 0px;
+    margin-top: 0px;
+    margin-right: 0px;
+    margin-bottom: 0px;
+}
+
+#iemp_layout_container .three-cols-column.three-cols-left {
+    width: 215px;
+    background-color: #f5f5f5;
+}
+
+.accordion_parent {
+    position: relative;
+    width: 220px;
+    background-color: #f5f5f5;
+}
+
+.openo-accordion-resizable-handle {
+    z-index: 1 !important;
+    cursor: e-resize;
+    width: 7px;
+    right: -5px;
+    top: 0;
+    height: 100%;
+    position: absolute;
+    font-size: .1px;
+    display: block;
+}
+
+.openoAccordian_accordionmenu {
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    line-height: 17px;
+}
+
+.openoAccordian_accordionmenu li {
+    min-width: 75px;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    color: #000;
+    clear: both;
+}
+
+.openo_accordion_ui-icon-collapse, .openo_accordion_ui-icon-expand {
+    display: block;
+    float: left;
+    margin-bottom: -1px;
+    border-bottom: 1px solid #e5e5e5;
+    cursor: pointer;
+    width: 13px;
+    padding-top: 26px;
+}
+
+.openo_accordion_ui-icon-expand {
+    background: url(../images/collapse_arrow.png) right 20px no-repeat;
+    margin-top: 8px;
+}
+
+.openo_accordion_ui-icon-expand.current {
+    background: url(../images/expand_arrow.png) right 20px no-repeat;
+}
+
+.openoAccordian_showHideArrow_hide, .openoAccordian_showHideArrow_show {
+    display: block;
+    position: absolute;
+    right: 0;
+    top: 4px;
+    width: 18px;
+    height: 41px;
+    cursor: pointer;
+    background-color: #f5f5f5;
+}
+
+.openoAccordian_showHideArrow_hide {
+    background-image: url(../images/openo.png);
+    background-position: -7px 0 !important;
+    border-collapse: separate;
+    /*box-shadow: inset -1px 0 0 #e5e5e5;*/
+}
+
+a.header.opened, a.header.closed {
+    font-size: 16px;
+    padding-top: 24px;
+    padding-bottom: 25px;
+    color: #999999;
+}
+
+.openoAccordian_accordionmenu .closed, .openoAccordian_accordionmenu .opened {
+    padding-right: 10px;
+    background-position: 98% 50%;
+    background-repeat: no-repeat;
+}
+
+.openoAccordian_accordionmenu li a {
+    padding: 11px 10px 12px;
+    color: #333333;
+    margin-right: 1px;
+    margin-top: -1px;
+    text-align: left !important;
+    font-family: "Microsoft Yahei", SimSun, Arial, Tahoma;
+    font-size: 14px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    border-top: 1px solid #e5e5e5;
+    border-bottom: 1px solid #e5e5e5;
+    /*height: 19px;*/
+}
+
+.openoAccordian_accordionmenu ul {
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+}
+
+.openoAccordian_accordionmenu a {
+    display: block;
+    text-decoration: none;
+}
+
+a {
+    color: #428bca;
+    text-decoration: none;
+    background: 0 0;
+}
+
+.bar {
+    height: 834px;
+    width: 18px;
+    background: #f8f8f8;
+    display: none;
+}
+
+.bar span {
+    width: 13px;
+    height: 34px;
+    background-image: url(../images/openo.png);
+    background-position: -39px 0 !important;
+    display: block;
+    /*margin-top: -430px;*/
+}
+
+#accordionmenuid_ul_0_0_brAppTopMenuID_UL li {
+    cursor: pointer;
+}
+
+#puer_base_openo {
+    border: 1px solid #ddd;
+}
+
+.openo_accordion_selected {
+    margin-left: 0;
+    margin-right: 0;
+    background: #fafafa;
+    border-left: 3px solid #4ac9ff !important;
+    box-shadow: none;
+    position: relative;
+}
+
+a:hover {
+    color: #4ac9ff !important;
+}
+
+.openoAccordian_accordionmenu li.openo_accordion_selected a {
+    position: relative;
+    left: -3px;
+    color: #009ae7;
+}
+
+.openo-accordion-resizable-handle {
+    z-index: 1 !important;
+    cursor: e-resize;
+    width: 7px;
+    right: -5px;
+    top: 0;
+    height: 100%;
+    position: absolute;
+    font-size: .1px;
+    display: block;
+}
+
+#iframeContainer iframe {
+    width: 100%;
+    height: 100%;
+    border: 0;
+}
+
+#accordionContent, #iframeContainer {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.openoAccordian_showHideArrow_show {
+    background-image: url(../images/openo.png);
+    background-position: -39px 0 !important;
+    box-shadow: inset 1px 0 0 #e5e5e5, inset -1px 0 0 #e5e5e5;
+}
+\ No newline at end of file
diff --git a/common/src/main/webapp/usage guide/browser/css/VMMain.css b/common/src/main/webapp/usage guide/browser/css/VMMain.css
new file mode 100644
index 00000000..b779437c
--- /dev/null
+++ b/common/src/main/webapp/usage guide/browser/css/VMMain.css
@@ -0,0 +1,758 @@
+/* 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.
+ */
+
+body {
+    font-family: '微软雅黑';
+    font-size: 12px;
+    color: #333;
+    background: #fafafa;
+}
+
+button {
+    outline: none;
+}
+
+ul, li {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.titleFont {
+    font-size: 16px;
+}
+
+.separator-line {
+    height: 1px;
+    width: 100%;
+    border: 1px solid #ddd;
+    margin: 6px 0 15px 0;
+}
+
+.uploadBtn {
+    overflow: hidden;
+}
+
+.creat-btn {
+    padding: 0 14px;
+    height: 24px;
+    float: left;
+    cursor: pointer;
+    text-decoration: none;
+    outline: 0;
+    border: 1px solid #d3d3d3;
+    text-align: center;
+    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
+    background: #fafafa;
+    background: -moz-linear-gradient(top, #fff, #fafafa);
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(100%, #fafafa));
+    background: -webkit-linear-gradient(top, #fff, #fafafa);
+    background: linear-gradient(to bottom, #fff, #fafafa);
+    border-radius: 6px;
+    background: #fff url(../images/add.png) no-repeat 5px center;
+    padding-left: 20px;
+}
+
+.creat-btn:hover {
+    color: #009ae7;
+    border: 1px solid #4AC9FF
+}
+
+.creat-btn:active {
+    color: #000;
+    border: 1px solid #4AC9FF
+}
+
+/*.creat-btn{
+    background: #fff url(../image/add.png) no-repeat 5px center;
+    border: 1px solid #ddd;
+    float: left;
+}
+.creat-btn:hover{
+    background: #428bca;
+    color: #fff;
+    border:1px solid #428bca;
+}*/
+.search {
+    width: 310px;
+    height: 30px;
+    float: right;
+}
+
+.search-text {
+    width: 250px;
+    float: left;
+    margin-right: 6px;
+}
+
+.search-btn {
+    height: 30px;
+    background: #fff;
+    border: 1px solid #ddd;
+    float: left;
+}
+
+#ict_virtualApplication_table_div {
+    margin-top: 15px;
+}
+
+.table > thead > tr.active > th {
+    border: 1px solid #ddd !important;
+    border-bottom: 0;
+    background: #f0f0f0;
+}
+
+/*.table tbody tr:hover{
+    background: #e6fbe0!important;
+}*/
+.table tbody tr:last-child {
+    border-bottom: 1px solid #ddd;
+}
+
+.table-btn {
+    border: 1px solid #ccc;
+    border-radius: 3px;
+}
+
+.delete-btn {
+    background: url(../image/delete.png) no-repeat;
+    width: 16px;
+    height: 16px;
+    border: none;
+}
+
+.detail-btn {
+    background: url(../image/openo.png) no-repeat -343px -283px;
+    width: 16px;
+    height: 16px;
+    border: none;
+}
+
+.detail-btn.current {
+    background-position: -7px -314px;
+}
+
+.detail {
+    height: 200px;
+    border: 1px solid #ddd;
+    margin-top: 60px;
+}
+
+.detail-top ul {
+    height: 50px;
+    line-height: 50px;
+    border-bottom: 1px solid #ddd;
+    padding-left: 0px;
+    background: #fafafa;
+}
+
+.detail-top ul li {
+    float: left;
+    width: 120px;
+    text-align: center;
+    border-right: 1px solid #ddd;
+    cursor: pointer;
+}
+
+.detail-top ul li.current {
+    background: #fff;
+}
+
+.vmapp-margin {
+    margin-bottom: 10px;
+}
+
+.control-label .required {
+    color: #e02222;
+    font-size: 12px;
+    padding-left: 2px;
+}
+
+.form-group .control-label {
+    font-size: 12px;
+    font-weight: 400;
+}
+
+legend {
+    font-size: 12px;
+    font-weight: bold;
+}
+
+.pageGro {
+    width: 250px;
+    float: right;
+}
+
+.pageUp, .pageDown, .pageList, .pageList li {
+    float: left;
+    cursor: pointer;
+}
+
+.pageUp, .pageDown {
+    width: 60px;
+    height: 30px;
+    border: 1px solid #ddd;
+    text-align: center;
+    line-height: 30px;
+}
+
+.pageList li {
+    width: 30px;
+    height: 30px;
+    border: 1px solid #ddd;
+    text-align: center;
+    line-height: 30px;
+    border-left: none;
+}
+
+.pageList li.active {
+    background: #428bca;
+    color: #fff;
+    border-color: #428bca;
+}
+
+.pageDown {
+    border-left: none;
+}
+
+.headerLinkP {
+    padding-top: 17px;
+}
+
+.headerLinkP span {
+    font-size: 12px;
+    color: #666;
+    font-weight: normal !important;
+}
+
+label {
+    font-weight: normal !important;
+}
+
+table.userform tbody tr td {
+    display: table-cell;
+    padding-right: 10px;
+    padding-top: 10px;
+    font-size: 12px;
+    color: #333;
+}
+
+.table th, .table td {
+    padding-top: 3px !important;
+    padding-bottom: 3px !important;
+}
+
+.openoBrowseButton_element {
+    display: table;
+}
+
+.openo {
+    font-family: "Microsoft Yahei", SimSun, Arial, Tahoma;
+    font-size: 12px;
+    color: #000;
+}
+
+.openoBrowseButton_input {
+    width: 198px;
+    position: relative;
+    border: 1px solid #c3c3c3 !important;
+    height: 26px;
+    background-color: #f3f3f3;
+    border-radius: 4px 0 0 4px;
+    border-right: none;
+    padding: 0;
+}
+
+.buttonClassDefault, .buttonClassDefault:active {
+    cursor: pointer;
+    background-image: url(../images/openo.png);
+    background-position: -154px -7px !important;
+}
+
+.openoBrowseButton_button {
+    width: 27px;
+    border: 0;
+    float: right;
+    position: relative;
+    height: 26px;
+    right: 0;
+    top: 0;
+    border-radius: 0 4px 4px 0;
+    border-right: 1px solid #c3c3c3;
+    border-left: none;
+}
+
+.openo .openo-input, .openo.openo-input {
+    outline: 0;
+    border: 1px solid #c3c3c3;
+    box-shadow: 1px 1px #f6f6f6 inset;
+    background-color: #fff;
+    height: 26px;
+}
+
+.openoInput_openoDefaultText {
+    padding: 0 0 0 6px;
+    border-radius: 4px;
+    color: #000;
+    display: inline-block;
+    outline: 0;
+    box-shadow: 1px 1px #f6f6f6 inset;
+    font-size: 12px;
+    background: #fff;
+}
+
+div.openo-select {
+    border: 1px solid #c3c3c3;
+    border-radius: 4px;
+    background: url(../images/arrow-down-enable.png) right no-repeat #fff;
+    line-height: 24px;
+    padding-left: 3px;
+    display: block;
+}
+
+div.openo-select > input.openo-select-input {
+    border: none;
+    outline: 0;
+    line-height: 21px;
+    height: 21px;
+    padding-left: 3px;
+    border-right: solid 1px #c3c3c3;
+}
+
+.openo .openo-ellipsis, .openo.openo-ellipsis {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+a.openoButton_buttonClass, a.openoButton_buttonDisableClass, div.openoButton_buttonClass, div.openoButton_buttonDisableClass {
+    height: 26px;
+    float: left;
+    cursor: pointer;
+    text-decoration: none;
+    outline: 0;
+    border: 1px solid #d3d3d3;
+    text-align: center;
+    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
+    background: #fafafa;
+    background: -moz-linear-gradient(top, #fff, #fafafa);
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(100%, #fafafa));
+    background: -webkit-linear-gradient(top, #fff, #fafafa);
+    background: linear-gradient(to bottom, #fff, #fafafa);
+    border-radius: 6px;
+}
+
+.openoButton_buttonInnerClass {
+    padding: 0 19px;
+    border-radius: 6px;
+}
+
+.openoButton_buttonCenterText {
+    color: #000;
+    line-height: 24px;
+    white-space: nowrap;
+    width: auto !important;
+}
+
+.userHeader {
+    clear: left;
+    overflow: hidden;
+    margin-bottom: 10px;
+    padding: 10px 10px 0px 0px;
+}
+
+.openoButton_buttonGroupClass {
+    display: inline;
+}
+
+.openoButton_buttonGroupClass div.openoButton_buttonClass_parent:first-child {
+    margin-left: 0;
+}
+
+.openoButton_buttonLeftImg {
+    margin-right: 5px;
+}
+
+.openoButton_buttonLeftImg, .openoButton_buttonRightImg {
+    display: inline-block;
+    vertical-align: top;
+    width: 16px;
+    height: 16px;
+    margin-top: 4px;
+}
+
+.openo-table-pagination-wrapper {
+    height: 37px;
+}
+
+.openo-pagination {
+    display: block;
+    float: left;
+    overflow: hidden;
+    padding: 5px 0 0;
+    margin-top: 8px;
+}
+
+.openoPagination_openoPaginationLengthOptions:not(msie8) {
+    line-height: 24px;
+}
+
+.openoPagination_openoPaginationLengthOptions {
+    white-space: normal;
+    height: 24px;
+    float: left;
+    outline: 0;
+    line-height: 20px;
+    margin: 0 5px;
+}
+
+.openo-pagination-select {
+    height: 26px;
+    line-height: 22px;
+    text-align: center;
+    margin-right: -2px;
+    border: 1px solid #e0e0e0;
+    border-radius: 5px 0 0 5px;
+    padding: 1px;
+}
+
+.openoPagination_openoPaginationLengthOptions span {
+    background-color: #fff !important;
+}
+
+.openo-pagination-theme a, .openo-pagination-theme span {
+    float: left;
+    color: #666;
+    font: 12px Lucida Grande, Verdana, Arial, Helvetica, sans-serif;
+    line-height: 24px;
+    font-weight: 400;
+    text-align: center;
+    border: 1px solid #e0e0e0;
+    text-decoration: none !important;
+    padding: 0 7px;
+    border-radius: 3px;
+    background: #fff;
+}
+
+.openo-pagination-selectspan {
+    background: url(../images/ideo_default_select.png) left no-repeat !important;
+    float: right !important;
+    width: 26px;
+    height: 26px;
+    cursor: pointer;
+}
+
+.openo-pagination-theme label {
+    padding-top: 6px;
+    vertical-align: middle;
+    margin-right: 20px;
+    margin-top: -1px;
+    float: left;
+    display: inline-block;
+    height: 20px;
+    font: 12px Lucida Grande, Verdana, Arial, Helvetica, sans-serif;
+}
+
+.openo-pagination li, .openo-pagination ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    float: left;
+}
+
+dd, dl, dt, li {
+    color: #000;
+}
+
+.openo-pagination-theme a, .openo-pagination-theme span.current {
+    margin: 0 5px 0 0;
+}
+
+.openo .openo-disabled, .openo.openo-disabled {
+    border-color: #c3c3c3 !important;
+    color: #666 !important;
+    opacity: .3;
+    filter: alpha(opacity=30);
+}
+
+.openo-pagination-theme .prev {
+    background: 0 0;
+    float: left;
+}
+
+.openo-pagination-theme .current {
+    text-decoration: none !important;
+    float: left;
+    padding-left: 6px;
+    height: 24px;
+    color: #fff;
+    display: inline;
+    border-color: #00adf5;
+    background: #4ad2ff;
+}
+
+.openo-pagination-theme a, .openo-pagination-theme span {
+    float: left;
+    color: #666;
+    font: 12px Lucida Grande, Verdana, Arial, Helvetica, sans-serif;
+    line-height: 24px;
+    font-weight: 400;
+    text-align: center;
+    border: 1px solid #e0e0e0;
+    text-decoration: none !important;
+    padding: 0 7px;
+    border-radius: 3px;
+    background: #fff;
+}
+
+.openo-pagination-theme .prev.openo-disabled:before {
+    background: url(../images/page_left_disabled.png) 50% 45% no-repeat;
+}
+
+.openo-pagination-theme .prev.openo-disabled:before {
+    background: url(../images/page_left_disabled.png) 50% 45% no-repeat;
+}
+
+.openo-pagination-theme .prev:before {
+    background: url(../images/page_l.png) 50% 45% no-repeat;
+}
+
+.openo-pagination-theme .next:after, .openo-pagination-theme .prev:before {
+    display: inline-block;
+    content: "";
+    vertical-align: middle;
+    width: 10px;
+    height: 24px;
+}
+
+.openo-pagination-theme .prev:before {
+    background: url(../images/page_l.png) 50% 45% no-repeat;
+}
+
+.openo-pagination-theme .next:after, .openo-pagination-theme .prev:before {
+    display: inline-block;
+    content: "";
+    vertical-align: middle;
+    width: 10px;
+    height: 24px;
+}
+
+pagination ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    float: left;
+}
+
+.openo-pagination li, .openo-pagination ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    float: left;
+}
+
+.openoPagination_gototext {
+    background: #FFF;
+    outline: 0;
+    width: 29px;
+    float: left;
+    height: 26px;
+    line-height: 24px;
+    border-radius: 4px;
+    border: 1px solid #c3c3c3;
+    padding: 0 0 0 5px;
+    margin: 0;
+    color: #666;
+    min-width: 50px;
+}
+
+.openoPagination_gotoimage {
+    width: 29px;
+    height: 26px;
+    line-height: 26px;
+    background-color: #FFF;
+    background-image: url(/portal/themes/default/components/openo/images/openo.png);
+    padding-left: 21px;
+    float: left;
+    margin-left: 5px;
+    border: 1px solid #e0e0e0;
+    border-radius: 4px;
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    background-position: -184px -181px !important;
+}
+
+.openo-pagination-theme .ellipse {
+    float: left;
+    margin-left: -8px;
+    margin-right: -4px;
+    background: 0 0;
+    border: none;
+    border-radius: 0;
+    box-shadow: none;
+    font-weight: 700;
+    cursor: default;
+}
+
+.openo.openo-disabled {
+    border-color: #c3c3c3 !important;
+    color: #666 !important;
+    opacity: .3;
+    filter: alpha(opacity=30);
+}
+
+.openo-pagination-theme .prev {
+    background: 0 0;
+    float: left;
+}
+
+.openo-pagination-theme .current {
+    text-decoration: none !important;
+    float: left;
+    padding-left: 6px;
+    height: 26px;
+    color: #fff;
+    display: inline;
+    /*border-color: #00adf5;
+    background: #4ad2ff;*/
+    border: 1px solid #e0e0e0;
+}
+
+.openo-pagination-theme .next:after {
+    background: url(../images/page_r.png) 50% 45% no-repeat;
+}
+
+.openoButton_buttonGroupClass div.openoButton_buttonClass_parent, .openoButton_buttonRightImg {
+    margin-left: 5px;
+}
+
+html, body {
+    height: 99%;
+    width: 98%;
+}
+
+.cotentBody {
+    padding: 0px 20px 0px 20px;
+}
+
+div.openoButton_buttonClass:hover {
+    border: 1px solid #4ac9ff;
+}
+
+div.openoButton_button_default:hover .openoButton_buttonCenterText {
+    color: #009ae7;
+}
+
+.header_lineimg {
+    height: 1px;
+    width: 100%;
+    margin-top: 17px;
+}
+
+.openo.openo-hide {
+    display: none;
+}
+
+div.openo-select-popup-container {
+    position: absolute;
+    border: 1px solid #4ac9ff;
+    border-top: none;
+    border-radius: 0 0 4px 4px;
+    max-height: 202px;
+    overflow-y: auto;
+    background-color: #fff;
+    z-index: 880;
+}
+
+div.openo-select-popup-container > div.openo-select-item {
+    display: block;
+}
+
+.openo .openo-ellipsis, .openo.openo-ellipsis {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+div.openo-select-popup-container > div.openo-select-item > label {
+    padding-top: 3px;
+    padding-bottom: 3px;
+    line-height: 20px;
+}
+
+.openo .openo-ellipsis, .openo.openo-ellipsis {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.openo-select-item label {
+    margin-left: 4px;
+    margin-right: 4px;
+    white-space: nowrap;
+}
+
+div.openo-select-popup-container > div.openo-select-item.openo-item-selected, div.openo-select-popup-container > div.openo-select-item:hover {
+    background-color: #f1f1f1;
+    color: #008fd6;
+}
+
+div.openo-select.openo-focus {
+    border: 1px solid #4ac9ff;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    border-bottom-color: #ddd;
+}
+
+.openo-pagination-theme a:hover {
+    border-color: #4ac9ff;
+    cursor: pointer;
+}
+
+.SDBtn {
+    background: #fff;
+    color: #333;
+    border: 1px solid #ddd;
+}
+
+.SDBtn:hover {
+    color: #009ae7;
+    border: 1px solid #4AC9FF
+}
+
+table tbody tr.even:hover td, table tbody tr.odd:hover td {
+    background-color: #e6fbe0;
+}
+
+table tr.openoTable_row_selected td {
+    background: #e8f8fe !important;
+    border-bottom: 1px solid #e8e8e8 !important;
+}
+
+.modal-body {
+    padding: 0 !important;
+}
+
+.form-control {
+    height: 26px !important;
+}
+
+.form-group .control-label {
+    margin-left: 20px;
+}
+
+.form-horizontal .control-label {
+    text-align: left;
+}
+\ No newline at end of file
diff --git a/common/src/main/webapp/usage guide/browser/css/open-ostyle.css b/common/src/main/webapp/usage guide/browser/css/open-ostyle.css
new file mode 100644
index 00000000..64d9e477
--- /dev/null
+++ b/common/src/main/webapp/usage guide/browser/css/open-ostyle.css
@@ -0,0 +1,952 @@
+/*
+
+    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.
+
+*/
+
+body {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+    font-family: "Microsoft Yahei",Arial,Tahoma,Verdana,SimSun;
+    font-size: 12px;
+}
+
+.container{
+    background: #fafafa;
+}
+
+.accordion_parent {
+    position: relative;
+    width: 220px;
+    background-color: #f5f5f5;
+}
+
+.openo-accordion-resizable-handle {
+    z-index: 1 !important;
+    cursor: e-resize;
+    width: 7px;
+    right: -5px;
+    top: 0;
+    height: 100%;
+    position: absolute;
+    font-size: .1px;
+    display: block;
+}
+
+.openoAccordian_accordionmenu {
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    line-height: 17px;
+}
+
+.openoAccordian_accordionmenu li {
+    min-width: 75px;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    color: #000;
+    clear: both;
+}
+
+.openo_accordion_ui-icon-collapse, .openo_accordion_ui-icon-expand {
+    display: block;
+    float: left;
+    margin-bottom: -1px;
+    border-bottom: 1px solid #e5e5e5;
+    cursor: pointer;
+    width: 13px;
+    padding-top: 26px;
+}
+
+.openo_accordion_ui-icon-expand {
+    background: url(../thirdparty/images/collapse_arrow.png) right 20px no-repeat;
+    margin-top: 8px;
+}
+
+.openo_accordion_ui-icon-expand.current {
+    background: url(../thirdparty/images/expand_arrow.png) right 20px no-repeat;
+}
+
+.openoAccordian_showHideArrow_hide, .openoAccordian_showHideArrow_show {
+    display: block;
+    position: absolute;
+    right: 0;
+    top: 4px;
+    width: 18px;
+    height: 41px;
+    cursor: pointer;
+    background-color: #f5f5f5;
+}
+
+.openoAccordian_showHideArrow_hide {
+    background-image: url(../images/openo.png);
+    background-position: -7px 0 !important;
+    border-collapse: separate;
+    /*box-shadow: inset -1px 0 0 #e5e5e5;*/
+}
+
+a.header.opened, a.header.closed {
+    font-size: 16px;
+    padding-top: 24px;
+    padding-bottom: 25px;
+    color: #999999;
+}
+
+.openoAccordian_accordionmenu .closed, .openoAccordian_accordionmenu .opened {
+    padding-right: 10px;
+    background-position: 98% 50%;
+    background-repeat: no-repeat;
+}
+
+
+.openoAccordian_accordionmenu li a {
+    padding: 11px 10px 12px;
+    color: #333333;
+    margin-top: -1px;
+    text-align: left !important;
+    font-family: "Microsoft Yahei",Arial,Tahoma,Verdana,SimSun;
+    font-size: 14px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    border-top: 1px solid #e5e5e5;
+    border-bottom: 1px solid #e5e5e5;
+    /*height: 19px;*/
+}
+
+.openoAccordian_accordionmenu ul {
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+}
+
+.openoAccordian_accordionmenu a {
+    display: block;
+    text-decoration: none;
+}
+
+a {
+    color: #428bca;
+    text-decoration: none;
+    background: 0 0;
+}
+
+.bar {
+    height: 834px;
+    width: 18px;
+    background: #f8f8f8;
+    display: none;
+}
+
+.bar span {
+    width: 13px;
+    height: 34px;
+    background-image: url(../images/openo.png);
+    background-position: -39px 0 !important;
+    display: block;
+    /*margin-top: -430px;*/
+}
+
+li {
+    cursor: pointer;
+}
+
+#puer_base_openo {
+    border: 1px solid #ddd;
+}
+
+.openo_accordion_selected {
+    margin-left: 0;
+    margin-right: 0;
+    background: #fafafa;
+    border-left: 3px solid #4ac9ff !important;
+    box-shadow: none;
+    position: relative;
+}
+
+a:hover {
+    color: #4ac9ff;
+}
+
+.openoAccordian_accordionmenu li.openo_accordion_selected a {
+    position: relative;
+    left: -3px;
+    color: #009ae7;
+}
+
+.openo-accordion-resizable-handle {
+    z-index: 1 !important;
+    cursor: e-resize;
+    width: 7px;
+    right: -5px;
+    top: 0;
+    height: 100%;
+    position: absolute;
+    font-size: .1px;
+    display: block;
+}
+
+#iframeContainer iframe {
+    width: 100%;
+    height: 100%;
+    border: 0;
+}
+
+#accordionContent, #iframeContainer {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.openoAccordian_showHideArrow_show {
+    background-image: url(../images/openo.png);
+    background-position: -39px 0 !important;
+    box-shadow: inset 1px 0 0 #e5e5e5, inset -1px 0 0 #e5e5e5;
+}
+
+.homecontent {
+    text-align: center;
+    letter-spacing: 1.4px;
+}
+
+.homecontent h3, .homecontent h4, .homecontent h5{
+    font-size: 24px;
+    color: #333;
+    text-transform: capitalize;
+    border-top: 2px solid #f1f1f1;
+    border-bottom: 2px solid #f1f1f1;
+    padding: 13px 5px;
+    display: inline-block;
+    letter-spacing: 5px;
+    -webkit-animation: textScroll 500ms linear;
+    animation: textScroll 500ms linear;
+}
+.homecontent h4 {
+    font-size: 28px;
+    font-weight: bold;
+}
+.homecontent h5 {
+    font-size: 16px;
+    text-align: left;
+    border: none;
+}
+@-webkit-keyframes textScroll {
+     from {opacity: 0;}
+     to {opacity: 1;}
+ }
+
+@keyframes textScroll {
+    from {opacity: 0;}
+    to {opacity: 1;}
+}
+
+/*.modal-body span {
+    font-size: 18px;
+    color: #00f;
+}*/
+
+#msgModal .modal-body .container {
+    width: 100%;
+}
+#msgModal .modal-body .icon {
+    /*color: red;*/
+    font-size: 37px;
+}
+#msgModal .modal-body .icon_error {
+    color: red;
+}
+#msgModal .modal-body .icon_info {
+    color: green;
+}
+#msgModal .modal-body .icon_warning{
+    color: orange;
+}
+#msgModal .modal-body .icon_confirm {
+    color: blue;
+}
+#msgModal .modal-body .msg {
+    color: #333;
+    padding-left: 30px;
+}
+/*#msgModal .modal-body .container .row {
+}*/
+#msgModal .modal-body .row {
+    height: 100%;
+    white-space: nowrap;
+}
+#msgModal .modal-body .row:before{
+    content: "";
+    display: inline-block;
+    vertical-align: middle;
+    width: 0;
+    /* adjust for white space between pseudo element and next sibling */
+    margin-right: -.25em;
+    /* stretch line height */
+    height: 100%;
+}
+
+#msgModal .modal-body .row .msg {
+    /*display: inline-block;
+    vertical-align: middle;
+    white-space: normal;*/
+    /* vertical-align: middle; */
+    position: absolute;
+    top: 50%;
+    -webkit-transform: translateY(-50%);
+    -ms-transform: translateY(-50%);
+    transform: translateY(-50%);
+    padding-left: 70px;
+    white-space: normal;
+    color:blue;
+}
+
+/* Functional */
+
+#funModal .modal-content .modal-header{
+    padding-bottom: 4px;
+    border-radius: 5px 5px 0 0;
+}
+
+
+/* Buttons */
+.btnDefault {
+    border-radius: 6px;
+    /*height: 24px;*/
+    font-size: 12px;
+    font-family: "Microsoft Yahei",Arial,Tahoma,Verdana,SimSun;
+    line-height: 24px;
+    color: #000;
+    border: 1px solid #d3d3d3;
+    text-align: center;
+    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
+    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
+    background: linear-gradient(to bottom, #fff, #fafafa);
+    padding: 0 19px;
+}
+.btnDefault:hover {
+    border-color: #4ac9ff;
+    color: #009ae7;
+}
+#iconBtn {
+    padding: 0 15px;
+}
+#iconBtn span {
+    font-size: 12px;
+    margin-top: 4px;
+    width: 16px;
+    height: 16px;
+}
+#iconBtn span.pull-left {
+    margin-right: 5px;
+}
+#iconBtn span.pull-right {
+    margin-left: 5px;
+}
+
+#buttonArea {
+    text-align: left;
+}
+#buttonArea div {
+    margin: 10px 0 20px;
+}
+
+#buttonArea div .btn-block{
+    margin: 10px 0;
+}
+
+/* Dropdown*/
+
+#dropdown {
+    text-align: left;
+}
+
+#dropdown div {
+    margin: 10px 0 20px;
+}
+
+#dropdown .dropup .dropdown-menu {
+    top: auto;
+    bottom: 34% !important;
+    margin-bottom: 1px;
+}
+#dropdown .dropdown-menu {
+    top: auto;
+    left: auto;
+    margin-bottom: 1px;
+}
+
+#plainDropDown > .dropdownplain {
+    position: relative;
+    clear: both;
+    float: left;
+    width: 100%;
+}
+#plainDropDown > .dropdownplain > ul > li {
+    border: 1px solid #c3c3c3;
+    border-radius: 4px;
+    min-width: 200px;
+}
+#plainDropDown ul li a {
+    padding: 5px 10px;
+    color: #333;
+}
+#plainDropDown > .dropdownplain > ul > li > a > span {
+    top: 4px;
+}
+#plainDropDown ul li a:hover {
+    color: #333;
+}
+#plainDropDown .dropdown-menu {
+    width: 100%;
+}
+
+
+
+/* Credit to bootsnipp.com for the css for the color graph */
+.colorgraph {
+    height: 5px;
+    border-top: 0;
+    background: #c4e17f;
+    border-radius: 5px;
+    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);
+    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);
+    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);
+    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);
+}
+
+/* Radio  and CheckBoxes------------*/
+
+
+.funkyradio div {
+    clear: both;
+    overflow: hidden;
+}
+
+.funkyradio label {
+    width: 100%;
+    border-radius: 3px;
+    border: 1px solid #D1D3D4;
+    font-weight: normal;
+}
+
+.funkyradio input[type="radio"]:empty,
+.funkyradio input[type="checkbox"]:empty {
+    display: none;
+}
+
+.funkyradio input[type="radio"]:empty ~ label,
+.funkyradio input[type="checkbox"]:empty ~ label {
+    position: relative;
+    line-height: 2.5em;
+    text-indent: 3.25em;
+    margin-top: 2em;
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.funkyradio input[type="radio"]:empty ~ label:before,
+.funkyradio input[type="checkbox"]:empty ~ label:before {
+    position: absolute;
+    display: block;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    content: '';
+    width: 2.5em;
+    background: #D1D3D4;
+    border-radius: 3px 0 0 3px;
+}
+
+.funkyradio input[type="radio"]:hover:not(:checked) ~ label,
+.funkyradio input[type="checkbox"]:hover:not(:checked) ~ label {
+    color: #888;
+}
+
+.funkyradio input[type="radio"]:hover:not(:checked) ~ label:before,
+.funkyradio input[type="checkbox"]:hover:not(:checked) ~ label:before {
+    content: '\2714';
+    text-indent: .9em;
+    color: #C2C2C2;
+}
+
+.funkyradio input[type="radio"]:checked ~ label,
+.funkyradio input[type="checkbox"]:checked ~ label {
+    color: #777;
+}
+
+.funkyradio input[type="radio"]:checked ~ label:before,
+.funkyradio input[type="checkbox"]:checked ~ label:before {
+    content: '\2714';
+    text-indent: .9em;
+    color: #333;
+    background-color: #ccc;
+}
+
+.funkyradio input[type="radio"]:focus ~ label:before,
+.funkyradio input[type="checkbox"]:focus ~ label:before {
+    box-shadow: 0 0 0 3px #999;
+}
+
+.funkyradio-default input[type="radio"]:checked ~ label:before,
+.funkyradio-default input[type="checkbox"]:checked ~ label:before {
+    color: #333;
+    background-color: #ccc;
+}
+
+.funkyradio-primary input[type="radio"]:checked ~ label:before,
+.funkyradio-primary input[type="checkbox"]:checked ~ label:before {
+    color: #fff;
+    background-color: #337ab7;
+}
+
+.funkyradio-success input[type="radio"]:checked ~ label:before,
+.funkyradio-success input[type="checkbox"]:checked ~ label:before {
+    color: #fff;
+    background-color: #5cb85c;
+}
+
+.funkyradio-danger input[type="radio"]:checked ~ label:before,
+.funkyradio-danger input[type="checkbox"]:checked ~ label:before {
+    color: #fff;
+    background-color: #d9534f;
+}
+
+.funkyradio-warning input[type="radio"]:checked ~ label:before,
+.funkyradio-warning input[type="checkbox"]:checked ~ label:before {
+    color: #fff;
+    background-color: #f0ad4e;
+}
+
+.funkyradio-info input[type="radio"]:checked ~ label:before,
+.funkyradio-info input[type="checkbox"]:checked ~ label:before {
+    color: #fff;
+    background-color: #5bc0de;
+}
+
+.btn-primary {
+  color: #fff;
+  background-color: #428bca;
+  border-color: #357ebd;
+  min-width:70px
+}
+
+.btn.outline {
+    background: none;
+    
+}
+.btn-primary.outline {
+    border: 2px solid #0099cc;
+    color: #0099cc;
+}
+.modal-header {
+	/*background-color: #cccccc;*/
+    background: linear-gradient(to bottom, #fbfbfb 0, #f6f6f6 70%, #f0f0f0 100%);
+}
+
+/* Tree */
+
+#tree1 ul li {
+    list-style: none;
+    text-align: left;
+    margin-top: 7px;
+}
+
+/* Accordian Area */
+#accordionArea .panel-group .panel-title a:before {
+    font-family: "Glyphicons Halflings";
+    content:"\e259";/*\e094*/
+    /*position: absolute;
+    right: 20px;*/
+    font-size: 20px;
+    margin-right: 20px;
+    text-decoration: none !important;
+}
+#accordionArea .panel-group .panel-title a.collapsed:before {
+    content:"\e258";/*\e092*/
+}
+
+#accordionArea h3 {
+    width: 100%;
+    text-align: left;
+    background-color: #eaeaea;
+    border: none;
+    padding: 8px;
+    font-size: 20px;
+}
+#accordionArea h3 a {
+    text-decoration: none;
+}
+#accordionArea .panel-group .panel {
+    border: none;
+    box-shadow: none;
+    -webkit-box-shadow: none;
+}
+ div.panel-body {
+    text-align: justify;
+}
+
+/* Tab */
+#tabArea .tab-content div p {
+    text-align: justify;
+}
+
+/*Table*/
+#tableArea h3 {
+    text-align: left;
+    border: none;
+    padding-top: 5px;
+}
+
+#tableArea h3 span {
+    font-size: 12px;
+}
+
+/* Vertical Tab */
+.nav-stacked {
+    margin-top: 20px;
+    text-align: left;
+    border:none;
+}
+
+.nav-tabs>li.active>a {
+    border-top: 3px solid #4ac9ff;
+}
+.nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
+    border-top: 3px solid #4ac9ff;
+}
+.nav-tabs>li>a:hover {
+    border-color: transparent;
+    background-color: transparent;
+}
+.nav-stacked>li.active>a {
+    background-color: #ccc;
+    border: none;
+    border-radius: 4px;
+}
+
+#vtabArea .tab-content .tab-pane {
+    text-align: left;
+}
+#vtabArea .tab-content .tab-pane p {
+    text-align: justify;
+}
+
+.link_active {
+    /*background-color: lightslategrey;*/
+    font-style: italic;
+    color: #4ac9ff !important;
+    background:#fafafa;
+    border-left: 3px solid #4ac9ff;
+
+
+}
+
+/*input.ng-invalid {
+    background-color:yellow;
+}*/
+
+/* Functional & Notification*/
+
+#myModal .modal-header, #msgModal .modal-header, #funModal .modal-header {
+    padding: 9px 15px;
+    border-radius: 5px 5px 0 0;
+    color: #666;
+}
+
+#msgModal .modal-content {
+    width: 70%;
+    position: absolute;
+    left: 15%;
+    box-shadow: 0 6px 10px rgba(0,0,0,.3);
+    -webkit-box-shadow: 0 6px 10px rgba(0,0,0,.3);
+}
+#msgModal .modal-footer, #funModal .modal-footer {
+    border: none;
+    margin: 0 auto;
+    width: 100%;
+    text-align: center;
+}
+
+
+#myInput {
+    background-image: url('../thirdparty/images/searchicon.png'); /* Add a search icon to input */
+    background-position: 10px 9px; /* Position the search icon */
+    background-repeat: no-repeat; /* Do not repeat the icon image */
+    width: 100%; /* Full-width */
+    font-size: 16px; /* Increase font-size */
+    padding: 5px 20px 5px 40px; /* Add some padding */
+    border: 1px solid #ddd; /* Add a grey border */
+    margin-bottom: 12px; /* Add some space below the input */
+}
+
+#myTable_search {
+    border-collapse: collapse; /* Collapse borders */
+    width: 100%; /* Full-width */
+    border: 1px solid #ddd; /* Add a grey border */
+    font-size: 18px; /* Increase font-size */
+}
+
+#myTable_search th, #myTable td {
+    text-align: left; /* Left-align text */
+    padding: 12px; /* Add padding */
+}
+
+#myTable_search tr {
+    /* Add a bottom border to all table rows */
+    border-bottom: 1px solid #ddd;
+}
+
+#myTable_search tr.header, #myTable tr:hover {
+    /* Add a grey background color to the table header and on hover */
+    background-color: #f1f1f1;
+}
+
+/* List */
+#listArea {
+    margin-top: 25px;
+}
+#listArea .list {
+    /*border: 1px solid #333;*/
+    padding: 5px;
+}
+#listArea .list div {
+    margin: 5px 0;
+}
+
+#menu_accordion {
+    margin-top: 20px;
+}
+
+#menu_accordion li a{
+    padding-left: 42px;
+}
+#menu_accordion li a:hover {
+    color: #4ac9ff;
+}
+
+#rightContainer {
+    margin-top:20px;
+}
+
+#panel1 li:first-child{
+    margin-top:1px;
+}
+
+#menu_accordion #container, #menu_accordion #widgets, #menu_accordion #notifications, #menu_accordion #functional{
+    margin-bottom : 0px;
+    text-align : left;
+    background-color: #F5F5F5;
+}
+
+#menu_accordion h5{
+    margin-bottom : 0px;
+    text-align : left;
+    padding-left : 10px;
+    cursor: pointer;
+    letter-spacing: 3px;
+    width:100%;
+}
+
+.tableAlign{
+    text-align:left;
+}
+
+.chkboxAlign{
+    text-align:center;
+}
+
+#provinceAction {
+    text-align: left;
+}
+#provinceTable th {
+    background-color: #e3e3e3;
+}
+
+#provinceTable.table-striped>tbody>tr:nth-child(even)>td {
+    background-color:#fafafa;
+}
+
+#provinceTable.table-striped>tbody>tr:nth-child(odd)>td {
+    background-color:#f7f7f7
+}
+#provinceTable.table-striped>tbody>tr:hover {
+    background-color: red;
+}
+
+.prvdel{
+    margin-left:20px;
+}
+
+.shortnoteHeader{
+    margin-top:50px;
+    text-align:left;
+    font-weight: bold;
+    font-family: "Microsoft Yahei",Arial,Tahoma,Verdana,SimSun;
+}
+.shortnoteText{
+    margin-top:20px;
+    text-align:left;
+    font-size:12px;
+    font-family: "Microsoft Yahei",Arial,Tahoma,Verdana,SimSun;
+    color:blue;
+
+}
+
+.ztree *{
+    font-family: "Microsoft Yahei",Arial,Tahoma,Verdana,SimSun;
+}
+
+.noChild_link_active {
+    /*background-color: lightslategrey;*/
+    font-style: italic;
+    color: #4ac9ff !important;
+    background:#fafafa;
+}
+
+.rmpadding{
+    padding-left:0px !important;
+    padding-right:0px !important;
+}
+
+#menu_accordion .collapsed span {
+    background: url(../thirdparty/images/expand_arrow.png) 1px 3px no-repeat;
+    display: block;
+    float: left;
+    margin-bottom: -1px;
+    cursor: pointer;
+    width: 100%;
+    padding-left: 20px;
+}
+#menu_accordion span {
+    background: url(../thirdparty/images/collapse_arrow.png) 1px 3px no-repeat;
+    display: block;
+    float: left;
+    margin-bottom: -1px;
+    cursor: pointer;
+    width: 100%;
+    padding-left: 20px;
+}
+
+.magic-radio + label{
+    font-size:14px;
+}
+
+.panelbr{
+    border-left:0px;
+    border-right:0px;
+}
+
+.popover-title {
+    margin: 0;
+    padding: 8px 14px;
+    font-size: 14px;
+    font-weight: normal;
+    line-height: 18px;}
+
+.customPopover{
+    padding:10px 20px;
+}
+
+
+.css-form input.ng-invalid.ng-touched, textarea.ng-invalid.ng-touched {
+    background-color: #FA787E;
+}
+
+.css-form input.ng-valid.ng-touched, textarea.ng-valid.ng-touched {
+    background-color: white;
+}
+
+.errMsg{
+
+    color:red;
+    float: left;
+}
+
+.customtable thead{
+    background: #ECECEC;
+}
+
+.customtable th,.table td{
+    /* padding-top: 3px!important; */
+    padding-bottom: 3px!important;
+}
+
+/*
+.customtable tr,.customtable td, .customtable th{
+    text-align:left;
+
+}
+*/
+
+.ng-table th.sortable .sort-indicator {
+    width:100%;
+    float:right;
+}
+
+.btn-group>.btn.active{
+    z-index: 2;
+    color: #fff;
+    background-color: #428bca;
+    border-color: #428bca;
+    cursor: default;
+}
+
+.customtable tbody tr:hover td{
+    background-color: #e6fbe0 !important;
+}
+
+.shortnote{
+    width:100%;
+    float:left;
+}
+
+.ng-table-pager .pagination{
+    float:right;
+}
+.ng-table-pager .ng-table-counts{
+    float:left !important;
+}
+.btnmrg{
+    margin:0 5px 0 5px;
+}
+
+.labelstyle{
+    text-align:left;
+    font-size:12px;
+    font-family: "Microsoft Yahei",Arial,Tahoma,Verdana,SimSun;
+}
+
+.titlestyle{
+    font-size:14px !important;
+    font-family: "Microsoft Yahei",Arial,Tahoma,Verdana,SimSun;
+}
+.shortnoteHeader {
+    color : blue;
+}
+.shortnoteText {
+    font-size : 12px;
+}
+tr{
+    text-align:center;
+}
diff --git a/common/src/main/webapp/usage guide/browser/index.html b/common/src/main/webapp/usage guide/browser/index.html
new file mode 100644
index 00000000..727dc730
--- /dev/null
+++ b/common/src/main/webapp/usage guide/browser/index.html
@@ -0,0 +1,53 @@
+<!--
+
+    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.
+
+-->
+
+<!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>Usage Guide</title>
+    <link href="thirdparty/css/bootstrap.min.css" rel="stylesheet"/>
+    <!--Pulling Awesome Font -->
+    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/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 rel="stylesheet"; href="https://unpkg.com/ng-table@2.0.2/bundles/ng-table.min.css">
+    <link href="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="https://unpkg.com/ng-table@2.0.2/bundles/ng-table.min.js"></script>
+    <script src="thirdparty/js/jquery_1.12.4.min.js"></script>
+    <script src="https://code.jquery.com/ui/1.12.1/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="thirdparty/js/mustache.js"></script>
+    <script src="thirdparty/js/tree.jquery.js"></script>
+    <script src="thirdparty/js/jquery.ztree.core-3.5.js"></script>
+
+</head>
+
+<body ng-app="POCApp" onload="loadTemplate()">
+
+<ui-view></ui-view>
+</body>
+</html>
+\ No newline at end of file
diff --git a/common/src/main/webapp/usage guide/browser/js/app.js b/common/src/main/webapp/usage guide/browser/js/app.js
new file mode 100644
index 00000000..abf538ca
--- /dev/null
+++ b/common/src/main/webapp/usage guide/browser/js/app.js
@@ -0,0 +1,1383 @@
+/*
+
+    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.
+
+*/
+
+
+var app = angular.module("POCApp", ["ui.router", "ngTable"])
+
+    /*.run(function($rootScope, $location, $state, LoginService) {
+        $rootScope.$on("$stateChangeStart", function(event, toState, toParams, fromState, fromParams){
+            if (toState.authenticate && !LoginService.isAuthenticated()){
+                // User isn’t authenticated
+                $state.transitionTo("login");
+                event.preventDefault();
+            }
+        });
+    })*/
+    .config(function($stateProvider, $urlRouterProvider, $urlMatcherFactoryProvider){
+        //$routeProvider.caseInsensitiveMatch = true;
+        $urlMatcherFactoryProvider.caseInsensitive(true);
+        $urlRouterProvider.otherwise('/login');
+        //$locationProvider.html5Mode(true).hashPrefix('!');
+        $stateProvider
+            .state('login', {
+                url : '/login',
+                templateUrl : 'templates/login.html',
+                controller : 'LoginController',
+                authenticate: false
+            })
+            .state('register', {
+                url : '/register',
+                templateUrl : 'templates/register.html',
+                controller : 'registerController',
+                authenticate: false
+            })
+            .state("home", {
+                url: "/home",
+                templateUrl : "templates/home.html",
+                controller : "homeCtrl",
+                authenticate: true
+            })
+            .state("home.tree", {
+                url: "/tree",
+                templateUrl : "templates/tree.html",
+                controller : "treeCtrl",
+                authenticate: true
+            })
+            .state("home.accordion", {
+                url: "/accordion",
+                templateUrl : "templates/accordion.html",
+                controller : "accordionCtrl",
+                authenticate: true
+            })
+            .state("home.tabs", {
+                url: "/tabs",
+                templateUrl : "templates/tabs.html",
+                controller : "tabsCtrl",
+                authenticate: true
+            })
+            .state("home.vtabs", {
+                url: "/vtabs",
+                templateUrl : "templates/verticalTab.html",
+                controller : "vTabCtrl",
+                authenticate: true
+            })
+            .state("home.table", {
+                url: "/table",
+                templateUrl : "templates/table.html",
+                controller : "tableCtrl",
+                authenticate: true
+            })
+            .state("home.buttons", {
+                url: "/buttons",
+                templateUrl : "templates/buttons.html",
+                controller : "buttonsCtrl",
+                authenticate: true
+            })
+            /*state for radio button and checkboxes-------------------------------------------------*/
+            .state("home.radiobuttons", {
+                url: "/radiobuttons",
+                templateUrl : "templates/radioButtons.html",
+                controller : "radioCtrl",
+                authenticate: true
+            })
+            .state("home.checkboxes", {
+                url: "/checkboxes",
+                templateUrl : "templates/checkBoxes.html",
+                controller : "checkBoxCtrl",
+                authenticate: true
+            })
+            .state("home.dropdown", {
+                url: "/dropdown",
+                templateUrl: "templates/dropdown.html",
+                controller: "dropdownCtrl",
+                authenticate: true
+            })
+
+            .state("home.list", {
+                url: "/list",
+                /*template:"<h3>Under Progress</h3>",*/
+                templateUrl : "templates/list.html",
+                controller : "listCtrl",
+                authenticate: true
+            })
+
+            .state("home.provinceMgmt", {
+                url: "/management",
+                templateUrl : "templates/management.html",
+                controller : "managementCtrl",
+                authenticate: true
+            })
+            .state("home.tooltip", {
+                url: "/textarea",
+                templateUrl : "templates/textarea.html",
+                controller : "toolCtrl",
+                authenticate: true
+            })
+
+            .state("home.notification", {
+                url: "/notification",
+                templateUrl : "templates/notification.html",
+                controller : "notificationCtrl",
+                authenticate: true
+            })
+            .state("home.functional", {
+                url: "/functional",
+                templateUrl : "templates/functional.html",
+                controller : "functionalCtrl",
+                authenticate: true
+            })
+
+
+    })
+    .controller('LoginController', function($scope, $rootScope, $stateParams, $state, LoginService) {
+        $rootScope.title = "AngularJS Login Sample";
+
+        $scope.formSubmit = function() {
+            LoginService.login($scope.user)
+                .then(function (data) {
+                    if (data) {
+                        $scope.error = '';
+                        $scope.user.username = '';
+                        $scope.user.password = '';
+                        $state.transitionTo('home.tree');
+                    }
+                    else {
+                        $scope.error = "Incorrect username/password !";
+                    }
+                }, function (reason) {
+                    $scope.error = "Incorrect username/password !";
+                });
+        };
+
+    })
+    .controller('registerController', function($scope, $state, LoginService){
+        $scope.formSubmit = function() {
+            if($scope.user.password === $scope.user.confpassword) {
+                LoginService.registerUser($scope.user)
+                    .then(function (data) {
+                        $state.transitionTo("login");
+                    }, function () {
+                        console.log("Failed to register");
+                    });
+            }
+            else {
+                console.log("Password not matched...");
+                var dialog_tpl = $(modelTemplate).filter('#personDialog').html();
+                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:[]};
+                var html = Mustache.to_html(dialog_tpl, data);
+                $(html).modal({backdrop: "static"});   //backdrop: "static" - for grayed out and no outside click work, backdrop: false - no grayed out*/
+            }
+        };
+    })
+    .controller("homeCtrl", function($scope, $state, DataService){
+        $scope.message = "Home Page";
+
+        /*$scope.geticonClass = function() {
+            if($( "#panel1" ).hasClass( "in" )){
+                return "openo_accordion_ui-icon-expand";
+            }
+            else{
+               return "openo_accordion_ui-icon-expand.current";
+            }
+
+
+        }*/
+
+
+
+        /* $scope.accordionLoaded  = function() {
+             if(modelTemplate != null) {
+                 console.log("left menu loading..");
+                 menuaccordion();
+                 return true;
+             }
+             console.log("left menu not loading..");
+             return false;
+         }
+
+         function menuaccordion() {
+             var accordion_tpl = $(modelTemplate).filter('#menu_accordion').html();
+
+             $.getJSON('./data/homelinks.json', function (accordion) {
+                 var html = Mustache.to_html(accordion_tpl, accordion.accordion_data);
+                 $('#accordionmenuid').html(html);
+             });
+         }*/
+
+    })
+
+    /* Tree Controller */
+    .controller("treeCtrl", function($scope,DataService,$log){
+        $scope.message = "Tree Data";
+        var setting = {};
+        /*$scope.treeLoaded = function() {
+            if(modelTemplate != null) {
+                console.log("Tree data loading..");
+                tree();
+                return true;
+            }
+            console.log("Tree data not loading..");
+            return false;
+        }*/
+        $scope.init = function() {
+            $scope.param="treeData";
+            $scope.shortNote="shortNote";
+            DataService.getAllJSONData($scope.param)
+                .then(function(data){
+                    $scope.treeData = data.data;
+                    tree();
+                    console.log("inside tree");
+                    $log.info($scope.treeData);
+                });
+            DataService.getAllJSONData($scope.shortNote)
+                .then(function(data1){
+                    $scope.treeTip = data1.data.treeTip;
+                    console.log("inside treeTip");
+                    $log.info(data1);
+                });
+        }
+        function tree() {
+            zNodes = $scope.treeData;
+            $.fn.zTree.init($("#tree1"), setting, zNodes);
+
+        }
+    })
+
+    /* Accordian Controller */
+    .controller("accordionCtrl", function($scope,DataService, $log){
+
+        $scope.message = "Accordion";
+
+        $scope.accordionLoaded  = function() {
+            if(modelTemplate != null) {
+                console.log("accordion loading..");
+
+                accordion();
+                return true;
+            }
+            console.log("accordion not loading..");
+            return false;
+        }
+
+        $scope.init = function() {
+            $scope.param="accordionData";
+            $scope.accordionTip="shortNote";
+            DataService.getAllJSONData($scope.param)
+                .then(function(data){
+                    $scope.accordion = data.data;
+                    accordion();
+                    console.log("inside accordion");
+                    $log.info(data);
+                });
+            DataService.getAllJSONData($scope.accordionTip)
+                .then(function(data){
+                    $scope.accordionTipData = data.data.accordionTip;
+                    console.log("inside accordion");
+                    $log.info(data);
+                });
+        }
+
+        function accordion() {
+
+            var accordion_tpl = $(modelTemplate).filter('#accordion').html();
+            console.log("in acc" );
+            var html = Mustache.to_html(accordion_tpl, $scope.accordion.accordion_data);
+            $('#accordion').html(html);
+        }
+    })
+    .controller("tabsCtrl", function($scope, $state, DataService, $log){
+        $scope.message = "Tabs";
+        $scope.tabLoaded  = function() {
+            if(modelTemplate != null) {
+                console.log("Tab is loading..");
+                loadTabData();
+                return true;
+            }
+            console.log("Not ready..");
+            return false;
+        }
+
+        $scope.init = function() {
+            $scope.param="tabData";
+            $scope.tabTip="shortNote";
+            DataService.getAllJSONData($scope.param)
+                .then(function(data){
+                    $scope.tabdata = data.data;
+                    loadTabData();
+                    console.log("inside tabs");
+                    $log.info(data);
+                });
+            DataService.getAllJSONData($scope.tabTip)
+                .then(function(data){
+                    $scope.tabTipData = data.data.tabTip;
+                    $log.info(data);
+                });
+        }
+
+        function loadTabData() {
+            var tab_tpl = $(modelTemplate).filter('#tabs').html();
+            var html = Mustache.to_html(tab_tpl, $scope.tabdata.tabData);
+            $('#tabArea').html(html);
+        }
+
+    })
+    .controller("vTabCtrl", function($scope, $state, DataService){
+        $scope.message = "Vertical Tabs";
+
+        $scope.vtabLoaded  = function() {
+            if(modelTemplate != null) {
+                console.log("Vertical Tab is loading..");
+                loadvTabData();
+                return true;
+            }
+            console.log("Not ready..");
+            return false;
+        }
+
+        $scope.init = function() {
+            $scope.param="vtabData";
+            $scope.vtabTip="shortNote";
+            DataService.getAllJSONData($scope.param)
+                .then(function(vtabdata){
+                    $scope.data = vtabdata.data;
+                    loadvTabData();
+                    console.log("inside vTab");
+                });
+            DataService.getAllJSONData($scope.vtabTip)
+                .then(function(vtabdata){
+                    $scope.vtabTipdata = vtabdata.data.vtabTip;
+                    console.log("inside vTab");
+                });
+        }
+
+        function loadvTabData() {
+
+            var vtab_tpl = $(modelTemplate).filter('#vtabs').html();
+            var html = Mustache.to_html(vtab_tpl, $scope.data.vtabData);
+            $('#vtabArea').html(html);
+        }
+    })
+    .controller("tableCtrl", function($scope, $state, DataService,  NgTableParams){
+        $scope.message = "Tables";
+
+        $scope.tableLoaded  = function() {
+            if(modelTemplate != null) {
+                console.log("Table is loading..");
+                loadTableData();
+                return true;
+            }
+            console.log("Not ready..");
+            return false;
+        }
+
+        $scope.init = function() {
+            $scope.param="tableData";
+            $scope.tableTip="shortNote";
+            DataService.getAllJSONData($scope.param)
+                .then(function(data){
+                    $scope.tableData = data.data;
+                    loadTableData();
+                    console.log("inside table");
+                });
+
+            DataService.getAllJSONData($scope.tableTip)
+                .then(function(data){
+                    $scope.tableTipData = data.data.tableTip;
+                    console.log("inside table");
+                });
+        }
+
+        function loadTableData() {
+
+            var table_tpl = $(modelTemplate).filter('#table').html();
+
+            var html = Mustache.to_html(table_tpl, $scope.tableData.basic_table_data);
+            $('#basictableArea').html(html);
+
+            var html = Mustache.to_html(table_tpl, $scope.tableData.str_table_data);
+            $('#strippedtableArea').html(html);
+            /* $scope.tableParams = new NgTableParams({count: 5, sorting: {FirstName: 'asc'}    //{page: 1,count: 10,filter: {name: 'M'},sorting: {name: 'desc'}
+             }, { counts:[5, 10, 20, 50], dataset: $scope.tableData.str_table_data});*/
+
+
+            /*var html = Mustache.to_html(table_tpl, $scope.tableData.cond_table_data);
+             $('#condensedtableArea').html(html);*/
+            $scope.tableParams = new NgTableParams({
+                count: 5, sorting: {language: 'asc'}    //{page: 1,count: 10,filter: {name: 'M'},sorting: {name: 'desc'}
+            }, {counts: [5, 10, 20, 50], dataset: $scope.tableData.cond_table_data});
+        }
+        }
+    )
+
+    /* Buttons Controller */
+    .controller("buttonsCtrl", function($scope,DataService,$log){
+        $scope.message = "Types of Buttons";
+        $scope.buttonTip="shortNote";
+
+        $scope.init = function() {
+            $scope.param="buttonsData";
+            DataService.getAllJSONData($scope.param)
+                .then(function(data){
+                    $scope.buttons = data.data;
+                    defaultButtons();
+                    visualButtons();
+                    sizeButtons();
+                    iconButtons();
+                    console.log("inside accordion");
+                    $log.info(data);
+                });
+            DataService.getAllJSONData($scope.buttonTip)
+                .then(function(data){
+                    $scope.buttonTipData = data.data.buttonTip;
+                    console.log("inside table");
+                });
+        }
+
+        function defaultButtons(){
+            console.log("Default buttons Loaded..");
+            //Here your view content is fully loaded !!
+            var def_button_tpl = $(modelTemplate).filter('#defaultButtons').html();
+            var def_icon_button_tpl = $(modelTemplate).filter('#defaultIconButtons').html();
+
+            var html = Mustache.to_html(def_button_tpl, $scope.buttons.default_btn_data.def_button);
+            $('#defaultButtonArea').html(html);
+
+            var html = Mustache.to_html(def_icon_button_tpl, $scope.buttons.default_btn_data.def_print_button);
+            $('#defaultButtonArea').append(html);
+
+            var html = Mustache.to_html(def_icon_button_tpl, $scope.buttons.default_btn_data.def_print_button_right);
+            $('#defaultButtonArea').append(html);
+        }
+
+
+        function visualButtons(){
+            console.log("Loaded..");
+            //Here your view content is fully loaded !!
+            var visual_button_tpl = $(modelTemplate).filter('#visualButtons').html();
+
+            var html = Mustache.to_html(visual_button_tpl, $scope.buttons.visual_btn_data.vis_pri_btn_data);
+            $('#visualButtonArea').html(html);
+
+            var html = Mustache.to_html(visual_button_tpl, $scope.buttons.visual_btn_data.vis_sec_btn_data);
+            $('#visualButtonArea').append(html);
+
+            var html = Mustache.to_html(visual_button_tpl, $scope.buttons.visual_btn_data.vis_succ_btn_data);
+            $('#visualButtonArea').append(html);
+
+            var html = Mustache.to_html(visual_button_tpl, $scope.buttons.visual_btn_data.vis_inf_btn_data);
+            $('#visualButtonArea').append(html);
+
+            var html = Mustache.to_html(visual_button_tpl, $scope.buttons.visual_btn_data.vis_warn_btn_data);
+            $('#visualButtonArea').append(html);
+
+            var html = Mustache.to_html(visual_button_tpl, $scope.buttons.visual_btn_data.vis_dang_btn_data);
+            $('#visualButtonArea').append(html);
+
+            var html = Mustache.to_html(visual_button_tpl, $scope.buttons.visual_btn_data.vis_link_btn_data);
+            $('#visualButtonArea').append(html);
+        }
+
+        function sizeButtons() {
+            var size_button_tpl = $(modelTemplate).filter('#sizeButtons').html();
+
+            var html = Mustache.to_html(size_button_tpl, $scope.buttons.diffSize_btn_data.size_small_btn_data);
+            $('#sizeButtonArea').html(html);
+
+            var html = Mustache.to_html(size_button_tpl, $scope.buttons.diffSize_btn_data.size_large_btn_data);
+            $('#sizeButtonArea').append(html);
+
+            var html = Mustache.to_html(size_button_tpl, $scope.buttons.diffSize_btn_data.size_block_btn_data);
+            $('#sizeButtonArea').append(html);
+
+        }
+
+        function iconButtons() {
+            var icon_button_tpl = $(modelTemplate).filter('#iconButtons').html();
+
+            var html = Mustache.to_html(icon_button_tpl, $scope.buttons.icon_btn_data.search_icon_btn_data);
+            $('#iconButtonArea').html(html);
+
+            var html = Mustache.to_html(icon_button_tpl, $scope.buttons.icon_btn_data.search_icon_styled_btn_data);
+            $('#iconButtonArea').append(html);
+
+            var html = Mustache.to_html(icon_button_tpl, $scope.buttons.icon_btn_data.print_icon_btn_data);
+            $('#iconButtonArea').append(html);
+
+        }
+
+        $scope.defaultButtonsLoaded  = function() {
+            if(modelTemplate != null) {
+                console.log("default buttons loading..");
+                defaultButtons();
+                return true;
+            }
+            console.log("default buttons not loading..");
+            return false;
+        }
+
+        $scope.visualButtonsLoaded  = function() {
+            if(modelTemplate != null) {
+                console.log("visual buttons loading..");
+                visualButtons();
+                return true;
+            }
+            console.log("visual buttons not loading..");
+            return false;
+        }
+
+        $scope.sizeButtonsLoaded  = function() {
+            if(modelTemplate != null) {
+                console.log("size buttons loading..");
+                sizeButtons();
+                return true;
+            }
+            console.log("size buttons not loading..");
+            return false;
+        }
+
+        $scope.iconButtonsLoaded  = function() {
+            if(modelTemplate != null) {
+                console.log("icon buttons loading..");
+                iconButtons();
+                return true;
+            }
+            console.log("icon buttons not loading..");
+            return false;
+        }
+    })
+    /* Drop down----------------------*/
+    .controller("dropdownCtrl", function($scope, DataService) {
+        $scope.message = "You selected drop down";
+        $scope.subIsLoaded = function () {
+            if (modelTemplate != null) {
+                console.log("Loading..");
+                loadDrop();
+                return true;
+            }
+            console.log("Not Loaded..");
+            return false;
+        }
+
+        $scope.init = function() {
+            $scope.param="dropdownData";
+            $scope.dropdownTip="shortNote";
+            DataService.getAllJSONData($scope.param)
+                .then(function(data){
+                    $scope.dropdown = data.data;
+                    loadDrop();
+                });
+            DataService.getAllJSONData($scope.dropdownTip)
+                .then(function(data){
+                    $scope.dropdownTipData = data.data.dropdownTip;
+                    console.log("inside table");
+                });
+        }
+        function loadDrop() {
+            var drop_tpl = $(modelTemplate).filter('#dropDown').html();
+            var dropHeader_tpl = $(modelTemplate).filter('#dropDownHeader').html();
+            var dropSimple_tpl = $(modelTemplate).filter('#simpleDropdownTmpl').html();
+
+            var html = Mustache.to_html(drop_tpl, $scope.dropdown.dropped_down_data);
+            $('#dropArea').html(html);
+
+            var html = Mustache.to_html(drop_tpl, $scope.dropdown.dropped_up_data);
+            $('#dropAreaUP').html(html);
+
+            var html = Mustache.to_html(dropHeader_tpl, $scope.dropdown.dropHeader_data);
+            $('#dropAreaHeader').html(html);
+
+            var html = Mustache.to_html(dropSimple_tpl, $scope.dropdown.dropSimple_data);
+            $('#plainDropDown').html(html);
+
+        }
+    })
+    .controller("radioCtrl", function($scope, DataService, $log) {
+        $scope.message = "You selected radio button tab";
+        var lodedOnce = false;
+        $scope.subIsLoaded  = function() {
+            if(modelTemplate != null) {
+                console.log("Loading..");
+                loadRadioBtn();
+                return true;
+            }
+            console.log("Not Loaded..");
+            return false;
+        }
+
+        $scope.init = function() {
+            $scope.param="radioData";
+            $scope.radioTip="shortNote";
+            DataService.getAllJSONData($scope.param)
+                .then(function(data){
+                    $scope.radioButton = data.data;
+                    loadRadioBtn();
+                    console.log("inside button");
+                    $log.info(data);
+                });
+
+            DataService.getAllJSONData($scope.radioTip)
+                .then(function(data){
+                    $scope.radioTipData = data.data.radioTip;
+                    console.log("inside table");
+                });
+        }
+        function loadRadioBtn(){
+            console.log("lodedOnce : "+lodedOnce);
+
+            var radio_button_tpl = $(modelTemplate).filter('#radioButtons').html();
+            var html = Mustache.to_html(radio_button_tpl, $scope.radioButton .radio_btn_default_data);
+            $('#radioBtnArea').html(html);
+
+            var html = Mustache.to_html(radio_button_tpl, $scope.radioButton .radio_btn_primary_data);
+            $('#radioBtnArea').append(html);
+
+            var html = Mustache.to_html(radio_button_tpl, $scope.radioButton .radio_btn_success_data);
+            $('#radioBtnArea').append(html);
+
+            var html = Mustache.to_html(radio_button_tpl, $scope.radioButton .radio_btn_danger_data);
+            $('#radioBtnArea').append(html);
+
+            var html = Mustache.to_html(radio_button_tpl, $scope.radioButton .radio_btn_Warn_data);
+            $('#radioBtnArea').append(html);
+
+            var html = Mustache.to_html(radio_button_tpl, $scope.radioButton .radio_btn_info_data);
+            $('#radioBtnArea').append(html);
+
+        }
+    })
+    .controller("checkBoxCtrl", function($scope, DataService) {
+        $scope.message = "You selected checkbox tab";
+        $scope.subIsLoaded  = function() {
+            if(modelTemplate != null) {
+                console.log("Loading..");
+                loadCheckBox();
+                return true;
+            }
+            console.log("Not Loaded..");
+            return false;
+        }
+        $scope.init = function() {
+            $scope.param="checkboxData";
+            $scope.checkboxTip="shortNote";
+            DataService.getAllJSONData($scope.param)
+                .then(function(data){
+                    $scope.checkBox = data.data;
+                    loadCheckBox();
+                });
+            DataService.getAllJSONData($scope.checkboxTip)
+                .then(function(data){
+                    $scope.checkboxTipData = data.data.checkboxTip;
+                    console.log("inside table");
+                });
+        }
+        function loadCheckBox() {
+            var check_box_tpl = $(modelTemplate).filter('#checkBoxes').html();
+
+            var html = Mustache.to_html(check_box_tpl, $scope.checkBox.checkbox_default_data);
+            $('#CheckBoxArea').html(html);
+
+            var html = Mustache.to_html(check_box_tpl, $scope.checkBox.checkbox_primary_data);
+            $('#CheckBoxArea').append(html);
+
+            var html = Mustache.to_html(check_box_tpl, $scope.checkBox.checkbox_success_data);
+            $('#CheckBoxArea').append(html);
+
+            var html = Mustache.to_html(check_box_tpl, $scope.checkBox.checkbox_danger_data);
+            $('#CheckBoxArea').append(html);
+
+            var html = Mustache.to_html(check_box_tpl, $scope.checkBox.checkbox_warn_data);
+            $('#CheckBoxArea').append(html);
+
+            var html = Mustache.to_html(check_box_tpl, $scope.checkBox.checkbox_info_data);
+            $('#CheckBoxArea').append(html);
+
+            /*$.getJSON('./data/checkboxData.json', function(c_data) {
+             var html = Mustache.to_html(check_box_tpl, c_data.checkbox_default_data);
+             $('#CheckBoxArea').html(html);
+
+             var html = Mustache.to_html(check_box_tpl, c_data.checkbox_primary_data);
+             $('#CheckBoxArea').append(html);
+
+             var html = Mustache.to_html(check_box_tpl, c_data.checkbox_success_data);
+             $('#CheckBoxArea').append(html);
+
+             var html = Mustache.to_html(check_box_tpl, c_data.checkbox_danger_data);
+             $('#CheckBoxArea').append(html);
+
+             var html = Mustache.to_html(check_box_tpl, c_data.checkbox_warn_data);
+             $('#CheckBoxArea').append(html);
+
+             var html = Mustache.to_html(check_box_tpl, c_data.checkbox_info_data);
+             $('#CheckBoxArea').append(html);
+             });*/
+        }
+    })
+
+    /* Reference Code -- Remove after use */
+    .controller("coursesCtrl", function($scope, DataService){
+        $scope.message = "Courses Offered";
+        $scope.courses = ["Java", "C/C++", "JavaScript", "AngularJS", "NodeJS", "HTML", "Python", "Action Script"];
+        $scope.showDialog = function() {
+            /*var dialog_tpl = $(modelTemplate).filter('#personDialog').html();
+             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"}]};
+             var html = Mustache.to_html(dialog_tpl, data);
+             $(html).modal({backdrop: "static"});   //backdrop: "static" - for grayed out and no outside click work, backdrop: false - no grayed out*/
+
+            var def_button_tpl = $(modelTemplate).filter('#visualButtons').html();
+            var def_btn_data = {'title':"asas", 'type':'primary'};
+            var html = Mustache.to_html(def_button_tpl, def_btn_data);
+            $('#sampleArea').html(html);
+        };
+
+        // $scope.$on('$viewContentLoaded', function(){
+        function loaded(){
+            console.log("Loaded..");
+            //Here your view content is fully loaded !!
+            var def_button_tpl = $(modelTemplate).filter('#dropDown').html();
+            var def_btn_data = {'title':'Shahid Noor','position':'down', items:[{"itemLabel": "Ok"},{"itemLabel": "Show"}]};
+            var html = Mustache.to_html(def_button_tpl, def_btn_data);
+            $('#sampleArea').html(html);
+
+        }
+        $scope.subIsLoaded  = function() {
+            if(modelTemplate != null) {
+                console.log("Loading..");
+                loaded();
+                return true;
+            }
+            console.log("Not Loaded..");
+            return false;
+        }
+    })
+
+    .controller("toolCtrl", function($scope, DataService, $compile, $log){
+                 $scope.toolTip = "shortNote";
+                $scope.toolTipContent = "textArea";
+
+            DataService.getAllJSONData($scope.toolTipContent)
+            .then(function(data){
+                $log.info(data.data.Note.placement);
+                $scope.noteContent = data.data.Note.message;
+                $scope.notePlacement = data.data.Note.placement;
+                $scope.textareaContent = data.data;
+                console.log($scope.noteContent + " " + $scope.notePlacement);
+                loadTextArea();
+            });
+            DataService.getAllJSONData($scope.toolTip)
+                .then(function(data){
+                    $scope.toolTipData = data.data.toolTip;
+                    //loadTextArea();
+                });
+
+        //$('[data-toggle="popover"]').popover();
+
+
+
+        function loadTextArea() {
+            var text = $(modelTemplate).filter('#textfield').html();
+            var email = $(modelTemplate).filter('#email').html();
+            var url = $(modelTemplate).filter('#url').html();
+            var password = $(modelTemplate).filter('#password').html();
+            var numeric = $(modelTemplate).filter('#numeric').html();
+            var dot = $(modelTemplate).filter('#dot').html();
+            var dateinput = $(modelTemplate).filter('#dateinput').html();
+            var monthinput = $(modelTemplate).filter('#monthinput').html();
+            var weekinput = $(modelTemplate).filter('#weekinput').html();
+            var timeinput = $(modelTemplate).filter('#timeinput').html();
+            var ipv4 = $(modelTemplate).filter('#ipv4').html();
+            var ipv6 = $(modelTemplate).filter('#ipv6').html();
+            var textarea = $(modelTemplate).filter('#textarea').html();
+
+            var note = $(modelTemplate).filter('#note').html();
+
+            var html = Mustache.to_html(text, $scope.textareaContent.Textbox);
+            $('#fname').html($compile(html)($scope));
+
+            var html = Mustache.to_html(email, $scope.textareaContent.Email);
+            $('#email').html($compile(html)($scope));
+
+            var html = Mustache.to_html(url, $scope.textareaContent.Url);
+            $('#url').html($compile(html)($scope));
+
+            var html = Mustache.to_html(password, $scope.textareaContent.Password);
+            $('#password').html($compile(html)($scope));
+
+
+            var html = Mustache.to_html(numeric, $scope.textareaContent.Number);
+            $('#numeric').html($compile(html)($scope));
+
+
+            var html = Mustache.to_html(dot, $scope.textareaContent.Datetime);
+            $('#dot').html($compile(html)($scope));
+
+            var html = Mustache.to_html(dateinput, $scope.textareaContent.Date);
+            $('#dateinput').html($compile(html)($scope));
+
+            var html = Mustache.to_html(monthinput, $scope.textareaContent.Month);
+            $('#monthinput').html($compile(html)($scope));
+
+            var html = Mustache.to_html(weekinput, $scope.textareaContent.Week);
+            $('#weekinput').html($compile(html)($scope));
+
+            var html = Mustache.to_html(timeinput, $scope.textareaContent.Time);
+            $('#timeinput').html($compile(html)($scope));
+
+
+            var html = Mustache.to_html(ipv4, $scope.textareaContent.Ipv4);
+            $('#ipv4').html($compile(html)($scope));
+
+            var html = Mustache.to_html(ipv6, $scope.textareaContent.Ipv6);
+            $('#ipv6').html($compile(html)($scope));
+
+            var html = Mustache.to_html(textarea, $scope.textareaContent.TextArea);
+            $('#textarea').html($compile(html)($scope));
+
+
+
+            var html = Mustache.to_html(note, {"placement":$scope.notePlacement});
+            $('#note').html(html);
+            $("#noteanchor").popover({
+                template: '<div class="popover fade bottom in customPopover"><div class="arrow"></div>'+$scope.noteContent+'</div>'
+            });
+
+            $scope.validatetextbox = function (value){
+               if($scope.textbox) {
+                    $scope.textboxErr = false;
+                }
+                else
+                    $scope.textboxErr = true;
+
+            }
+            $scope.validateemail = function (value){
+                if($scope.email) {
+                    $scope.emailErr = false;
+                }
+                else
+                    $scope.emailErr = true;
+
+            }
+            $scope.validateurl = function (value){
+                if($scope.url) {
+                    $scope.urlErr = false;
+                }
+                else
+                    $scope.urlErr = true;
+
+            }
+            $scope.validatepassword = function (value){
+                if($scope.password) {
+                    $scope.passwordErr = false;
+                }
+                else
+                    $scope.passwordErr = true;
+
+            }
+            $scope.validatenumeric = function (value){
+                if($scope.number) {
+                    $scope.numericErr = false;
+                }
+                else
+                    $scope.numericErr = true;
+
+            }
+            $scope.validatedot = function (value){
+                if($scope.datetime) {
+                    $scope.dotErr = false;
+                }
+                else
+                    $scope.dotErr = true;
+
+            }
+            $scope.validatedateinput = function (value){
+                if($scope.date) {
+                    $scope.dateinputErr = false;
+                }
+                else
+                    $scope.dateinputErr = true;
+
+            }
+            $scope.validatemonthinput = function (value){
+                if($scope.month) {
+                    $scope.monthinputErr = false;
+                }
+                else
+                    $scope.monthinputErr = true;
+
+            }
+            $scope.validateweek = function (value){
+                if($scope.week) {
+                    $scope.weekinputErr = false;
+                }
+                else
+                    $scope.weekinputErr = true;
+
+            }
+            $scope.validatetime = function (value){
+                if($scope.time) {
+                    $scope.timeinputErr = false;
+                }
+                else
+                    $scope.timeinputErr = true;
+
+            }
+            $scope.validateipv4 = function (value){
+                if($scope.ipv4) {
+                    $scope.ipv4Err = false;
+                }
+                else
+                    $scope.ipv4Err = true;
+
+            }
+            $scope.validateipv6 = function (value){
+                if($scope.ipv6) {
+                    $scope.ipv6Err = false;
+                }
+                else
+                    $scope.ipv6Err = true;
+
+            }
+
+            $scope.validatetextarea = function (value){
+                if($scope.textarea) {
+                    $scope.textareaErr = false;
+                }
+                else
+                    $scope.textareaErr = true;
+
+            }
+
+
+
+        }
+
+
+    })
+
+    .controller("notificationCtrl", function($scope, DataService){
+        $scope.message = "Notification and Messages";
+        $scope.notificationTip = "shortNote";
+
+        var dialog_tpl;
+        $scope.templateLoaded  = function() {
+            if(modelTemplate != null) {
+                console.log("Loading..");
+
+                return true;
+            }
+            console.log("Not Loaded..");
+            return false;
+        }
+        $scope.init = function() {
+            $scope.param="notificationData";
+            $scope.notificationTip="shortNote";
+            DataService.getAllJSONData($scope.param)
+                .then(function(data){
+                    $scope.notification = data.data;
+                });
+            DataService.getAllJSONData($scope.notificationTip)
+                .then(function(data){
+                    $scope.notificationTipData = data.data.notificationTip;
+                });
+        }
+
+        $scope.showError = function() {
+            dialog_tpl = $(modelTemplate).filter('#personDialog').html();
+            var html = Mustache.to_html(dialog_tpl, $scope.notification.err_data);
+            $(html).modal({backdrop: "static"});//backdrop: "static" - for grayed out and no outside click work, backdrop: false - no grayed out*!
+        }
+
+        $scope.showWarning = function() {
+            dialog_tpl = $(modelTemplate).filter('#personDialog').html();
+            var html = Mustache.to_html(dialog_tpl, $scope.notification.warn_data);
+            $(html).modal();
+        }
+
+        $scope.showInfo = function() {
+            dialog_tpl = $(modelTemplate).filter('#personDialog').html();
+            var html = Mustache.to_html(dialog_tpl, $scope.notification.info_data);
+            $(html).modal();
+        }
+        $scope.showConfirm = function() {
+            dialog_tpl = $(modelTemplate).filter('#personDialog').html();
+            var html = Mustache.to_html(dialog_tpl, $scope.notification.confirm_data);
+            $(html).modal({backdrop: "static"});   //backdrop: "static" - for grayed out and no outside click work, backdrop: false - no grayed out*!/
+        }
+
+    })
+
+    .controller("functionalCtrl", function($scope, DataService){
+        $scope.message = "Functional Flow";
+
+        var dialog_tpl;
+        $scope.templateLoaded  = function() {
+            if(modelTemplate != null) {
+                console.log("Loading..");
+
+                return true;
+            }
+            console.log("Not Loaded..");
+            return false;
+        }
+
+        $scope.init = function() {
+            $scope.param="functionalData";
+            $scope.functionalTip="shortNote";
+            DataService.getAllJSONData($scope.param)
+                .then(function(data){
+                    $scope.functional = data.data;
+                });
+            DataService.getAllJSONData($scope.functionalTip)
+                .then(function(data){
+                    $scope.functionalTipData = data.data.functionalTip;
+                });
+        }
+        $scope.showCreate = function() {
+            dialog_tpl = $(modelTemplate).filter('#functionalDialog').html();
+            var html = Mustache.to_html(dialog_tpl, $scope.functional.create_data);
+            $(html).modal();
+        }
+        $scope.showModify = function() {
+            dialog_tpl = $(modelTemplate).filter('#functionalDialog').html();
+            var html = Mustache.to_html(dialog_tpl, $scope.functional.modify_data);
+            $(html).modal();
+        }
+        $scope.showDelete = function() {
+            dialog_tpl = $(modelTemplate).filter('#functionalDialog').html();
+            var html = Mustache.to_html(dialog_tpl, $scope.functional.delete_data);
+            $(html).modal();
+        }
+        $scope.showWorkflow = function() {
+            dialog_tpl = $(modelTemplate).filter('#functionalDialog').html();
+            var html = Mustache.to_html(dialog_tpl, $scope.functional.workflow_data);
+            $(html).modal();
+        }
+    })
+
+    .controller("listCtrl", function($scope, $log, DataService){
+        $scope.message = "List Page";
+        $scope.listTip = "shortNote";
+        $scope.init = function() {
+            console.log("Shahid... ng-init");
+            $scope.param="list";
+            DataService.getAllJSONData($scope.param)
+                .then(function(data){
+                    $scope.mainlistItem = data.data;
+                }, function(reason){
+                    $scope.portfolios = [];
+
+                });
+
+            DataService.getAllJSONData($scope.listTip)
+                .then(function(data){
+                    $scope.listTipData = data.data.listTip;
+                });
+        }
+        $scope.loadSubMenuPage = function(index) {
+            $log.info($scope.mainlistItem);
+            $scope.subMenuListItem = $scope.mainlistItem[index].subMenu;
+            $scope.subsubMenuListItem = [];
+        }
+        $scope.loadSubSubMenuPage = function(index) {
+            $log.info($scope.subMenuListItem);
+            console.log("index: "+index);
+            $scope.subsubMenuListItem = $scope.subMenuListItem[index].subsubMenu;
+        }
+    })
+
+    .controller("managementCtrl", function($scope, $log, DataService, $state, $compile, NgTableParams){
+        $scope.message = "Management";
+        $scope.provinceTip = "shortNote";
+        /*$scope.provinceData = [
+            {id:1, province_name:'First', ip:'192.168.1.45', port:'8080'},
+            {id:2, province_name:'Second', ip:'192.168.1.5', port:'8081'},
+            {id:3, province_name:'Third', ip:'192.168.1.15', port:'8082'},
+            {id:4, province_name:'Fourth', ip:'192.168.1.28', port:'8083'},
+            {id:5, province_name:'Fifth', ip:'192.168.1.19', port:'8084'}
+        ];*/
+
+        $scope.init = function() {
+            //console.log("Shahid... ng-init");
+            DataService.getAllProvinceData()
+                .then(function(data){
+                    $scope.provinceData = data.provinceData;
+                    console.log("Data: ");
+                    loadButtons();
+                    $log.info(data.provinceData);
+                }, function(reason){
+                    $scope.message = "Error is :" + JSON.stringify(reason);
+                });
+
+            DataService.getAllJSONData($scope.provinceTip)
+                .then(function(data){
+                    $scope.provinceTipData = data.data.provinceTip;
+                });
+        }
+
+        /*DataService.getAllProvinceData()
+            .then(function(data){
+                $scope.provinceData = data.provinceData;
+                console.log("Data: ");
+                $log.info(data.provinceData);
+            }, function(reason){
+                $scope.message = "Error is :" + JSON.stringify(reason);
+            });*/
+        /*DataService.getAllData($scope.provinceTip)
+            .then(function(data){
+                $scope.provinceTipData = data.provinceTip;
+            });*/
+
+        function loadButtons() {
+            console.log("modelTemplate in ProvinceMgmt is :"+modelTemplate);
+            var def_button_tpl = $(modelTemplate).filter('#defaultButtons').html();
+            var add_data = {"title":"Add", "clickAction":"showAddModal()"};
+            var delete_data = {"title":"Delete Selected", "clickAction":"deleteData()"};
+            var addhtml = Mustache.to_html(def_button_tpl, add_data);
+            var deletehtml = Mustache.to_html(def_button_tpl, delete_data);
+            $('#provinceAction').html($compile(addhtml)($scope));
+            $('#provinceAction').append($compile(deletehtml)($scope));
+
+            $scope.checkboxes = { 'checked': false, items: {} };
+
+            //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}];
+            $scope.tableParams = new NgTableParams({count: 5, sorting: {province_name: 'asc'}    //{page: 1,count: 10,filter: {name: 'M'},sorting: {name: 'desc'}
+            }, { counts:[5, 10, 20, 50], dataset: $scope.provinceData});
+
+            $scope.$watch('checkboxes.checked', function(value) {
+                angular.forEach($scope.provinceData, function(item) {
+                    if (angular.isDefined(item.id)) {
+                        $scope.checkboxes.items[item.id] = value;
+                    }
+                });
+            });
+
+            var text = $(modelTemplate).filter('#textfield').html();
+            var ipv4 = $(modelTemplate).filter('#ipv4').html();
+            var number = $(modelTemplate).filter('#numeric').html();
+
+            var dataText = {"ErrMsg" :     {"textboxErr" : "Please input Name.", "modalVar":"province.province_name", "placeholder":"Name"}};
+            $('#myModal .provinceName').html($compile(Mustache.to_html(text, dataText.ErrMsg))($scope));
+
+            var dataIP = {"ErrMsg" :     {"ipv4Err" : "Please input IP Address.", "modalVar":"province.ip", "placeholder":"IP Address"}};
+            $('#myModal .ipAddress').html($compile(Mustache.to_html(ipv4, dataIP.ErrMsg))($scope));
+
+            var dataNum = {"ErrMsg" :     {"numericErr" : "Please input .", "modalVar":"province.port", "placeholder":"Port"}};
+            $('#myModal .port').html($compile(Mustache.to_html(number, dataNum.ErrMsg))($scope));
+
+            var modelSubmit_data = {"title":"OK", "clickAction":"saveData(province.id)"};
+            var modelSubmit_html = Mustache.to_html(def_button_tpl, modelSubmit_data);
+            $('#myModal #footerBtns').html($compile(modelSubmit_html)($scope));
+
+            var modelDelete_data = {"title":"Cancel", "clickAction":"closeModal()"};
+            var modelDelete_html = Mustache.to_html(def_button_tpl, modelDelete_data);
+            $('#myModal #footerBtns').append($compile(modelDelete_html)($scope));
+        }
+
+        $scope.validatetextbox = function (value){
+            if($scope.province.province_name) {
+                $scope.textboxErr = false;
+            }
+            else
+                $scope.textboxErr = true;
+        }
+        $scope.validateipv4 = function (value){
+            if($scope.province.ip) {
+                $scope.ipv4Err = false;
+            }
+            else
+                $scope.ipv4Err = true;
+        }
+        $scope.validatenumeric = function (value){
+            if($scope.province.port) {
+                $scope.numericErr = false;
+            }
+            else
+                $scope.numericErr = true;
+        }
+
+        $scope.closeModal = function() {
+            console.log("Closing Modal...");
+            $('#myModal').modal('hide');
+        }
+
+
+        $scope.checkAll = function() {
+            console.log("Checked ..");
+            angular.forEach($scope.provinceData, function(data) {
+                //data.select = $scope.selectAll;
+                $scope.checkboxes.items[user.id]
+            });
+        };
+
+        $scope.showAddModal = function() {
+            console.log("Showing Modal to Add data");
+            $scope.province = {};
+            $scope.textboxErr = false;
+            $scope.ipv4Err = false;
+            $scope.numericErr = false;
+            //$("#myModal").modal();
+            $("#myModal").modal({}).draggable();
+        }
+        $scope.saveData = function(id) {
+            if(id) {
+                //edit data
+                console.log("Editing data.." + JSON.stringify($scope.province));
+                DataService.editProvinceData($scope.province)
+                    .then(function (data) {
+                            $scope.message = "Success :-)";
+                            $state.reload();
+                            //$state.go($state.current.name, {}, {reload: true})
+                        },
+                        function (reason) {
+                            //$log.info(reason);
+                            $scope.message = reason.status + " " + reason.statusText;
+                        });
+            }
+            else {
+                console.log("Adding data.." + JSON.stringify($scope.province));
+                DataService.addProvinceData($scope.province)
+                    .then(function (data) {
+                            $scope.message = "Success :-)";
+                            $state.reload();
+                            //$state.go($state.current.name, {}, {reload: true})
+                        },
+                        function (reason) {
+                            //$log.info(reason);
+                            $scope.message = reason.status + " " + reason.statusText;
+                        });
+            }
+            $('#myModal').modal('hide');
+        }
+
+        $scope.deleteData = function() {
+            var deleteArr = [];
+            //$log.info($scope.checkboxes);
+            angular.forEach($scope.checkboxes.items, function(value , key) {
+                //$log.info(data);
+                if(value) {
+                    deleteArr.push(key);
+                }
+            });
+
+            console.log("To be deleted : "+deleteArr);
+            //$log.info(deleteArr);
+            DataService.deleteProvinceData(deleteArr)
+                .then(function(data){
+                        $scope.message = "Successfully deleted :-)";
+                        $state.reload();
+                    },
+                    function(reason){
+                        //$log.info(reason);
+                        $scope.message = reason.status + " " + reason.statusText;
+                    });
+        }
+
+        $scope.deleteIndividualData = function(id) {
+            var deleteArr = [];
+            //$log.info($scope.checkboxes);
+            deleteArr.push(id);
+
+            console.log("To be deleted : "+deleteArr);
+            //$log.info(deleteArr);
+            DataService.deleteProvinceData(deleteArr)
+                .then(function(data){
+                        $scope.message = "Successfully deleted :-)";
+                        $state.reload();
+                    },
+                    function(reason){
+                        //$log.info(reason);
+                        $scope.message = reason.status + " " + reason.statusText;
+                    });
+        }
+
+        $scope.editData = function(id) {
+            $scope.textboxErr = false;
+            $scope.ipv4Err = false;
+            $scope.numericErr = false;
+            console.log("To be edited : " + id);
+            var dataFound = false;
+            angular.forEach($scope.provinceData, function(data) {
+                if(!dataFound) {
+                    if (data.id == id) {
+                        console.log("Found : " + data.id);
+                        $scope.province = data;
+                        /*$scope.province.province_name = data.province_name;
+                        $scope.province.ip = data.ip;
+                        $scope.province.port = data.port;*/
+
+                        $("#myModal").modal();
+                        dataFound = true;
+                    }
+                }
+            });
+        }
+
+    })
+
+/*var modelTemplate;
+function loadTemplate() {
+    $.get('template.html', function(template) {
+        modelTemplate = template;
+    });
+}*/
+
+var modelTemplate = "";
+function loadTemplate() {
+    $.get('template.html', function (template) {
+        modelTemplate += template;
+    });
+    $.get('templateContainer.html', function (template) {
+        modelTemplate += template;
+    });
+    $.get('templateWidget.html', function (template) {
+        //console.log("Template is : "+template);
+        modelTemplate += template;
+    });
+    $.get('templateNotification.html', function (template) {
+        modelTemplate += template;
+    });
+    $.get('templateFunctional.html', function (template) {
+        modelTemplate += template;
+    });
+}
+
+function callThis() {
+    alert("Going Great!");
+}
+
+function searchTable() {
+    var filter, table, tr, td;
+    filter = $("#myInput").val().toUpperCase();
+    table = $("#myTable_search");
+    tr = $("#myTable_search tr");
+
+    // Loop through all table rows, and hide those who don't match the search query
+    for (var i = 0; i < tr.length; i++) {
+        td = tr[i].getElementsByTagName("td")[0];
+        if (td) {
+            if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
+                tr[i].style.display = "";
+            } else {
+                tr[i].style.display = "none";
+            }
+        }
+    }
+}
+
+function linkClicked(state) {
+    console.log("State to : " + state);
+}
+\ No newline at end of file
diff --git a/common/src/main/webapp/usage guide/browser/js/rest.js b/common/src/main/webapp/usage guide/browser/js/rest.js
new file mode 100644
index 00000000..51d230d0
--- /dev/null
+++ b/common/src/main/webapp/usage guide/browser/js/rest.js
@@ -0,0 +1,150 @@
+/*
+
+    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.
+
+*/
+
+
+
+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;
+            })
+        },*/
+        getAllJSONData : function(wdgtType) {
+            return $http({
+                url: 'http://localhost:3000/api/getAllJSONData',
+                method: 'POST',
+                data: {"wdgtType":wdgtType},
+                headers: {'Content-Type': 'application/json '}
+            }).then(function(response){
+                console.log("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/common/src/main/webapp/usage guide/browser/template.html b/common/src/main/webapp/usage guide/browser/template.html
new file mode 100644
index 00000000..f7cd87dd
--- /dev/null
+++ b/common/src/main/webapp/usage guide/browser/template.html
@@ -0,0 +1,44 @@
+<!--
+
+    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.
+
+-->
+
+<script id="dialogTpl" type="text/html">
+    <h3>{{name}}</h3> <div>Skills are:{{#skills}}<div>{{.}}</div>{{/skills}}</div></div>
+</script>
+
+<script id="person" type="text/html">
+    <ul>{{#depts}}<div><h4>{{fname}} {{lname}} </h4>{{Address}}</div>{{/depts}}</ul>
+</script>
+
+<script id="user" type="text/html">
+    <h3>{{name}}</h3><p>Address: {{address}}</p>
+</script>
+
+<!-- Left Menu Accordion -->
+<!--
+<script id="menu_accordion" type="text/html">
+    {{#items}}
+    <div class="panel panel-default">
+        <h3 class="panel-title">
+            <a data-toggle="collapse" data-parent="#accordion" data-target="#{{tabId}}">{{header}}</a>
+        </h3>
+        <div id="{{tabId}}" class="panel-collapse collapse {{#isActive}}in{{/isActive}}">
+            {{#subLinks}}<a ui-sref="{{state}}" ui-sref-active="link_active" style="padding-left: 62px;" onclick={{action}}>{{title}}</a>{{/subLinks}}
+        </div>
+    </div>
+    {{/items}}
+</script>-->
diff --git a/common/src/main/webapp/usage guide/browser/templateContainer.html b/common/src/main/webapp/usage guide/browser/templateContainer.html
new file mode 100644
index 00000000..ef6f01c6
--- /dev/null
+++ b/common/src/main/webapp/usage guide/browser/templateContainer.html
@@ -0,0 +1,79 @@
+<!--
+
+    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.
+
+-->
+<!-- Accordion -->
+<script id="accordion" type="text/html">
+    {{#items}}
+    <div class="panel panel-default">
+        <h3 class="panel-title">
+            <a data-toggle="collapse" data-parent="#accordion" data-target="#{{tabId}}">{{header}}</a>
+        </h3>
+        <div id="{{tabId}}" class="panel-collapse collapse {{#isActive}}in{{/isActive}}">
+            <div class="panel-body"> {{msg}} </div>
+        </div>
+    </div>
+    {{/items}}
+</script>
+
+<!--Tabs-->
+<script id="tabs" type="text/html">
+    <ul class="nav nav-tabs">
+        {{#items}}<li {{#isActive}}class="active"{{/isActive}}><a data-toggle="tab" data-target="#{{target}}">{{tablabel}}</a></li>{{/items}}
+    </ul>
+    <div class="tab-content">
+        {{#items}}
+        <div id="{{target}}" class="tab-pane fade {{#isActive}}in active{{/isActive}}">
+            <h3>{{tablabel}}</h3>
+            <p>{{msg}}</p>
+        </div>
+        {{/items}}
+    </div>
+</script>
+
+<!--Vertical Tabs-->
+<script id="vtabs" type="text/html">
+    <ul class="nav nav-stacked col-sm-4 col-md-4 col-lg-4">
+        {{#items}}<li {{#isActive}}class="active"{{/isActive}}><a data-toggle="tab" data-target="#{{target}}">{{tablabel}}</a></li>{{/items}}
+    </ul>
+    <div class="tab-content col-sm-8 col-md-8 col-lg-8">
+        {{#items}}
+        <div id="{{target}}" class="tab-pane fade {{#isActive}}in active{{/isActive}}">
+            <h3>{{tablabel}}</h3>
+            <p>{{msg}}</p>
+        </div>
+        {{/items}}
+    </div>
+</script>
+
+<!--Table-->
+<script id="table" type="text/html">
+    {{#filter}}<input type="text" id="myInput" onkeyup="{{action}}" placeholder="Search for {{searchField}}">{{/filter}}
+    <table id="myTable{{#filter}}_search{{/filter}}" class="table {{#striped}}table-striped{{/striped}} {{#border}}table-bordered{{/border}} {{#hover}}table-hover{{/hover}} {{#condensed}}table-condensed{{/condensed}}">
+        <thead>
+        <tr>
+            {{#itemHeader}}<th>{{.}}</th>{{/itemHeader}}
+        </tr>
+        </thead>
+        <tbody>
+        {{#rowitem}}
+        <tr>
+            {{#values}}<td>{{.}}</td>{{/values}}
+        </tr>
+        {{/rowitem}}
+        </tbody>
+    </table>
+</script>
+\ No newline at end of file
author	Seshu-Kumar-M <seshu.kumar.m@huawei.com>	2017-02-01 21:40:04 +0530
committer	Seshu-Kumar-M <seshu.kumar.m@huawei.com>	2017-02-01 21:43:52 +0530
commit	98bb0a4d66a41f2e6046743b134f6c88f434ef4f (patch)
tree	8ae12097f15a3b1dc3cd06748f3005f8c2f26dfc /common
parent	f205e8d8493616238ca5372d3ea042bbb0472bd1 (diff)