mirror of
https://github.com/bunkerity/bunkerweb
synced 2026-05-24 09:28:37 +00:00
update filter class on reports page
This commit is contained in:
Jordan Blasenhauer
parent
b0d547d58e
commit
08e90167a8
2 changed files with 64 additions and 230 deletions
|
|
@ -1,202 +1,7 @@
|
|||
import { CheckNoMatchFilter } from "./utils/settings.js";
|
||||
import {
|
||||
Filter
|
||||
} from "./utils/dashboard.js";
|
||||
|
||||
class Filter {
|
||||
constructor(prefix = "reports") {
|
||||
this.prefix = prefix;
|
||||
this.keyInp = document.querySelector("input#keyword");
|
||||
this.methodValue = "all";
|
||||
this.statusValue = "all";
|
||||
this.reasonValue = "all";
|
||||
this.countryValue = "all";
|
||||
this.initHandler();
|
||||
}
|
||||
|
||||
initHandler() {
|
||||
this.container =
|
||||
document.querySelector(`[data-${this.prefix}-filter]`) || null;
|
||||
|
||||
if (!this.container) return;
|
||||
|
||||
//METHOD HANDLER
|
||||
this.container.addEventListener("click", (e) => {
|
||||
try {
|
||||
if (
|
||||
e.target
|
||||
.closest("button")
|
||||
.getAttribute(`data-${this.prefix}-setting-select-dropdown-btn`) ===
|
||||
"method"
|
||||
) {
|
||||
setTimeout(() => {
|
||||
const value = document
|
||||
.querySelector(
|
||||
`[data-${this.prefix}-setting-select-text="method"]`
|
||||
)
|
||||
.textContent.trim();
|
||||
|
||||
this.methodValue = value;
|
||||
//run filter
|
||||
this.filter();
|
||||
}, 10);
|
||||
}
|
||||
} catch (err) {}
|
||||
});
|
||||
//COUNTRY HANDLER
|
||||
this.container.addEventListener("click", (e) => {
|
||||
try {
|
||||
if (
|
||||
e.target
|
||||
.closest("button")
|
||||
.getAttribute(`data-${this.prefix}-setting-select-dropdown-btn`) ===
|
||||
"country"
|
||||
) {
|
||||
setTimeout(() => {
|
||||
const value = document
|
||||
.querySelector(
|
||||
`[data-${this.prefix}-setting-select-text="country"]`
|
||||
)
|
||||
.textContent.trim();
|
||||
|
||||
this.countryValue = value;
|
||||
//run filter
|
||||
this.filter();
|
||||
}, 10);
|
||||
}
|
||||
} catch (err) {}
|
||||
});
|
||||
//STATUS HANDLER
|
||||
this.container.addEventListener("click", (e) => {
|
||||
try {
|
||||
if (
|
||||
e.target
|
||||
.closest("button")
|
||||
.getAttribute(`data-${this.prefix}-setting-select-dropdown-btn`) ===
|
||||
"status"
|
||||
) {
|
||||
setTimeout(() => {
|
||||
const value = document
|
||||
.querySelector(
|
||||
`[data-${this.prefix}-setting-select-text="status"]`
|
||||
)
|
||||
.textContent.trim();
|
||||
|
||||
this.statusValue = value;
|
||||
//run filter
|
||||
this.filter();
|
||||
}, 10);
|
||||
}
|
||||
} catch (err) {}
|
||||
});
|
||||
// REASON HANDLER
|
||||
this.container.addEventListener("click", (e) => {
|
||||
try {
|
||||
if (
|
||||
e.target
|
||||
.closest("button")
|
||||
.getAttribute(`data-${this.prefix}-setting-select-dropdown-btn`) ===
|
||||
"reason"
|
||||
) {
|
||||
setTimeout(() => {
|
||||
const value = document
|
||||
.querySelector(
|
||||
`[data-${this.prefix}-setting-select-text="reason"]`
|
||||
)
|
||||
.textContent.trim();
|
||||
|
||||
this.reasonValue = value;
|
||||
//run filter
|
||||
this.filter();
|
||||
}, 10);
|
||||
}
|
||||
} catch (err) {}
|
||||
});
|
||||
//KEYWORD HANDLER
|
||||
this.keyInp.addEventListener("input", (e) => {
|
||||
this.filter();
|
||||
});
|
||||
}
|
||||
|
||||
filter() {
|
||||
const requests = document.querySelector(
|
||||
`[data-${this.prefix}-list]`
|
||||
).children;
|
||||
if (requests.length === 0) return;
|
||||
//reset
|
||||
for (let i = 0; i < requests.length; i++) {
|
||||
const el = requests[i];
|
||||
el.classList.remove("hidden");
|
||||
}
|
||||
//filter type
|
||||
this.setFilterMethod(requests);
|
||||
this.setFilterKeyword(requests);
|
||||
this.setFilterStatus(requests);
|
||||
this.setFilterReason(requests);
|
||||
this.setFilterCountry(requests);
|
||||
}
|
||||
|
||||
setFilterMethod(requests) {
|
||||
if (this.methodValue === "all") return;
|
||||
for (let i = 0; i < requests.length; i++) {
|
||||
const el = requests[i];
|
||||
const type = this.getElAttribut(el, "method");
|
||||
if (type !== this.methodValue) el.classList.add("hidden");
|
||||
}
|
||||
}
|
||||
|
||||
setFilterCountry(requests) {
|
||||
if (this.countryValue === "all") return;
|
||||
for (let i = 0; i < requests.length; i++) {
|
||||
const el = requests[i];
|
||||
const type = this.getElAttribut(el, "country");
|
||||
if (type !== this.countryValue) el.classList.add("hidden");
|
||||
}
|
||||
}
|
||||
|
||||
setFilterKeyword(requests) {
|
||||
const keyword = this.keyInp.value.trim().toLowerCase();
|
||||
if (!keyword) return;
|
||||
for (let i = 0; i < requests.length; i++) {
|
||||
const el = requests[i];
|
||||
|
||||
const url = this.getElAttribut(el, "url");
|
||||
const date = this.getElAttribut(el, "date");
|
||||
const ip = this.getElAttribut(el, "ip");
|
||||
const data = this.getElAttribut(el, "data");
|
||||
|
||||
if (
|
||||
!url.includes(keyword) &&
|
||||
!date.includes(keyword) &&
|
||||
!ip.includes(keyword) &&
|
||||
!data.includes(keyword)
|
||||
)
|
||||
el.classList.add("hidden");
|
||||
}
|
||||
}
|
||||
|
||||
setFilterStatus(requests) {
|
||||
if (this.statusValue === "all") return;
|
||||
for (let i = 0; i < requests.length; i++) {
|
||||
const el = requests[i];
|
||||
const type = this.getElAttribut(el, "status");
|
||||
if (type !== this.statusValue) el.classList.add("hidden");
|
||||
}
|
||||
}
|
||||
|
||||
setFilterReason(requests) {
|
||||
if (this.reasonValue === "all") return;
|
||||
for (let i = 0; i < requests.length; i++) {
|
||||
const el = requests[i];
|
||||
const type = this.getElAttribut(el, "reason");
|
||||
if (type !== this.reasonValue) el.classList.add("hidden");
|
||||
}
|
||||
}
|
||||
|
||||
getElAttribut(el, attr) {
|
||||
return el
|
||||
.querySelector(`[data-${this.prefix}-${attr}]`)
|
||||
.getAttribute(`data-${this.prefix}-${attr}`)
|
||||
.trim();
|
||||
}
|
||||
}
|
||||
|
||||
class Dropdown {
|
||||
constructor(prefix = "reports") {
|
||||
|
|
@ -375,28 +180,52 @@ class Dropdown {
|
|||
}
|
||||
|
||||
const setDropdown = new Dropdown();
|
||||
const setFilter = new Filter();
|
||||
|
||||
try {
|
||||
const checkPluginKeyword = new CheckNoMatchFilter(
|
||||
document.querySelector("input#keyword"),
|
||||
"input",
|
||||
document
|
||||
.querySelector("[data-reports-list]")
|
||||
.querySelectorAll("[data-reports-item]"),
|
||||
document.querySelector("[data-reports-list-container]"),
|
||||
document.querySelector("[data-reports-nomatch]")
|
||||
);
|
||||
const filterContainer = document.querySelector("[data-reports-list-container]");
|
||||
if(filterContainer) {
|
||||
const noMatchEl = document.querySelector("[data-reports-nomatch]");
|
||||
const filterEls = document.querySelectorAll(`[data-reports-item]`);
|
||||
const keywordFilter = {
|
||||
"handler": document.querySelector("input#keyword"),
|
||||
"handlerType" : "input",
|
||||
"value" : document.querySelector("input#keyword").value,
|
||||
"filterEls": filterEls,
|
||||
"filterAtt" : "data-reports-keyword",
|
||||
"filterType" : "keyword",
|
||||
};
|
||||
const countryFilter = {
|
||||
"handler": document.querySelector("[data-reports-setting-select-dropdown='country']"),
|
||||
"handlerType" : "select",
|
||||
"value" : document.querySelector("[data-reports-setting-select-text='country']").textContent.trim().toLowerCase(),
|
||||
"filterEls": filterEls,
|
||||
"filterAtt" : "data-reports-country",
|
||||
"filterType" : "match",
|
||||
};
|
||||
const methodFilter = {
|
||||
"handler": document.querySelector("[data-reports-setting-select-dropdown='method']"),
|
||||
"handlerType" : "select",
|
||||
"value" : document.querySelector("[data-reports-setting-select-text='method']").textContent.trim().toLowerCase(),
|
||||
"filterEls": filterEls,
|
||||
"filterAtt" : "data-reports-method",
|
||||
"filterType" : "match",
|
||||
};
|
||||
|
||||
const checkPluginSelect = new CheckNoMatchFilter(
|
||||
document.querySelectorAll(
|
||||
"button[data-reports-setting-select-dropdown-btn]"
|
||||
),
|
||||
"select",
|
||||
document
|
||||
.querySelector("[data-reports-list]")
|
||||
.querySelectorAll("[data-reports-item]"),
|
||||
document.querySelector("[data-reports-list-container]"),
|
||||
document.querySelector("[data-reports-nomatch]")
|
||||
);
|
||||
} catch (e) {}
|
||||
const statusFilter = {
|
||||
"handler": document.querySelector("[data-reports-setting-select-dropdown='status']"),
|
||||
"handlerType" : "select",
|
||||
"value" : document.querySelector("[data-reports-setting-select-text='status']").textContent.trim().toLowerCase(),
|
||||
"filterEls": filterEls,
|
||||
"filterAtt" : "data-reports-status",
|
||||
"filterType" : "match",
|
||||
};
|
||||
|
||||
const reasonFilter = {
|
||||
"handler": document.querySelector("[data-reports-setting-select-dropdown='reason']"),
|
||||
"handlerType" : "select",
|
||||
"value" : document.querySelector("[data-reports-setting-select-text='reason']").textContent.trim().toLowerCase(),
|
||||
"filterEls": filterEls,
|
||||
"filterAtt" : "data-reports-reason",
|
||||
"filterType" : "match",
|
||||
};
|
||||
new Filter("reports", [keywordFilter, countryFilter, methodFilter, statusFilter, reasonFilter], filterContainer, noMatchEl);
|
||||
}
|
||||
|
|
|
|||
23
src/ui/templates/reports.html
vendored
23
src/ui/templates/reports.html
vendored
|
|
@ -176,25 +176,30 @@
|
|||
<ul class="col-span-12 w-full" data-{{attribute_name}}-list>
|
||||
{% for report in reports %}
|
||||
<li data-{{attribute_name}}-item
|
||||
data-{{attribute_name}}-country="{{ report['country'] }}"
|
||||
data-{{attribute_name}}-method="{{ report['method'] }}"
|
||||
data-{{attribute_name}}-status="{{ report['status'] }}"
|
||||
data-{{attribute_name}}-reason="{{ report['reason'] }}"
|
||||
data-{{attribute_name}}-keyword="{{ report['ip'] }} {{ report['url'] }} {{ report['data'] }} {{ report['date'] }} {{ report['user_agent'] }}"
|
||||
class="items-center grid grid-cols-12 border-b border-gray-300 py-2.5 break-all">
|
||||
<p class="text-center flex justify-center dark:text-gray-400 text-sm col-span-1 m-0 my-1 mr-1"
|
||||
data-{{attribute_name}}-date="{{ report['date'] }}">{{ report['date'] }}</p>
|
||||
>{{ report['date'] }}</p>
|
||||
<p class="flex justify-center dark:text-gray-400 text-sm col-span-1 m-0 my-1 mr-1"
|
||||
data-{{attribute_name}}-ip="{{ report['ip'] }}">{{ report['ip'] }}</p>
|
||||
>{{ report['ip'] }}</p>
|
||||
<p class="flex justify-center dark:text-gray-400 text-sm col-span-1 m-0 my-1 mr-1"
|
||||
data-{{attribute_name}}-country="{{ report['country'] }}">{{ report['country'] }}</p>
|
||||
>{{ report['country'] }}</p>
|
||||
<p class="flex justify-center dark:text-gray-400 text-sm col-span-1 m-0 my-1 mr-1 "
|
||||
data-{{attribute_name}}-method="{{ report['method'] }}">{{ report["method"] }}</p>
|
||||
>{{ report["method"] }}</p>
|
||||
<p class="flex justify-center dark:text-gray-400 text-sm col-span-2 m-0 my-1 mr-1"
|
||||
data-{{attribute_name}}-url="{{ report['url'] }}">{{ report['url'] }}</p>
|
||||
>{{ report['url'] }}</p>
|
||||
<p class="flex justify-center dark:text-gray-400 text-sm col-span-1 m-0 my-1 mr-1 "
|
||||
data-{{attribute_name}}-status="{{ report['status'] }}">{{ report["status"] }}</p>
|
||||
>{{ report["status"] }}</p>
|
||||
<p class="flex justify-center dark:text-gray-400 text-sm col-span-2 m-0 my-1 mr-1 "
|
||||
data-{{attribute_name}}-user_agent="{{ report['user_agent'] }}">{{ report["user_agent"] }}</p>
|
||||
>{{ report["user_agent"] }}</p>
|
||||
<p class="flex justify-center dark:text-gray-400 text-sm col-span-1 m-0 my-1 mr-1 "
|
||||
data-{{attribute_name}}-reason="{{ report['reason'] }}">{{ report["reason"] }}</p>
|
||||
>{{ report["reason"] }}</p>
|
||||
<p class="flex justify-center dark:text-gray-400 text-sm col-span-2 m-0 my-1 mr-1"
|
||||
data-{{attribute_name}}-data="{{ report['data'] }}">{{ report["data"] }}</p>
|
||||
>{{ report["data"] }}</p>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
|
|
|||
Loading…
Reference in a new issue