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

standard dropdown class + precommit

Browse source 
Now pages are sharing a standard dropdown class instead of a class per page
This commit is contained in:
Jordan Blasenhauer 2024-05-14 16:13:12 +02:00
parent 08e90167a8
commit 81612d6912
10 changed files with 672 additions and 1674 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

243
src/ui/static/js/bans.js
View file

@ -1,183 +1,4 @@
import {
Filter
} from "./utils/dashboard.js";
class Dropdown {
constructor(prefix = "bans") {
this.prefix = prefix;
this.container = document.querySelector("main");
this.lastDrop = "";
this.initDropdown();
}
initDropdown() {
this.container.addEventListener("click", (e) => {
//SELECT BTN LOGIC
try {
if (
e.target
.closest("button")
.hasAttribute(`data-${this.prefix}-setting-select`) &&
!e.target.closest("button").hasAttribute(`disabled`)
) {
const btnName = e.target
.closest("button")
.getAttribute(`data-${this.prefix}-setting-select`);
if (this.lastDrop !== btnName) {
this.lastDrop = btnName;
this.closeAllDrop();
}
this.toggleSelectBtn(e);
}
} catch (err) {}
//SELECT DROPDOWN BTN LOGIC
try {
if (
e.target
.closest("button")
.hasAttribute(`data-${this.prefix}-setting-select-dropdown-btn`)
) {
const btn = e.target.closest("button");
const btnValue = btn.getAttribute("value");
const btnSetting = btn.getAttribute(
`data-${this.prefix}-setting-select-dropdown-btn`,
);
//stop if same value to avoid new fetching
const isSameVal = this.isSameValue(btnSetting, btnValue);
if (isSameVal) return this.hideDropdown(btnSetting);
//else, add new value to custom
this.setSelectNewValue(btnSetting, btnValue);
//close dropdown and change style
this.hideDropdown(btnSetting);
if (
!e.target.closest("button").hasAttribute(`data-${this.prefix}-file`)
) {
this.changeDropBtnStyle(btnSetting, btn);
}
//show / hide filter
if (btnSetting === "instances") {
this.hideFilterOnLocal(btn.getAttribute("data-_type"));
}
}
} catch (err) {}
});
}
closeAllDrop() {
const drops = document.querySelectorAll(
`[data-${this.prefix}-setting-select-dropdown]`,
);
drops.forEach((drop) => {
drop.classList.add("hidden");
drop.classList.remove("flex");
document
.querySelector(
`svg[data-${this.prefix}-setting-select="${drop.getAttribute(
`data-${this.prefix}-setting-select-dropdown`,
)}"]`,
)
.classList.remove("rotate-180");
});
}
isSameValue(btnSetting, value) {
const selectCustom = document.querySelector(
`[data-${this.prefix}-setting-select-text="${btnSetting}"]`,
);
const currVal = selectCustom.textContent;
return currVal === value ? true : false;
}
setSelectNewValue(btnSetting, value) {
const selectCustom = document.querySelector(
`[data-${this.prefix}-setting-select="${btnSetting}"]`,
);
selectCustom.querySelector(
`[data-${this.prefix}-setting-select-text]`,
).textContent = value;
}
hideDropdown(btnSetting) {
//hide dropdown
const dropdownEl = document.querySelector(
`[data-${this.prefix}-setting-select-dropdown="${btnSetting}"]`,
);
dropdownEl.classList.add("hidden");
dropdownEl.classList.remove("flex");
//svg effect
const dropdownChevron = document.querySelector(
`svg[data-${this.prefix}-setting-select="${btnSetting}"]`,
);
dropdownChevron.classList.remove("rotate-180");
}
changeDropBtnStyle(btnSetting, selectedBtn) {
const dropdownEl = document.querySelector(
`[data-${this.prefix}-setting-select-dropdown="${btnSetting}"]`,
);
//reset dropdown btns
const btnEls = dropdownEl.querySelectorAll("button");
btnEls.forEach((btn) => {
btn.classList.remove(
"bg-primary",
"dark:bg-primary",
"text-gray-300",
"text-gray-300",
);
btn.classList.add("bg-white", "dark:bg-slate-700", "text-gray-700");
});
//highlight clicked btn
selectedBtn.classList.remove(
"bg-white",
"dark:bg-slate-700",
"text-gray-700",
);
selectedBtn.classList.add("dark:bg-primary", "bg-primary", "text-gray-300");
}
toggleSelectBtn(e) {
const attribute = e.target
.closest("button")
.getAttribute(`data-${this.prefix}-setting-select`);
//toggle dropdown
const dropdownEl = document.querySelector(
`[data-${this.prefix}-setting-select-dropdown="${attribute}"]`,
);
const dropdownChevron = document.querySelector(
`svg[data-${this.prefix}-setting-select="${attribute}"]`,
);
dropdownEl.classList.toggle("hidden");
dropdownEl.classList.toggle("flex");
dropdownChevron.classList.toggle("rotate-180");
}
//hide date filter on local
hideFilterOnLocal(type) {
if (type === "local") {
this.hideInp(`input#from-date`);
this.hideInp(`input#to-date`);
}
if (type !== "local") {
this.showInp(`input#from-date`);
this.showInp(`input#to-date`);
}
}
showInp(selector) {
document.querySelector(selector).closest("div").classList.add("flex");
document.querySelector(selector).closest("div").classList.remove("hidden");
}
hideInp(selector) {
document.querySelector(selector).closest("div").classList.add("hidden");
document.querySelector(selector).closest("div").classList.remove("flex");
}
}
import { Filter, Dropdown } from "./utils/dashboard.js";
class Unban {
constructor(prefix = "bans") {
@ -484,39 +305,53 @@ class AddBanModal {
}
}
const setDropdown = new Dropdown();
const setDropdown = new Dropdown("bans");
const setUnban = new Unban();
const setModal = new AddBanModal();
const filterContainer = document.querySelector("[data-bans-list-container]");
if(filterContainer) {
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",
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 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",
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);
}
new Filter(
"bans",
[keywordFilter, reasonFilter, termFilter],
filterContainer,
noMatchEl,
);
}

180
src/ui/static/js/configs.js
View file

