rulemgt-frontend/src/assets/framework/browser/template.html

   1 <!--
   2
   3     Copyright 2016-2017, Huawei Technologies Co., Ltd.
   4
   5     Licensed under the Apache License, Version 2.0 (the "License");
   6     you may not use this file except in compliance with the License.
   7     You may obtain a copy of the License at
   8
   9             http://www.apache.org/licenses/LICENSE-2.0
  10
  11     Unless required by applicable law or agreed to in writing, software
  12     distributed under the License is distributed on an "AS IS" BASIS,
  13     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  14     See the License for the specific language governing permissions and
  15     limitations under the License.
  16
  17 -->
  18
  19 <script id="dialogTpl" type="text/html">
  20     <h3>{{name}}</h3> <div>Skills are:{{#skills}}<div>{{.}}</div>{{/skills}}</div></div>
  21 </script>
  22
  23 <script id="person" type="text/html">
  24     <ul>{{#depts}}<div><h4>{{fname}} {{lname}} </h4>{{Address}}</div>{{/depts}}</ul>
  25 </script>
  26
  27 <script id="user" type="text/html">
  28     <h3>{{name}}</h3><p>Address: {{address}}</p>
  29 </script>
  30
  31 <!--Dialog-->
  32 <script id="personDialog" type="text/html">
  33     <div id="msgModal" class="modal fade" role="dialog">
  34         <div class="modal-dialog modal-md">
  35
  36             <!-- Modal content-->
  37             <div class="modal-content">
  38                 <div class="modal-header">
  39                     <button type="button" class="close" data-dismiss="modal">&times;</button>
  40                     <h4 class="modal-title titlestyle">{{title}}</h4>
  41                 </div>
  42                 <div class="modal-body">
  43                     <div class="container center">
  44                         <div class="row">
  45                             <div class="col-xs-2 col-sm-2 col-md-1 col-lg-1 icon {{icon}} {{iconColor}}"></div>
  46                             <div class="msg col-xs-10 col-sm-10 col-md-11 col-lg-11" style="text-align:left;vertical-align: middle;">{{msg}}</div>
  47                         </div>
  48                     </div>
  49                 </div>
  50                 <div class="modal-footer">
  51                     <div>{{#buttons}} <button type="button" class="btn btn-primary outline" onclick={{action}}>{{text}}</button> {{/buttons}}
  52                         {{#showClose}}<button type="button" class="btn btn-primary outline" data-dismiss="modal">{{closeBtnTxt}}</button>{{/showClose}}
  53                     </div>
  54                     <!--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>-->
  55                 </div>
  56             </div>
  57
  58         </div>
  59     </div>
  60 </script>
  61
  62 <script id="functionalDialog" type="text/html">
  63     <div id="funModal" class="modal fade" role="dialog" ng-init="getDetail()">
  64         <div class="modal-dialog modal-md">
  65
  66             <!-- Modal content-->
  67             <div class="modal-content">
  68                 <div class="modal-header">
  69                     <button type="button" class="close" data-dismiss="modal">&times;</button>
  70                     <h4 class="modal-title titlestyle">{{title}}</h4>
  71                 </div>
  72                 <div class="modal-body">
  73                     <div>
  74                         <form class="form-horizontal" role="form">
  75                             {{#labels}}
  76                             <div class="form-group">
  77                                 <label class="control-label col-sm-3 labelstyle" for={{input_id}}>{{text}}</label>
  78                                 <div class="col-sm-7">
  79                                     <input type={{type}} class="form-control" id={{input_id}}>
  80                                 </div>
  81                             </div>
  82                             {{/labels}}
  83                         </form>
  84                     </div>
  85                 </div>
  86                 <div class="modal-footer">
  87                     <div>{{#buttons}} <button type="button" class="btn btn-primary outline" onclick={{action}}>{{text}}</button> {{/buttons}}
  88                         {{#showClose}}<button type="button" class="btn btn-primary outline" data-dismiss="modal">{{closeBtnTxt}}</button>{{/showClose}}
  89                     </div>
  90                     <!--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>-->
  91                 </div>
  92             </div>
  93
  94         </div>
  95     </div>
  96 </script>
  97
  98 <!-- Accordion -->
  99 <script id="accordion" type="text/html">
 100     {{#items}}
 101     <div class="panel panel-default">
 102         <h3 class="panel-title">
 103             <a data-toggle="collapse" data-parent="#accordion" data-target="#{{tabId}}">{{header}}</a>
 104         </h3>
 105         <div id="{{tabId}}" class="panel-collapse collapse {{#isActive}}in{{/isActive}}">
 106             <div class="panel-body"> {{msg}} </div>
 107         </div>
 108     </div>
 109     {{/items}}
 110 </script>
 111
 112 <!-- Default Buttons <button class="btnDefault" ng-click="{{clickAction}}">{{title}}</button>-->
 113 <script id="defaultButtons" type="text/html">
 114     <input type="button" class="btnDefault btnmrg" ng-click="{{clickAction}}" value="{{title}}"/>
 115 </script>
 116
 117 <script id="defaultIconButtons" type="text/html">
 118     <button id="iconBtn" type="button" class="btnDefault {{type}}">{{title}}
 119         <span class="glyphicon {{gType}} pull-{{iconPosition}}"></span>
 120     </button>
 121 </script>
 122
 123 <!-- Visual Buttons -->
 124 <script id="visualButtons" type="text/html">
 125     <button type="button" class="btn btn-{{type}}">{{title}}</button>
 126 </script>
 127
 128 <!-- Different sized Buttons -->
 129 <script id="sizeButtons" type="text/html">
 130     <button type="button" class="btn btn-{{type}} {{size}}">{{title}}</button>
 131 </script>
 132
 133 <!-- Icon Buttons -->
 134 <script id="iconButtons" type="text/html">
 135     <button type="button" class="btn btn-{{type}}">{{title}}
 136         <span class="glyphicon {{gType}}"></span>
 137     </button>
 138 </script>
 139
 140 <!--Radio Buttons-->
 141 <script id="radioButtons" type="text/html">
 142     <div>
 143         <input class="magic-radio" type="radio" name="radio" id="radio{{id}}"/>
 144         <label for="radio{{id}}">{{label}}</label></br>
 145     </div>
 146 </script>
 147
 148 <!--Check boxes template-->
 149 <script id="checkBoxes" type="text/html">
 150     <div class="funkyradio-{{type}}">
 151         <input type="checkbox" name="check" id="checkbox{{id}}" {{#checked}}checked{{/checked}} />
 152         <label for="checkbox{{id}}">{{label}}</label>
 153     </div>
 154 </script>
 155
 156 <!--Dropdown template-->
 157 <script id="dropDown" type="text/html">
 158     <div class="drop{{position}}">
 159         <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">{{title}}
 160             <span class="caret"></span>
 161         </button>
 162         <ul class="dropdown-menu">
 163             {{#items}}<li><a href="#">{{itemLabel}}</a></li>{{/items}}
 164         </ul>
 165     </div>
 166
 167 </script>
 168
 169 <script id="dropDownHeader" type="text/html">
 170     <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">{{title}}
 171         <span class="caret"></span>
 172     </button>
 173     <ul class="dropdown-menu">
 174         {{#items}}
 175         {{#isheader}}<li class="divider"></li><li class="dropdown-header">{{itemLabel}}</li><li class="divider"></li>{{/isheader}}
 176         {{^isheader}}<li><a href="#">{{itemLabel}}</a></li>{{/isheader}}
 177         {{/items}}
 178     </ul>
 179 </script>
 180
 181 <script id="simpleDropdownTmpl" type="text/html">
 182     <div class="dropdownplain">
 183         <ul class="nav navbar-nav">
 184             <li>
 185                 <a class="dropdown-toggle" data-toggle="dropdown">{{title}} <span class="glyphicon glyphicon-chevron-down pull-right"></span></a>
 186                 <ul class="dropdown-menu">
 187                     {{#items}}<li><a target="_blank">{{itemLabel}}</a></li>{{/items}}
 188                 </ul>
 189             </li>
 190         </ul>
 191     </div>
 192
 193
 194
 195 </script>
 196
 197 <!--Tabs-->
 198 <script id="tabs" type="text/html">
 199     <ul class="nav nav-tabs">
 200         {{#items}}<li {{#isActive}}class="active"{{/isActive}}><a data-toggle="tab" data-target="#{{target}}">{{tablabel}}</a></li>{{/items}}
 201     </ul>
 202     <div class="tab-content">
 203         {{#items}}
 204         <div id="{{target}}" class="tab-pane fade {{#isActive}}in active{{/isActive}}">
 205             <h3>{{tablabel}}</h3>
 206             <p>{{msg}}</p>
 207         </div>
 208         {{/items}}
 209     </div>
 210 </script>
 211
 212 <!--Vertical Tabs-->
 213 <script id="vtabs" type="text/html">
 214     <ul class="nav nav-stacked col-sm-4 col-md-4 col-lg-4">
 215         {{#items}}<li {{#isActive}}class="active"{{/isActive}}><a data-toggle="tab" data-target="#{{target}}">{{tablabel}}</a></li>{{/items}}
 216     </ul>
 217     <div class="tab-content col-sm-8 col-md-8 col-lg-8">
 218         {{#items}}
 219         <div id="{{target}}" class="tab-pane fade {{#isActive}}in active{{/isActive}}">
 220             <h3>{{tablabel}}</h3>
 221             <p>{{msg}}</p>
 222         </div>
 223         {{/items}}
 224     </div>
 225 </script>
 226
 227 <script id="table" type="text/html">
 228     {{#filter}}<input type="text" id="myInput" onkeyup="{{action}}" placeholder="Search for {{searchField}}">{{/filter}}
 229     <table id="myTable{{#filter}}_search{{/filter}}" class="table {{#striped}}table-striped{{/striped}} {{#border}}table-bordered{{/border}} {{#hover}}table-hover{{/hover}} {{#condensed}}table-condensed{{/condensed}}">
 230         <thead>
 231         <tr>
 232             {{#itemHeader}}<th>{{.}}</th>{{/itemHeader}}
 233         </tr>
 234         </thead>
 235         <tbody>
 236         {{#rowitem}}
 237         <tr>
 238             {{#values}}<td>{{.}}</td>{{/values}}
 239         </tr>
 240         {{/rowitem}}
 241         </tbody>
 242     </table>
 243 </script>
 244
 245 <!--text-->
 246 <script id="textfield" type="text/html">
 247     <div class="css-form">
 248         <input id ="textbox" name="textbox" class="form-control" placeholder="{{placeholder}}" ng-model="{{modalVar}}" type="text"  ng-blur="validatetextbox({{modalVar}})" required >
 249         <span class="errMsg" ng-show="textboxErr">{{textboxErr}}</span>
 250     </div>
 251 </script>
 252
 253 <!--email-->
 254 <script id="email" type="text/html">
 255     <div class="css-form">
 256         <input class="form-control" ng-model="email" type="email"  ng-blur="validateemail('email')" required>
 257         <span class="errMsg" ng-show="emailErr">{{emailErr}}</span>
 258     </div>
 259 </script>
 260
 261 <!--url-->
 262 <script  id="url" type="text/html">
 263     <div class="css-form">
 264         <input class="form-control" ng-model="url" type="url"  ng-blur="validateurl('url')" required>
 265         <span class="errMsg" ng-show="urlErr">{{urlErr}}</span>
 266     </div>
 267 </script>
 268
 269 <!--password-->
 270 <script  id="password" type="text/html">
 271     <div class="css-form">
 272         <input class="form-control" ng-model="password" type="password" pattern=".{3,}" maxlength="9" ng-blur="validatepassword('password')" required>
 273         <span class="errMsg" ng-show="passwordErr">{{passwordErr}}</span>
 274     </div>
 275 </script>
 276
 277 <!--numeric-->
 278 <script id="numeric" type="text/html">
 279     <div class="css-form">
 280         <input  class="form-control" placeholder="{{placeholder}}" ng-model="{{modalVar}}" type="number"  ng-blur="validatenumeric({{modalVar}})" required/>
 281         <span class="errMsg" ng-show="numericErr">{{numericErr}}</span>
 282     </div>
 283 </script>
 284
 285 <!--dot-->
 286 <script  id="dot" type="text/html">
 287     <div class="css-form">
 288         <input class="form-control" ng-model="datetime" type="datetime-local"  ng-blur="validatedot('dot')" required>
 289         <span class="errMsg" ng-show="dotErr">{{dotErr}}</span>
 290     </div>
 291 </script>
 292
 293 <!--date-->
 294 <script  id="dateinput" type="text/html">
 295     <div class="css-form">
 296         <input class="form-control" ng-model="date" type="date" ng-blur="validatedateinput('dateinput')" required>
 297         <span class="errMsg" ng-show="dateinputErr">{{dateinputErr}}</span>
 298     </div>
 299 </script>
 300
 301 <!--Month-->
 302 <script  id="monthinput" type="text/html">
 303     <div class="css-form">
 304         <input class="form-control"ng-model="month" type="month"  ng-blur="validatemonthinput('monthinput')" required>
 305         <span class="errMsg" ng-show="monthinputErr">{{monthinputErr}}</span>
 306     </div>
 307 </script>
 308
 309
 310 <!--Week-->
 311 <script   id="weekinput" type="text/html">
 312     <div class="css-form">
 313         <input class="form-control" ng-model="week" type="week"  ng-blur="validateweek('week')" required>
 314         <span class="errMsg" ng-show="weekinputErr">{{weekinputErr}}</span>
 315     </div>
 316 </script>
 317
 318 <!--time-->
 319 <script   id="timeinput" type="text/html">
 320     <div class="css-form">
 321         <input class="form-control" ng-model="time" type="time"  ng-blur="validatetime('time')" required>
 322         <span class="errMsg" ng-show="timeinputErr">{{timeinputErr}}</span>
 323     </div>
 324 </script>
 325
 326 <!--ipv4-->
 327 <script   id="ipv4" type="text/html">
 328     <div class="css-form">
 329         <input class="form-control" type="ipv4" placeholder="{{placeholder}}" ng-model="{{modalVar}}" pattern="((^|\.)((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9]?\d))){4}$"  ng-blur="validateipv4({{modalVar}})" required>
 330         <span class="errMsg" ng-show="ipv4Err">{{ipv4Err}}</span>
 331     </div>
 332 </script>
 333
 334 <!--ipv6-->
 335 <script   id="ipv6" type="text/html">
 336     <div class="css-form">
 337         <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>
 338         <span class="errMsg" ng-show="ipv6Err">{{ipv6Err}}</span>
 339     </div>
 340 </script>
 341
 342
 343 <!--textarea-->
 344 <script id="textarea" type="text/html">
 345     <div class="css-form">
 346         <textarea class="form-control"  ng-model="textarea" rows="4" cols="50"  ng-blur="validatetextarea('textarea')" required></textarea>
 347         <span class="errMsg" ng-show="textareaErr">{{textareaErr}}</span>
 348     </div>
 349 </script>
 350
 351
 352
 353 <!--note-->
 354
 355 <script id="note" type="text/html">
 356
 357     <a  id="noteanchor" href="#/home/textarea" title="Note" data-toggle="popover" data-trigger="focus" data-placement="{{placement}}">
 358         <span class="glyphicon glyphicon-info-sign "></span></a>
 359 </script>
 360
 361
 362
 363 <!-- Left Menu Accordion -->
 364 <!--
 365 <script id="menu_accordion" type="text/html">
 366     {{#items}}
 367     <div class="panel panel-default">
 368         <h3 class="panel-title">
 369             <a data-toggle="collapse" data-parent="#accordion" data-target="#{{tabId}}">{{header}}</a>
 370         </h3>
 371         <div id="{{tabId}}" class="panel-collapse collapse {{#isActive}}in{{/isActive}}">
 372             {{#subLinks}}<a ui-sref="{{state}}" ui-sref-active="link_active" style="padding-left: 62px;" onclick={{action}}>{{title}}</a>{{/subLinks}}
 373         </div>
 374     </div>
 375     {{/items}}
 376 </script>-->