Add a (Web) UI to the Async Inline Caching Sample Spring Boot application (code).

This commit is contained in:
John Blum
2020-12-07 08:55:55 -08:00
parent 3342f32263
commit dab156e73a
3 changed files with 189 additions and 0 deletions

View File

@@ -0,0 +1,54 @@
<html>
<head>
<title>Golf Tournament Cache View</title>
<script src="jquery-3.5.1.min.js"></script>
<script type="JavaScript">
function golfTournamentStandingsRunner() {
$.ajax({
type: "GET",
url: "http://localhost:8080/golf/tournament/cache",
dataType: "json",
success: function(golfers) {
var table = $("#golfers #tbody")
table.clear();
$.each(golfers, function(index, golfer) {
table.append("<tr><td>" + golfer.name + "</td>/<tr>");
table.append("<tr><td>" + golfer.hole + "</td>/<tr>");
table.append("<tr><td>" + golfer.score + "</td>/<tr>");
})
},
complete: function() {
setTimeout(
}
error: function() {
alert("What???");
}
})
}
$(document).ready(function() {
//setTimeout(golfTournamentStandingsRunner, 2500);
setInterval(golfTournamentStandingsRunner, 1000);
});
</script>
</head>
<body>
<h1>The Masters - CACHE</h1>
<table id="golfers" border="1">
<thead>
<tr>
<th width="100">Name</th>
<th width="100">Hole</th>
<th width="100">Score</th>
</tr>
</thead>
<tbody>
<tr><td>?</td></tr>
<tr><td>0</td></tr>
<tr><td>0</td></tr>
</tbody>
</table>
</body>
</html>

View File

@@ -0,0 +1,55 @@
<html>
<head>
<title>Golf Tournament Database View</title>
<script src="jquery-3.5.1.min.js"></script>
<script type="JavaScript">
function golfTournamentStandingsRunner() {
$.ajax({
type: "GET",
url: "http://localhost:8080/golf/tournament/database",
dataType: "json",
success: function(golfers) {
var table = $("#golfers #tbody")
table.clear();
$.each(golfers, function(index, golfer) {
table.append("<tr><td>" + golfer.name + "</td>/<tr>");
table.append("<tr><td>" + golfer.hole + "</td>/<tr>");
table.append("<tr><td>" + golfer.score + "</td>/<tr>");
})
},
complete: function() {
setTimeout(
}
error: function() {
alert("What???");
}
})
}
$(document).ready(function() {
//setTimeout(golfTournamentStandingsRunner, 2500);
setInterval(golfTournamentStandingsRunner, 1000);
alert("HELLO!");
});
</script>
</head>
<body onload="">
<h1>The Masters - DATABASE</h1>
<table id="golfers" border="1">
<thead>
<tr>
<th width="100">Name</th>
<th width="100">Hole</th>
<th width="100">Score</th>
</tr>
</thead>
<tbody>
<tr><td>?</td></tr>
<tr><td>0</td></tr>
<tr><td>0</td></tr>
</tbody>
</table>
</body>
</html>