summaryrefslogtreecommitdiffstats
path: root/common
diff options
context:
space:
mode:
authorSeshu-Kumar-M <seshu.kumar.m@huawei.com>2017-02-02 10:29:38 +0530
committerSeshu-Kumar-M <seshu.kumar.m@huawei.com>2017-02-02 10:29:38 +0530
commitd80f661757a86abdb2a4fec137cc34aed6250e17 (patch)
treef0e3c9835a544c905daa0fbc283a6076a47946cc /common
parentf007ba7e023147e97d3032bafb86bc278477e4d3 (diff)
OPEN-O GUI Framework for container
sample code of OPEN-O GUI Framework for container. Issue-Id : CLIENT-128 Change-Id: I9fe1bd1546aad06a5c2846913f0b2aeb36c386dd Signed-off-by: Seshu-Kumar-M <seshu.kumar.m@huawei.com>
Diffstat (limited to 'common')
-rw-r--r--common/src/main/webapp/usage guide/browser/templates/home.html154
-rw-r--r--common/src/main/webapp/usage guide/browser/templates/list.html47
-rw-r--r--common/src/main/webapp/usage guide/browser/templates/login.html40
-rw-r--r--common/src/main/webapp/usage guide/browser/templates/management.html130
-rw-r--r--common/src/main/webapp/usage guide/browser/templates/notification.html30
-rw-r--r--common/src/main/webapp/usage guide/browser/templates/radioButtons.html28
-rw-r--r--common/src/main/webapp/usage guide/browser/templates/register.html47
-rw-r--r--common/src/main/webapp/usage guide/browser/templates/table.html48
-rw-r--r--common/src/main/webapp/usage guide/browser/templates/tabs.html27
-rw-r--r--common/src/main/webapp/usage guide/browser/templates/textarea.html121
-rw-r--r--common/src/main/webapp/usage guide/browser/templates/tree.html25
11 files changed, 697 insertions, 0 deletions
diff --git a/common/src/main/webapp/usage guide/browser/templates/home.html b/common/src/main/webapp/usage guide/browser/templates/home.html
new file mode 100644
index 00000000..796c82e1
--- /dev/null
+++ b/common/src/main/webapp/usage guide/browser/templates/home.html
@@ -0,0 +1,154 @@
+<!--
+
+ 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">Accordian</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 ui-sref=".notification" ui-sref-active="noChid_link_active">Notification & Messages</a>
+ </h5>
+ </div>
+ <div id="functional" class="panel panel-default panelbr">
+ <h5 class="panel-title">
+
+ <a ui-sref=".functional" ui-sref-active="noChid_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">
+ &lt;!&ndash;<span class="openo_accordion_ui-icon-expand" style="padding-left: 20px;cursor: pointer;"></span>&ndash;&gt;
+ <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/usage guide/browser/templates/list.html b/common/src/main/webapp/usage guide/browser/templates/list.html
new file mode 100644
index 00000000..1051a6ac
--- /dev/null
+++ b/common/src/main/webapp/usage guide/browser/templates/list.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="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">{{listTipData}}</div>
+ </div>
+</div>
+
diff --git a/common/src/main/webapp/usage guide/browser/templates/login.html b/common/src/main/webapp/usage guide/browser/templates/login.html
new file mode 100644
index 00000000..026b670d
--- /dev/null
+++ b/common/src/main/webapp/usage guide/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/usage guide/browser/templates/management.html b/common/src/main/webapp/usage guide/browser/templates/management.html
new file mode 100644
index 00000000..5afca760
--- /dev/null
+++ b/common/src/main/webapp/usage guide/browser/templates/management.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>{{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">&lt;!&ndash;ng-true-value="'data.id'" ng-false-value="''" ng-model="province.rows[$index]"&ndash;&gt;
+ </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 class="pull-right glyphicon glyphicon-edit" ng-click="editData(provinceData.id)" style="cursor: pointer;margin: 0 5px"></span>
+ <span class="pull-right glyphicon glyphicon-trash" ng-click="deleteIndividualData(provinceData.id)" style="cursor: pointer;margin: 0 5px"></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">&times;</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 class="shortnote">
+ <div class="shortnoteHeader">Usage</div>
+ <div class="shortnoteText"> {{provinceTipData}}</div>
+</div>
diff --git a/common/src/main/webapp/usage guide/browser/templates/notification.html b/common/src/main/webapp/usage guide/browser/templates/notification.html
new file mode 100644
index 00000000..86d640ca
--- /dev/null
+++ b/common/src/main/webapp/usage guide/browser/templates/notification.html
@@ -0,0 +1,30 @@
+<!--
+
+ 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 btn-default" ng-click="showError()">Error</button>
+ <button type="button" class="btn btn-default" ng-click="showWarning()">Warning</button>
+ <button type="button" class="btn btn-default" ng-click="showInfo()">Information</button>
+ <button type="button" class="btn btn-default" ng-click="showConfirm()">Confirm</button>
+ <div class="shortnote">
+ <div class="shortnoteHeader">Usage</div>
+ <div class="shortnoteText">{{notificationTipData}}</div>
+ </div>
+</div>
diff --git a/common/src/main/webapp/usage guide/browser/templates/radioButtons.html b/common/src/main/webapp/usage guide/browser/templates/radioButtons.html
new file mode 100644
index 00000000..d0ae5331
--- /dev/null
+++ b/common/src/main/webapp/usage guide/browser/templates/radioButtons.html
@@ -0,0 +1,28 @@
+<!--
+
+ 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">{{radioTipData}}</div>
+</div>
+
+
diff --git a/common/src/main/webapp/usage guide/browser/templates/register.html b/common/src/main/webapp/usage guide/browser/templates/register.html
new file mode 100644
index 00000000..ff934267
--- /dev/null
+++ b/common/src/main/webapp/usage guide/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/usage guide/browser/templates/table.html b/common/src/main/webapp/usage guide/browser/templates/table.html
new file mode 100644
index 00000000..592b66d5
--- /dev/null
+++ b/common/src/main/webapp/usage guide/browser/templates/table.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.
+
+-->
+
+<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">{{tableTipData}}</div>
+ </div>
+</div>
diff --git a/common/src/main/webapp/usage guide/browser/templates/tabs.html b/common/src/main/webapp/usage guide/browser/templates/tabs.html
new file mode 100644
index 00000000..1be3b968
--- /dev/null
+++ b/common/src/main/webapp/usage guide/browser/templates/tabs.html
@@ -0,0 +1,27 @@
+<!--
+
+ 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">{{tabTipData}}</div>
+ </div>
+</div> \ No newline at end of file
diff --git a/common/src/main/webapp/usage guide/browser/templates/textarea.html b/common/src/main/webapp/usage guide/browser/templates/textarea.html
new file mode 100644
index 00000000..b305b275
--- /dev/null
+++ b/common/src/main/webapp/usage guide/browser/templates/textarea.html
@@ -0,0 +1,121 @@
+<!--
+
+ 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">{{toolTipData}}</div>
+</div>
+</body>
+
diff --git a/common/src/main/webapp/usage guide/browser/templates/tree.html b/common/src/main/webapp/usage guide/browser/templates/tree.html
new file mode 100644
index 00000000..fd2e8579
--- /dev/null
+++ b/common/src/main/webapp/usage guide/browser/templates/tree.html
@@ -0,0 +1,25 @@
+<!--
+
+ 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">{{treeTip}}</div>
+</div>