source: src/main/webapp/newsession.xhtml@ 10

Last change on this file since 10 was 10, checked in by bart, 5 years ago

Added ANAC2019 Example parties: Agentgg and WinkyAgent
File size: 18.2 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
7</head>
8<body onload="init()">
9 <h1>Session</h1>
10
11 On this page you can configure the settings for running a new session
12 and start the session.
13
14 <br /> Protocol:
15 <select id="selectedprotocol" onchange="selectProtocol()">
16 <option value="SAOP">SAOP (stacked alternating offers)</option>
17 <option value="SHAOP">SHAOP (stacked human alternating
18 offers)</option>
19 </select>
20
21 <br /> Deadline:
22 <input type="number" id="deadlinevalue" name="deadline" min="1"
23 max="10000" value="10" />
24 <select id="deadlinetype">
25 <option value="ROUNDS">rounds</option>
26 <option value="TIME">seconds</option>
27 </select>
28
29 <br /> Domain/Profile Server:
30 <input type="url" name="url" id="profilesserverurl"
31 value="localhost:8080/profilesserver-1.3.0"
32 pattern=".*:[0-9]+/profilesserver" size="30"
33 onchange="connectDomain()"> </input>
34 <br /> Domain:
35 <select id="domainselection" onchange="selectDomain()">
36 <!-- <option>Waiting for profiles server</option> -->
37 </select>
38
39 <br />
40 <br />
41
42 <div id="box" class="box">
43 <br /> <b>Participants</b> <br /> Parties Server: <input type="url"
44 name="url" id="partiesserverurl"
45 value="localhost:8080/partiesserver-1.3.0"
46 pattern=".*:[0-9]+/partiesserver" size="30"
47 onchange="connectParties()"> </input> <br /> <br /> <b>Party
48 settings</b> <br /> Party : <select id="partyselection">
49 </select> <br /> Profile: <select id="profileselection"></select> Filter: <input
50 type="text" id="filter" value="" maxlength="40" /> <br />
51 Parameters: { <input type="text" id="parameters"
52 onchange="updateParameters()" value="" maxlength="100" /> } <br />
53 <br />
54
55 <div id="cobsetting">
56 <input type="checkbox" id="advancedCobSettings" onchange="advancedCobSet()" ></input>
57 Advanced COB settings<br/>
58 <div id="advancedsettings" style="display:none">
59 <b>COB party settings</b> <br /> Party : <select
60 id="cobpartyselection">
61 </select> <br /> Profile: <select id="cobprofileselection"></select>
62 Filter: <input type="text" id="cobfilter" value=""
63 maxlength="40" /> <br /> Parameters: { <input
64 type="text" id="cobparameters" onchange="updateCobParameters()"
65 value="" maxlength="100" /> } <br /> <br />
66 </div>
67 </div>
68
69 <button onclick="addParty()">Add</button>
70
71
72 <br /> <br /> <b>Selected Profiles, Parties for the session</b>
73 <table id="selectedpartiestable" width="100%">
74 <colgroup>
75 <col />
76 <col />
77 <col />
78 <col />
79 <col />
80 <col />
81 </colgroup>
82 <thead>
83 <tr>
84 <th align="center">Party</th>
85 <th align="center">Parameters</th>
86 <th align="center">Profile</th>
87
88 <th align="center">COB Party</th>
89 <th align="center">COB Parameters</th>
90 <th align="center">COB Profile</th>
91 </tr>
92 </thead>
93 <tbody id="partiesList">
94 </tbody>
95 </table>
96
97 </div>
98
99 <form>
100 <input id="startbutton" type="button" value="Start Session"
101 onclick="start()" />
102 </form>
103
104 <div id="started" style="visibility: hidden">
105 Your session started. Waiting for the results. <br />
106 </div>
107 <div id="results" style="visibility: hidden">
108 Session completed. <a href="" id="logref">view the log file</a> <br />
109 <a href="" id="plotref">render a utilities plot</a>.
110 </div>
111
112</body>
113
114<script type="application/javascript">
115
116
117
118
119
120
121
122
123 // FIXME quick and dirty code. No clean MVC
124
125
126 <![CDATA[
127 //"use strict";
128
129 var domainwebsocket = null;
130 var partieswebsocket=null;
131 // current setting of parameters
132 var parameters = {};
133
134 // currently known domains (and profiles) as coming from domainwebsocket.
135 // keys are domain names, values are list of profile names
136 var knowndomains={};
137
138
139 /**
140 List of created participants for the session. Each participant is a dictionary.
141 Each dict element contains keys
142 "party" and "profile", both containing a String containing
143 a valid IRI to the party resp. the profile to use.
144 The party should contain a IRI that gives a new instance of the required party.
145 The profile should contain an IRI that gives the profile contents.
146 */
147 var partyprofiles=[];
148
149 var cobpartyprofiles=[];
150
151 /** from http://fitzgeraldnick.com/2010/08/10/settimeout-patterns.html */
152
153 function getAdvancedCobSettings() {
154 return document.getElementById('advancedCobSettings').checked;
155 }
156
157 function advancedCobSet() {
158 document.getElementById('advancedsettings').style.display=(getAdvancedCobSettings()?'':'none');
159 }
160
161 function async (fn) {
162 setTimeout(fn, 1000);
163 }
164
165 function sometimeWhen (test, then) {
166 async(function () {
167 if ( test() ) {
168 then();
169 } else {
170 async(arguments.callee);
171 }
172 });
173 }
174
175 /**
176 Called when user changes the protocol */
177 function selectProtocol() {
178 var visible=getSelectedProtocol() == "SHAOP";
179
180 document.getElementById("cobsetting").style.display=(visible ? 'block': 'none');
181 var tbl = document.getElementById('selectedpartiestable');
182 tbl.getElementsByTagName('col')[3].style.visibility=(visible?'':'collapse');
183 tbl.getElementsByTagName('col')[4].style.visibility=(visible?'':'collapse');
184 tbl.getElementsByTagName('col')[5].style.visibility=(visible?'':'collapse');
185
186 }
187
188 /**
189 Refresh known domains using given profilesserver URL.
190 Called when user enters URL for domain server.
191 */
192 function connectDomain() {
193 if (domainwebsocket!=null) {
194 domainwebsocket.close();
195 domainwebsocket=null;
196 }
197 var url=document.getElementById("profilesserverurl").value;
198 var target = "ws://"+url+"/websocket/liststream";
199 if ('WebSocket' in window) {
200 domainwebsocket = new WebSocket(target);
201 } else if ('MozWebSocket' in window) {
202 domainwebsocket = new MozWebSocket(target);
203 } else {
204 alert('WebSocket is not supported by this browser. Please use a newer browser');
205 return;
206 }
207 domainwebsocket.onopen = function () {
208 // whatever.
209 };
210 domainwebsocket.onmessage = function (event) {
211 updateDomainComboBox(JSON.parse(event.data));
212 };
213 domainwebsocket.onclose = function (event) {
214 alert('Info: Server closed connection. Code: ' + event.code +
215 (event.reason == "" ? "" : ", Reason: " + event.reason));
216 domainwebsocket=null;
217 updateDomainComboBox({});
218 };
219 }
220
221 /**
222 Sets a new knowndomains value and Updates the contents of the domain selector combobox.
223 @param the known domains, a map of the form {"jobs":["jobs1","jobs2"]}
224 where the keys are the names of the available domains nd the values a list of the available profiles in that domain.
225
226 */
227 function updateDomainComboBox(newdomains) {
228 knowndomains=newdomains
229 var combobox = document.getElementById("domainselection");
230 combobox.options.length=0;
231 for (var domain in knowndomains) {
232 var option = document.createElement('option');
233 option.text = option.value = domain;
234 combobox.add(option, 0);
235 }
236 selectDomain();
237 }
238 /**
239 Refresh known parties using given partiesserver URL.
240 Called when user enters URL for parties server.
241 */
242 function connectParties() {
243 if (partieswebsocket!=null) {
244 partieswebsocket.close();
245 partieswebsocket=null;
246 }
247 var url=document.getElementById("partiesserverurl").value;
248 var target = "ws://"+url+"/available";
249 if ('WebSocket' in window) {
250 partieswebsocket = new WebSocket(target);
251 } else if ('MozWebSocket' in window) {
252 partieswebsocket = new MozWebSocket(target);
253 } else {
254 alert('WebSocket is not supported by this browser. Please use a newer browser');
255 return;
256 }
257 partieswebsocket.onopen = function () {
258 // whatever.
259 };
260 partieswebsocket.onmessage = function (event) {
261 updateParties(JSON.parse(event.data));
262 };
263 partieswebsocket.onclose = function (event) {
264 alert('Info: Server closed connection. Code: ' + event.code +
265 (event.reason == "" ? "" : ", Reason: " + event.reason));
266 partieswebsocket=null;
267 updateParties({});
268 };
269 }
270
271
272 /**
273 refresh table: copy all parties elements in there.
274 Typically parties is something like
275 [{"uri":"http:130.161.180.1:8080/partiesserver/run/randomparty-1.3.0",
276 "capabilities":{"protocols":["SAOP"]},
277 "description":"places random bids until it can accept an offer with utility >0.6",
278 "id":"randomparty-1.3.0",
279 "partyClass":"geniusweb.exampleparties.randomparty.RandomParty"},
280 ...]
281 */
282 function updateParties(parties) {
283 updatePartiesCombobox(parties, document.getElementById("partyselection"),['SAOP','SHAOP']);
284 updatePartiesCombobox(parties, document.getElementById("cobpartyselection"),['COB']);
285 }
286
287 /**
288 @param parties a list of parties r(as received from the server)
289 @param combobox a combobox element to put the party URLs in
290 @param behaviours a list of behaviours for the parties. Only these are put in the combobox.
291 */
292 function updatePartiesCombobox(parties, combobox, behaviours) {
293 combobox.options.length=0;
294 for (var p in parties) {
295 var party = parties[p];
296 if (intersect(party.capabilities.behaviours, behaviours).length==0)
297 continue;
298 var option = document.createElement('option');
299 option.text = option.value = party.uri;
300 combobox.add(option, 0);
301 }
302
303 }
304
305 /**
306 @param a a list
307 @param b another list
308 @return intersection of a and b
309 */
310 function intersect(a, b) {
311 var t;
312 if (b.length > a.length) t = b, b = a, a = t; // indexOf to loop over shorter
313 return a.filter(function (e) {
314 return b.indexOf(e) > -1;
315 });
316 }
317
318
319 /**
320 updates parameters field to match the given text.
321 */
322 function updateParameters() {
323 var text="{"+document.getElementById("parameters").value+"}";
324 try {
325 parameters=JSON.parse(text);
326 } catch(e) {
327 alert("Parameters can not be parsed. "+e);
328 return;
329 }
330 }
331
332 /**
333 Called when the selected domain changes. Assumes knowndomains has been set.
334 Updates the available profiles in the profile combobox.
335 @param selection the name of the selected domain.
336 */
337 function selectDomain() {
338 // determined current selection
339 var domaincombobox = document.getElementById("domainselection");
340 if (domaincombobox.options.length==0) return; // fixme clean profiles options?
341 var domain = domaincombobox.options[domaincombobox.selectedIndex].value;
342
343 updateProfileComboBox(document.getElementById("profileselection"), knowndomains[domain]);
344 updateProfileComboBox(document.getElementById("cobprofileselection"), knowndomains[domain]);
345 }
346
347 function updateProfileComboBox(profilecombo, options) {
348 profilecombo.options.length=0;
349 for (var profile in options) {
350 var option = document.createElement('option');
351 option.text = option.value = options[profile];
352 profilecombo.add(option, 0);
353 }
354
355 }
356
357 /**
358 Called when user clicks "Add"
359 */
360 function addParty() {
361 addNormalParty();
362 addCobParty();
363 updatePartyProfileTable(); // what, MVC?
364 }
365
366 function addNormalParty() {
367 var partycombo = document.getElementById("partyselection");
368 var profilecombo = document.getElementById("profileselection");
369 var filteroptions = document.getElementById("filter").value;
370
371 if (partycombo.options.length==0) {
372 alert("Please set partier server and select a party");
373 return;
374 }
375 if (profilecombo.options.length==0) {
376 alert("Please set domain/profile server and select a domain and a profile");
377 return;
378 }
379
380 if (filteroptions!="") {
381 filteroptions="?"+filteroptions;
382 }
383 var newpartyprof = {};
384 newpartyprof["party"]={"partyref":partycombo.options[partycombo.selectedIndex].value ,
385 "parameters":parameters };
386 newpartyprof["profile"]=profilecombo.options[profilecombo.selectedIndex].value +filteroptions;
387
388 partyprofiles.push(newpartyprof)
389 }
390
391
392 function addCobParty() {
393 // we assume a sensible default has been loaded into the combo and set,
394 // regardless it being invisible
395 var partycombo = document.getElementById("cobpartyselection");
396 if (partycombo.options.length==0) {
397 alert("Please set cpb partier server and select a party");
398 return;
399 }
400
401 var newpartyprof = {};
402 if (getAdvancedCobSettings()) {
403 var profilecombo = document.getElementById("cobprofileselection");
404 var filteroptions = document.getElementById("cobfilter").value;
405
406 if (profilecombo.options.length==0) {
407 alert("Please set a cob profile");
408 return;
409 }
410 if (filteroptions!="") {
411 filteroptions="?"+filteroptions;
412 }
413 newpartyprof["party"]={"partyref":partycombo.options[partycombo.selectedIndex].value ,
414 "parameters":parameters };
415 newpartyprof["profile"]=profilecombo.options[profilecombo.selectedIndex].value +filteroptions;
416 } else {
417 var profilecombo = document.getElementById("profileselection");
418 newpartyprof["party"]={"partyref":partycombo.options[partycombo.selectedIndex].value ,
419 "parameters":{} };
420 newpartyprof["profile"]=profilecombo.options[profilecombo.selectedIndex].value;
421 }
422 cobpartyprofiles.push(newpartyprof)
423 }
424
425
426 /** updates the party and profiles table, to match the #partyprofiles list. */
427 function updatePartyProfileTable() {
428 var table = document.getElementById("partiesList");
429 table.innerHTML = ""; // clear table
430 for ( var pp in partyprofiles) {
431 var row = table.insertRow(-1);
432 var cell1 = row.insertCell(-1);
433 var cell2 = row.insertCell(-1);
434 var cell3 = row.insertCell(-1);
435 var cell4 = row.insertCell(-1);
436 var cell5 = row.insertCell(-1);
437 var cell6 = row.insertCell(-1);
438
439 cell1.innerHTML = partyprofiles[pp]["party"]["partyref"];
440 cell2.innerHTML = JSON.stringify(partyprofiles[pp]["party"]["parameters"]);
441 cell3.innerHTML = partyprofiles[pp]["profile"];
442 cell4.innerHTML = cobpartyprofiles[pp]["party"]["partyref"];
443 cell5.innerHTML = JSON.stringify(cobpartyprofiles[pp]["party"]["parameters"]);
444 cell6.innerHTML = cobpartyprofiles[pp]["profile"];
445 }
446
447 }
448
449 var x=1;
450 /**
451 start the session as currently set on this page.
452 We need to send a SessionSettings object to the server, which typically looks like this
453 but is protocol dependent (currently we do SAOP)
454
455 {"SAOPSettings":
456 {"participants":[
457 {"party":{"partyref":"http://party1","parameters":{}},"profile":"ws://profile1"},
458 {"party":{"partyref",}"http://party2","parameters":{}},"profile":"ws://profile2"}],
459 "deadline":{"deadlinetime":{"durationms":100}}}}
460
461 participants are already in the global partyprofiles dictionary
462 */
463 function start() {
464 if (Object.keys(partyprofiles).length <2) {
465 alert("At least 2 parties are needed to run a session.");
466 return;
467 }
468
469 // see https://www.w3schools.com/xml/dom_httprequest.asp
470 document.getElementById("startbutton").disabled=true;
471 document.getElementById("started").setAttribute("style","");
472
473 var xmlHttp = new XMLHttpRequest();
474 xmlHttp.onreadystatechange = function() {
475 if (this.readyState == 4) {
476 if (this.status == 200) {
477 var logurl="log/"+this.responseText+".json";
478 document.getElementById("logref").href=logurl;
479 document.getElementById("plotref").href="plotlog.xhtml?id="+this.responseText;
480
481 sometimeWhen(function() { return urlExists(logurl) },
482 function() { document.getElementById("results").setAttribute("style",""); });
483
484 }
485 else
486 alert("request failed:"+this.statusText);
487 }
488 }
489 xmlHttp.open("POST", "run", true);
490 xmlHttp.send(makeRequest());
491
492 }
493
494
495 /**
496 @return true iff the URL exists.
497 */
498 function urlExists(urlToFile) {
499 // Warning. Synchronous XMLHttpRequest on the main thread is
500 // deprecated because of its detrimental effects to the end user’s
501 // experience. For more help http://xhr.spec.whatwg.org/
502 var xhr = new XMLHttpRequest();
503 xhr.open('HEAD', urlToFile, false);
504 xhr.send();
505
506 return (xhr.status == "200")
507 }
508
509 function getSelectedProtocol() {
510 var protocolcombo = document.getElementById("selectedprotocol");
511 return protocolcombo.options[protocolcombo.selectedIndex].value;
512 }
513 /**
514 @return a json request package for the run server
515 */
516 function makeRequest() {
517
518 if (getSelectedProtocol()=="SHAOP") {
519 return makeShaopRequest();
520 } else {
521 return makeSaopRequest();
522 }
523 }
524
525 /**
526 @return a SAOP request
527 */
528 function makeSaopRequest() {
529 var deadline={};
530 var value = document.getElementById("deadlinevalue").value;
531 var dtypecombo = document.getElementById("deadlinetype");
532 if (dtypecombo.options[dtypecombo.selectedIndex].value=="TIME") {
533 deadline["deadlinetime"] = { "durationms": 1000*value};
534 } else {
535 // ROUNDS
536 deadline["deadlinerounds"] = {"rounds": value, "durationms":10000};
537 }
538
539 return JSON.stringify({"SAOPSettings": { "participants": partyprofiles, "deadline":deadline }});
540 }
541
542 /**
543 @return a SHAOP request
544 */
545 function makeShaopRequest() {
546 var deadline={};
547 var value = document.getElementById("deadlinevalue").value;
548 var dtypecombo = document.getElementById("deadlinetype");
549 if (dtypecombo.options[dtypecombo.selectedIndex].value=="TIME") {
550 deadline["deadlinetime"] = { "durationms": 1000*value};
551 } else {
552 // ROUNDS
553 deadline["deadlinerounds"] = {"rounds": value, "durationms":10000};
554 }
555
556 var parties=[];
557 for (let i=0; i< partyprofiles.length; i++) {
558 var group={};
559 group['shaop'] = partyprofiles[i];
560 group['cob'] = cobpartyprofiles[i];
561
562 parties.push(group);
563 }
564 return JSON.stringify({"SHAOPSettings": { "participants": parties, "deadline":deadline }});
565 }
566
567
568 /**
569 Initialize the page after html is loaded.
570 */
571 function init() {
572 selectProtocol();
573 document.getElementById("partiesserverurl").value =window.location.hostname+":8080/partiesserver-1.3.0"
574 document.getElementById("profilesserverurl").value =window.location.hostname+":8080/profilesserver-1.3.0"
575 connectDomain();
576 connectParties();
577
578 }
579 ]]>
580
581
582
583
584
585
586
587</script>
588
589</html>
Note: See TracBrowser for help on using the repository browser.