Search and search switches are functional
This commit is contained in:
@@ -92,14 +92,13 @@
|
||||
$('#lang-list').removeClass('shown');
|
||||
}
|
||||
});
|
||||
$('.popup .close').on('click', e => {
|
||||
$('.popup .popup-footer .close').on('click', e => {
|
||||
let popup = e.target.closest('.popup');
|
||||
if (popup) {
|
||||
popup.classList.remove('shown');
|
||||
$('body').removeClass('dimmed');
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
// syntaxic sugar for IMask
|
||||
|
@@ -113,6 +113,32 @@ NodeList.prototype.find = function(selector) {
|
||||
});
|
||||
return Reflect.construct(Array, result, NodeList);
|
||||
}
|
||||
Element.prototype.find = function (selector) {
|
||||
Element.prototype.find = function(selector) {
|
||||
return this.querySelectorAll(':scope ' + selector);
|
||||
}
|
||||
|
||||
NodeList.prototype.clear = function() {
|
||||
this.forEach(function (elem, i) {
|
||||
elem.clear();
|
||||
});
|
||||
return this;
|
||||
}
|
||||
Element.prototype.clear = function() {
|
||||
this.innerHTML = '';
|
||||
return this;
|
||||
}
|
||||
|
||||
/*
|
||||
TODO - conflicts with from.val(), rename one of the two
|
||||
NodeList.prototype.val = function(value) {
|
||||
this.item(0).val(value);
|
||||
}
|
||||
Element.prototype.val = function(value) {
|
||||
// TODO - check that "this" has the "value" property
|
||||
if (typeof(value) === 'undefined') {
|
||||
return this.value;
|
||||
} else {
|
||||
this.value = value;
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
@@ -137,7 +137,7 @@ HTMLFormElement.prototype.val = function(name, value) {
|
||||
ctl.checked = value !== 'false' && Boolean(value);
|
||||
return;
|
||||
}
|
||||
else return ctl.checked;
|
||||
else return ctl.checked && ctl.value ? ctl.value : ctl.checked;
|
||||
}
|
||||
console.error(`unhandled input tag or type for input ${name} (tag: ${tag}, type:${type}`);
|
||||
return null;
|
||||
@@ -171,12 +171,6 @@ onLoad(() => {
|
||||
$('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');
|
||||
*/
|
||||
|
@@ -1,3 +1,50 @@
|
||||
const SEARCH_DELAY = 100;
|
||||
let searchTimer = undefined;
|
||||
let resultTemplate;
|
||||
|
||||
function initSearch() {
|
||||
let needle = $('#needle')[0].value;
|
||||
if (searchTimer) {
|
||||
clearTimeout(searchTimer);
|
||||
}
|
||||
searchTimer = setTimeout(() => {
|
||||
search(needle);
|
||||
}, SEARCH_DELAY);
|
||||
}
|
||||
|
||||
function search(needle) {
|
||||
needle = needle.trim();
|
||||
console.log(needle)
|
||||
if (needle && needle.length > 2) {
|
||||
let form = $('#player-form')[0];
|
||||
let search = {
|
||||
needle: needle,
|
||||
aga: form.val('aga'),
|
||||
egf: form.val('egf'),
|
||||
ffg: form.val('ffg'),
|
||||
}
|
||||
let country = form.val('countryFilter');
|
||||
if (country) search.countryFilter = country;
|
||||
let searchFormState = {
|
||||
countryFilter: country ? true : false,
|
||||
aga: search.aga,
|
||||
egf: search.egf,
|
||||
ffg: search.ffg
|
||||
};
|
||||
store('searchFormState', searchFormState);
|
||||
console.log(search)
|
||||
api.postJson('search', search)
|
||||
.then(result => {
|
||||
if (Array.isArray(result)) {
|
||||
console.log(result)
|
||||
let html = resultTemplate.render(result);
|
||||
$('#search-result')[0].innerHTML = html;
|
||||
} else console.log(result);
|
||||
})
|
||||
} else $('#search-result').clear();
|
||||
|
||||
}
|
||||
|
||||
onLoad(() => {
|
||||
$('input.numeric').imask({
|
||||
mask: Number,
|
||||
@@ -11,6 +58,7 @@ onLoad(() => {
|
||||
form.addClass('add');
|
||||
// $('#player-form input.participation').forEach(chk => chk.checked = true);
|
||||
form.reset();
|
||||
$('#player').removeClass('edit').addClass('create');
|
||||
modal('player');
|
||||
});
|
||||
$('#cancel-register').on('click', e => {
|
||||
@@ -85,24 +133,29 @@ onLoad(() => {
|
||||
form.val(`r${r}`, !(player.skip && player.skip.includes(r)));
|
||||
}
|
||||
form.removeClass('add');
|
||||
$('#player').removeClass('create').addClass('edit');
|
||||
modal('player');
|
||||
}
|
||||
});
|
||||
});
|
||||
resultTemplate = jsrender.templates($('#result')[0]);
|
||||
$('#needle').on('input', e => {
|
||||
let needle = $('#needle')[0].value;
|
||||
if (needle && needle.length > 2) {
|
||||
let form = $('#player-form')[0];
|
||||
let search = {
|
||||
needle: needle,
|
||||
aga: form.val('aga'),
|
||||
egf: form.val('egf'),
|
||||
ffg: form.val('ffg')
|
||||
}
|
||||
api.postJson('search', search)
|
||||
.then(result => {
|
||||
console.log(result);
|
||||
})
|
||||
} else $('#search-result').addClass('hidden');
|
||||
initSearch();
|
||||
});
|
||||
$('#clear-search').on('click', e => {
|
||||
$('#needle')[0].value = '';
|
||||
$('#search-result').clear();
|
||||
});
|
||||
let searchFromState = store('searchFormState')
|
||||
if (searchFromState) {
|
||||
for (let id of ["countryFilter", "aga", "egf", "ffg"]) {
|
||||
$(`#${id}`)[0].checked = searchFromState[id];
|
||||
}
|
||||
}
|
||||
$('.toggle').on('click', e => {
|
||||
let chk = e.target.closest('.toggle');
|
||||
let checkbox = chk.find('input')[0];
|
||||
checkbox.checked = !checkbox.checked;
|
||||
initSearch();
|
||||
});
|
||||
});
|
||||
|
4
view-webapp/src/main/webapp/lib/jsrender-1.0.13/jsrender.min.js
vendored
Normal file
4
view-webapp/src/main/webapp/lib/jsrender-1.0.13/jsrender.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@@ -49,35 +49,50 @@
|
||||
<form id="player-form" class="ui form edit">
|
||||
<input type="hidden" name="id"/>
|
||||
<div class="popup-content">
|
||||
<div id="search-form" class="four stackable fields">
|
||||
<div class="twelve wide field">
|
||||
<div id="search-form" class="five stackable fields">
|
||||
<div class="two wide field">
|
||||
<div class="toggle">
|
||||
<input id="countryFilter" name="countryFilter" type="checkbox" value="$tour.country"/>
|
||||
<div class="search-param checkbox">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
<label>$tour.country.toUpperCase()</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ten wide field">
|
||||
<div class="ui icon input">
|
||||
<input id="needle" name="needle" type="text" placeholder="Search...">
|
||||
<i class="search icon"></i>
|
||||
<i id="clear-search" class="clickable close icon"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="two wide field">
|
||||
<div class="active checkbox">
|
||||
<div class="circle"></div>
|
||||
<input name="aga" type="checkbox" class="hidden" checked/>
|
||||
<div class="toggle">
|
||||
<input id="aga" name="aga" type="checkbox" value="true"/>
|
||||
<div class="search-param checkbox">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
<label>AGA</label>
|
||||
</div>
|
||||
AGA
|
||||
</div>
|
||||
<div class="two wide field">
|
||||
<div class="active checkbox">
|
||||
<div class="circle"></div>
|
||||
<input name="egf" type="checkbox" class="hidden" checked/>
|
||||
<div class="toggle">
|
||||
<input id="egf" name="egf" type="checkbox" checked value="true"/>
|
||||
<div class="search-param checkbox">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
<label>EGF</label>
|
||||
</div>
|
||||
EGF
|
||||
</div>
|
||||
<div class="two wide field">
|
||||
<div class="active checkbox">
|
||||
<div class="circle"></div>
|
||||
<input name="ffg" type="checkbox" class="hidden" checked/>
|
||||
<div class="toggle">
|
||||
<input id="ffg" name="ffg" type="checkbox" checked value="true"/>
|
||||
<div class="search-param checkbox">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
<label>FFG</label>
|
||||
</div>
|
||||
FFG
|
||||
</div>
|
||||
<div id="search-result" class="hidden">hophop</div>
|
||||
<div id="search-result"></div>
|
||||
</div>
|
||||
<div class="two stackable fields">
|
||||
<div class="eight wide field">
|
||||
@@ -137,13 +152,21 @@
|
||||
<div class="popup-footer">
|
||||
<button id="cancel-register" class="ui gray right labeled icon floating close button">
|
||||
<i class="times icon"></i>
|
||||
Cancel
|
||||
<span class="edition">Close</span>
|
||||
<span class="creation">Cancel</span>
|
||||
</button>
|
||||
<button id="register" class="ui green right labeled icon floating button">
|
||||
<i class="plus icon"></i>
|
||||
Register
|
||||
<span class="edition">Update</span>
|
||||
<span class="creation">Register</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<script id="result" type="text/template">
|
||||
{{for #data}}
|
||||
<div class="result-line">[{{:origin}}] {{:country}} {{:name}} {{:firstname}} {{:rank}} ({{:club}})</div>
|
||||
{{/for}}
|
||||
</script>
|
||||
<script type="text/javascript" src="/lib/jsrender-1.0.13/jsrender.min.js"></script>
|
||||
|
Reference in New Issue
Block a user