mirror of
https://github.com/bunkerity/bunkerized-nginx
synced 2023-12-13 21:30:18 +01:00
refactoring services modal logic
This commit is contained in:
parent
b105896b28
commit
9f84e02d8e
3 changed files with 106 additions and 109 deletions
|
@ -20,6 +20,7 @@ class ServiceModal {
|
|||
this.inputs = this.modal.querySelectorAll("input[default-value]");
|
||||
this.selects = this.modal.querySelectorAll("select[default-value]");
|
||||
this.lastGroup = "";
|
||||
this.lastAction = "";
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
@ -38,70 +39,59 @@ class ServiceModal {
|
|||
});
|
||||
|
||||
this.container.addEventListener("click", (e) => {
|
||||
//rename button
|
||||
//actions
|
||||
try {
|
||||
if (
|
||||
e.target.closest("button").getAttribute("services-action") ===
|
||||
"rename"
|
||||
) {
|
||||
this.setRenameForm(
|
||||
"rename",
|
||||
e.target.closest("button").getAttribute("services-name")
|
||||
);
|
||||
this.openModal();
|
||||
}
|
||||
} catch (err) {}
|
||||
//delete button
|
||||
try {
|
||||
if (
|
||||
e.target.closest("button").getAttribute("services-action") ===
|
||||
"delete"
|
||||
) {
|
||||
this.setRenameForm(
|
||||
"rename",
|
||||
e.target.closest("button").getAttribute("services-name")
|
||||
);
|
||||
this.openModal();
|
||||
}
|
||||
} catch (err) {}
|
||||
//new button
|
||||
try {
|
||||
if (
|
||||
e.target.closest("button").getAttribute("services-action") === "new"
|
||||
) {
|
||||
this.setNewEditForm("new", "service");
|
||||
this.setDefaultValue();
|
||||
this.openModal();
|
||||
}
|
||||
} catch (err) {}
|
||||
//edit button
|
||||
try {
|
||||
if (
|
||||
e.target.closest("button").getAttribute("services-action") === "edit"
|
||||
) {
|
||||
//no reupdate if same service
|
||||
if (e.target.closest("button").hasAttribute("services-action")) {
|
||||
//do nothing if same btn and service as before
|
||||
const isLastSame = this.isLastServAndAct(e.target);
|
||||
if (isLastSame) return;
|
||||
//else set the good form
|
||||
const action = e.target
|
||||
.closest("button")
|
||||
.getAttribute("services-action");
|
||||
const serviceName = e.target
|
||||
.closest("button")
|
||||
.getAttribute("services-name");
|
||||
|
||||
if (this.lastGroup === serviceName) return this.openModal();
|
||||
//else
|
||||
this.lastGroup = serviceName;
|
||||
this.setNewEditForm("edit", serviceName);
|
||||
//change this to hidden config on service card later
|
||||
const servicesSettings = e.target
|
||||
.closest("[services-service]")
|
||||
.querySelector("[services-settings]")
|
||||
.getAttribute("value");
|
||||
this.setDefaultValue();
|
||||
const obj = JSON.parse(servicesSettings);
|
||||
this.updateModalData(obj);
|
||||
let form;
|
||||
if (action === "edit" || action === "new") form = this.formNewEdit;
|
||||
if (action === "delete") form = this.formDelete;
|
||||
if (action === "rename") form = this.formRename;
|
||||
this.setForm(action, serviceName, form);
|
||||
//reset settings value
|
||||
if (action === "edit" || action === "new") this.setDefaultValue();
|
||||
//get custom settings of service and apply it to modal settings
|
||||
if (action === "edit") {
|
||||
const servicesSettings = e.target
|
||||
.closest("[services-service]")
|
||||
.querySelector("[services-settings]")
|
||||
.getAttribute("value");
|
||||
const obj = JSON.parse(servicesSettings);
|
||||
this.updateModalData(obj);
|
||||
}
|
||||
//open modal when all done
|
||||
this.openModal();
|
||||
}
|
||||
} catch (err) {}
|
||||
});
|
||||
}
|
||||
|
||||
isLastServAndAct(target) {
|
||||
const serviceName = target.closest("button").getAttribute("services-name");
|
||||
const serviceAction = target
|
||||
.closest("button")
|
||||
.getAttribute("services-action");
|
||||
|
||||
if (this.lastGroup === serviceName && this.lastAction === serviceAction) {
|
||||
this.openModal();
|
||||
return true;
|
||||
} else {
|
||||
this.lastGroup = serviceName;
|
||||
this.lastAction = serviceAction;
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
setDefaultValue() {
|
||||
this.inputs.forEach((inpt) => {
|
||||
const defaultVal = inpt.getAttribute("default-value");
|
||||
|
@ -156,86 +146,93 @@ class ServiceModal {
|
|||
}
|
||||
}
|
||||
|
||||
setNewEditForm(action, serviceName) {
|
||||
this.showNewEditForm();
|
||||
setForm(action, serviceName, formEl) {
|
||||
this.modalTitle.textContent = `${action} ${serviceName}`;
|
||||
this.formNewEdit.setAttribute("id", `form-${action}-${serviceName}`);
|
||||
this.formNewEdit
|
||||
formEl.setAttribute("id", `form-${action}-${serviceName}`);
|
||||
formEl
|
||||
.querySelector(`input[name="operation"]`)
|
||||
.setAttribute("value", action);
|
||||
this.formNewEdit
|
||||
.querySelector(`input[name="OLD_SERVER_NAME"]`)
|
||||
.setAttribute("value", serviceName);
|
||||
}
|
||||
|
||||
setRenameForm(action, serviceName) {
|
||||
this.showRenameForm();
|
||||
this.modalTitle.textContent = `${action} ${serviceName}`;
|
||||
this.formRename.setAttribute("id", `form-${action}-${serviceName}`);
|
||||
this.formRename
|
||||
.querySelector(`input[name="OLD_SERVER_NAME"]`)
|
||||
.setAttribute("value", serviceName);
|
||||
this.formRename
|
||||
.querySelector(`input[name="SERVER_NAME"]`)
|
||||
.setAttribute("value", serviceName);
|
||||
}
|
||||
if (action === "edit" || action === "new") {
|
||||
this.showNewEditForm();
|
||||
formEl
|
||||
.querySelector(`input[name="OLD_SERVER_NAME"]`)
|
||||
.setAttribute("value", serviceName);
|
||||
}
|
||||
|
||||
setDeleteForm(action, serviceName) {
|
||||
this.showDeleteForm();
|
||||
this.modalTitle.textContent = `${action} ${serviceName}`;
|
||||
this.formDelete.setAttribute("id", `form-${action}-${serviceName}`);
|
||||
this.formDelete
|
||||
.querySelector(`input[name="SERVER_NAME"]`)
|
||||
.setAttribute("value", serviceName);
|
||||
this.formDelete.querySelector(
|
||||
`[services-modal-text]`
|
||||
).textContent = `Are you sure you want to delete ${serviceName} ?`;
|
||||
if (action === "rename") {
|
||||
this.showRenameForm();
|
||||
formEl
|
||||
.querySelector(`input[name="OLD_SERVER_NAME"]`)
|
||||
.setAttribute("value", serviceName);
|
||||
formEl
|
||||
.querySelector(`input[name="SERVER_NAME"]`)
|
||||
.setAttribute("value", serviceName);
|
||||
}
|
||||
|
||||
if (action === "delete") {
|
||||
this.showDeleteForm();
|
||||
formEl.setAttribute("id", `form-${action}-${serviceName}`);
|
||||
formEl
|
||||
.querySelector(`input[name="SERVER_NAME"]`)
|
||||
.setAttribute("value", serviceName);
|
||||
formEl.querySelector(
|
||||
`[services-modal-text]`
|
||||
).textContent = `Are you sure you want to delete ${serviceName} ?`;
|
||||
}
|
||||
}
|
||||
|
||||
showNewEditForm() {
|
||||
this.modalCard.classList.add("h-[90vh]");
|
||||
this.modalCard.classList.add("w-full");
|
||||
|
||||
this.modalTabs.classList.add("grid");
|
||||
this.modalTabs.classList.remove("hidden");
|
||||
this.modalTabsHeader.classList.add("flex");
|
||||
this.modalTabsHeader.classList.remove("hidden");
|
||||
|
||||
this.cardViewport();
|
||||
this.showTabs();
|
||||
this.hideForms();
|
||||
this.formNewEdit.classList.remove("hidden");
|
||||
this.formDelete.classList.add("hidden");
|
||||
this.formRename.classList.add("hidden");
|
||||
}
|
||||
|
||||
showDeleteForm() {
|
||||
this.modalCard.classList.remove("h-[90vh]");
|
||||
this.modalCard.classList.remove("w-full");
|
||||
|
||||
this.modalTabs.classList.remove("grid");
|
||||
this.modalTabs.classList.add("hidden");
|
||||
|
||||
this.modalTabsHeader.classList.remove("flex");
|
||||
this.modalTabsHeader.classList.add("hidden");
|
||||
|
||||
this.formNewEdit.classList.add("hidden");
|
||||
this.formRename.classList.add("hidden");
|
||||
this.cardNoViewport();
|
||||
this.hideTabs();
|
||||
this.hideForms();
|
||||
|
||||
this.formDelete.classList.remove("hidden");
|
||||
}
|
||||
|
||||
showRenameForm() {
|
||||
this.cardNoViewport();
|
||||
this.hideTabs();
|
||||
this.hideForms();
|
||||
this.formRename.classList.remove("hidden");
|
||||
}
|
||||
|
||||
cardViewport() {
|
||||
this.modalCard.classList.add("h-[90vh]");
|
||||
this.modalCard.classList.add("w-full");
|
||||
}
|
||||
|
||||
cardNoViewport() {
|
||||
this.modalCard.classList.remove("h-[90vh]");
|
||||
this.modalCard.classList.remove("w-full");
|
||||
}
|
||||
|
||||
hideForms() {
|
||||
this.formNewEdit.classList.add("hidden");
|
||||
this.formDelete.classList.add("hidden");
|
||||
this.formRename.classList.add("hidden");
|
||||
}
|
||||
|
||||
hideTabs() {
|
||||
this.modalTabs.classList.remove("grid");
|
||||
this.modalTabs.classList.add("hidden");
|
||||
|
||||
this.modalTabsHeader.classList.remove("flex");
|
||||
this.modalTabsHeader.classList.add("hidden");
|
||||
}
|
||||
|
||||
this.formNewEdit.classList.add("hidden");
|
||||
this.formDelete.classList.add("hidden");
|
||||
|
||||
this.formRename.classList.remove("hidden");
|
||||
showTabs() {
|
||||
this.modalTabs.classList.add("grid");
|
||||
this.modalTabs.classList.remove("hidden");
|
||||
this.modalTabsHeader.classList.add("flex");
|
||||
this.modalTabsHeader.classList.remove("hidden");
|
||||
}
|
||||
|
||||
updateModalData(settings) {
|
||||
|
|
|
@ -3,7 +3,7 @@ config["CONFIG"].get_config() %}
|
|||
|
||||
<div class="p-4 col-span-12 relative flex flex-col min-w-0 break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border"
|
||||
>
|
||||
<div class="flex justify-start items-center gap-x-4 gap-y-2 mb-2">
|
||||
<div {{current_endpoint}}-tabs-header class="flex justify-start items-center gap-x-4 gap-y-2 my-3">
|
||||
<h5 class="transition duration-300 ease-in-out dark:opacity-90 ml-2 font-bold text-md uppercase dark:text-white mb-0">CONFIGS</h5>
|
||||
<!-- search inpt-->
|
||||
<div class="flex relative col-span-12 sm:col-span-6 lg:col-span-4 3xl:col-span-3">
|
||||
|
|
|
@ -28,7 +28,7 @@
|
|||
</div>
|
||||
<div
|
||||
services-tabs-header
|
||||
class="flex justify-start items-center gap-x-4 gap-y-2 mb-2"
|
||||
class="flex justify-start items-center gap-x-4 gap-y-2 my-3"
|
||||
>
|
||||
<h5
|
||||
class="transition duration-300 ease-in-out dark:opacity-90 ml-2 font-bold text-md uppercase dark:text-white mb-0"
|
||||
|
|
Loading…
Reference in a new issue