Context Navigation

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

Rev	Line
[1]	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 />
[14]	20	<input type="number" id="ntournaments" min="1" max="1000000" value="1" />
	21	Number of times to repeat the entire tournament
[1]	22	<br />
[14]	23
[1]	24	<br />
[14]	25	<input type="number" id="teamspersession" min="2" max="10" value="2" />
	26	Number of teams in each session
	27	<br />
[1]	28
[12]	29	<input type="checkbox" id="reuseteams" /> Pick teams with return when
	30	creating sessions
[1]	31	<br />
	32
	33	<br />
	34	<div id="box" class="box">
[12]	35	Session Protocol settings <br /> Session Protocol: <select
	36	id="protocolselection" onchange="selectProtocol()">
[1]	37	<option value="SAOP">SAOP</option>
[8]	38	<option value="SHAOP">SHAOP</option>
[12]	39	</select> <br /> Deadline: <input type="number" id="deadlinevalue"
[6]	40	name="deadline" min="1" max="10000" value="10" /> <select
	41	id="deadlinetype">
[8]	42	<option value="ROUNDS">rounds</option>
[1]	43	<option value="TIME">seconds</option>
	44	</select>
	45	</div>
	46	<br />
	47
	48	<div id="box" class="box">
[12]	49	<h3>Profiles</h3>
	50	Domain/Profile Server: <input type="url" name="url"
[11]	51	id="profilesserverurl" value="localhost:8080/profilesserver-1.3.1"
[1]	52	pattern=".*:[0-9]+/profilesserver" size="30"
[6]	53	onchange="connectDomain()"> </input> <br /> Domain: <select
	54	id="domainselection" onchange="selectDomain()">
[1]	55	<!-- <option>Waiting for profiles server</option> -->
[6]	56	</select> <br /> <br />
[12]	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>
[8]	67	<br /> <br />
[1]	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">
[12]	82	<h3>Teams</h3>
[6]	83	<br /> Parties Server: <input type="url" name="url"
[11]	84	id="partiesserverurl" value="localhost:8080/partiesserver-1.3.1"
[1]	85	pattern=".*:[0-9]+/partiesserver" size="30"
[6]	86	onchange="connectParties()"> </input> <br /> <br />
[12]	87	<!-- party 1 selection -->
[1]	88	Party: <select id="partyselection">
[16]	89	</select>
	90	<br /> Parameters: {
	91	<textarea id="parameters" rows="2" cols="70"
	92	onchange="getParameters('parameters')" value="" />
	93	} <br />
[12]	94	<!-- party 2 selection -->
	95	<div class="onlySHAOP">
	96	COB: <select id="partyselection2">
[16]	97	</select>
	98	<br /> Parameters: {
	99	<textarea id="parameters2" rows="2" cols="70"
	100	onchange="getParameters('parameters2')" value="" />
[12]	101	}
	102	</div>
	103	<br />
	104
	105
	106	<button onclick="addTeam()">Add</button>
	107
[6]	108	<br /> <br />
[1]	109	<table>
	110	<thead>
[6]	111	<th align="left">Party</th>
	112	<th align="left">Parameters</th>
[14]	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>
[1]	117	</thead>
[12]	118	<tbody id="teamList">
	119	<tr id="FIXME REMOVE">
[1]	120	</tr>
	121
	122	</tbody>
	123	</table>
	124
	125	</div>
	126	<br />
	127	<form>
[6]	128	<input id="startbutton" type="button" value="Start Tournament"
	129	onclick="start()" />
[1]	130	</form>
[6]	131	<div id="started" style="visibility: hidden">
	132	Your tournament started. Click <a href="" id="logref">here</a> to view
[12]	133	the log file. <br /> <a href="" id="plotref">show results table.</a>.
[1]	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
[6]	157
[12]	158
	159
	160
	161
	162
	163
	164
	165
[14]	166
[16]	167
[1]	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
[12]	180	var teamslist=[];
[1]	181	var profiles=[]
	182
[12]	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
[1]	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
[12]	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	}
[1]	303
[12]	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;
[1]	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;
[12]	317	if (option.text.includes(select) ) option.selected=true;
[1]	318	combobox.add(option, 0);
	319	}
[12]	320	return selection;
[1]	321	}
	322
	323
[12]	324
[6]	325	/**
[12]	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.
[6]	328	*/
[12]	329	function getParameters(elementname) {
	330	var text="{"+document.getElementById(elementname).value+"}";
[6]	331	try {
[12]	332	return JSON.parse(text);
[6]	333	} catch(e) {
[12]	334	alert("Parameters can not be parsed. Make sure you write correct JSON here."+e);
[6]	335	}
[12]	336	return {};
	337	}
[1]	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;
[12]	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) {
[1]	362	profilecombo.options.length=0;
[12]	363	for (var profile in profileslist) {
[1]	364	var option = document.createElement('option');
[12]	365	option.text = option.value = profileslist[profile];
[1]	366	profilecombo.add(option, 0);
	367	}
	368	}
	369
