parent: d9ba9039 | patch | commit
Roberto Sánchez
2013-12-29 1f5af8bd9f6ff43571c2dc9d78b90d387daa740d 
#333 feature - Added synamic load for catalog forms
3 files added
1 files modified
changed files
securis/src/main/resources/static/admin.html patch | view | blame | history
securis/src/main/resources/static/js/admin.js patch | view | blame | history
securis/src/main/resources/static/js/catalogs.json patch | view | blame | history
securis/src/main/resources/static/server.js patch | view | blame | history 
 securis/src/main/resources/static/admin.html
....@@ -1,6 +1,8 @@
11 <!DOCTYPE html>
2
-<html class="no-js" lang="en" ng-app="app" xmlns:ng="http://angularjs.org">
2
+<html class="no-js" lang="en" ng-app="app"
3
+	xmlns:ng="http://angularjs.org">
34 <head>
5
+<base href="/">
46 <meta charset="utf-8">
57 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
68 <title></title>
....@@ -14,6 +16,30 @@
1416 	padding-top: 50px;
1517 	padding-bottom: 20px;
1618 }
19
+a {
20
+	cursor: default !important;
21
+}
22
+.animate-show {
23
+  -webkit-transition: all linear 0.5s;
24
+  transition: all linear 0.5s;
25
+  opacity:1;
26
+}
27
+ 
28
+.animate-show.ng-hide-add,
29
+.animate-show.ng-hide-remove {
30
+  -webkit-transition: all linear 0.5s;
31
+  transition: all linear 0.5s;
32
+  display: block !important;
33
+}
34
+ 
35
+.animate-show.ng-hide {
36
+  opacity: 0;
37
+}
38
+
39
+input.ng-invalid-maxlength {
40
+	border: solid 1px red;
41
+}
42
+
1743 </style>
1844 <link rel="stylesheet"
1945 	href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap-theme.min.css">
....@@ -30,7 +56,7 @@
3056 		<div class="container">
3157 			<div class="navbar-header">
3258 				<ul class="nav navbar-nav navbar-left">
33
-					<li style="color:white;padding-top:15px;">SeCuris</li>
59
+					<li style="color: white; padding-top: 15px;">SeCuris</li>
3460 					<li><a href="#licenses">Licenses</a></li>
3561 					<li><a href="#admin">Admin</a></li>
3662 				</ul>
....@@ -44,115 +70,199 @@
4470 		</div>
4571 	</div>
4672 
47
-	<div class="container">
48
-	<div class="col-md-12">
49
-		&nbsp;
50
-	</div>
51
-	<div class="col-md-2">
73
+	<div class="container" ng-controller="CatalogsCtrl">
74
+		<div class="col-md-12">&nbsp;</div>
75
+		<div class="col-md-2">
5276 
53
-<ul class="nav nav-pills nav-stacked">
54
-	<li class="active"><a href="#">Applications</a></li>
55
-	<li><a href="#">License types</a></li>
56
-	<li><a href="#">Users</a></li>
57
-	<li><a href="#">Organizations</a></li>
58
-	<li><a href="#">Params</a></li>
59
-</ul>
77
+			<ul class="nav nav-pills nav-stacked">
78
+				<li ng-repeat="catalog in catalogs.data" ng-class="{active: $index === catalogIndex}"><a ng-click="selectCatalog($index, $event)" ng-bind="catalog.name"></a></li>
79
+			</ul>
6080 
61
-	</div>
62
-	<div class="col-md-10">
63
-	<nav class="navbar navbar-default navbar-static-top">
64
-  <!-- Brand and toggle get grouped for better mobile display -->
65
-  <div class="navbar-header">
66
-    <a class="navbar-brand" href="#">Applications</a>
67
-  </div>
68
-
69
-  <!-- Collect the nav links, forms, and other content for toggling -->
70
-  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
71
-    <ul class="nav navbar-nav">
72
-      <li><a href="#"><span class="glyphicon glyphicon-plus"></span>
73
-      New</a></li>
74
-      <li><a href="#"><span class="glyphicon glyphicon-pencil"></span>
75
-      Edit</a></li>
76
-      <li><a href="#">
77
-      <span class="glyphicon glyphicon-ban-circle"></span>
78
-      Cancel</a></li>
79
-    </ul>
80
-    <form class="navbar-form navbar-right" role="search">
81
-      <div class="form-group">
82
-        <input type="text" class="form-control" placeholder="Search">
83
-      </div>
84
-      <button type="submit" class="btn btn-default">
85
-      <span class="glyphicon glyphicon-search"></span>
86
-      
87
-      </button>
88
-    </form>
89
-  </div>
90
-</nav>
91
-			<div class="panel panel-default">
92
-		<form role="form" class="form-horizontal " name="licenseForm">
93
-					<div class="form-group">
94
-						<label class="col-md-3 control-label" for="username">Date</label>
95
-						<div class="col-md-5">
96
-							<input type="text" id="username" name="username" placeholder=""
97
-								class="form-control" ng-model="username" required>
98
-						</div>
81
+		</div>
82
+		<div class="col-md-10">
83
+			<div id="toolbarAndForm" ng-controller="CatalogFormCtrl">
84
+				<nav class="navbar navbar-default navbar-static-top">
85
+					<!-- Brand and toggle get grouped for better mobile display -->
86
+					<div class="navbar-header">
87
+						<a class="navbar-brand" ng-bind="catalogMetadata.name"></a>
9988 					</div>
100
-					<div class="form-group">
101
-						<!-- Password-->
102
-						<label class="col-md-3 control-label" for="password">License</label>
103
-						<div class="col-md-5">
104
-							<input type="password" id="password" name="password"
105
-								placeholder="" class="form-control" ng-model="password" required>
106
-						</div>
89
+
90
+					<!-- Collect the nav links, forms, and other content for toggling -->
91
+					<div class="collapse navbar-collapse"
92
+						id="bs-example-navbar-collapse-1">
93
+						<ul class="nav navbar-nav">
94
+							<li><a ng-click="editNew()"><span class="glyphicon glyphicon-plus"></span>
95
+									New</a></li>
96
+							<li><a ng-click="edit()"><span class="glyphicon glyphicon-pencil"></span>
97
+									Edit</a></li>
98
+							<li><a ng-click="cancel()"> <span
99
+									class="glyphicon glyphicon-ban-circle"></span> Cancel
100
+							</a></li>
101
+						</ul>
102
+						<form class="navbar-form navbar-right" role="search">
103
+							<div class="form-group">
104
+								<input type="text" class="form-control" placeholder="Search">
105
+							</div>
106
+							<button type="submit" class="btn btn-default">
107
+								<span class="glyphicon glyphicon-search"></span>
108
+
109
+							</button>
110
+						</form>
107111 					</div>
108
-					<div class="form-group">
109
-					    <div class="col-md-offset-3 col-md-10">
110
-					      			<button type="submit" class="btn btn-primary">
111
-					      			<span class="glyphicon glyphicon-floppy-disk"></span>
112
-					      			Save</button>
113
-					    </div>
112
+				</nav>
113
+				<div class="panel panel-default animate-show ng-hide" ng-show="showForm">
114
+					<form role="form" class="form-horizontal " name="licenseForm">
115
+						<div class="form-group" ng-repeat="field in catalogMetadata.fields" ng-if="!isNew || !field.readOnly">
116
+							<label class="col-md-3 control-label" for="{{field.name}}">{{field.display}}</label>
117
+							<div class="col-md-5">
118
+								<input ng-if="!field.readOnly && !field.multiline" type="{{field.type}}" id="{{field.name}}" name="{{field.name}}" placeholder=""
119
+									class="form-control" ng-model="formu[field.name]" ng-required="field.mandatory" ng-maxlength="20" />
120
+								<textarea ng-if="!field.readOnly && field.multiline" type="{{field.type}}" id="{{field.name}}" name="{{field.name}}" placeholder=""
121
+									class="form-control" ng-model="formu[field.name]" rows="{{field.multiline}}" ng-required="field.mandatory" ng-maxlength="field.maxlength" ></textarea>
122
+								<p ng-if="field.readOnly" class="form-control-static">{{formu[field.name]}}</p>
123
+							</div>
124
+						</div>
125
+						<div class="form-group">
126
+							<div class="col-md-offset-3 col-md-10">
127
+								<button type="submit" class="btn btn-primary">
128
+									<span class="glyphicon glyphicon-floppy-disk"></span> Save
129
+								</button>
130
+							</div>
131
+						</div>
132
+					</form>
114133 				</div>
115
-			</form>
116
-		</div>
117
-		<div class="panel panel-default">
118
-		  <div class="panel-heading">Licenses for pack <strong>BP-CICS-002</strong>
119
-		  <span class="badge pull-right" style="color:#ccffcc;">4</span>
120
-		  <span class="badge pull-right">15</span>
121
-		  </div>
122
-	
123
-		<table class="table table-hover table-condensed">
124
-		<thead>
125
-			<tr>
126
-			<th>License</th>
127
-			<th>Email</th>			
128
-			<th>Status</th>			
129
-			<th></th>			
130
-			</tr>
131
-		</thead>	
132
-		<tbody> 
133134 
134
-			<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>
135
-			<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>
136
-			<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>
137
-			<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>
138
-			<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>
139
-			<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>
140
-			<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>
141
-			<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>
142
-			<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>
143
-			<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>
144
-			<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>
145
-			<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>
146
-			<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>
147
-			<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>
148
-			<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>
149
-			<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>
150
-		</tbody>
151
-		<tfoot>
152
-		</tfoot>		
153
-		</table>	
135
+			</div>
136
+
137
+			<div class="panel panel-default">
138
+				<div class="panel-heading">
139
+					Licenses for pack <strong>BP-CICS-002</strong> <span
140
+						class="badge pull-right" style="color: #ccffcc;">4</span> <span
141
+						class="badge pull-right">15</span>
142
+				</div>
143
+
144
+				<table class="table table-hover table-condensed">
145
+					<thead>
146
+						<tr>
147
+							<th>License</th>
148
+							<th>Email</th>
149
+							<th>Status</th>
150
+							<th></th>
151
+						</tr>
152
+					</thead>
153
+					<tbody>
154
+
155
+						<tr>
156
+							<td>BP-CICS-0028HAHAHA UK</td>
157
+							<td>user1@bp.com</td>
158
+							<td class="success"><span
159
+								class="glyphicon glyphicon-ok-circle"></span></td>
160
+							<td><span ng-click="editRow()"
161
+								class="glyphicon glyphicon-pencil"></span></td>
162
+						</tr>
163
+						<tr>
164
+							<td>BP-CICS-0029HAHAHA UK</td>
165
+							<td>user2@bp.com</td>
166
+							<td class="success"><span
167
+								class="glyphicon glyphicon-ok-circle"></span></td>
168
+							<td><span class="glyphicon glyphicon-pencil"></span></td>
169
+						</tr>
170
+						<tr>
171
+							<td>BP-CICS-0028HAHAHA UK</td>
172
+							<td>user3@bp.com</td>
173
+							<td class="danger"><span
174
+								class="glyphicon glyphicon-warning-sign"></span></td>
175
+							<td><span class="glyphicon glyphicon-pencil"></span></td>
176
+						</tr>
177
+						<tr>
178
+							<td>BP-CICS-0128HAHAHA UK</td>
179
+							<td>user4@bp.com</td>
180
+							<td class="danger"><span
181
+								class="glyphicon glyphicon-warning-sign"></span></td>
182
+							<td><span class="glyphicon glyphicon-pencil"></span></td>
183
+						</tr>
184
+						<tr>
185
+							<td>BP-CICS-00qqasddHA UK</td>
186
+							<td>user5@bp.com</td>
187
+							<td class="success"><span
188
+								class="glyphicon glyphicon-ok-circle"></span></td>
189
+							<td><span class="glyphicon glyphicon-pencil"></span></td>
190
+						</tr>
191
+						<tr>
192
+							<td>BP-CICS-0028HAaaHA UK</td>
193
+							<td>user6@bp.com</td>
194
+							<td class="warning"><span
195
+								class="glyphicon glyphicon-question-sign"></span></td>
196
+							<td><span class="glyphicon glyphicon-pencil"></span></td>
197
+						</tr>
198
+						<tr>
199
+							<td>BP-CICS-0028aaaaHA UK</td>
200
+							<td>user7@bp.com</td>
201
+							<td class="warning"><span
202
+								class="glyphicon glyphicon-question-sign"></span></td>
203
+							<td><span class="glyphicon glyphicon-pencil"></span></td>
204
+						</tr>
205
+						<tr>
206
+							<td>BP-CICS-0028HAHAHA UK</td>
207
+							<td>user8@bp.com</td>
208
+							<td class="success"><span
209
+								class="glyphicon glyphicon-ok-circle"></span></td>
210
+							<td><span class="glyphicon glyphicon-pencil"></span></td>
211
+						</tr>
212
+						<tr>
213
+							<td>BP-CICS-0028HAHAHA UK</td>
214
+							<td>user9@bp.com</td>
215
+							<td><span class="glyphicon glyphicon-ok-circle"></span></td>
216
+							<td><span class="glyphicon glyphicon-pencil"></span></td>
217
+						</tr>
218
+						<tr>
219
+							<td>BP-CICS-0028HAHAHA UK</td>
220
+							<td>user0@bp.com</td>
221
+							<td><span class="glyphicon glyphicon-ok-circle"></span></td>
222
+							<td><span class="glyphicon glyphicon-pencil"></span></td>
223
+						</tr>
224
+						<tr>
225
+							<td>BP-CICS-0028HAHAHA UK</td>
226
+							<td>user11@bp.com</td>
227
+							<td><span class="glyphicon glyphicon-ok-circle"></span></td>
228
+							<td><span class="glyphicon glyphicon-pencil"></span></td>
229
+						</tr>
230
+						<tr>
231
+							<td>BP-CICS-0028HAHAHA UK</td>
232
+							<td>user12@bp.com</td>
233
+							<td><span class="glyphicon glyphicon-ok-circle"></span></td>
234
+							<td><span class="glyphicon glyphicon-pencil"></span></td>
235
+						</tr>
236
+						<tr>
237
+							<td>BP-CICS-0028HAHAHA UK</td>
238
+							<td>user13@bp.com</td>
239
+							<td><span class="glyphicon glyphicon-ok-circle"></span></td>
240
+							<td><span class="glyphicon glyphicon-pencil"></span></td>
241
+						</tr>
242
+						<tr>
243
+							<td>BP-CICS-0028HAHAHA UK</td>
244
+							<td>user14@bp.com</td>
245
+							<td><span class="glyphicon glyphicon-ok-circle"></span></td>
246
+							<td><span class="glyphicon glyphicon-pencil"></span></td>
247
+						</tr>
248
+						<tr>
249
+							<td>BP-CICS-0028HAHAHA UK</td>
250
+							<td>user15@bp.com</td>
251
+							<td><span class="glyphicon glyphicon-ok-circle"></span></td>
252
+							<td><span class="glyphicon glyphicon-pencil"></span></td>
253
+						</tr>
254
+						<tr>
255
+							<td>BP-CICS-0028HAHAHA UK</td>
256
+							<td>user16@bp.com</td>
257
+							<td><span class="glyphicon glyphicon-ok-circle"></span></td>
258
+							<td><span class="glyphicon glyphicon-pencil"></span></td>
259
+						</tr>
260
+					</tbody>
261
+					<tfoot>
262
+					</tfoot>
263
+				</table>
264
+			</div>
154265 		</div>
155
-	</div>
156266 
157267 	</div>
158268 
....@@ -175,7 +285,9 @@
175285 		src="//code.angularjs.org/1.2.6/angular-route.js"></script>
176286 	<script type="text/javascript"
177287 		src="//code.angularjs.org/1.2.6/angular-resource.js"></script>
178
-	<script type="text/javascript" src="js/login.js"></script>
288
+	<script type="text/javascript"
289
+		src="//code.angularjs.org/1.2.6/angular-animate.js"></script>
290
+	<script type="text/javascript" src="js/admin.js"></script>
179291 
180292 	<!--  <script src="js/main.js"></script>  -->
181293 	<script type="text/javascript">


 securis/src/main/resources/static/js/admin.js
