Web view still in progress
This commit is contained in:
Claude Brisson
309
view-webapp/src/main/webapp/tour.html
Normal file
309
view-webapp/src/main/webapp/tour.html
Normal file
@@ -0,0 +1,309 @@
|
||||
#macro(hms $value)#if($value)#set($hh = $value / 3600)#set($mm = ($value - $hh) / 60)#set($ss = $value % 60)$hh:$mm:$ss#end#end
|
||||
#macro(levels $sel)
|
||||
#foreach($k in [-30..-1])
|
||||
#set($disp = "${math.abs($k)}k"
|
||||
<option value="$k" #if($sel && $sel == $k)selected#end>$disp</option>
|
||||
#end
|
||||
#foreach($d in [0..9])
|
||||
#set($dan = $d + 1)
|
||||
#set($disp = "${dan}d")
|
||||
<option value="$d" #if($sel && $sel == $d)selected#end>$disp</option>
|
||||
#end
|
||||
#end
|
||||
#if($params.tour)
|
||||
#set($tour = $api.get("tour/${params.tour}"))
|
||||
#if (!$tour)
|
||||
<div class="section">
|
||||
<h2 class="error">Invalid tournament id</h2>
|
||||
</div>
|
||||
#end
|
||||
#end
|
||||
<div class="section">
|
||||
<h2>#if($tour)$tour.name#{else}New tournament#end</h2>
|
||||
<form id="tournament-infos" class="ui form">
|
||||
<div class="roundbox">
|
||||
<div class="two stackable fields">
|
||||
<div class="eleven wide field">
|
||||
<label>Name</label>
|
||||
<input type="text" name="name" required placeholder="Tournament name" #if($tour)value="$tour.name"#end/>
|
||||
</div>
|
||||
<div class="five wide field">
|
||||
<label>Short name</label>
|
||||
<input type="text" name="shortName" required placeholder="short_name" #if($tour)value="$tour.shortName"#end/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Dates</label>
|
||||
<span id="date-range">
|
||||
from
|
||||
<input type="text" name="startDate" required class="date" placeholder="start date" #if($tour)value="$tour.startDate"#end/>
|
||||
to
|
||||
<input type="text" name="endDate" required class="date" placeholder="end date" #if($tour)value="$tour.startDate"#end/>
|
||||
</span>
|
||||
</div>
|
||||
<div class="two stackable fields">
|
||||
<div class="seven wide field">
|
||||
<label>Country</label>
|
||||
<select name="country">
|
||||
<option></option>
|
||||
#foreach($country in $countries.countries)
|
||||
<option value="$country.key" #if($tour && $country.key == $tour.country || !$tour && $country.key == $request.lang)selected#end>$country.value</option>
|
||||
#end
|
||||
</select>
|
||||
</div>
|
||||
<div class="nine wide field">
|
||||
<label>Location</label>
|
||||
<input name="location" type="text" placeholder="tournament location" value="#if($tour)$!tour.location#end"/>
|
||||
<div>
|
||||
or
|
||||
<label>
|
||||
<input name="online" type="checkbox" #if($tour && $tour.online)checked#end/> <b>online tournament</b>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="roundbox">
|
||||
<div class="two fields">
|
||||
<div class="fourteen wide field">
|
||||
<label>Tournament type</label>
|
||||
<select name="type">
|
||||
<option value="INDIVIDUAL" #if(!$tour || $tour.type == 'INDIVIDUAL')checked#end>Standard tournament of individual players</option>
|
||||
<option value="PAIRGO" #if($tour && $tour.type == 'PAIRGO')checked#end>Pair-go tournament</option>
|
||||
<option value="RENGO2" #if($tour && $tour.type == 'RENGO2')checked#end>Rengo tournament with 2 players per team</option>
|
||||
<option value="RENGO3" #if($tour && $tour.type == 'RENGO3')checked#end>Rengo tournament with 3 players per team</option>
|
||||
<option value="TEAM2" #if($tour && $tour.type == 'TEAM2')checked#end>Team tournament of 2 individual players per team</option>
|
||||
<option value="TEAM3" #if($tour && $tour.type == 'TEAM3')checked#end>Team tournament of 3 individual players per team</option>
|
||||
<option value="TEAM4" #if($tour && $tour.type == 'TEAM4')checked#end>Team tournament of 4 individual players per team</option>
|
||||
<option value="TEAM5" #if($tour && $tour.type == 'TEAM5')checked#end>Team tournament of 5 individual players per team</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="four wide field">
|
||||
<label>Rounds</label>
|
||||
<span><input type="number" name="rounds" required min="1" value="#if($tour)rounds#{else}1#end"/> rounds</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="four fields">
|
||||
<div class="four wide field">
|
||||
<label>Pairing</label>
|
||||
<select name="pairing">
|
||||
<option value="SWISS" #if($tour && $tour.pairing.type == 'SWISS')checked#end>Swiss</option>
|
||||
<option value="MAC_MAHON" #if(!$tour || $tour.pairing.type == 'MAC_MAHON')checked#end>Mac Mahon</option>
|
||||
<option value="ROUND_ROBIN" #if($tour && $tour.pairing.type == 'ROUND_ROBIN')checked#end>Round-robin</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mms four wide field">
|
||||
<label>MMS floor</label>
|
||||
<select name="mmsFloor">
|
||||
#set($floor = -20)
|
||||
#if($tour) #set($floor = $tour.pairing.
|
||||
</select>
|
||||
</div>
|
||||
<div class="mms four wide field">
|
||||
<label>MMS ceiling</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="roundbox">
|
||||
<div class="three stackable fields">
|
||||
<div class="seven wide field">
|
||||
<label>Rules</label>
|
||||
<select name="rules">
|
||||
<option value="CHINESE" #if($tour && $tour.rules == 'CHINESE')selected#end>Chinese rules</option>
|
||||
<option value="FRENCH" #if(!$tour || $tour.rules == 'FRENCH')selected#end>French rules</option>
|
||||
<option value="JAPANESE" #if($tour && $tour.rules == 'JAPANESE')selected#end>Japanese rules</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="three wide field">
|
||||
<label>Goban</label>
|
||||
<select name="gobanSize">
|
||||
<option value="9" #if($tour && $tour.gobanSize == 9)selected#end>9x9</option>
|
||||
<option value="13" #if($tour && $tour.gobanSize == 9)selected#end>13x13</option>
|
||||
<option value="19" #if(!$tour || $tour.gobanSize == 9)selected#end>19x19</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="three wide field">
|
||||
<label>Komi</label>
|
||||
<input name="komi" type="number" step="0.5" value="#if($tour)$tour.komi#{else}7.5#end"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="four fields">
|
||||
<div class="seven wide field">
|
||||
<label>Time system</label>
|
||||
<select name="timeSystemType">
|
||||
<option value="FISCHER" #if(!$tour || $tour.timeSystem.type == 'FISCHER')selected#end>Fischer timing</option>
|
||||
<option value="CANADIAN" #if($tour && $tour.timeSystem.type == 'CANADIAN')selected#end>Canadian byo-yomi</option>
|
||||
<option value="STANDARD" #if($tour && $tour.timeSystem.type == 'STANDARD')selected#end>Standard byo-yomi</option>
|
||||
<option value="SUDDEN_DEATH" #if($tour && $tour.timeSystem.type == 'SUDDEN_DEATH')selected#end>Sudden death</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="three wide field">
|
||||
<label>Main time</label>
|
||||
<input name="mainTime" type="text" class="duration" value="#if($tour)#hms($tour.timeSystem.mainTime)#{else}00:40:00#end"/>
|
||||
</div>
|
||||
<div id="increment" class="three wide field #if($tour && $tour.timeSystem.type != 'FISCHER')hidden#end">
|
||||
<label>Increment</label>
|
||||
<input name="increment" type="text" class="duration" value="#if($tour)#hms($tour.timeSystem.increment)#{else}00:00:20#end"/>
|
||||
</div>
|
||||
<div id="maxTime" class="three wide field #if($tour && $tour.timeSystem.type != 'FISCHER')hidden#end">
|
||||
<label>Max time</label>
|
||||
<input name="maxTime" type="text" class="duration" value="#if($tour)#hms($tour.timeSystem.maxTime)#{else}00:40:00#end"/>
|
||||
</div>
|
||||
<div id="byoyomi" class="three wide field #if(!$tour || $tour.timeSystem.type != 'CANADIAN' && $tour.timeSystem.type != 'STANDARD')hidden#end">
|
||||
<label>Byo-yomi time</label>
|
||||
<input name="byoyomi" type="text" class="duration" value="#if($tour)#hms($tour.timeSystem.byoyomi)#{else}00:05:00#end"/>
|
||||
</div>
|
||||
<div id="periods" class="three wide field #if(!$tour || $tour.timeSystem.type != 'STANDARD')hidden#end">
|
||||
<label>Byo-yomi periods</label>
|
||||
<input name="periods" type="number" min="0" value="#if($tour)$tour.timeSystem.periods#{else}3#end"/>
|
||||
</div>
|
||||
<div id="stones" class="three wide field #if(!$tour || $tour.timeSystem.type != 'CANADIAN')hidden#end">
|
||||
<label>Byo-yomi stones</label>
|
||||
<input name="stones" class="seconds" type="number" min="0" value="#if($tour)$tour.timeSystem.stones#{else}15#end"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<button id="validate" class="ui next green right labeled icon floating button">
|
||||
<i class="checkmark icon"></i>
|
||||
Validate
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<!-- error messages included as html elements so that they are translated -->
|
||||
<div id="required_field" class="hidden">Required field</div>
|
||||
<div id="invalid_character" class="hidden">Invalid character</div>
|
||||
<script type="text/javascript">
|
||||
#if($tour)
|
||||
const tour_id = ${tour.id};
|
||||
#end
|
||||
// #[[
|
||||
const safeRegex = /^[-a-zA-Z0-9_.]+$/;
|
||||
function parseDate(value) {
|
||||
let locale = Datepicker.locales[lang];
|
||||
if (locale) {
|
||||
let date = Datepicker.parseDate(value, locale.format, locale);
|
||||
return Datepicker.formatDate(date, 'yyyy-mm-dd')
|
||||
}
|
||||
else return undefined;
|
||||
}
|
||||
onLoad(() => {
|
||||
|
||||
$('#validate').on('click', e => {
|
||||
let valid = true;
|
||||
// validate required fields
|
||||
let required = ['name', 'shortName', 'startDate', 'endDate'];
|
||||
if (!$('input[name="online"]')[0].checked) required.push('location')
|
||||
for (let name of required) {
|
||||
let ctl = $(`input[name=${name}]`)[0];
|
||||
let val = ctl.value;
|
||||
if (val) {
|
||||
ctl.setCustomValidity('');
|
||||
} else {
|
||||
valid = false;
|
||||
ctl.setCustomValidity(msg('required_field'));
|
||||
}
|
||||
}
|
||||
if (!valid) return;
|
||||
// validate short_name
|
||||
let shortNameCtl = $('input[name="shortName"]')[0];
|
||||
let shortName = shortNameCtl.value;
|
||||
if (safeRegex.test(shortName)) {
|
||||
shortNameCtl.setCustomValidity('');
|
||||
} else {
|
||||
valid = false;
|
||||
shortNameCtl.setCustomValidity(msg('invalid_character'));
|
||||
}
|
||||
});
|
||||
|
||||
new DateRangePicker($('#date-range')[0], {
|
||||
autohide: true,
|
||||
language: lang
|
||||
});
|
||||
|
||||
$('#tournament-infos').on('submit', e => {
|
||||
e.preventDefault();
|
||||
let tour = {
|
||||
name: formValue('name'),
|
||||
shortName: formValue('shortName'),
|
||||
startDate: parseDate(formValue('startDate')),
|
||||
endDate: parseDate(formValue('endDate')),
|
||||
type: formValue('type'),
|
||||
rounds: formValue('rounds'),
|
||||
country: formValue('country'),
|
||||
online: formValue('online'),
|
||||
location: formValue('online') ? "" : formValue('location'),
|
||||
pairing: {
|
||||
type: formValue('pairing')
|
||||
},
|
||||
timeSystem: {
|
||||
type: formValue('timeSystemType')
|
||||
}
|
||||
}
|
||||
console.log(tour);
|
||||
if (typeof(tour_id) !== 'undefined') {
|
||||
api.putJson(`tour/${tour_id}`, tour);
|
||||
} else {
|
||||
api.postJson('tour', tour)
|
||||
.then((o) => {
|
||||
if (o !== 'error') {
|
||||
console.log("success ==> %o", o);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$('input[name="online"]').on('change', e => {
|
||||
$('input[name="location"]')[0].disabled = e.target.checked;
|
||||
});
|
||||
|
||||
$('select[name="timeSystemType"]').on('change', e => {
|
||||
switch (e.target.value) {
|
||||
case 'CANADIAN':
|
||||
$('#increment').addClass('hidden');
|
||||
$('#maxTime').addClass('hidden');
|
||||
$('#byoyomi').removeClass('hidden');
|
||||
$('#periods').addClass('hidden');
|
||||
$('#stones').removeClass('hidden');
|
||||
break;
|
||||
case 'FISCHER':
|
||||
$('#increment').removeClass('hidden');
|
||||
$('#maxTime').removeClass('hidden');
|
||||
$('#byoyomi').addClass('hidden');
|
||||
$('#periods').addClass('hidden');
|
||||
$('#stones').addClass('hidden');
|
||||
break;
|
||||
case 'STANDARD':
|
||||
$('#increment').addClass('hidden');
|
||||
$('#maxTime').addClass('hidden');
|
||||
$('#byoyomi').removeClass('hidden');
|
||||
$('#periods').removeClass('hidden');
|
||||
$('#stones').addClass('hidden');
|
||||
break;
|
||||
case 'SUDDEN_DEATH':
|
||||
$('#increment').addClass('hidden');
|
||||
$('#maxTime').addClass('hidden');
|
||||
$('#byoyomi').addClass('hidden');
|
||||
$('#periods').addClass('hidden');
|
||||
$('#stones').addClass('hidden');
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
$('input.duration').imask({
|
||||
mask: '00:00:00',
|
||||
lazy: false,
|
||||
overwrite: true
|
||||
});
|
||||
});
|
||||
// ]]#
|
||||
</script>
|
||||
<script type="text/javascript" src="/lib/datepicker-1.3.3/datepicker-full.min.js"></script>
|
||||
<script type="text/javascript" src="/lib/datepicker-1.3.3/locales/${request.lang}.js"></script>
|
||||
<link rel="stylesheet" href="/lib/datepicker-1.3.3/datepicker.min.css">
|
||||
<style type="text/css">
|
||||
.ui.form input[type=checkbox][name=online] {
|
||||
vertical-align: initial;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user