From 1f5af8bd9f6ff43571c2dc9d78b90d387daa740d Mon Sep 17 00:00:00 2001
From: Roberto Sánchez <roberto.sanchez@curisit.net>
Date: Sun, 29 Dec 2013 14:39:08 +0000
Subject: [PATCH] #333 feature - Added synamic load for catalog forms
---
securis/src/main/resources/static/admin.html | 322 ++++++++++++++++++++++++++++++++++++-----------------
1 files changed, 217 insertions(+), 105 deletions(-)
diff --git a/securis/src/main/resources/static/admin.html b/securis/src/main/resources/static/admin.html
index 5973b56..fa8b84c 100644
--- a/securis/src/main/resources/static/admin.html
+++ b/securis/src/main/resources/static/admin.html
@@ -1,6 +1,8 @@
<!DOCTYPE html>
-<html class="no-js" lang="en" ng-app="app" xmlns:ng="http://angularjs.org">
+<html class="no-js" lang="en" ng-app="app"
+ xmlns:ng="http://angularjs.org">
<head>
+<base href="/">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
@@ -14,6 +16,30 @@
padding-top: 50px;
padding-bottom: 20px;
}
+a {
+ cursor: default !important;
+}
+.animate-show {
+ -webkit-transition: all linear 0.5s;
+ transition: all linear 0.5s;
+ opacity:1;
+}
+
+.animate-show.ng-hide-add,
+.animate-show.ng-hide-remove {
+ -webkit-transition: all linear 0.5s;
+ transition: all linear 0.5s;
+ display: block !important;
+}
+
+.animate-show.ng-hide {
+ opacity: 0;
+}
+
+input.ng-invalid-maxlength {
+ border: solid 1px red;
+}
+
</style>
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap-theme.min.css">
@@ -30,7 +56,7 @@
<div class="container">
<div class="navbar-header">
<ul class="nav navbar-nav navbar-left">
- <li style="color:white;padding-top:15px;">SeCuris</li>
+ <li style="color: white; padding-top: 15px;">SeCuris</li>
<li><a href="#licenses">Licenses</a></li>
<li><a href="#admin">Admin</a></li>
</ul>
@@ -44,115 +70,199 @@
</div>
</div>
- <div class="container">
- <div class="col-md-12">
-
- </div>
- <div class="col-md-2">
+ <div class="container" ng-controller="CatalogsCtrl">
+ <div class="col-md-12"> </div>
+ <div class="col-md-2">
-<ul class="nav nav-pills nav-stacked">
- <li class="active"><a href="#">Applications</a></li>
- <li><a href="#">License types</a></li>
- <li><a href="#">Users</a></li>
- <li><a href="#">Organizations</a></li>
- <li><a href="#">Params</a></li>
-</ul>
+ <ul class="nav nav-pills nav-stacked">
+ <li ng-repeat="catalog in catalogs.data" ng-class="{active: $index === catalogIndex}"><a ng-click="selectCatalog($index, $event)" ng-bind="catalog.name"></a></li>
+ </ul>
- </div>
- <div class="col-md-10">
- <nav class="navbar navbar-default navbar-static-top">
- <!-- Brand and toggle get grouped for better mobile display -->
- <div class="navbar-header">
- <a class="navbar-brand" href="#">Applications</a>
- </div>
-
- <!-- Collect the nav links, forms, and other content for toggling -->
- <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
- <ul class="nav navbar-nav">
- <li><a href="#"><span class="glyphicon glyphicon-plus"></span>
- New</a></li>
- <li><a href="#"><span class="glyphicon glyphicon-pencil"></span>
- Edit</a></li>
- <li><a href="#">
- <span class="glyphicon glyphicon-ban-circle"></span>
- Cancel</a></li>
- </ul>
- <form class="navbar-form navbar-right" role="search">
- <div class="form-group">
- <input type="text" class="form-control" placeholder="Search">
- </div>
- <button type="submit" class="btn btn-default">
- <span class="glyphicon glyphicon-search"></span>
-
- </button>
- </form>
- </div>
-</nav>
- <div class="panel panel-default">
- <form role="form" class="form-horizontal " name="licenseForm">
- <div class="form-group">
- <label class="col-md-3 control-label" for="username">Date</label>
- <div class="col-md-5">
- <input type="text" id="username" name="username" placeholder=""
- class="form-control" ng-model="username" required>
- </div>
+ </div>
+ <div class="col-md-10">
+ <div id="toolbarAndForm" ng-controller="CatalogFormCtrl">
+ <nav class="navbar navbar-default navbar-static-top">
+ <!-- Brand and toggle get grouped for better mobile display -->
+ <div class="navbar-header">
+ <a class="navbar-brand" ng-bind="catalogMetadata.name"></a>
</div>
- <div class="form-group">
- <!-- Password-->
- <label class="col-md-3 control-label" for="password">License</label>
- <div class="col-md-5">
- <input type="password" id="password" name="password"
- placeholder="" class="form-control" ng-model="password" required>
- </div>
+
+ <!-- Collect the nav links, forms, and other content for toggling -->
+ <div class="collapse navbar-collapse"
+ id="bs-example-navbar-collapse-1">
+ <ul class="nav navbar-nav">
+ <li><a ng-click="editNew()"><span class="glyphicon glyphicon-plus"></span>
+ New</a></li>
+ <li><a ng-click="edit()"><span class="glyphicon glyphicon-pencil"></span>
+ Edit</a></li>
+ <li><a ng-click="cancel()"> <span
+ class="glyphicon glyphicon-ban-circle"></span> Cancel
+ </a></li>
+ </ul>
+ <form class="navbar-form navbar-right" role="search">
+ <div class="form-group">
+ <input type="text" class="form-control" placeholder="Search">
+ </div>
+ <button type="submit" class="btn btn-default">
+ <span class="glyphicon glyphicon-search"></span>
+
+ </button>
+ </form>
</div>
- <div class="form-group">
- <div class="col-md-offset-3 col-md-10">
- <button type="submit" class="btn btn-primary">
- <span class="glyphicon glyphicon-floppy-disk"></span>
- Save</button>
- </div>
+ </nav>
+ <div class="panel panel-default animate-show ng-hide" ng-show="showForm">
+ <form role="form" class="form-horizontal " name="licenseForm">
+ <div class="form-group" ng-repeat="field in catalogMetadata.fields" ng-if="!isNew || !field.readOnly">
+ <label class="col-md-3 control-label" for="{{field.name}}">{{field.display}}</label>
+ <div class="col-md-5">
+ <input ng-if="!field.readOnly && !field.multiline" type="{{field.type}}" id="{{field.name}}" name="{{field.name}}" placeholder=""
+ class="form-control" ng-model="formu[field.name]" ng-required="field.mandatory" ng-maxlength="20" />
+ <textarea ng-if="!field.readOnly && field.multiline" type="{{field.type}}" id="{{field.name}}" name="{{field.name}}" placeholder=""
+ class="form-control" ng-model="formu[field.name]" rows="{{field.multiline}}" ng-required="field.mandatory" ng-maxlength="field.maxlength" ></textarea>
+ <p ng-if="field.readOnly" class="form-control-static">{{formu[field.name]}}</p>
+ </div>
+ </div>
+ <div class="form-group">
+ <div class="col-md-offset-3 col-md-10">
+ <button type="submit" class="btn btn-primary">
+ <span class="glyphicon glyphicon-floppy-disk"></span> Save
+ </button>
+ </div>
+ </div>
+ </form>
</div>
- </form>
- </div>
- <div class="panel panel-default">
- <div class="panel-heading">Licenses for pack <strong>BP-CICS-002</strong>
- <span class="badge pull-right" style="color:#ccffcc;">4</span>
- <span class="badge pull-right">15</span>
- </div>
-
- <table class="table table-hover table-condensed">
- <thead>
- <tr>
- <th>License</th>
- <th>Email</th>
- <th>Status</th>
- <th></th>
- </tr>
- </thead>
- <tbody>
- <tr><td>BP-CICS-0028HAHAHA UK</td><td>user1@bp.com</td><td class="success"><span class="glyphicon glyphicon-ok-circle"></span></td><td><span ng-click="editRow()" class="glyphicon glyphicon-pencil"></span></td></tr>
- <tr><td>BP-CICS-0029HAHAHA UK</td><td>user2@bp.com</td><td class="success"><span class="glyphicon glyphicon-ok-circle"></span></td><td><span class="glyphicon glyphicon-pencil"></span></td></tr>
- <tr><td>BP-CICS-0028HAHAHA UK</td><td>user3@bp.com</td><td class="danger"><span class="glyphicon glyphicon-warning-sign"></span></td><td><span class="glyphicon glyphicon-pencil"></span></td></tr>
- <tr><td>BP-CICS-0128HAHAHA UK</td><td>user4@bp.com</td><td class="danger"><span class="glyphicon glyphicon-warning-sign"></span></td><td><span class="glyphicon glyphicon-pencil"></span></td></tr>
- <tr><td>BP-CICS-00qqasddHA UK</td><td>user5@bp.com</td><td class="success"><span class="glyphicon glyphicon-ok-circle"></span></td><td><span class="glyphicon glyphicon-pencil"></span></td></tr>
- <tr><td>BP-CICS-0028HAaaHA UK</td><td>user6@bp.com</td><td class="warning"><span class="glyphicon glyphicon-question-sign"></span></td><td><span class="glyphicon glyphicon-pencil"></span></td></tr>
- <tr><td>BP-CICS-0028aaaaHA UK</td><td>user7@bp.com</td><td class="warning"><span class="glyphicon glyphicon-question-sign"></span></td><td><span class="glyphicon glyphicon-pencil"></span></td></tr>
- <tr><td>BP-CICS-0028HAHAHA UK</td><td>user8@bp.com</td><td class="success"><span class="glyphicon glyphicon-ok-circle"></span></td><td><span class="glyphicon glyphicon-pencil"></span></td></tr>
- <tr><td>BP-CICS-0028HAHAHA UK</td><td>user9@bp.com</td><td><span class="glyphicon glyphicon-ok-circle"></span></td><td><span class="glyphicon glyphicon-pencil"></span></td></tr>
- <tr><td>BP-CICS-0028HAHAHA UK</td><td>user0@bp.com</td><td><span class="glyphicon glyphicon-ok-circle"></span></td><td><span class="glyphicon glyphicon-pencil"></span></td></tr>
- <tr><td>BP-CICS-0028HAHAHA UK</td><td>user11@bp.com</td><td><span class="glyphicon glyphicon-ok-circle"></span></td><td><span class="glyphicon glyphicon-pencil"></span></td></tr>
- <tr><td>BP-CICS-0028HAHAHA UK</td><td>user12@bp.com</td><td><span class="glyphicon glyphicon-ok-circle"></span></td><td><span class="glyphicon glyphicon-pencil"></span></td></tr>
- <tr><td>BP-CICS-0028HAHAHA UK</td><td>user13@bp.com</td><td><span class="glyphicon glyphicon-ok-circle"></span></td><td><span class="glyphicon glyphicon-pencil"></span></td></tr>
- <tr><td>BP-CICS-0028HAHAHA UK</td><td>user14@bp.com</td><td><span class="glyphicon glyphicon-ok-circle"></span></td><td><span class="glyphicon glyphicon-pencil"></span></td></tr>
- <tr><td>BP-CICS-0028HAHAHA UK</td><td>user15@bp.com</td><td><span class="glyphicon glyphicon-ok-circle"></span></td><td><span class="glyphicon glyphicon-pencil"></span></td></tr>
- <tr><td>BP-CICS-0028HAHAHA UK</td><td>user16@bp.com</td><td><span class="glyphicon glyphicon-ok-circle"></span></td><td><span class="glyphicon glyphicon-pencil"></span></td></tr>
- </tbody>
- <tfoot>
- </tfoot>
- </table>
+ </div>
+
+ <div class="panel panel-default">
+ <div class="panel-heading">
+ Licenses for pack <strong>BP-CICS-002</strong> <span
+ class="badge pull-right" style="color: #ccffcc;">4</span> <span
+ class="badge pull-right">15</span>
+ </div>
+
+ <table class="table table-hover table-condensed">
+ <thead>
+ <tr>
+ <th>License</th>
+ <th>Email</th>
+ <th>Status</th>
+ <th></th>
+ </tr>
+ </thead>
+ <tbody>
+
+ <tr>
+ <td>BP-CICS-0028HAHAHA UK</td>
+ <td>user1@bp.com</td>
+ <td class="success"><span
+ class="glyphicon glyphicon-ok-circle"></span></td>
+ <td><span ng-click="editRow()"
+ class="glyphicon glyphicon-pencil"></span></td>
+ </tr>
+ <tr>
+ <td>BP-CICS-0029HAHAHA UK</td>
+ <td>user2@bp.com</td>
+ <td class="success"><span
+ class="glyphicon glyphicon-ok-circle"></span></td>
+ <td><span class="glyphicon glyphicon-pencil"></span></td>
+ </tr>
+ <tr>
+ <td>BP-CICS-0028HAHAHA UK</td>
+ <td>user3@bp.com</td>
+ <td class="danger"><span
+ class="glyphicon glyphicon-warning-sign"></span></td>
+ <td><span class="glyphicon glyphicon-pencil"></span></td>
+ </tr>
+ <tr>
+ <td>BP-CICS-0128HAHAHA UK</td>
+ <td>user4@bp.com</td>
+ <td class="danger"><span
+ class="glyphicon glyphicon-warning-sign"></span></td>
+ <td><span class="glyphicon glyphicon-pencil"></span></td>
+ </tr>
+ <tr>
+ <td>BP-CICS-00qqasddHA UK</td>
+ <td>user5@bp.com</td>
+ <td class="success"><span
+ class="glyphicon glyphicon-ok-circle"></span></td>
+ <td><span class="glyphicon glyphicon-pencil"></span></td>
+ </tr>
+ <tr>
+ <td>BP-CICS-0028HAaaHA UK</td>
+ <td>user6@bp.com</td>
+ <td class="warning"><span
+ class="glyphicon glyphicon-question-sign"></span></td>
+ <td><span class="glyphicon glyphicon-pencil"></span></td>
+ </tr>
+ <tr>
+ <td>BP-CICS-0028aaaaHA UK</td>
+ <td>user7@bp.com</td>
+ <td class="warning"><span
+ class="glyphicon glyphicon-question-sign"></span></td>
+ <td><span class="glyphicon glyphicon-pencil"></span></td>
+ </tr>
+ <tr>
+ <td>BP-CICS-0028HAHAHA UK</td>
+ <td>user8@bp.com</td>
+ <td class="success"><span
+ class="glyphicon glyphicon-ok-circle"></span></td>
+ <td><span class="glyphicon glyphicon-pencil"></span></td>
+ </tr>
+ <tr>
+ <td>BP-CICS-0028HAHAHA UK</td>
+ <td>user9@bp.com</td>
+ <td><span class="glyphicon glyphicon-ok-circle"></span></td>
+ <td><span class="glyphicon glyphicon-pencil"></span></td>
+ </tr>
+ <tr>
+ <td>BP-CICS-0028HAHAHA UK</td>
+ <td>user0@bp.com</td>
+ <td><span class="glyphicon glyphicon-ok-circle"></span></td>
+ <td><span class="glyphicon glyphicon-pencil"></span></td>
+ </tr>
+ <tr>
+ <td>BP-CICS-0028HAHAHA UK</td>
+ <td>user11@bp.com</td>
+ <td><span class="glyphicon glyphicon-ok-circle"></span></td>
+ <td><span class="glyphicon glyphicon-pencil"></span></td>
+ </tr>
+ <tr>
+ <td>BP-CICS-0028HAHAHA UK</td>
+ <td>user12@bp.com</td>
+ <td><span class="glyphicon glyphicon-ok-circle"></span></td>
+ <td><span class="glyphicon glyphicon-pencil"></span></td>
+ </tr>
+ <tr>
+ <td>BP-CICS-0028HAHAHA UK</td>
+ <td>user13@bp.com</td>
+ <td><span class="glyphicon glyphicon-ok-circle"></span></td>
+ <td><span class="glyphicon glyphicon-pencil"></span></td>
+ </tr>
+ <tr>
+ <td>BP-CICS-0028HAHAHA UK</td>
+ <td>user14@bp.com</td>
+ <td><span class="glyphicon glyphicon-ok-circle"></span></td>
+ <td><span class="glyphicon glyphicon-pencil"></span></td>
+ </tr>
+ <tr>
+ <td>BP-CICS-0028HAHAHA UK</td>
+ <td>user15@bp.com</td>
+ <td><span class="glyphicon glyphicon-ok-circle"></span></td>
+ <td><span class="glyphicon glyphicon-pencil"></span></td>
+ </tr>
+ <tr>
+ <td>BP-CICS-0028HAHAHA UK</td>
+ <td>user16@bp.com</td>
+ <td><span class="glyphicon glyphicon-ok-circle"></span></td>
+ <td><span class="glyphicon glyphicon-pencil"></span></td>
+ </tr>
+ </tbody>
+ <tfoot>
+ </tfoot>
+ </table>
+ </div>
</div>
- </div>
</div>
@@ -175,7 +285,9 @@
src="//code.angularjs.org/1.2.6/angular-route.js"></script>
<script type="text/javascript"
src="//code.angularjs.org/1.2.6/angular-resource.js"></script>
- <script type="text/javascript" src="js/login.js"></script>
+ <script type="text/javascript"
+ src="//code.angularjs.org/1.2.6/angular-animate.js"></script>
+ <script type="text/javascript" src="js/admin.js"></script>
<!-- <script src="js/main.js"></script> -->
<script type="text/javascript">
--
Gitblit v1.3.2