....@@ -0,0 +1,70 @@
1
+(function() {
2
+	'use strict';
3
+
4
+	var app = angular.module('app', [ 'ngRoute', 'ngAnimate' ]);
5
+
6
+	app.factory('Catalogs', function($http) {
7
+		var CatalogsService = {}
8
+		CatalogsService.list = function(initFn) {
9
+			$http.get('/js/catalogs.json').success(function(data){
10
+					console.log(data);
11
+					CatalogsService.data = data;
12
+					initFn();
13
+				})
14
+			return CatalogsService;
15
+		}
16
+		CatalogsService.getName = function(index) {
17
+			return CatalogsService.data ? CatalogsService.data[index].name : '';
18
+		}
19
+		CatalogsService.getMetadata = function(index) {
20
+			return CatalogsService.data ? CatalogsService.data[index] : {};
21
+		}
22
+		return CatalogsService;
23
+		
24
+	});
25
+	
26
+	app.controller('CatalogsCtrl', [ '$scope', '$http', 'Catalogs' ,
27
+			function($scope, $http, catalogs) {
28
+				$scope.formu = {};
29
+				$scope.catalogIndex = 0;
30
+				$scope.catalogs = catalogs.list(function() {
31
+					$scope.catalogMetadata = catalogs.getMetadata($scope.catalogIndex);
32
+				}); //['Applications','License types','Users','Organizations','System params'];
33
+				$scope.catalogMetadata = {};
34
+				$scope.selectCatalog = function(index, $event) {
35
+					$scope.catalogIndex = index;
36
+					$scope.catalogMetadata = catalogs.getMetadata($scope.catalogIndex);
37
+					console.log($event);
38
+				}
39
+			} ]);
40
+
41
+
42
+	app.controller('CatalogFormCtrl', [ '$scope', '$http',
43
+	                                    
44
+			function($scope, $http, menuController) {
45
+				$scope.showForm = false;
46
+				console.log('Form: currentCatalog:'+ $scope.cataLogIndex);
47
+				$scope.editNew = function() {
48
+					$scope.showForm = true;
49
+					$scope.isNew = true;
50
+					$scope.formu = {};
51
+				}
52
+				$scope.edit = function() {
53
+					$scope.showForm = true;
54
+					$scope.isNew = false;
55
+					// TODO: Load in formu values for Form
56
+					$scope.formu = {};
57
+				}
58
+				$scope.cancel = function() {
59
+					$scope.showForm = false;
60
+				}
61
+			} ]);
62
+
63
+	app.controller('CatalogListCtrl', [ '$scope', '$http',
64
+			function($scope, $http) {
65
+				console.log('List: currentCatalog: '+ $scope.currentCatalog);
66
+
67
+			} ]);
68
+
69
+})();
70
+


 securis/src/main/resources/static/js/catalogs.json
