source: src/main/webapp/newtournament.xhtml@ 16

Last change on this file since 16 was 16, checked in by bart, 4 years ago

Added BOA support, some bug fixes
File size: 17.8 KB
Line 
1<?xml version="1.0" encoding="UTF-8"?>
2<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
3<head>
4<title>Profiles and Domains list</title>
5<link rel="stylesheet" type="text/css" href="style.css" />
6</head>
7<body onload="init()">
8 <h1>Tournament</h1>
9
10 On this page you can configure the settings for running a new
11 tournament and start the tournament.
12 <br />
13 <br />
14
15 <select>
16 <option value="APP">All Permutations Tournament Protocol
17 (APP)</option>
18 </select>
19 <br />
20 <input type="number" id="ntournaments" min="1" max="1000000" value="1" />
21 Number of times to repeat the entire tournament
22 <br />
23
24 <br />
25 <input type="number" id="teamspersession" min="2" max="10" value="2" />
26 Number of teams in each session
27 <br />
28
29 <input type="checkbox" id="reuseteams" /> Pick teams with return when
30 creating sessions
31 <br />
32
33 <br />
34 <div id="box" class="box">
35 Session Protocol settings <br /> Session Protocol: <select
36 id="protocolselection" onchange="selectProtocol()">
37 <option value="SAOP">SAOP</option>
38 <option value="SHAOP">SHAOP</option>
39 </select> <br /> Deadline: <input type="number" id="deadlinevalue"
40 name="deadline" min="1" max="10000" value="10" /> <select
41 id="deadlinetype">
42 <option value="ROUNDS">rounds</option>
43 <option value="TIME">seconds</option>
44 </select>
45 </div>
46 <br />
47
48 <div id="box" class="box">
49 <h3>Profiles</h3>
50 Domain/Profile Server: <input type="url" name="url"
51 id="profilesserverurl" value="localhost:8080/profilesserver-1.3.1"
52 pattern=".*:[0-9]+/profilesserver" size="30"
53 onchange="connectDomain()"> </input> <br /> Domain: <select
54 id="domainselection" onchange="selectDomain()">
55 <!-- <option>Waiting for profiles server</option> -->
56 </select> <br /> <br />
57 <!-- first selected profile -->
58 Profile: <select id="profileselection1">
59 </select> Filter: <input type="text" id="filter1" value="" maxlength="40" /> <br />
60 <!-- second selected profile -->
61 <div class="onlySHAOP">
62 COB: <select id="profileselection2">
63 </select> Filter: <input type="text" id="filter2" value="" maxlength="40" />
64 <br />
65 </div>
66 <button onclick="addProfiles()">Add</button>
67 <br /> <br />
68 <table id="profiles">
69 <thead>
70 <th align="left">Selected Profiles</th>
71 </thead>
72 <tbody id="profilesList">
73 <tr>
74 </tr>
75
76 </tbody>
77 </table>
78 <br />
79 </div>
80 <br />
81 <div id="box" class="box">
82 <h3>Teams</h3>
83 <br /> Parties Server: <input type="url" name="url"
84 id="partiesserverurl" value="localhost:8080/partiesserver-1.3.1"
85 pattern=".*:[0-9]+/partiesserver" size="30"
86 onchange="connectParties()"> </input> <br /> <br />
87 <!-- party 1 selection -->
88 Party: <select id="partyselection">
89 </select>
90 <br /> Parameters: {
91 <textarea id="parameters" rows="2" cols="70"
92 onchange="getParameters('parameters')" value="" />
93 } <br />
94 <!-- party 2 selection -->
95 <div class="onlySHAOP">
96 COB: <select id="partyselection2">
97 </select>
98 <br /> Parameters: {
99 <textarea id="parameters2" rows="2" cols="70"
100 onchange="getParameters('parameters2')" value="" />
101 }
102 </div>
103 <br />
104
105
106 <button onclick="addTeam()">Add</button>
107
108 <br /> <br />
109 <table>
110 <thead>
111 <th align="left">Party</th>
112 <th align="left">Parameters</th>
113 <th align="left"><div class="onlySHAOP">Compare Bids
114 Party</div></th>
115 <th align="left"><div class="onlySHAOP">Compare Bids
116 Parameters</div></th>
117 </thead>
118 <tbody id="teamList">
119 <tr id="FIXME REMOVE">
120 </tr>
121
122 </tbody>
123 </table>
124
125 </div>
126 <br />
127 <form>
128 <input id="startbutton" type="button" value="Start Tournament"
129 onclick="start()" />
130 </form>
131 <div id="started" style="visibility: hidden">
132 Your tournament started. Click <a href="" id="logref">here</a> to view
133 the log file. <br /> <a href="" id="plotref">show results table.</a>.
134 </div>
135
136</body>
137
138<script type="application/javascript">
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168 // FIXME quick and dirty code. No clean MVC
169
170
171 <![CDATA[
172 "use strict";
173
174 var domainwebsocket = null;
175 var partieswebsocket=null;
176 // currently known domains (and profiles) as coming from domainwebsocket.
177 // keys are domain names, values are list of profile names
178 var knowndomains={};
179
180 var teamslist=[];
181 var profiles=[]
182
183 /**
184 called when user changes the protocol.
185 With SHAOP we show COB selectors and COB columns in the tables.
186 */
187 function selectProtocol() {
188 const isShaop= "SHAOP"==document.getElementById("protocolselection").value;
189 setStyleSheet('.onlySHAOP','{ display: '+(isShaop? '?':'none')+'; }')
190 }
191
192 /**
193 Change style sheet to new value. Nothing happens if there is
194 no style sheet with given classname.
195 @param classname the name of the style definition, eg '.onlySHAOP'
196 @param style the new style for the class. eg '{ max-width: 100px; }'
197 */
198 function setStyleSheet(classname, style) {
199 for (var cssRulenr=0; cssRulenr< document.styleSheets.length; cssRulenr++) {
200 var cssRule = document.styleSheets[cssRulenr];
201 // there may be multple CSS definitions, check each.
202 var rules = cssRule.cssRules;
203 for (var rulenr=0; rulenr<rules.length; rulenr++) {
204 var rule = rules[rulenr];
205 if ('selectorText' in rule && rule.selectorText==classname) {
206 cssRule.deleteRule(rulenr);
207 cssRule.insertRule(classname+ " "+style, rulenr);
208 }
209 }
210 }
211 }
212
213 /**
214 Refresh known domains using given profilesserver URL.
215 Called when user enters URL for domain server.
216 */
217 function connectDomain() {
218 if (domainwebsocket!=null) {
219 domainwebsocket.close();
220 domainwebsocket=null;
221 }
222 var url=document.getElementById("profilesserverurl").value;
223 var target = "ws://"+url+"/websocket/liststream";
224 if ('WebSocket' in window) {
225 domainwebsocket = new WebSocket(target);
226 } else if ('MozWebSocket' in window) {
227 domainwebsocket = new MozWebSocket(target);
228 } else {
229 alert('WebSocket is not supported by this browser. Please use a newer browser');
230 return;
231 }
232 domainwebsocket.onopen = function () {
233 // whatever.
234 };
235 domainwebsocket.onmessage = function (event) {
236 updateDomainComboBox(JSON.parse(event.data));
237 };
238 domainwebsocket.onclose = function (event) {
239 alert('Info: Server closed connection. Code: ' + event.code +
240 (event.reason == "" ? "" : ", Reason: " + event.reason));
241 domainwebsocket=null;
242 updateDomainComboBox({});
243 };
244 }
245
246 /**
247 Sets a new knowndomains value and Updates the contents of the domain selector combobox.
248 @param the known domains, a map of the form {"jobs":["jobs1","jobs2"]}
249 where the keys are the names of the available domains nd the values a list of the available profiles in that domain.
250
251 */
252 function updateDomainComboBox(newdomains) {
253 knowndomains=newdomains
254 var combobox = document.getElementById("domainselection");
255 combobox.options.length=0;
256 for (var domain in knowndomains) {
257 var option = document.createElement('option');
258 option.text = option.value = domain;
259 combobox.add(option, 0);
260 }
261 selectDomain();
262 }
263 /**
264 Refresh known parties using given partiesserver URL.
265 Called when user enters URL for parties server.
266 */
267 function connectParties() {
268 if (partieswebsocket!=null) {
269 partieswebsocket.close();
270 partieswebsocket=null;
271 }
272 var url=document.getElementById("partiesserverurl").value;
273 var target = "ws://"+url+"/available";
274 if ('WebSocket' in window) {
275 partieswebsocket = new WebSocket(target);
276 } else if ('MozWebSocket' in window) {
277 partieswebsocket = new MozWebSocket(target);
278 } else {
279 alert('WebSocket is not supported by this browser. Please use a newer browser');
280 return;
281 }
282 partieswebsocket.onopen = function () {
283 // whatever.
284 };
285 partieswebsocket.onmessage = function (event) {
286 updateParties(JSON.parse(event.data));
287 };
288 partieswebsocket.onclose = function (event) {
289 alert('Info: Server closed connection. Code: ' + event.code +
290 (event.reason == "" ? "" : ", Reason: " + event.reason));
291 partieswebsocket=null;
292 updateParties({});
293 };
294 }
295
296 /**
297 @param parties a new list of parties available on the parties server
298 */
299 function updateParties(parties) {
300 updatePartyCombo(document.getElementById("partyselection"), parties, 'shaop');
301 updatePartyCombo(document.getElementById("partyselection2"), parties, 'comparebids');
302 }
303
304 /**
305 put the available parties in the party comboboxes.
306 @param combobox a document <select> element
307 @param parties a dict of party information coming from the partiesserver
308 @param select a string that may be a substring of the part names.
309 @return the combobox value that contains 'select' as substring, or undefined
310 */
311 function updatePartyCombo(combobox, parties, select) {
312 var selection=undefined;
313 combobox.options.length=0;
314 for (var party in parties) {
315 var option = document.createElement('option');
316 option.text = option.value = parties[party].uri;
317 if (option.text.includes(select) ) option.selected=true;
318 combobox.add(option, 0);
319 }
320 return selection;
321 }
322
323
324
325 /**
326 @param elementname eg "parameters", the ID of the element in the <input> element
327 @return the JSON parsed object, or {} if empty or parsing fails.
328 */
329 function getParameters(elementname) {
330 var text="{"+document.getElementById(elementname).value+"}";
331 try {
332 return JSON.parse(text);
333 } catch(e) {
334 alert("Parameters can not be parsed. Make sure you write correct JSON here."+e);
335 }
336 return {};
337 }
338
339 /**
340 Called when the selected domain changes. Assumes knowndomains has been set.
341 Updates the available profiles in the profile combobox.
342 @param selection the name of the selected domain.
343 */
344 function selectDomain() {
345 // determined current selection
346 var domaincombobox = document.getElementById("domainselection");
347 if (domaincombobox.options.length==0) return; // fixme clean profiles options?
348 var domain = domaincombobox.options[domaincombobox.selectedIndex].value;
349 updateProfiles(knowndomains[domain])
350 }
351
352 function updateProfiles(profileslist) {
353 updateProfileCombo(document.getElementById("profileselection1"),profileslist);
354 updateProfileCombo(document.getElementById("profileselection2"),profileslist);
355 }
356
357 /**
358 @param combobox the <select> element that should be udpated
359 @param profileslist the list of profile names to be put in the combbo
360 */
361 function updateProfileCombo(profilecombo, profileslist) {
362 profilecombo.options.length=0;
363 for (var profile in profileslist) {
364 var option = document.createElement('option');
365 option.text = option.value = profileslist[profile];
366 profilecombo.add(option, 0);
367 }
368 }
369
370
371 /**
372 Called when user clicks "Add"
373 */
374 function addTeam() {
375 var partycombo = document.getElementById("partyselection");
376 var partycombo2 = document.getElementById("partyselection2");
377 var param = getParameters("parameters");
378 var param2 = getParameters("parameters2");
379
380
381 if (partycombo.options.length==0) {
382 alert("Please set partier server and select a party");
383 return;
384 }
385 var team = [];
386 team.push({"partyref":partycombo.options[partycombo.selectedIndex].value, "parameters":param});
387 team.push({"partyref":partycombo2.options[partycombo2.selectedIndex].value, "parameters":param2});
388
389 teamslist.push(team);
390 updateTeamsTable();
391 }
392
393 /** updates the teams table, to match the #partyprofiles list. */
394 function updateTeamsTable() {
395 var table = document.getElementById("teamList");
396 table.innerHTML = ""; // clear table
397 for ( const team of teamslist) {
398 var row = table.insertRow(-1);
399 for (const col in team) {
400 const party = team[col]
401 var cell1 = row.insertCell(-1);
402 var cell2 = row.insertCell(-1);
403 cell1.innerHTML = party["partyref"];
404 cell2.innerHTML = JSON.stringify(party["parameters"]).replace(/,/g,", ");;
405 cell2.setAttribute("style","overflow-wrap: anywhere;");
406 if (col>0) {
407 cell1.className = cell2.className = "onlySHAOP";
408 }
409
410 }
411 }
412
413 selectProtocol(); // HACK we need to KEEP onlySHAOP elements hidden
414 }
415
416 /**
417 @param profilenr the profile nr, 1 for normal , 2 for cob profile
418 */
419 function getProfile(profilenr) {
420 var profilecombo = document.getElementById("profileselection"+profilenr);
421 if (profilecombo.options.length==0) {
422 alert("Please set domain/profile server and select a domain and a profile");
423 throw "blabla";
424 }
425 var filteroptions = document.getElementById("filter"+profilenr).value;
426 if (filteroptions!="") {
427 filteroptions="?"+filteroptions;
428 }
429
430 //return profilecombo.options[profilecombo.selectedIndex].value + filteroptions
431 return profilecombo.value + filteroptions
432 }
433
434 /**
435 Called when user clicks "Add" to add a profile set
436 */
437 function addProfiles() {
438 profiles.push([getProfile(1), getProfile(2)]);
439 updateProfileTable(); // what, MVC?
440 }
441
442 /** updates the party table, to match the #partyprofiles list. */
443 function updateProfileTable() {
444 var table = document.getElementById("profilesList");
445 table.innerHTML = ""; // clear table
446 for ( const profileset of profiles) {
447 var row = table.insertRow(-1);
448 for (var col in profileset) {
449 var profile = profileset[col];
450 var cell1 = row.insertCell(-1);
451 cell1.innerHTML = profile;
452 if (col>0) cell1.className = "onlySHAOP"
453 }
454 }
455 selectProtocol(); // HACK we need to KEEP onlySHAOP elements hidden
456 }
457
458 /**
459 start the tournament as currently set on this page.
460 We need to send a TournamentSettings object to the server, which typically looks like this with SAOP
461 <code>
462 {"AllPermutationsSettings":{"parties":["party1","party2"],
463 "profiles":["profile1","profile2","profile3"],
464 "reuseParties":false,
465 "partiesPerSession":2,
466 "sessionsettings":{"SAOPSettings":{"participants":[],"deadline":{"deadlinetime":{"durationms":10}}}}}}
467 </code>
468 participants are already in the global partyprofiles dictionary
469
470 With SHAOP, it looks like this
471 <code>
472 {
473 "AllPermutationsSettings": {
474 "parties": [ { "partyref": "classpath:geniusweb.exampleparties.simpleshaop.ShaopParty", "parameters": { } },
475 { "partyref": "classpath:geniusweb.exampleparties.randomparty.RandomParty", "parameters": { }}
476 ],
477 "reuseParties": false,
478 "profiles": [ "prof1?partial=10", "prof2?partial=15"],
479 "partiesPerSession": 2,
480 "sessionsettings": { "SHAOPSettings": {
481 "participants": [ ],
482 "deadline": { "deadlinerounds": { "rounds": 10, "durationms": 10000 } } } } } }
483 </code>
484 */
485 function start() {
486 const npersession = document.getElementById("teamspersession").value;
487
488 if (teamslist.length < npersession) {
489 alert("At least "+npersession+" teams are needed.");
490 return;
491 }
492
493 if (profiles.length < npersession) {
494 alert("At least "+npersession+" profilesets are needed.");
495 return;
496 }
497
498 // see https://www.w3schools.com/xml/dom_httprequest.asp
499 var xmlHttp = new XMLHttpRequest();
500 xmlHttp.onreadystatechange = function() {
501 if (this.readyState == 4) {
502 if (this.status == 200) {
503 document.getElementById("startbutton").disabled=true;
504 document.getElementById("started").setAttribute("style","");
505 document.getElementById("logref").href="log/"+this.responseText+".json";
506 document.getElementById("plotref").href="utilstable.xhtml?"+this.responseText;
507 } else
508 alert("request failed:"+this.statusText);
509 }
510 }
511 xmlHttp.open("POST", "run", true);
512 xmlHttp.send(makeRequest());
513 }
514
515 /**
516 @return a json request package containing a AllPermutationsSettings.
517 It assumes that global vars parties and sessionSettings have been set properly.
518 */
519 function makeRequest() {
520 const npersession = document.getElementById("teamspersession").value;
521 const ntournaments = document.getElementById("ntournaments").value;
522 const reuseTeams = document.getElementById("reuseteams").checked;
523 const protocolcombobox = document.getElementById("protocolselection");
524 const protocol = protocolcombobox.options[protocolcombobox.selectedIndex].value;
525 const header=protocol+"Settings";
526
527 var deadline={};
528 const value = document.getElementById("deadlinevalue").value;
529 const dtypecombo = document.getElementById("deadlinetype");
530 if (dtypecombo.options[dtypecombo.selectedIndex].value=="TIME") {
531 deadline["deadlinetime"] = { "durationms": 1000*value};
532 } else {
533 // ROUNDS
534 deadline["deadlinerounds"] = {"rounds": value, "durationms": 10000};
535 }
536
537 // create S(H)AOPSettings. [header] is a weird ECMA script workaround for javascript issue.
538 const sessionSettings = { [header]:{"participants":[],"deadline":deadline}};
539
540 var teamsFull = [];
541 for (const team of teamslist) {
542 if (protocol=="SAOP") // only first member of team is used.
543 teamsFull.push({"Team":[team[0]]});
544 else
545 teamsFull.push({"Team":team});
546 }
547 var profilesFull = [] ;
548 for (const profileset of profiles) {
549 if (protocol=="SAOP") // only first member of team is used.
550 profilesFull.push({"ProfileList":[profileset[0]]});
551 else
552 profilesFull.push({"ProfileList":profileset});
553 }
554
555 return JSON.stringify({"AllPermutationsSettings":{"teams":teamsFull,"profileslists":profilesFull,
556 "reuseTeams":reuseTeams,"teamsPerSession":npersession,"sessionsettings":sessionSettings,
557 "numberTournaments":ntournaments}});
558 }
559
560 /**
561 Initialize the page after html is loaded.
562 */
563 function init() {
564 document.getElementById("partiesserverurl").value =window.location.hostname+":8080/partiesserver-1.4.4";
565 document.getElementById("profilesserverurl").value =window.location.hostname+":8080/profilesserver-1.4.4";
566
567 selectProtocol();
568 connectDomain();
569 connectParties();
570 }
571
572
573 ]]>
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589</script>
590
591</html>
Note: See TracBrowser for help on using the repository browser.