From 98bb0a4d66a41f2e6046743b134f6c88f434ef4f Mon Sep 17 00:00:00 2001 From: Seshu-Kumar-M Date: Wed, 1 Feb 2017 21:40:04 +0530 Subject: 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 --- .../main/webapp/usage guide/browser/css/RMain.css | 239 ++++ .../main/webapp/usage guide/browser/css/VMMain.css | 758 +++++++++++ .../webapp/usage guide/browser/css/open-ostyle.css | 952 ++++++++++++++ .../src/main/webapp/usage guide/browser/index.html | 53 + .../src/main/webapp/usage guide/browser/js/app.js | 1383 ++++++++++++++++++++ .../src/main/webapp/usage guide/browser/js/rest.js | 150 +++ .../main/webapp/usage guide/browser/template.html | 44 + .../usage guide/browser/templateContainer.html | 79 ++ 8 files changed, 3658 insertions(+) create mode 100644 common/src/main/webapp/usage guide/browser/css/RMain.css create mode 100644 common/src/main/webapp/usage guide/browser/css/VMMain.css create mode 100644 common/src/main/webapp/usage guide/browser/css/open-ostyle.css create mode 100644 common/src/main/webapp/usage guide/browser/index.html create mode 100644 common/src/main/webapp/usage guide/browser/js/app.js create mode 100644 common/src/main/webapp/usage guide/browser/js/rest.js create mode 100644 common/src/main/webapp/usage guide/browser/template.html create mode 100644 common/src/main/webapp/usage guide/browser/templateContainer.html (limited to 'common/src/main/webapp') 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 @@ + + + + + + + + + Usage Guide + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ 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:"

Under Progress

",*/ + 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: '
'+$scope.noteContent+'
' + }); + + $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 @@ + + + + + + + + + + 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 @@ + + + + + + + + + + + + \ No newline at end of file -- cgit 1.2.3-korg