Elgato_dark/bunkerweb
1
0
Fork 0
mirror of https://github.com/bunkerity/bunkerweb synced 2026-05-24 09:28:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix services no match + add plugins new filter class

Browse source
This commit is contained in:
Jordan Blasenhauer 2024-05-14 15:11:25 +02:00
parent bf7017d256
commit bc935b8bc2
4 changed files with 35 additions and 103 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

116
src/ui/static/js/plugins.js
View file

@ -1,4 +1,6 @@
import { CheckNoMatchFilter } from "./utils/settings.js";
import {
Filter
} from "./utils/dashboard.js";
class Dropdown {
constructor(prefix = "plugins") {
@ -165,77 +167,6 @@ class Dropdown {
}
}
class Filter {
constructor(prefix = "plugins") {
this.prefix = prefix;
this.container = document.querySelector(`[data-${this.prefix}-filter]`);
this.keyInp = document.querySelector("input#keyword");
this.lastType = "all";
this.initHandler();
}
initHandler() {
//TYPE HANDLER
this.container.addEventListener("click", (e) => {
try {
if (
e.target
.closest("button")
.getAttribute(`data-${this.prefix}-setting-select-dropdown-btn`) ===
"types"
) {
const btn = e.target.closest("button");
const btnValue = btn.getAttribute("value");
this.lastType = btnValue;
//run filter
this.filter();
}
} catch (err) {}
});
//KEYWORD HANDLER
this.keyInp.addEventListener("input", (e) => {
this.filter();
});
}
filter() {
const logs = document.querySelector(`[data-${this.prefix}-list]`).children;
if (logs.length === 0) return;
//reset
for (let i = 0; i < logs.length; i++) {
const el = logs[i];
el.classList.remove("hidden");
}
//filter type
this.setFilterType(logs);
this.setFilterKeyword(logs);
}
setFilterType(logs) {
if (this.lastType === "all") return;
for (let i = 0; i < logs.length; i++) {
const el = logs[i];
const type = el.getAttribute(`data-${this.prefix}-type`).trim();
if (type !== this.lastType) el.classList.add("hidden");
}
}
setFilterKeyword(logs) {
const keyword = this.keyInp.value.trim().toLowerCase();
if (!keyword) return;
for (let i = 0; i < logs.length; i++) {
const el = logs[i];
const content = el
.querySelector(`[data-${this.prefix}-content]`)
.textContent.trim()
.toLowerCase();
if (!content.includes(keyword)) el.classList.add("hidden");
}
}
}
class Upload {
constructor() {
this.container = document.querySelector("[data-plugins-upload]");
@ -511,26 +442,29 @@ class Modal {
}
const setDropdown = new Dropdown("plugins");
const setFilter = new Filter("plugins");
const setUpload = new Upload();
const setModal = new Modal("plugins");
const checkPluginKeyword = new CheckNoMatchFilter(
document.querySelector("input#keyword"),
"input",
document
.querySelector("[data-plugins-list]")
.querySelectorAll("[data-plugins-type]"),
document.querySelector("[data-plugins-list-container]"),
document.querySelector("[data-plugins-nomatch]"),
);
const checkPluginSelect = new CheckNoMatchFilter(
document.querySelectorAll("button[data-plugins-setting-select-dropdown-btn"),
"select",
document
.querySelector("[data-plugins-list]")
.querySelectorAll("[data-plugins-type]"),
document.querySelector("[data-plugins-list-container]"),
document.querySelector("[data-plugins-nomatch]"),
);
const filterContainer = document.querySelector("[data-plugins-list-container]");
if(filterContainer) {
const noMatchEl = document.querySelector("[data-plugins-nomatch]");
const filterEls = document.querySelectorAll(`[data-plugin]`);
const keywordFilter = {
"handler": document.querySelector("input#keyword"),
"handlerType" : "input",
"value" : document.querySelector("input#keyword").value,
"filterEls": filterEls,
"filterAtt" : "data-plugins-name",
"filterType" : "keyword",
};
const typeFilter = {
"handler": document.querySelector("[data-plugins-setting-select-dropdown='types']"),
"handlerType" : "select",
"value" : document.querySelector("[data-plugins-setting-select-text='types']").textContent.trim().toLowerCase(),
"filterEls": filterEls,
"filterAtt" : "data-plugins-type",
"filterType" : "match",
};
new Filter("plugins", [keywordFilter, typeFilter], filterContainer, noMatchEl);
}

4
src/ui/static/js/services.js
View file

@ -580,7 +580,7 @@ const checkServiceModalKeyword = new CheckNoMatchFilter(
.querySelector("[data-services-modal-form]")
.querySelectorAll("[data-plugin-item]"),
document.querySelector("[data-services-modal-form]"),
document.querySelector("[data-services-nomatch]"),
document.querySelector("[data-advanced][data-services-nomatch]"),
);
const checkServiceModalSelect = new CheckNoMatchFilter(
@ -592,7 +592,7 @@ const checkServiceModalSelect = new CheckNoMatchFilter(
.querySelector("[data-services-modal-form]")
.querySelectorAll("[data-plugin-item]"),
document.querySelector("[data-services-modal-form]"),
document.querySelector("[data-services-nomatch]"),
document.querySelector("[data-advanced][data-services-nomatch]"),
);
const filterContainer = document.querySelector(`[data-services-filter]`);

15
src/ui/static/js/utils/dashboard.js
View file

@ -38,7 +38,7 @@ init() {
setSelectHandler(handler) {
handler.addEventListener("click", (e) => {
try {
if(!e.target.closest("button").hasAttribute('data-services-setting-select-dropdown-btn')) return;
if(!e.target.closest("button").hasAttribute(`data-${this.prefix}-setting-select-dropdown-btn`)) return;
const value = e.target.closest("button").getAttribute('value');
this.updateValue(handler, value);
this.filter();
@ -87,7 +87,6 @@ filter() {
this.filters.forEach((filter) => {
const [filterType, value, filterEls, filterAtt] = this.getFilterData(filter);
// keyword filter means that el filter value must contains the keyword
if(filterType === "keyword") {
this.filterKeyword(value, filterEls, filterAtt);
@ -111,15 +110,13 @@ filter() {
});
// If no match is found, hide the container and display the no match element
setTimeout(() => {
if(!this.isAtLeastOneMatch()) {
if(this.containerEl) this.containerEl.classList.add("hidden");
if(this.noMatchEl) this.noMatchEl.classList.remove("hidden");
}
}, 50);
if(!this.isAtLeastOneMatch()) {
console.log("run")
if(this.containerEl) this.containerEl.classList.add("hidden");
if(this.noMatchEl) this.noMatchEl.classList.remove("hidden");
}
}
filterKeyword(value, filterEls, filterAtt) {
const keyword = value.trim().toLowerCase();

3
src/ui/templates/plugins.html vendored
View file

@ -83,7 +83,8 @@
class="plugins-list-items-container">
<div data-{{attribute_name}}-list class="plugins-list-items-wrap">
{% for plugin in plugins %}
<div data-{{attribute_name}}-type="{{ plugin['type'] }}"
<div data-plugin data-{{attribute_name}}-type="{{ plugin['type'] }}"
data-{{attribute_name}}-name="{{ plugin['name'] }}"
class="plugins-list-items {% if plugin['type'] != 'pro' or plugin['type'] == 'pro' and is_pro_version %} enabled {% else %} disabled {% endif %}">
<p data-{{attribute_name}}-content
class="plugins-list-items-name {% if plugin['type'] == 'pro' and not is_pro_version %} disabled {% endif %} ">