-
Notifications
You must be signed in to change notification settings - Fork 6
/
index.html
149 lines (133 loc) · 4.56 KB
/
index.html
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
139
140
141
142
143
144
145
146
147
148
149
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>CRUD Mission - Quarkus</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/wingcss/0.1.8/wing.min.css"/>
<style>
input[type=number] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
-webkit-transition: .5s;
transition: .5s;
outline: 0;
font-family: 'Open Sans', serif;
}
</style>
<!-- Load AngularJS -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("FruitManagement", []);
//Controller Part
app.controller("FruitManagementController", function ($scope, $http) {
//Initialize page with default data which is blank in this example
$scope.fruits = [];
$scope.form = {
id: -1,
name: ""
};
//Now load the data from server
_refreshPageData();
//HTTP POST/PUT methods for add/edit fruits
$scope.update = function () {
var method = "";
var url = "";
var data = {};
if ($scope.form.id == -1) {
//Id is absent so add fruits - POST operation
method = "POST";
url = '/fruits';
data.name = $scope.form.name;
} else {
//If Id is present, it's edit operation - PUT operation
method = "PUT";
url = '/fruits/' + $scope.form.id;
data.name = $scope.form.name;
}
$http({
method: method,
url: url,
data: angular.toJson(data),
headers: {
'Content-Type': 'application/json'
}
}).then(_success, _error);
};
//HTTP DELETE- delete fruit by id
$scope.remove = function (fruit) {
$http({
method: 'DELETE',
url: '/fruits/' + fruit.id
}).then(_success, _error);
};
//In case of edit fruits, populate form with fruit data
$scope.edit = function (fruit) {
$scope.form.name = fruit.name;
$scope.form.id = fruit.id;
};
/* Private Methods */
//HTTP GET- get all fruits collection
function _refreshPageData() {
$http({
method: 'GET',
url: '/fruits'
}).then(function successCallback(response) {
$scope.fruits = response.data;
}, function errorCallback(response) {
console.log(response.statusText);
});
}
function _success(response) {
_refreshPageData();
_clearForm()
}
function _error(response) {
alert(response.data.message || response.statusText);
}
//Clear the form
function _clearForm() {
$scope.form.name = "";
$scope.form.id = -1;
}
});
</script>
</head>
<body ng-app="FruitManagement" ng-controller="FruitManagementController">
<div class="container">
<h1>CRUD Fruit App - Service Binding with Go</h1>
<p>This application demonstrates Secret Management in OpenShift, and shows how a Go Web application retrieves connection properties with Service Binding.</p>
<p>This application also implements a set of CRUD endpoint to manage fruits.
This management interface invokes the CRUD service endpoint, which interacts with a database using Go pgx.
</p>
<p>Behind the scenes, we have:
<ul>
<li>Go Gorilla to expose REST endpoints</li>
<li>pgx library to connect to CockroachDB Cloud</li>
<li>Service Binding Client to load the connection properties from $SERVICE_BINDING_ROOT</li>
<li>Compatible with DBaaS</li>
</ul>
</p>
<h3>Add/Edit a fruit</h3>
<form ng-submit="update()">
<div class="row">
<div class="col-6"><input type="text" placeholder="Name" ng-model="form.name" size="60"/></div>
</div>
<input type="submit" value="Save"/>
</form>
<h3>Fruit List</h3>
<div class="row">
<div class="col-2">Name</div>
</div>
<div class="row" ng-repeat="fruit in fruits">
<div class="col-2">{{ fruit.name }}</div>
<div class="col-8"><a ng-click="edit( fruit )" class="btn">Edit</a> <a ng-click="remove( fruit )" class="btn">Remove</a>
</div>
</div>
</div>
</body>
</html>