vodorod/umbrix-libcore
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

add support for multi col row to ui

Browse Source
This commit is contained in:
hiddify
2024-09-30 23:16:24 +02:00
parent bc958e1177
commit 8545e2cb18
4 changed files with 152 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
extension/html/rpc/formRenderer.js
View File

@@ -5,7 +5,7 @@ const ansi_up = new AnsiUp({
});
function renderForm(json, dialog, submitAction, cancelAction, stopAction) {
function renderForm(json, dialog, submitAction, stopAction) {
const container = document.getElementById(`extension-page-container${dialog}`);
const formId = `dynamicForm${json.id}${dialog}`;
@@ -21,37 +21,26 @@ function renderForm(json, dialog, submitAction, cancelAction, stopAction) {
document.getElementById("modalLabel").textContent = json.title;
} else {
const titleElement = createTitleElement(json);
if (stopAction != undefined) {
const stopButton = document.createElement('button');
stopButton.textContent = "Back";
stopButton.classList.add('btn', 'btn-danger');
stopButton.addEventListener('click', stopAction);
form.appendChild(stopButton);
}
form.appendChild(titleElement);
}
addElementsToForm(form, json);
const buttonGroup = createButtonGroup(json, submitAction, cancelAction);
addElementsToForm(form, json,submitAction);
if (dialog === "dialog") {
document.getElementById("modal-footer").innerHTML = '';
document.getElementById("modal-footer").appendChild(buttonGroup);
// if ($(form.lastChild).find("button").length > 0) {
// document.getElementById("modal-footer").appendChild(form.lastChild);
// }
const extensionDialog = document.getElementById("extension-dialog");
const dialog = bootstrap.Modal.getOrCreateInstance(extensionDialog);
dialog.show();
extensionDialog.addEventListener("hidden.bs.modal", cancelAction);
// const dialog = bootstrap.Modal.getOrCreateInstance("#extension-dialog");
// dialog.show()
// dialog.on("hidden.bs.modal", () => {
// cancelAction()
// })
} else {
form.appendChild(buttonGroup);
extensionDialog.addEventListener("hidden.bs.modal", (e)=>submitAction(e,"CloseDialog"));
}
}
function addElementsToForm(form, json) {
function addElementsToForm(form, json,submitAction) {
@@ -60,8 +49,14 @@ function addElementsToForm(form, json) {
form.appendChild(description);
if (json.fields) {
json.fields.forEach(field => {
const formGroup = createFormGroup(field);
form.appendChild(formGroup);
div=document.createElement("div")
div.classList.add("row")
form.appendChild(div)
for (let i = 0; i < field.length; i++) {
const formGroup = createFormGroup(field[i], submitAction);
formGroup.classList.add("col")
div.appendChild(formGroup);
}
});
}
@@ -74,19 +69,35 @@ function createTitleElement(json) {
return title;
}
function createFormGroup(field) {
function createFormGroup(field, submitAction) {
const formGroup = document.createElement('div');
formGroup.classList.add('mb-3');
if (field.type == "Button") {
const button = document.createElement('button');
button.textContent = field.label;
button.name=field.key
button.classList.add('btn');
if (field.key == "Submit") {
button.classList.add('btn-primary');
} else if (field.key == "Cancel") {
button.classList.add('btn-secondary');
}else{
button.classList.add('btn', 'btn-outline-secondary');
}
button.addEventListener('click', (e) => submitAction(e,field.key));
formGroup.appendChild(button);
} else {
if (field.label && !field.labelHidden) {
const label = document.createElement('label');
label.textContent = field.label;
label.setAttribute('for', field.key);
formGroup.appendChild(label);
}
if (field.label && !field.labelHidden) {
const label = document.createElement('label');
label.textContent = field.label;
label.setAttribute('for', field.key);
formGroup.appendChild(label);
const input = createInputElement(field);
formGroup.appendChild(input);
}
const input = createInputElement(field);
formGroup.appendChild(input);
return formGroup;
}
@@ -199,18 +210,18 @@ function createButtonGroup(json, submitAction, cancelAction) {
buttonGroup.classList.add('btn-group');
json.buttons.forEach(buttonText => {
const btn = document.createElement('button');
btn.classList.add('btn',"btn-default");
btn.classList.add('btn', "btn-default");
buttonGroup.appendChild(btn);
btn.textContent = buttonText
if (buttonText=="Cancel") {
btn.classList.add( 'btn-secondary');
if (buttonText == "Cancel") {
btn.classList.add('btn-secondary');
btn.addEventListener('click', cancelAction);
}else{
if (buttonText=="Submit"||buttonText=="Ok")
} else {
if (buttonText == "Submit" || buttonText == "Ok")
btn.classList.add('btn-primary');
btn.addEventListener('click', submitAction);
}
})