mirror of
https://github.com/plan-player-analytics/Plan.git
synced 2024-12-15 05:41:51 +08:00
Extracted filter classes to filters.js
This commit is contained in:
Risto Lahtela
parent
8524c9a0c3
commit
625f1dcd27
172
Plan/common/src/main/resources/assets/plan/web/js/filters.js
Normal file
172
Plan/common/src/main/resources/assets/plan/web/js/filters.js
Normal file
@ -0,0 +1,172 @@
|
||||
class Filter {
|
||||
constructor(kind) {
|
||||
this.kind = kind;
|
||||
}
|
||||
|
||||
render(filterCount) {
|
||||
return 'Unimplemented render function'
|
||||
}
|
||||
|
||||
toObject() {
|
||||
return {kind: this.kind}
|
||||
}
|
||||
}
|
||||
|
||||
class MultipleChoiceFilter extends Filter {
|
||||
constructor(
|
||||
id, kind, label, options
|
||||
) {
|
||||
super(kind);
|
||||
this.id = id;
|
||||
this.label = label;
|
||||
this.options = options;
|
||||
}
|
||||
|
||||
render(filterCount) {
|
||||
const select = filterCount === 0 ? "of Players who " : "and ";
|
||||
let html =
|
||||
`<div id="${this.id}" class="mt-2 input-group input-row">` +
|
||||
`<div class="col-12"><label for="${this.id}">${select}${this.label}:</label>` +
|
||||
`<button class="filter-remover btn btn-outline-secondary float-right"
|
||||
onclick="removeFilter('${this.id}')"><i class="far fa-fw fa-trash-alt"></i></button>` +
|
||||
`<select class="form-control" multiple>`;
|
||||
|
||||
for (const option of this.options.options) {
|
||||
html += `<option>${option}</option>`;
|
||||
}
|
||||
|
||||
html += `</select></div></div>`;
|
||||
return html;
|
||||
}
|
||||
|
||||
toObject() {
|
||||
let selected = [];
|
||||
for (let option of document.querySelector('#' + this.id + " select").selectedOptions) {
|
||||
selected.push(option.text);
|
||||
}
|
||||
selected = JSON.stringify(selected);
|
||||
|
||||
return {
|
||||
kind: this.kind,
|
||||
parameters: {selected}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class ActivityIndexFilter extends MultipleChoiceFilter {
|
||||
constructor(
|
||||
id, options
|
||||
) {
|
||||
super(id, "activityIndexNow", `are in Activity Groups`, options);
|
||||
}
|
||||
}
|
||||
|
||||
class BannedFilter extends MultipleChoiceFilter {
|
||||
constructor(
|
||||
id, options
|
||||
) {
|
||||
super(id, "banned", `are`, options);
|
||||
}
|
||||
}
|
||||
|
||||
class OperatorsFilter extends MultipleChoiceFilter {
|
||||
constructor(
|
||||
id, options
|
||||
) {
|
||||
super(id, "operators", `are`, options);
|
||||
}
|
||||
}
|
||||
|
||||
class PluginGroupsFilter extends MultipleChoiceFilter {
|
||||
constructor(
|
||||
id, plugin, group, options
|
||||
) {
|
||||
super(id, `pluginGroups: ${plugin} ${group}`, `are in ${plugin}'s ${group} Groups`, options);
|
||||
}
|
||||
}
|
||||
|
||||
class BetweenDateFilter extends Filter {
|
||||
constructor(id, kind, label, options) {
|
||||
super(kind);
|
||||
this.id = id;
|
||||
this.label = label;
|
||||
this.afterDate = options.after[0];
|
||||
this.afterTime = options.after[1];
|
||||
this.beforeDate = options.before[0];
|
||||
this.beforeTime = options.before[1];
|
||||
}
|
||||
|
||||
render(filterCount) {
|
||||
const id = this.id;
|
||||
const select = filterCount === 0 ? "of Players who " : "and ";
|
||||
return (
|
||||
`<div id="${id}">` +
|
||||
`<label class="ml-2 mt-0 mb-0">${select}${this.label}:</label>` +
|
||||
`<div class="mt-2 input-group input-row">` +
|
||||
`<div class="col-3"><div class="input-group mb-2">` +
|
||||
`<div class="input-group-prepend"><div class="input-group-text"><i class="far fa-calendar"></i></div></div>` +
|
||||
`<input id="${id}-afterdate" onkeyup="setFilterOption('${id}', '${id}-afterdate', 'afterDate', isValidDate, correctDate)" class="form-control" placeholder="${this.afterDate}" type="text">` +
|
||||
`</div></div>` +
|
||||
`<div class="col-2"><div class="input-group mb-2">` +
|
||||
`<div class="input-group-prepend"><div class="input-group-text"><i class="far fa-clock"></i></div></div>` +
|
||||
`<input id="${id}-aftertime" onkeyup="setFilterOption('${id}', '${id}-aftertime', 'afterTime', isValidTime, correctTime)" class="form-control" placeholder="${this.afterTime}" type="text">` +
|
||||
`</div></div>` +
|
||||
`<div class="col-auto"><label class="mt-2 mb-0" for="inlineFormCustomSelectPref">&</label></div>` +
|
||||
`<div class="col-3"><div class="input-group mb-2">` +
|
||||
`<div class="input-group-prepend"><div class="input-group-text"><i class="far fa-calendar"></i></div></div>` +
|
||||
`<input id="${id}-beforedate" onkeyup="setFilterOption('${id}', '${id}-beforedate', 'beforeDate', isValidDate, correctDate)" class="form-control" placeholder="${this.beforeDate}" type="text">` +
|
||||
`</div></div>` +
|
||||
`<div class="col-2"><div class="input-group mb-2">` +
|
||||
`<div class="input-group-prepend"><div class="input-group-text"><i class="far fa-clock"></i></div></div>` +
|
||||
`<input id="${id}-beforetime" onkeyup="setFilterOption('${id}', '${id}-beforetime', 'beforeTime', isValidTime, correctTime)" class="form-control" placeholder="${this.beforeTime}" type="text">` +
|
||||
`</div></div>` +
|
||||
`<button class="filter-remover btn btn-outline-secondary float-right"
|
||||
style="position: absolute;right: 0.8rem;"
|
||||
onclick="removeFilter('${this.id}')"><i class="far fa-fw fa-trash-alt"></i></button>` +
|
||||
`</div></div>`
|
||||
);
|
||||
}
|
||||
|
||||
toObject() {
|
||||
return {
|
||||
kind: this.kind,
|
||||
parameters: {
|
||||
afterDate: this.afterDate,
|
||||
afterTime: this.afterTime,
|
||||
beforeDate: this.beforeDate,
|
||||
beforeTime: this.beforeTime
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class PlayedBetweenFilter extends BetweenDateFilter {
|
||||
constructor(id, options) {
|
||||
super(id, "playedBetween", "Played between", options);
|
||||
}
|
||||
}
|
||||
|
||||
class RegisteredBetweenFilter extends BetweenDateFilter {
|
||||
constructor(id, options) {
|
||||
super(id, "registeredBetween", "Registered between", options);
|
||||
}
|
||||
}
|
||||
|
||||
function createFilter(filter, id) {
|
||||
switch (filter.kind) {
|
||||
case "activityIndexNow":
|
||||
return new ActivityIndexFilter(id, filter.options);
|
||||
case "banned":
|
||||
return new BannedFilter(id, filter.options);
|
||||
case "operators":
|
||||
return new OperatorsFilter(id, filter.options);
|
||||
case "pluginGroups":
|
||||
return new PluginGroupsFilter(id, filter.plugin, filter.group, filter.options);
|
||||
case "playedBetween":
|
||||
return new PlayedBetweenFilter(id, filter.options);
|
||||
case "registeredBetween":
|
||||
return new RegisteredBetweenFilter(id, filter.options);
|
||||
default:
|
||||
throw new Error("Unsupported filter kind: '" + filter.kind + "'");
|
||||
}
|
||||
}
|
||||
@ -93,160 +93,6 @@ function loadFilters(json) {
|
||||
document.getElementById('filter-dropdown').innerHTML = filterElements;
|
||||
}
|
||||
|
||||
class Filter {
|
||||
constructor(kind) {
|
||||
this.kind = kind;
|
||||
}
|
||||
|
||||
render(filterCount) {
|
||||
return 'Unimplemented render function'
|
||||
}
|
||||
|
||||
toObject() {
|
||||
return {kind: this.kind}
|
||||
}
|
||||
}
|
||||
|
||||
class MultipleChoiceFilter extends Filter {
|
||||
constructor(
|
||||
id, kind, label, options
|
||||
) {
|
||||
super(kind);
|
||||
this.id = id;
|
||||
this.label = label;
|
||||
this.options = options;
|
||||
}
|
||||
|
||||
render(filterCount) {
|
||||
const select = filterCount === 0 ? "of Players who " : "and ";
|
||||
let html =
|
||||
`<div id="${this.id}" class="mt-2 input-group input-row">` +
|
||||
`<div class="col-12"><label for="${this.id}">${select}${this.label}:</label>` +
|
||||
`<button class="filter-remover btn btn-outline-secondary float-right"
|
||||
onclick="removeFilter('${this.id}')"><i class="far fa-fw fa-trash-alt"></i></button>` +
|
||||
`<select class="form-control" multiple>`;
|
||||
|
||||
for (const option of this.options.options) {
|
||||
html += `<option>${option}</option>`;
|
||||
}
|
||||
|
||||
html += `</select></div></div>`;
|
||||
return html;
|
||||
}
|
||||
|
||||
toObject() {
|
||||
let selected = [];
|
||||
for (let option of document.querySelector('#' + this.id + " select").selectedOptions) {
|
||||
selected.push(option.text);
|
||||
}
|
||||
selected = JSON.stringify(selected);
|
||||
|
||||
return {
|
||||
kind: this.kind,
|
||||
parameters: {selected}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class ActivityIndexFilter extends MultipleChoiceFilter {
|
||||
constructor(
|
||||
id, options
|
||||
) {
|
||||
super(id, "activityIndexNow", `are in Activity Groups`, options);
|
||||
}
|
||||
}
|
||||
|
||||
class BannedFilter extends MultipleChoiceFilter {
|
||||
constructor(
|
||||
id, options
|
||||
) {
|
||||
super(id, "banned", `are`, options);
|
||||
}
|
||||
}
|
||||
|
||||
class OperatorsFilter extends MultipleChoiceFilter {
|
||||
constructor(
|
||||
id, options
|
||||
) {
|
||||
super(id, "operators", `are`, options);
|
||||
}
|
||||
}
|
||||
|
||||
class PluginGroupsFilter extends MultipleChoiceFilter {
|
||||
constructor(
|
||||
id, plugin, group, options
|
||||
) {
|
||||
super(id, `pluginGroups: ${plugin} ${group}`, `are in ${plugin}'s ${group} Groups`, options);
|
||||
}
|
||||
}
|
||||
|
||||
class BetweenDateFilter extends Filter {
|
||||
constructor(id, kind, label, options) {
|
||||
super(kind);
|
||||
this.id = id;
|
||||
this.label = label;
|
||||
this.afterDate = options.after[0];
|
||||
this.afterTime = options.after[1];
|
||||
this.beforeDate = options.before[0];
|
||||
this.beforeTime = options.before[1];
|
||||
}
|
||||
|
||||
render(filterCount) {
|
||||
const id = this.id;
|
||||
const select = filterCount === 0 ? "of Players who " : "and ";
|
||||
return (
|
||||
`<div id="${id}">` +
|
||||
`<label class="ml-2 mt-0 mb-0">${select}${this.label}:</label>` +
|
||||
`<div class="mt-2 input-group input-row">` +
|
||||
`<div class="col-3"><div class="input-group mb-2">` +
|
||||
`<div class="input-group-prepend"><div class="input-group-text"><i class="far fa-calendar"></i></div></div>` +
|
||||
`<input id="${id}-afterdate" onkeyup="setFilterOption('${id}', '${id}-afterdate', 'afterDate', isValidDate, correctDate)" class="form-control" placeholder="${this.afterDate}" type="text">` +
|
||||
`</div></div>` +
|
||||
`<div class="col-2"><div class="input-group mb-2">` +
|
||||
`<div class="input-group-prepend"><div class="input-group-text"><i class="far fa-clock"></i></div></div>` +
|
||||
`<input id="${id}-aftertime" onkeyup="setFilterOption('${id}', '${id}-aftertime', 'afterTime', isValidTime, correctTime)" class="form-control" placeholder="${this.afterTime}" type="text">` +
|
||||
`</div></div>` +
|
||||
`<div class="col-auto"><label class="mt-2 mb-0" for="inlineFormCustomSelectPref">&</label></div>` +
|
||||
`<div class="col-3"><div class="input-group mb-2">` +
|
||||
`<div class="input-group-prepend"><div class="input-group-text"><i class="far fa-calendar"></i></div></div>` +
|
||||
`<input id="${id}-beforedate" onkeyup="setFilterOption('${id}', '${id}-beforedate', 'beforeDate', isValidDate, correctDate)" class="form-control" placeholder="${this.beforeDate}" type="text">` +
|
||||
`</div></div>` +
|
||||
`<div class="col-2"><div class="input-group mb-2">` +
|
||||
`<div class="input-group-prepend"><div class="input-group-text"><i class="far fa-clock"></i></div></div>` +
|
||||
`<input id="${id}-beforetime" onkeyup="setFilterOption('${id}', '${id}-beforetime', 'beforeTime', isValidTime, correctTime)" class="form-control" placeholder="${this.beforeTime}" type="text">` +
|
||||
`</div></div>` +
|
||||
`<button class="filter-remover btn btn-outline-secondary float-right"
|
||||
style="position: absolute;right: 0.8rem;"
|
||||
onclick="removeFilter('${this.id}')"><i class="far fa-fw fa-trash-alt"></i></button>` +
|
||||
`</div></div>`
|
||||
);
|
||||
}
|
||||
|
||||
toObject() {
|
||||
return {
|
||||
kind: this.kind,
|
||||
parameters: {
|
||||
afterDate: this.afterDate,
|
||||
afterTime: this.afterTime,
|
||||
beforeDate: this.beforeDate,
|
||||
beforeTime: this.beforeTime
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class PlayedBetweenFilter extends BetweenDateFilter {
|
||||
constructor(id, options) {
|
||||
super(id, "playedBetween", "Played between", options);
|
||||
}
|
||||
}
|
||||
|
||||
class RegisteredBetweenFilter extends BetweenDateFilter {
|
||||
constructor(id, options) {
|
||||
super(id, "registeredBetween", "Registered between", options);
|
||||
}
|
||||
}
|
||||
|
||||
function addFilter(parentSelector, filterIndex) {
|
||||
const id = "f" + filterCount;
|
||||
const filter = createFilter(filters[filterIndex], id);
|
||||
@ -261,25 +107,6 @@ function removeFilter(filterIndex) {
|
||||
filterQuery = filterQuery.filter(f => f.id !== filterIndex);
|
||||
}
|
||||
|
||||
function createFilter(filter, id) {
|
||||
switch (filter.kind) {
|
||||
case "activityIndexNow":
|
||||
return new ActivityIndexFilter(id, filter.options);
|
||||
case "banned":
|
||||
return new BannedFilter(id, filter.options);
|
||||
case "operators":
|
||||
return new OperatorsFilter(id, filter.options);
|
||||
case "pluginGroups":
|
||||
return new PluginGroupsFilter(id, filter.plugin, filter.group, filter.options);
|
||||
case "playedBetween":
|
||||
return new PlayedBetweenFilter(id, filter.options);
|
||||
case "registeredBetween":
|
||||
return new RegisteredBetweenFilter(id, filter.options);
|
||||
default:
|
||||
throw new Error("Unsupported filter kind: '" + filter.kind + "'");
|
||||
}
|
||||
}
|
||||
|
||||
function createFilterSelector(parent, index, filter) {
|
||||
return `<a class="dropdown-item" href="javascript:void(0)" onclick="addFilter('${parent}', ${index})">${filter.kind}</a>`;
|
||||
}
|
||||
|
||||
@ -321,6 +321,7 @@
|
||||
|
||||
<!-- Page level custom scripts -->
|
||||
<script src="./js/graphs.js"></script>
|
||||
<script src='./js/filters.js'></script>
|
||||
<script src='./js/query.js'></script>
|
||||
|
||||
<script id="mainScript">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user