Infos
- name, place and date
- +#foreach($attr in $application.getAttributeNames()) ++*#$attr = $application.getAttribute($attr)+#end +
- 
+ 
+
-
-#foreach($lang in $translate.flags.entrySet())
- #if($lang != $request.lang)
- $lang.key
- #end
-#end
-
@@ -37,15 +47,38 @@
+ pairgoth v0.1
+
+
+
+
-
-
-
+
+#foreach($lang in $translate.flags.entrySet())
+ #if($lang != $request.lang)
+ $lang.key
+ #end
+#end
+
+
+
+
+
+
+
+
+
+#if($css)
+
+#end
diff --git a/view-webapp/src/main/webapp/WEB-INF/logger.properties b/view-webapp/src/main/webapp/WEB-INF/logger.properties
new file mode 100644
index 0000000..3b8f513
--- /dev/null
+++ b/view-webapp/src/main/webapp/WEB-INF/logger.properties
@@ -0,0 +1 @@
+level = info
diff --git a/view-webapp/src/main/webapp/WEB-INF/pairgoth.default.properties b/view-webapp/src/main/webapp/WEB-INF/pairgoth.default.properties
index 1f7ab92..63e2350 100644
--- a/view-webapp/src/main/webapp/WEB-INF/pairgoth.default.properties
+++ b/view-webapp/src/main/webapp/WEB-INF/pairgoth.default.properties
@@ -1,7 +1,19 @@
-# webapp
+# environment
env = dev
-webapp.url = https://localhost:8080
-api.url = https://localhost:8085/api
+
+# webapp connector
+webapp.protocol = http
+webapp.interface = localhost
+webapp.port = 8080
+webapp.context = /
+webapp.external.url = http://localhost:8080
+
+# api connector
+api.protocol = http
+api.interface = localhost
+api.port = 8085
+api.context = /api
+api.external.url = http://localhost:8085/api
# store
store = file
diff --git a/view-webapp/src/main/webapp/WEB-INF/tools.xml b/view-webapp/src/main/webapp/WEB-INF/tools.xml
index 9b92836..6d68015 100644
--- a/view-webapp/src/main/webapp/WEB-INF/tools.xml
+++ b/view-webapp/src/main/webapp/WEB-INF/tools.xml
@@ -3,14 +3,15 @@
+
+
diff --git a/view-webapp/src/main/webapp/index.html b/view-webapp/src/main/webapp/index.html
index 9b2c99c..4f0d61d 100644
--- a/view-webapp/src/main/webapp/index.html
+++ b/view-webapp/src/main/webapp/index.html
@@ -1,72 +1,15 @@
Welcome to pairgoth, your Go Pairing Engine!
+What is pairgoth?
+At its core, pairgoth is a versatile Go tournament pairing engine designed to make your tournament experience effortless. pairgoth is the successor of opengotha, the well known pairing system software developed by Luc Vannier and uses the same algorithm internally, as well as import and export features towards its format.
+pairgoth version 1.0-BETA supports the Swiss pairing system, ideal for championships with no handicap games, as well as the MacMahon pairing system, more suited for classical tournaments and cups.
+Future versions will support more pairing systems and more features. Your feedback is welcome!
+How to use pairgoth?
+We offer you the flexibility to use pairgoth in a way that best suits your needs. Here are your options:
+-
+
-
+
Stay in the browser: If you prefer convenience, you can simply use the pairgoth instance graciously hosted by the French Go Federation.
++ Launch pairgoth +
+
+ -
+
Launch a standalone instance: This mode allows you to run pairgoth on your local computer.
+That's the best option if you feel more comfortable when running locally or whenever you want to be able to do the pairing without internet. You can choose to use either the standard interface (which is meant to look a lot like opengotha) and the web interface (by launching the engine and connecting to it using a browser).
++ Download pairgoth standalone +
+
+ -
+
Launch a pairing server: This mode is the best suited for big Go events like congresses, it allows to register players, enter results and manage pairing from several workstations at once.
++ Download pairgoth client/server +
+
+ -
+
Compile from the sources: the pairgoth project is fully open source, and under the very permissive apache licence, allowing you to tweak it in any possible way. Be sure to contribute back your enhancements!
++ Browse pairgoth sources +
+
+
-
+
#foreach($tour in $api.get('tour').entrySet())
-
+ Open
+
#end
-
-##
-## New Tournament dialog
-##
-
-
-
-
-
-
-
-
-
diff --git a/view-webapp/src/main/webapp/js/api.js b/view-webapp/src/main/webapp/js/api.js
index 9e9c320..eaac9b7 100644
--- a/view-webapp/src/main/webapp/js/api.js
+++ b/view-webapp/src/main/webapp/js/api.js
@@ -23,6 +23,34 @@ let headers = function() {
return ret;
};
+function clearFeedback() {
+ $('#error')[0].innerText = '';
+ $('#error, #success').addClass('hidden');
+}
+
+function success() {
+ $('#error')[0].innerText = '';
+ $('#error').addClass('hidden');
+}
+
+function showError(message) {
+ console.error(message);
+ $('#error')[0].innerText = message;
+ $('#error').removeClass('hidden');
+}
+
+function error(response) {
+ const contentType = response.headers.get("content-type");
+ let promise =
+ (contentType && contentType.indexOf("application/json") !== -1)
+ ? response.json().then(json => json.error || "unknown error")
+ : Promise.resolve(response.statusText);
+ promise.then(message => {
+ message = message.replaceAll(/([a-z])([A-Z])/g,"$1 $2").toLowerCase();
+ showError(message);
+ });
+}
+
let api = {
get: (path) => fetch(base + path, {
credentials: "same-origin",
@@ -49,22 +77,82 @@ let api = {
/* then, some helpers */
- getJson: (path) => api.get(path)
- .then(resp => {
- if (resp.ok) return resp.json();
- else throw resp.statusText;
- }),
+ getJson: (path) => {
+ clearFeedback();
+ return api.get(path)
+ .then(resp => {
+ if (resp.ok) {
+ return resp.json();
+ }
+ else throw resp;
+ })
+ .catch(err => {
+ error(err);
+ return 'error'
+ });
+ },
- postJson: (path, body) => api.post(path, body)
- .then(resp => {
- if (resp.ok) return resp.json();
- else throw resp.statusText;
- }),
+ postJson: (path, body) => {
+ clearFeedback();
+ spinner(true);
+ return api.post(path, body)
+ .then(resp => {
+ if (resp.ok) {
+ success();
+ return resp.json();
+ }
+ else {
+ throw resp;
+ }
+ })
+ .catch(err => {
+ error(err);
+ return 'error';
+ })
+ .finally(() => {
+ spinner(false);
+ });
+ },
+
+ putJson: (path, body) => {
+ clearFeedback();
+ spinner(true);
+ return api.put(path, body)
+ .then(resp => {
+ if (resp.ok) {
+ success();
+ return resp.json();
+ }
+ else throw resp;
+ })
+ .catch(err => {
+ error(err);
+ return 'error';
+ })
+ .finally(() => {
+ spinner(false);
+ });
+ },
+
+ deleteJson: (path, body) => {
+ clearFeedback();
+ spinner(true);
+ return api.delete(path, body)
+ .then(resp => {
+ if (resp.ok) {
+ success();
+ return resp.json();
+ }
+ else throw resp;
+ })
+ .catch(err => {
+ error(err);
+ return 'error';
+ })
+ .finally(() => {
+ spinner(false);
+ });
+ }
- putJson: (path, body) => api.put(path, body)
- .then(resp => {
- if (resp.ok) return resp.json();
- else throw resp.statusText;
- })
};
diff --git a/view-webapp/src/main/webapp/js/domhelper.js b/view-webapp/src/main/webapp/js/domhelper.js
index 6bb1b8c..a3e5807 100644
--- a/view-webapp/src/main/webapp/js/domhelper.js
+++ b/view-webapp/src/main/webapp/js/domhelper.js
@@ -49,8 +49,8 @@ Element.prototype.toggleClass = function(className) {
NodeList.prototype.hasClass = function(className) {
return this.item(0).classList.contains(className);
}
-Element.prototype.toggleClass = function(className) {
- this.classList.contains(className);
+Element.prototype.hasClass = function(className) {
+ return this.classList.contains(className);
}
Node.prototype.offset = function() {
let _x = 0;
@@ -66,39 +66,130 @@ Node.prototype.offset = function() {
NodeList.prototype.offset = function() {
this.item(0).offset();
}
-Element.prototype.attr = function (key) {
- return this.attributes[key].value;
+Element.prototype.attr = function (key, value) {
+ if (typeof(value) === 'undefined') {
+ return this.attributes[key]?.value;
+ } else {
+ this.setAttribute(key, value);
+ return this;
+ }
}
-NodeList.prototype.attr = function(key) {
- this.item(0).attr(key);
+NodeList.prototype.attr = function(key, value) {
+ if (typeof(value) === 'undefined') {
+ return this.item(0).attr(key);
+ } else {
+ this.forEach(elem => {
+ elem.attr(key, value);
+ });
+ return this;
+ }
}
-Element.prototype.data = function (key) {
- return this.attributes[`data-${key}`].value
+Element.prototype.data = function (key, value) {
+ if (typeof(value) === 'undefined') {
+ return this.attributes[`data-${key}`]?.value
+ } else {
+ this.setAttribute(`data-${key}`, value);
+ return this;
+ }
}
-NodeList.prototype.data = function(key) {
- this.item(0).data(key);
+NodeList.prototype.data = function(key, value) {
+ if (typeof(value) === 'undefined') {
+ this.item(0).data(key);
+ } else {
+ this.forEach(elem => {
+ elem.data(key, value);
+ })
+ return this;
+ }
}
-NodeList.prototype.show = function(key) {
- this.item(0).show(key);
+NodeList.prototype.show = function() {
+ this.item(0).show();
return this;
}
-Element.prototype.show = function (key) {
+Element.prototype.show = function() {
this.style.display = 'block';
}
-NodeList.prototype.hide = function(key) {
- this.item(0).hide(key);
+NodeList.prototype.hide = function() {
+ this.item(0).hide();
return this;
}
-Element.prototype.hide = function (key) {
+Element.prototype.hide = function() {
this.style.display = 'none';
}
-
-let initFunctions = [];
-function onLoad(fct) {
- if (typeof(fct) == "function") initFunctions.push(fct);
+NodeList.prototype.text = function(txt) {
+ this.item(0).text(txt);
}
-document.on("DOMContentLoaded", () => {
- initFunctions.forEach(fct => {
- fct();
+Element.prototype.text = function(txt) {
+ if (typeof(txt) === 'undefined') {
+ return this.textContent;
+ } else {
+ 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);
+}
+
+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;
+ }
+}
+*/
+
+NodeList.prototype.focus = function() {
+ let first = this.item(0);
+ if (first) first.focus();
+}
+
+Element.prototype.index = function(selector) {
+ let i = 0;
+ let child = this;
+ while ((child = child.previousSibling) != null) {
+ if (typeof(selector) === 'undefined' || child.nodeType === Node.ELEMENT_NODE && child.matches(selector)) {
+ ++i;
+ }
+ }
+ return i;
+}
+
+NodeList.prototype.filter = function(selector) {
+ let result = [];
+ this.forEach(elem => {
+ if (elem.nodeType === Node.ELEMENT_NODE && elem.matches(selector)) {
+ result.push(elem);
+ }
+ });
+ return Reflect.construct(Array, result, NodeList);
+}
+
diff --git a/view-webapp/src/main/webapp/js/formproxy.js b/view-webapp/src/main/webapp/js/formproxy.js
deleted file mode 100644
index f3df38b..0000000
--- a/view-webapp/src/main/webapp/js/formproxy.js
+++ /dev/null
@@ -1,163 +0,0 @@
-// hack to replace .34 into 0.34 (CB TODO - upstream patch to inputmask)
-const fixNumber = (value) => isNaN(value) || !`${value}`.startsWith('.') ? value : `0.${value}`;
-
-class FormProxy {
- constructor(formSelector, config) {
- this.formSelector = formSelector;
- this.config = config;
- this.config.properties = () => Object.keys(this.config).filter(k => typeof(this.config[k]) !== 'function');
- this.promises = [];
- this.dirty = false;
-
- this.config.import = function(obj) {
- for (let key in obj) {
- if (key in this.config) {
- this.proxy[key] = obj[key];
- } else {
- console.warn(`ignoring property ${key}`)
- }
- }
- this.config.dirty(false);
- }.bind(this);
-
- this.config.export = function() {
- let ret = {}
- this.config.properties().forEach(prop => {
- ret[prop] = this.proxy[prop];
- });
- return ret;
- }.bind(this);
-
- this.config.dirty = function(value) {
- if (typeof(value) === 'undefined') return thisProxy.dirty;
- else thisProxy.dirty = Boolean(value);
- }.bind(this);
-
- this.config.valid = function() {
- return $(`${thisProxy.formSelector} [required]:invalid`).length === 0
- }.bind(this);
-
- this.config.reset = function() {
- this.initialize();
- }.bind(this);
-
- // CB TODO - needs a function to wait for promises coming from dependencies
-
- this.setState('loading');
- $(() => this.configure.bind(this)());
-
- let thisProxy = this;
- return this.proxy = new Proxy(config, {
- get(target, prop) {
- if (typeof(target[prop]) === 'function') {
- return target[prop];
- }
- else {
- let elem = config[prop];
- if (typeof(elem) === 'undefined') throw `invalid property: ${prop}`
- return elem.getter();
- }
- },
- set(target, prop, value) {
- let def = config[prop];
- if (typeof(def) === 'undefined') throw `invalid property: ${prop}`
- let depends = [].concat(def.depends ? def.depends : []);
- let proms = depends.flatMap(field => config[field].promise).filter(prom => prom);
- let operation = () => {
- def.setter(value);
- if (typeof(def.change) === 'function') {
- let rst = def.change(value, def.elem);
- if (typeof(rst?.then) === 'function') {
- def.promise = rst;
- }
- }
- };
- if (proms.length) Promise.all(proms).then(() => operation());
- else operation();
- config.dirty(true);
- return true;
- }
- });
- }
-
- configure() {
- this.form = $(this.formSelector);
- if (!this.form.length) throw `Form not found: ${this.formSelector}`;
- this.form.on('submit', e => { e.preventDefault(); return false; });
- let controls = this.form.find('input[name],select[name],textarea[name]');
- controls.on('input change keyup', e => {
- this.setState('editing');
- this.config.dirty(true);
- });
- controls.each((i,e) => {
- let name = $(e).attr('name');
- if (!(name in this.config)) this.config[name] = {};
- });
- this.config.properties().forEach(key => {
- let def = this.config[key];
- if (!def) def = this.config[key] = {};
- else if (typeof(def) === 'function') return true; // continue foreach
- if (!def.getter) {
- let elem = def.elem;
- if (!elem || !elem.length) elem = $(`${this.formSelector} [name="${key}"]`);
- if (!elem || !elem.length) elem = $(`#${key}`);
- if (!elem || !elem.length) throw `element not found: ${key}`;
- def.elem = elem;
- def.getter = elem.is('input,select,textarea')
- ? elem.attr('type') === 'radio'
- ? (() => elem.filter(':checked').val())
- : (() => elem.data('default')
- ? elem.val()
- ? elem.is('.number')
- ? elem.val().replace(/ /g, '')
- : elem.val()
- : elem.data('default')
- : elem.is('.number')
- ? elem.val() ? elem.val().replace(/ /g, '') : elem.val()
- : elem.val())
- : (() => elem.text());
- def.setter = elem.is('input,select,textarea')
- ? elem.attr('type') === 'radio'
- ? (value => elem.filter(`[value="${value}"]`).prop('checked', true))
- : elem.is('input.number') ? (value => elem.val(fixNumber(value))) : (value => elem.val(value))
- : (value => elem.text(value));
- if (typeof(def.change) === 'function') {
- elem.on('change', () => def.change(def.getter(), elem));
- }
- }
- let loading = def?.loading;
- switch (typeof(loading)) {
- case 'function':
- let rst = loading(def.elem);
- if (typeof(rst?.then) === 'function') {
- this.promises.push(rst);
- }
- break;
- }
- });
- setTimeout(() => {
- Promise.all(this.promises).then(() => { this.promises = []; this.initialize(); });
- }, 10);
- }
-
- initialize() {
- this.config.properties().forEach(key => {
- let def = this.config[key];
- if (typeof(def.initial) === 'undefined') {
- this.proxy[key] = '';
- } else {
- if (typeof(def.initial) === 'function') {
- def.initial(def.elem)
- } else if (def.initial != null) {
- this.proxy[key] = def.initial;
- }
- }
- });
- this.config.dirty(false);
- this.setState('initial');
- }
-
- setState(state) {
- if (this.form && this.form.length) this.form[0].dispatchEvent(new Event(state));
- }
-}
diff --git a/view-webapp/src/main/webapp/js/main.js b/view-webapp/src/main/webapp/js/main.js
index 108b36a..ee2ea20 100644
--- a/view-webapp/src/main/webapp/js/main.js
+++ b/view-webapp/src/main/webapp/js/main.js
@@ -84,8 +84,8 @@ function exportCSV(filename, content) {
document.body.removeChild(link);
}
-/* modals */
-
+/* modals
+ NOT IN USE, see popup-related code.
NodeList.prototype.modal = function(show) {
this.item(0).modal(show);
return this;
@@ -101,21 +101,127 @@ Element.prototype.modal = function(show) {
}
return this;
}
+ */
+/* DOM helpers */
+
+HTMLFormElement.prototype.val = function(name, value) {
+ let hasValue = typeof(value) !== 'undefined';
+ let ctl = this.find(`[name="${name}"]`)[0];
+ if (!ctl) {
+ console.error(`unknown input name: ${name}`)
+ }
+ let tag = ctl.tagName;
+ let type = tag === 'INPUT' ? ctl.attr('type') : undefined;
+ if (
+ (tag === 'INPUT' && ['text', 'number', 'hidden'].includes(ctl.attr('type'))) ||
+ tag === 'SELECT'
+ ) {
+ if (hasValue) {
+ ctl.value = value;
+ return;
+ }
+ else return ctl.value;
+ } else if (tag === 'INPUT' && ctl.attr('type') === 'radio') {
+ if (hasValue) {
+ ctl = $(`input[name="${name}"][value="${value}"]`);
+ if (ctl) ctl.checked = true;
+ return;
+ } else {
+ ctl = $(`input[name="${name}"]:checked`);
+ if (ctl) return ctl[0].value;
+ else return null;
+ }
+ } else if (tag === 'INPUT' && ctl.attr('type') === 'checkbox') {
+ if (hasValue) {
+ ctl.checked = value !== 'false' && Boolean(value);
+ return;
+ }
+ 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;
+};
+
+function msg(id) {
+ let ctl = $(`#${id}`)[0];
+ return ctl.textContent;
+}
+
+function spinner(show) {
+ if (show) $('#backdrop').addClass('active');
+ else $('#backdrop').removeClass('active');
+}
+
+function modal(id) {
+ $('body').addClass('dimmed');
+ $(`#${id}.popup`).addClass('shown');
+}
+
+function close_modal() {
+ $('body').removeClass('dimmed');
+ $(`.popup`).removeClass('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');
+ }
+ });
+
+ /* 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);
+
+ // keyboard handling
+ document.on('keyup', e => {
+ switch (e.key) {
+ case 'Escape': {
+ if ($('#player').hasClass('shown')) {
+ if ($('#needle')[0].value) {
+ $('#needle')[0].value = '';
+ initSearch();
+ } else {
+ close_modal();
+ }
+ }
+ break;
+ }
+ case 'ArrowDown': {
+ if (searchResultShown()) {
+ let lines = $('.result-line');
+ if (typeof (searchHighlight) === 'undefined') searchHighlight = 0;
+ else ++searchHighlight;
+ searchHighlight = Math.min(searchHighlight, lines.length - 1);
+ lines.removeClass('highlighted');
+ lines[searchHighlight].addClass('highlighted');
+ }
+ break;
+ }
+ case 'ArrowUp': {
+ if (searchResultShown()) {
+ let lines = $('.result-line');
+ if (typeof (searchHighlight) === 'undefined') searchHighlight = 0;
+ else --searchHighlight;
+ searchHighlight = Math.max(searchHighlight, 0);
+ lines.removeClass('highlighted');
+ lines[searchHighlight].addClass('highlighted');
+ }
+ break;
+ }
+ case 'Enter': {
+ if (searchResultShown()) {
+ fillPlayer(searchResult[searchHighlight]);
+ } else {
+ $('#register')[0].click();
+ }
+ break;
+ }
+ }
});
- $('.modal .actions .cancel').on('click', e => {
- e.target.closest('.modal').modal(false);
- });
- $('#dimmer').on('click', e => $('.modal').modal(false));
+
});
diff --git a/view-webapp/src/main/webapp/js/tour-information.inc.js b/view-webapp/src/main/webapp/js/tour-information.inc.js
new file mode 100644
index 0000000..49f9899
--- /dev/null
+++ b/view-webapp/src/main/webapp/js/tour-information.inc.js
@@ -0,0 +1,151 @@
+onLoad(() => {
+ $('#edit').on('click', e => {
+ e.preventDefault();
+ $('#tournament-infos').addClass('edit');
+ return false;
+ });
+
+ $('#cancel, #close').on('click', e => {
+ e.preventDefault();
+ if ($('#tournament-infos').hasClass('edit') && typeof(tour_id) !== 'undefined') {
+ $('#tournament-infos').removeClass('edit')
+ } else {
+ document.location.href = '/index';
+ }
+ return false;
+ });
+
+ $('#validate').on('click', e => {
+ let form = e.target.closest('form');
+ let valid = true;
+ // validate required fields
+ let required = ['name', 'shortName', 'startDate', 'endDate'];
+ if (!form.find('input[name="online"]')[0].checked) required.push('location')
+ for (let name of required) {
+ let ctl = form.find(`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 = form.find('input[name="shortName"]')[0];
+ let shortName = shortNameCtl.value;
+ if (safeRegex.test(shortName)) {
+ shortNameCtl.setCustomValidity('');
+ } else {
+ valid = false;
+ shortNameCtl.setCustomValidity(msg('invalid_character'));
+ }
+ // if (!valid) return;
+ // ...
+ });
+
+ for(let name of ['startDate', 'endDate']) {
+ let control = $(`input[name="${name}"]`)[0];
+ if (control.value) {
+ control.value = formatDate(control.value);
+ }
+ }
+ new DateRangePicker($('#date-range')[0], {
+ autohide: true,
+ language: datepickerLocale || 'en'
+ });
+
+ $('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
+ });
+
+ $('#tournament-infos').on('submit', e => {
+ e.preventDefault();
+ let form = e.target;
+ let tour = {
+ name: form.val('name'),
+ shortName: form.val('shortName'),
+ startDate: parseDate(form.val('startDate')),
+ endDate: parseDate(form.val('endDate')),
+ type: form.val('type'),
+ rounds: form.val('rounds'),
+ country: form.val('country'),
+ online: form.val('online'),
+ location: form.val('online') ? "" : form.val('location'),
+ pairing: {
+ type: form.val('pairing'),
+ // mmFloor: form.val('mmFloor'),
+ mmBar: form.val('mmBar'),
+ main: {
+ firstSeed: form.val('firstSeed'),
+ secondSeed: form.val('secondSeed')
+ },
+ handicap: {
+ correction: -form.val('correction'),
+ treshold: form.val('treshold')
+ }
+ },
+ timeSystem: {
+ type: form.val('timeSystemType'),
+ mainTime: fromHMS(form.val('mainTime')),
+ increment: fromHMS(form.val('increment')),
+ maxTime: fromHMS(form.val('maxTime')),
+ byoyomi: fromHMS(form.val('byoyomi')),
+ periods: form.val('periods'),
+ stones: form.val('stones')
+ }
+ }
+ console.log(tour);
+ if (typeof(tour_id) !== 'undefined') {
+ api.putJson(`tour/${tour_id}`, tour)
+ .then(tour => {
+ window.location.reload();
+ });
+ } else {
+ api.postJson('tour', tour)
+ .then(tour => {
+ window.location.href += `?id=${tour.id}`;
+ });
+ }
+ });
+});
diff --git a/view-webapp/src/main/webapp/js/tour-pairing.inc.js b/view-webapp/src/main/webapp/js/tour-pairing.inc.js
new file mode 100644
index 0000000..7ea71d1
--- /dev/null
+++ b/view-webapp/src/main/webapp/js/tour-pairing.inc.js
@@ -0,0 +1,51 @@
+let focused = undefined;
+
+function pair(parts) {
+ api.postJson(`tour/${tour_id}/pair/${activeRound}`, parts)
+ .then(rst => {
+ if (rst !== 'error') {
+ document.location.reload();
+ }
+ });
+}
+
+function unpair(games) {
+ api.deleteJson(`tour/${tour_id}/pair/${activeRound}`, games)
+ .then(rst => {
+ if (rst !== 'error') {
+ document.location.reload();
+ }
+ });
+}
+
+onLoad(()=>{
+ $('.listitem').on('click', e => {
+ if (e.shiftKey && typeof(focused) !== 'undefined') {
+ let from = focused.index('.listitem');
+ let to = e.target.closest('.listitem').index('.listitem');
+ if (from > to) {
+ let tmp = from;
+ from = to;
+ to = tmp;
+ }
+ let parent = e.target.closest('.multi-select');
+ let children = parent.childNodes.filter('.listitem');
+ for (let j = from; j <= to; ++j) { new Tablesort($('#players')[0]);
+
+ children.item(j).addClass('selected');
+ children.item(j).attr('draggable', true);
+ }
+ } else {
+ let target = e.target.closest('.listitem');
+ focused = target.toggleClass('selected').attr('draggable', target.hasClass('selected'));
+ }
+ });
+ $('#pair').on('click', e => {
+ let parts = $('#pairables')[0].childNodes.filter('.selected.listitem').map(item => parseInt(item.data("id")));
+ pair(parts);
+ });
+ $('#unpair').on('click', e => {
+ let games = $('#paired')[0].childNodes.filter('.selected.listitem').map(item => parseInt(item.data("id")));
+ unpair(games);
+ });
+});
diff --git a/view-webapp/src/main/webapp/js/tour-registration.inc.js b/view-webapp/src/main/webapp/js/tour-registration.inc.js
new file mode 100644
index 0000000..bd840df
--- /dev/null
+++ b/view-webapp/src/main/webapp/js/tour-registration.inc.js
@@ -0,0 +1,214 @@
+const SEARCH_DELAY = 100;
+let searchTimer = undefined;
+let resultTemplate;
+let searchResult;
+let searchHighlight;
+
+function initSearch() {
+ let needle = $('#needle')[0].value.trim();
+ if (searchTimer) {
+ clearTimeout(searchTimer);
+ }
+ searchTimer = setTimeout(() => {
+ search(needle);
+ }, SEARCH_DELAY);
+}
+
+function searchResultShown() {
+ return !(typeof(searchHighlight) === 'undefined' || !searchResult || !searchResult.length || typeof(searchResult[searchHighlight]) === 'undefined')
+}
+
+function search(needle) {
+ needle = needle.trim();
+ 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);
+ api.postJson('search', search)
+ .then(result => {
+ if (Array.isArray(result)) {
+ searchResult = result
+ let html = resultTemplate.render(result);
+ $('#search-result')[0].innerHTML = html;
+ } else console.log(result);
+ })
+ } else {
+ $('#search-result').clear();
+ searchTimer = undefined;
+ searchResult = undefined;
+ searchHighlight = undefined;
+ }
+}
+
+function parseRank(rank) {
+ let groups = /(\d+)([kd])/.exec(rank)
+ if (groups) {
+ let level = parseInt(groups[1]);
+ let letter = groups[2];
+ switch (letter) {
+ case 'k': return -level;
+ case 'd': return level - 1;
+ }
+ }
+ return '';
+}
+
+function fillPlayer(player) {
+ let form = $('#player-form')[0];
+ form.val('name', player.name);
+ form.val('firstname', player.firstname);
+ form.val('country', player.country.toLowerCase());
+ form.val('club', player.club);
+ form.val('rank', parseRank(player.rank));
+ form.val('rating', player.rating);
+ $('#needle')[0].value = '';
+ initSearch();
+ $('#register').focus();
+}
+
+onLoad(() => {
+ $('input.numeric').imask({
+ mask: Number,
+ scale: 0,
+ min: 0,
+ max: 4000
+ });
+ new Tablesort($('#players')[0]);
+ $('#add').on('click', e => {
+ let form = $('#player-form')[0];
+ form.addClass('add');
+ // $('#player-form input.participation').forEach(chk => chk.checked = true);
+ form.reset();
+ $('#player').removeClass('edit').addClass('create');
+ modal('player');
+ $('#needle').focus();
+ });
+ $('#cancel-register').on('click', e => {
+ e.preventDefault();
+ close_modal();
+ searchHighlight = undefined;
+ return false;
+ });
+
+ $('#register').on('click', e => {
+ let form = e.target.closest('form');
+ let valid = true;
+ let required = ['name', 'firstname', 'country', 'club', 'rank', 'rating'];
+ for (let name of required) {
+ let ctl = form.find(`[name=${name}]`)[0];
+ let val = ctl.value;
+ if (val) {
+ ctl.setCustomValidity('');
+ } else {
+ valid = false;
+ ctl.setCustomValidity(msg('required_field'));
+ }
+ }
+ if (!valid) return;
+ // $('#player-form')[0].requestSubmit() not working?!
+ $('#player-form')[0].dispatchEvent(new CustomEvent('submit', {cancelable: true}));
+ });
+ $('#player-form').on('submit', e => {
+ ("submitting!!")
+ e.preventDefault();
+ let form = $('#player-form')[0];
+ let player = {
+ name: form.val('name'),
+ firstname: form.val('firstname'),
+ rating: form.val('rating'),
+ rank: form.val('rank'),
+ country: form.val('country'),
+ club: form.val('club'),
+ skip: form.find('input.participation').map((input,i) => [i+1, input.checked]).filter(arr => !arr[1]).map(arr => arr[0])
+ }
+ if (form.hasClass('add')) {
+ api.postJson(`tour/${tour_id}/part`, player)
+ .then(player => {
+ if (player !== 'error') {
+ window.location.reload();
+ }
+ });
+ } else {
+ let id = form.val('id');
+ player['id'] = id;
+ api.putJson(`tour/${tour_id}/part/${id}`, player)
+ .then(player => {
+ if (player !== 'error') {
+ window.location.reload();
+ }
+ });
+ }
+ });
+ $('#players > tbody > tr').on('click', e => {
+ let id = e.target.closest('tr').attr('data-id');
+ api.getJson(`tour/${tour_id}/part/${id}`)
+ .then(player => {
+ if (player !== 'error') {
+ let form = $('#player-form')[0];
+ form.val('id', player.id);
+ form.val('name', player.name);
+ form.val('firstname', player.firstname);
+ form.val('rating', player.rating);
+ form.val('rank', player.rank);
+ form.val('country', player.country);
+ form.val('club', player.club);
+ for (r = 1; r <= tour_rounds; ++r) {
+ 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 => {
+ 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();
+ });
+ document.on('click', e => {
+ let resultLine = e.target.closest('.result-line');
+ if (resultLine) {
+ let index = e.target.closest('.result-line').data('index');
+ fillPlayer(searchResult[index]);
+ }
+ });
+ $('#unregister').on('click', e => {
+ let form = $('#player-form')[0];
+ let id = form.val('id');
+ api.deleteJson(`tour/${tour_id}/part/${id}`)
+ .then(ret => {
+ if (ret !== 'error') {
+ window.location.reload();
+ }
+ });
+ });
+});
diff --git a/view-webapp/src/main/webapp/js/tour-results.inc.js b/view-webapp/src/main/webapp/js/tour-results.inc.js
new file mode 100644
index 0000000..52003e8
--- /dev/null
+++ b/view-webapp/src/main/webapp/js/tour-results.inc.js
@@ -0,0 +1,3 @@
+onLoad(()=>{
+ new Tablesort($('#results-table')[0]);
+});
\ No newline at end of file
diff --git a/view-webapp/src/main/webapp/lib/README.md b/view-webapp/src/main/webapp/lib/README.md
new file mode 100644
index 0000000..d1ada58
--- /dev/null
+++ b/view-webapp/src/main/webapp/lib/README.md
@@ -0,0 +1 @@
+date picker: https://mymth.github.io/vanillajs-datepicker/#/
diff --git a/view-webapp/src/main/webapp/lib/datepicker-1.3.3/datepicker-full.min.js b/view-webapp/src/main/webapp/lib/datepicker-1.3.3/datepicker-full.min.js
deleted file mode 100644
index 60b0f33..0000000
--- a/view-webapp/src/main/webapp/lib/datepicker-1.3.3/datepicker-full.min.js
+++ /dev/null
@@ -1 +0,0 @@
-!function(){"use strict";function e(e){return e[e.length-1]}function t(e,...t){return t.forEach((t=>{e.includes(t)||e.push(t)})),e}function i(e,t){return e?e.split(t):[]}function s(e,t,i){return(void 0===t||e>=t)&&(void 0===i||e<=i)}function n(e,t,i){return e
- New tournament
-
-
-
-
-
-
-
-
-
-
-
- Type
- teams or players, rounds
-
-
-
-
- Pairing
- pairing system
-
-#translate('tournament-form.inc.html')
-
-
-
-
-
\n
'),re=r(`\n
\n\n \n
\n \n \n \n \n \n \n
\n \n
`),oe=r(`${a("span",7,{class:"dow"})}
\n ${a("span",42)}
\n\n
`);class de{constructor(e,t){Object.assign(this,t,{picker:e,element:A('').firstChild,selected:[],isRangeEnd:!!e.datepicker.rangeSideIndex}),this.init(this.picker.datepicker.config)}init(e){"pickLevel"in e&&(this.isMinView=this.id===e.pickLevel),this.setOptions(e),this.updateFocus(),this.updateSelection()}prepareForRender(e,t,i){this.disabled=[];const s=this.picker;s.setViewSwitchLabel(e),s.setPrevButtonDisabled(t),s.setNextButtonDisabled(i)}setDisabled(e,i){i.add("disabled"),t(this.disabled,e)}performBeforeHook(e,t){let i=this.beforeShow(new Date(t));switch(typeof i){case"boolean":i={enabled:i};break;case"string":i={classes:i}}if(i){const s=e.classList;if(!1===i.enabled&&this.setDisabled(t,s),i.classes){const e=i.classes.split(/\s+/);s.add(...e),e.includes("disabled")&&this.setDisabled(t,s)}i.content&&function(e,t){K(e),t instanceof DocumentFragment?e.appendChild(t):"string"==typeof t?e.appendChild(A(t)):"function"==typeof t.forEach&&t.forEach((t=>{e.appendChild(t)}))}(e,i.content)}}renderCell(e,t,i,s,{selected:n,range:a},r,o=[]){e.textContent=t,this.isMinView&&(e.dataset.date=s);const d=e.classList;if(e.className=`datepicker-cell ${this.cellClass}`,i\n
${a("span",6,{class:"week"})}
\n\n
'),ae=r(`\n
\n\n \n
\n \n \n \n \n \n \n
\n \n
`),re=r(`${a("span",7,{class:"dow"})}
\n ${a("span",42)}
\n\n
`);class oe{constructor(e,t){Object.assign(this,t,{picker:e,element:L('').firstChild,selected:[],isRangeEnd:!!e.datepicker.rangeSideIndex}),this.init(this.picker.datepicker.config)}init(e){"pickLevel"in e&&(this.isMinView=this.id===e.pickLevel),this.setOptions(e),this.updateFocus(),this.updateSelection()}prepareForRender(e,t,i){this.disabled=[];const n=this.picker;n.setViewSwitchLabel(e),n.setPrevButtonDisabled(t),n.setNextButtonDisabled(i)}setDisabled(e,i){i.add("disabled"),t(this.disabled,e)}performBeforeHook(e,t){let i=this.beforeShow(new Date(t));switch(typeof i){case"boolean":i={enabled:i};break;case"string":i={classes:i}}if(i){const n=e.classList;if(!1===i.enabled&&this.setDisabled(t,n),i.classes){const e=i.classes.split(/\s+/);n.add(...e),e.includes("disabled")&&this.setDisabled(t,n)}i.content&&function(e,t){_(e),t instanceof DocumentFragment?e.appendChild(t):"string"==typeof t?e.appendChild(L(t)):"function"==typeof t.forEach&&t.forEach((t=>{e.appendChild(t)}))}(e,i.content)}}renderCell(e,t,i,n,{selected:s,range:a},r,o=[]){e.textContent=t,this.isMinView&&(e.dataset.date=n);const d=e.classList;if(e.className=`datepicker-cell ${this.cellClass}`,i\n
${a("span",6,{class:"week"})}
\n
+
`);
+
+ const daysTemplate = optimizeTemplateHTML(`
+
+
+
+
+
+
+
+ ${getButtons([
+ 'prev-button prev-btn',
+ 'view-switch',
+ 'next-button next-btn',
+ ])}
+
+
+
`);
+
+ const weekNumbersTemplate = optimizeTemplateHTML(`${createTagRepeat('span', 7, {class: 'dow'})}
+ ${createTagRepeat('span', 42)}
+
+
`);
+
+ // Base class of the view classes
+ class View {
+ constructor(picker, config) {
+ Object.assign(this, config, {
+ picker,
+ element: parseHTML(``).firstChild,
+ selected: [],
+ isRangeEnd: !!picker.datepicker.rangeSideIndex,
+ });
+ this.init(this.picker.datepicker.config);
+ }
+
+ init(options) {
+ if ('pickLevel' in options) {
+ this.isMinView = this.id === options.pickLevel;
+ }
+ this.setOptions(options);
+ this.updateFocus();
+ this.updateSelection();
+ }
+
+ prepareForRender(switchLabel, prevButtonDisabled, nextButtonDisabled) {
+ // refresh disabled years on every render in order to clear the ones added
+ // by beforeShow hook at previous render
+ this.disabled = [];
+
+ const picker = this.picker;
+ picker.setViewSwitchLabel(switchLabel);
+ picker.setPrevButtonDisabled(prevButtonDisabled);
+ picker.setNextButtonDisabled(nextButtonDisabled);
+ }
+
+ setDisabled(date, classList) {
+ classList.add('disabled');
+ pushUnique(this.disabled, date);
+ }
+
+ // Execute beforeShow() callback and apply the result to the element
+ // args:
+ performBeforeHook(el, timeValue) {
+ let result = this.beforeShow(new Date(timeValue));
+ switch (typeof result) {
+ case 'boolean':
+ result = {enabled: result};
+ break;
+ case 'string':
+ result = {classes: result};
+ }
+
+ if (result) {
+ const classList = el.classList;
+ if (result.enabled === false) {
+ this.setDisabled(timeValue, classList);
+ }
+ if (result.classes) {
+ const extraClasses = result.classes.split(/\s+/);
+ classList.add(...extraClasses);
+ if (extraClasses.includes('disabled')) {
+ this.setDisabled(timeValue, classList);
+ }
+ }
+ if (result.content) {
+ replaceChildNodes(el, result.content);
+ }
+ }
+ }
+
+ renderCell(el, content, cellVal, date, {selected, range}, outOfScope, extraClasses = []) {
+ el.textContent = content;
+ if (this.isMinView) {
+ el.dataset.date = date;
+ }
+
+ const classList = el.classList;
+ el.className = `datepicker-cell ${this.cellClass}`;
+ if (cellVal < this.first) {
+ classList.add('prev');
+ } else if (cellVal > this.last) {
+ classList.add('next');
+ }
+ classList.add(...extraClasses);
+ if (outOfScope || this.checkDisabled(date, this.id)) {
+ this.setDisabled(date, classList);
+ }
+ if (range) {
+ const [rangeStart, rangeEnd] = range;
+ if (cellVal > rangeStart && cellVal < rangeEnd) {
+ classList.add('range');
+ }
+ if (cellVal === rangeStart) {
+ classList.add('range-start');
+ }
+ if (cellVal === rangeEnd) {
+ classList.add('range-end');
+ }
+ }
+ if (selected.includes(cellVal)) {
+ classList.add('selected');
+ }
+ if (cellVal === this.focused) {
+ classList.add('focused');
+ }
+
+ if (this.beforeShow) {
+ this.performBeforeHook(el, date);
+ }
+ }
+
+ refreshCell(el, cellVal, selected, [rangeStart, rangeEnd]) {
+ const classList = el.classList;
+ classList.remove('range', 'range-start', 'range-end', 'selected', 'focused');
+ if (cellVal > rangeStart && cellVal < rangeEnd) {
+ classList.add('range');
+ }
+ if (cellVal === rangeStart) {
+ classList.add('range-start');
+ }
+ if (cellVal === rangeEnd) {
+ classList.add('range-end');
+ }
+ if (selected.includes(cellVal)) {
+ classList.add('selected');
+ }
+ if (cellVal === this.focused) {
+ classList.add('focused');
+ }
+ }
+
+ changeFocusedCell(cellIndex) {
+ this.grid.querySelectorAll('.focused').forEach((el) => {
+ el.classList.remove('focused');
+ });
+ this.grid.children[cellIndex].classList.add('focused');
+ }
+ }
+
+ class DaysView extends View {
+ constructor(picker) {
+ super(picker, {
+ id: 0,
+ name: 'days',
+ cellClass: 'day',
+ });
+ }
+
+ init(options, onConstruction = true) {
+ if (onConstruction) {
+ const inner = parseHTML(daysTemplate).firstChild;
+ this.dow = inner.firstChild;
+ this.grid = inner.lastChild;
+ this.element.appendChild(inner);
+ }
+ super.init(options);
+ }
+
+ setOptions(options) {
+ let updateDOW;
+
+ if ('minDate' in options) {
+ this.minDate = options.minDate;
+ }
+ if ('maxDate' in options) {
+ this.maxDate = options.maxDate;
+ }
+ if (options.checkDisabled) {
+ this.checkDisabled = options.checkDisabled;
+ }
+ if (options.daysOfWeekDisabled) {
+ this.daysOfWeekDisabled = options.daysOfWeekDisabled;
+ updateDOW = true;
+ }
+ if (options.daysOfWeekHighlighted) {
+ this.daysOfWeekHighlighted = options.daysOfWeekHighlighted;
+ }
+ if ('todayHighlight' in options) {
+ this.todayHighlight = options.todayHighlight;
+ }
+ if ('weekStart' in options) {
+ this.weekStart = options.weekStart;
+ this.weekEnd = options.weekEnd;
+ updateDOW = true;
+ }
+ if (options.locale) {
+ const locale = this.locale = options.locale;
+ this.dayNames = locale.daysMin;
+ this.switchLabelFormat = locale.titleFormat;
+ updateDOW = true;
+ }
+ if ('beforeShowDay' in options) {
+ this.beforeShow = typeof options.beforeShowDay === 'function'
+ ? options.beforeShowDay
+ : undefined;
+ }
+
+ if ('weekNumbers' in options) {
+ if (options.weekNumbers && !this.weekNumbers) {
+ const weeksElem = parseHTML(weekNumbersTemplate).firstChild;
+ this.weekNumbers = {
+ element: weeksElem,
+ dow: weeksElem.firstChild,
+ weeks: weeksElem.lastChild,
+ };
+ this.element.insertBefore(weeksElem, this.element.firstChild);
+ } else if (this.weekNumbers && !options.weekNumbers) {
+ this.element.removeChild(this.weekNumbers.element);
+ this.weekNumbers = null;
+ }
+ }
+
+ if ('getWeekNumber' in options) {
+ this.getWeekNumber = options.getWeekNumber;
+ }
+
+ if ('showDaysOfWeek' in options) {
+ if (options.showDaysOfWeek) {
+ showElement(this.dow);
+ if (this.weekNumbers) {
+ showElement(this.weekNumbers.dow);
+ }
+ } else {
+ hideElement(this.dow);
+ if (this.weekNumbers) {
+ hideElement(this.weekNumbers.dow);
+ }
+ }
+ }
+
+ // update days-of-week when locale, daysOfweekDisabled or weekStart is changed
+ if (updateDOW) {
+ Array.from(this.dow.children).forEach((el, index) => {
+ const dow = (this.weekStart + index) % 7;
+ el.textContent = this.dayNames[dow];
+ el.className = this.daysOfWeekDisabled.includes(dow) ? 'dow disabled' : 'dow';
+ });
+ }
+ }
+
+ // Apply update on the focused date to view's settings
+ updateFocus() {
+ const viewDate = new Date(this.picker.viewDate);
+ const viewYear = viewDate.getFullYear();
+ const viewMonth = viewDate.getMonth();
+ const firstOfMonth = dateValue(viewYear, viewMonth, 1);
+ const start = dayOfTheWeekOf(firstOfMonth, this.weekStart, this.weekStart);
+
+ this.first = firstOfMonth;
+ this.last = dateValue(viewYear, viewMonth + 1, 0);
+ this.start = start;
+ this.focused = this.picker.viewDate;
+ }
+
+ // Apply update on the selected dates to view's settings
+ updateSelection() {
+ const {dates, rangepicker} = this.picker.datepicker;
+ this.selected = dates;
+ if (rangepicker) {
+ this.range = rangepicker.dates;
+ }
+ }
+
+ // Update the entire view UI
+ render() {
+ // update today marker on ever render
+ this.today = this.todayHighlight ? today() : undefined;
+
+ this.prepareForRender(
+ formatDate(this.focused, this.switchLabelFormat, this.locale),
+ this.first <= this.minDate,
+ this.last >= this.maxDate
+ );
+
+ if (this.weekNumbers) {
+ const weekStart = this.weekStart;
+ const startOfWeek = dayOfTheWeekOf(this.first, weekStart, weekStart);
+ Array.from(this.weekNumbers.weeks.children).forEach((el, index) => {
+ const dateOfWeekStart = addWeeks(startOfWeek, index);
+ el.textContent = this.getWeekNumber(dateOfWeekStart, weekStart);
+ if (index > 3) {
+ el.classList[dateOfWeekStart > this.last ? 'add' : 'remove']('next');
+ }
+ });
+ }
+ Array.from(this.grid.children).forEach((el, index) => {
+ const current = addDays(this.start, index);
+ const dateObj = new Date(current);
+ const day = dateObj.getDay();
+ const extraClasses = [];
+
+ if (this.today === current) {
+ extraClasses.push('today');
+ }
+ if (this.daysOfWeekHighlighted.includes(day)) {
+ extraClasses.push('highlighted');
+ }
+
+ this.renderCell(
+ el,
+ dateObj.getDate(),
+ current,
+ current,
+ this,
+ current < this.minDate
+ || current > this.maxDate
+ || this.daysOfWeekDisabled.includes(day),
+ extraClasses
+ );
+ });
+ }
+
+ // Update the view UI by applying the changes of selected and focused items
+ refresh() {
+ const range = this.range || [];
+ Array.from(this.grid.children).forEach((el) => {
+ this.refreshCell(el, Number(el.dataset.date), this.selected, range);
+ });
+ }
+
+ // Update the view UI by applying the change of focused item
+ refreshFocus() {
+ this.changeFocusedCell(Math.round((this.focused - this.start) / 86400000));
+ }
+ }
+
+ function computeMonthRange(range, thisYear) {
+ if (!range || !range[0] || !range[1]) {
+ return;
+ }
+
+ const [[startY, startM], [endY, endM]] = range;
+ if (startY > thisYear || endY < thisYear) {
+ return;
+ }
+ return [
+ startY === thisYear ? startM : -1,
+ endY === thisYear ? endM : 12,
+ ];
+ }
+
+ class MonthsView extends View {
+ constructor(picker) {
+ super(picker, {
+ id: 1,
+ name: 'months',
+ cellClass: 'month',
+ });
+ }
+
+ init(options, onConstruction = true) {
+ if (onConstruction) {
+ this.grid = this.element;
+ this.element.classList.add('months', 'datepicker-grid');
+ this.grid.appendChild(parseHTML(createTagRepeat('span', 12, {'data-month': ix => ix})));
+ this.first = 0;
+ this.last = 11;
+ }
+ super.init(options);
+ }
+
+ setOptions(options) {
+ if (options.locale) {
+ this.monthNames = options.locale.monthsShort;
+ }
+ if ('minDate' in options) {
+ if (options.minDate === undefined) {
+ this.minYear = this.minMonth = this.minDate = undefined;
+ } else {
+ const minDateObj = new Date(options.minDate);
+ this.minYear = minDateObj.getFullYear();
+ this.minMonth = minDateObj.getMonth();
+ this.minDate = minDateObj.setDate(1);
+ }
+ }
+ if ('maxDate' in options) {
+ if (options.maxDate === undefined) {
+ this.maxYear = this.maxMonth = this.maxDate = undefined;
+ } else {
+ const maxDateObj = new Date(options.maxDate);
+ this.maxYear = maxDateObj.getFullYear();
+ this.maxMonth = maxDateObj.getMonth();
+ this.maxDate = dateValue(this.maxYear, this.maxMonth + 1, 0);
+ }
+ }
+ if (options.checkDisabled) {
+ this.checkDisabled = this.isMinView || options.datesDisabled === null
+ ? options.checkDisabled
+ : () => false;
+ }
+ if ('beforeShowMonth' in options) {
+ this.beforeShow = typeof options.beforeShowMonth === 'function'
+ ? options.beforeShowMonth
+ : undefined;
+ }
+ }
+
+ // Update view's settings to reflect the viewDate set on the picker
+ updateFocus() {
+ const viewDate = new Date(this.picker.viewDate);
+ this.year = viewDate.getFullYear();
+ this.focused = viewDate.getMonth();
+ }
+
+ // Update view's settings to reflect the selected dates
+ updateSelection() {
+ const {dates, rangepicker} = this.picker.datepicker;
+ this.selected = dates.reduce((selected, timeValue) => {
+ const date = new Date(timeValue);
+ const year = date.getFullYear();
+ const month = date.getMonth();
+ if (selected[year] === undefined) {
+ selected[year] = [month];
+ } else {
+ pushUnique(selected[year], month);
+ }
+ return selected;
+ }, {});
+ if (rangepicker && rangepicker.dates) {
+ this.range = rangepicker.dates.map(timeValue => {
+ const date = new Date(timeValue);
+ return isNaN(date) ? undefined : [date.getFullYear(), date.getMonth()];
+ });
+ }
+ }
+
+ // Update the entire view UI
+ render() {
+ this.prepareForRender(
+ this.year,
+ this.year <= this.minYear,
+ this.year >= this.maxYear
+ );
+
+ const selected = this.selected[this.year] || [];
+ const yrOutOfRange = this.year < this.minYear || this.year > this.maxYear;
+ const isMinYear = this.year === this.minYear;
+ const isMaxYear = this.year === this.maxYear;
+ const range = computeMonthRange(this.range, this.year);
+
+ Array.from(this.grid.children).forEach((el, index) => {
+ const date = regularizeDate(new Date(this.year, index, 1), 1, this.isRangeEnd);
+
+ this.renderCell(
+ el,
+ this.monthNames[index],
+ index,
+ date,
+ {selected, range},
+ yrOutOfRange
+ || isMinYear && index < this.minMonth
+ || isMaxYear && index > this.maxMonth
+ );
+ });
+ }
+
+ // Update the view UI by applying the changes of selected and focused items
+ refresh() {
+ const selected = this.selected[this.year] || [];
+ const range = computeMonthRange(this.range, this.year) || [];
+ Array.from(this.grid.children).forEach((el, index) => {
+ this.refreshCell(el, index, selected, range);
+ });
+ }
+
+ // Update the view UI by applying the change of focused item
+ refreshFocus() {
+ this.changeFocusedCell(this.focused);
+ }
+ }
+
+ function toTitleCase(word) {
+ return [...word].reduce((str, ch, ix) => str += ix ? ch : ch.toUpperCase(), '');
+ }
+
+ // Class representing the years and decades view elements
+ class YearsView extends View {
+ constructor(picker, config) {
+ super(picker, config);
+ }
+
+ init(options, onConstruction = true) {
+ if (onConstruction) {
+ this.navStep = this.step * 10;
+ this.beforeShowOption = `beforeShow${toTitleCase(this.cellClass)}`;
+ this.grid = this.element;
+ this.element.classList.add(this.name, 'datepicker-grid');
+ this.grid.appendChild(parseHTML(createTagRepeat('span', 12)));
+ }
+ super.init(options);
+ }
+
+ setOptions(options) {
+ if ('minDate' in options) {
+ if (options.minDate === undefined) {
+ this.minYear = this.minDate = undefined;
+ } else {
+ this.minYear = startOfYearPeriod(options.minDate, this.step);
+ this.minDate = dateValue(this.minYear, 0, 1);
+ }
+ }
+ if ('maxDate' in options) {
+ if (options.maxDate === undefined) {
+ this.maxYear = this.maxDate = undefined;
+ } else {
+ this.maxYear = startOfYearPeriod(options.maxDate, this.step);
+ this.maxDate = dateValue(this.maxYear, 11, 31);
+ }
+ }
+ if (options.checkDisabled) {
+ this.checkDisabled = this.isMinView || options.datesDisabled === null
+ ? options.checkDisabled
+ : () => false;
+ }
+ if (this.beforeShowOption in options) {
+ const beforeShow = options[this.beforeShowOption];
+ this.beforeShow = typeof beforeShow === 'function' ? beforeShow : undefined;
+ }
+ }
+
+ // Update view's settings to reflect the viewDate set on the picker
+ updateFocus() {
+ const viewDate = new Date(this.picker.viewDate);
+ const first = startOfYearPeriod(viewDate, this.navStep);
+ const last = first + 9 * this.step;
+
+ this.first = first;
+ this.last = last;
+ this.start = first - this.step;
+ this.focused = startOfYearPeriod(viewDate, this.step);
+ }
+
+ // Update view's settings to reflect the selected dates
+ updateSelection() {
+ const {dates, rangepicker} = this.picker.datepicker;
+ this.selected = dates.reduce((years, timeValue) => {
+ return pushUnique(years, startOfYearPeriod(timeValue, this.step));
+ }, []);
+ if (rangepicker && rangepicker.dates) {
+ this.range = rangepicker.dates.map(timeValue => {
+ if (timeValue !== undefined) {
+ return startOfYearPeriod(timeValue, this.step);
+ }
+ });
+ }
+ }
+
+ // Update the entire view UI
+ render() {
+ this.prepareForRender(
+ `${this.first}-${this.last}`,
+ this.first <= this.minYear,
+ this.last >= this.maxYear
+ );
+
+ Array.from(this.grid.children).forEach((el, index) => {
+ const current = this.start + (index * this.step);
+ const date = regularizeDate(new Date(current, 0, 1), 2, this.isRangeEnd);
+
+ el.dataset.year = current;
+ this.renderCell(
+ el,
+ current,
+ current,
+ date,
+ this,
+ current < this.minYear || current > this.maxYear
+ );
+ });
+ }
+
+ // Update the view UI by applying the changes of selected and focused items
+ refresh() {
+ const range = this.range || [];
+ Array.from(this.grid.children).forEach((el) => {
+ this.refreshCell(el, Number(el.textContent), this.selected, range);
+ });
+ }
+
+ // Update the view UI by applying the change of focused item
+ refreshFocus() {
+ this.changeFocusedCell(Math.round((this.focused - this.start) / this.step));
+ }
+ }
+
+ function triggerDatepickerEvent(datepicker, type) {
+ const options = {
+ bubbles: true,
+ cancelable: true,
+ detail: {
+ date: datepicker.getDate(),
+ viewDate: new Date(datepicker.picker.viewDate),
+ viewId: datepicker.picker.currentView.id,
+ datepicker,
+ },
+ };
+ datepicker.element.dispatchEvent(new CustomEvent(type, options));
+ }
+
+ // direction: -1 (to previous), 1 (to next)
+ function goToPrevOrNext(datepicker, direction) {
+ const {config, picker} = datepicker;
+ const {currentView, viewDate} = picker;
+ let newViewDate;
+ switch (currentView.id) {
+ case 0:
+ newViewDate = addMonths(viewDate, direction);
+ break;
+ case 1:
+ newViewDate = addYears(viewDate, direction);
+ break;
+ default:
+ newViewDate = addYears(viewDate, direction * currentView.navStep);
+ }
+ newViewDate = limitToRange(newViewDate, config.minDate, config.maxDate);
+ picker.changeFocus(newViewDate).render();
+ }
+
+ function switchView(datepicker) {
+ const viewId = datepicker.picker.currentView.id;
+ if (viewId === datepicker.config.maxView) {
+ return;
+ }
+ datepicker.picker.changeView(viewId + 1).render();
+ }
+
+ function clearSelection(datepicker) {
+ datepicker.setDate({clear: true});
+ }
+
+ function goToOrSelectToday(datepicker) {
+ const currentDate = today();
+ if (datepicker.config.todayButtonMode === 1) {
+ datepicker.setDate(currentDate, {forceRefresh: true, viewDate: currentDate});
+ } else {
+ datepicker.setFocusedDate(currentDate, true);
+ }
+ }
+
+ function unfocus(datepicker) {
+ const onBlur = () => {
+ if (datepicker.config.updateOnBlur) {
+ datepicker.update({revert: true});
+ } else {
+ datepicker.refresh('input');
+ }
+ datepicker.hide();
+ };
+ const element = datepicker.element;
+
+ if (isActiveElement(element)) {
+ element.addEventListener('blur', onBlur, {once: true});
+ } else {
+ onBlur();
+ }
+ }
+
+ function goToSelectedMonthOrYear(datepicker, selection) {
+ const picker = datepicker.picker;
+ const viewDate = new Date(picker.viewDate);
+ const viewId = picker.currentView.id;
+ const newDate = viewId === 1
+ ? addMonths(viewDate, selection - viewDate.getMonth())
+ : addYears(viewDate, selection - viewDate.getFullYear());
+
+ picker.changeFocus(newDate).changeView(viewId - 1).render();
+ }
+
+ function onClickViewSwitch(datepicker) {
+ switchView(datepicker);
+ }
+
+ function onClickPrevButton(datepicker) {
+ goToPrevOrNext(datepicker, -1);
+ }
+
+ function onClickNextButton(datepicker) {
+ goToPrevOrNext(datepicker, 1);
+ }
+
+ // For the picker's main block to delegete the events from `datepicker-cell`s
+ function onClickView(datepicker, ev) {
+ const target = findElementInEventPath(ev, '.datepicker-cell');
+ if (!target || target.classList.contains('disabled')) {
+ return;
+ }
+
+ const {id, isMinView} = datepicker.picker.currentView;
+ const data = target.dataset;
+ if (isMinView) {
+ datepicker.setDate(Number(data.date));
+ } else if (id === 1) {
+ goToSelectedMonthOrYear(datepicker, Number(data.month));
+ } else {
+ goToSelectedMonthOrYear(datepicker, Number(data.year));
+ }
+ }
+
+ function onMousedownPicker(ev) {
+ ev.preventDefault();
+ }
+
+ const orientClasses = ['left', 'top', 'right', 'bottom'].reduce((obj, key) => {
+ obj[key] = `datepicker-orient-${key}`;
+ return obj;
+ }, {});
+ const toPx = num => num ? `${num}px` : num;
+
+ function processPickerOptions(picker, options) {
+ if ('title' in options) {
+ if (options.title) {
+ picker.controls.title.textContent = options.title;
+ showElement(picker.controls.title);
+ } else {
+ picker.controls.title.textContent = '';
+ hideElement(picker.controls.title);
+ }
+ }
+ if (options.prevArrow) {
+ const prevButton = picker.controls.prevButton;
+ emptyChildNodes(prevButton);
+ options.prevArrow.forEach((node) => {
+ prevButton.appendChild(node.cloneNode(true));
+ });
+ }
+ if (options.nextArrow) {
+ const nextButton = picker.controls.nextButton;
+ emptyChildNodes(nextButton);
+ options.nextArrow.forEach((node) => {
+ nextButton.appendChild(node.cloneNode(true));
+ });
+ }
+ if (options.locale) {
+ picker.controls.todayButton.textContent = options.locale.today;
+ picker.controls.clearButton.textContent = options.locale.clear;
+ }
+ if ('todayButton' in options) {
+ if (options.todayButton) {
+ showElement(picker.controls.todayButton);
+ } else {
+ hideElement(picker.controls.todayButton);
+ }
+ }
+ if ('minDate' in options || 'maxDate' in options) {
+ const {minDate, maxDate} = picker.datepicker.config;
+ picker.controls.todayButton.disabled = !isInRange(today(), minDate, maxDate);
+ }
+ if ('clearButton' in options) {
+ if (options.clearButton) {
+ showElement(picker.controls.clearButton);
+ } else {
+ hideElement(picker.controls.clearButton);
+ }
+ }
+ }
+
+ // Compute view date to reset, which will be...
+ // - the last item of the selected dates or defaultViewDate if no selection
+ // - limitted to minDate or maxDate if it exceeds the range
+ function computeResetViewDate(datepicker) {
+ const {dates, config, rangeSideIndex} = datepicker;
+ const viewDate = dates.length > 0
+ ? lastItemOf(dates)
+ : regularizeDate(config.defaultViewDate, config.pickLevel, rangeSideIndex);
+ return limitToRange(viewDate, config.minDate, config.maxDate);
+ }
+
+ // Change current view's view date
+ function setViewDate(picker, newDate) {
+ if (!('_oldViewDate' in picker) && newDate !== picker.viewDate) {
+ picker._oldViewDate = picker.viewDate;
+ }
+ picker.viewDate = newDate;
+
+ // return whether the new date is in different period on time from the one
+ // displayed in the current view
+ // when true, the view needs to be re-rendered on the next UI refresh.
+ const {id, year, first, last} = picker.currentView;
+ const viewYear = new Date(newDate).getFullYear();
+ switch (id) {
+ case 0:
+ return newDate < first || newDate > last;
+ case 1:
+ return viewYear !== year;
+ default:
+ return viewYear < first || viewYear > last;
+ }
+ }
+
+ function getTextDirection(el) {
+ return window.getComputedStyle(el).direction;
+ }
+
+ // find the closet scrollable ancestor elemnt under the body
+ function findScrollParents(el) {
+ const parent = getParent(el);
+ if (parent === document.body || !parent) {
+ return;
+ }
+
+ // checking overflow only is enough because computed overflow cannot be
+ // visible or a combination of visible and other when either axis is set
+ // to other than visible.
+ // (Setting one axis to other than 'visible' while the other is 'visible'
+ // results in the other axis turning to 'auto')
+ return window.getComputedStyle(parent).overflow !== 'visible'
+ ? parent
+ : findScrollParents(parent);
+ }
+
+ // Class representing the picker UI
+ class Picker {
+ constructor(datepicker) {
+ const {config, inputField} = this.datepicker = datepicker;
+
+ const template = pickerTemplate.replace(/%buttonClass%/g, config.buttonClass);
+ const element = this.element = parseHTML(template).firstChild;
+ const [header, main, footer] = element.firstChild.children;
+ const title = header.firstElementChild;
+ const [prevButton, viewSwitch, nextButton] = header.lastElementChild.children;
+ const [todayButton, clearButton] = footer.firstChild.children;
+ const controls = {
+ title,
+ prevButton,
+ viewSwitch,
+ nextButton,
+ todayButton,
+ clearButton,
+ };
+ this.main = main;
+ this.controls = controls;
+
+ const elementClass = inputField ? 'dropdown' : 'inline';
+ element.classList.add(`datepicker-${elementClass}`);
+
+ processPickerOptions(this, config);
+ this.viewDate = computeResetViewDate(datepicker);
+
+ // set up event listeners
+ registerListeners(datepicker, [
+ [element, 'mousedown', onMousedownPicker],
+ [main, 'click', onClickView.bind(null, datepicker)],
+ [controls.viewSwitch, 'click', onClickViewSwitch.bind(null, datepicker)],
+ [controls.prevButton, 'click', onClickPrevButton.bind(null, datepicker)],
+ [controls.nextButton, 'click', onClickNextButton.bind(null, datepicker)],
+ [controls.todayButton, 'click', goToOrSelectToday.bind(null, datepicker)],
+ [controls.clearButton, 'click', clearSelection.bind(null, datepicker)],
+ ]);
+
+ // set up views
+ this.views = [
+ new DaysView(this),
+ new MonthsView(this),
+ new YearsView(this, {id: 2, name: 'years', cellClass: 'year', step: 1}),
+ new YearsView(this, {id: 3, name: 'decades', cellClass: 'decade', step: 10}),
+ ];
+ this.currentView = this.views[config.startView];
+
+ this.currentView.render();
+ this.main.appendChild(this.currentView.element);
+ if (config.container) {
+ config.container.appendChild(this.element);
+ } else {
+ inputField.after(this.element);
+ }
+ }
+
+ setOptions(options) {
+ processPickerOptions(this, options);
+ this.views.forEach((view) => {
+ view.init(options, false);
+ });
+ this.currentView.render();
+ }
+
+ detach() {
+ this.element.remove();
+ }
+
+ show() {
+ if (this.active) {
+ return;
+ }
+
+ const {datepicker, element} = this;
+ const inputField = datepicker.inputField;
+ if (inputField) {
+ // ensure picker's direction matches input's
+ const inputDirection = getTextDirection(inputField);
+ if (inputDirection !== getTextDirection(getParent(element))) {
+ element.dir = inputDirection;
+ } else if (element.dir) {
+ element.removeAttribute('dir');
+ }
+
+ // Determine the picker's position first to prevent `orientation: 'auto'`
+ // from being miscalculated to 'bottom' after the picker temporarily
+ // shown below the input field expands the document height if the field
+ // is at the bottom edge of the document
+ this.place();
+ element.classList.add('active');
+
+ if (datepicker.config.disableTouchKeyboard) {
+ inputField.blur();
+ }
+ } else {
+ element.classList.add('active');
+ }
+ this.active = true;
+ triggerDatepickerEvent(datepicker, 'show');
+ }
+
+ hide() {
+ if (!this.active) {
+ return;
+ }
+ this.datepicker.exitEditMode();
+ this.element.classList.remove('active');
+ this.active = false;
+ triggerDatepickerEvent(this.datepicker, 'hide');
+ }
+
+ place() {
+ const {classList, style} = this.element;
+ // temporarily display the picker to get its size and offset parent
+ style.display = 'block';
+
+ const {
+ width: calendarWidth,
+ height: calendarHeight,
+ } = this.element.getBoundingClientRect();
+ const offsetParent = this.element.offsetParent;
+ // turn the picker back to hidden so that the position is determined with
+ // the state before it is shown.
+ style.display = '';
+
+ const {config, inputField} = this.datepicker;
+ const {
+ left: inputLeft,
+ top: inputTop,
+ right: inputRight,
+ bottom: inputBottom,
+ width: inputWidth,
+ height: inputHeight
+ } = inputField.getBoundingClientRect();
+ let {x: orientX, y: orientY} = config.orientation;
+ let left = inputLeft;
+ let top = inputTop;
+
+ // caliculate offsetLeft/Top of inputField
+ if (offsetParent === document.body || !offsetParent) {
+ left += window.scrollX;
+ top += window.scrollY;
+ } else {
+ const offsetParentRect = offsetParent.getBoundingClientRect();
+ left -= offsetParentRect.left - offsetParent.scrollLeft;
+ top -= offsetParentRect.top - offsetParent.scrollTop;
+ }
+
+ // caliculate the boundaries of the visible area that contains inputField
+ const scrollParent = findScrollParents(inputField);
+ let scrollAreaLeft = 0;
+ let scrollAreaTop = 0;
+ let {
+ clientWidth: scrollAreaRight,
+ clientHeight: scrollAreaBottom,
+ } = document.documentElement;
+
+ if (scrollParent) {
+ const scrollParentRect = scrollParent.getBoundingClientRect();
+ if (scrollParentRect.top > 0) {
+ scrollAreaTop = scrollParentRect.top;
+ }
+ if (scrollParentRect.left > 0) {
+ scrollAreaLeft = scrollParentRect.left;
+ }
+ if (scrollParentRect.right < scrollAreaRight) {
+ scrollAreaRight = scrollParentRect.right;
+ }
+ if (scrollParentRect.bottom < scrollAreaBottom) {
+ scrollAreaBottom = scrollParentRect.bottom;
+ }
+ }
+
+ // determine the horizontal orientation and left position
+ let adjustment = 0;
+ if (orientX === 'auto') {
+ if (inputLeft < scrollAreaLeft) {
+ orientX = 'left';
+ adjustment = scrollAreaLeft - inputLeft;
+ } else if (inputLeft + calendarWidth > scrollAreaRight) {
+ orientX = 'right';
+ if (scrollAreaRight < inputRight) {
+ adjustment = scrollAreaRight - inputRight;
+ }
+ } else if (getTextDirection(inputField) === 'rtl') {
+ orientX = inputRight - calendarWidth < scrollAreaLeft ? 'left' : 'right';
+ } else {
+ orientX = 'left';
+ }
+ }
+ if (orientX === 'right') {
+ left += inputWidth - calendarWidth;
+ }
+ left += adjustment;
+
+ // determine the vertical orientation and top position
+ if (orientY === 'auto') {
+ if (inputTop - calendarHeight > scrollAreaTop) {
+ orientY = inputBottom + calendarHeight > scrollAreaBottom ? 'top' : 'bottom';
+ } else {
+ orientY = 'bottom';
+ }
+ }
+ if (orientY === 'top') {
+ top -= calendarHeight;
+ } else {
+ top += inputHeight;
+ }
+
+ classList.remove(...Object.values(orientClasses));
+ classList.add(orientClasses[orientX], orientClasses[orientY]);
+
+ style.left = toPx(left);
+ style.top = toPx(top);
+ }
+
+ setViewSwitchLabel(labelText) {
+ this.controls.viewSwitch.textContent = labelText;
+ }
+
+ setPrevButtonDisabled(disabled) {
+ this.controls.prevButton.disabled = disabled;
+ }
+
+ setNextButtonDisabled(disabled) {
+ this.controls.nextButton.disabled = disabled;
+ }
+
+ changeView(viewId) {
+ const currentView = this.currentView;
+ if (viewId !== currentView.id) {
+ if (!this._oldView) {
+ this._oldView = currentView;
+ }
+ this.currentView = this.views[viewId];
+ this._renderMethod = 'render';
+ }
+ return this;
+ }
+
+ // Change the focused date (view date)
+ changeFocus(newViewDate) {
+ this._renderMethod = setViewDate(this, newViewDate) ? 'render' : 'refreshFocus';
+ this.views.forEach((view) => {
+ view.updateFocus();
+ });
+ return this;
+ }
+
+ // Apply the change of the selected dates
+ update(viewDate = undefined) {
+ const newViewDate = viewDate === undefined
+ ? computeResetViewDate(this.datepicker)
+ : viewDate;
+ this._renderMethod = setViewDate(this, newViewDate) ? 'render' : 'refresh';
+ this.views.forEach((view) => {
+ view.updateFocus();
+ view.updateSelection();
+ });
+ return this;
+ }
+
+ // Refresh the picker UI
+ render(quickRender = true) {
+ const {currentView, datepicker, _oldView: oldView} = this;
+ const oldViewDate = new Date(this._oldViewDate);
+ const renderMethod = (quickRender && this._renderMethod) || 'render';
+ delete this._oldView;
+ delete this._oldViewDate;
+ delete this._renderMethod;
+
+ currentView[renderMethod]();
+ if (oldView) {
+ this.main.replaceChild(currentView.element, oldView.element);
+ triggerDatepickerEvent(datepicker, 'changeView');
+ }
+ if (!isNaN(oldViewDate)) {
+ const newViewDate = new Date(this.viewDate);
+ if (newViewDate.getFullYear() !== oldViewDate.getFullYear()) {
+ triggerDatepickerEvent(datepicker, 'changeYear');
+ }
+ if (newViewDate.getMonth() !== oldViewDate.getMonth()) {
+ triggerDatepickerEvent(datepicker, 'changeMonth');
+ }
+ }
+ }
+ }
+
+ // Find the closest date that doesn't meet the condition for unavailable date
+ // Returns undefined if no available date is found
+ // addFn: function to calculate the next date
+ // - args: time value, amount
+ // increase: amount to pass to addFn
+ // testFn: function to test the unavailability of the date
+ // - args: time value; return: true if unavailable
+ function findNextAvailableOne(date, addFn, increase, testFn, min, max) {
+ if (!isInRange(date, min, max)) {
+ return;
+ }
+ if (testFn(date)) {
+ const newDate = addFn(date, increase);
+ return findNextAvailableOne(newDate, addFn, increase, testFn, min, max);
+ }
+ return date;
+ }
+
+ // direction: -1 (left/up), 1 (right/down)
+ // vertical: true for up/down, false for left/right
+ function moveByArrowKey(datepicker, direction, vertical) {
+ const picker = datepicker.picker;
+ const currentView = picker.currentView;
+ const step = currentView.step || 1;
+ let viewDate = picker.viewDate;
+ let addFn;
+ switch (currentView.id) {
+ case 0:
+ viewDate = addDays(viewDate, vertical ? direction * 7 : direction);
+ addFn = addDays;
+ break;
+ case 1:
+ viewDate = addMonths(viewDate, vertical ? direction * 4 : direction);
+ addFn = addMonths;
+ break;
+ default:
+ viewDate = addYears(viewDate, direction * (vertical ? 4 : 1) * step);
+ addFn = addYears;
+ }
+ viewDate = findNextAvailableOne(
+ viewDate,
+ addFn,
+ direction < 0 ? -step : step,
+ (date) => currentView.disabled.includes(date),
+ currentView.minDate,
+ currentView.maxDate
+ );
+ if (viewDate !== undefined) {
+ picker.changeFocus(viewDate).render();
+ }
+ }
+
+ function onKeydown(datepicker, ev) {
+ const {config, picker, editMode} = datepicker;
+ const active = picker.active;
+ const {key, altKey, shiftKey} = ev;
+ const ctrlOrMetaKey = ev.ctrlKey || ev.metaKey;
+ const cancelEvent = () => {
+ ev.preventDefault();
+ ev.stopPropagation();
+ };
+
+ // tab/enter keys should not be taken by shortcut keys
+ if (key === 'Tab') {
+ unfocus(datepicker);
+ return;
+ }
+ if (key === 'Enter') {
+ if (!active) {
+ datepicker.update();
+ } else if (editMode) {
+ datepicker.exitEditMode({update: true, autohide: config.autohide});
+ } else {
+ const currentView = picker.currentView;
+ if (currentView.isMinView) {
+ datepicker.setDate(picker.viewDate);
+ } else {
+ picker.changeView(currentView.id - 1).render();
+ cancelEvent();
+ }
+ }
+ return;
+ }
+
+ const shortcutKeys = config.shortcutKeys;
+ const keyInfo = {key, ctrlOrMetaKey, altKey, shiftKey};
+ const shortcut = Object.keys(shortcutKeys).find((item) => {
+ const keyDef = shortcutKeys[item];
+ return !Object.keys(keyDef).find(prop => keyDef[prop] !== keyInfo[prop]);
+ });
+ if (shortcut) {
+ let action;
+ if (shortcut === 'toggle') {
+ action = shortcut;
+ } else if (editMode) {
+ if (shortcut === 'exitEditMode') {
+ action = shortcut;
+ }
+ } else if (active) {
+ if (shortcut === 'hide') {
+ action = shortcut;
+ } else if (shortcut === 'prevButton') {
+ action = [goToPrevOrNext, [datepicker, -1]];
+ } else if (shortcut === 'nextButton') {
+ action = [goToPrevOrNext, [datepicker, 1]];
+ } else if (shortcut === 'viewSwitch') {
+ action = [switchView, [datepicker]];
+ } else if (config.clearButton && shortcut === 'clearButton') {
+ action = [clearSelection, [datepicker]];
+ } else if (config.todayButton && shortcut === 'todayButton') {
+ action = [goToOrSelectToday, [datepicker]];
+ }
+ } else if (shortcut === 'show') {
+ action = shortcut;
+ }
+ if (action) {
+ if (Array.isArray(action)) {
+ action[0].apply(null, action[1]);
+ } else {
+ datepicker[action]();
+ }
+ cancelEvent();
+ return;
+ }
+ }
+
+ // perform as a regular when picker in hidden or in edit mode
+ if (!active || editMode) {
+ return;
+ }
+
+ const handleArrowKeyPress = (direction, vertical) => {
+ if (shiftKey || ctrlOrMetaKey || altKey) {
+ datepicker.enterEditMode();
+ } else {
+ moveByArrowKey(datepicker, direction, vertical);
+ ev.preventDefault();
+ }
+ };
+
+ if (key === 'ArrowLeft') {
+ handleArrowKeyPress(-1, false);
+ } else if (key === 'ArrowRight') {
+ handleArrowKeyPress(1, false);
+ } else if (key === 'ArrowUp') {
+ handleArrowKeyPress(-1, true);
+ } else if (key === 'ArrowDown') {
+ handleArrowKeyPress(1, true);
+ } else if (
+ key === 'Backspace'
+ || key === 'Delete'
+ // When autofill is performed, Chromium-based browsers trigger fake
+ // keydown/keyup events that don't have the `key` property (on Edge,
+ // keyup only) in addition to the input event. Therefore, we need to
+ // check the existence of `key`'s value before checking the length.
+ // (issue #144)
+ || (key && key.length === 1 && !ctrlOrMetaKey)
+ ) {
+ datepicker.enterEditMode();
+ }
+ }
+
+ function onFocus(datepicker) {
+ if (datepicker.config.showOnFocus && !datepicker._showing) {
+ datepicker.show();
+ }
+ }
+
+ // for the prevention for entering edit mode while getting focus on click
+ function onMousedown(datepicker, ev) {
+ const el = ev.target;
+ if (datepicker.picker.active || datepicker.config.showOnClick) {
+ el._active = isActiveElement(el);
+ el._clicking = setTimeout(() => {
+ delete el._active;
+ delete el._clicking;
+ }, 2000);
+ }
+ }
+
+ function onClickInput(datepicker, ev) {
+ const el = ev.target;
+ if (!el._clicking) {
+ return;
+ }
+ clearTimeout(el._clicking);
+ delete el._clicking;
+
+ if (el._active) {
+ datepicker.enterEditMode();
+ }
+ delete el._active;
+
+ if (datepicker.config.showOnClick) {
+ datepicker.show();
+ }
+ }
+
+ function onPaste(datepicker, ev) {
+ if (ev.clipboardData.types.includes('text/plain')) {
+ datepicker.enterEditMode();
+ }
+ }
+
+ // for the `document` to delegate the events from outside the picker/input field
+ function onClickOutside(datepicker, ev) {
+ const {element, picker} = datepicker;
+ // check both picker's and input's activeness to make updateOnBlur work in
+ // the cases where...
+ // - picker is hidden by ESC key press → input stays focused
+ // - input is unfocused by closing mobile keyboard → piker is kept shown
+ if (!picker.active && !isActiveElement(element)) {
+ return;
+ }
+ const pickerElem = picker.element;
+ if (findElementInEventPath(ev, el => el === element || el === pickerElem)) {
+ return;
+ }
+ unfocus(datepicker);
+ }
+
+ function stringifyDates(dates, config) {
+ return dates
+ .map(dt => formatDate(dt, config.format, config.locale))
+ .join(config.dateDelimiter);
+ }
+
+ // parse input dates and create an array of time values for selection
+ // returns undefined if there are no valid dates in inputDates
+ // when origDates (current selection) is passed, the function works to mix
+ // the input dates into the current selection
+ function processInputDates(datepicker, inputDates, clear = false) {
+ if (inputDates.length === 0) {
+ // empty input is considered valid unless origiDates is passed
+ return clear ? [] : undefined;
+ }
+
+ const {config, dates: origDates, rangeSideIndex} = datepicker;
+ const {pickLevel, maxNumberOfDates} = config;
+ let newDates = inputDates.reduce((dates, dt) => {
+ let date = parseDate(dt, config.format, config.locale);
+ if (date === undefined) {
+ return dates;
+ }
+ // adjust to 1st of the month/Jan 1st of the year
+ // or to the last day of the monh/Dec 31st of the year if the datepicker
+ // is the range-end picker of a rangepicker
+ date = regularizeDate(date, pickLevel, rangeSideIndex);
+ if (
+ isInRange(date, config.minDate, config.maxDate)
+ && !dates.includes(date)
+ && !config.checkDisabled(date, pickLevel)
+ && (pickLevel > 0 || !config.daysOfWeekDisabled.includes(new Date(date).getDay()))
+ ) {
+ dates.push(date);
+ }
+ return dates;
+ }, []);
+ if (newDates.length === 0) {
+ return;
+ }
+ if (config.multidate && !clear) {
+ // get the synmetric difference between origDates and newDates
+ newDates = newDates.reduce((dates, date) => {
+ if (!origDates.includes(date)) {
+ dates.push(date);
+ }
+ return dates;
+ }, origDates.filter(date => !newDates.includes(date)));
+ }
+ // do length check always because user can input multiple dates regardless of the mode
+ return maxNumberOfDates && newDates.length > maxNumberOfDates
+ ? newDates.slice(maxNumberOfDates * -1)
+ : newDates;
+ }
+
+ // refresh the UI elements
+ // modes: 1: input only, 2, picker only, 3 both
+ function refreshUI(datepicker, mode = 3, quickRender = true, viewDate = undefined) {
+ const {config, picker, inputField} = datepicker;
+ if (mode & 2) {
+ const newView = picker.active ? config.pickLevel : config.startView;
+ picker.update(viewDate).changeView(newView).render(quickRender);
+ }
+ if (mode & 1 && inputField) {
+ inputField.value = stringifyDates(datepicker.dates, config);
+ }
+ }
+
+ function setDate(datepicker, inputDates, options) {
+ const config = datepicker.config;
+ let {clear, render, autohide, revert, forceRefresh, viewDate} = options;
+ if (render === undefined) {
+ render = true;
+ }
+ if (!render) {
+ autohide = forceRefresh = false;
+ } else if (autohide === undefined) {
+ autohide = config.autohide;
+ }
+ viewDate = parseDate(viewDate, config.format, config.locale);
+
+ const newDates = processInputDates(datepicker, inputDates, clear);
+ if (!newDates && !revert) {
+ return;
+ }
+ if (newDates && newDates.toString() !== datepicker.dates.toString()) {
+ datepicker.dates = newDates;
+ refreshUI(datepicker, render ? 3 : 1, true, viewDate);
+ triggerDatepickerEvent(datepicker, 'changeDate');
+ } else {
+ refreshUI(datepicker, forceRefresh ? 3 : 1, true, viewDate);
+ }
+
+ if (autohide) {
+ datepicker.hide();
+ }
+ }
+
+ function getOutputConverter(datepicker, format) {
+ return format
+ ? date => formatDate(date, format, datepicker.config.locale)
+ : date => new Date(date);
+ }
+
+ /**
+ * Class representing a date picker
+ */
+ class Datepicker {
+ /**
+ * Create a date picker
+ * @param {Element} element - element to bind a date picker
+ * @param {Object} [options] - config options
+ * @param {DateRangePicker} [rangepicker] - DateRangePicker instance the
+ * date picker belongs to. Use this only when creating date picker as a part
+ * of date range picker
+ */
+ constructor(element, options = {}, rangepicker = undefined) {
+ element.datepicker = this;
+ this.element = element;
+ this.dates = [];
+
+ // initialize config
+ const config = this.config = Object.assign({
+ buttonClass: (options.buttonClass && String(options.buttonClass)) || 'button',
+ container: null,
+ defaultViewDate: today(),
+ maxDate: undefined,
+ minDate: undefined,
+ }, processOptions(defaultOptions, this));
+
+ // configure by type
+ let inputField;
+ if (element.tagName === 'INPUT') {
+ inputField = this.inputField = element;
+ inputField.classList.add('datepicker-input');
+ if (options.container) {
+ // omit string type check because it doesn't guarantee to avoid errors
+ // (invalid selector string causes abend with sytax error)
+ config.container = options.container instanceof HTMLElement
+ ? options.container
+ : document.querySelector(options.container);
+ }
+ } else {
+ config.container = element;
+ }
+ if (rangepicker) {
+ // check validiry
+ const index = rangepicker.inputs.indexOf(inputField);
+ const datepickers = rangepicker.datepickers;
+ if (index < 0 || index > 1 || !Array.isArray(datepickers)) {
+ throw Error('Invalid rangepicker object.');
+ }
+ // attach itaelf to the rangepicker here so that processInputDates() can
+ // determine if this is the range-end picker of the rangepicker while
+ // setting inital values when pickLevel > 0
+ datepickers[index] = this;
+ this.rangepicker = rangepicker;
+ this.rangeSideIndex = index;
+ }
+
+ // set up config
+ this._options = options;
+ Object.assign(config, processOptions(options, this));
+ config.shortcutKeys = createShortcutKeyConfig(options.shortcutKeys || {});
+
+ // process initial value
+ const initialDates = stringToArray(
+ element.value || element.dataset.date,
+ config.dateDelimiter
+ );
+ delete element.dataset.date;
+ const inputDateValues = processInputDates(this, initialDates);
+ if (inputDateValues && inputDateValues.length > 0) {
+ this.dates = inputDateValues;
+ }
+ if (inputField) {
+ inputField.value = stringifyDates(this.dates, config);
+ }
+
+ // set up picekr element
+ const picker = this.picker = new Picker(this);
+
+ const keydownListener = [element, 'keydown', onKeydown.bind(null, this)];
+ if (inputField) {
+ registerListeners(this, [
+ keydownListener,
+ [inputField, 'focus', onFocus.bind(null, this)],
+ [inputField, 'mousedown', onMousedown.bind(null, this)],
+ [inputField, 'click', onClickInput.bind(null, this)],
+ [inputField, 'paste', onPaste.bind(null, this)],
+ // To detect a click on outside, just listening to mousedown is enough,
+ // no need to listen to touchstart.
+ // Actually, listening to touchstart can be a problem because, while
+ // mousedown is fired only on tapping but not on swiping/pinching,
+ // touchstart is fired on swiping/pinching as well.
+ // (issue #95)
+ [document, 'mousedown', onClickOutside.bind(null, this)],
+ [window, 'resize', picker.place.bind(picker)]
+ ]);
+ } else {
+ registerListeners(this, [keydownListener]);
+ this.show();
+ }
+ }
+
+ /**
+ * Format Date object or time value in given format and language
+ * @param {Date|Number} date - date or time value to format
+ * @param {String|Object} format - format string or object that contains
+ * toDisplay() custom formatter, whose signature is
+ * - args:
+ * - date: {Date} - Date instance of the date passed to the method
+ * - format: {Object} - the format object passed to the method
+ * - locale: {Object} - locale for the language specified by `lang`
+ * - return:
+ * {String} formatted date
+ * @param {String} [lang=en] - language code for the locale to use
+ * @return {String} formatted date
+ */
+ static formatDate(date, format, lang) {
+ return formatDate(date, format, lang && locales[lang] || locales.en);
+ }
+
+ /**
+ * Parse date string
+ * @param {String|Date|Number} dateStr - date string, Date object or time
+ * value to parse
+ * @param {String|Object} format - format string or object that contains
+ * toValue() custom parser, whose signature is
+ * - args:
+ * - dateStr: {String|Date|Number} - the dateStr passed to the method
+ * - format: {Object} - the format object passed to the method
+ * - locale: {Object} - locale for the language specified by `lang`
+ * - return:
+ * {Date|Number} parsed date or its time value
+ * @param {String} [lang=en] - language code for the locale to use
+ * @return {Number} time value of parsed date
+ */
+ static parseDate(dateStr, format, lang) {
+ return parseDate(dateStr, format, lang && locales[lang] || locales.en);
+ }
+
+ /**
+ * @type {Object} - Installed locales in `[languageCode]: localeObject` format
+ * en`:_English (US)_ is pre-installed.
+ */
+ static get locales() {
+ return locales;
+ }
+
+ /**
+ * @type {Boolean} - Whether the picker element is shown. `true` whne shown
+ */
+ get active() {
+ return !!(this.picker && this.picker.active);
+ }
+
+ /**
+ * @type {HTMLDivElement} - DOM object of picker element
+ */
+ get pickerElement() {
+ return this.picker ? this.picker.element : undefined;
+ }
+
+ /**
+ * Set new values to the config options
+ * @param {Object} options - config options to update
+ */
+ setOptions(options) {
+ const newOptions = processOptions(options, this);
+ Object.assign(this._options, options);
+ Object.assign(this.config, newOptions);
+ this.picker.setOptions(newOptions);
+
+ refreshUI(this, 3);
+ }
+
+ /**
+ * Show the picker element
+ */
+ show() {
+ if (this.inputField) {
+ const {config, inputField} = this;
+ if (inputField.disabled || (inputField.readOnly && !config.enableOnReadonly)) {
+ return;
+ }
+ if (!isActiveElement(inputField) && !config.disableTouchKeyboard) {
+ this._showing = true;
+ inputField.focus();
+ delete this._showing;
+ }
+ }
+ this.picker.show();
+ }
+
+ /**
+ * Hide the picker element
+ * Not available on inline picker
+ */
+ hide() {
+ if (!this.inputField) {
+ return;
+ }
+ this.picker.hide();
+ this.picker.update().changeView(this.config.startView).render();
+ }
+
+ /**
+ * Toggle the display of the picker element
+ * Not available on inline picker
+ *
+ * Unlike hide(), the picker does not return to the start view when hiding.
+ */
+ toggle() {
+ if (!this.picker.active) {
+ this.show();
+ } else if (this.inputField) {
+ this.picker.hide();
+ }
+ }
+
+ /**
+ * Destroy the Datepicker instance
+ * @return {Detepicker} - the instance destroyed
+ */
+ destroy() {
+ this.hide();
+ unregisterListeners(this);
+ this.picker.detach();
+ const element = this.element;
+ element.classList.remove('datepicker-input');
+ delete element.datepicker;
+ return this;
+ }
+
+ /**
+ * Get the selected date(s)
+ *
+ * The method returns a Date object of selected date by default, and returns
+ * an array of selected dates in multidate mode. If format string is passed,
+ * it returns date string(s) formatted in given format.
+ *
+ * @param {String} [format] - format string to stringify the date(s)
+ * @return {Date|String|Date[]|String[]} - selected date(s), or if none is
+ * selected, empty array in multidate mode and undefined in sigledate mode
+ */
+ getDate(format = undefined) {
+ const callback = getOutputConverter(this, format);
+
+ if (this.config.multidate) {
+ return this.dates.map(callback);
+ }
+ if (this.dates.length > 0) {
+ return callback(this.dates[0]);
+ }
+ }
+
+ /**
+ * Set selected date(s)
+ *
+ * In multidate mode, you can pass multiple dates as a series of arguments
+ * or an array. (Since each date is parsed individually, the type of the
+ * dates doesn't have to be the same.)
+ * The given dates are used to toggle the select status of each date. The
+ * number of selected dates is kept from exceeding the length set to
+ * maxNumberOfDates.
+ *
+ * With clear: true option, the method can be used to clear the selection
+ * and to replace the selection instead of toggling in multidate mode.
+ * If the option is passed with no date arguments or an empty dates array,
+ * it works as "clear" (clear the selection then set nothing), and if the
+ * option is passed with new dates to select, it works as "replace" (clear
+ * the selection then set the given dates)
+ *
+ * When render: false option is used, the method omits re-rendering the
+ * picker element. In this case, you need to call refresh() method later in
+ * order for the picker element to reflect the changes. The input field is
+ * refreshed always regardless of this option.
+ *
+ * When invalid (unparsable, repeated, disabled or out-of-range) dates are
+ * passed, the method ignores them and applies only valid ones. In the case
+ * that all the given dates are invalid, which is distinguished from passing
+ * no dates, the method considers it as an error and leaves the selection
+ * untouched. (The input field also remains untouched unless revert: true
+ * option is used.)
+ * Replacing the selection with the same date(s) also causes a similar
+ * situation. In both cases, the method does not refresh the picker element
+ * unless forceRefresh: true option is used.
+ *
+ * If viewDate option is used, the method changes the focused date to the
+ * specified date instead of the last item of the selection.
+ *
+ * @param {...(Date|Number|String)|Array} [dates] - Date strings, Date
+ * objects, time values or mix of those for new selection
+ * @param {Object} [options] - function options
+ * - clear: {boolean} - Whether to clear the existing selection
+ * defualt: false
+ * - render: {boolean} - Whether to re-render the picker element
+ * default: true
+ * - autohide: {boolean} - Whether to hide the picker element after re-render
+ * Ignored when used with render: false
+ * default: config.autohide
+ * - revert: {boolean} - Whether to refresh the input field when all the
+ * passed dates are invalid
+ * default: false
+ * - forceRefresh: {boolean} - Whether to refresh the picker element when
+ * passed dates don't change the existing selection
+ * default: false
+ * - viewDate: {Date|Number|String} - Date to be focused after setiing date(s)
+ * default: The last item of the resulting selection, or defaultViewDate
+ * config option if none is selected
+ */
+ setDate(...args) {
+ const dates = [...args];
+ const opts = {};
+ const lastArg = lastItemOf(args);
+ if (
+ lastArg
+ && typeof lastArg === 'object'
+ && !Array.isArray(lastArg)
+ && !(lastArg instanceof Date)
+ ) {
+ Object.assign(opts, dates.pop());
+ }
+
+ const inputDates = Array.isArray(dates[0]) ? dates[0] : dates;
+ setDate(this, inputDates, opts);
+ }
+
+ /**
+ * Update the selected date(s) with input field's value
+ * Not available on inline picker
+ *
+ * The input field will be refreshed with properly formatted date string.
+ *
+ * In the case that all the entered dates are invalid (unparsable, repeated,
+ * disabled or out-of-range), which is distinguished from empty input field,
+ * the method leaves the input field untouched as well as the selection by
+ * default. If revert: true option is used in this case, the input field is
+ * refreshed with the existing selection.
+ * The method also doesn't refresh the picker element in this case and when
+ * the entered dates are the same as the existing selection. If
+ * forceRefresh: true option is used, the picker element is refreshed in
+ * these cases too.
+ *
+ * @param {Object} [options] - function options
+ * - autohide: {boolean} - whether to hide the picker element after refresh
+ * default: false
+ * - revert: {boolean} - Whether to refresh the input field when all the
+ * passed dates are invalid
+ * default: false
+ * - forceRefresh: {boolean} - Whether to refresh the picer element when
+ * input field's value doesn't change the existing selection
+ * default: false
+ */
+ update(options = undefined) {
+ if (!this.inputField) {
+ return;
+ }
+
+ const opts = Object.assign(options || {}, {clear: true, render: true, viewDate: undefined});
+ const inputDates = stringToArray(this.inputField.value, this.config.dateDelimiter);
+ setDate(this, inputDates, opts);
+ }
+
+ /**
+ * Get the focused date
+ *
+ * The method returns a Date object of focused date by default. If format
+ * string is passed, it returns date string formatted in given format.
+ *
+ * @param {String} [format] - format string to stringify the date
+ * @return {Date|String} - focused date (viewDate)
+ */
+ getFocusedDate(format = undefined) {
+ return getOutputConverter(this, format)(this.picker.viewDate);
+ }
+
+ /**
+ * Set focused date
+ *
+ * By default, the method updates the focus on the view shown at the time,
+ * or the one set to the startView config option if the picker is hidden.
+ * When resetView: true is passed, the view displayed is changed to the
+ * pickLevel config option's if the picker is shown.
+ *
+ * @param {Date|Number|String} viewDate - date string, Date object, time
+ * values of the date to focus
+ * @param {Boolean} [resetView] - whether to change the view to pickLevel
+ * config option's when the picker is shown. Ignored when the picker is
+ * hidden
+ */
+ setFocusedDate(viewDate, resetView = false) {
+ const {config, picker, active, rangeSideIndex} = this;
+ const pickLevel = config.pickLevel;
+ const newViewDate = parseDate(viewDate, config.format, config.locale);
+ if (newViewDate === undefined) {
+ return;
+ }
+
+ picker.changeFocus(regularizeDate(newViewDate, pickLevel, rangeSideIndex));
+ if (active && resetView) {
+ picker.changeView(pickLevel);
+ }
+ picker.render();
+ }
+
+ /**
+ * Refresh the picker element and the associated input field
+ * @param {String} [target] - target item when refreshing one item only
+ * 'picker' or 'input'
+ * @param {Boolean} [forceRender] - whether to re-render the picker element
+ * regardless of its state instead of optimized refresh
+ */
+ refresh(target = undefined, forceRender = false) {
+ if (target && typeof target !== 'string') {
+ forceRender = target;
+ target = undefined;
+ }
+
+ let mode;
+ if (target === 'picker') {
+ mode = 2;
+ } else if (target === 'input') {
+ mode = 1;
+ } else {
+ mode = 3;
+ }
+ refreshUI(this, mode, !forceRender);
+ }
+
+ /**
+ * Enter edit mode
+ * Not available on inline picker or when the picker element is hidden
+ */
+ enterEditMode() {
+ const inputField = this.inputField;
+ if (!inputField || inputField.readOnly || !this.picker.active || this.editMode) {
+ return;
+ }
+ this.editMode = true;
+ inputField.classList.add('in-edit');
+ }
+
+ /**
+ * Exit from edit mode
+ * Not available on inline picker
+ * @param {Object} [options] - function options
+ * - update: {boolean} - whether to call update() after exiting
+ * If false, input field is revert to the existing selection
+ * default: false
+ */
+ exitEditMode(options = undefined) {
+ if (!this.inputField || !this.editMode) {
+ return;
+ }
+ const opts = Object.assign({update: false}, options);
+ delete this.editMode;
+ this.inputField.classList.remove('in-edit');
+ if (opts.update) {
+ this.update(opts);
+ }
+ }
+ }
+
+ // filter out the config options inapproprite to pass to Datepicker
+ function filterOptions(options) {
+ const newOpts = Object.assign({}, options);
+
+ delete newOpts.inputs;
+ delete newOpts.allowOneSidedRange;
+ delete newOpts.maxNumberOfDates; // to ensure each datepicker handles a single date
+
+ return newOpts;
+ }
+
+ function setupDatepicker(rangepicker, changeDateListener, el, options) {
+ registerListeners(rangepicker, [
+ [el, 'changeDate', changeDateListener],
+ ]);
+ new Datepicker(el, options, rangepicker);
+ }
+
+ function onChangeDate(rangepicker, ev) {
+ // to prevent both datepickers trigger the other side's update each other
+ if (rangepicker._updating) {
+ return;
+ }
+ rangepicker._updating = true;
+
+ const target = ev.target;
+ if (target.datepicker === undefined) {
+ return;
+ }
+
+ const datepickers = rangepicker.datepickers;
+ const [datepicker0, datepicker1] = datepickers;
+ const setDateOptions = {render: false};
+ const changedSide = rangepicker.inputs.indexOf(target);
+ const otherSide = changedSide === 0 ? 1 : 0;
+ const changedDate = datepickers[changedSide].dates[0];
+ const otherDate = datepickers[otherSide].dates[0];
+
+ if (changedDate !== undefined && otherDate !== undefined) {
+ // if the start of the range > the end, swap them
+ if (changedSide === 0 && changedDate > otherDate) {
+ datepicker0.setDate(otherDate, setDateOptions);
+ datepicker1.setDate(changedDate, setDateOptions);
+ } else if (changedSide === 1 && changedDate < otherDate) {
+ datepicker0.setDate(changedDate, setDateOptions);
+ datepicker1.setDate(otherDate, setDateOptions);
+ }
+ } else if (!rangepicker.allowOneSidedRange) {
+ // to prevent the range from becoming one-sided, copy changed side's
+ // selection (no matter if it's empty) to the other side
+ if (changedDate !== undefined || otherDate !== undefined) {
+ setDateOptions.clear = true;
+ datepickers[otherSide].setDate(datepickers[changedSide].dates, setDateOptions);
+ }
+ }
+ datepickers.forEach((datepicker) => {
+ datepicker.picker.update().render();
+ });
+ delete rangepicker._updating;
+ }
+
+ /**
+ * Class representing a date range picker
+ */
+ class DateRangePicker {
+ /**
+ * Create a date range picker
+ * @param {Element} element - element to bind a date range picker
+ * @param {Object} [options] - config options
+ */
+ constructor(element, options = {}) {
+ let inputs = Array.isArray(options.inputs)
+ ? options.inputs
+ : Array.from(element.querySelectorAll('input'));
+ if (inputs.length < 2) {
+ return;
+ }
+
+ element.rangepicker = this;
+ this.element = element;
+ this.inputs = inputs = inputs.slice(0, 2);
+ Object.freeze(inputs);
+ this.allowOneSidedRange = !!options.allowOneSidedRange;
+
+ const changeDateListener = onChangeDate.bind(null, this);
+ const cleanOptions = filterOptions(options);
+ // in order for initial date setup to work right when pcicLvel > 0,
+ // let Datepicker constructor add the instance to the rangepicker
+ const datepickers = this.datepickers = [];
+ inputs.forEach((input) => {
+ setupDatepicker(this, changeDateListener, input, cleanOptions);
+ });
+ Object.freeze(datepickers);
+ Object.defineProperty(this, 'dates', {
+ get() {
+ return datepickers.map(datepicker => datepicker.dates[0]);
+ },
+ });
+ // normalize the range if inital dates are given
+ if (datepickers[0].dates.length > 0) {
+ onChangeDate(this, {target: inputs[0]});
+ } else if (datepickers[1].dates.length > 0) {
+ onChangeDate(this, {target: inputs[1]});
+ }
+ }
+
+ /**
+ * Set new values to the config options
+ * @param {Object} options - config options to update
+ */
+ setOptions(options) {
+ this.allowOneSidedRange = !!options.allowOneSidedRange;
+
+ const cleanOptions = filterOptions(options);
+ this.datepickers.forEach((datepicker) => {
+ datepicker.setOptions(cleanOptions);
+ });
+ }
+
+ /**
+ * Destroy the DateRangePicker instance
+ * @return {DateRangePicker} - the instance destroyed
+ */
+ destroy() {
+ this.datepickers.forEach((datepicker) => {
+ datepicker.destroy();
+ });
+ unregisterListeners(this);
+ delete this.element.rangepicker;
+ }
+
+ /**
+ * Get the start and end dates of the date range
+ *
+ * The method returns Date objects by default. If format string is passed,
+ * it returns date strings formatted in given format.
+ * The result array always contains 2 items (start date/end date) and
+ * undefined is used for unselected side. (e.g. If none is selected,
+ * the result will be [undefined, undefined]. If only the end date is set
+ * when allowOneSidedRange config option is true, [undefined, endDate] will
+ * be returned.)
+ *
+ * @param {String} [format] - Format string to stringify the dates
+ * @return {Array} - Start and end dates
+ */
+ getDates(format = undefined) {
+ const callback = format
+ ? date => formatDate(date, format, this.datepickers[0].config.locale)
+ : date => new Date(date);
+
+ return this.dates.map(date => date === undefined ? date : callback(date));
+ }
+
+ /**
+ * Set the start and end dates of the date range
+ *
+ * The method calls datepicker.setDate() internally using each of the
+ * arguments in start→end order.
+ *
+ * When a clear: true option object is passed instead of a date, the method
+ * clears the date.
+ *
+ * If an invalid date, the same date as the current one or an option object
+ * without clear: true is passed, the method considers that argument as an
+ * "ineffective" argument because calling datepicker.setDate() with those
+ * values makes no changes to the date selection.
+ *
+ * When the allowOneSidedRange config option is false, passing {clear: true}
+ * to clear the range works only when it is done to the last effective
+ * argument (in other words, passed to rangeEnd or to rangeStart along with
+ * ineffective rangeEnd). This is because when the date range is changed,
+ * it gets normalized based on the last change at the end of the changing
+ * process.
+ *
+ * @param {Date|Number|String|Object} rangeStart - Start date of the range
+ * or {clear: true} to clear the date
+ * @param {Date|Number|String|Object} rangeEnd - End date of the range
+ * or {clear: true} to clear the date
+ */
+ setDates(rangeStart, rangeEnd) {
+ const {
+ datepickers: [datepicker0, datepicker1],
+ inputs: [input0, input1],
+ dates: [origDate0, origDate1],
+ } = this;
+
+ // If range normalization runs on every change, we can't set a new range
+ // that starts after the end of the current range correctly because the
+ // normalization process swaps start↔︎end right after setting the new start
+ // date. To prevent this, the normalization process needs to run once after
+ // both of the new dates are set.
+ this._updating = true;
+ datepicker0.setDate(rangeStart);
+ datepicker1.setDate(rangeEnd);
+ delete this._updating;
+
+ if (datepicker1.dates[0] !== origDate1) {
+ onChangeDate(this, {target: input1});
+ } else if (datepicker0.dates[0] !== origDate0) {
+ onChangeDate(this, {target: input0});
+ }
+ }
+ }
+
+ window.Datepicker = Datepicker;
+ window.DateRangePicker = DateRangePicker;
+
+})();
diff --git a/view-webapp/src/main/webapp/lib/datepicker-1.3.4/datepicker-full.min.js b/view-webapp/src/main/webapp/lib/datepicker-1.3.4/datepicker-full.min.js
new file mode 100644
index 0000000..c692ff0
--- /dev/null
+++ b/view-webapp/src/main/webapp/lib/datepicker-1.3.4/datepicker-full.min.js
@@ -0,0 +1 @@
+!function(){"use strict";function e(e){return e[e.length-1]}function t(e,...t){return t.forEach((t=>{e.includes(t)||e.push(t)})),e}function i(e,t){return e?e.split(t):[]}function s(e,t,i){return(void 0===t||e>=t)&&(void 0===i||e<=i)}function n(e,t,i){return e
+
${createTagRepeat('span', 6, {class: 'week'})}
+\n
`),oe=r(`\n
\n\n \n
\n \n \n \n ${ae(["prev-button prev-btn","view-switch","next-button next-btn"])}\n
\n \n
`),de=r(`${a("span",7,{class:"dow"})}
\n ${a("span",42)}
\n\n
`);class ce{constructor(e,t){Object.assign(this,t,{picker:e,element:A('').firstChild,selected:[],isRangeEnd:!!e.datepicker.rangeSideIndex}),this.init(this.picker.datepicker.config)}init(e){"pickLevel"in e&&(this.isMinView=this.id===e.pickLevel),this.setOptions(e),this.updateFocus(),this.updateSelection()}prepareForRender(e,t,i){this.disabled=[];const s=this.picker;s.setViewSwitchLabel(e),s.setPrevButtonDisabled(t),s.setNextButtonDisabled(i)}setDisabled(e,i){i.add("disabled"),t(this.disabled,e)}performBeforeHook(e,t){let i=this.beforeShow(new Date(t));switch(typeof i){case"boolean":i={enabled:i};break;case"string":i={classes:i}}if(i){const s=e.classList;if(!1===i.enabled&&this.setDisabled(t,s),i.classes){const e=i.classes.split(/\s+/);s.add(...e),e.includes("disabled")&&this.setDisabled(t,s)}i.content&&function(e,t){K(e),t instanceof DocumentFragment?e.appendChild(t):"string"==typeof t?e.appendChild(A(t)):"function"==typeof t.forEach&&t.forEach((t=>{e.appendChild(t)}))}(e,i.content)}}renderCell(e,t,i,s,{selected:n,range:a},r,o=[]){e.textContent=t,this.isMinView&&(e.dataset.date=s);const d=e.classList;if(e.className=`datepicker-cell ${this.cellClass}`,i\n
${a("span",6,{class:"week"})}
\n
+
diff --git a/view-webapp/src/main/webapp/tour-registration.inc.html b/view-webapp/src/main/webapp/tour-registration.inc.html
new file mode 100644
index 0000000..4d2aa49
--- /dev/null
+++ b/view-webapp/src/main/webapp/tour-registration.inc.html
@@ -0,0 +1,179 @@
+
+
+
+ Pairings for round
+
+ $round
+
+
+
+
+
+#foreach($p in $pairables)
+ #set($part = $pmap[$p])
+
+
+ $part.name $part.firstname#rank($part.rank) $part.country
+#end
+
+#foreach($game in $games)
+ #set($white = $pmap[$game.w])
+ #set($black = $pmap[$game.b])
+
+ #$game.t#if($white)$white.name $white.firstname #rank($white.rank)#{else}BIP#end #if($black)$black.name $black.firstname #rank($black.rank)#{else}BIP#end$game.h
+#end
+
+#foreach($p in $unpairables)
+ #set($part = $pmap[$p])
+
+ $part.name $part.firstname#rank($part.rank) $part.country
+#end
+
+
+
+
+
+#set($parts = $api.get("tour/${params.id}/part"))
+#set($pmap = $utils.toMap($parts))
+
+
+
+
+ | name | +first name | +country | +club | +rank | +rating | +participation | + + +#foreach($part in $parts) +
|---|---|---|---|---|---|---|
| $part.name | +$part.firstname | +$part.country | +$part.club | +#rank($part.rank) | +$part.rating | ++ #foreach($round in [1..$tour.rounds]) + ## CB TODO - upstream json parsing should not give longs here, should it? + #if($part.skip && $part.skip.contains($round.longValue())) + + #else + + #end + #end + | +
+
+
+
+
+#[[
+
+
+]]#
diff --git a/view-webapp/src/main/webapp/tour-results.inc.html b/view-webapp/src/main/webapp/tour-results.inc.html
new file mode 100644
index 0000000..ec0667d
--- /dev/null
+++ b/view-webapp/src/main/webapp/tour-results.inc.html
@@ -0,0 +1,26 @@
+
+
+
+
+
diff --git a/view-webapp/src/main/webapp/tour-standings.inc.html b/view-webapp/src/main/webapp/tour-standings.inc.html
new file mode 100644
index 0000000..050eacd
--- /dev/null
+++ b/view-webapp/src/main/webapp/tour-standings.inc.html
@@ -0,0 +1,3 @@
+
+
+
+
+
+| table | +white | +black | +result | + + +#foreach($game in $games) + #set($white = $pmap[$game.w]) + #set($black = $pmap[$game.b]) + #if($black && $white) +
|---|---|---|---|
| #$game.t | +#if($white)$white.name $white.firstname #rank($white.rank)#{else}BIP#end | +#if($black)$black.name $black.firstname #rank($black.rank)#{else}BIP#end | +$game.r | +
+ Standings...
+
diff --git a/view-webapp/src/main/webapp/tour.html b/view-webapp/src/main/webapp/tour.html
new file mode 100644
index 0000000..8d0355d
--- /dev/null
+++ b/view-webapp/src/main/webapp/tour.html
@@ -0,0 +1,183 @@
+#macro(twoDigits $value)$strings.leftPad($value, 2, '0')#end
+#macro(toHMS $value)#if($value)#set($hh = $value / 3600)#set($mm = ($value % 3600) / 60)#set($ss = $value % 60)#twoDigits($hh):#twoDigits($mm):#twoDigits($ss)#end#end
+#macro(levels $sel)
+ #foreach($d in [8..0])
+ #set($dan = $d + 1)
+ #set($disp = "${dan}d")
+
+ #end
+ #foreach($k in [-1..-30])
+ #set($disp = "${math.abs($k)}k")
+
+ #end
+#end
+#macro(rank $rank)#if( $rank<0 )#set( $k = -$rank )${k}k#else#set( $d=$rank+1 )${d}d#end#end
+#if($params.id)
+ #set($tour = $api.get("tour/${params.id}"))
+ #if (!$tour)
+
+
+ #end
+#end
+## set up some global context templating variables
+#if($tour)
+ #set($round = $math.toInteger($!params.round))
+ #if(!$round)
+ #set($round = 1)
+ #else
+ #set($round = $math.min($math.max($round, 1), $tour.rounds))
+ #end
+#end
+Invalid tournament id
+
+
+
+#if($tour)$tour.name#{else}New Tournament#end
+#if($tour) +
+
+#end
+#translate('tour-information.inc.html')
+#if($tour)
+ #translate('tour-registration.inc.html')
+ #translate('tour-pairing.inc.html')
+ #translate('tour-results.inc.html')
+ #translate('tour-standings.inc.html')
+#end
+
+
+
+
+ Information
+
+
+
+
+ Registration
+
+
+
+
+ Pairing
+
+
+
+
+ Results
+
+
+
+
+ Standings
+ Required field
+
+Invalid character
+
+#if($datepickerLocale != 'en')
+
+#end
+
+
diff --git a/view-webapp/src/main/webapp/tournament-form.inc.html b/view-webapp/src/main/webapp/tournament-form.inc.html
deleted file mode 100644
index 71a22f9..0000000
--- a/view-webapp/src/main/webapp/tournament-form.inc.html
+++ /dev/null
@@ -1,84 +0,0 @@
-
-
-
-
-CB TODO :
-s'il y a duplication du formulaire (pour nouveau/édition), il faut changer les ids en class, gérer les pbs d'init du date-range, etc.
-sinon, il faut paramétrer la dialog (mais les steps 1/2/3 deviennent des tabs, etc.)
-
-Donc dans tous les cas il y a qqc à faire !
diff --git a/webserver/src/main/kotlin/org/jeudego/pairgoth/application/Pairgoth.kt b/webserver/src/main/kotlin/org/jeudego/pairgoth/application/Pairgoth.kt
index 83d736e..6a7fb4d 100644
--- a/webserver/src/main/kotlin/org/jeudego/pairgoth/application/Pairgoth.kt
+++ b/webserver/src/main/kotlin/org/jeudego/pairgoth/application/Pairgoth.kt
@@ -117,7 +117,7 @@ private fun getResourceProperty(key: String) = serverProps.getProperty(key)?.let
private fun launchServer() {
// create webapps contexts
val webAppContexts = mutableListOf