Skip to content

Commit b70dfa1

Browse files
mgreaumgreau
committed
Refactoring: multiple matches as home page
1 parent 6917496 commit b70dfa1

8 files changed

Lines changed: 86 additions & 383 deletions

File tree

‎src/main/java/com/mgreau/wildfly/websocket/StarterService.java‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -19,19 +19,19 @@ public class StarterService {
1919

2020
private Random random;
2121
private Map<String, TennisMatch> matches = new ConcurrentHashMap<>();
22-
22+
2323
private static final Logger logger = Logger.getLogger("StarterService");
24-
24+
2525
@PostConstruct
2626
public void init() {
2727
logger.log(Level.INFO, "Initializing App.");
2828
random = new Random();
29-
matches.put("1234", new TennisMatch("1234", "ROLLAND GARROS - QUARTER FINALS", "Ferrer D.", "es", "Almagro N.", "es"));
29+
matches.put("1234", new TennisMatch("1234", "US OPEN - QUARTER FINALS", "Ferrer D.", "es", "Almagro N.", "es"));
3030
matches.put("1235", new TennisMatch("1235", "US OPEN - QUARTER FINALS", "Djokovic N.", "rs", "Berdych T.", "cz"));
3131
matches.put("1236", new TennisMatch("1236", "US OPEN - QUARTER FINALS", "Murray A.", "gb", "Chardy J.", "fr"));
3232
matches.put("1237", new TennisMatch("1237", "US OPEN - QUARTER FINALS", "Federer R.", "ch", "Tsonga J.W.", "fr"));
3333
}
34-
34+
3535
@Schedule(second="*/3", minute="*",hour="*", persistent=false)
3636
public void play() {
3737
for (Map.Entry<String,TennisMatch> match : matches.entrySet()){
@@ -53,7 +53,7 @@ public void play() {
5353
}
5454
}
5555
}
56-
56+
5757
public Map<String, TennisMatch> getMatches(){
5858
return matches;
5959
}

‎src/main/webapp/index.html‎

Lines changed: 69 additions & 128 deletions
Original file line numberDiff line numberDiff line change
@@ -1,160 +1,101 @@
11
<!DOCTYPE html>
2-
<html>
2+
<html ng-app="tennisApp">
33
<head>
4-
<title>Java EE 7 - Websocket - Wildfly 8.2 - OpenShit</title>
4+
<title>Java EE 7 - Websocket - AngularJS - Wildfly 10 - Docker</title>
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<meta name="description" content="" />
8-
<!-- Latest compiled and minified CSS -->
98
<link rel="stylesheet"
109
href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
1110
<link rel="stylesheet" href="css/flags.css">
1211

1312
<style type="text/css">
1413
.sets {
15-
background-color: #e5E5E5;
14+
background-color: #ccc;
1615
}
1716

1817
.serve {
19-
color: yellow;
20-
background-color: #ccc
18+
color: black;
19+
background-color: yellow;
20+
}
21+
.th {
22+
text-align: center;
23+
2124
}
2225
</style>
2326

2427
</head>
25-
<body>
28+
<body ng-app="tennisApp" ng-controller="TournamentCtrl">
2629
<div class="container">
27-
<h2>Tennis Game Tournament - Java EE 7 - Java API for Websocket - Javascript API</h2>
28-
<p class="lead">Basic HTML5 sample to illustrate the new Java API
30+
<h2>Tennis Game Tournament - Java EE 7 - Java API for WebSocket - AngularJS</h2>
31+
<p class="lead">AngularJS HTML5 app sample to illustrate the new Java API
2932
for WebSocket (JSR 356).</p>
3033
<p>
31-
<a href="./live.html">Access to AngularJS app sample with several matches.</a> or
32-
<a href="http://mgreau.com/posts/2013/09/27/javaee7-api-websocket-html5.html" target="blog">Read the blog post.</a>
34+
<a href="https://github.com/mgreau/javaee7-websocket" target="github">Fork it on Github.</a>
35+
or
36+
<a href="http://mgreau.com/posts/2013/11/11/javaee7-websocket-angularjs-wildfly.html" target="blog">Read the blog post.</a>
37+
or <a href="https://twitter.com/mgreau" target="twitter">follow me on twitter : @mgreau</a>
3338
</p>
3439
<div class="row">
35-
<div class="panel panel-primary">
36-
<div class="panel-heading">
37-
<span id="m1-title"></span> - <span id="m1-status"
38-
class="label label-success"></span>
40+
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6" ng-repeat="live in lives">
41+
<div class="panel panel-primary">
42+
<div class="panel-heading">
43+
<span>{{live.title}}</span>&nbsp;&nbsp;
44+
<button class="btn btn-default active btn-xs" ng-show="live.status == 'CONNECTED'" ng-click="disconnect(live.key)" >
45+
<span class="glyphicon glyphicon-off"></span> Exit.</button>
46+
</div>
47+
<div class="panel-body" >
48+
<!-- Message de fin -->
49+
<msg ng-show="live.match.finished == true"
50+
message="live.bet" winner="live.winner"></msg>
3951

40-
</div>
41-
<div class="panel-body">
42-
<table class="table">
43-
<thead>
44-
<tr>
45-
<th width="5%">S1</th>
46-
<th width="5%">S2</th>
47-
<th width="5%">S3</th>
48-
<th width="5%" class="active"></th>
49-
<th width="5%" class="active"></th>
50-
<th width="45%" class="active">PLAYERS</th>
51-
<th width="10%" class="active">POINTS</th>
52-
<th width="10%" class="active">GAMES</th>
53-
<th width="10%" class="active">SETS</th>
54-
</tr>
55-
</thead>
56-
<tbody>
57-
<tr>
58-
<td class="sets"><span id="m1-p1-set1"
59-
class="label label-warning">0</span></td>
60-
<td class="sets"><span id="m1-p1-set2"
61-
class="label label-warning">0</span></td>
62-
<td class="sets"><span id="m1-p1-set3"
63-
class="label label-warning">0</span></td>
64-
<td><span id="m1-p1-serve" class="badge serve"></span></td>
65-
<td><img src="img/blank.gif" class="flag flag-rs" /></td>
66-
<td id="m1-p1"></td>
67-
<td class="active"><span id="m1-p1-points"
68-
class="label label-danger">-</span></td>
69-
<td id="m1-p1-games">0</td>
70-
<td id="m1-p1-sets"></td>
71-
</tr>
72-
<tr>
73-
<td class="sets"><span id="m1-p2-set1"
74-
class="label label-warning">0</span></td>
75-
<td class="sets"><span id="m1-p2-set2"
76-
class="label label-warning">0</span></td>
77-
<td class="sets"><span id="m1-p2-set3"
78-
class="label label-warning">0</span></td>
79-
<td><span id="m1-p2-serve" class="badge serve"></span></td>
80-
<td><img src="img/blank.gif" class="flag flag-es" /></td>
81-
<td id="m1-p2"></td>
82-
<td class="active"><span id="m1-p2-points"
83-
class="label label-danger">-</span></td>
84-
<td id="m1-p2-games">0</td>
85-
<td id="m1-p2-sets"></td>
86-
</tr>
87-
</tbody>
88-
</table>
89-
<div class="row">
90-
<div class="col-sm-6 col-md-3">
91-
<div class="thumbnail">
92-
<div class="media">
93-
<a class="pull-left" href="#"> <img class="media-object"
94-
alt="player1" src="img/djokovic.jpg">
95-
</a>
96-
<div class="media-body">
97-
<h4 id="m1-p1-card" class="media-heading"></h4>
98-
<p>
99-
<a href="#" class="btn btn-primary btn-xs"
100-
onclick="betMatchWinner('N. DJOKOVIC')">Match Winner ?</a>
101-
</p>
102-
</div>
103-
</div>
104-
</div>
105-
</div>
106-
<div class="col-sm-6 col-md-3">
107-
<div class="thumbnail">
108-
<div class="media">
109-
<a class="pull-left" href="#"> <img class="media-object"
110-
alt="player2" src="img/nadal.jpg">
111-
</a>
112-
<div class="media-body">
113-
<h4 id="m1-p2-card" class="media-heading"></h4>
114-
<p>
115-
<a href="#" class="btn btn-primary btn-xs"
116-
onclick="betMatchWinner('R. NADAL')">Match Winner ?</a>
117-
</p>
118-
</div>
119-
</div>
120-
</div>
121-
</div>
122-
<div class="col-sm-6 col-md-3">
123-
<div class="thumbnail">
124-
<ul>
125-
<li>Bet Match Winner : <span id="m1-betmatchwinner"
126-
class="label label-warning"></span></li>
127-
<li>Result : <span id="m1-betmatchwinner-result"
128-
class="label label-default"></span></li>
129-
</ul>
130-
</div>
131-
</div>
132-
<div class="col-sm-6 col-md-3">
133-
<div class="thumbnail">
134-
<div class="media">
135-
<textarea style="font-size: 11px; background-color: #e5e5e5;"
136-
id="m1-comments" cols="45" rows="4"></textarea>
137-
</div>
52+
<!-- DISCONNECT TABLE -->
53+
<table class="table" ng-show="live.status == 'DISCONNECTED'">
54+
<thead>
55+
<tr>
56+
<th colspan="4">
57+
Game in progress...
58+
<button class="btn btn-warning active btn-xs" ng-click="connect(live.key)" >
59+
<span class="glyphicon glyphicon-power"></span>click to access live scores</button>
60+
</th>
61+
</tr>
62+
</thead>
63+
<tbody>
64+
<tr>
65+
<td><img alt="{{live.p1}}" src="img/{{splitForImage(live.p1,0)}}.jpg"></td>
66+
<td>{{live.p1}} <img src="img/blank.gif" class="flag flag-{{live.p1c}}" />
67+
</td>
68+
<td><img alt="{{live.p2}}" src="img/{{splitForImage(live.p2,0)}}.jpg"></td>
69+
<td>{{live.p2}} <img src="img/blank.gif" class="flag flag-{{live.p2c}}" /></td>
70+
</tr>
71+
</tbody>
72+
</table>
73+
<!-- LIVE MODE -->
74+
<bet ng-show="live.status == 'CONNECTED'" bet="live.bet" key="live.key"></bet> <!-- Bets Message de fin -->
75+
<match ng-show="live.status == 'CONNECTED'" match="live.match" key="live.key"></match> <!-- Match live mode -->
76+
</table>
77+
</div>
78+
<div class="panel-footer" >
79+
<!-- LIVE MODE COMMENTS -->
80+
<div class="thumbnail" ng-show="live.status == 'CONNECTED'">
81+
<div class="media">
82+
<textarea style="font-size: 11px; background-color: #e5e5e5;"
83+
cols="55" rows="4">{{live.match.comments}}</textarea>
13884
</div>
13985
</div>
86+
<!-- WS CONNECTION STATUS -->
87+
<div><em>Connection status : </em><span class="label label-info">{{live.status}}</span></div>
14088
</div>
14189
</div>
142-
<div class="panel-footer">
143-
<em>by <a href="https://twitter.com/mgreau">@mgreau</a></em>
144-
</div>
14590
</div>
14691
</div>
14792
</div>
148-
<script src="js/websocket.js"></script>
149-
<script>
150-
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
151-
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
152-
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
153-
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
154-
155-
ga('create', 'UA-43902707-1', 'wildfly-mgreau.rhcloud.com');
156-
ga('send', 'pageview');
157-
158-
</script>
93+
94+
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
95+
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular-resource.min.js"></script>
96+
<script src="js/app.js"></script>
97+
<script src="js/services.js"></script>
98+
<script src="js/controllers.js"></script>
99+
<script src="js/directives.js"></script>
159100
</body>
160-
</html>
101+
</html>

src/main/webapp/js/live/app.js renamed to src/main/webapp/js/app.js

File renamed without changes.

src/main/webapp/js/live/controllers.js renamed to src/main/webapp/js/controllers.js

File renamed without changes.

src/main/webapp/js/live/directives.js renamed to src/main/webapp/js/directives.js

File renamed without changes.

src/main/webapp/js/live/services.js renamed to src/main/webapp/js/services.js

Lines changed: 12 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
//Service to handle WebSocket protocol
1+
//Service to handle WebSocket protocol
22
app.factory('WebSocketService', function($window) {
3-
3+
44
var service = {};
55
service.ws = new Object();
66

@@ -9,19 +9,15 @@ app.factory('WebSocketService', function($window) {
99
&& service.ws[idMatch].readyState == WebSocket.OPEN) {
1010
return;
1111
}
12-
12+
1313
var appPath = "/";//$window.location.pathname.split('/')[1];
1414
var host = $window.location.hostname;
15-
var port = "8080";
15+
var port = $window.location.port;
1616
var protocol = "ws";
17-
if (angular.equals(host, 'localhost') ){
18-
port = '8080';
19-
}
2017
if (angular.equals($window.location.protocol,'https:')){
21-
port = '8443';
2218
protocol = "wss";
2319
}
24-
20+
2521
var wsUrl = protocol + '://'+ host + ':'+ port + '/' + appPath + '/matches/' + idMatch;
2622
var websocket = new WebSocket(wsUrl);
2723

@@ -54,15 +50,15 @@ app.factory('WebSocketService', function($window) {
5450
service.disconnect = function(idMatch) {
5551
service.ws[idMatch].close();
5652
};
57-
53+
5854
// WebSocket connection status
5955
service.status = function(idMatch) {
6056
if (service.ws == null || angular.isUndefined(service.ws[idMatch])){
6157
return WebSocket.CLOSED;
6258
}
6359
return service.ws[idMatch].readyState;
6460
};
65-
61+
6662
service.statusAsText = function(idMatch) {
6763
var readyState = service.status(idMatch);
6864
if (readyState == WebSocket.CONNECTING){
@@ -89,11 +85,12 @@ app.factory('WebSocketService', function($window) {
8985

9086
app.factory('TournamentRESTService', function($http, $window) {
9187
var appPath = $window.location.pathname.split('/')[1];
88+
var urlRest = '/rest/tournament/lives';
9289
var myService = {
9390
async: function() {
9491
// $http returns a promise, which has a then function, which
9592
// also returns a promise
96-
var promise = $http.get('/'+ appPath + '/rest/tournament/lives').then(function (response) {
93+
var promise = $http.get(urlRest).then(function (response) {
9794
// The then function here is an opportunity to modify the
9895
// response
9996
console.log(response);
@@ -115,16 +112,16 @@ app.factory('MatchesService', function($window, WebSocketService) {
115112
if (angular.isUndefined(match.players)){
116113
return null;
117114
}
118-
if (parseInt(match.players[0].sets) >
115+
if (parseInt(match.players[0].sets) >
119116
parseInt(match.players[1].sets)){
120117
return match.players[0].name;
121118
} else {
122-
return match.players[1].name;
119+
return match.players[1].name;
123120
}
124121
};
125122

126123
return service;
127-
124+
128125
});
129126

130127
app.factory('BetsService', function($window, WebSocketService) {
@@ -135,4 +132,3 @@ app.factory('BetsService', function($window, WebSocketService) {
135132
};
136133
return service;
137134
});
138-

0 commit comments

Comments
 (0)