add rename form
This commit is contained in:
BlasenhauerJ
parent
ff83b342de
commit
b105896b28
|
|
@ -711,6 +711,18 @@ h6 {
|
|||
right: 0px;
|
||||
}
|
||||
|
||||
.right-7 {
|
||||
right: 1.75rem;
|
||||
}
|
||||
|
||||
.top-1\.5 {
|
||||
top: 0.375rem;
|
||||
}
|
||||
|
||||
.top-1 {
|
||||
top: 0.25rem;
|
||||
}
|
||||
|
||||
.left-3 {
|
||||
left: 0.75rem;
|
||||
}
|
||||
|
|
@ -771,30 +783,6 @@ h6 {
|
|||
right: -22.5rem;
|
||||
}
|
||||
|
||||
.right-1 {
|
||||
right: 0.25rem;
|
||||
}
|
||||
|
||||
.top-0\.5 {
|
||||
top: 0.125rem;
|
||||
}
|
||||
|
||||
.right-8 {
|
||||
right: 2rem;
|
||||
}
|
||||
|
||||
.top-1 {
|
||||
top: 0.25rem;
|
||||
}
|
||||
|
||||
.right-7 {
|
||||
right: 1.75rem;
|
||||
}
|
||||
|
||||
.top-1\.5 {
|
||||
top: 0.375rem;
|
||||
}
|
||||
|
||||
.z-100 {
|
||||
z-index: 100;
|
||||
}
|
||||
|
|
@ -1146,6 +1134,10 @@ h6 {
|
|||
height: 3rem;
|
||||
}
|
||||
|
||||
.h-5 {
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
.h-4 {
|
||||
height: 1rem;
|
||||
}
|
||||
|
|
@ -1162,10 +1154,6 @@ h6 {
|
|||
height: 2.5rem;
|
||||
}
|
||||
|
||||
.h-5 {
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
.h-48 {
|
||||
height: 12rem;
|
||||
}
|
||||
|
|
@ -1286,6 +1274,10 @@ h6 {
|
|||
width: 10rem;
|
||||
}
|
||||
|
||||
.w-5 {
|
||||
width: 1.25rem;
|
||||
}
|
||||
|
||||
.w-4 {
|
||||
width: 1rem;
|
||||
}
|
||||
|
|
@ -1310,10 +1302,6 @@ h6 {
|
|||
width: 3rem;
|
||||
}
|
||||
|
||||
.w-5 {
|
||||
width: 1.25rem;
|
||||
}
|
||||
|
||||
.w-3 {
|
||||
width: 0.75rem;
|
||||
}
|
||||
|
|
@ -1346,6 +1334,14 @@ h6 {
|
|||
min-width: 900px;
|
||||
}
|
||||
|
||||
.min-w-\[400px\] {
|
||||
min-width: 400px;
|
||||
}
|
||||
|
||||
.min-w-\[500px\] {
|
||||
min-width: 500px;
|
||||
}
|
||||
|
||||
.max-w-\[300px\] {
|
||||
max-width: 300px;
|
||||
}
|
||||
|
|
@ -1358,10 +1354,6 @@ h6 {
|
|||
max-width: 10rem;
|
||||
}
|
||||
|
||||
.max-w-screen-sm {
|
||||
max-width: 576px;
|
||||
}
|
||||
|
||||
.max-w-\[400px\] {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
|
@ -1378,10 +1370,18 @@ h6 {
|
|||
max-width: 100%;
|
||||
}
|
||||
|
||||
.max-w-screen-sm {
|
||||
max-width: 576px;
|
||||
}
|
||||
|
||||
.max-w-lg {
|
||||
max-width: 32rem;
|
||||
}
|
||||
|
||||
.max-w-\[350px\] {
|
||||
max-width: 350px;
|
||||
}
|
||||
|
||||
.flex-auto {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
|
@ -1551,6 +1551,10 @@ h6 {
|
|||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.flex-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.flex-col {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
|
@ -2813,6 +2817,10 @@ h6 {
|
|||
background-color: rgb(8 85 119 / 0.05);
|
||||
}
|
||||
|
||||
.hover\:bg-blue-500\/80:hover {
|
||||
background-color: rgb(94 114 228 / 0.8);
|
||||
}
|
||||
|
||||
.hover\:bg-gray-50:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(248 249 250 / var(--tw-bg-opacity));
|
||||
|
|
@ -3005,14 +3013,14 @@ h6 {
|
|||
--tw-gradient-to: transparent;
|
||||
}
|
||||
|
||||
.dark .dark\:fill-gray-700 {
|
||||
fill: #495057;
|
||||
}
|
||||
|
||||
.dark .dark\:fill-gray-300 {
|
||||
fill: #d2d6da;
|
||||
}
|
||||
|
||||
.dark .dark\:fill-gray-700 {
|
||||
fill: #495057;
|
||||
}
|
||||
|
||||
.dark .dark\:fill-gray-500 {
|
||||
fill: #adb5bd;
|
||||
}
|
||||
|
|
@ -3042,6 +3050,10 @@ h6 {
|
|||
color: rgb(245 57 57 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.dark .dark\:opacity-80 {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.dark .dark\:opacity-50 {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
|
@ -3050,10 +3062,6 @@ h6 {
|
|||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.dark .dark\:opacity-80 {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.dark .dark\:opacity-60 {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,10 +7,13 @@ class ServiceModal {
|
|||
this.modal = document.querySelector("[services-modal]");
|
||||
this.modalTitle = this.modal.querySelector("[services-modal-title]");
|
||||
this.modalTabs = this.modal.querySelector(["[services-tabs]"]);
|
||||
this.modalTabsHeader = this.modal.querySelector(["[services-tabs-header]"]);
|
||||
|
||||
this.modalCard = this.modal.querySelector("[services-modal-card]");
|
||||
//modal forms
|
||||
this.formNewEdit = this.modal.querySelector("[services-modal-form]");
|
||||
this.formDelete = this.modal.querySelector("[services-modal-form-delete]");
|
||||
this.formRename = this.modal.querySelector("[services-modal-form-rename]");
|
||||
//container
|
||||
this.container = document.querySelector("main");
|
||||
//general inputs
|
||||
|
|
@ -35,14 +38,27 @@ class ServiceModal {
|
|||
});
|
||||
|
||||
this.container.addEventListener("click", (e) => {
|
||||
//rename button
|
||||
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.setDeleteForm(
|
||||
"delete",
|
||||
this.setRenameForm(
|
||||
"rename",
|
||||
e.target.closest("button").getAttribute("services-name")
|
||||
);
|
||||
this.openModal();
|
||||
|
|
@ -152,6 +168,18 @@ class ServiceModal {
|
|||
.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);
|
||||
}
|
||||
|
||||
setDeleteForm(action, serviceName) {
|
||||
this.showDeleteForm();
|
||||
this.modalTitle.textContent = `${action} ${serviceName}`;
|
||||
|
|
@ -170,9 +198,12 @@ class ServiceModal {
|
|||
|
||||
this.modalTabs.classList.add("grid");
|
||||
this.modalTabs.classList.remove("hidden");
|
||||
this.modalTabsHeader.classList.add("flex");
|
||||
this.modalTabsHeader.classList.remove("hidden");
|
||||
|
||||
this.formNewEdit.classList.remove("hidden");
|
||||
this.formDelete.classList.add("hidden");
|
||||
this.formRename.classList.add("hidden");
|
||||
}
|
||||
|
||||
showDeleteForm() {
|
||||
|
|
@ -182,10 +213,31 @@ class ServiceModal {
|
|||
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.formDelete.classList.remove("hidden");
|
||||
}
|
||||
|
||||
showRenameForm() {
|
||||
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.formDelete.classList.add("hidden");
|
||||
|
||||
this.formRename.classList.remove("hidden");
|
||||
}
|
||||
|
||||
updateModalData(settings) {
|
||||
//use this to select inputEl and change value
|
||||
for (const [key, data] of Object.entries(settings)) {
|
||||
|
|
|
|||
|
|
@ -348,7 +348,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip().replace('_', '-') %}
|
|||
{{current_endpoint}}-modal-path-suffix
|
||||
class="mb-0 dark:text-white dark:opacity-50 text-gray-700 opacity-50 text-sm"
|
||||
>
|
||||
dzqd
|
||||
suffix
|
||||
</p>
|
||||
</div>
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
>
|
||||
<div
|
||||
plugins-modal-card
|
||||
class="overflow-y-auto mx-3 ml-2 mr-6 sm:mx-6 lg:mx-8 my-3 px-4 pt-4 pb-8 w-full max-w-[400px] flex flex-col break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border"
|
||||
class="min-w-[500px ]overflow-y-auto mx-3 ml-2 mr-6 sm:mx-6 lg:mx-8 my-3 px-4 pt-4 pb-8 w-full max-w-[400px] flex flex-col break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border"
|
||||
>
|
||||
<div class="w-full flex justify-between mb-2">
|
||||
<p
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
>
|
||||
<div
|
||||
services-modal-card
|
||||
class="overflow-y-auto mx-3 ml-2 mr-6 sm:mx-6 lg:mx-8 my-3 px-4 pt-4 pb-8 w-full h-[90vh] flex flex-col break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border"
|
||||
class="overflow-y-auto mx-3 ml-2 mr-6 sm:mx-6 lg:mx-8 my-3 px-4 pt-4 pb-8 w-full min-w-[500px] h-[90vh] flex flex-col break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border"
|
||||
>
|
||||
<div class="w-full flex justify-between mb-2">
|
||||
<p
|
||||
|
|
@ -26,7 +26,10 @@
|
|||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex justify-start items-center gap-x-4 gap-y-2 mb-2">
|
||||
<div
|
||||
services-tabs-header
|
||||
class="flex justify-start items-center gap-x-4 gap-y-2 mb-2"
|
||||
>
|
||||
<h5
|
||||
class="transition duration-300 ease-in-out dark:opacity-90 ml-2 font-bold text-md uppercase dark:text-white mb-0"
|
||||
>
|
||||
|
|
@ -116,6 +119,48 @@
|
|||
<!-- end action button-->
|
||||
</form>
|
||||
<!-- end delete form-->
|
||||
<!-- rename form-->
|
||||
<form
|
||||
services-modal-form-rename
|
||||
class="w-full h-full flex flex-col justify-between"
|
||||
id="form-rename-server_name"
|
||||
method="POST"
|
||||
>
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
|
||||
<input type="hidden" value="OLD_SERVER_NAME" name="OLD_SERVER_NAME" />
|
||||
<input type="hidden" value="rename" name="operation" />
|
||||
<div
|
||||
class="my-2 flex flex-row justify-center align-middle items-center"
|
||||
{{current_endpoint}}-modal-path
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
name="SERVER_NAME"
|
||||
id="SERVER_NAME"
|
||||
class="dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 sm:ml-1 max-w-[350px] disabled:opacity-75 focus:valid:border-green-500 focus:file:invalid:border-red-500 outline-none focus:border-primary text-sm leading-5.6 ease block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-1.5 py-1 font-normal text-gray-700 transition-all placeholder:text-gray-500"
|
||||
placeholder="path"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<!-- action button -->
|
||||
<div class="w-full justify-center flex mt-10">
|
||||
<button
|
||||
services-modal-close
|
||||
type="button"
|
||||
class="dark:brightness-90 mr-3 inline-block px-6 py-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-red-500 hover:bg-red-500/80 focus:bg-red-500/80 leading-normal text-md ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
class="dark:brightness-90 inline-block px-6 py-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-sky-500 hover:bg-sky-500/80 focus:bg-sky-500/80 leading-normal text-md ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md"
|
||||
>
|
||||
Rename
|
||||
</button>
|
||||
</div>
|
||||
<!-- end action button-->
|
||||
</form>
|
||||
<!-- end rename form-->
|
||||
</div>
|
||||
</div>
|
||||
<!-- end modal -->
|
||||
|
|
|
|||
|
|
@ -334,7 +334,7 @@
|
|||
</a>
|
||||
|
||||
<button
|
||||
services-action="edit"
|
||||
services-action="rename"
|
||||
type="button"
|
||||
services-name="{{service["SERVER_NAME"]['value']}}"
|
||||
|
||||
|
|
@ -350,6 +350,20 @@
|
|||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
services-action="edit"
|
||||
type="button"
|
||||
services-name="{{service["SERVER_NAME"]['value']}}"
|
||||
|
||||
class="dark:brightness-90 z-20 mx-1 bg-blue-500 hover:bg-blue-500/80 focus:bg-yellow-500/80 inline-block p-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer leading-normal text-xs ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md"
|
||||
>
|
||||
<svg class="h-6 w-6 fill-white"
|
||||
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<path d="M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336c44.2 0 80-35.8 80-80s-35.8-80-80-80s-80 35.8-80 80s35.8 80 80 80z"/></svg>
|
||||
|
||||
</button>
|
||||
|
||||
|
||||
{% if service["SERVER_NAME"]['method'] != "scheduler" %}
|
||||
<button
|
||||
services-action="delete"
|
||||
|
|
|
|||
Loading…
Reference in New Issue