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

add new filter class to jobs page

Browse source
This commit is contained in:
Jordan Blasenhauer 2024-05-14 15:25:17 +02:00
parent bc935b8bc2
commit 54f7d21430
3 changed files with 56 additions and 197 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

229
src/ui/static/js/jobs.js
View file

@ -1,4 +1,6 @@
import { CheckNoMatchFilter } from "./utils/settings.js";
import {
Filter
} from "./utils/dashboard.js";
class Dropdown {
constructor(prefix = "jobs") {
@ -176,173 +178,6 @@ class Dropdown {
}
}
class Filter {
constructor(prefix = "jobs") {
this.prefix = prefix;
this.container =
document.querySelector(`[data-${this.prefix}-filter]`) || null;
this.keyInp = document.querySelector("input#keyword");
this.successValue = "all";
this.reloadValue = "all";
this.everyValue = "all";
this.initHandler();
}
initHandler() {
if (!this.container) return;
//SUCCESS HANDLER
this.container.addEventListener("click", (e) => {
try {
if (
e.target
.closest("button")
.getAttribute(`data-${this.prefix}-setting-select-dropdown-btn`) ===
"success"
) {
setTimeout(() => {
const value = document
.querySelector(
`[data-${this.prefix}-setting-select-text="success"]`,
)
.textContent.trim();
this.successValue = value;
//run filter
this.filter();
}, 10);
}
} catch (err) {}
});
//RELOAD HANDLER
this.container.addEventListener("click", (e) => {
try {
if (
e.target
.closest("button")
.getAttribute(`data-${this.prefix}-setting-select-dropdown-btn`) ===
"reload"
) {
setTimeout(() => {
const value = document
.querySelector(
`[data-${this.prefix}-setting-select-text="reload"]`,
)
.textContent.trim();
this.reloadValue = value;
//run filter
this.filter();
}, 10);
}
} catch (err) {}
});
//EVERY HANDLER
this.container.addEventListener("click", (e) => {
try {
if (
e.target
.closest("button")
.getAttribute(`data-${this.prefix}-setting-select-dropdown-btn`) ===
"every"
) {
setTimeout(() => {
const value = document
.querySelector(
`[data-${this.prefix}-setting-select-text="every"]`,
)
.textContent.trim();
this.everyValue = value;
//run filter
this.filter();
}, 10);
}
} catch (err) {}
});
//KEYWORD HANDLER
this.keyInp.addEventListener("input", (e) => {
this.filter();
});
}
filter() {
const jobs = document.querySelector(`[data-${this.prefix}-list]`).children;
if (jobs.length === 0) return;
//reset
for (let i = 0; i < jobs.length; i++) {
const el = jobs[i];
el.classList.remove("hidden");
}
//filter type
this.setFilterSuccess(jobs);
this.setFilterEvery(jobs);
this.setFilterReload(jobs);
this.setFilterKeyword(jobs);
}
setFilterEvery(jobs) {
if (this.everyValue === "all") return;
for (let i = 0; i < jobs.length; i++) {
const el = jobs[i];
const type = el
.querySelector(`[data-${this.prefix}-every]`)
.getAttribute(`data-${this.prefix}-every`)
.trim();
if (type !== this.everyValue) el.classList.add("hidden");
}
}
setFilterSuccess(jobs) {
if (this.successValue === "all") return;
for (let i = 0; i < jobs.length; i++) {
const el = jobs[i];
const type = el
.querySelector(`[data-${this.prefix}-success]`)
.getAttribute(`data-${this.prefix}-success`)
.trim();
if (type !== this.successValue) el.classList.add("hidden");
}
}
setFilterReload(jobs) {
if (this.reloadValue === "all") return;
for (let i = 0; i < jobs.length; i++) {
const el = jobs[i];
const type = el
.querySelector(`[data-${this.prefix}-reload]`)
.getAttribute(`data-${this.prefix}-reload`)
.trim();
if (type !== this.reloadValue) el.classList.add("hidden");
}
}
setFilterKeyword(jobs) {
const keyword = this.keyInp.value.trim().toLowerCase();
if (!keyword) return;
for (let i = 0; i < jobs.length; i++) {
const el = jobs[i];
const name = el
.querySelector(`[data-${this.prefix}-name]`)
.textContent.trim()
.toLowerCase();
const date = el
.querySelector(`[data-${this.prefix}-last_run]`)
.textContent.trim()
.toLowerCase();
const every = el
.querySelector(`[data-${this.prefix}-every]`)
.textContent.trim()
.toLowerCase();
if (
!name.includes(keyword) &&
!date.includes(keyword) &&
!every.includes(keyword)
)
el.classList.add("hidden");
}
}
}
class Download {
constructor(prefix = "jobs") {
@ -377,25 +212,43 @@ class Download {
}
const setDropdown = new Dropdown("jobs");
const setFilter = new Filter("jobs");
const setDownload = new Download();
const checkPluginKeyword = new CheckNoMatchFilter(
document.querySelector("input#keyword"),
"input",
document
.querySelector("[data-jobs-list]")
.querySelectorAll("[data-jobs-item]"),
document.querySelector("[data-jobs-list-container]"),
document.querySelector("[data-jobs-nomatch]"),
);
const checkPluginSelect = new CheckNoMatchFilter(
document.querySelectorAll("button[data-jobs-setting-select-dropdown-btn]"),
"select",
document
.querySelector("[data-jobs-list]")
.querySelectorAll("[data-jobs-item]"),
document.querySelector("[data-jobs-list-container]"),
document.querySelector("[data-jobs-nomatch]"),
);
const filterContainer = document.querySelector("[data-jobs-list-container]");
if(filterContainer) {
const noMatchEl = document.querySelector("[data-jobs-nomatch]");
const filterEls = document.querySelectorAll(`[data-jobs-item]`);
const keywordFilter = {
"handler": document.querySelector("input#keyword"),
"handlerType" : "input",
"value" : document.querySelector("input#keyword").value,
"filterEls": filterEls,
"filterAtt" : "data-jobs-name",
"filterType" : "keyword",
};
const successFilter = {
"handler": document.querySelector("[data-jobs-setting-select-dropdown='success']"),
"handlerType" : "select",
"value" : document.querySelector("[data-jobs-setting-select-text='success']").textContent.trim().toLowerCase(),
"filterEls": filterEls,
"filterAtt" : "data-jobs-success",
"filterType" : "bool",
};
const reloadFilter = {
"handler": document.querySelector("[data-jobs-setting-select-dropdown='reload']"),
"handlerType" : "select",
"value" : document.querySelector("[data-jobs-setting-select-text='reload']").textContent.trim().toLowerCase(),
"filterEls": filterEls,
"filterAtt" : "data-jobs-reload",
"filterType" : "bool",
};
const everyFilter = {
"handler": document.querySelector("[data-jobs-setting-select-dropdown='every']"),
"handlerType" : "select",
"value" : document.querySelector("[data-jobs-setting-select-text='every']").textContent.trim().toLowerCase(),
"filterEls": filterEls,
"filterAtt" : "data-jobs-every",
"filterType" : "match",
};
new Filter("jobs", [keywordFilter, successFilter, reloadFilter, everyFilter], filterContainer, noMatchEl);
}

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

@ -151,16 +151,18 @@ filterMatch(value, filterEls, filterAtt) {
filterBool(value, filterEls, filterAtt) {
console.log(value, filterEls, filterAtt)
// Check if value is undefined or null
if(value === undefined || value === null) return;
if(value === undefined || value === null || value === "all") return;
for (let i = 0; i < filterEls.length; i++) {
const el = filterEls[i];
const elValue = this.getFilterElValue(el, filterAtt);
const truthyValues = ["yes", "true", "1", true];
const isValueTruthy = truthyValues.includes(elValue);
if(value && isValueTruthy || !value && !isValueTruthy) {
const isValueElTruthy = truthyValues.includes(elValue);
const isValueTruthy = truthyValues.includes(value);
console.log(value, isValueTruthy)
if(isValueElTruthy === isValueTruthy) {
continue;
}
@ -173,7 +175,7 @@ filterBool(value, filterEls, filterAtt) {
filterLowerThan(value, filterEls, filterAtt) {
// Check if value is undefined or null
if(!value) return;
if(!value || value === 'all') return;
for (let i = 0; i < filterEls.length; i++) {
@ -198,7 +200,7 @@ filterLowerThan(value, filterEls, filterAtt) {
filterHigherThan(value, filterEls, filterAtt) {
// Check if value is undefined or null
if(!value) return;
if(!value || value === 'all') return;
for (let i = 0; i < filterEls.length; i++) {
const el = filterEls[i];

10
src/ui/templates/jobs.html vendored
View file

@ -114,15 +114,19 @@
{"type" : "select", "filter_name" : "success", "value" : value['success'], "custom_class" : "col-span-3"},
] %}
<li data-{{attribute_name}}-item
{% for data in jobs_data %}
data-{{attribute_name}}-{{ data['filter_name'] }}="{{ data['value'] }}"
{%endfor%}
class="items-center grid grid-cols-12 border-b border-gray-300 py-2.5 break-all">
{% for data in jobs_data %}
{% if data['type'] == "text" %}
<p class="{{ data['custom_class'] }} dark:text-gray-400 text-sm m-0 my-1 mr-1" data-{{attribute_name}}-{{ data['filter_name'] }}="{{ data['value'] }}">
<p class="{{ data['custom_class'] }} dark:text-gray-400 text-sm m-0 my-1 mr-1">
{{ data['value'] }}
</p>
{% endif %}
{% if data['type'] == "check" and data['value'] %}
<p class="{{ data['custom_class'] }} flex justify-center dark:text-gray-400 text-sm m-0 my-1 mr-1" data-{{attribute_name}}-{{ data['filter_name'] }}="true">
<p class="{{ data['custom_class'] }} flex justify-center dark:text-gray-400 text-sm m-0 my-1 mr-1">
<svg class="fill-green-500 h-5 w-5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512">
@ -131,7 +135,7 @@
</p>
{% endif %}
{% if data['type'] == "check" and not data['value'] %}
<p class="{{ data['custom_class'] }} flex justify-center dark:text-gray-400 text-sm m-0 my-1 mr-1" data-{{attribute_name}}-{{ data['filter_name'] }}="false">
<p class="{{ data['custom_class'] }} flex justify-center dark:text-gray-400 text-sm m-0 my-1 mr-1">
<svg class="fill-red-500 h-5 w-5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512">