[12]	370
[1]	371	/**
	372	Called when user clicks "Add"
	373	*/
[12]	374	function addTeam() {
[1]	375	var partycombo = document.getElementById("partyselection");
[12]	376	var partycombo2 = document.getElementById("partyselection2");
	377	var param = getParameters("parameters");
	378	var param2 = getParameters("parameters2");
[1]	379
[12]	380
[1]	381	if (partycombo.options.length==0) {
	382	alert("Please set partier server and select a party");
	383	return;
	384	}
[12]	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();
[1]	391	}
	392
[12]	393	/** updates the teams table, to match the #partyprofiles list. */
	394	function updateTeamsTable() {
	395	var table = document.getElementById("teamList");
[1]	396	table.innerHTML = ""; // clear table
[12]	397	for ( const team of teamslist) {
[1]	398	var row = table.insertRow(-1);
[12]	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"];
[16]	404	cell2.innerHTML = JSON.stringify(party["parameters"]).replace(/,/g,", ");;
	405	cell2.setAttribute("style","overflow-wrap: anywhere;");
[12]	406	if (col>0) {
	407	cell1.className = cell2.className = "onlySHAOP";
	408	}
	409
	410	}
[1]	411	}
[12]	412
	413	selectProtocol(); // HACK we need to KEEP onlySHAOP elements hidden
[1]	414	}
	415
	416	/**
[12]	417	@param profilenr the profile nr, 1 for normal , 2 for cob profile
[1]	418	*/
[12]	419	function getProfile(profilenr) {
	420	var profilecombo = document.getElementById("profileselection"+profilenr);
[1]	421	if (profilecombo.options.length==0) {
	422	alert("Please set domain/profile server and select a domain and a profile");
[12]	423	throw "blabla";
[1]	424	}
[12]	425	var filteroptions = document.getElementById("filter"+profilenr).value;
[8]	426	if (filteroptions!="") {
	427	filteroptions="?"+filteroptions;
	428	}
	429
[12]	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)]);
[1]	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
[12]	446	for ( const profileset of profiles) {
[1]	447	var row = table.insertRow(-1);
[12]	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	}
[1]	454	}
[12]	455	selectProtocol(); // HACK we need to KEEP onlySHAOP elements hidden
[1]	456	}
	457
	458	/**
	459	start the tournament as currently set on this page.
[8]	460	We need to send a TournamentSettings object to the server, which typically looks like this with SAOP
	461	<code>
[1]	462	{"AllPermutationsSettings":{"parties":["party1","party2"],
	463	"profiles":["profile1","profile2","profile3"],
	464	"reuseParties":false,
	465	"partiesPerSession":2,
	466	"sessionsettings":{"SAOPSettings":{"participants":[],"deadline":{"deadlinetime":{"durationms":10}}}}}}
[8]	467	</code>
	468	participants are already in the global partyprofiles dictionary
[1]	469
[8]	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>
[1]	484	*/
	485	function start() {
[12]	486	const npersession = document.getElementById("teamspersession").value;
[1]	487
[12]	488	if (teamslist.length < npersession) {
	489	alert("At least "+npersession+" teams are needed.");
[1]	490	return;
	491	}
	492
	493	if (profiles.length < npersession) {
[12]	494	alert("At least "+npersession+" profilesets are needed.");
[1]	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";
[9]	506	document.getElementById("plotref").href="utilstable.xhtml?"+this.responseText;
[1]	507	} else
	508	alert("request failed:"+this.statusText);
	509	}
	510	}
	511	xmlHttp.open("POST", "run", true);
	512	xmlHttp.send(makeRequest());
	513	}
	514
	515	/**
[12]	516	@return a json request package containing a AllPermutationsSettings.
	517	It assumes that global vars parties and sessionSettings have been set properly.
[1]	518	*/
	519	function makeRequest() {
[12]	520	const npersession = document.getElementById("teamspersession").value;
[14]	521	const ntournaments = document.getElementById("ntournaments").value;
[12]	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
[1]	527	var deadline={};
[12]	528	const value = document.getElementById("deadlinevalue").value;
	529	const dtypecombo = document.getElementById("deadlinetype");
[1]	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
[8]	537	// create S(H)AOPSettings. [header] is a weird ECMA script workaround for javascript issue.
[12]	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,
[14]	556	"reuseTeams":reuseTeams,"teamsPerSession":npersession,"sessionsettings":sessionSettings,
	557	"numberTournaments":ntournaments}});
[1]	558	}
	559
	560	/**
	561	Initialize the page after html is loaded.
	562	*/
	563	function init() {
[16]	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";
[2]	566
[12]	567	selectProtocol();
[1]	568	connectDomain();
	569	connectParties();
	570	}
	571
	572
	573	]]>
	574
	575
	576
	577
[6]	578
[12]	579
	580
	581
	582
	583
	584
	585
	586
[14]	587
[16]	588
[1]	589	</script>
	590
	591	</html>

Note: See TracBrowser for help on using the repository browser.

Download in other formats: