diff options
| author |   seshukm <seshu.kumar.m@huawei.com> | 2017-01-23 18:43:28 +0530 |
|---|---|---|
| committer | seshukm <seshu.kumar.m@huawei.com> | 2017-01-23 18:43:28 +0530 |
| commit | e641b1ab688e84034af7b5b434685076ad8323ab (patch) | |
| tree | 9a0bf061c507de9b13ea61e34aa82259103511aa /portal-common/src/main/webapp/framework/browser | |
| parent | fa26efc44630b0a0d1350d2f16120e75af67dbf6 (diff) | |
Templates for the UI framework
code for the UI framework container and index
Issue-Id : CLIENT-136
Change-Id: I959077c3de9e0681595a889da1bfa2072e0bd86b
Signed-off-by: seshukm <seshu.kumar.m@huawei.com>
Diffstat (limited to 'portal-common/src/main/webapp/framework/browser')
| -rw-r--r-- | portal-common/src/main/webapp/framework/browser/index.html | 52 | ||||
| -rw-r--r-- | portal-common/src/main/webapp/framework/browser/template.html | 351 |
2 files changed, 403 insertions, 0 deletions
diff --git a/portal-common/src/main/webapp/framework/browser/index.html b/portal-common/src/main/webapp/framework/browser/index.html new file mode 100644 index 00000000..889232ae --- /dev/null +++ b/portal-common/src/main/webapp/framework/browser/index.html @@ -0,0 +1,52 @@ +<!-- + + Copyright 2016-2017, Huawei Technologies Co., Ltd. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> + +<!DOCTYPE html> +<html> +<head lang="en"> + <meta charset="utf-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>POC</title> + <link href="css/bootstrap.min.css" rel="stylesheet"/> + <!--Pulling Awesome Font --> + <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> + + <link href="css/zTreeStyle.css" rel="stylesheet"/> + <link href="css/magic-check.css" rel="stylesheet"/> + <link rel="stylesheet"; href="https://unpkg.com/ng-table@2.0.2/bundles/ng-table.min.css"> + <link href="css/style.css" rel="stylesheet"/> + + <script src="js/angular.min.js"></script> + <script src="js/angular-ui-router.min.js"></script> + <script src="https://unpkg.com/ng-table@2.0.2/bundles/ng-table.min.js"></script> + <script src="js/jquery_1.12.4.min.js"></script> + <script type="text/javascript" src="js/bootstrap.min.js"></script> + <script src="js/app.js"></script> + <script src="js/DataService.js"></script> + <script src="js/mustache.js"></script> + <script src="js/tree.jquery.js"></script> + <script src="js/jquery.ztree.core-3.5.js"></script> + +</head> + +<body ng-app="POCApp" onload="loadTemplate()"> + +<ui-view></ui-view> +</body> +</html>
\ No newline at end of file diff --git a/portal-common/src/main/webapp/framework/browser/template.html b/portal-common/src/main/webapp/framework/browser/template.html new file mode 100644 index 00000000..d54f2010 --- /dev/null +++ b/portal-common/src/main/webapp/framework/browser/template.html @@ -0,0 +1,351 @@ +<!--
+
+ Copyright 2016-2017, Huawei Technologies Co., Ltd.
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+
+<script id="dialogTpl" type="text/html">
+ <h3>{{name}}</h3> <div>Skills are:{{#skills}}<div>{{.}}</div>{{/skills}}</div></div>
+</script>
+
+<script id="person" type="text/html">
+ <ul>{{#depts}}<div><h4>{{fname}} {{lname}} </h4>{{Address}}</div>{{/depts}}</ul>
+</script>
+
+<script id="user" type="text/html">
+ <h3>{{name}}</h3><p>Address: {{address}}</p>
+</script>
+
+<!--Dialog-->
+<script id="personDialog" type="text/html">
+ <div id="msgModal" class="modal fade" role="dialog">
+ <div class="modal-dialog modal-md">
+
+ <!-- Modal content-->
+ <div class="modal-content">
+ <div class="modal-header">
+ <button type="button" class="close" data-dismiss="modal">×</button>
+ <h4 class="modal-title">{{title}}</h4>
+ </div>
+ <div class="modal-body">
+ <div class="container center">
+ <div class="row">
+ <div class="col-xs-2 col-sm-2 col-md-1 col-lg-1 icon {{icon}} {{iconColor}}"></div>
+ <div class="msg col-xs-10 col-sm-10 col-md-11 col-lg-11" style="text-align:left;vertical-align: middle;">{{msg}}</div>
+ </div>
+ </div>
+ </div>
+ <div class="modal-footer">
+ <div>{{#buttons}} <button type="button" class="btn btn-primary outline" onclick={{action}}>{{text}}</button> {{/buttons}}
+ {{#showClose}}<button type="button" class="btn btn-primary outline" data-dismiss="modal">{{closeBtnTxt}}</button>{{/showClose}}
+ </div>
+ <!--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>-->
+ </div>
+ </div>
+
+ </div>
+ </div>
+</script>
+
+<script id="functionalDialog" type="text/html">
+ <div id="funModal" class="modal fade" role="dialog" ng-init="getDetail()">
+ <div class="modal-dialog modal-md">
+
+ <!-- Modal content-->
+ <div class="modal-content">
+ <div class="modal-header">
+ <button type="button" class="close" data-dismiss="modal">×</button>
+ <h4 class="modal-title">{{title}}</h4>
+ </div>
+ <div class="modal-body">
+ <div>
+ <form class="form-horizontal" role="form">
+ {{#labels}}
+ <div class="form-group">
+ <label class="control-label col-sm-3" for={{input_id}}>{{text}}</label>
+ <div class="col-sm-7">
+ <input type={{type}} class="form-control" id={{input_id}}>
+ </div>
+ </div>
+ {{/labels}}
+ </form>
+ </div>
+ </div>
+ <div class="modal-footer">
+ <div>{{#buttons}} <button type="button" class="btn btn-primary outline" onclick={{action}}>{{text}}</button> {{/buttons}}
+ {{#showClose}}<button type="button" class="btn btn-primary outline" data-dismiss="modal">{{closeBtnTxt}}</button>{{/showClose}}
+ </div>
+ <!--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>-->
+ </div>
+ </div>
+
+ </div>
+ </div>
+</script>
+
+<!-- Accordion -->
+<script id="accordion" type="text/html">
+ {{#items}}
+ <div class="panel panel-default">
+ <h3 class="panel-title">
+ <a data-toggle="collapse" data-parent="#accordion" data-target="#{{tabId}}">{{header}}</a>
+ </h3>
+ <div id="{{tabId}}" class="panel-collapse collapse {{#isActive}}in{{/isActive}}">
+ <div class="panel-body"> {{msg}} </div>
+ </div>
+ </div>
+ {{/items}}
+</script>
+
+<!-- Default Buttons <button class="btnDefault" ng-click="{{clickAction}}">{{title}}</button>-->
+<script id="defaultButtons" type="text/html">
+ <input type="button" class="btnDefault" ng-click="{{clickAction}}" value="{{title}}"/>
+</script>
+
+<script id="defaultIconButtons" type="text/html">
+ <button id="iconBtn" type="button" class="btnDefault {{type}}">{{title}}
+ <span class="glyphicon {{gType}} pull-{{iconPosition}}"></span>
+ </button>
+</script>
+
+<!-- Visual Buttons -->
+<script id="visualButtons" type="text/html">
+ <button type="button" class="btn btn-{{type}}">{{title}}</button>
+</script>
+
+<!-- Different sized Buttons -->
+<script id="sizeButtons" type="text/html">
+ <button type="button" class="btn btn-{{type}} {{size}}">{{title}}</button>
+</script>
+
+<!-- Icon Buttons -->
+<script id="iconButtons" type="text/html">
+ <button type="button" class="btn btn-{{type}}">{{title}}
+ <span class="glyphicon {{gType}}"></span>
+ </button>
+</script>
+
+<!--Radio Buttons-->
+<script id="radioButtons" type="text/html">
+ <div>
+ <input class="magic-radio" type="radio" name="radio" id="radio{{id}}"/>
+ <label for="radio{{id}}">{{label}}</label></br>
+ </div>
+</script>
+
+<!--Check boxes template-->
+<script id="checkBoxes" type="text/html">
+ <div class="funkyradio-{{type}}">
+ <input type="checkbox" name="check" id="checkbox{{id}}" {{#checked}}checked{{/checked}} />
+ <label for="checkbox{{id}}">{{label}}</label>
+ </div>
+</script>
+
+<!--Dropdown template-->
+<script id="dropDown" type="text/html">
+ <div class="drop{{position}}">
+ <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">{{title}}
+ <span class="caret"></span>
+ </button>
+ <ul class="dropdown-menu">
+ {{#items}}<li><a href="#">{{itemLabel}}</a></li>{{/items}}
+ </ul>
+ </div>
+
+</script>
+
+<script id="dropDownHeader" type="text/html">
+ <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">{{title}}
+ <span class="caret"></span>
+ </button>
+ <ul class="dropdown-menu">
+ {{#items}}
+ {{#isheader}}<li class="divider"></li><li class="dropdown-header">{{itemLabel}}</li><li class="divider"></li>{{/isheader}}
+ {{^isheader}}<li><a href="#">{{itemLabel}}</a></li>{{/isheader}}
+ {{/items}}
+ </ul>
+</script>
+
+<script id="simpleDropdownTmpl" type="text/html">
+ <div class="dropdownplain">
+ <ul class="nav navbar-nav">
+ <li>
+ <a class="dropdown-toggle" data-toggle="dropdown">{{title}} <span class="glyphicon glyphicon-chevron-down pull-right"></span></a>
+ <ul class="dropdown-menu">
+ {{#items}}<li><a target="_blank">{{itemLabel}}</a></li>{{/items}}
+ </ul>
+ </li>
+ </ul>
+ </div>
+
+
+
+</script>
+
+<!--Tabs-->
+<script id="tabs" type="text/html">
+ <ul class="nav nav-tabs">
+ {{#items}}<li {{#isActive}}class="active"{{/isActive}}><a data-toggle="tab" data-target="#{{target}}">{{tablabel}}</a></li>{{/items}}
+ </ul>
+ <div class="tab-content">
+ {{#items}}
+ <div id="{{target}}" class="tab-pane fade {{#isActive}}in active{{/isActive}}">
+ <h3>{{tablabel}}</h3>
+ <p>{{msg}}</p>
+ </div>
+ {{/items}}
+ </div>
+</script>
+
+<!--Vertical Tabs-->
+<script id="vtabs" type="text/html">
+ <ul class="nav nav-stacked col-sm-4 col-md-4 col-lg-4">
+ {{#items}}<li {{#isActive}}class="active"{{/isActive}}><a data-toggle="tab" data-target="#{{target}}">{{tablabel}}</a></li>{{/items}}
+ </ul>
+ <div class="tab-content col-sm-8 col-md-8 col-lg-8">
+ {{#items}}
+ <div id="{{target}}" class="tab-pane fade {{#isActive}}in active{{/isActive}}">
+ <h3>{{tablabel}}</h3>
+ <p>{{msg}}</p>
+ </div>
+ {{/items}}
+ </div>
+</script>
+
+<script id="table" type="text/html">
+ {{#filter}}<input type="text" id="myInput" onkeyup="{{action}}" placeholder="Search for {{searchField}}">{{/filter}}
+ <table id="myTable{{#filter}}_search{{/filter}}" class="table {{#striped}}table-striped{{/striped}} {{#border}}table-bordered{{/border}} {{#hover}}table-hover{{/hover}} {{#condensed}}table-condensed{{/condensed}}">
+ <thead>
+ <tr>
+ {{#itemHeader}}<th>{{.}}</th>{{/itemHeader}}
+ </tr>
+ </thead>
+ <tbody>
+ {{#rowitem}}
+ <tr>
+ {{#values}}<td>{{.}}</td>{{/values}}
+ </tr>
+ {{/rowitem}}
+ </tbody>
+ </table>
+</script>
+
+<!--text-->
+<script id="fname" type="text/html">
+ <input id ="textbox" name="textbox" class="form-control" ng-model="textbox" type="text" ng-blur="validatetextbox('textbox')" required >
+ <span class="errMsg" ng-show="textboxErr">{{textboxErr}}</span>
+
+</script>
+
+<!--email-->
+<script id="email" type="text/html">
+ <input class="form-control" ng-model="email" type="email" ng-blur="validateemail('email')" required>
+ <span class="errMsg" ng-show="emailErr">{{emailErr}}</span>
+</script>
+
+<!--url-->
+<script id="url" type="text/html">
+ <input class="form-control" ng-model="url" type="url" ng-blur="validateurl('url')" required>
+ <span class="errMsg" ng-show="urlErr">{{urlErr}}</span>
+</script>
+
+<!--password-->
+<script id="password" type="text/html">
+ <input class="form-control" ng-model="password" type="password" pattern=".{3,}" maxlength="9" ng-blur="validatepassword('password')" required>
+ <span class="errMsg" ng-show="passwordErr">{{passwordErr}}</span>
+</script>
+
+<!--numeric-->
+<script id="numeric" type="text/html">
+ <input class="form-control" ng-model="number" type="number" ng-blur="validatenumeric('numeric')" required/>
+ <span class="errMsg" ng-show="numericErr">{{numericErr}}</span>
+</script>
+
+<!--dot-->
+<script id="dot" type="text/html">
+ <input class="form-control" ng-model="datetime" type="datetime-local" ng-blur="validatedot('dot')" required>
+ <span class="errMsg" ng-show="dotErr">{{dotErr}}</span>
+</script>
+
+<!--date-->
+<script id="dateinput" type="text/html">
+ <input class="form-control" ng-model="date" type="date" ng-blur="validatedateinput('dateinput')" required>
+ <span class="errMsg" ng-show="dateinputErr">{{dateinputErr}}</span>
+</script>
+
+<!--Month-->
+<script id="monthinput" type="text/html">
+ <input class="form-control"ng-model="month" type="month" ng-blur="validatemonthinput('monthinput')" required>
+ <span class="errMsg" ng-show="monthinputErr">{{monthinputErr}}</span>
+</script>
+
+
+<!--Week-->
+<script id="weekinput" type="text/html">
+ <input class="form-control" ng-model="week" type="week" ng-blur="validateweek('week')" required>
+ <span class="errMsg" ng-show="weekinputErr">{{weekinputErr}}</span>
+</script>
+
+<!--time-->
+<script id="timeinput" type="text/html">
+ <input class="form-control" ng-model="time" type="time" ng-blur="validatetime('time')" required>
+ <span class="errMsg" ng-show="timeinputErr">{{timeinputErr}}</span>
+</script>
+
+<!--ipv4-->
+<script id="ipv4" type="text/html">
+ <input class="form-control" ng-model="ipv4" type="ipv4" pattern="((^|\.)((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9]?\d))){4}$" ng-blur="validateipv4('ipv4')" required>
+ <span class="errMsg" ng-show="ipv4Err">{{ipv4Err}}</span>
+</script>
+
+<!--ipv6-->
+<script id="ipv6" type="text/html">
+ <input class="form-control" ng-model="ipv6" type="ipv6" pattern="^([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])" ng-blur="validateipv6('ipv6')" required>
+ <span class="errMsg" ng-show="ipv6Err">{{ipv6Err}}</span>
+</script>
+
+
+<!--textarea-->
+<script id="textarea" type="text/html">
+ <textarea class="form-control" ng-model="textarea" rows="4" cols="50" ng-blur="validatetextarea('textarea')" required></textarea>
+ <span class="errMsg" ng-show="textareaErr">{{textareaErr}}</span>
+</script>
+
+
+
+<!--note-->
+
+<script id="note" type="text/html">
+
+ <a id="noteanchor" href="#/home/tooltip" title="Note" data-toggle="popover" data-trigger="focus" data-placement="{{placement}}">
+ <span class="glyphicon glyphicon-info-sign "></span></a>
+</script>
+
+
+
+<!-- Left Menu Accordion -->
+<!--
+<script id="menu_accordion" type="text/html">
+ {{#items}}
+ <div class="panel panel-default">
+ <h3 class="panel-title">
+ <a data-toggle="collapse" data-parent="#accordion" data-target="#{{tabId}}">{{header}}</a>
+ </h3>
+ <div id="{{tabId}}" class="panel-collapse collapse {{#isActive}}in{{/isActive}}">
+ {{#subLinks}}<a ui-sref="{{state}}" ui-sref-active="link_active" style="padding-left: 62px;" onclick={{action}}>{{title}}</a>{{/subLinks}}
+ </div>
+ </div>
+ {{/items}}
+</script>-->
|