Skip to content

Commit

Permalink
add new filter class to bans page
Browse files Browse the repository at this point in the history
  • Loading branch information
@syrk4web
syrk4web committed May 14, 2024
1 parent 54f7d21 commit b0d547d
Show file tree
Hide file tree
Showing 2 changed files with 45 additions and 148 deletions.
177 changes: 35 additions & 142 deletions src/ui/static/js/bans.js
View file
Original file line number Diff line number Diff line change
@@ -1,126 +1,7 @@
import { CheckNoMatchFilter } from "./utils/settings.js";
import {
Filter
} from "./utils/dashboard.js";

class Filter {
constructor(prefix = "bans") {
this.prefix = prefix;
this.container = document.querySelector(`[data-${this.prefix}-filter]`);
this.keyInp = document.querySelector("input#keyword");
this.termValue = "all";
this.reasonValue = "all";
this.initHandler();
}

initHandler() {
// 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) {}
});
// TERM HANDLER
this.container.addEventListener("click", (e) => {
try {
if (
e.target
.closest("button")
.getAttribute(`data-${this.prefix}-setting-select-dropdown-btn`) ===
"term"
) {
setTimeout(() => {
const value = document
.querySelector(`[data-${this.prefix}-setting-select-text="term"]`)
.textContent.trim();

this.termValue = value;
//run filter
this.filter();
}, 10);
}
} catch (err) {}
});
//KEYWORD HANDLER
this.keyInp.addEventListener("input", (e) => {
this.filter();
});
}

filter() {
const bans = document.querySelector(`[data-${this.prefix}-list]`).children;
if (bans.length === 0) return;
//reset
for (let i = 0; i < bans.length; i++) {
const el = bans[i];
el.classList.remove("hidden");
}
//filter type
this.setFilterKeyword(bans);
this.setFilterReason(bans);
this.setFilterTerm(bans);
}

setFilterKeyword(bans) {
const keyword = this.keyInp.value.trim().toLowerCase();
if (!keyword) return;
for (let i = 0; i < bans.length; i++) {
const el = bans[i];

const ip = this.getElAttribut(el, "ip");
const banStart = this.getElAttribut(el, "ban_start");
const banEnd = this.getElAttribut(el, "ban_end");
const remain = this.getElAttribut(el, "remain");

if (
!ip.includes(keyword) &&
!banStart.includes(keyword) &&
!banEnd.includes(keyword) &&
!remain.includes(keyword)
)
el.classList.add("hidden");
}
}

setFilterTerm(bans) {
if (this.termValue === "all") return;
for (let i = 0; i < bans.length; i++) {
const el = bans[i];
const type = this.getElAttribut(el, "term");
if (type !== this.termValue) el.classList.add("hidden");
}
}

