New player dialog and bugfixes
This commit is contained in:
@@ -20,7 +20,7 @@
|
||||
// ]]#
|
||||
</script>
|
||||
</head>
|
||||
<body class="vert flex">
|
||||
<body class="vert flex initial">
|
||||
#* Debugging code to list all web context properties
|
||||
<blockquote>
|
||||
#foreach($attr in $application.getAttributeNames())
|
||||
@@ -58,7 +58,7 @@
|
||||
<div id="success" class="hidden"></div>
|
||||
<div id="error" class="hidden"></div>
|
||||
</div>
|
||||
<div id="backdrop">
|
||||
<div id="backdrop"></div>
|
||||
<div id="dimmer"></div>
|
||||
<script type="text/javascript" src="/lib/store2-2.14.2.min.js"></script>
|
||||
<script type="text/javascript" src="/lib/tablesort-5.4.0.min.js"></script>
|
||||
@@ -76,6 +76,7 @@
|
||||
const locale = '${request.locale}';
|
||||
// #[[
|
||||
onLoad(() => {
|
||||
$('body').removeClass('initial');
|
||||
$('#lang').on('click', e => {
|
||||
$('#lang-list').toggleClass('shown');
|
||||
});
|
||||
@@ -90,10 +91,10 @@
|
||||
}
|
||||
});
|
||||
$('.popup .close').on('click', e => {
|
||||
console.log('click');
|
||||
let popup = e.target.closest('.popup');
|
||||
if (popup) {
|
||||
popup.classList.remove('shown');
|
||||
$('body').removeClass('dimmed');
|
||||
}
|
||||
});
|
||||
|
||||
|
@@ -13,58 +13,3 @@
|
||||
</a>
|
||||
</div>
|
||||
#end
|
||||
|
||||
##
|
||||
## New Tournament dialog
|
||||
##
|
||||
|
||||
<div id="new-tournament" class="ui fullscreen modal">
|
||||
<i class="close icon"></i>
|
||||
<div class="horz flex header">
|
||||
<span>New tournament</span>
|
||||
<div class="ui ordered unstackable steps">
|
||||
<div class="active step">
|
||||
<div class="content">
|
||||
<div class="title">Infos</div>
|
||||
<div class="description">name, place and date</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div class="content">
|
||||
<div class="title">Type</div>
|
||||
<div class="description">teams or players, rounds</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div class="content">
|
||||
<div class="title">Pairing</div>
|
||||
<div class="description">pairing system</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="scrolling content">
|
||||
#translate('tournament-form.inc.html')
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button class="ui cancel black floating button">Cancel</button>
|
||||
<button class="ui next green right labeled icon floating button">
|
||||
<i class="checkmark icon"></i>
|
||||
Next
|
||||
</button>
|
||||
</div></div>
|
||||
<script type="text/javascript">
|
||||
// #[[
|
||||
onLoad(() => {
|
||||
$('#new').on('click', e => {
|
||||
$('#new-tournament').modal(true);
|
||||
});
|
||||
/*
|
||||
new DateRangePicker($('#date-range')[0], {
|
||||
language: lang
|
||||
});
|
||||
*/
|
||||
$('#new-tournament .tab.segment:first-child').addClass('active');
|
||||
});
|
||||
// ]]#
|
||||
</script>
|
||||
|
@@ -49,7 +49,7 @@ Element.prototype.toggleClass = function(className) {
|
||||
NodeList.prototype.hasClass = function(className) {
|
||||
return this.item(0).classList.contains(className);
|
||||
}
|
||||
Element.prototype.toggleClass = function(className) {
|
||||
Element.prototype.hasClass = function(className) {
|
||||
this.classList.contains(className);
|
||||
}
|
||||
Node.prototype.offset = function() {
|
||||
@@ -102,3 +102,17 @@ Element.prototype.text = function(txt) {
|
||||
this.textContent = txt;
|
||||
}
|
||||
}
|
||||
NodeList.prototype.item = function (i) {
|
||||
return this[+i || 0];
|
||||
};
|
||||
NodeList.prototype.find = function(selector) {
|
||||
let result = [];
|
||||
this.forEach(function (elem, i) {
|
||||
let partial = elem.find(selector);
|
||||
result = result.concat([...partial]);
|
||||
});
|
||||
return Reflect.construct(Array, result, NodeList);
|
||||
}
|
||||
Element.prototype.find = function (selector) {
|
||||
return this.querySelectorAll(':scope ' + selector);
|
||||
}
|
||||
|
@@ -136,19 +136,27 @@ function spinner(show) {
|
||||
else $('#backdrop').removeClass('active');
|
||||
}
|
||||
|
||||
function modal(id) {
|
||||
$('body').addClass('dimmed');
|
||||
$(`#${id}.popup`).addClass('shown');
|
||||
}
|
||||
|
||||
onLoad(() => {
|
||||
/*
|
||||
document.on('click', e => {
|
||||
if (!e.target.closest('.modal')) $('.modal').hide();
|
||||
})
|
||||
$('button.close').on('click', e => {
|
||||
let modal = e.target.closest('.popup');
|
||||
if (modal) {
|
||||
modal.removeClass('shown');
|
||||
$('body').removeClass('dimmed');
|
||||
}
|
||||
});
|
||||
$('.checkbox').on('click', e => {
|
||||
let chk = e.target.closest('.checkbox');
|
||||
chk.toggleClass('active');
|
||||
let checkbox = chk.find('input')[0];
|
||||
checkbox.checked = !checkbox.checked;
|
||||
});
|
||||
/* commented for now - do we want this?
|
||||
$('#dimmer').on('click', e => $('.popup').removeClass('shown');
|
||||
*/
|
||||
$('i.close.icon').on('click', e => {
|
||||
let modal = e.target.closest('.modal');
|
||||
if (modal) modal.modal(false);
|
||||
});
|
||||
$('.modal .actions .cancel').on('click', e => {
|
||||
e.target.closest('.modal').modal(false);
|
||||
});
|
||||
$('#dimmer').on('click', e => $('.modal').modal(false));
|
||||
});
|
||||
|
||||
|
@@ -7,7 +7,7 @@ onLoad(() => {
|
||||
|
||||
$('#cancel, #close').on('click', e => {
|
||||
e.preventDefault();
|
||||
if ($('#tournament-infos').hasClass('edit')) {
|
||||
if ($('#tournament-infos').hasClass('edit') && typeof(tour_id) !== 'undefined') {
|
||||
$('#tournament-infos').removeClass('edit')
|
||||
} else {
|
||||
document.location.href = '/index';
|
||||
|
9
view-webapp/src/main/webapp/js/tour-registration.inc.js
Normal file
9
view-webapp/src/main/webapp/js/tour-registration.inc.js
Normal file
@@ -0,0 +1,9 @@
|
||||
onLoad(() => {
|
||||
$('input.numeric').imask({
|
||||
mask: Number,
|
||||
scale: 0,
|
||||
min: 0,
|
||||
max: 4000
|
||||
});
|
||||
//$('')
|
||||
});
|
@@ -1,4 +1,4 @@
|
||||
<div id="information" class="tab-content">
|
||||
<div id="information" #if($tour)class="tab-content"#end>
|
||||
<form id="tournament-infos" class="ui form #if(!$tour)edit#end">
|
||||
<div class="roundbox">
|
||||
<div class="two stackable fields">
|
||||
|
@@ -14,31 +14,100 @@ $parts
|
||||
</div>
|
||||
<div id="player" class="popup">
|
||||
<div class="popup-body">
|
||||
<div class="close">
|
||||
<i class="ui circular times icon"></i>
|
||||
</div>
|
||||
<div class="popup-content">
|
||||
<form id="player-form" class="edit">
|
||||
<div class="two fields">
|
||||
<div class="field">
|
||||
<form id="player-form" class="ui form edit">
|
||||
<div class="four stackable fields">
|
||||
<div class="twelve wide field">
|
||||
<div class="ui icon input">
|
||||
<input type="text" placeholder="Search...">
|
||||
<i class="search icon"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="two wide field">
|
||||
<div class="active checkbox">
|
||||
<div class="circle"></div>
|
||||
<input type="checkbox" class="hidden" checked/>
|
||||
</div>
|
||||
AGA
|
||||
</div>
|
||||
<div class="two wide field">
|
||||
<div class="active checkbox">
|
||||
<div class="circle"></div>
|
||||
<input type="checkbox" class="hidden" checked/>
|
||||
</div>
|
||||
EGF
|
||||
</div>
|
||||
<div class="two wide field">
|
||||
<div class="active checkbox">
|
||||
<div class="circle"></div>
|
||||
<input type="checkbox" class="hidden" checked/>
|
||||
</div>
|
||||
FFG
|
||||
</div>
|
||||
</div>
|
||||
<div class="two stackable fields">
|
||||
<div class="eight wide field">
|
||||
<label>Family name</label>
|
||||
<span class="info"></span>
|
||||
<input type="text" name="name" placeholder="last name"/>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="eight wide field">
|
||||
<label>Given name</label>
|
||||
<span class="info"></span>
|
||||
<input type="text" name="name" placeholder="first name"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="two stackable fields">
|
||||
<div class="eight wide field">
|
||||
<label>Country</label>
|
||||
<span class="info"></span>
|
||||
<select name="country">
|
||||
<option></option>
|
||||
#set($defaultCountry = $translate.defaultCountry[$request.lang])
|
||||
#foreach($country in $countries.countries)
|
||||
<option value="$country.key">$country.value</option>
|
||||
#end
|
||||
</select>
|
||||
</div>
|
||||
<div class="eight wide field">
|
||||
<label>Club</label>
|
||||
<span class="info"></span>
|
||||
<input type="text" name="name" placeholder="club"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="two stackable fields">
|
||||
<div class="eight wide field">
|
||||
<label>Rank</label>
|
||||
<span class="info"></span>
|
||||
<select name="rank">
|
||||
<option></option>
|
||||
#levels()
|
||||
</select>
|
||||
</div>
|
||||
<div class="eight wide field">
|
||||
<label>Rating</label>
|
||||
<span class="info"></span>
|
||||
<input name="rating" type="text" class="numeric"/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="popup-footer">
|
||||
<button class="ui gray right labeled icon floating close button">
|
||||
<i class="times icon"></i>
|
||||
Cancel
|
||||
</button>
|
||||
<button class="ui green right labeled icon floating add button">
|
||||
<i class="plus icon"></i>
|
||||
Register
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
onLoad(() => {
|
||||
$('#add').on('click', e => {
|
||||
$('#player').addClass('shown');
|
||||
modal('player');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
@@ -126,9 +126,10 @@
|
||||
});
|
||||
// ]]#
|
||||
#include('/js/tour-information.inc.js')
|
||||
#include('/js/tour-registration.inc.js')
|
||||
</script>
|
||||
<div id="invalid_character" class="hidden">Invalid character</div>
|
||||
<script type="text/javascript" src="/lib/datepicker-1.3.4/datepicker-full#*.min*#.js"></script>
|
||||
<script type="text/javascript" src="/lib/datepicker-1.3.4/datepicker-full.min.js"></script>
|
||||
#if($datepickerLocale != 'en')
|
||||
<script type="text/javascript" src="/lib/datepicker-1.3.4/locales/${datepickerLocale}.js"></script>
|
||||
#end
|
||||
|
Reference in New Issue
Block a user