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;
|
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) {
|
function addFilter(parentSelector, filterIndex) {
|
||||||
const id = "f" + filterCount;
|
const id = "f" + filterCount;
|
||||||
const filter = createFilter(filters[filterIndex], id);
|
const filter = createFilter(filters[filterIndex], id);
|
||||||
@ -261,25 +107,6 @@ function removeFilter(filterIndex) {
|
|||||||
filterQuery = filterQuery.filter(f => f.id !== 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) {
|
function createFilterSelector(parent, index, filter) {
|
||||||
return `<a class="dropdown-item" href="javascript:void(0)" onclick="addFilter('${parent}', ${index})">${filter.kind}</a>`;
|
return `<a class="dropdown-item" href="javascript:void(0)" onclick="addFilter('${parent}', ${index})">${filter.kind}</a>`;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -321,6 +321,7 @@
|
|||||||
|
|
||||||
<!-- Page level custom scripts -->
|
<!-- Page level custom scripts -->
|
||||||
<script src="./js/graphs.js"></script>
|
<script src="./js/graphs.js"></script>
|
||||||
|
<script src='./js/filters.js'></script>
|
||||||
<script src='./js/query.js'></script>
|
<script src='./js/query.js'></script>
|
||||||
|
|
||||||
<script id="mainScript">
|
<script id="mainScript">
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user