setFilterReason(bans) {
if (this.reasonValue === "all") return;
for (let i = 0; i < bans.length; i++) {
const el = bans[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 = "bans") {
Expand Down Expand Up @@ -604,26 +485,38 @@ class AddBanModal {
}

const setDropdown = new Dropdown();
const setFilter = new Filter();
const setUnban = new Unban();
const setModal = new AddBanModal();

const checkPluginKeyword = new CheckNoMatchFilter(
document.querySelector("input#keyword"),
"input",
document
.querySelector("[data-bans-list]")
.querySelectorAll("[data-bans-item]"),
document.querySelector("[data-bans-list-container]"),
document.querySelector("[data-bans-nomatch]"),
);

const checkPluginSelect = new CheckNoMatchFilter(
document.querySelectorAll("button[data-bans-setting-select-dropdown-btn]"),
"select",
document
.querySelector("[data-bans-list]")
.querySelectorAll("[data-bans-item]"),
document.querySelector("[data-bans-list-container]"),
document.querySelector("[data-bans-nomatch]"),
);
const filterContainer = document.querySelector("[data-bans-list-container]");
if(filterContainer) {
const noMatchEl = document.querySelector("[data-bans-nomatch]");
const filterEls = document.querySelectorAll(`[data-bans-item]`);
const keywordFilter = {
"handler": document.querySelector("input#keyword"),
"handlerType" : "input",
"value" : document.querySelector("input#keyword").value,
"filterEls": filterEls,
"filterAtt" : "data-bans-keyword",
"filterType" : "keyword",
};
const reasonFilter = {
"handler": document.querySelector("[data-bans-setting-select-dropdown='reason']"),
"handlerType" : "select",
"value" : document.querySelector("[data-bans-setting-select-text='reason']").textContent.trim().toLowerCase(),
"filterEls": filterEls,
"filterAtt" : "data-bans-reason",
"filterType" : "match",
};

const termFilter = {
"handler": document.querySelector("[data-bans-setting-select-dropdown='term']"),
"handlerType" : "select",
"value" : document.querySelector("[data-bans-setting-select-text='term']").textContent.trim().toLowerCase(),
"filterEls": filterEls,
"filterAtt" : "data-bans-term",
"filterType" : "match",
};
new Filter("bans", [keywordFilter, reasonFilter, termFilter], filterContainer, noMatchEl);
}

16 changes: 10 additions & 6 deletions src/ui/templates/bans.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,6 +130,10 @@ <h5 class="mx-2 font-bold dark:text-white/90 mx-2">BANS LIST</h5>
{% for ban in bans %}
<li data-{{attribute_name}}-item
data-{{attribute_name}}-list-item="{{ ban }}"
data-{{attribute_name}}-keyword="{{ ban['ip'] }} {{ ban['ban_start'] }} {{ ban['ban_end'] }}"
data-{{attribute_name}}-reason="{{ ban['reason'] }}"
data-{{attribute_name}}-remain="{{ ban['remain'] }}"
data-{{attribute_name}}-term="{{ ban['term'] }}"
class="items-center grid grid-cols-12 border-b border-gray-300 py-2.5 break-all">
<div data-{{attribute_name}}-ban-select
data-checkbox-handler="ban-item-{{ loop.index }}"
Expand All @@ -153,16 +157,16 @@ <h5 class="mx-2 font-bold dark:text-white/90 mx-2">BANS LIST</h5>
</svg>
</div>
<p class="dark:text-gray-400 text-sm col-span-2 m-0 mr-1 my-1"
data-{{attribute_name}}-ip="{{ ban['ip'] }}">{{ ban['ip'] }}</p>
>{{ ban['ip'] }}</p>
<p class="dark:text-gray-400 text-sm col-span-2 m-0 mr-1 my-1"
data-{{attribute_name}}-reason="{{ ban['reason'] }}">{{ ban['reason'] }}</p>
>{{ ban['reason'] }}</p>
<p class="dark:text-gray-400 text-sm col-span-2 m-0 mr-1 my-1"
data-{{attribute_name}}-ban_start="{{ ban['ban_start'] }}">{{ ban['ban_start'] }}</p>
>{{ ban['ban_start'] }}</p>
<p class="dark:text-gray-400 text-sm col-span-2 m-0 mr-1 my-1"
data-{{attribute_name}}-ban_end="{{ ban['ban_end'] }}">{{ ban['ban_end'] }}</p>
>{{ ban['ban_end'] }}</p>
<p class="dark:text-gray-400 text-sm col-span-3 m-0 mr-1 my-1"
data-{{attribute_name}}-remain="{{ ban['remain'] }}">{{ ban['remain'] }}</p>
<p class="hidden" data-{{attribute_name}}-term="{{ ban['term'] }}">{{ ban['term'] }}</p>
>{{ ban['remain'] }}</p>
<p class="hidden">{{ ban['term'] }}</p>
</li>
{% endfor %}
</ul>
Expand Down

0 comments on commit b0d547d

Please sign in to comment.