@ -5,183 +5,9 @@ import {
FolderDropdown,
} from "./utils/file.manager.js";
class Dropdown {
constructor(prefix = "configs") {
this.prefix = prefix;
this.container = document.querySelector("main");
this.lastDrop = "";
this.initDropdown();
}
import { Dropdown } from "./utils/dashboard.js";
initDropdown() {
this.container.addEventListener("click", (e) => {
//SELECT BTN LOGIC
try {
if (
e.target
.closest("button")
.hasAttribute(`data-${this.prefix}-setting-select`) &&
!e.target.closest("button").hasAttribute(`disabled`)
) {
const btnName = e.target
.closest("button")
.getAttribute(`data-${this.prefix}-setting-select`);
if (this.lastDrop !== btnName) {
this.lastDrop = btnName;
this.closeAllDrop();
}
this.toggleSelectBtn(e);
}
} catch (err) {}
//SELECT DROPDOWN BTN LOGIC
try {
if (
e.target
.closest("button")
.hasAttribute(`data-${this.prefix}-setting-select-dropdown-btn`)
) {
const btn = e.target.closest("button");
const btnValue = btn.getAttribute("value");
const btnSetting = btn.getAttribute(
`data-${this.prefix}-setting-select-dropdown-btn`,
);
//stop if same value to avoid new fetching
const isSameVal = this.isSameValue(btnSetting, btnValue);
if (isSameVal) return this.hideDropdown(btnSetting);
//else, add new value to custom
this.setSelectNewValue(btnSetting, btnValue);
//close dropdown and change style
this.hideDropdown(btnSetting);
if (
!e.target.closest("button").hasAttribute(`data-${this.prefix}-file`)
) {
this.changeDropBtnStyle(btnSetting, btn);
}
//show / hide filter
if (btnSetting === "instances") {
this.hideFilterOnLocal(btn.getAttribute("data-_type"));
}
}
} catch (err) {}
});
}
closeAllDrop() {
const drops = document.querySelectorAll(
`[data-${this.prefix}-setting-select-dropdown]`,
);
drops.forEach((drop) => {
drop.classList.add("hidden");
drop.classList.remove("flex");
document
.querySelector(
`svg[data-${this.prefix}-setting-select="${drop.getAttribute(
`data-${this.prefix}-setting-select-dropdown`,
)}"]`,
)
.classList.remove("rotate-180");
});
}
isSameValue(btnSetting, value) {
const selectCustom = document.querySelector(
`[data-${this.prefix}-setting-select-text="${btnSetting}"]`,
);
const currVal = selectCustom.textContent;
return currVal === value ? true : false;
}
setSelectNewValue(btnSetting, value) {
const selectCustom = document.querySelector(
`[data-${this.prefix}-setting-select="${btnSetting}"]`,
);
selectCustom.querySelector(
`[data-${this.prefix}-setting-select-text]`,
).textContent = value;
}
hideDropdown(btnSetting) {
//hide dropdown
const dropdownEl = document.querySelector(
`[data-${this.prefix}-setting-select-dropdown="${btnSetting}"]`,
);
dropdownEl.classList.add("hidden");
dropdownEl.classList.remove("flex");
//svg effect
const dropdownChevron = document.querySelector(
`svg[data-${this.prefix}-setting-select="${btnSetting}"]`,
);
dropdownChevron.classList.remove("rotate-180");
}
changeDropBtnStyle(btnSetting, selectedBtn) {
const dropdownEl = document.querySelector(
`[data-${this.prefix}-setting-select-dropdown="${btnSetting}"]`,
);
//reset dropdown btns
const btnEls = dropdownEl.querySelectorAll("button");
btnEls.forEach((btn) => {
btn.classList.remove(
"bg-primary",
"dark:bg-primary",
"text-gray-300",
"text-gray-300",
);
btn.classList.add("bg-white", "dark:bg-slate-700", "text-gray-700");
});
//highlight clicked btn
selectedBtn.classList.remove(
"bg-white",
"dark:bg-slate-700",
"text-gray-700",
);
selectedBtn.classList.add("dark:bg-primary", "bg-primary", "text-gray-300");
}
toggleSelectBtn(e) {
const attribute = e.target
.closest("button")
.getAttribute(`data-${this.prefix}-setting-select`);
//toggle dropdown
const dropdownEl = document.querySelector(
`[data-${this.prefix}-setting-select-dropdown="${attribute}"]`,
);
const dropdownChevron = document.querySelector(
`svg[data-${this.prefix}-setting-select="${attribute}"]`,
);
dropdownEl.classList.toggle("hidden");
dropdownEl.classList.toggle("flex");
dropdownChevron.classList.toggle("rotate-180");
}
//hide date filter on local
hideFilterOnLocal(type) {
if (type === "local") {
this.hideInp(`input#from-date`);
this.hideInp(`input#to-date`);
}
if (type !== "local") {
this.showInp(`input#from-date`);
this.showInp(`input#to-date`);
}
}
showInp(selector) {
document.querySelector(selector).closest("div").classList.add("flex");
document.querySelector(selector).closest("div").classList.remove("hidden");
}
hideInp(selector) {
document.querySelector(selector).closest("div").classList.add("hidden");
document.querySelector(selector).closest("div").classList.remove("flex");
}
}
class Filter {
class FilterManager {
constructor(prefix = "configs") {
this.prefix = prefix;
this.container = document.querySelector(`[data-${this.prefix}-filter]`);
@ -297,5 +123,5 @@ const setEditor = new FolderEditor();
const setFolderNav = new FolderNav("configs");
const setDropdown = new FolderDropdown("configs");
const setFilterDropdown = new Dropdown("configs");
const setFilter = new Filter();
const setFilter = new FilterManager();
const setRootOnlyConf = new SetRootOnlyConf();

255
src/ui/static/js/global_config.js
View file

@ -7,177 +7,8 @@ import {
showInvalid,
} from "./utils/settings.js";
class Dropdown {
constructor(prefix = "global-config") {
this.prefix = prefix;
this.container = document.querySelector("main");
this.lastDrop = "";
this.initDropdown();
}
import { Dropdown } from "./utils/dashboard.js";
initDropdown() {
this.container.addEventListener("click", (e) => {
//SELECT BTN LOGIC
try {
if (
e.target
.closest("button")
.hasAttribute(`data-${this.prefix}-setting-select`) &&
!e.target.closest("button").hasAttribute(`disabled`)
) {
const btnName = e.target
.closest("button")
.getAttribute(`data-${this.prefix}-setting-select`);
if (this.lastDrop !== btnName) {
this.lastDrop = btnName;
this.closeAllDrop();
}
this.toggleSelectBtn(e);
}
} catch (err) {}
//SELECT DROPDOWN BTN LOGIC
try {
if (
e.target
.closest("button")
.hasAttribute(`data-${this.prefix}-setting-select-dropdown-btn`)
) {
const btn = e.target.closest("button");
const btnValue = btn.getAttribute("value");
const btnSetting = btn.getAttribute(
`data-${this.prefix}-setting-select-dropdown-btn`
);
//stop if same value to avoid new fetching
const isSameVal = this.isSameValue(btnSetting, btnValue);
if (isSameVal) return this.hideDropdown(btnSetting);
//else, add new value to custom
this.setSelectNewValue(btnSetting, btnValue);
//close dropdown and change style
this.hideDropdown(btnSetting);
if (
!e.target.closest("button").hasAttribute(`data-${this.prefix}-file`)
) {
this.changeDropBtnStyle(btnSetting, btn);
}
}
} catch (err) {}
});
}
closeAllDrop() {
const drops = document.querySelectorAll(
`[data-${this.prefix}-setting-select-dropdown]`
);
drops.forEach((drop) => {
drop.classList.add("hidden");
drop.classList.remove("flex");
document
.querySelector(
`svg[data-${this.prefix}-setting-select="${drop.getAttribute(
`data-${this.prefix}-setting-select-dropdown`
)}"]`
)
.classList.remove("rotate-180");
});
}
isSameValue(btnSetting, value) {
const selectCustom = document.querySelector(
`[data-${this.prefix}-setting-select-text="${btnSetting}"]`
);
const currVal = selectCustom.textContent;
return currVal === value ? true : false;
}
setSelectNewValue(btnSetting, value) {
const selectCustom = document.querySelector(
`[data-${this.prefix}-setting-select="${btnSetting}"]`
);
selectCustom.querySelector(
`[data-${this.prefix}-setting-select-text]`
).textContent = value;
}
hideDropdown(btnSetting) {
//hide dropdown
const dropdownEl = document.querySelector(
`[data-${this.prefix}-setting-select-dropdown="${btnSetting}"]`
);
dropdownEl.classList.add("hidden");
dropdownEl.classList.remove("flex");
//svg effect
const dropdownChevron = document.querySelector(
`svg[data-${this.prefix}-setting-select="${btnSetting}"]`
);
dropdownChevron.classList.remove("rotate-180");
}
changeDropBtnStyle(btnSetting, selectedBtn) {
const dropdownEl = document.querySelector(
`[data-${this.prefix}-setting-select-dropdown="${btnSetting}"]`
);
//reset dropdown btns
const btnEls = dropdownEl.querySelectorAll("button");
btnEls.forEach((btn) => {
btn.classList.remove(
"bg-primary",
"dark:bg-primary",
"text-gray-300",
"text-gray-300"
);
btn.classList.add("bg-white", "dark:bg-slate-700", "text-gray-700");
});
//highlight clicked btn
selectedBtn.classList.remove(
"bg-white",
"dark:bg-slate-700",
"text-gray-700"
);
selectedBtn.classList.add("dark:bg-primary", "bg-primary", "text-gray-300");
}
toggleSelectBtn(e) {
const attribute = e.target
.closest("button")
.getAttribute(`data-${this.prefix}-setting-select`);
//toggle dropdown
const dropdownEl = document.querySelector(
`[data-${this.prefix}-setting-select-dropdown="${attribute}"]`
);
const dropdownChevron = document.querySelector(
`svg[data-${this.prefix}-setting-select="${attribute}"]`
);
dropdownEl.classList.toggle("hidden");
dropdownEl.classList.toggle("flex");
dropdownChevron.classList.toggle("rotate-180");
}
//hide date filter on local
hideFilterOnLocal(type) {
if (type === "local") {
this.hideInp(`input#from-date`);
this.hideInp(`input#to-date`);
}
if (type !== "local") {
this.showInp(`input#from-date`);
this.showInp(`input#to-date`);
}
}
showInp(selector) {
document.querySelector(selector).closest("div").classList.add("flex");
document.querySelector(selector).closest("div").classList.remove("hidden");
}
hideInp(selector) {
document.querySelector(selector).closest("div").classList.add("hidden");
document.querySelector(selector).closest("div").classList.remove("flex");
}
}
class Multiple {
constructor(prefix) {
this.prefix = prefix;
@ -220,11 +51,11 @@ class Multiple {
//get plugin from btn
const btn = e.target.closest("button");
const attName = btn.getAttribute(
`data-${this.prefix}-multiple-add`
`data-${this.prefix}-multiple-add`,
);
//get all multiple groups
const multipleEls = document.querySelectorAll(
`[data-${this.prefix}-settings-multiple*="${attName}"]`
`[data-${this.prefix}-settings-multiple*="${attName}"]`,
);
//case no schema
if (multipleEls.length <= 0) return;
@ -236,7 +67,7 @@ class Multiple {
//and keep the highest num
multipleEls.forEach((container) => {
const ctnrName = container.getAttribute(
`data-${this.prefix}-settings-multiple`
`data-${this.prefix}-settings-multiple`,
);
const num = this.getSuffixNumOrFalse(ctnrName);
if (!isNaN(num) && num > topNum) topNum = num;
@ -247,7 +78,7 @@ class Multiple {
const setNum = +currNum === 0 ? `` : `_${currNum}`;
//the default (schema) group is the last group
const schema = document.querySelector(
`[data-${this.prefix}-settings-multiple="${attName}_SCHEMA"]`
`[data-${this.prefix}-settings-multiple="${attName}_SCHEMA"]`,
);
//clone schema to create a group with new num
const schemaClone = schema.cloneNode(true);
@ -290,12 +121,12 @@ class Multiple {
// We are not removing it really, just hiding it and update values to default
// By setting default value, group will be send to server and delete (because a setting with default value is useless to keep)
const multContainer = e.target.closest(
`[data-${this.prefix}-settings-multiple]`
`[data-${this.prefix}-settings-multiple]`,
);
multContainer.classList.add("hidden-multiple");
// get setting container
const settings = multContainer.querySelectorAll(
`[data-setting-container]`
`[data-setting-container]`,
);
settings.forEach((setting) => {
// for regular input
@ -322,7 +153,7 @@ class Multiple {
// for select
try {
const selects = setting.querySelectorAll(
"button[data-setting-select]"
"button[data-setting-select]",
);
selects.forEach((select) => {
const defaultVal = select.getAttribute("data-default") || "";
@ -333,8 +164,8 @@ class Multiple {
defaultVal;
const dropdown = document.querySelector(
`[data-setting-select-dropdown="${select.getAttribute(
"data-setting-select"
)}"]`
"data-setting-select",
)}"]`,
);
dropdown.querySelector(`button[value=${defaultVal}]`).click();
});
@ -370,13 +201,13 @@ class Multiple {
? name.replace(`_${splitName[splitName.length - 1]}`, "").trim()
: name.trim();
const relateSetting = document.querySelector(
`[data-setting-container=${nameSuffixLess}_SCHEMA]`
`[data-setting-container=${nameSuffixLess}_SCHEMA]`,
);
const relateCtnr = relateSetting.closest(
`[data-${this.prefix}-settings-multiple]`
`[data-${this.prefix}-settings-multiple]`,
);
const relateCtnrName = relateCtnr.getAttribute(
`data-${this.prefix}-settings-multiple`
`data-${this.prefix}-settings-multiple`,
);
//then we sort the setting on the right container name by suffixe number
if (!(relateCtnrName in sortMultiples)) {
@ -394,7 +225,7 @@ class Multiple {
addOneMultGroup() {
const settings = document.querySelector(`[data-${this.prefix}-modal-form]`);
const multAddBtns = settings.querySelectorAll(
`[data-${this.prefix}-multiple-add]`
`[data-${this.prefix}-multiple-add]`,
);
multAddBtns.forEach((btn) => {
//check if already one (SCHEMA exclude so length >= 2)
@ -410,7 +241,7 @@ class Multiple {
showMultByAtt(att) {
const multContainers = document.querySelectorAll(
`[data-${this.prefix}-settings-multiple^=${att}]`
`[data-${this.prefix}-settings-multiple^=${att}]`,
);
multContainers.forEach((container) => {
if (
@ -424,7 +255,7 @@ class Multiple {
toggleMultByAtt(att) {
const multContainers = document.querySelectorAll(
`[data-${this.prefix}-settings-multiple^=${att}]`
`[data-${this.prefix}-settings-multiple^=${att}]`,
);
multContainers.forEach((container) => {
if (
@ -440,7 +271,7 @@ class Multiple {
//get schema settings
const multiples = {};
const schemaSettings = document.querySelectorAll(
`[data-setting-container$="SCHEMA"]`
`[data-setting-container$="SCHEMA"]`,
);
// loop on every schema settings
schemaSettings.forEach((schema) => {
@ -466,11 +297,11 @@ class Multiple {
setMultipleToDOM(sortMultObj) {
//we loop on each multiple that contains values to render to DOM
for (const [schemaCtnrName, multGroupBySuffix] of Object.entries(
sortMultObj
sortMultObj,
)) {
//we need to access the DOM schema container
const schemaCtnr = document.querySelector(
`[data-${this.prefix}-settings-multiple="${schemaCtnrName}"]`
`[data-${this.prefix}-settings-multiple="${schemaCtnrName}"]`,
);
//now we have to loop on each multiple settings group
for (const [suffix, settings] of Object.entries(multGroupBySuffix)) {
@ -486,14 +317,14 @@ class Multiple {
for (const [name, data] of Object.entries(settings)) {
//get setting container of clone container
const settingContainer = schemaCtnrClone.querySelector(
`[data-setting-container="${name}"]`
`[data-setting-container="${name}"]`,
);
//replace input info and disabled state
this.setSetting(
data["value"],
data["method"],
data["global"],
settingContainer
settingContainer,
);
}
//send schema clone to DOM and show it
@ -508,7 +339,7 @@ class Multiple {
`data-${this.prefix}-settings-multiple`,
schemaCtnrClone
.getAttribute(`data-${this.prefix}-settings-multiple`)
.replace("_SCHEMA", suffix)
.replace("_SCHEMA", suffix),
);
//rename title
@ -522,18 +353,18 @@ class Multiple {
//rename setting container
const settingCtnrs = schemaCtnrClone.querySelectorAll(
"[data-setting-container]"
"[data-setting-container]",
);
settingCtnrs.forEach((settingCtnr) => {
settingCtnr.setAttribute(
"data-setting-container",
settingCtnr
.getAttribute("data-setting-container")
.replace("_SCHEMA", suffix)
.replace("_SCHEMA", suffix),
);
settingCtnr.setAttribute(
"id",
settingCtnr.getAttribute("id").replace("_SCHEMA", suffix)
settingCtnr.getAttribute("id").replace("_SCHEMA", suffix),
);
});
@ -542,7 +373,7 @@ class Multiple {
labelEls.forEach((label) => {
label.setAttribute(
"for",
label.getAttribute("for").replace("_SCHEMA", suffix)
label.getAttribute("for").replace("_SCHEMA", suffix),
);
});
@ -551,19 +382,19 @@ class Multiple {
popoverBtns.forEach((popoverBtn) => {
popoverBtn.setAttribute(
"data-popover-btn",
popoverBtn.getAttribute("data-popover-btn").replace("_SCHEMA", suffix)
popoverBtn.getAttribute("data-popover-btn").replace("_SCHEMA", suffix),
);
});
const popoverContents = schemaCtnrClone.querySelectorAll(
"[data-popover-content]"
"[data-popover-content]",
);
popoverContents.forEach((popoverContent) => {
popoverContent.setAttribute(
"data-popover-content",
popoverContent
.getAttribute("data-popover-content")
.replace("_SCHEMA", suffix)
.replace("_SCHEMA", suffix),
);
});
@ -572,7 +403,7 @@ class Multiple {
invalidEls.forEach((invalidEl) => {
invalidEl.setAttribute(
"data-invalid",
invalidEl.getAttribute("data-invalid").replace("_SCHEMA", suffix)
invalidEl.getAttribute("data-invalid").replace("_SCHEMA", suffix),
);
});
@ -650,15 +481,15 @@ class Multiple {
//click the custom select dropdown btn value to update select value
select.parentElement
.querySelector(
`button[data-setting-select-dropdown-btn][value='${defaultVal}']`
`button[data-setting-select-dropdown-btn][value='${defaultVal}']`,
)
.click();
//set state to custom visible el
const btnCustom = document.querySelector(
`[data-setting-select=${select.getAttribute(
"data-setting-select-default"
)}]`
"data-setting-select-default",
)}]`,
);
this.setDisabledMultServ(btnCustom, method, global);
@ -694,10 +525,10 @@ class Multiple {
selects.forEach((select) => {
const method = select.getAttribute("data-default-method");
const name = select.getAttribute(
`data-${this.prefix}-setting-select-default`
`data-${this.prefix}-setting-select-default`,
);
const selDOM = document.querySelector(
`button[data-${this.prefix}-setting-select='${name}']`
`button[data-${this.prefix}-setting-select='${name}']`,
);
if (method === "ui" || method === "default") {
selDOM.removeAttribute("disabled", "");
@ -739,7 +570,7 @@ class Multiple {
hiddenIfNoMultiples() {
//hide multiple btn if no multiple exist on a plugin
const multiples = document.querySelectorAll(
`[data-${this.prefix}-settings-multiple]`
`[data-${this.prefix}-settings-multiple]`,
);
multiples.forEach((container) => {
if (container.querySelectorAll(`[data-setting-container]`).length <= 0)
@ -751,7 +582,7 @@ class Multiple {
removePrevMultiples() {
const multiPlugins = document.querySelectorAll(
`[data-${this.prefix}-settings-multiple]`
`[data-${this.prefix}-settings-multiple]`,
);
multiPlugins.forEach((multiGrp) => {
if (
@ -784,10 +615,10 @@ class Multiple {
}
const setPopover = new Popover("main", "global-config");
const setDrop = new Dropdown();
const setDrop = new Dropdown("global-config");
const setTabsSelect = new TabsSelect(
document.querySelector("[data-global-config-tabs-select-container]"),
document.querySelector("[data-global-config-plugins-container]")
document.querySelector("[data-global-config-plugins-container]"),
);
const setInvalid = new showInvalid();
const format = new FormatValue();
@ -795,7 +626,7 @@ const format = new FormatValue();
const setFilterGlobal = new FilterSettings(
"keyword",
document.querySelector("[data-global-config-tabs-select-container]"),
document.querySelector("[data-global-config-plugins-container]")
document.querySelector("[data-global-config-plugins-container]"),
);
const setMultiple = new Multiple("global-config");
@ -807,19 +638,19 @@ const checkServiceModalKeyword = new CheckNoMatchFilter(
.querySelector("[data-global-config-plugins-container]")
.querySelectorAll("[data-plugin-item]"),
document.querySelector("[data-global-config-form]"),
document.querySelector("[data-global-config-nomatch]")
document.querySelector("[data-global-config-nomatch]"),
);
try {
const checkServiceCardSelect = new CheckNoMatchFilter(
document.querySelectorAll(
"button[data-global-config-setting-select-dropdown-btn]"
"button[data-global-config-setting-select-dropdown-btn]",
),
"select",
document
.querySelector("[data-global-config-plugins-container]")
.querySelectorAll("[data-plugin-item]"),
document.querySelector("[data-global-config-form]"),
document.querySelector("[data-global-config-nomatch]")
document.querySelector("[data-global-config-nomatch]"),
);
} catch (e) {}

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

@ -1,183 +1,4 @@
import {
Filter
} from "./utils/dashboard.js";
class Dropdown {
constructor(prefix = "jobs") {
this.prefix = prefix;
this.container = document.querySelector("main");
this.lastDrop = "";
this.initDropdown();
}
initDropdown() {
this.container.addEventListener("click", (e) => {
//SELECT BTN LOGIC
try {
if (
e.target
.closest("button")
.hasAttribute(`data-${this.prefix}-setting-select`) &&
!e.target.closest("button").hasAttribute(`disabled`)
) {
const btnName = e.target
.closest("button")
.getAttribute(`data-${this.prefix}-setting-select`);
if (this.lastDrop !== btnName) {
this.lastDrop = btnName;
this.closeAllDrop();
}
this.toggleSelectBtn(e);
}
} catch (err) {}
//SELECT DROPDOWN BTN LOGIC
try {
if (
e.target
.closest("button")
.hasAttribute(`data-${this.prefix}-setting-select-dropdown-btn`)
) {
const btn = e.target.closest("button");
const btnValue = btn.getAttribute("value");
const btnSetting = btn.getAttribute(
`data-${this.prefix}-setting-select-dropdown-btn`,
);
//stop if same value to avoid new fetching
const isSameVal = this.isSameValue(btnSetting, btnValue);
if (isSameVal) return this.hideDropdown(btnSetting);
//else, add new value to custom
this.setSelectNewValue(btnSetting, btnValue);
//close dropdown and change style
this.hideDropdown(btnSetting);
if (
!e.target.closest("button").hasAttribute(`data-${this.prefix}-file`)
) {
this.changeDropBtnStyle(btnSetting, btn);
}
//show / hide filter
if (btnSetting === "instances") {
this.hideFilterOnLocal(btn.getAttribute("data-_type"));
}
}
} catch (err) {}
});
}
closeAllDrop() {
const drops = document.querySelectorAll(
`[data-${this.prefix}-setting-select-dropdown]`,
);
drops.forEach((drop) => {
drop.classList.add("hidden");
drop.classList.remove("flex");
document
.querySelector(
`svg[data-${this.prefix}-setting-select="${drop.getAttribute(
`data-${this.prefix}-setting-select-dropdown`,
)}"]`,
)
.classList.remove("rotate-180");
});
}
isSameValue(btnSetting, value) {
const selectCustom = document.querySelector(
`[data-${this.prefix}-setting-select-text="${btnSetting}"]`,
);
const currVal = selectCustom.textContent;
return currVal === value ? true : false;
}
setSelectNewValue(btnSetting, value) {
const selectCustom = document.querySelector(
`[data-${this.prefix}-setting-select="${btnSetting}"]`,
);
selectCustom.querySelector(
`[data-${this.prefix}-setting-select-text]`,
).textContent = value;
}
hideDropdown(btnSetting) {
//hide dropdown
const dropdownEl = document.querySelector(
`[data-${this.prefix}-setting-select-dropdown="${btnSetting}"]`,
);
dropdownEl.classList.add("hidden");
dropdownEl.classList.remove("flex");
//svg effect
const dropdownChevron = document.querySelector(
`svg[data-${this.prefix}-setting-select="${btnSetting}"]`,
);
dropdownChevron.classList.remove("rotate-180");
}
changeDropBtnStyle(btnSetting, selectedBtn) {
const dropdownEl = document.querySelector(
`[data-${this.prefix}-setting-select-dropdown="${btnSetting}"]`,
);
//reset dropdown btns
const btnEls = dropdownEl.querySelectorAll("button");
btnEls.forEach((btn) => {
btn.classList.remove(
"bg-primary",
"dark:bg-primary",
"text-gray-300",
"text-gray-300",
);
btn.classList.add("bg-white", "dark:bg-slate-700", "text-gray-700");
});
//highlight clicked btn
selectedBtn.classList.remove(
"bg-white",
"dark:bg-slate-700",
"text-gray-700",
);
selectedBtn.classList.add("dark:bg-primary", "bg-primary", "text-gray-300");
}
toggleSelectBtn(e) {
const attribute = e.target
.closest("button")
.getAttribute(`data-${this.prefix}-setting-select`);
//toggle dropdown
const dropdownEl = document.querySelector(
`[data-${this.prefix}-setting-select-dropdown="${attribute}"]`,
);
const dropdownChevron = document.querySelector(
`svg[data-${this.prefix}-setting-select="${attribute}"]`,
);
dropdownEl.classList.toggle("hidden");
dropdownEl.classList.toggle("flex");
dropdownChevron.classList.toggle("rotate-180");
}
//hide date filter on local
hideFilterOnLocal(type) {
if (type === "local") {
this.hideInp(`input#from-date`);
this.hideInp(`input#to-date`);
}
if (type !== "local") {
this.showInp(`input#from-date`);
this.showInp(`input#to-date`);
}
}
showInp(selector) {
document.querySelector(selector).closest("div").classList.add("flex");
document.querySelector(selector).closest("div").classList.remove("hidden");
}
hideInp(selector) {
document.querySelector(selector).closest("div").classList.add("hidden");
document.querySelector(selector).closest("div").classList.remove("flex");
}
}
import { Filter, Dropdown } from "./utils/dashboard.js";
class Download {
constructor(prefix = "jobs") {
@ -215,40 +36,60 @@ const setDropdown = new Dropdown("jobs");
const setDownload = new Download();
const filterContainer = document.querySelector("[data-jobs-list-container]");
if(filterContainer) {
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",
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",
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",
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",
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);
}
new Filter(
"jobs",
[keywordFilter, successFilter, reloadFilter, everyFilter],
filterContainer,
noMatchEl,
);
}

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

@ -1,171 +1,4 @@
import {
Filter
} from "./utils/dashboard.js";
class Dropdown {
constructor(prefix = "plugins") {
this.prefix = prefix;
this.container = document.querySelector("main");
this.initDropdown();
}
initDropdown() {
this.container.addEventListener("click", (e) => {
//SELECT BTN LOGIC
try {
if (
e.target
.closest("button")
.hasAttribute(`data-${this.prefix}-setting-select`) &&
!e.target.closest("button").hasAttribute(`disabled`)
) {
const btnName = e.target
.closest("button")
.getAttribute(`data-${this.prefix}-setting-select`);
if (this.lastDrop !== btnName) {
this.lastDrop = btnName;
this.closeAllDrop();
}
this.toggleSelectBtn(e);
}
} catch (err) {}
//SELECT DROPDOWN BTN LOGIC
try {
if (
e.target
.closest("button")
.hasAttribute(`data-${this.prefix}-setting-select-dropdown-btn`)
) {
const btn = e.target.closest("button");
const btnValue = btn.getAttribute("value");
const btnSetting = btn.getAttribute(
`data-${this.prefix}-setting-select-dropdown-btn`,
);
//stop if same value to avoid new fetching
const isSameVal = this.isSameValue(btnSetting, btnValue);
if (isSameVal) return this.hideDropdown(btnSetting);
//else, add new value to custom
this.setSelectNewValue(btnSetting, btnValue);
//close dropdown and change style
this.hideDropdown(btnSetting);
this.changeDropBtnStyle(btnSetting, btn);
//show / hide filter
if (btnSetting === "instances") {
this.hideFilterOnLocal(btn.getAttribute("data-_type"));
}
}
} catch (err) {}
});
}
closeAllDrop() {
const drops = document.querySelectorAll(
`[data-${this.prefix}-setting-select-dropdown]`,
);
drops.forEach((drop) => {
drop.classList.add("hidden");
drop.classList.remove("flex");
document
.querySelector(
`svg[data-${this.prefix}-setting-select="${drop.getAttribute(
`data-${this.prefix}-setting-select-dropdown`,
)}"]`,
)
.classList.remove("rotate-180");
});
}
isSameValue(btnSetting, value) {
const selectCustom = document.querySelector(
`[data-${this.prefix}-setting-select-text="${btnSetting}"]`,
);
const currVal = selectCustom.textContent;
return currVal === value ? true : false;
}
setSelectNewValue(btnSetting, value) {
const selectCustom = document.querySelector(
`[data-${this.prefix}-setting-select="${btnSetting}"]`,
);
selectCustom.querySelector(
`[data-${this.prefix}-setting-select-text]`,
).textContent = value;
}
hideDropdown(btnSetting) {
//hide dropdown
const dropdownEl = document.querySelector(
`[data-${this.prefix}-setting-select-dropdown="${btnSetting}"]`,
);
dropdownEl.classList.add("hidden");
dropdownEl.classList.remove("flex");
//svg effect
const dropdownChevron = document.querySelector(
`svg[data-${this.prefix}-setting-select="${btnSetting}"]`,
);
dropdownChevron.classList.remove("rotate-180");
}
changeDropBtnStyle(btnSetting, selectedBtn) {
const dropdownEl = document.querySelector(
`[data-${this.prefix}-setting-select-dropdown="${btnSetting}"]`,
);
//reset dropdown btns
const btnEls = dropdownEl.querySelectorAll("button");
btnEls.forEach((btn) => {
btn.classList.remove("dark:bg-primary", "bg-primary", "text-gray-300");
btn.classList.add("bg-white", "dark:bg-slate-700", "text-gray-700");
});
//highlight clicked btn
selectedBtn.classList.remove(
"bg-white",
"dark:bg-slate-700",
"text-gray-700",
);
selectedBtn.classList.add("dark:bg-primary", "bg-primary", "text-gray-300");
}
toggleSelectBtn(e) {
const attribute = e.target
.closest("button")
.getAttribute(`data-${this.prefix}-setting-select`);
//toggle dropdown
const dropdownEl = document.querySelector(
`[data-${this.prefix}-setting-select-dropdown="${attribute}"]`,
);
const dropdownChevron = document.querySelector(
`svg[data-${this.prefix}-setting-select="${attribute}"]`,
);
dropdownEl.classList.toggle("hidden");
dropdownEl.classList.toggle("flex");
dropdownChevron.classList.toggle("rotate-180");
}
//hide date filter on local
hideFilterOnLocal(type) {
if (type === "local") {
this.hideInp(`input#from-date`);
this.hideInp(`input#to-date`);
}
if (type !== "local") {
this.showInp(`input#from-date`);
this.showInp(`input#to-date`);
}
}
showInp(selector) {
document.querySelector(selector).closest("div").classList.add("flex");
document.querySelector(selector).closest("div").classList.remove("hidden");
}
hideInp(selector) {
document.querySelector(selector).closest("div").classList.add("hidden");
document.querySelector(selector).closest("div").classList.remove("flex");
}
}
import { Filter, Dropdown } from "./utils/dashboard.js";
class Upload {
constructor() {
@ -445,26 +278,35 @@ const setDropdown = new Dropdown("plugins");
const setUpload = new Upload();
const setModal = new Modal("plugins");
const filterContainer = document.querySelector("[data-plugins-list-container]");
if(filterContainer) {
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",
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",
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);
}
new Filter(
"plugins",
[keywordFilter, typeFilter],
filterContainer,
noMatchEl,
);
}

276
src/ui/static/js/reports.js
View file

@ -1,231 +1,77 @@
import {
Filter
} from "./utils/dashboard.js";
import { Filter, Dropdown } from "./utils/dashboard.js";
class Dropdown {
constructor(prefix = "reports") {
this.prefix = prefix;
this.container = document.querySelector("main");
this.lastDrop = "";
this.initDropdown();
}
initDropdown() {
this.container.addEventListener("click", (e) => {
//SELECT BTN LOGIC
try {
if (
e.target
.closest("button")
.hasAttribute(`data-${this.prefix}-setting-select`) &&
!e.target.closest("button").hasAttribute(`disabled`)
) {
const btnName = e.target
.closest("button")
.getAttribute(`data-${this.prefix}-setting-select`);
if (this.lastDrop !== btnName) {
this.lastDrop = btnName;
this.closeAllDrop();
}
this.toggleSelectBtn(e);
}
} catch (err) {}
//SELECT DROPDOWN BTN LOGIC
try {
if (
e.target
.closest("button")
.hasAttribute(`data-${this.prefix}-setting-select-dropdown-btn`)
) {
const btn = e.target.closest("button");
const btnValue = btn.getAttribute("value");
const btnSetting = btn.getAttribute(
`data-${this.prefix}-setting-select-dropdown-btn`
);
//stop if same value to avoid new fetching
const isSameVal = this.isSameValue(btnSetting, btnValue);
if (isSameVal) return this.hideDropdown(btnSetting);
//else, add new value to custom
this.setSelectNewValue(btnSetting, btnValue);
//close dropdown and change style
this.hideDropdown(btnSetting);
if (
!e.target.closest("button").hasAttribute(`data-${this.prefix}-file`)
) {
this.changeDropBtnStyle(btnSetting, btn);
}
//show / hide filter
if (btnSetting === "instances") {
this.hideFilterOnLocal(btn.getAttribute("data-_type"));
}
}
} catch (err) {}
});
}
closeAllDrop() {
const drops = document.querySelectorAll(
`[data-${this.prefix}-setting-select-dropdown]`
);
drops.forEach((drop) => {
drop.classList.add("hidden");
drop.classList.remove("flex");
document
.querySelector(
`svg[data-${this.prefix}-setting-select="${drop.getAttribute(
`data-${this.prefix}-setting-select-dropdown`
)}"]`
)
.classList.remove("rotate-180");
});
}
isSameValue(btnSetting, value) {
const selectCustom = document.querySelector(
`[data-${this.prefix}-setting-select-text="${btnSetting}"]`
);
const currVal = selectCustom.textContent;
return currVal === value ? true : false;
}
setSelectNewValue(btnSetting, value) {
const selectCustom = document.querySelector(
`[data-${this.prefix}-setting-select="${btnSetting}"]`
);
selectCustom.querySelector(
`[data-${this.prefix}-setting-select-text]`
).textContent = value;
}
hideDropdown(btnSetting) {
//hide dropdown
const dropdownEl = document.querySelector(
`[data-${this.prefix}-setting-select-dropdown="${btnSetting}"]`
);
dropdownEl.classList.add("hidden");
dropdownEl.classList.remove("flex");
//svg effect
const dropdownChevron = document.querySelector(
`svg[data-${this.prefix}-setting-select="${btnSetting}"]`
);
dropdownChevron.classList.remove("rotate-180");
}
changeDropBtnStyle(btnSetting, selectedBtn) {
const dropdownEl = document.querySelector(
`[data-${this.prefix}-setting-select-dropdown="${btnSetting}"]`
);
//reset dropdown btns
const btnEls = dropdownEl.querySelectorAll("button");
btnEls.forEach((btn) => {
btn.classList.remove(
"bg-primary",
"dark:bg-primary",
"text-gray-300",
"text-gray-300"
);
btn.classList.add("bg-white", "dark:bg-slate-700", "text-gray-700");
});
//highlight clicked btn
selectedBtn.classList.remove(
"bg-white",
"dark:bg-slate-700",
"text-gray-700"
);
selectedBtn.classList.add("dark:bg-primary", "bg-primary", "text-gray-300");
}
toggleSelectBtn(e) {
const attribute = e.target
.closest("button")
.getAttribute(`data-${this.prefix}-setting-select`);
//toggle dropdown
const dropdownEl = document.querySelector(
`[data-${this.prefix}-setting-select-dropdown="${attribute}"]`
);
const dropdownChevron = document.querySelector(
`svg[data-${this.prefix}-setting-select="${attribute}"]`
);
dropdownEl.classList.toggle("hidden");
dropdownEl.classList.toggle("flex");
dropdownChevron.classList.toggle("rotate-180");
}
//hide date filter on local
hideFilterOnLocal(type) {
if (type === "local") {
this.hideInp(`input#from-date`);
this.hideInp(`input#to-date`);
}
if (type !== "local") {
this.showInp(`input#from-date`);
this.showInp(`input#to-date`);
}
}
showInp(selector) {
document.querySelector(selector).closest("div").classList.add("flex");
document.querySelector(selector).closest("div").classList.remove("hidden");
}
hideInp(selector) {
document.querySelector(selector).closest("div").classList.add("hidden");
document.querySelector(selector).closest("div").classList.remove("flex");
}
}
const setDropdown = new Dropdown();
const setDropdown = new Dropdown("reports");
const filterContainer = document.querySelector("[data-reports-list-container]");
if(filterContainer) {
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",
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 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",
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 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",
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",
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);
}
new Filter(
"reports",
[keywordFilter, countryFilter, methodFilter, statusFilter, reasonFilter],
filterContainer,
noMatchEl,
);
}

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

@ -8,9 +8,7 @@ import {
SettingsAdvanced,
} from "./utils/settings.js";
import {
Filter
} from "./utils/dashboard.js";
import { Filter, Dropdown } from "./utils/dashboard.js";
class SettingsService {
constructor() {
@ -377,184 +375,7 @@ class ServiceModal {
}
}
class Dropdown {
constructor(prefix = "services") {
this.prefix = prefix;
this.container = document.querySelector("main");
this.lastDrop = "";
this.initDropdown();
}
initDropdown() {
this.container.addEventListener("click", (e) => {
//SELECT BTN LOGIC
try {
if (
e.target
.closest("button")
.hasAttribute(`data-${this.prefix}-setting-select`) &&
!e.target.closest("button").hasAttribute(`disabled`)
) {
const btnName = e.target
.closest("button")
.getAttribute(`data-${this.prefix}-setting-select`);
if (this.lastDrop !== btnName) {
this.lastDrop = btnName;
this.closeAllDrop();
}
this.toggleSelectBtn(e);
}
} catch (err) {}
//SELECT DROPDOWN BTN LOGIC
try {
if (
e.target
.closest("button")
.hasAttribute(`data-${this.prefix}-setting-select-dropdown-btn`)
) {
const btn = e.target.closest("button");
const btnValue = btn.getAttribute("value");
const btnSetting = btn.getAttribute(
`data-${this.prefix}-setting-select-dropdown-btn`,
);
//stop if same value to avoid new fetching
const isSameVal = this.isSameValue(btnSetting, btnValue);
if (isSameVal) return this.hideDropdown(btnSetting);
//else, add new value to custom
this.setSelectNewValue(btnSetting, btnValue);
//close dropdown and change style
this.hideDropdown(btnSetting);
if (
!e.target.closest("button").hasAttribute(`data-${this.prefix}-file`)
) {
this.changeDropBtnStyle(btnSetting, btn);
}
//show / hide filter
if (btnSetting === "instances") {
this.hideFilterOnLocal(btn.getAttribute("data-_type"));
}
}
} catch (err) {}
});
}
closeAllDrop() {
const drops = document.querySelectorAll(
`[data-${this.prefix}-setting-select-dropdown]`,
);
drops.forEach((drop) => {
drop.classList.add("hidden");
drop.classList.remove("flex");
document
.querySelector(
`svg[data-${this.prefix}-setting-select="${drop.getAttribute(
`data-${this.prefix}-setting-select-dropdown`,
)}"]`,
)
.classList.remove("rotate-180");
});
}
isSameValue(btnSetting, value) {
const selectCustom = document.querySelector(
`[data-${this.prefix}-setting-select-text="${btnSetting}"]`,
);
const currVal = selectCustom.textContent;
return currVal === value ? true : false;
}
setSelectNewValue(btnSetting, value) {
const selectCustom = document.querySelector(
`[data-${this.prefix}-setting-select="${btnSetting}"]`,
);
selectCustom.querySelector(
`[data-${this.prefix}-setting-select-text]`,
).textContent = value;
}
hideDropdown(btnSetting) {
//hide dropdown
const dropdownEl = document.querySelector(
`[data-${this.prefix}-setting-select-dropdown="${btnSetting}"]`,
);
dropdownEl.classList.add("hidden");
dropdownEl.classList.remove("flex");
//svg effect
const dropdownChevron = document.querySelector(
`svg[data-${this.prefix}-setting-select="${btnSetting}"]`,
);
dropdownChevron.classList.remove("rotate-180");
}
changeDropBtnStyle(btnSetting, selectedBtn) {
const dropdownEl = document.querySelector(
`[data-${this.prefix}-setting-select-dropdown="${btnSetting}"]`,
);
//reset dropdown btns
const btnEls = dropdownEl.querySelectorAll("button");
btnEls.forEach((btn) => {
btn.classList.remove(
"bg-primary",
"dark:bg-primary",
"text-gray-300",
"text-gray-300",
);
btn.classList.add("bg-white", "dark:bg-slate-700", "text-gray-700");
});
//highlight clicked btn
selectedBtn.classList.remove(
"bg-white",
"dark:bg-slate-700",
"text-gray-700",
);
selectedBtn.classList.add("dark:bg-primary", "bg-primary", "text-gray-300");
}
toggleSelectBtn(e) {
const attribute = e.target
.closest("button")
.getAttribute(`data-${this.prefix}-setting-select`);
//toggle dropdown
const dropdownEl = document.querySelector(
`[data-${this.prefix}-setting-select-dropdown="${attribute}"]`,
);
const dropdownChevron = document.querySelector(
`svg[data-${this.prefix}-setting-select="${attribute}"]`,
);
dropdownEl.classList.toggle("hidden");
dropdownEl.classList.toggle("flex");
dropdownChevron.classList.toggle("rotate-180");
}
//hide date filter on local
hideFilterOnLocal(type) {
if (type === "local") {
this.hideInp(`input#from-date`);
this.hideInp(`input#to-date`);
}
if (type !== "local") {
this.showInp(`input#from-date`);
this.showInp(`input#to-date`);
}
}
showInp(selector) {
document.querySelector(selector).closest("div").classList.add("flex");
document.querySelector(selector).closest("div").classList.remove("hidden");
}
hideInp(selector) {
document.querySelector(selector).closest("div").classList.add("hidden");
document.querySelector(selector).closest("div").classList.remove("flex");
}
}
const setDropdown = new Dropdown();
const setDropdown = new Dropdown("services");
const setTabsSelect = new TabsSelect(
document.querySelector("[data-services-tabs-select]"),
document.querySelector("[data-advanced][data-services-modal-form]"),
@ -596,32 +417,47 @@ const checkServiceModalSelect = new CheckNoMatchFilter(
);
const filterContainer = document.querySelector(`[data-services-filter]`);
if(filterContainer) {
if (filterContainer) {
const noMatchEl = document.querySelector("[data-services-nomatch-card]");
const filterEls = document.querySelectorAll(`[data-services-card]`);
const keywordFilter = {
"handler": document.querySelector("input#service-name-keyword"),
"handlerType" : "input",
"value" : document.querySelector("input#service-name-keyword").value,
"filterEls": filterEls,
"filterAtt" : "data-services-name",
"filterType" : "keyword",
handler: document.querySelector("input#service-name-keyword"),
handlerType: "input",
value: document.querySelector("input#service-name-keyword").value,
filterEls: filterEls,
filterAtt: "data-services-name",
filterType: "keyword",
};
const methodFilter = {
"handler": document.querySelector("[data-services-setting-select-dropdown='method']"),
"handlerType" : "select",
"value" : document.querySelector("[data-services-setting-select-text='method']").textContent.trim().toLowerCase(),
"filterEls": filterEls,
"filterAtt" : "data-services-method",
"filterType" : "match",
handler: document.querySelector(
"[data-services-setting-select-dropdown='method']",
),
handlerType: "select",
value: document
.querySelector("[data-services-setting-select-text='method']")
.textContent.trim()
.toLowerCase(),
filterEls: filterEls,
filterAtt: "data-services-method",
filterType: "match",
};
const stateFilter = {
"handler": document.querySelector("[data-services-setting-select-dropdown='state']"),
"handlerType" : "select",
"value" : document.querySelector("[data-services-setting-select-text='state']").textContent.trim().toLowerCase(),
"filterEls": filterEls,
"filterAtt" : "data-services-state",
"filterType" : "match",
handler: document.querySelector(
"[data-services-setting-select-dropdown='state']",
),
handlerType: "select",
value: document
.querySelector("[data-services-setting-select-text='state']")
.textContent.trim()
.toLowerCase(),
filterEls: filterEls,
filterAtt: "data-services-state",
filterType: "match",
};
new Filter("services", [keywordFilter, methodFilter, stateFilter], null, noMatchEl);
}
new Filter(
"services",
[keywordFilter, methodFilter, stateFilter],
null,
noMatchEl,
);
}

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

@ -9,264 +9,405 @@
// noMatchEl : if exists, will be displayed when no match is found
// containerEl : container of the filter elements, case noMatchEl exists, it will be hidden when no match is found
class Filter {
constructor(prefix, filters, containerEl = null, noMatchEl = null) {
constructor(prefix, filters, containerEl = null, noMatchEl = null) {
this.prefix = prefix;
this.filters = filters;
this.containerEl = containerEl;
this.noMatchEl = noMatchEl;
this.init();
}
}
init() {
init() {
this.filters.forEach((filter) => {
// Get handler and handler type
const handlerType = filter.handlerType;
const handler = filter.handler;
// Set handler base on handler type
if(handlerType === "select") {
this.setSelectHandler(handler);
}
if(handlerType === "input") {
this.setInputHandler(handler);
}
if(handlerType === "checkbox") {
this.setCheckboxHandler(handler);
}
// Get handler and handler type
const handlerType = filter.handlerType;
const handler = filter.handler;
// Set handler base on handler type
if (handlerType === "select") {
this.setSelectHandler(handler);
}
if (handlerType === "input") {
this.setInputHandler(handler);
}
if (handlerType === "checkbox") {
this.setCheckboxHandler(handler);
}
});
}
}
setSelectHandler(handler) {
setSelectHandler(handler) {
handler.addEventListener("click", (e) => {
try {
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();
} catch(err) {}
try {
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();
} catch (err) {}
});
}
}
setInputHandler(handler) {
setInputHandler(handler) {
handler.addEventListener("input", (e) => {
try {
const value = handler.value;
this.updateValue(handler, value);
this.filter();
} catch(err) {}
try {
const value = handler.value;
this.updateValue(handler, value);
this.filter();
} catch (err) {}
});
}
}
setCheckboxHandler(handler) {
setCheckboxHandler(handler) {
handler.addEventListener("change", (e) => {
try {
const value = handler.checked;
this.updateValue(handler, value);
this.filter();
} catch(err) {}
try {
const value = handler.checked;
this.updateValue(handler, value);
this.filter();
} catch (err) {}
});
}
}
resetFilter() {
resetFilter() {
this.filters.forEach((filter) => {
const filterEls = filter.filterEls;
filterEls.forEach((el) => {
el.classList.remove("hidden");
});
const filterEls = filter.filterEls;
filterEls.forEach((el) => {
el.classList.remove("hidden");
});
});
if(this.noMatchEl) this.noMatchEl.classList.add("hidden");
if(this.containerEl)this.containerEl.classList.remove("hidden");
}
if (this.noMatchEl) this.noMatchEl.classList.add("hidden");
if (this.containerEl) this.containerEl.classList.remove("hidden");
}
filter() {
filter() {
// Start by resetting the filter
this.resetFilter();
// Then apply all filters
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);
}
// match filter means that el filter value must be equal to the filter value
if(filterType === "match") {
this.filterMatch(value, filterEls, filterAtt);
}
// bool filter means that el filter value must be equal to bool value
if(filterType === "bool") {
this.filterBool(value, filterEls, filterAtt);
}
// lower than filter means that el filter value must be lower than the filter value
if(filterType === "lowerThan") {
this.filterLowerThan(value, filterEls, filterAtt);
}
// higher than filter means that el filter value must be higher than the filter value
if(filterType === "higherThan") {
this.filterHigherThan(value, filterEls, filterAtt);
}
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);
}
// match filter means that el filter value must be equal to the filter value
if (filterType === "match") {
this.filterMatch(value, filterEls, filterAtt);
}
// bool filter means that el filter value must be equal to bool value
if (filterType === "bool") {
this.filterBool(value, filterEls, filterAtt);
}
// lower than filter means that el filter value must be lower than the filter value
if (filterType === "lowerThan") {
this.filterLowerThan(value, filterEls, filterAtt);
}
// higher than filter means that el filter value must be higher than the filter value
if (filterType === "higherThan") {
this.filterHigherThan(value, filterEls, filterAtt);
}
});
// If no match is found, hide the container and display the no match element
if(!this.isAtLeastOneMatch()) {
console.log("run")
if(this.containerEl) this.containerEl.classList.add("hidden");
if(this.noMatchEl) this.noMatchEl.classList.remove("hidden");
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) {
filterKeyword(value, filterEls, filterAtt) {
const keyword = value.trim().toLowerCase();
if (!keyword) return;
for (let i = 0; i < filterEls.length; i++) {
const el = filterEls[i];
const elValue = this.getFilterElValue(el, filterAtt);
if (!elValue.includes(keyword)) {
const el = filterEls[i];
const elValue = this.getFilterElValue(el, filterAtt);
if (!elValue.includes(keyword)) {
el.classList.add("hidden");
continue;
}
}
}
return;
}
}
filterMatch(value, filterEls, filterAtt) {
if(!value || value === "all") return;
filterMatch(value, filterEls, filterAtt) {
if (!value || value === "all") return;
for (let i = 0; i < filterEls.length; i++) {
const el = filterEls[i];
const elValue = this.getFilterElValue(el, filterAtt);
if (elValue !== value) {
const el = filterEls[i];
const elValue = this.getFilterElValue(el, filterAtt);
if (elValue !== value) {
el.classList.add("hidden");
continue;
}
}
}
return;
}
}
filterBool(value, filterEls, filterAtt) {
console.log(value, filterEls, filterAtt)
filterBool(value, filterEls, filterAtt) {
console.log(value, filterEls, filterAtt);
// Check if value is undefined or null
if(value === undefined || value === null || value === "all") 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 isValueElTruthy = truthyValues.includes(elValue);
const isValueTruthy = truthyValues.includes(value);
console.log(value, isValueTruthy)
if(isValueElTruthy === isValueTruthy) {
const el = filterEls[i];
const elValue = this.getFilterElValue(el, filterAtt);
const truthyValues = ["yes", "true", "1", true];
const isValueElTruthy = truthyValues.includes(elValue);
const isValueTruthy = truthyValues.includes(value);
console.log(value, isValueTruthy);
if (isValueElTruthy === isValueTruthy) {
continue;
}
el.classList.add("hidden");
}
el.classList.add("hidden");
return;
}
filterLowerThan(value, filterEls, filterAtt) {
// Check if value is undefined or null
if (!value || value === "all") return;
for (let i = 0; i < filterEls.length; i++) {
const el = filterEls[i];
const elValue = this.getFilterElValue(el, filterAtt);
// check if value is not a number
if (isNaN(elValue)) {
el.classList.add("hidden");
continue;
}
// check if int value is lower than the filter value
if (parseInt(elValue) >= parseInt(value)) {
el.classList.add("hidden");
continue;
}
}
return;
}
return ;
}
filterHigherThan(value, filterEls, filterAtt) {
// Check if value is undefined or null
if (!value || value === "all") return;
filterLowerThan(value, filterEls, filterAtt) {
// Check if value is undefined or null
if(!value || value === 'all') return;
for (let i = 0; i < filterEls.length; i++) {
const el = filterEls[i];
const elValue = this.getFilterElValue(el, filterAtt);
for (let i = 0; i < filterEls.length; i++) {
const el = filterEls[i];
const elValue = this.getFilterElValue(el, filterAtt);
// check if value is not a number
if(isNaN(elValue)) {
el.classList.add("hidden");
continue;
// check if value is not a number
if (isNaN(elValue)) {
el.classList.add("hidden");
continue;
}
// check if int value is lower than the filter value
if (parseInt(elValue) <= parseInt(value)) {
el.classList.add("hidden");
continue;
}
}
return;
}
isAtLeastOneMatch() {
// loop on each filterEls and check if at least one is not hidden
let isOneMatch = false;
for (let i = 0; i < this.filters.length; i++) {
const filter = this.filters[i];
const filterEls = filter.filterEls;
filterEls.forEach((el) => {
if (!el.classList.contains("hidden")) {
isOneMatch = true;
return;
}
// check if int value is lower than the filter value
if(parseInt(elValue) >= parseInt(value)) {
el.classList.add("hidden");
continue;
}
}
return;
});
if (isOneMatch) break;
}
filterHigherThan(value, filterEls, filterAtt) {
// Check if value is undefined or null
if(!value || value === 'all') return;
for (let i = 0; i < filterEls.length; i++) {
const el = filterEls[i];
const elValue = this.getFilterElValue(el, filterAtt);
// check if value is not a number
if(isNaN(elValue)) {
el.classList.add("hidden");
continue;
}
return isOneMatch;
}
// check if int value is lower than the filter value
if(parseInt(elValue) <= parseInt(value)) {
el.classList.add("hidden");
continue;
}
updateValue(handler, value) {
// find on list of dict the matching handler and update the value
const index = this.filters.findIndex(
(filter) => filter.handler === handler,
);
this.filters[index].value = value;
}
}
return;
}
isAtLeastOneMatch() {
// loop on each filterEls and check if at least one is not hidden
let isOneMatch = false;
for(let i = 0; i < this.filters.length; i++) {
const filter = this.filters[i];
const filterEls = filter.filterEls;
filterEls.forEach((el) => {
if(!el.classList.contains("hidden")) {
isOneMatch = true;
return;
}
});
if(isOneMatch) break;
}
return isOneMatch;
}
updateValue(handler, value) {
// find on list of dict the matching handler and update the value
const index = this.filters.findIndex((filter) => filter.handler === handler);
this.filters[index].value = value;
}
getFilterData(filter) {
return [filter.filterType, filter.value.trim().toLowerCase(), filter.filterEls, filter.filterAtt];
}
getFilterElValue(el, filterAtt) {
return filterAtt === "textContent" ? el.textContent.trim().toLowerCase() : el.getAttribute(filterAtt).trim().toLowerCase();
}
getFilterData(filter) {
return [
filter.filterType,
filter.value.trim().toLowerCase(),
filter.filterEls,
filter.filterAtt,
];
}
getFilterElValue(el, filterAtt) {
return filterAtt === "textContent"
? el.textContent.trim().toLowerCase()
: el.getAttribute(filterAtt).trim().toLowerCase();
}
}
class Dropdown {
constructor()
{
this.init();
}
constructor(prefix) {
this.prefix = prefix;
this.container = document.querySelector("main");
this.lastDrop = "";
this.initDropdown();
}
init(){
initDropdown() {
this.container.addEventListener("click", (e) => {
//SELECT BTN LOGIC
try {
if (
e.target
.closest("button")
.hasAttribute(`data-${this.prefix}-setting-select`) &&
!e.target.closest("button").hasAttribute(`disabled`)
) {
const btnName = e.target
.closest("button")
.getAttribute(`data-${this.prefix}-setting-select`);
if (this.lastDrop !== btnName) {
this.lastDrop = btnName;
this.closeAllDrop();
}
}
this.toggleSelectBtn(e);
}
} catch (err) {}
//SELECT DROPDOWN BTN LOGIC
try {
if (
e.target
.closest("button")
.hasAttribute(`data-${this.prefix}-setting-select-dropdown-btn`)
) {
const btn = e.target.closest("button");
const btnValue = btn.getAttribute("value");
const btnSetting = btn.getAttribute(
`data-${this.prefix}-setting-select-dropdown-btn`,
);
//stop if same value to avoid new fetching
const isSameVal = this.isSameValue(btnSetting, btnValue);
if (isSameVal) return this.hideDropdown(btnSetting);
//else, add new value to custom
this.setSelectNewValue(btnSetting, btnValue);
//close dropdown and change style
this.hideDropdown(btnSetting);
if (
!e.target.closest("button").hasAttribute(`data-${this.prefix}-file`)
) {
this.changeDropBtnStyle(btnSetting, btn);
}
}
} catch (err) {}
});
}
closeAllDrop() {
const drops = document.querySelectorAll(
`[data-${this.prefix}-setting-select-dropdown]`,
);
drops.forEach((drop) => {
drop.classList.add("hidden");
drop.classList.remove("flex");
document
.querySelector(
`svg[data-${this.prefix}-setting-select="${drop.getAttribute(
`data-${this.prefix}-setting-select-dropdown`,
)}"]`,
)
.classList.remove("rotate-180");
});
}
isSameValue(btnSetting, value) {
const selectCustom = document.querySelector(
`[data-${this.prefix}-setting-select-text="${btnSetting}"]`,
);
const currVal = selectCustom.textContent;
return currVal === value ? true : false;
}
setSelectNewValue(btnSetting, value) {
const selectCustom = document.querySelector(
`[data-${this.prefix}-setting-select="${btnSetting}"]`,
);
selectCustom.querySelector(
`[data-${this.prefix}-setting-select-text]`,
).textContent = value;
}
hideDropdown(btnSetting) {
//hide dropdown
const dropdownEl = document.querySelector(
`[data-${this.prefix}-setting-select-dropdown="${btnSetting}"]`,
);
dropdownEl.classList.add("hidden");
dropdownEl.classList.remove("flex");
//svg effect
const dropdownChevron = document.querySelector(
`svg[data-${this.prefix}-setting-select="${btnSetting}"]`,
);
dropdownChevron.classList.remove("rotate-180");
}
changeDropBtnStyle(btnSetting, selectedBtn) {
const dropdownEl = document.querySelector(
`[data-${this.prefix}-setting-select-dropdown="${btnSetting}"]`,
);
//reset dropdown btns
const btnEls = dropdownEl.querySelectorAll("button");
btnEls.forEach((btn) => {
btn.classList.remove(
"bg-primary",
"dark:bg-primary",
"text-gray-300",
"text-gray-300",
);
btn.classList.add("bg-white", "dark:bg-slate-700", "text-gray-700");
});
//highlight clicked btn
selectedBtn.classList.remove(
"bg-white",
"dark:bg-slate-700",
"text-gray-700",
);
selectedBtn.classList.add("dark:bg-primary", "bg-primary", "text-gray-300");
}
toggleSelectBtn(e) {
const attribute = e.target
.closest("button")
.getAttribute(`data-${this.prefix}-setting-select`);
//toggle dropdown
const dropdownEl = document.querySelector(
`[data-${this.prefix}-setting-select-dropdown="${attribute}"]`,
);
const dropdownChevron = document.querySelector(
`svg[data-${this.prefix}-setting-select="${attribute}"]`,
);
dropdownEl.classList.toggle("hidden");
dropdownEl.classList.toggle("flex");
dropdownChevron.classList.toggle("rotate-180");
}
}
export { Filter, Dropdown };
export { Filter, Dropdown };

164
src/ui/static/js/utils/settings.js
View file

@ -13,7 +13,7 @@ class Popover {
this.hidePopover(this.relateBtn);
} catch (e) {}
},
true
true,
);
window.addEventListener("pointerover", (e) => {
@ -48,7 +48,7 @@ class Popover {
const popoverName = btn.getAttribute("data-popover-btn");
//toggle curr popover
const popover = btn.parentElement.querySelector(
`[data-popover-content=${popoverName}]`
`[data-popover-content=${popoverName}]`,
);
popover.classList.add("transition-all", "delay-200", "opacity-0");
@ -70,7 +70,7 @@ class Popover {
const popoverName = btn.getAttribute("data-popover-btn");
//toggle curr popover
const popover = btn.parentElement.querySelector(
`[data-popover-content=${popoverName}]`
`[data-popover-content=${popoverName}]`,
);
popover.classList.add("hidden");
popover.classList.remove("transition-all", "delay-200");
@ -127,7 +127,7 @@ class TabsSelect {
window.history.replaceState(
null,
"",
`${window.location.pathname}#${tabAtt}`
`${window.location.pathname}#${tabAtt}`,
);
}
}
@ -153,7 +153,7 @@ class TabsSelect {
const fragment = window.location.hash.substring(1);
if (fragment) {
const tab = this.tabContainer.querySelector(
`button[data-tab-select-handler='${fragment}']`
`button[data-tab-select-handler='${fragment}']`,
);
tab.click();
// Scroll to the top of the page (with a delay to ensure the tab is clicked first)
@ -167,7 +167,7 @@ class TabsSelect {
resetTabsStyle() {
const tabsEl = this.tabContainer.querySelectorAll(
"button[data-tab-select-handler]"
"button[data-tab-select-handler]",
);
tabsEl.forEach((tab) => {
tab.classList.remove("active");
@ -176,7 +176,7 @@ class TabsSelect {
highlightClicked(tabAtt) {
const tabMobile = this.tabContainer.querySelector(
`button[data-tab-select-handler='${tabAtt}']`
`button[data-tab-select-handler='${tabAtt}']`,
);
tabMobile.classList.add("active");
}
@ -191,14 +191,14 @@ class TabsSelect {
showSettingClicked(tabAtt) {
const plugin = this.contentContainer.querySelector(
`[data-plugin-item='${tabAtt}']`
`[data-plugin-item='${tabAtt}']`,
);
plugin.classList.remove("hidden");
}
setDropBtnText(tabAtt, text) {
const dropBtn = this.tabContainer.querySelector(
"[data-tab-select-dropdown-btn]"
"[data-tab-select-dropdown-btn]",
);
dropBtn.setAttribute("data-tab-id", tabAtt);
dropBtn.querySelector("span").textContent = text;
@ -206,7 +206,7 @@ class TabsSelect {
closeDropdown() {
const dropdown = this.tabContainer.querySelector(
"[data-tab-select-dropdown]"
"[data-tab-select-dropdown]",
);
dropdown.classList.add("hidden");
dropdown.classList.remove("flex");
@ -216,7 +216,7 @@ class TabsSelect {
toggleDropdown() {
const dropdown = this.tabContainer.querySelector(
"[data-tab-select-dropdown]"
"[data-tab-select-dropdown]",
);
const combobox = dropdown.querySelector("[data-combobox]");
if (combobox) {
@ -241,7 +241,7 @@ class TabsSelect {
updateTabArrow() {
const dropdown = this.tabContainer.querySelector(
"[data-tab-select-dropdown]"
"[data-tab-select-dropdown]",
);
if (dropdown.classList.contains("hidden")) {
@ -275,24 +275,24 @@ class FilterSettings {
inputID,
tabContainer,
contentContainer,
prefix = "global-config"
prefix = "global-config",
) {
this.input = document.querySelector(`input#${inputID}`);
this.prefix = prefix;
this.contextTxtEl = document.querySelector(
`span[data-${this.prefix}-setting-select-text="context"]`
`span[data-${this.prefix}-setting-select-text="context"]`,
);
this.typeTxtEl = document.querySelector(
`span[data-${this.prefix}-setting-select-text="type"]`
`span[data-${this.prefix}-setting-select-text="type"]`,
);
this.comboboxEl = document.querySelector(
`[data-${this.prefix}-tabs-select] [data-combobox]`
`[data-${this.prefix}-tabs-select] [data-combobox]`,
);
this.isComboCheck = false;
this.tabContainer = tabContainer;
this.contentContainer = contentContainer;
this.tabsEls = this.tabContainer.querySelectorAll(
`[data-tab-select-handler]`
`[data-tab-select-handler]`,
);
this.comboboxEl = this.tabContainer
.querySelector("[data-tab-select-dropdown]")
@ -325,16 +325,16 @@ class FilterSettings {
try {
if (
(e.target.hasAttribute(
`data-${this.prefix}-setting-select-dropdown-btn`
`data-${this.prefix}-setting-select-dropdown-btn`,
) &&
e.target.getAttribute(
`data-${this.prefix}-setting-select-dropdown-btn`
`data-${this.prefix}-setting-select-dropdown-btn`,
) === `context`) ||
(e.target.hasAttribute(
`data-${this.prefix}-setting-select-dropdown-btn`
`data-${this.prefix}-setting-select-dropdown-btn`,
) &&
e.target.getAttribute(
`data-${this.prefix}-setting-select-dropdown-btn`
`data-${this.prefix}-setting-select-dropdown-btn`,
) === `type`)
) {
return this.runFilter();
@ -531,7 +531,7 @@ class FilterSettings {
const multGroups = this.contentContainer
.querySelector(`[data-plugin-item=${tabName}]`)
.querySelectorAll(
`[data-${this.prefix}-settings-multiple^="${multHandlerName}"]`
`[data-${this.prefix}-settings-multiple^="${multHandlerName}"]`,
);
// check for each if all settings are hidden
@ -539,7 +539,7 @@ class FilterSettings {
const multGroup = multGroups[j];
let isAllMultSettingHidden = true;
const settings = multGroup.querySelectorAll(
`[data-setting-container]`
`[data-setting-container]`,
);
for (let k = 0; k < settings.length; k++) {
if (!settings[k].classList.contains("hidden")) {
@ -632,7 +632,7 @@ class FilterSettings {
.querySelector("[data-tab-select-dropdown-btn]")
.setAttribute("data-tab-id", "no-match");
this.tabContainer.querySelector(
"[data-tab-select-dropdown-btn] span"
"[data-tab-select-dropdown-btn] span",
).textContent = "No match";
// we want to close dropdown in case open previously
this.toggleDropdown(true, true, false);
@ -641,7 +641,7 @@ class FilterSettings {
// case at least one match
const currTabBtn = this.tabContainer.querySelector(
`[data-tab-select-handler='${tabNameBeforeFilter}']`
`[data-tab-select-handler='${tabNameBeforeFilter}']`,
);
// case the previous plugin is still visible, set is as active by clicking it again
@ -661,7 +661,7 @@ class FilterSettings {
return;
const hiddenTabsEl = this.tabContainer.querySelectorAll(
`[data-tab-select-handler][class*="!hidden"]`
`[data-tab-select-handler][class*="!hidden"]`,
);
if (hiddenTabsEl.length < this.tabsEls.length - 1)
@ -672,15 +672,15 @@ class FilterSettings {
toggleDropdown(
avoidComboFocus = false,
disableOpen = false,
disableClose = false
disableClose = false,
) {
// avoid this on mobile
if (window.innerWidth < 768) return;
const dropdownEl = this.tabContainer.querySelector(
"[data-tab-select-dropdown]"
"[data-tab-select-dropdown]",
);
const dropdownBtn = this.tabContainer.querySelector(
"[data-tab-select-dropdown-btn]"
"[data-tab-select-dropdown-btn]",
);
if (this.comboboxEl && avoidComboFocus)
this.comboboxEl.setAttribute("data-focus", "false");
@ -736,7 +736,7 @@ class FilterSettings {
const multGroups = this.contentContainer
.querySelector(`[data-plugin-item=${tabName}]`)
.querySelectorAll(
`[data-${this.prefix}-settings-multiple^="${multHandlerName}"]`
`[data-${this.prefix}-settings-multiple^="${multHandlerName}"]`,
);
// check for each if all settings are hidden
for (let j = 0; j < multGroups.length; j++) {
@ -751,7 +751,7 @@ class FilterSettings {
multGroup.classList.remove("hidden");
const settings = multGroup.querySelectorAll(
`[data-setting-container]`
`[data-setting-container]`,
);
for (let k = 0; k < settings.length; k++) {
settings[k].classList.remove("hidden");
@ -768,7 +768,7 @@ class FilterSettings {
.querySelector(`[data-plugin-item="${tabName}"]`)
.querySelector(`[data-plugin-settings]`);
const settings = settingContainer.querySelectorAll(
"[data-setting-container]"
"[data-setting-container]",
);
return settings;
}
@ -790,7 +790,7 @@ class FilterSettings {
)
continue;
const settingsContainer = settingMultipleGroup.querySelectorAll(
`[data-setting-container]`
`[data-setting-container]`,
);
settingsContainer.forEach((setting) => {
@ -859,7 +859,7 @@ class CheckNoMatchFilter {
elsToCheck,
elContainer,
noMatchEl,
classToCheck = "hidden"
classToCheck = "hidden",
) {
this.input = input;
this.type = type;
@ -989,11 +989,11 @@ class Settings {
this.mode = mode;
this.serverNameInps = this.container.querySelectorAll(
'input[name="SERVER_NAME"][data-setting-input]'
'input[name="SERVER_NAME"][data-setting-input]',
);
this.submitBtn = this.container.querySelector(
`button[data-${this.prefix}-modal-submit]`
`button[data-${this.prefix}-modal-submit]`,
);
this.currAction = "";
this.currMethod = "";
@ -1091,7 +1091,7 @@ class Settings {
parentEl = this.container,
attMethodName = "data-default-method",
attValueName = "data-default-value",
avoidMultiple = true
avoidMultiple = true,
) {
// Start with input-like (input, checkbox)
const inps = avoidMultiple
@ -1122,7 +1122,7 @@ class Settings {
"select",
select,
select.getAttribute("name"),
parentEl
parentEl,
)
)
return;
@ -1132,15 +1132,15 @@ class Settings {
//click the custom select dropdown to update select value
select.parentElement
.querySelector(
`button[data-setting-select-dropdown-btn][value='${defaultVal}']`
`button[data-setting-select-dropdown-btn][value='${defaultVal}']`,
)
.click();
//set state to custom visible el
const btnCustom = document.querySelector(
`[data-setting-select=${select.getAttribute(
"data-setting-select-default"
)}]`
"data-setting-select-default",
)}]`,
);
this.setDisabledByMethod(btnCustom, defaultMethod);
@ -1169,7 +1169,7 @@ class Settings {
settings,
setMethodUI,
forceEnabled,
emptyServerName
emptyServerName,
) {
// Get global needed data
this.currAction = action;
@ -1186,7 +1186,7 @@ class Settings {
updateOldNameValue() {
const oldNameInps = this.container.querySelectorAll(
'input[name="OLD_SERVER_NAME"]'
'input[name="OLD_SERVER_NAME"]',
);
oldNameInps.forEach((inp) => {
@ -1198,7 +1198,7 @@ class Settings {
updateOperation() {
// update operation and other hidden inputs for all mode in modal
const operationInps = this.container.querySelectorAll(
'input[name="operation"]'
'input[name="operation"]',
);
operationInps.forEach((inp) => {
inp.setAttribute("value", this.operation);
@ -1270,7 +1270,7 @@ class Settings {
if (inp.tagName === "SELECT") {
inp.parentElement
.querySelector(
`button[data-setting-select-dropdown-btn][value='${value}']`
`button[data-setting-select-dropdown-btn][value='${value}']`,
)
.click();
inp.setAttribute("data-method", method);
@ -1337,7 +1337,7 @@ class SettingsMultiple extends Settings {
const attName = btn.getAttribute(`data-${this.prefix}-multiple-add`);
//get all multiple groups
const multipleEls = this.container.querySelectorAll(
`[data-${this.prefix}-settings-multiple*="${attName}"]`
`[data-${this.prefix}-settings-multiple*="${attName}"]`,
);
//case no schema
if (multipleEls.length <= 0) return;
@ -1349,7 +1349,7 @@ class SettingsMultiple extends Settings {
//and keep the highest num
multipleEls.forEach((container) => {
const ctnrName = container.getAttribute(
`data-${this.prefix}-settings-multiple`
`data-${this.prefix}-settings-multiple`,
);
const [containerSuffix, containerIsNum, containerName] =
this.getSuffixData(ctnrName);
@ -1362,7 +1362,7 @@ class SettingsMultiple extends Settings {
const setNum = +currNum === 0 ? `` : `_${currNum}`;
//the default (schema) group is the last group
const schema = this.container.querySelector(
`[data-${this.prefix}-settings-multiple="${attName}_SCHEMA"]`
`[data-${this.prefix}-settings-multiple="${attName}_SCHEMA"]`,
);
//clone schema to create a group with new num
const schemaClone = schema.cloneNode(true);
@ -1403,12 +1403,12 @@ class SettingsMultiple extends Settings {
// We are not removing it really, just hiding it and update values to default
// By setting default value, group will be send to server and delete (because a setting with default value is useless to keep)
const multContainer = e.target.closest(
`[data-${this.prefix}-settings-multiple]`
`[data-${this.prefix}-settings-multiple]`,
);
multContainer.classList.add("hidden-multiple");
// get setting container
const settings = multContainer.querySelectorAll(
`[data-setting-container]`
`[data-setting-container]`,
);
settings.forEach((setting) => {
// for regular input
@ -1435,7 +1435,7 @@ class SettingsMultiple extends Settings {
// for select
try {
const selects = setting.querySelectorAll(
"button[data-setting-select]"
"button[data-setting-select]",
);
selects.forEach((select) => {
const defaultVal = select.getAttribute("data-default") || "";
@ -1446,8 +1446,8 @@ class SettingsMultiple extends Settings {
defaultVal;
const dropdown = this.container.querySelector(
`[data-setting-select-dropdown="${select.getAttribute(
"data-setting-select"
)}"]`
"data-setting-select",
)}"]`,
);
dropdown.querySelector(`button[value=${defaultVal}]`).click();
});
@ -1472,7 +1472,7 @@ class SettingsMultiple extends Settings {
removePrevMultiples() {
const multiPlugins = this.container.querySelectorAll(
`[data-${this.prefix}-settings-multiple]`
`[data-${this.prefix}-settings-multiple]`,
);
multiPlugins.forEach((multiGrp) => {
if (
@ -1503,11 +1503,11 @@ class SettingsMultiple extends Settings {
setMultipleToDOM(sortMultObj) {
// We want to loop on each schema container
for (const [schemaCtnrName, multGroupBySuffix] of Object.entries(
sortMultObj
sortMultObj,
)) {
//we need to access the DOM schema container
const schemaCtnr = this.container.querySelector(
`[data-${this.prefix}-settings-multiple="${schemaCtnrName}"]`
`[data-${this.prefix}-settings-multiple="${schemaCtnrName}"]`,
);
//now we have to loop on each multiple settings group
for (const [suffix, settings] of Object.entries(multGroupBySuffix)) {
@ -1523,7 +1523,7 @@ class SettingsMultiple extends Settings {
for (const [name, data] of Object.entries(settings)) {
//get setting container of clone container
const settingContainer = schemaCtnrClone.querySelector(
`[data-setting-container="${name}"]`
`[data-setting-container="${name}"]`,
);
}
//send schema clone to DOM and show it
@ -1546,7 +1546,7 @@ class SettingsMultiple extends Settings {
const multiples = {};
const schemaSettings = this.container.querySelectorAll(
`[data-setting-container$="SCHEMA"]`
`[data-setting-container$="SCHEMA"]`,
);
// loop on every schema settings
@ -1573,13 +1573,13 @@ class SettingsMultiple extends Settings {
addOneMultGroup() {
const multAddBtns = this.container.querySelectorAll(
`[data-${this.prefix}-multiple-add]`
`[data-${this.prefix}-multiple-add]`,
);
multAddBtns.forEach((btn) => {
const att = btn.getAttribute(`data-${this.prefix}-multiple-add`);
//check if already one (SCHEMA exclude so length >= 2)
const multGroups = this.container.querySelectorAll(
`[data-${this.prefix}-settings-multiple^="${att}"]`
`[data-${this.prefix}-settings-multiple^="${att}"]`,
);
if (multGroups.length >= 2) return;
@ -1596,7 +1596,7 @@ class SettingsMultiple extends Settings {
hiddenIfNoMultiples() {
//hide multiple btn if no multiple exist on a plugin
const multiples = this.container.querySelectorAll(
`[data-${this.prefix}-settings-multiple]`
`[data-${this.prefix}-settings-multiple]`,
);
multiples.forEach((container) => {
if (container.querySelectorAll(`[data-setting-container]`).length <= 0)
@ -1608,7 +1608,7 @@ class SettingsMultiple extends Settings {
showMultByAtt(att) {
const multContainers = this.container.querySelectorAll(
`[data-${this.prefix}-settings-multiple^=${att}]`
`[data-${this.prefix}-settings-multiple^=${att}]`,
);
multContainers.forEach((container) => {
if (
@ -1622,7 +1622,7 @@ class SettingsMultiple extends Settings {
toggleMultByAtt(att) {
const multContainers = this.container.querySelectorAll(
`[data-${this.prefix}-settings-multiple^=${att}]`
`[data-${this.prefix}-settings-multiple^=${att}]`,
);
multContainers.forEach((container) => {
if (
@ -1657,10 +1657,10 @@ class SettingsMultiple extends Settings {
selects.forEach((select) => {
const method = select.getAttribute("data-default-method");
const name = select.getAttribute(
`data-${this.prefix}-setting-select-default`
`data-${this.prefix}-setting-select-default`,
);
const selDOM = this.container.querySelector(
`button[data-${this.prefix}-setting-select='${name}']`
`button[data-${this.prefix}-setting-select='${name}']`,
);
if (method === "ui" || method === "default") {
selDOM.removeAttribute("disabled", "");
@ -1685,14 +1685,14 @@ class SettingsMultiple extends Settings {
? name.replace(`_${splitName[splitName.length - 1]}`, "").trim()
: name.trim();
const relateSetting = this.container.querySelector(
`[data-setting-container=${nameSuffixLess}_SCHEMA]`
`[data-setting-container=${nameSuffixLess}_SCHEMA]`,
);
if (!relateSetting) continue;
const relateCtnr = relateSetting.closest(
`[data-${this.prefix}-settings-multiple]`
`[data-${this.prefix}-settings-multiple]`,
);
const relateCtnrName = relateCtnr.getAttribute(
`data-${this.prefix}-settings-multiple`
`data-${this.prefix}-settings-multiple`,
);
//then we sort the setting on the right container name by suffixe number
if (!(relateCtnrName in sortMultiples)) {
@ -1713,7 +1713,7 @@ class SettingsMultiple extends Settings {
`data-${this.prefix}-settings-multiple`,
schemaCtnrClone
.getAttribute(`data-${this.prefix}-settings-multiple`)
.replace("_SCHEMA", suffix)
.replace("_SCHEMA", suffix),
);
// Get all elemennts by attribute to update _SCHEMA by suffix
@ -1732,7 +1732,7 @@ class SettingsMultiple extends Settings {
attEls.forEach((attEl) => {
attEl.setAttribute(
att,
attEl.getAttribute(att).replace("_SCHEMA", suffix)
attEl.getAttribute(att).replace("_SCHEMA", suffix),
);
});
});
@ -1819,7 +1819,7 @@ class SettingsEditor extends SettingsMultiple {
addDefaultEditorIfNone() {
// get containers with _SCHEMA
const editorContainers = this.container.querySelectorAll(
"[data-editor-container$='_SCHEMA']"
"[data-editor-container$='_SCHEMA']",
);
editorContainers.forEach((editorContainer) => {
// Check if others editor exists with same base name
@ -1827,7 +1827,7 @@ class SettingsEditor extends SettingsMultiple {
.getAttribute("data-editor-container")
.replace("_SCHEMA", "");
const otherEditors = this.container.querySelectorAll(
`[data-editor-container*='${editorName}']`
`[data-editor-container*='${editorName}']`,
);
if (otherEditors.length > 1) return;
// Add default editor
@ -1845,7 +1845,7 @@ class SettingsEditor extends SettingsMultiple {
// reset previous editors
this.editorEls.forEach((editor) => {
const editorContainer = editor.container.closest(
"[data-editor-container]"
"[data-editor-container]",
);
editorContainer.remove();
editor.destroy();
@ -1854,7 +1854,7 @@ class SettingsEditor extends SettingsMultiple {
this.editorEls = [];
// get only container ending with _SCHEMA
const editorContainers = this.container.querySelectorAll(
"[data-editor-container$='_SCHEMA']"
"[data-editor-container$='_SCHEMA']",
);
const configsSettings = this.getEditorSettings();
// Create instances on the right containers
@ -1875,7 +1875,7 @@ class SettingsEditor extends SettingsMultiple {
editorType,
editorName,
num,
editorValue
editorValue,
);
}
});
@ -1894,11 +1894,11 @@ class SettingsEditor extends SettingsMultiple {
editor.setAttribute("name", `${contName}_${num}`);
}
const filenameInp = containerClone.querySelector(
`input[data-editor-filename]`
`input[data-editor-filename]`,
);
if (filenameInp) filenameInp.value = name;
const hiddenInp = containerClone.querySelector(
`textarea[data-editor-input]`
`textarea[data-editor-input]`,
);
if (hiddenInp) {
hiddenInp.setAttribute("data-config-type", type);
@ -1957,7 +1957,7 @@ class SettingsAdvanced extends SettingsEditor {
settings,
setMethodUI = false,
forceEnabled = false,
emptyServerName = false
emptyServerName = false,
) {
this.updateData(
action,
@ -1966,7 +1966,7 @@ class SettingsAdvanced extends SettingsEditor {
settings,
setMethodUI,
forceEnabled,
emptyServerName
emptyServerName,
);
this.setSettingsAdvanced();
this.resetServerName();
@ -1982,7 +1982,7 @@ class SettingsAdvanced extends SettingsEditor {
checkVisibleInpsValidity() {
try {
const inps = this.container.querySelectorAll(
"[data-plugin-item]:not(.hidden) input[data-setting-input], [data-plugin-item][class*='hidden'] input[data-setting-input]"
"[data-plugin-item]:not(.hidden) input[data-setting-input], [data-plugin-item][class*='hidden'] input[data-setting-input]",
);
// merge input with visible and not visible
@ -2008,7 +2008,7 @@ class SettingsAdvanced extends SettingsEditor {
) {
// Case conflict with another server name
const serverNames = document.querySelectorAll(
"[data-services-service]"
"[data-services-service]",
);
const serverNameValue = inps[i].getAttribute("value");
serverNames.forEach((serverName) => {
@ -2023,7 +2023,7 @@ class SettingsAdvanced extends SettingsEditor {
}
const errMsg = this.container.querySelector(
"[data-services-modal-error-msg]"
"[data-services-modal-error-msg]",
);
if (!isAllValid) {
invalidInp.classList.add("invalid");

4
src/ui/templates/services.html vendored
View file

@ -124,11 +124,11 @@
data-value="{{ service['SERVER_NAME']['method'] }}"></div>
<div class="flex justify-between items-start">
<div class="flex flex-col">
<h5
<h5
class="break-all transition duration-300 ease-in-out text-center sm:text-left mb-1 mr-2 font-bold dark:text-white/90">
{{ service["SERVER_NAME"]['value'] }}
</h5>
<h6
<h6
class="text-left sm:mb-2 font-semibold text-gray-600 dark:text-white/80">
{{ service["SERVER_NAME"]['method'] }}
</h6>