forked from radcortez/javaee7-angular
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
138 lines (112 loc) · 6.6 KB
/
index.html
File metadata and controls
138 lines (112 loc) · 6.6 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<!-- Declares the root element that allows behaviour to be modified through Angular custom HTML tags. -->
<html ng-app="persons">
<head>
<title>javaee7-angular</title>
<!-- build:css css/third-party.css -->
<!-- bower:css -->
<link rel="stylesheet" href="lib/dependencies/css/bootstrap.min.css" />
<link rel="stylesheet" href="lib/dependencies/css/ng-grid.min.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css css/application.css -->
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<!-- endbuild -->
<!-- build:js lib/third-party.js -->
<!-- bower:js -->
<script src="lib/dependencies/jquery.min.js"></script>
<script src="lib/dependencies/angular.min.js"></script>
<script src="lib/dependencies/angular-resource.min.js"></script>
<script src="lib/dependencies/ng-grid-2.0.11.min.js"></script>
<script src="lib/dependencies/ui-bootstrap-tpls.min.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js script/all.js -->
<script src="script/person.js"></script>
<!-- endbuild -->
</head>
<body>
<h1>Java EE - Angular Application</h1>
<br/>
<!-- Specify a Angular controller script that binds Javascript variables to the feedback messages.-->
<div class="message" ng-controller="alertMessagesController">
<alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</alert>
</div>
<br>
<!-- Specify a Angular controller script that binds Javascript variables to the grid.-->
<div class="grid" ng-controller="personsListController">
<div>
<h3>List Persons</h3>
</div>
<!-- Binds the grid component to be displayed. -->
<div class="gridStyle" ng-grid="gridOptions"></div>
<!-- Bind the pagination component to be displayed. -->
<pagination direction-links="true" boundary-links="true"
total-items="persons.totalResults" items-per-page="persons.pageSize"
ng-model="persons.currentPage" ng-change="refreshGrid()">
</pagination>
</div>
<!-- Specify a Angular controller script that binds Javascript variables to the form.-->
<div class="form" ng-controller="personsFormController">
<!-- Verify person, if there is no id present, that we are Adding a Person -->
<div ng-if="person.id == null">
<h3>Add Person</h3>
</div>
<!-- Otherwise it's an Edit -->
<div ng-if="person.id != null">
<h3>Edit Person</h3>
</div>
<div>
<!-- Specify the function to be called on submit and disable HTML5 validation, since we're using Angular validation-->
<form name="personForm" ng-submit="updatePerson()" novalidate>
<!-- Display an error if the input is invalid and is dirty (only when someone changes the value) -->
<div class="form-group" ng-class="{'has-error' : personForm.name.$invalid && personForm.name.$dirty}">
<label for="name">Name:</label>
<!-- Display a check when the field is valid and was modified -->
<span ng-class="{'glyphicon glyphicon-ok' : personForm.name.$valid && personForm.name.$dirty}"></span>
<input id="name" name="name" type="text" class="form-control" maxlength="50"
ng-model="person.name"
required ng-minlength="2" ng-maxlength="50"/>
<!-- Validation messages to be displayed on required, minlength and maxlength -->
<p class="help-block" ng-show="personForm.name.$error.required">Add Name.</p>
<p class="help-block" ng-show="personForm.name.$error.minlength">Name must be at least 2 characters long.</p>
<p class="help-block" ng-show="personForm.name.$error.maxlength">Name cannot be longer than 50 characters.</p>
</div>
<!-- Display an error if the input is invalid and is dirty (only when someone changes the value) -->
<div class="form-group" ng-class="{'has-error' : personForm.description.$invalid && personForm.description.$dirty}">
<label for="description">Description:</label>
<!-- Display a check when the field is valid and was modified -->
<span ng-class="{'glyphicon glyphicon-ok' : personForm.description.$valid && personForm.description.$dirty}"></span>
<input id="description" name="description" type="text" class="form-control" maxlength="100"
ng-model="person.description"
required ng-minlength="5" ng-maxlength="100"/>
<!-- Validation messages to be displayed on required, minlength and maxlength -->
<p class="help-block" ng-show="personForm.description.$error.required">Add Description.</p>
<p class="help-block" ng-show="personForm.description.$error.minlength">Description must be at least 5 characters long.</p>
<p class="help-block" ng-show="personForm.description.$error.maxlength">Description cannot be longer than 100 characters.</p>
</div>
<!-- Display an error if the input is invalid and is dirty (only when someone changes the value) -->
<div class="form-group" ng-class="{'has-error' : personForm.imageUrl.$invalid && personForm.imageUrl.$dirty}">
<label for="imageUrl">Image URL:</label>
<!-- Display a check when the field is valid and was modified -->
<span ng-class="{'glyphicon glyphicon-ok' : personForm.imageUrl.$valid && personForm.imageUrl.$dirty}"></span>
<input id="imageUrl" name="imageUrl" type="url" class="form-control" maxlength="500"
ng-model="person.imageUrl"
required/>
<!-- Validation messages to be displayed on required and invalid. Type 'url' makes checks to a proper url format. -->
<p class="help-block" ng-show="personForm.imageUrl.$error.required">Add Image URL.</p>
<p class="help-block" ng-show="personForm.imageUrl.$invalid && personForm.imageUrl.$dirty">Invalid Image URL.</p>
</div>
<div class="avatar" ng-if="person.imageUrl">
<img ng-src="{{person.imageUrl}}" width="400" height="250"/>
</div>
<!-- Form buttons. The 'Save' button is only enabled when the form is valid. -->
<div class="buttons">
<button type="button" class="btn btn-primary" ng-click="clearForm()">Clear</button>
<button type="submit" class="btn btn-primary" ng-disabled="personForm.$invalid">Save</button>
</div>
</form>
</div>
</div>
</body>
</html>