mirror of
https://github.com/qbcore-fivem/qb-core.git
synced 2026-08-29 01:08:57 +00:00
UI updates
This commit is contained in:
Kakarot
+234
-132
@@ -22,17 +22,21 @@
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
background-color: var(--md-dark-surface-container-high);
|
||||
background-color: var(--md-dark-surface-container-highest);
|
||||
border-bottom: 1px solid var(--md-dark-outline-variant);
|
||||
}
|
||||
|
||||
#editor-container > header h1 {
|
||||
margin: 0;
|
||||
font-size: var(--md-typescale-title-large-size);
|
||||
font-size: var(--md-typescale-headline-large-size);
|
||||
color: var(--md-dark-on-surface);
|
||||
}
|
||||
|
||||
#editor-container > header .controls {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
#save-btn,
|
||||
#close-btn {
|
||||
display: flex;
|
||||
@@ -45,19 +49,23 @@
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
#save-btn {
|
||||
background-color: var(--md-dark-primary);
|
||||
color: var(--md-dark-on-primary);
|
||||
background-color: var(--md-dark-success-container);
|
||||
color: var(--md-dark-on-success-container);
|
||||
}
|
||||
|
||||
#save-btn:hover {
|
||||
background-color: var(--md-dark-primary-container);
|
||||
background-color: rgba(255, 255, 255, var(--md-state-hover-dark-opacity));
|
||||
}
|
||||
|
||||
#close-btn {
|
||||
background-color: var(--md-dark-secondary);
|
||||
color: var(--md-dark-on-secondary);
|
||||
background-color: var(--md-dark-error-container);
|
||||
color: var(--md-dark-on-error-container);
|
||||
}
|
||||
|
||||
#close-btn:hover {
|
||||
background-color: var(--md-dark-secondary-container);
|
||||
background-color: rgba(255, 255, 255, var(--md-state-hover-dark-opacity));
|
||||
}
|
||||
|
||||
/* Main layout */
|
||||
@@ -69,10 +77,10 @@
|
||||
|
||||
/* Sidebar */
|
||||
#editor-container .sidebar {
|
||||
width: 240px;
|
||||
width: 200px;
|
||||
padding: 16px;
|
||||
background-color: var(--md-dark-surface-container);
|
||||
box-shadow: inset -1px 0 0 0 var(--md-dark-outline-variant);
|
||||
background-color: var(--md-dark-surface-container-high);
|
||||
border-right: 1px solid var(--md-dark-outline-variant);
|
||||
}
|
||||
|
||||
#editor-container .file-list {
|
||||
@@ -97,7 +105,7 @@
|
||||
}
|
||||
|
||||
#editor-container .file-list li.active {
|
||||
color: var(--md-dark-on-primary);
|
||||
background-color: rgba(255, 255, 255, var(--md-state-focus-dark-opacity));
|
||||
}
|
||||
|
||||
/* Main content area */
|
||||
@@ -107,6 +115,8 @@
|
||||
flex-direction: column;
|
||||
padding: 16px;
|
||||
overflow: hidden;
|
||||
background-color: var(--md-dark-surface-container-low);
|
||||
color: var(--md-dark-on-surface);
|
||||
}
|
||||
|
||||
/* Search bar */
|
||||
@@ -143,41 +153,245 @@
|
||||
flex: 1;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
grid-auto-rows: 150px;
|
||||
gap: 12px;
|
||||
overflow-y: auto;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.data-card {
|
||||
background-color: var(--md-dark-surface-container-low);
|
||||
border-radius: var(--md-radius-medium);
|
||||
box-shadow: var(--md-elevation-1);
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 16px;
|
||||
background-color: var(--md-dark-surface-container);
|
||||
border-radius: var(--md-radius-medium);
|
||||
box-shadow: var(--md-elevation-1);
|
||||
transition: transform 0.1s, box-shadow 0.1s;
|
||||
}
|
||||
|
||||
.data-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--md-elevation-2);
|
||||
}
|
||||
|
||||
.data-card h3 {
|
||||
margin: 0 0 8px 0;
|
||||
font-size: var(--md-typescale-title-medium-size);
|
||||
color: var(--md-dark-on-surface);
|
||||
}
|
||||
|
||||
.btn-edit {
|
||||
align-self: flex-end;
|
||||
padding: 4px 8px;
|
||||
border: none;
|
||||
border-radius: var(--md-radius-small);
|
||||
background-color: var(--md-dark-secondary);
|
||||
background-color: var(--md-dark-surface-container-low);
|
||||
color: var(--md-dark-on-secondary);
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.btn-edit:hover {
|
||||
background-color: var(--md-dark-secondary-container);
|
||||
background-color: rgba(255, 255, 255, var(--md-state-hover-dark-opacity));
|
||||
}
|
||||
|
||||
/* Modal */
|
||||
#edit-modal.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#edit-modal {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background-color: var(--md-dark-scrim);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 60vw;
|
||||
height: 60vh;
|
||||
background-color: var(--md-dark-surface);
|
||||
border-radius: var(--md-radius-medium);
|
||||
box-shadow: var(--md-elevation-4);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
background-color: var(--md-dark-surface-container-high);
|
||||
border-bottom: 1px solid var(--md-dark-outline-variant);
|
||||
}
|
||||
|
||||
.modal-header h2 {
|
||||
margin: 0;
|
||||
font-size: var(--md-typescale-headline-large-size);
|
||||
color: var(--md-dark-on-surface);
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
#close-modal-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: none;
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
background-color: var(--md-dark-error-container);
|
||||
color: var(--md-dark-on-error-container);
|
||||
border-radius: var(--md-radius-small);
|
||||
}
|
||||
|
||||
#close-modal-btn:hover {
|
||||
background-color: rgba(255, 255, 255, var(--md-state-hover-dark-opacity));
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 16px;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
background-color: var(--md-dark-surface-container-high);
|
||||
border-top: 1px solid var(--md-dark-outline-variant);
|
||||
}
|
||||
|
||||
#cancel-edit-btn {
|
||||
padding: 8px 16px;
|
||||
border: none;
|
||||
border-radius: var(--md-radius-small);
|
||||
background-color: var(--md-dark-error-container);
|
||||
color: var(--md-dark-on-error-container);
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
#cancel-edit-btn:hover {
|
||||
background-color: rgba(255, 255, 255, var(--md-state-hover-dark-opacity));
|
||||
}
|
||||
|
||||
#save-item-btn {
|
||||
padding: 8px 16px;
|
||||
border: none;
|
||||
border-radius: var(--md-radius-small);
|
||||
background-color: var(--md-dark-success-container);
|
||||
color: var(--md-dark-on-success-container);
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
#save-item-btn:hover {
|
||||
background-color: rgba(255, 255, 255, var(--md-state-hover-dark-opacity));
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
margin-bottom: 4px;
|
||||
font-size: var(--md-typescale-label-large-size);
|
||||
color: var(--md-dark-on-surface);
|
||||
}
|
||||
|
||||
.form-control {
|
||||
padding: 8px 12px;
|
||||
font-size: var(--md-typescale-label-large-size);
|
||||
background-color: var(--md-dark-surface-container-low);
|
||||
color: var(--md-dark-on-surface);
|
||||
border: 1px solid var(--md-dark-outline-variant);
|
||||
border-radius: var(--md-radius-small);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
border-color: var(--md-dark-primary);
|
||||
}
|
||||
|
||||
/* small monospace preview under each card title */
|
||||
.data-preview {
|
||||
margin: 8px 0;
|
||||
font-family: monospace;
|
||||
white-space: pre-wrap;
|
||||
color: var(--md-dark-on-surface);
|
||||
}
|
||||
|
||||
/* nested object fieldsets styling */
|
||||
.nested-fieldset {
|
||||
border: 1px solid var(--md-dark-outline-variant);
|
||||
padding: 12px;
|
||||
margin: 8px 0;
|
||||
border-radius: var(--md-radius-small);
|
||||
background-color: var(--md-dark-surface-container);
|
||||
}
|
||||
|
||||
.nested-fieldset legend {
|
||||
font-weight: 600;
|
||||
padding: 0 6px;
|
||||
color: var(--md-dark-on-surface);
|
||||
}
|
||||
|
||||
/* indent array entries a bit */
|
||||
.array-container > .form-group {
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
/* Toggle Switch */
|
||||
.toggle-wrapper {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.toggle-wrapper input[type="checkbox"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toggle-switch {
|
||||
position: relative;
|
||||
width: 42px;
|
||||
height: 24px;
|
||||
background-color: var(--md-dark-outline-variant);
|
||||
border-radius: 24px;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.toggle-switch::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: var(--md-dark-on-primary);
|
||||
border-radius: 50%;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.toggle-wrapper input:checked + .toggle-switch {
|
||||
background-color: var(--md-dark-primary);
|
||||
}
|
||||
|
||||
.toggle-wrapper input:checked + .toggle-switch::before {
|
||||
transform: translateX(18px);
|
||||
}
|
||||
|
||||
/* Floating Action Button */
|
||||
@@ -197,120 +411,8 @@
|
||||
box-shadow: var(--md-elevation-3);
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
#add-item-fab:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: var(--md-elevation-2);
|
||||
}
|
||||
|
||||
/* Modal */
|
||||
#edit-modal.hidden {
|
||||
display: none;
|
||||
}
|
||||
#edit-modal {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background-color: var(--md-dark-scrim);
|
||||
z-index: 1000;
|
||||
}
|
||||
.modal-content {
|
||||
background-color: var(--md-dark-surface);
|
||||
border-radius: var(--md-radius-medium);
|
||||
width: 500px;
|
||||
max-width: 90%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: var(--md-elevation-4);
|
||||
overflow: hidden;
|
||||
}
|
||||
.modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
background-color: var(--md-dark-surface-container-high);
|
||||
border-bottom: 1px solid var(--md-dark-outline-variant);
|
||||
}
|
||||
.modal-header h2 {
|
||||
margin: 0;
|
||||
font-size: var(--md-typescale-title-medium-size);
|
||||
color: var(--md-dark-on-surface);
|
||||
}
|
||||
#close-modal-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 24px;
|
||||
color: var(--md-dark-on-surface-variant);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.modal-body {
|
||||
padding: 16px;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
}
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
background-color: var(--md-dark-surface-container-high);
|
||||
border-top: 1px solid var(--md-dark-outline-variant);
|
||||
}
|
||||
#cancel-edit-btn {
|
||||
padding: 8px 16px;
|
||||
border: none;
|
||||
border-radius: var(--md-radius-small);
|
||||
background-color: var(--md-dark-secondary);
|
||||
color: var(--md-dark-on-secondary);
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
#cancel-edit-btn:hover {
|
||||
background-color: var(--md-dark-secondary-container);
|
||||
}
|
||||
#save-item-btn {
|
||||
padding: 8px 16px;
|
||||
border: none;
|
||||
border-radius: var(--md-radius-small);
|
||||
background-color: var(--md-dark-primary);
|
||||
color: var(--md-dark-on-primary);
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
#save-item-btn:hover {
|
||||
background-color: var(--md-dark-primary-container);
|
||||
}
|
||||
|
||||
/* small monospace preview under each card title */
|
||||
.data-preview {
|
||||
margin: 8px 0;
|
||||
font-family: monospace;
|
||||
white-space: pre-wrap;
|
||||
color: var(--md-dark-on-surface-variant);
|
||||
}
|
||||
|
||||
/* nested object fieldsets styling */
|
||||
.nested-fieldset {
|
||||
border: 1px solid var(--md-dark-outline-variant);
|
||||
padding: 12px;
|
||||
margin: 8px 0;
|
||||
border-radius: var(--md-radius-small);
|
||||
background-color: var(--md-dark-surface-container-low);
|
||||
}
|
||||
.nested-fieldset legend {
|
||||
font-weight: 600;
|
||||
padding: 0 6px;
|
||||
color: var(--md-dark-on-surface);
|
||||
}
|
||||
|
||||
/* indent array entries a bit */
|
||||
.array-container > .form-group {
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
+19
-15
@@ -111,21 +111,25 @@
|
||||
--md-radius-extra-large: 28px;
|
||||
|
||||
/* Typography */
|
||||
--md-typescale-display-large-size: 57px;
|
||||
--md-typescale-display-medium-size: 45px;
|
||||
--md-typescale-display-small-size: 36px;
|
||||
--md-typescale-headline-large-size: 32px;
|
||||
--md-typescale-headline-medium-size: 28px;
|
||||
--md-typescale-headline-small-size: 24px;
|
||||
--md-typescale-title-large-size: 22px;
|
||||
--md-typescale-title-medium-size: 16px;
|
||||
--md-typescale-title-small-size: 14px;
|
||||
--md-typescale-body-large-size: 16px;
|
||||
--md-typescale-body-medium-size: 14px;
|
||||
--md-typescale-body-small-size: 12px;
|
||||
--md-typescale-label-large-size: 14px;
|
||||
--md-typescale-label-medium-size: 12px;
|
||||
--md-typescale-label-small-size: 11px;
|
||||
--md-typescale-display-large-size: 3.5625rem; /* 57px */
|
||||
--md-typescale-display-medium-size: 2.8125rem; /* 45px */
|
||||
--md-typescale-display-small-size: 2.25rem; /* 36px */
|
||||
|
||||
--md-typescale-headline-large-size: 2rem; /* 32px */
|
||||
--md-typescale-headline-medium-size: 1.75rem; /* 28px */
|
||||
--md-typescale-headline-small-size: 1.5rem; /* 24px */
|
||||
|
||||
--md-typescale-title-large-size: 1.375rem; /* 22px */
|
||||
--md-typescale-title-medium-size: 1rem; /* 16px */
|
||||
--md-typescale-title-small-size: 0.875rem; /* 14px */
|
||||
|
||||
--md-typescale-body-large-size: 1rem; /* 16px */
|
||||
--md-typescale-body-medium-size: 0.875rem; /* 14px */
|
||||
--md-typescale-body-small-size: 0.75rem; /* 12px */
|
||||
|
||||
--md-typescale-label-large-size: 0.875rem; /* 14px */
|
||||
--md-typescale-label-medium-size: 0.75rem; /* 12px */
|
||||
--md-typescale-label-small-size: 0.6875rem; /* 11px */
|
||||
|
||||
/* Exo 2 Typography */
|
||||
/* @import url("https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;500;600;700&display=swap"); */
|
||||
|
||||
+13
-13
@@ -1,18 +1,18 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
|
||||
<link href="https://cdn.jsdelivr.net/npm/quasar@2.12.0/dist/quasar.prod.css" rel="stylesheet" type="text/css" />
|
||||
<meta charset="UTF-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;500;600;700&display=swap" rel="stylesheet"/>
|
||||
<link href="https://cdn.jsdelivr.net/npm/quasar@2.12.0/dist/quasar.prod.css" rel="stylesheet" type="text/css"/>
|
||||
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" type="text/css" />
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"/>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" type="text/css"/>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0"/>
|
||||
|
||||
<link href="css/style.css" rel="stylesheet" />
|
||||
<link href="css/editor.css" rel="stylesheet" />
|
||||
<link href="css/drawtext.css" rel="stylesheet" />
|
||||
<link href="css/style.css" rel="stylesheet"/>
|
||||
<link href="css/editor.css" rel="stylesheet"/>
|
||||
<link href="css/drawtext.css" rel="stylesheet"/>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js" defer></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/quasar@2.12.0/dist/quasar.umd.prod.js" defer></script>
|
||||
@@ -29,7 +29,7 @@
|
||||
|
||||
<div id="editor-container">
|
||||
<header>
|
||||
<h1>QB Config Editor</h1>
|
||||
<h1>QBCore Config Editor</h1>
|
||||
<div class="controls">
|
||||
<button id="save-btn">
|
||||
<span class="material-symbols-rounded">save</span>
|
||||
@@ -79,7 +79,7 @@
|
||||
<div class="main-content">
|
||||
<div class="search-container">
|
||||
<span class="material-symbols-rounded search-icon">search</span>
|
||||
<input type="text" id="search-input" placeholder="Search..." aria-label="Search through config items" />
|
||||
<input type="text" id="search-input" placeholder="Search..." aria-label="Search through config items"/>
|
||||
</div>
|
||||
|
||||
<div id="data-container"></div>
|
||||
@@ -98,11 +98,11 @@
|
||||
<div id="editor-form"></div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button id="cancel-edit-btn">Cancel</button>
|
||||
<button id="save-item-btn">
|
||||
<span class="material-symbols-rounded">check</span>
|
||||
Save
|
||||
</button>
|
||||
<button id="cancel-edit-btn">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+122
-66
@@ -34,18 +34,18 @@ function buildEditor(data) {
|
||||
card.innerHTML = `<h3>${key}</h3>`;
|
||||
|
||||
// value preview
|
||||
const preview = document.createElement("div");
|
||||
preview.className = "data-preview";
|
||||
if (typeof value === "boolean") {
|
||||
preview.textContent = value;
|
||||
} else if (Array.isArray(value)) {
|
||||
preview.textContent = `[${value.map((v) => (typeof v === "object" ? JSON.stringify(v) : v)).join(", ")}]`;
|
||||
} else if (typeof value === "object" && value !== null) {
|
||||
preview.textContent = JSON.stringify(value);
|
||||
} else {
|
||||
preview.textContent = value;
|
||||
}
|
||||
card.appendChild(preview);
|
||||
// const preview = document.createElement("div");
|
||||
// preview.className = "data-preview";
|
||||
// if (typeof value === "boolean") {
|
||||
// preview.textContent = value;
|
||||
// } else if (Array.isArray(value)) {
|
||||
// preview.textContent = `[${value.map((v) => (typeof v === "object" ? JSON.stringify(v) : v)).join(", ")}]`;
|
||||
// } else if (typeof value === "object" && value !== null) {
|
||||
// preview.textContent = JSON.stringify(value);
|
||||
// } else {
|
||||
// preview.textContent = value;
|
||||
// }
|
||||
// card.appendChild(preview);
|
||||
|
||||
const editBtn = document.createElement("button");
|
||||
editBtn.className = "btn-edit";
|
||||
@@ -59,65 +59,120 @@ function buildEditor(data) {
|
||||
|
||||
// Recursive field builder
|
||||
function buildFormFields(container, data, prefix = "") {
|
||||
Object.entries(data).forEach(([field, val]) => {
|
||||
const group = document.createElement("div");
|
||||
group.className = "form-group";
|
||||
const entries = Object.entries(data);
|
||||
|
||||
const label = document.createElement("label");
|
||||
label.htmlFor = "field-" + prefix + field;
|
||||
label.textContent = field;
|
||||
group.appendChild(label);
|
||||
// Sort fields: booleans first, then other flat fields, then nested objects
|
||||
const sorted = [
|
||||
...entries.filter(([_, val]) => typeof val === "boolean"),
|
||||
...entries.filter(([_, val]) => val !== null && typeof val !== "object" && typeof val !== "boolean"),
|
||||
...entries.filter(([_, val]) => val !== null && typeof val === "object")
|
||||
];
|
||||
|
||||
sorted.forEach(([field, val]) => {
|
||||
if (typeof val === "boolean") {
|
||||
const group = document.createElement("div");
|
||||
group.className = "form-group form-toggle-group";
|
||||
|
||||
const label = document.createElement("label");
|
||||
label.htmlFor = "field-" + prefix + field;
|
||||
label.textContent = field;
|
||||
group.appendChild(label);
|
||||
|
||||
const toggleLabel = document.createElement("label");
|
||||
toggleLabel.className = "toggle-wrapper";
|
||||
|
||||
const input = document.createElement("input");
|
||||
input.type = "checkbox";
|
||||
input.checked = val;
|
||||
input.name = prefix + field;
|
||||
input.id = "field-" + prefix + field;
|
||||
input.className = "form-control";
|
||||
group.appendChild(input);
|
||||
} else if (Array.isArray(val)) {
|
||||
// Array handling: differentiate primitives and objects
|
||||
val.forEach((item, idx) => {
|
||||
if (item !== null && typeof item === "object") {
|
||||
// Nested object in array: use fieldset
|
||||
const fieldset = document.createElement("fieldset");
|
||||
fieldset.className = "nested-fieldset";
|
||||
const legend = document.createElement("legend");
|
||||
legend.textContent = `${field}[${idx}]`;
|
||||
fieldset.appendChild(legend);
|
||||
buildFormFields(fieldset, item, prefix + field + `[${idx}].`);
|
||||
group.appendChild(fieldset);
|
||||
} else {
|
||||
// Primitive in array
|
||||
const itemGroup = document.createElement("div");
|
||||
itemGroup.className = "form-group";
|
||||
const itemLabel = document.createElement("label");
|
||||
itemLabel.htmlFor = `${prefix}${field}[${idx}]`;
|
||||
itemLabel.textContent = `${field}[${idx}]`;
|
||||
|
||||
const input = document.createElement("input");
|
||||
input.type = typeof item === "boolean" ? "checkbox" : "text";
|
||||
if (typeof item === "boolean") input.checked = item;
|
||||
else input.value = item;
|
||||
input.name = `${prefix}${field}[${idx}]`;
|
||||
input.id = `field-${prefix}${field}[${idx}]`;
|
||||
input.className = "form-control";
|
||||
const span = document.createElement("span");
|
||||
span.className = "toggle-switch";
|
||||
|
||||
itemGroup.append(itemLabel, input);
|
||||
group.appendChild(itemGroup);
|
||||
}
|
||||
});
|
||||
toggleLabel.appendChild(input);
|
||||
toggleLabel.appendChild(span);
|
||||
group.appendChild(toggleLabel);
|
||||
|
||||
container.appendChild(group);
|
||||
} else if (val !== null && typeof val === "object") {
|
||||
// Nested object
|
||||
const fieldset = document.createElement("fieldset");
|
||||
fieldset.className = "nested-fieldset";
|
||||
const legend = document.createElement("legend");
|
||||
legend.textContent = field;
|
||||
fieldset.appendChild(legend);
|
||||
buildFormFields(fieldset, val, prefix + field + ".");
|
||||
group.appendChild(fieldset);
|
||||
const group = document.createElement("div");
|
||||
group.className = "form-group";
|
||||
|
||||
if (Array.isArray(val)) {
|
||||
val.forEach((item, idx) => {
|
||||
if (item !== null && typeof item === "object") {
|
||||
const fieldset = document.createElement("fieldset");
|
||||
fieldset.className = "nested-fieldset";
|
||||
|
||||
const legend = document.createElement("legend");
|
||||
legend.textContent = `${field}[${idx}]`;
|
||||
fieldset.appendChild(legend);
|
||||
|
||||
buildFormFields(fieldset, item, `${prefix}${field}[${idx}].`);
|
||||
group.appendChild(fieldset);
|
||||
} else {
|
||||
const itemGroup = document.createElement("div");
|
||||
itemGroup.className = "form-group";
|
||||
|
||||
const itemLabel = document.createElement("label");
|
||||
itemLabel.htmlFor = `field-${prefix}${field}[${idx}]`;
|
||||
itemLabel.textContent = `${field}[${idx}]`;
|
||||
itemGroup.appendChild(itemLabel);
|
||||
|
||||
if (typeof item === "boolean") {
|
||||
itemGroup.classList.add("form-toggle-group");
|
||||
|
||||
const toggleLabel = document.createElement("label");
|
||||
toggleLabel.className = "toggle-wrapper";
|
||||
|
||||
const input = document.createElement("input");
|
||||
input.type = "checkbox";
|
||||
input.checked = item;
|
||||
input.name = `${prefix}${field}[${idx}]`;
|
||||
input.id = `field-${prefix}${field}[${idx}]`;
|
||||
|
||||
const span = document.createElement("span");
|
||||
span.className = "toggle-switch";
|
||||
|
||||
toggleLabel.appendChild(input);
|
||||
toggleLabel.appendChild(span);
|
||||
itemGroup.appendChild(toggleLabel);
|
||||
} else {
|
||||
const input = document.createElement("input");
|
||||
input.type = "text";
|
||||
input.value = item;
|
||||
input.name = `${prefix}${field}[${idx}]`;
|
||||
input.id = `field-${prefix}${field}[${idx}]`;
|
||||
input.className = "form-control";
|
||||
itemGroup.appendChild(input);
|
||||
}
|
||||
|
||||
group.appendChild(itemGroup);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
const fieldset = document.createElement("fieldset");
|
||||
fieldset.className = "nested-fieldset";
|
||||
|
||||
const legend = document.createElement("legend");
|
||||
legend.textContent = field;
|
||||
fieldset.appendChild(legend);
|
||||
|
||||
buildFormFields(fieldset, val, prefix + field + ".");
|
||||
group.appendChild(fieldset);
|
||||
}
|
||||
|
||||
container.appendChild(group);
|
||||
} else {
|
||||
const group = document.createElement("div");
|
||||
group.className = "form-group";
|
||||
|
||||
const label = document.createElement("label");
|
||||
label.htmlFor = "field-" + prefix + field;
|
||||
label.textContent = field;
|
||||
group.appendChild(label);
|
||||
|
||||
const input = document.createElement("input");
|
||||
input.type = "text";
|
||||
input.value = val;
|
||||
@@ -125,15 +180,16 @@ function buildFormFields(container, data, prefix = "") {
|
||||
input.id = "field-" + prefix + field;
|
||||
input.className = "form-control";
|
||||
group.appendChild(input);
|
||||
|
||||
container.appendChild(group);
|
||||
}
|
||||
container.appendChild(group);
|
||||
});
|
||||
}
|
||||
|
||||
// Open modal to edit a key
|
||||
function openEditModal(key, value) {
|
||||
const modal = document.getElementById("edit-modal");
|
||||
modal.querySelector("h2").textContent = `Edit '${key}'`;
|
||||
modal.querySelector("h2").textContent = `${key}`;
|
||||
const formContainer = document.getElementById("editor-form");
|
||||
formContainer.innerHTML = "";
|
||||
|
||||
@@ -142,7 +198,7 @@ function openEditModal(key, value) {
|
||||
|
||||
// Determine if value is object or primitive
|
||||
const isObj = value !== null && typeof value === "object";
|
||||
const editableData = isObj ? value : { [key]: value };
|
||||
const editableData = isObj ? value : {[key]: value};
|
||||
const prefix = isObj ? "" : key + ".";
|
||||
|
||||
buildFormFields(form, editableData, prefix);
|
||||
@@ -152,7 +208,7 @@ function openEditModal(key, value) {
|
||||
document.getElementById("save-item-btn").onclick = async (e) => {
|
||||
e.preventDefault();
|
||||
const formElem = document.getElementById("editor-form-inner");
|
||||
const updated = { ...allData[currentFile] };
|
||||
const updated = {...allData[currentFile]};
|
||||
const resultValue = {};
|
||||
|
||||
Array.from(formElem.elements).forEach((el) => {
|
||||
@@ -247,7 +303,7 @@ function openNewItemModal() {
|
||||
val = raw;
|
||||
}
|
||||
} else val = raw;
|
||||
const updated = { ...allData[currentFile] };
|
||||
const updated = {...allData[currentFile]};
|
||||
updated[key] = val;
|
||||
await saveConfig(updated);
|
||||
};
|
||||
@@ -261,8 +317,8 @@ async function saveConfig(configData) {
|
||||
try {
|
||||
const res = await fetch(`https://${GetParentResourceName()}/saveConfig`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ file: currentFile, data: configData }),
|
||||
headers: {"Content-Type": "application/json"},
|
||||
body: JSON.stringify({file: currentFile, data: configData}),
|
||||
});
|
||||
const result = await res.json();
|
||||
if (result === "ok") {
|
||||
|
||||
Reference in New Issue
Block a user