....@@ -0,0 +1,56 @@
1
+[
2
+    {
3
+        "name": "Applications",
4
+        "Entity": "Application",
5
+        "fields": [
6
+            {
7
+                "name": "id",
8
+                "display": "ID",
9
+                "type": "number",
10
+                "pk": true,
11
+                "readOnly": true
12
+                },
13
+                {
14
+                "name": "name",
15
+                "display": "Name",
16
+                    "type": "string",
17
+                    "maxlength": 45,
18
+                    "mandatory": true
19
+                },
20
+                {
21
+                "name": "description",
22
+                "display": "Description",
23
+                    "type": "string",
24
+                    "maxlength": 500,
25
+                    "multiline": 2
26
+                },
27
+                {
28
+                "name": "creation_timestamp",
29
+                "display": "Creation date",
30
+                    "type": "date",
31
+                    "readOnly": true
32
+                }
33
+        ]
34
+    },
35
+    {
36
+        "name": "License types",
37
+        "Entity": "LicenseType",
38
+        "fields": []
39
+    },
40
+    {
41
+        "name": "Users",
42
+        "Entity": "User",
43
+        "fields": []
44
+    },
45
+    {
46
+        "name": "Organizations",
47
+        "Entity": "Organization",
48
+        "fields": []
49
+    },
50
+    {
51
+        "name": "System params",
52
+        "Entity": "SystemParams",
53
+        "fields": []
54
+    }
55
+    
56
+]


 securis/src/main/resources/static/server.js
....@@ -0,0 +1,7 @@
1
+var connect = require('connect');
2
+
3
+connect.createServer(
4
+    connect.static(__dirname)
5
+).listen(8080);
6
+
7
+console.log('Server listening in http://0.0.0.0:8080...');