diff options
| author |   Seshu-Kumar-M <seshu.kumar.m@huawei.com> | 2017-02-11 03:06:54 +0530 |
|---|---|---|
| committer | Seshu-Kumar-M <seshu.kumar.m@huawei.com> | 2017-02-11 03:06:54 +0530 |
| commit | 231321f8475c72a9b253b71ca7f99f2745e44535 (patch) | |
| tree | a463412932f256dacf6e2f3f72e40ca845628a69 /common/src/main/webapp/usageguide/browser/templates | |
| parent | fa9aeb9d5b6aba71f4fcb5ee775de823eb82cf19 (diff) | |
Client framework usage guide
Client framework usage guide.
Issue-Id : CLIENT-163
Change-Id: Id5acaa5b3ee3f62279d3bdcb98558a1c2984cf69
Signed-off-by: Seshu-Kumar-M <seshu.kumar.m@huawei.com>
Diffstat (limited to 'common/src/main/webapp/usageguide/browser/templates')
19 files changed, 1492 insertions, 0 deletions
diff --git a/common/src/main/webapp/usageguide/browser/templates/accordion.html b/common/src/main/webapp/usageguide/browser/templates/accordion.html new file mode 100644 index 00000000..e081c0f8 --- /dev/null +++ b/common/src/main/webapp/usageguide/browser/templates/accordion.html @@ -0,0 +1,46 @@ +<!--
+
+ 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.
+
+-->
+
+<div id="accordionArea" class="container col-sm-12 col-md-12 col-lg-12" ng-init="init()"><!--ng-if="accordionLoaded()"-->
+ <h4>Accordion</h4>
+ <div class="panel-group" id="accordion"></div>
+ <div class="shortnote">
+ <div class="shortnoteHeader">Usage</div>
+ <div class="shortnoteText">Create a div tag in html file with specific id for example accordionArea and write a specific function in javascript file to perform your business logic. An sample example as shown below:</div>
+ <br>
+ <div>HTML file:</div>
+ <pre><code><div id="accordionArea" ng-init="init()"></div></code></pre>
+ <br>
+ <div>Javascript file:</div>
+ <pre><code>
+ var data ={"accordion_data": {"items": [{"tabId": "tab1","header": "Tab1","isActive": true,
+ "msg": "This is in Collapsible Group 1 and this attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown."};
+
+ $scope.init = function() {
+ accordion();
+ }
+
+ function accordion() {
+ var accordion_tpl = $(modelTemplate).filter('#accordion').html();
+ var html = Mustache.to_html(accordion_tpl, data.accordion_data);
+ $('#accordion').html(html);
+ }</code></pre>
+
+ </div>
+ </div>
+</div>
diff --git a/common/src/main/webapp/usageguide/browser/templates/buttons.html b/common/src/main/webapp/usageguide/browser/templates/buttons.html new file mode 100644 index 00000000..6261d5a2 --- /dev/null +++ b/common/src/main/webapp/usageguide/browser/templates/buttons.html @@ -0,0 +1,130 @@ +<!--
+
+ 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.
+
+-->
+
+<h4>Types of Buttons</h4>
+
+<div id="buttonArea" ng-init="init()">
+ <h3> Default Buttons</h3>
+ <div id="defaultButtonArea"></div>
+ <h3>Visual Buttons</h3>
+ <div id="visualButtonArea"></div>
+ <h3>Different Sized Buttons</h3>
+ <div id="sizeButtonArea"></div>
+ <h3>Icon Buttons</h3>
+ <div id="iconButtonArea"></div>
+
+</div>
+<div class="shortnote">
+ <div class="shortnoteHeader">Usage</div>
+ <div class="shortnoteText">Create a div tag in html file with specific id for example defaultButtonArea,visualButtonArea, sizeButtonArea,iconButtonArea and write a specific function in javascript file to perform your business logic. An sample example as shown below:</div>
+ <br>
+ <div>HTML file:</div>
+ <pre><code><div id="buttonArea" ng-init="init()"></div></code></pre>
+ <pre><code><div id="defaultButtonArea" ></div></code></pre>
+ <pre><code><div id="visualButtonArea" ></div></code></pre>
+ <pre><code><div id="sizeButtonArea" ></div></code></pre>
+ <pre><code><div id="iconButtonArea" ></div></code></pre>
+ <br>
+ <div>Javascript file:</div>
+ <pre><code>
+ var data ={"default_btn_data" : {"def_button" : {"title":"Default"},"def_print_button" : {"title":"Print", "type":"btn btn-default", "gType": "glyphicon-print", "iconPosition":"left"},"def_print_button_right" : {"title":"Search", "type":"btn btn-default", "gType": "glyphicon-search", "iconPosition":"right"}},"visual_btn_data" : { "vis_pri_btn_data" : {"title":"Primary", "type":"primary"},"vis_sec_btn_data" : {"title":"Secondary", "type":"secondary"},"vis_succ_btn_data" : {"title":"Success", "type":"success"},"vis_inf_btn_data" : {"title":"Info", "type":"info"},"vis_warn_btn_data" : {"title":"Warning", "type":"warning"},"vis_dang_btn_data" : {"title":"Danger", "type":"danger"},"vis_link_btn_data" : {"title":"Link", "type":"link"}},"diffSize_btn_data" : {"size_small_btn_data" : {"title": "Small Button", "type": "primary", "size": "btn-sm"},"size_large_btn_data" : {"title": "Large Button", "type": "primary", "size": "btn-lg"},"size_block_btn_data" : {"title": "Large Block Button", "type": "primary", "size": "btn-lg btn-block"}},"icon_btn_data" : {"search_icon_btn_data" : {"title": "Search Icon", "type": "btn-default", "gType": "glyphicon-search"},"search_icon_styled_btn_data" : {"title": "Styled Search Icon", "type": "primary", "gType": "glyphicon-search"},"print_icon_btn_data" : {"title": "Print", "type": "primary btn-lg", "gType": "glyphicon-print"}}};
+
+ $scope.init = function() {
+ defaultButtons();
+ visualButtons();
+ sizeButtons();
+ iconButtons();
+ }
+
+ function defaultButtons(){
+ 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, data.default_btn_data.def_button);
+ $('#defaultButtonArea').html(html);
+
+ var html = Mustache.to_html(def_icon_button_tpl, data.default_btn_data.def_print_button);
+ $('#defaultButtonArea').append(html);
+
+ var html = Mustache.to_html(def_icon_button_tpl, data.default_btn_data.def_print_button_right);
+ $('#defaultButtonArea').append(html);
+ }
+
+
+ function visualButtons(){
+
+ var visual_button_tpl = $(modelTemplate).filter('#visualButtons').html();
+
+ var html = Mustache.to_html(visual_button_tpl, data.visual_btn_data.vis_pri_btn_data);
+ $('#visualButtonArea').html(html);
+
+ var html = Mustache.to_html(visual_button_tpl, data.visual_btn_data.vis_sec_btn_data);
+ $('#visualButtonArea').append(html);
+
+ var html = Mustache.to_html(visual_button_tpl, data.visual_btn_data.vis_succ_btn_data);
+ $('#visualButtonArea').append(html);
+
+ var html = Mustache.to_html(visual_button_tpl, data.visual_btn_data.vis_inf_btn_data);
+ $('#visualButtonArea').append(html);
+
+ var html = Mustache.to_html(visual_button_tpl, data.visual_btn_data.vis_warn_btn_data);
+ $('#visualButtonArea').append(html);
+
+ var html = Mustache.to_html(visual_button_tpl, data.visual_btn_data.vis_dang_btn_data);
+ $('#visualButtonArea').append(html);
+
+ var html = Mustache.to_html(visual_button_tpl, data.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, data.diffSize_btn_data.size_small_btn_data);
+ $('#sizeButtonArea').html(html);
+
+ var html = Mustache.to_html(size_button_tpl, data.diffSize_btn_data.size_large_btn_data);
+ $('#sizeButtonArea').append(html);
+
+ var html = Mustache.to_html(size_button_tpl, data.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, data.icon_btn_data.search_icon_btn_data);
+ $('#iconButtonArea').html(html);
+
+ var html = Mustache.to_html(icon_button_tpl, data.icon_btn_data.search_icon_styled_btn_data);
+ $('#iconButtonArea').append(html);
+
+ var html = Mustache.to_html(icon_button_tpl, data.icon_btn_data.print_icon_btn_data);
+ $('#iconButtonArea').append(html);
+
+ }</code></pre>
+
+
+
+
+ </div>
+</div>
+
+
+
diff --git a/common/src/main/webapp/usageguide/browser/templates/checkBoxes.html b/common/src/main/webapp/usageguide/browser/templates/checkBoxes.html new file mode 100644 index 00000000..aab3bfe1 --- /dev/null +++ b/common/src/main/webapp/usageguide/browser/templates/checkBoxes.html @@ -0,0 +1,60 @@ +<!--
+
+ 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.
+
+-->
+
+<h4>Checkboxes</h4>
+
+<div id="CheckBoxArea" class="funkyradio" ng-init="init()"></div>
+<div class="shortnote">
+ <div class="shortnoteHeader">Usage</div>
+ <div class="shortnoteText">Create a div tag in html file with specific id for example CheckBoxArea and write a specific function in javascript file to perform your business logic. An sample example as shown below:</div>
+ <br>
+ <div>HTML file:</div>
+ <pre><code><div id="CheckBoxArea" ng-init="init()"></div></code></pre>
+ <br>
+ <div>Javascript file:</div>
+ <pre><code>
+ var data ={"checkbox_default_data" : {"id":1, "label":"Default check box", "type":"default", "checked":true},"checkbox_primary_data" : {"id":2, "label":"Primary check box", "type":"primary", "checked":false},"checkbox_success_data" : {"id":3, "label":"Success check box", "type":"success", "checked":true},"checkbox_danger_data" : {"id":4, "label":"Error check box", "type":"danger", "checked":true},"checkbox_warn_data" : {"id":5, "label":"Warn check box", "type":"warning", "checked":false},"checkbox_info_data" : {"id":6, "label":"Info check box", "type":"info", "checked":true}};
+
+ $scope.init = function() {
+ loadCheckBox();
+ }
+
+ function loadCheckBox() {
+ var check_box_tpl = $(modelTemplate).filter('#checkBoxes').html();
+
+ var html = Mustache.to_html(check_box_tpl, data.checkbox_default_data);
+ $('#CheckBoxArea').html(html);
+
+ var html = Mustache.to_html(check_box_tpl, data.checkbox_primary_data);
+ $('#CheckBoxArea').append(html);
+
+ var html = Mustache.to_html(check_box_tpl, data.checkbox_success_data);
+ $('#CheckBoxArea').append(html);
+
+ var html = Mustache.to_html(check_box_tpl, data.checkbox_danger_data);
+ $('#CheckBoxArea').append(html);
+
+ var html = Mustache.to_html(check_box_tpl, data.checkbox_warn_data);
+ $('#CheckBoxArea').append(html);
+
+ var html = Mustache.to_html(check_box_tpl, data.checkbox_info_data);
+ $('#CheckBoxArea').append(html);
+ }</code></pre>
+
+</div>
+</div>
diff --git a/common/src/main/webapp/usageguide/browser/templates/courses.html b/common/src/main/webapp/usageguide/browser/templates/courses.html new file mode 100644 index 00000000..34dde6c3 --- /dev/null +++ b/common/src/main/webapp/usageguide/browser/templates/courses.html @@ -0,0 +1,32 @@ +<!-- + + 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. + +--> + + +<h1>{{message}}</h1> +<ul ng-repeat="course in courses | orderBy : course : false"> + <li>{{course}}</li> +</ul> +<button ng-click="showDialog()">Test</button> + +<!--<a ui-sref=".list">List</a> +<a ui-sref=".details">Paragraph</a> + +<div ui-view></div>--> + + +<div id="sampleArea" ng-if="subIsLoaded()"></div> diff --git a/common/src/main/webapp/usageguide/browser/templates/dropdown.html b/common/src/main/webapp/usageguide/browser/templates/dropdown.html new file mode 100644 index 00000000..cb974775 --- /dev/null +++ b/common/src/main/webapp/usageguide/browser/templates/dropdown.html @@ -0,0 +1,83 @@ +<!--
+
+ 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.
+
+-->
+
+
+<div class="container col-sm-12 col-md-12 col-lg-12">
+ <h4>Drop Down</h4>
+
+ <div id="dropdown" class="container col-sm-12 col-md-12 col-lg-12" ng-init="init()">
+ <h3>Simple Dropdown</h3>
+ <div id="plainDropDown"></div>
+ <h3>Dropdown</h3>
+ <div id="dropArea" type="button"></div>
+ <h3>Dropup</h3>
+ <div id="dropAreaUP" type="button"></div>
+ <h3>Dropdown Header</h3>
+ <div id="dropAreaHeader" type="button"></div>
+
+ </div>
+ <div class="col-sm-12 col-md-12 col-lg-12 shortnote">
+ <div class="shortnoteHeader">Usage</div>
+ <div class="shortnoteText">Create a div tag in html file with specific id for example plainDropDown,dropArea,dropAreaUP,dropAreaHeader and write a specific function in javascript file to perform your business logic. An sample example as shown below:</div>
+ <br>
+ <div>HTML file:</div>
+ <pre><code><div id="dropdown" ng-init="init()"></div></code></pre>
+ <pre><code><div id="plainDropDown" ></div></code></pre>
+ <pre><code><div id="dropArea" ></div></code></pre>
+ <pre><code><div id="dropAreaUP" ></div></code></pre>
+ <pre><code><div id="dropAreaHeader" ></div></code></pre>
+
+
+ <br>
+ <div>Javascript file:</div>
+ <pre><code>
+ var data ={"dropped_down_data" :{"title":"DropDown","position":"down", "items":[{"itemLabel": "Node JS"},{"itemLabel": "JS"}]},"dropped_up_data" :{"title":"DropUp","position":"up", "items":[{"itemLabel": "PHP"},{"itemLabel": "ASP"}]},"dropHeader_data" :{"title":"DropHeader","position":"down","items":[{"itemLabel": "Web UI", "isheader":true},{"itemLabel": "HTML", "isheader":false},{"itemLabel": "CSS", "isheader":false},{"itemLabel": "JS", "isheader":false},{"itemLabel": "Programming", "isheader":true},{"itemLabel": "C", "isheader":false},{"itemLabel": "C++", "isheader":false}]},"dropSimple_data" : {"title":"--PleaseSelect--","items":[{"itemLabel": "Cameras"},{"itemLabel": "Mobile Phones"},{"itemLabel": "Computers"},{"itemLabel": "Monitors"},{"itemLabel": "Tablets"},{"itemLabel": "Others"}]}};
+
+ $scope.init = function() {
+ loadDrop();
+ }
+
+ 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, data.dropped_down_data);
+ $('#dropArea').html(html);
+
+ var html = Mustache.to_html(drop_tpl, data.dropped_up_data);
+ $('#dropAreaUP').html(html);
+
+ var html = Mustache.to_html(dropHeader_tpl, data.dropHeader_data);
+ $('#dropAreaHeader').html(html);
+
+ var html = Mustache.to_html(dropSimple_tpl, data.dropSimple_data);
+ $('#plainDropDown').html(html);
+
+ }</code></pre>
+
+
+
+
+ </div>
+ </div>
+</div>
+
+
+
+
diff --git a/common/src/main/webapp/usageguide/browser/templates/functional.html b/common/src/main/webapp/usageguide/browser/templates/functional.html new file mode 100644 index 00000000..126deed7 --- /dev/null +++ b/common/src/main/webapp/usageguide/browser/templates/functional.html @@ -0,0 +1,48 @@ +<!-- + + 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. + +--> + +<h4>{{message}}</h4> + +<div id="functionalArea" ng-init="init()"> + <!--<button type="button" class="btn btn-default" ng-click="showCreate()">Create</button> + <button type="button" class="btn btn-default" ng-click="showModify()">Modify</button> + <button type="button" class="btn btn-default" ng-click="showDelete()">Delete</button> + <button type="button" class="btn btn-default" ng-click="showWorkflow()">Workflow</button>--> + <div id="buttonArea"></div> + <div class="shortnote"> + <div class="shortnoteHeader">Usage</div> + <div class="shortnoteText">Create a button in html file and write a specific function in javascript file to perform your business logic. An sample example as shown below:</div> + <br> + <div>HTML file:</div> + <pre><code><button type="button" class="btn btn-default" ng-click="showCreate()">Create</button></code></pre> + <br> + <div>Javascript file:</div> + <pre><code> + var data={"create_data" : {"title":"Create", "labels":[{"text": "Username", "input_id":"username", "type":"text"},{"text": "Password", "input_id":"username", "type":"password"}], "showClose":"true","closeBtnTxt":"Cancel","msg":"This is Create dialog box", "buttons":[{"text": "Ok"}]}}; + + $scope.showCreate = function() { + dialog_tpl = $(modelTemplate).filter('#functionalDialog').html(); + var html = Mustache.to_html(dialog_tpl, data.create_data); + $(html).modal(); + } </code></pre> + + + </div> +</div> + + diff --git a/common/src/main/webapp/usageguide/browser/templates/home.html b/common/src/main/webapp/usageguide/browser/templates/home.html new file mode 100644 index 00000000..1f65dfa9 --- /dev/null +++ b/common/src/main/webapp/usageguide/browser/templates/home.html @@ -0,0 +1,159 @@ +<!-- + + 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. + +--> + +<div class="homecontent center" ng-init="loadTemplate()"> + <div class="container"> + <div class="row"> + <div class="col-sm-4 col-md-3 col-lg-3 rmpadding"> + <div id="menu_accordion" class="openoAccordian_accordionmenu"> + <div id="container" class="panel panel-default panelbr"> + <h5 class="panel-title"> + <a data-toggle="collapse" data-target="#panel1"><span>Container</span></a> + </h5> + <div id="panel1" class="panel-collapse collapse in"> + <ul> + <li> + <a ui-sref=".tree" ui-sref-active="link_active">Tree</a> + </li> + <li> + <a ui-sref=".accordion" ui-sref-active="link_active">Accordion</a> + </li> + <li> + <a ui-sref=".tabs" ui-sref-active="link_active">Tabs</a> + </li> + <li> + <a ui-sref=".vtabs" ui-sref-active="link_active">Vertical Tab</a> + </li> + <li> + <a ui-sref=".table" ui-sref-active="link_active">Table</a> + </li> + </ul> + </div> + </div> + <div id="widgets" class="panel panel-default panelbr"> + <h5 class="panel-title"> + <a data-toggle="collapse" data-target="#panel2"><span>Widgets</span></a> + </h5> + <div id="panel2" class="panel-collapse collapse in"> + <li> + <a ui-sref=".buttons" ui-sref-active="link_active">Buttons</a> + </li> + <li> + <a ui-sref=".dropdown" ui-sref-active="link_active">Drop Down</a> + </li> + <li> + <a ui-sref=".radiobuttons" ui-sref-active="link_active">Radio Button</a> + </li> + <li> + <a ui-sref=".checkboxes" ui-sref-active="link_active">Check Box</a> + </li> + <li> + <a ui-sref=".tooltip" ui-sref-active="link_active">Text Fields</a> + </li> + <li> + <a ui-sref=".list" ui-sref-active="link_active">List</a> + </li> + <li> + <a ui-sref=".provinceMgmt" ui-sref-active="link_active">Management</a> + </li> + </div> + </div> + <div id="notifications" class="panel panel-default panelbr"> + <h5 class="panel-title"> + <a data-toggle="collapse" data-target="#panel3"><span>Notifications</span></a> + </h5> + <div id="panel3" class="panel-collapse collapse in"> + <li> + <a ui-sref=".notification" ui-sref-active="link_active">Notification & Messages</a> + </li> + <li> + <a ui-sref=".labels" ui-sref-active="link_active">Labels</a> + </li> + </div> + </div> + <div id="functional" class="panel panel-default panelbr"> + <h5 class="panel-title"> + <a ui-sref=".functional" ui-sref-active="noChild_link_active">Functional Flow</a> + + </h5> + </div> + </div> + <!--<div id="accordionmenuid" allow-resize="true" dataset="dataArr" height="resHeight" + listeners="callBacklisteners" resize-callback="resizehandler" + current-select="currentselect" click="clickHandler" + class="ng-isolate-scope accordion_parent openo_accordion_main_menu"> + <div class="openo-accordion-resizable-handle" style="cursor: auto;"></div> + <ul id="accordionmenuid_ul" class="openoAccordian_accordionmenu"> + <li id="accordionmenuid_ul_0_0_brAppTopMenuID" nodeid="brAppTopMenuID"> + <!–<span class="openo_accordion_ui-icon-expand" style="padding-left: 20px;cursor: pointer;"></span>–> + <span class="openoAccordian_showHideArrow_hide" id="accordionmenuid_arrow" style="cursor: pointer;"></span> + <a title="brApp" class="header opened" style="padding-left: 10px; cursor: pointer;">Container</a> + <ul> + <li nodeid="brAppSiteMenuID" class="" style="display: list-item;"> + <a ui-sref=".tree" ui-sref-active="link_active" class="" style="padding-left: 62px;">Tree</a> + </li> + <li nodeid="brAppMeMenuID" style="display: list-item;"> + <a ui-sref=".accordion" ui-sref-active="link_active" style="padding-left: 62px;">Accordian</a> + </li> + <li nodeid="brAppTpMenuID" style="display: list-item;"> + <a ui-sref=".tabs" ui-sref-active="link_active" style="padding-left: 62px;">Tabs</a> + </li> + <li nodeid="brAppTlMenuID" style="display: list-item;"> + <a ui-sref=".vtabs" ui-sref-active="link_active" style="padding-left: 62px;">Vertical Tab</a> + </li> + <li nodeid="brAppTlMenuID" style="display: list-item;"> + <a ui-sref=".table" ui-sref-active="link_active" style="padding-left: 62px;">Table</a> + </li> + </ul> + <a title="brApp" class="header opened" style="padding-left: 10px; cursor: pointer;">Widgets</a> + <ul> + <li nodeid="brAppSiteMenuID" class="" style="display: list-item;"> + <a ui-sref=".buttons" ui-sref-active="link_active" style="padding-left: 62px;">Buttons</a> + </li> + <li nodeid="brAppMeMenuID" style="display: list-item;"> + <a ui-sref=".dropdown" ui-sref-active="link_active" style="padding-left: 62px;">Drop Down</a> + </li> + <li nodeid="brAppTpMenuID" style="display: list-item;"> + <a ui-sref=".radiobuttons" ui-sref-active="link_active" style="padding-left: 62px;">Radio Button</a> + </li> + <li nodeid="brAppTlMenuID" style="display: list-item;"> + <a ui-sref=".checkboxes" ui-sref-active="link_active" style="padding-left: 62px;">Check Box</a> + </li> + <li nodeid="brAppTlMenuID" style="display: list-item;"> + <a ui-sref=".tooltip" ui-sref-active="link_active" style="padding-left: 62px;">Tool Tip</a> + </li> + <li nodeid="brAppTlMenuID" style="display: list-item;"> + <a ui-sref=".list" ui-sref-active="link_active" style="padding-left: 62px;">List</a> + </li> + </li> + + </ul> + <a ui-sref=".notification" ui-sref-active="link_active" class="header opened" style="padding-left: 10px; cursor: pointer;">Notification & Messages</a> + <a ui-sref=".functional" ui-sref-active="link_active" class="header opened" style="padding-left: 10px; cursor: pointer;">Functional Flow</a> + + </li> + </ul> + </div>--> + </div> + <div id="rightContainer" class="col-sm-8 col-md-9 col-lg-9"> + <!--<div id="sampleArea"></div>--> + <ui-view></ui-view> + </div> + </div> + </div> +</div>
\ No newline at end of file diff --git a/common/src/main/webapp/usageguide/browser/templates/label.html b/common/src/main/webapp/usageguide/browser/templates/label.html new file mode 100644 index 00000000..41282121 --- /dev/null +++ b/common/src/main/webapp/usageguide/browser/templates/label.html @@ -0,0 +1,94 @@ +
+
+<!--<h4>Header</h4>-->
+<div id="headerArea" class="header" ><!--ng-init="init()"-->
+ <!--<label class="titlestyle">Note</label>-->
+ <span class="labelHeader">OPEN-O</span>
+</div>
+
+<div class="titlestyle">
+ Info: This Header is using labelHeader as CSS
+</div>
+<br>
+<div>Use <b>labelHeader</b> class of open-ostye.css for all the message information</div>
+<br>
+<pre><code><span class="labelHeader">OPEN-O</span></code></pre>
+
+<br>
+<br>
+
+<div class="header" ><!--ng-init="init()"-->
+ <span class="labelTitle">OPEN-O</span>
+</div>
+
+<div class="titlestyle">
+ Info: This Title is using labelTitle as CSS
+</div>
+<br>
+<div>Use <b>labelTitle</b> class of open-ostye.css for all the message information</div>
+<br>
+<pre><code><span class="labelTitle">OPEN-O</span></code></pre>
+<br>
+<br>
+
+<!--<h5>Message</h5>-->
+<div id="messageArea" ><!--ng-init="init()"-->
+ <span class="message">OPEN-O</span>
+</div>
+<div class="titlestyle">
+ Info: This Message is using titlestyle as CSS
+</div>
+<br>
+<div>Use <b>message</b> class of open-ostye.css for all the message information</div>
+<br>
+<pre><code><span class="message">OPEN-O</span></code></pre>
+<br>
+<br>
+
+<!--<h5>Lables</h5>-->
+<div id="labelArea" ><!--ng-init="init()"-->
+ <span class="labelstyle">OPEN-O</span>
+</div>
+<div class="titlestyle">
+ Info: This label is using labelstyle as CSS
+</div>
+<br>
+<div>Use <b>labelstyle</b> class of open-ostye.css for all the message information</div>
+<br>
+<pre><code><span class="labelstyle">OPEN-O</span></code></pre>
+<br>
+<br>
+
+<!--<h5>Note</h5>-->
+<div id="noteArea" ><!--ng-init="init()"-->
+ <span class="shortnoteText">OPEN-O</span>
+</div>
+<div class="titlestyle">
+ Info: This Note is using shortnoteText as CSS
+</div>
+<br>
+<div>Use <b>shortnoteText</b> class of open-ostye.css for all the message information</div>
+<br>
+<pre><code><span class="shortnoteText">OPEN-O</span></code></pre>
+<br>
+<br>
+
+<!--
+<h2>Notes</h2>
+<div class="danger">
+ <p><strong>Danger!</strong> Some text...</p>
+</div>
+
+<div class="success">
+ <p><strong>Success!</strong> Some text...</p>
+</div>
+
+<div class="info">
+ <p><strong>Info!</strong> Some text...</p>
+</div>
+
+<div class="warning">
+ <p><strong>Warning!</strong> Some text...</p>
+</div>
+-->
+
diff --git a/common/src/main/webapp/usageguide/browser/templates/list.html b/common/src/main/webapp/usageguide/browser/templates/list.html new file mode 100644 index 00000000..6b4fb8a2 --- /dev/null +++ b/common/src/main/webapp/usageguide/browser/templates/list.html @@ -0,0 +1,93 @@ +<!--
+
+ 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.
+
+-->
+
+<div class="container col-sm-12 col-md-12 col-lg-12">
+ <h4>{{message}}</h4>
+
+ <div id="listArea" class="container col-sm-12 col-md-12 col-lg-12" ng-init="init()">
+ <div id="list1" class="list col-sm-4 col-md-4 col-lg-4">
+ <div ng-repeat="item in mainlistItem">
+ <button type="button" class="btn btn-primary btn-block" ng-click="loadSubMenuPage($index)">{{item.title}}</button>
+ </div>
+ </div>
+ <div id="list2" class="list col-sm-4 col-md-4 col-lg-4">
+ <div ng-repeat="subitem in subMenuListItem">
+ <button type="button" class="btn btn-primary btn-block" ng-click="loadSubSubMenuPage($index)">{{subitem.title}}</button>
+ </div>
+ </div>
+ <div id="list3" class="list col-sm-4 col-md-4 col-lg-4">
+ <div ng-repeat="subsubitem in subsubMenuListItem">
+ <button type="button" class="btn btn-primary btn-block">{{subsubitem.title}}</button>
+ </div>
+ </div>
+
+ </div>
+
+ <!-- <test method='parentClick()'></test>-->
+ <div class="col-sm-12 col-md-12 col-lg-12 shortnote">
+ <div class="shortnoteHeader">Usage</div>
+ <div class="shortnoteText">Create a div tag in html file with specific id for example listArea and write a specific function in javascript file to perform your business logic. An sample example as shown below:</div>
+ <br>
+ <div>HTML file:</div>
+ <pre><code> <div id="listArea" ng-init="init()">
+ <div id="list1">
+ <div ng-repeat="item in mainlistItem">
+ <button type="button" class="btn btn-primary btn-block" ng-click="loadSubMenuPage($index)">{ {item.title} }</button>
+ </div>
+ </div>
+ <div id="list2">
+ <div ng-repeat="subitem in subMenuListItem">
+ <button type="button" class="btn btn-primary btn-block" ng-click="loadSubSubMenuPage($index)">{ {subitem.title} }</button>
+ </div>
+ </div>
+ <div id="list3">
+ <div ng-repeat="subsubitem in subsubMenuListItem">
+ <button type="button" class="btn btn-primary btn-block">{ {subsubitem.title} }</button>
+ </div>
+ </div>
+
+ </div></code></pre>
+ <br>
+ <div>Javascript file:</div>
+ <pre><code>
+ var data ={"id": "113","title": "Movies","subMenu": [{"title":"Sci-fi","subsubMenu":[{"title":"Intersteller"},{"title":"Inception"},{"title":"The Arrival"},
+ {"title":"The Paycheck"}]}};
+
+ $scope.init = function() {
+ $scope.mainlistItem = data;
+ }
+
+ $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;
+ }</code></pre>
+
+
+
+
+
+ </div>
+ </div>
+</div>
+
diff --git a/common/src/main/webapp/usageguide/browser/templates/login.html b/common/src/main/webapp/usageguide/browser/templates/login.html new file mode 100644 index 00000000..026b670d --- /dev/null +++ b/common/src/main/webapp/usageguide/browser/templates/login.html @@ -0,0 +1,40 @@ +<!--
+
+ 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.
+
+-->
+
+<div class="col-sm-offset-3 col-sm-6 col-md-offset-3 col-md-6 col-lg-offset-4 col-lg-4">
+ <h3>Login</h3>
+
+ <form ng-submit="formSubmit()" class="form">
+ <div class="col-sm-12 col-md-12 col-lg-12">
+ <div class="form-group">
+ <input type="text" class="form-control" ng-model="user.username" placeholder="username" required=""/>
+ </div>
+
+ <div class="form-group">
+ <input type="password" class="form-control" ng-model="user.password" placeholder="password" required=""/>
+ </div>
+
+ <div class="form-group">
+ <button type="submit" class="btn btn-success">Login</button>
+ <span class="text-danger">{{ error }}</span>
+ </div>
+ <a ui-sref="register">Register</a>
+
+ </div>
+ </form>
+</div>
\ No newline at end of file diff --git a/common/src/main/webapp/usageguide/browser/templates/management.html b/common/src/main/webapp/usageguide/browser/templates/management.html new file mode 100644 index 00000000..59d8e587 --- /dev/null +++ b/common/src/main/webapp/usageguide/browser/templates/management.html @@ -0,0 +1,173 @@ +<!--
+
+ 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.
+
+-->
+
+<h4>{{message}}</h4>
+<br><br>
+<div id="provinceAction" ng-init="init()">
+ <!--<button ng-click="showAddModal()" class="btnDefault pull-left">Add</button>-->
+ <!--<button ng-click="deleteData()" class="btnDefault pull-left prvdel">Delete Selected</button>-->
+</div>
+<br>
+<br>
+<!--<table id="provinceTable" class="table table-bordered table-striped">
+ <tr>
+ <th class="chkboxAlign"><input type="checkbox" ng-model="selectAll" ng-click="checkAll()" /></th>
+ <th>Province Name</th>
+ <th>IP Address</th>
+ <th>Port</th>
+ <th></th>
+ </tr>
+ <tr ng-repeat="data in provinceData">
+ <td>
+ <input type="checkbox" ng-model="data.select"><!–ng-true-value="'data.id'" ng-false-value="''" ng-model="province.rows[$index]"–>
+ </td>
+ <td class="tableAlign">{{data.province_name}}</td>
+ <td class="tableAlign">{{data.ip}}</td>
+ <td class="tableAlign">{{data.port}}</td>
+ <td>
+ <span class="pull-right glyphicon glyphicon-edit" ng-click="editData(data.id)" style="cursor: pointer;margin: 0 5px"></span>
+ <span class="pull-right glyphicon glyphicon-trash" ng-click="editData(data.id)" style="cursor: pointer;margin: 0 5px"></span>
+ </td>
+ </tr>
+</table>-->
+
+<table ng-table="tableParams" class="table table-bordered table-striped customtable" show-filter="true">
+ <tr ng-repeat="provinceData in $data">
+ <td header="'ng-table/headers/checkbox.html'">
+ <input type="checkbox" ng-model="checkboxes.items[provinceData.id]" />
+ </td>
+ <td title="'Name'" filter="{ province_name: 'text'}" sortable="'province_name'">
+ {{provinceData.province_name}}
+ </td>
+ <td title="'IP Address'" filter="{ ip: 'text'}" sortable="'ip'">
+ {{provinceData.ip}}
+ </td>
+ <td title="'Port'" filter="{ port: 'number'}" sortable="'port'">
+ {{provinceData.port}}
+ </td>
+ <td title="'Action'">
+ <span ng-click="editData(provinceData.id)" style="cursor: pointer;margin: 0 5px"> <img src="thirdparty/images/edit.png" height="15" align="left"/></span>
+ <span ng-click="deleteIndividualData(provinceData.id)" style="cursor: pointer;margin: 0 5px"><img src="thirdparty/images/delete.png" height="15" align="middle"/></span>
+ </td>
+ </tr>
+</table>
+
+
+<script type="text/ng-template" id="ng-table/headers/checkbox.html">
+ <input type="checkbox" ng-model="checkboxes.checked" name="filter-checkbox" value="" />
+</script>
+
+<div id="myTable"></div>
+
+
+<!-- Modal
+<div id="myModal" class="modal fade" role="dialog">
+ <div class="modal-dialog">
+
+ <!– Modal content–>
+ <div class="modal-content">
+ <div class="modal-header">
+ <button type="button" class="close" data-dismiss="modal">×</button>
+ <h5 class="modal-title titlestyle">Modal Header</h5>
+ </div>
+ <form name="provinceForm" method="post"><!– ng-submit="saveData(province.id)"–>
+ <div class="modal-body">
+
+ <div class="form-group row">
+ <label class="col-xs-4 col-form-label labelstyle">Name</label>
+ <div class="col-xs-8 provinceName" >
+ <!–<input class="form-control" ng-model="province.province_name" type="text" value="" placeholder="Province Name" id="pname" required><br>–>
+ </div>
+ </div>
+ <div class="form-group row">
+ <label class="col-xs-4 col-form-label labelstyle">IP Address</label>
+ <div class="col-xs-8 ipAddress" >
+ <!–<input class="form-control" ng-model="province.ip" type="ipv4" pattern="((^|\.)((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9]?\d))){4}$" value="" placeholder="IP Address" id="ipaddress" required><br>–>
+ </div>
+ </div>
+ <div class="form-group row">
+ <label for="port" class="col-xs-4 col-form-label labelstyle">Port</label>
+ <div class="col-xs-8 port" >
+ <!–<input class="form-control" ng-model="province.port" type="number" value="" placeholder="Port" id="port" required>–>
+
+ </div>
+ </div>
+
+ <!–<input type="submit" class="btn btn-default" value="validate"/>–>
+
+ </div>
+
+ <div id="footerBtns" class="modal-footer">
+ <!–<button type="button" class="btn btn-default" ng-click="addData(province._id)" data-dismiss="modal" ng-disabled="provinceForm.$invalid">OK</button>–>
+ <!–<input type="submit" class="btn btn-default" value="Submit"/>–>
+ <!–<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>–>
+ </div>
+ </form>
+ </div>
+
+
+ </div>
+</div>-->
+<div id="managementDialog"></div>
+<div class="shortnote">
+ <div class="shortnoteHeader">Usage</div>
+ <div class="shortnoteText">Create a div tag in html file with specific id for example managementDialog and write a specific function in javascript file to perform your business logic. An sample example as shown below:</div>
+ <br>
+ <div class="shortnoteText">NOTE: Creation of Table and Buttons are explained in previous sections</div>
+ <br>
+ <div>HTML file:</div>
+ <pre><code><div id="provinceAction" ng-init="init()"></div></code></pre>
+ <pre><code><div id="managementDialog"></div></code></pre>
+ <br>
+ <div>Javascript file:</div>
+ <pre><code>
+
+ $scope.init = function() {
+ loadprv();
+ }
+
+ function loadprv() {
+ var dialog = $(modelTemplate).filter('#dialog').html();
+ var def_button_tpl = $(modelTemplate).filter('#defaultButtons').html();
+ $('#managementDialog').html($compile(dialog)($scope));
+ $('#managementDialog .modalHeader').html('<h5 class="modal-title titlestyle">Modal Header</h5>');
+ $('#managementDialog .modalBodyContent').html('<div class="form-group row"> <label class="col-xs-4 col-form-label labelstyle">Name</label> <div class="col-xs-8 provinceName" > </div> </div>');
+ var dataText = {"ErrMsg" : {"errmsg" : "Please input Name.", "modalVar":"province.province_name", "placeholder":"Name", "errtag":"ptextboxErr", "errfunc":"validatetextbox"}};
+ $('#managementDialog .provinceName').html($compile(Mustache.to_html(text, dataText.ErrMsg))($scope));
+ var modelSubmit_data = {"title":"OK", "clickAction":"saveData(province.id)"};
+ var modelSubmit_html = Mustache.to_html(def_button_tpl, modelSubmit_data);
+ $('#managementDialog #footerBtns').html($compile(modelSubmit_html)($scope));
+ var modelDelete_data = {"title":"Cancel", "clickAction":"closeModal()"};
+ var modelDelete_html = Mustache.to_html(def_button_tpl, modelDelete_data);
+ $('#managementDialog #footerBtns').append($compile(modelDelete_html)($scope));
+ $scope.validatetextbox = function (value){
+ if($scope.province.province_name) {
+ $scope.ptextboxErr = false;
+ }
+ else
+ $scope.ptextboxErr = true;
+ }
+ }
+ </code></pre>
+
+
+
+
+
+ </div>
+</div>
diff --git a/common/src/main/webapp/usageguide/browser/templates/notification.html b/common/src/main/webapp/usageguide/browser/templates/notification.html new file mode 100644 index 00000000..a4b9cee4 --- /dev/null +++ b/common/src/main/webapp/usageguide/browser/templates/notification.html @@ -0,0 +1,48 @@ +<!-- + + 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. + +--> + +<h4>{{message}}</h4> + +<div id="notificationArea" ng-init="init()"> + <button type="button" class="btn btnDefault btnmrg" ng-click="showError()">Error</button> + <button type="button" class="btn btnDefault btnmrg" ng-click="showWarning()">Warning</button> + <button type="button" class="btn btnDefault btnmrg" ng-click="showInfo()">Information</button> + <button type="button" class="btn btnDefault btnmrg" ng-click="showConfirm()">Confirm</button> + + <!-- <label class="labelstyle">Label</label>--> + + <div class="shortnote"> + <div class="shortnoteHeader">Usage</div> + <div class="shortnoteText">Create a button in html file and write a specific function in javascript file to perform your business logic. An sample example as shown below:</div> + <br> + <div>HTML file:</div> + <pre><code><button type="button" class="btn btn-default" ng-click="showError()">Create</button></code></pre> + <br> + <div>Javascript file:</div> + <pre><code> + var data = {"err_data" : {"title": "Error","showClose": "true","closeBtnTxt": "Ok","icon": "glyphicon glyphicon-exclamation-sign","iconColor": "icon_error","msg":"<<Please input your message here>>","buttons": []}}; + + $scope.showError = function() { + dialog_tpl = $(modelTemplate).filter('#personDialog').html(); + var html = Mustache.to_html(dialog_tpl, data.err_data); + $(html).modal({backdrop: "static"});//backdrop: "static" - for grayed out and no outside click work, backdrop: false - no grayed out*! + }</code></pre> + + </div> + </div> +</div> diff --git a/common/src/main/webapp/usageguide/browser/templates/radioButtons.html b/common/src/main/webapp/usageguide/browser/templates/radioButtons.html new file mode 100644 index 00000000..87477182 --- /dev/null +++ b/common/src/main/webapp/usageguide/browser/templates/radioButtons.html @@ -0,0 +1,58 @@ +<!--
+
+ 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.
+
+-->
+
+
+<h4>Radio Buttons</h4>
+
+<div id="radioBtnArea" ng-init="init()"></div>
+<div class="shortnote">
+ <div class="shortnoteHeader">Usage</div>
+ <div class="shortnoteText">Create a div tag in html file with specific id for example radioBtnArea and write a specific function in javascript file to perform your business logic. An sample example as shown below:</div>
+ <br>
+ <div>HTML file:</div>
+ <pre><code><div id="radioBtnArea" ng-init="init()"></div></code></pre>
+ <br>
+ <div>Javascript file:</div>
+ <pre><code>
+ var data ={"radio_btn_default_data" : {"id":1, "label":"Default Radio Btn"},"radio_btn_primary_data" : {"id":2, "label":"Primary Radio Btn"}};
+
+ $scope.init = function() {
+ loadRadioBtn();
+ }
+
+ function loadRadioBtn(){
+
+ var radio_button_tpl = $(modelTemplate).filter('#radioButtons').html();
+ var html = Mustache.to_html(radio_button_tpl, data.radio_btn_default_data);
+ $('#radioBtnArea').html(html);
+
+ var html = Mustache.to_html(radio_button_tpl, data.radio_btn_primary_data);
+ $('#radioBtnArea').append(html);
+
+
+ }</code></pre>
+
+
+
+
+
+
+</div>
+</div>
+
+
diff --git a/common/src/main/webapp/usageguide/browser/templates/register.html b/common/src/main/webapp/usageguide/browser/templates/register.html new file mode 100644 index 00000000..ff934267 --- /dev/null +++ b/common/src/main/webapp/usageguide/browser/templates/register.html @@ -0,0 +1,47 @@ +<!--
+
+ 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.
+
+-->
+
+<div class="col-sm-offset-3 col-sm-6 col-md-offset-3 col-md-6 col-lg-offset-4 col-lg-4">
+ <h3>Register</h3>
+
+ <form ng-submit="formSubmit()" class="form">
+ <div class="col-sm-12 col-md-12 col-lg-12">
+ <div class="form-group">
+ <input type="text" class="form-control" ng-model="user.username" placeholder="Username" required=""/>
+ </div>
+
+ <div class="form-group">
+ <input type="email" class="form-control" ng-model="user.email" placeholder="Email" required=""/>
+ </div>
+
+ <div class="form-group">
+ <input type="password" class="form-control" ng-model="user.password" placeholder="Password" required=""/>
+ </div>
+
+ <div class="form-group">
+ <input type="password" class="form-control" ng-model="user.confpassword" placeholder="Confirm password" required=""/>
+ </div>
+
+ <div class="form-group">
+ <button type="submit" class="btn btn-success">Register</button>
+ </div>
+ <a ui-sref="login">Login</a>
+
+ </div>
+ </form>
+</div>
\ No newline at end of file diff --git a/common/src/main/webapp/usageguide/browser/templates/table.html b/common/src/main/webapp/usageguide/browser/templates/table.html new file mode 100644 index 00000000..3daa2a57 --- /dev/null +++ b/common/src/main/webapp/usageguide/browser/templates/table.html @@ -0,0 +1,90 @@ +<!--
+
+ 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.
+
+-->
+
+<div class="container col-sm-12 col-md-12 col-lg-12">
+ <h4>{{message}}</h4>
+
+ <div id="tableArea" class="container col-sm-12 col-md-12 col-lg-12" ng-init="init()">
+
+ <h3 class="col-sm-12 col-md-12 col-lg-12">Basic Table<span> (with hover)</span></h3>
+ <div id="basictableArea" class="col-sm-12 col-md-12 col-lg-12"></div>
+
+ <h3 class="col-sm-12 col-md-12 col-lg-12">Stripped Table<span> (Condensed & with border)</span></h3>
+ <div id="strippedtableArea" class="col-sm-12 col-md-12 col-lg-12"></div>
+
+ <h3 class="col-sm-12 col-md-12 col-lg-12">Search Table</h3>
+ <div id="condensedtableArea" class="col-sm-12 col-md-12 col-lg-12">
+ <table ng-table="tableParams" class="table table-bordered table-striped customtable" show-filter="true">
+ <tr ng-repeat="siteData in $data">
+ <td title="'Country'" filter="{ countryName: 'text'}" sortable="'countryName'">
+ {{siteData.countryName}}
+ </td>
+ <td title="'Language'" filter="{ type: 'text'}" sortable="'type'">
+ {{siteData.language}}
+ </td>
+ </tr>
+ </table>
+ </div>
+ </div>
+ <div class="col-sm-12 col-md-12 col-lg-12 shortnote">
+ <div class="shortnoteHeader">Usage</div>
+ <div class="shortnoteText">Create a div tag in html file with specific id for example basictableArea,strippedtableArea,condensedtableArea and write a specific function in javascript file to perform your business logic. An sample example as shown below:</div>
+ <br>
+ <div>HTML file:</div>
+ <pre><code><div id="basictableArea"></div></code></pre>
+ <pre><code><div id="strippedtableArea"></div></code></pre>
+ <pre><code><div id="condensedtableArea"></div>
+ <table ng-table="tableParams" class="table table-bordered table-striped customtable" show-filter="true">
+ <tr ng-repeat="siteData in $data">
+ <td title="'Country'" filter="{ countryName: 'text'}" sortable="'countryName'">{ {siteData.countryName} }</td>
+ <td title="'Language'" filter="{ type: 'text'}" sortable="'type'">{ {siteData.language} }</td>
+ </tr>
+ </table></code></pre>
+ <br>
+ <div>Javascript file:</div>
+ <pre><code>
+
+ var data ={"basic_table_data": {"itemHeader": ["First Name", "Last Name", "Age"],"rowitem": [{"values": ["A", "B","1"]},{"values": ["C", "D", "2"]},{"values": ["E", "F", "3"]}],"striped": false,"border": false,"hover": true,"condensed": false,"filter": false,"action": "","searchField": ""},
+ "str_table_data": {"itemHeader": ["First Name","Last Name","Age"],"rowitem": [{"values": ["A","B","1"]},{"values": ["C","D","2"]},{"values": ["E","F","3"]}],"striped": true,"border": true,"hover": false,"condensed": true,"filter": false,"action": "","searchField": ""},"cond_table_data": [{
+ "countryName": "China","language": "Mandrain"},{"countryName": "India","language": "English"},{"countryName": "USA","language": "English"}]};
+
+
+ $scope.init = function() {
+ loadTableData();
+ }
+
+ function loadTableData() {
+
+ var table_tpl = $(modelTemplate).filter('#table').html();
+
+ var html = Mustache.to_html(table_tpl, data.basic_table_data);
+ $('#basictableArea').html(html);
+
+ var html = Mustache.to_html(table_tpl,data.str_table_data);
+ $('#strippedtableArea').html(html);
+
+ $scope.tableParams = new NgTableParams({
+ count: 5, sorting: {language: 'asc'}
+ }, {counts: [5, 10, 20, 50], dataset: data.cond_table_data});
+ }</code></pre>
+
+
+
+ </div>
+ </div>
+</div>
diff --git a/common/src/main/webapp/usageguide/browser/templates/tabs.html b/common/src/main/webapp/usageguide/browser/templates/tabs.html new file mode 100644 index 00000000..3b284713 --- /dev/null +++ b/common/src/main/webapp/usageguide/browser/templates/tabs.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.
+
+-->
+
+<div class="container col-sm-12 col-md-12 col-lg-12">
+ <h4>{{message}}</h4>
+ <div id="tabArea" ng-init="init()"></div>
+
+ <div class="col-sm-12 col-md-12 col-lg-12 shortnote">
+ <div class="shortnoteHeader">Usage</div>
+ <div class="shortnoteText">Create a div tag in html file with specific id for example tabArea and write a specific function in javascript file to perform your business logic. An sample example as shown below:</div>
+ <br>
+ <div>HTML file:</div>
+ <pre><code><div id="tabArea" ng-init="init()"></div></code></pre>
+ <br>
+ <div>Javascript file:</div>
+ <pre><code>
+ var data ={"tabData":{"items": [{"tablabel": "Why AngularJS?","isActive": true,"target": "tab1",
+ "msg": "HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop."};
+
+ $scope.init = function() {
+ loadTabData();
+ }
+
+ function loadTabData() {
+ var tab_tpl = $(modelTemplate).filter('#tabs').html();
+ var html = Mustache.to_html(tab_tpl, data.tabData);
+ $('#tabArea').html(html);
+ }</code></pre>
+
+
+
+
+
+
+
+ </div>
+ </div>
+</div>
\ No newline at end of file diff --git a/common/src/main/webapp/usageguide/browser/templates/textarea.html b/common/src/main/webapp/usageguide/browser/templates/textarea.html new file mode 100644 index 00000000..9d885e60 --- /dev/null +++ b/common/src/main/webapp/usageguide/browser/templates/textarea.html @@ -0,0 +1,150 @@ +<!--
+
+ 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.
+
+-->
+
+<h4>Text Area</h4>
+<body>
+<div name="myForm" method="post">
+ <div class="form-group row">
+ <label for="fname" class="col-xs-2 col-form-label labelstyle">Text</label>
+ <div class="col-xs-10">
+ <div id="fname"></div>
+
+ </div>
+ </div>
+
+ <div class="form-group row">
+ <label for="email" class="col-xs-2 col-form-label labelstyle">Email</label>
+ <div class="col-xs-10">
+ <div id="email" ></div>
+ </div>
+ </div>
+ <div class="form-group row">
+ <label for="url" class="col-xs-2 col-form-label labelstyle">URL</label>
+ <div class="col-xs-10">
+ <div id="url"></div>
+ </div>
+ </div>
+ <div class="form-group row">
+ <label for="password" class="col-xs-2 col-form-label labelstyle">Password</label>
+ <div class="col-xs-10">
+ <div id="password"></div>
+ </div>
+ </div>
+ <div class="form-group row">
+ <label for="numeric" class="col-xs-2 col-form-label labelstyle">Numeric</label>
+ <div class="col-xs-10">
+ <div id="numeric"></div>
+ </div>
+ </div>
+ <div class="form-group row">
+ <label for="dot" class="col-xs-2 col-form-label labelstyle">Date and time</label>
+ <div class="col-xs-10">
+ <div id="dot"></div>
+ </div>
+ </div>
+ <div class="form-group row">
+ <label for="dateinput" class="col-xs-2 col-form-label labelstyle">Date</label>
+ <div class="col-xs-10">
+ <div id="dateinput"></div>
+ </div>
+ </div>
+ <div class="form-group row">
+ <label for="monthinput" class="col-xs-2 col-form-label labelstyle">Month</label>
+ <div class="col-xs-10">
+ <div id="monthinput"></div>
+ </div>
+ </div>
+ <div class="form-group row">
+ <label for="weekinput" class="col-xs-2 col-form-label labelstyle">Week</label>
+ <div class="col-xs-10">
+ <div id="weekinput"></div>
+ </div>
+ </div>
+ <div class="form-group row">
+ <label for="timeinput" class="col-xs-2 col-form-label labelstyle">Time</label>
+ <div class="col-xs-10">
+ <div id="timeinput"></div>
+ </div>
+ </div>
+ <div class="form-group row">
+ <label for="ipv4" class="col-xs-2 col-form-label labelstyle">IPV4 Address</label>
+ <div class="col-xs-10">
+ <div id="ipv4"></div>
+ </div>
+ </div>
+ <div class="form-group row">
+ <label for="ipv6" class="col-xs-2 col-form-label labelstyle">IPV6 Address</label>
+ <div class="col-xs-10">
+ <div id="ipv6"></div>
+ </div>
+ </div>
+
+
+ <div class="form-group row">
+ <label for="textarea" class="col-xs-2 col-form-label labelstyle">Text Area</label>
+ <div class="col-xs-10">
+ <div id="textarea"></div>
+
+ </div>
+ </div>
+
+ <div class="form-group row">
+ <label for="note" class="col-xs-2 col-form-label labelstyle">Note</label>
+ <div class="col-xs-10">
+ <div id="note">
+ </div>
+
+ </div>
+ </div>
+
+</div>
+<div class="shortnote">
+ <div class="shortnoteHeader">Usage</div>
+ <div class="shortnoteText">Create a div tag in html file with specific id for example Email and write a specific function in javascript file to perform your business logic. An sample example as shown below for Email and Note, the same logic can be followed by all remaining text fields:</div>
+ <br>
+ <div>HTML file:</div>
+ <pre><code><div id="textArea" ng-init="init()"></div></code></pre>
+ <pre><code><div id="Email"></div></code></pre>
+ <pre><code><div id="note"></div></code></pre>
+ <br>
+ <div>Javascript file:</div>
+ <pre><code>
+ var data ={"Note" : {"message" : "Hi I am Note","placement" : "bottom"},"Email" : {"errmsg" : "The email is required.","placeholder" : "Email","modalVar":"email","errtag":"emailErr","errfunc":"validateemail"}};
+
+ $scope.init = function() {
+ loadTextArea();
+ }
+
+ function loadTextArea() {
+ var note = $(modelTemplate).filter('#note').html();
+ var email = $(modelTemplate).filter('#email').html();
+ var html = Mustache.to_html(email, data.Email);
+ $('#email').html($compile(html)($scope));
+ var html = Mustache.to_html(note, {"placement":data.Note.placement});
+ $('#note').html(html);
+ $("#noteanchor").popover({
+ template: '<div class="popover fade bottom in customPopover"><div class="arrow"></div>'+data.Note.message+'</div>'
+ });
+
+ }</code></pre>
+
+
+</div>
+</div>
+</body>
+
diff --git a/common/src/main/webapp/usageguide/browser/templates/tree.html b/common/src/main/webapp/usageguide/browser/templates/tree.html new file mode 100644 index 00000000..41a09b29 --- /dev/null +++ b/common/src/main/webapp/usageguide/browser/templates/tree.html @@ -0,0 +1,41 @@ +<!--
+
+ 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.
+
+-->
+
+<h4>{{message}}</h4>
+<div id="tree1" class="ztree" ng-init="init()"></div><!-- ng-if="treeLoaded()"-->
+
+<div class="shortnote">
+ <div class="shortnoteHeader">Usage</div>
+ <div class="shortnoteText">Create a div tag in html file with specific id for example tree1 and write a specific function in javascript file to perform your business logic. An sample example as shown below:</div>
+ <br>
+ <div>HTML file:</div>
+ <pre><code><div id="tree1" class="ztree" ng-init="init()"></div></code></pre>
+ <br>
+ <div>Javascript file:</div>
+ <pre><code>
+ var data = {"name": "Java and its divisions","open": true,"children": [{ "name": "Java Standard Edition, J2SE" },{ "name": "Java Enterprise Edition, J2EE" },{ "name": "Java Mobile Edition, J2ME"}]};
+ $scope.init = function() {
+ tree();
+ }
+ function tree() {
+ zNodes = data;
+ $.fn.zTree.init($("#tree1"), setting, zNodes);
+ }</code></pre>
+
+</div>
+</div>
diff --git a/common/src/main/webapp/usageguide/browser/templates/verticalTab.html b/common/src/main/webapp/usageguide/browser/templates/verticalTab.html new file mode 100644 index 00000000..784475b8 --- /dev/null +++ b/common/src/main/webapp/usageguide/browser/templates/verticalTab.html @@ -0,0 +1,47 @@ +<!--
+
+ 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.
+
+-->
+
+<div class="container col-sm-12 col-md-12 col-lg-12">
+ <h4>{{message}}</h4>
+
+ <div id="vtabArea" class="col-sm-12 col-md-12 col-lg-12" ng-init="init()"></div>
+
+ <div class="col-sm-12 col-md-12 col-lg-12 shortnote">
+ <div class="shortnoteHeader">Usage</div>
+ <div class="shortnoteText">Create a div tag in html file with specific id for example vtabArea and write a specific function in javascript file to perform your business logic. An sample example as shown below:</div>
+ <br>
+ <div>HTML file:</div>
+ <pre><code><div id="vtabArea" ng-init="init()"></div></code></pre>
+ <br>
+ <div>Javascript file:</div>
+ <pre><code>
+ var data= {"vtabData":{"items": [{"tablabel": "Why AngularJS?","isActive": true,"target": "tab1","msg": "HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop."};
+
+ $scope.init = function() {
+ loadvTabData();
+ }
+
+ function loadvTabData() {
+ var vtab_tpl = $(modelTemplate).filter('#vtabs').html();
+ var html = Mustache.to_html(vtab_tpl, data.vtabData);
+ $('#vtabArea').html(html);
+ }</code></pre>
+
+ </div>
+ </div>
+</div>
\ No newline at end of file |