mirror of
https://github.com/qbcore-fivem/qb-core.git
synced 2026-08-28 23:01:29 +00:00
updates
This commit is contained in:
Kakarot
+5
-2
@@ -18,7 +18,8 @@ client_scripts {
|
||||
'client/functions.lua',
|
||||
'client/loops.lua',
|
||||
'client/events.lua',
|
||||
'client/drawtext.lua'
|
||||
'client/drawtext.lua',
|
||||
'client/editor.lua'
|
||||
}
|
||||
|
||||
server_scripts {
|
||||
@@ -38,9 +39,11 @@ files {
|
||||
'html/index.html',
|
||||
'html/css/*.css',
|
||||
'html/js/*.js',
|
||||
'shared/jobs.json',
|
||||
'shared/config.json',
|
||||
'shared/gangs.json',
|
||||
'shared/items.json',
|
||||
'shared/jobs.json',
|
||||
'shared/player_defaults.json',
|
||||
'shared/vehicles.json',
|
||||
'shared/weapons.json'
|
||||
}
|
||||
|
||||
+205
-574
@@ -1,95 +1,6 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;500;600;700&display=swap");
|
||||
|
||||
:root {
|
||||
/* Primary colors */
|
||||
--md-primary: #f44336;
|
||||
--md-on-primary: #ffffff;
|
||||
--md-primary-container: #ffdad6;
|
||||
--md-on-primary-container: #410002;
|
||||
|
||||
/* Secondary colors */
|
||||
--md-secondary: #d32f2f;
|
||||
--md-on-secondary: #ffffff;
|
||||
--md-secondary-container: #ffdad5;
|
||||
--md-on-secondary-container: #410001;
|
||||
|
||||
/* Tertiary colors */
|
||||
--md-tertiary: #ff8a65;
|
||||
--md-on-tertiary: #ffffff;
|
||||
--md-tertiary-container: #ffdacc;
|
||||
--md-on-tertiary-container: #410002;
|
||||
|
||||
/* Surface colors (dark theme) */
|
||||
--md-surface: #1c1b1f;
|
||||
--md-on-surface: #e6e1e5;
|
||||
--md-surface-variant: #49454f;
|
||||
--md-on-surface-variant: #c9c5d0;
|
||||
--md-surface-container-lowest: #0f0d13;
|
||||
--md-surface-container-low: #1d1b20;
|
||||
--md-surface-container: #211f26;
|
||||
--md-surface-container-high: #2b2930;
|
||||
--md-surface-container-highest: #36343b;
|
||||
|
||||
/* Error colors */
|
||||
--md-error: #b3261e;
|
||||
--md-on-error: #ffffff;
|
||||
--md-error-container: #93000a;
|
||||
--md-on-error-container: #ffdad5;
|
||||
|
||||
/* Notification colors */
|
||||
--md-success: #9bd880;
|
||||
--md-on-success: #193800;
|
||||
--md-success-container: #275000;
|
||||
--md-on-success-container: #b6f397;
|
||||
|
||||
--md-warning: #ffba47;
|
||||
--md-on-warning: #422b00;
|
||||
--md-warning-container: #5f3f00;
|
||||
--md-on-warning-container: #ffddb0;
|
||||
|
||||
--md-info: #b3c5ff;
|
||||
--md-on-info: #002a77;
|
||||
--md-info-container: #003ea7;
|
||||
--md-on-info-container: #dae1ff;
|
||||
|
||||
/* Neutrals */
|
||||
--md-outline: #79747e;
|
||||
--md-outline-variant: #49454f;
|
||||
--md-inverse-surface: #e6e1e5;
|
||||
--md-inverse-on-surface: #1c1b1f;
|
||||
--md-scrim: rgba(0, 0, 0, 0.6);
|
||||
--md-shadow: rgba(0, 0, 0, 0.15);
|
||||
|
||||
/* Elevation */
|
||||
--md-elevation-1: 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
|
||||
--md-elevation-2: 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
|
||||
--md-elevation-3: 0px 4px 8px 3px rgba(0, 0, 0, 0.15);
|
||||
|
||||
/* Shapes */
|
||||
--md-radius-small: 8px;
|
||||
--md-radius-medium: 12px;
|
||||
--md-radius-large: 16px;
|
||||
|
||||
/* Typography */
|
||||
--font-primary: "Exo 2", sans-serif;
|
||||
--font-weight-regular: 400;
|
||||
--font-weight-medium: 500;
|
||||
--font-weight-bold: 700;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: var(--font-primary);
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: transparent;
|
||||
color: var(--md-on-surface);
|
||||
overflow: hidden;
|
||||
}
|
||||
@import url("styleguide.css");
|
||||
|
||||
/* Editor container base */
|
||||
#editor-container {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
@@ -97,273 +8,193 @@ body {
|
||||
transform: translate(-50%, -50%);
|
||||
width: 80vw;
|
||||
height: 80vh;
|
||||
background-color: var(--md-surface);
|
||||
border-radius: var(--md-radius-medium);
|
||||
box-shadow: var(--md-elevation-3);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--md-dark-surface);
|
||||
border-radius: var(--md-radius-medium);
|
||||
box-shadow: var(--md-elevation-3);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
header {
|
||||
padding: 16px;
|
||||
background-color: var(--md-surface-container-high);
|
||||
#editor-container > header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
background-color: var(--md-dark-surface-container-high);
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 22px;
|
||||
color: var(--md-primary);
|
||||
#editor-container > header h1 {
|
||||
margin: 0;
|
||||
font-size: var(--md-typescale-title-large-size);
|
||||
color: var(--md-dark-on-surface);
|
||||
}
|
||||
|
||||
.controls {
|
||||
#editor-container > header .controls {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 8px 16px;
|
||||
border: none;
|
||||
border-radius: var(--md-radius-small);
|
||||
cursor: pointer;
|
||||
#save-btn,
|
||||
#close-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-weight: 500;
|
||||
padding: 8px 16px;
|
||||
border: none;
|
||||
border-radius: var(--md-radius-small);
|
||||
font-size: var(--md-typescale-body-medium-size);
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
#save-btn {
|
||||
background-color: var(--md-success);
|
||||
color: var(--md-on-success);
|
||||
background-color: var(--md-dark-primary);
|
||||
color: var(--md-dark-on-primary);
|
||||
}
|
||||
|
||||
#save-btn:hover {
|
||||
box-shadow: var(--md-elevation-1);
|
||||
filter: brightness(1.1);
|
||||
background-color: var(--md-dark-primary-container);
|
||||
}
|
||||
|
||||
#close-btn {
|
||||
background-color: var(--md-secondary);
|
||||
color: var(--md-on-secondary);
|
||||
background-color: var(--md-dark-secondary);
|
||||
color: var(--md-dark-on-secondary);
|
||||
}
|
||||
#close-btn:hover {
|
||||
background-color: var(--md-dark-secondary-container);
|
||||
}
|
||||
|
||||
#close-btn:hover {
|
||||
/* Main layout */
|
||||
#editor-container .content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Sidebar */
|
||||
#editor-container .sidebar {
|
||||
width: 240px;
|
||||
padding: 16px;
|
||||
background-color: var(--md-dark-surface-container);
|
||||
box-shadow: inset -1px 0 0 0 var(--md-dark-outline-variant);
|
||||
}
|
||||
#editor-container .sidebar h2 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 12px;
|
||||
font-size: var(--md-typescale-title-small-size);
|
||||
color: var(--md-dark-on-surface);
|
||||
}
|
||||
#editor-container .file-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#editor-container .file-list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px;
|
||||
border-radius: var(--md-radius-small);
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
#editor-container .file-list li:hover {
|
||||
background-color: rgba(255, 255, 255, var(--md-state-hover-dark-opacity));
|
||||
}
|
||||
#editor-container .file-list li.active {
|
||||
color: var(--md-dark-on-primary);
|
||||
}
|
||||
|
||||
/* Main content area */
|
||||
#editor-container .main-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 16px;
|
||||
overflow: hidden;
|
||||
}
|
||||
#editor-container .search-container {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
#search-input {
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid var(--md-dark-outline-variant);
|
||||
border-radius: var(--md-radius-small);
|
||||
background-color: var(--md-dark-surface-container-low);
|
||||
color: var(--md-dark-on-surface);
|
||||
font-size: var(--md-typescale-body-medium-size);
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
#search-input:focus {
|
||||
border-color: var(--md-dark-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Data container and cards */
|
||||
#data-container {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
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);
|
||||
filter: brightness(1.1);
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
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);
|
||||
color: var(--md-dark-on-secondary);
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
.btn-edit:hover {
|
||||
background-color: var(--md-dark-secondary-container);
|
||||
}
|
||||
|
||||
/* Floating Action Button */
|
||||
.fab {
|
||||
#add-item-fab {
|
||||
position: fixed;
|
||||
right: 24px;
|
||||
bottom: 24px;
|
||||
right: 24px;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--md-primary);
|
||||
color: var(--md-on-primary);
|
||||
box-shadow: var(--md-elevation-3);
|
||||
background-color: var(--md-dark-primary);
|
||||
color: var(--md-dark-on-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
box-shadow: var(--md-elevation-3);
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.fab:hover {
|
||||
#add-item-fab:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: var(--md-elevation-2);
|
||||
}
|
||||
|
||||
.fab:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* Content layout */
|
||||
.content {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
height: calc(100vh - 130px);
|
||||
max-height: calc(100% - 60px);
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
background-color: var(--md-surface-container-high);
|
||||
width: 220px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.sidebar h2 {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 16px;
|
||||
color: var(--md-on-surface);
|
||||
}
|
||||
|
||||
.file-list {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.file-list li {
|
||||
padding: 12px;
|
||||
border-radius: var(--md-radius-small);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.file-list li .material-symbols-rounded {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.file-list li:hover {
|
||||
background-color: var(--md-surface-container-high);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--md-elevation-1);
|
||||
}
|
||||
|
||||
.file-list li.active {
|
||||
background-color: var(--md-primary);
|
||||
color: var(--md-on-primary);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--md-elevation-1);
|
||||
}
|
||||
|
||||
.main-content {
|
||||
flex: 1;
|
||||
padding: 16px;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--md-surface-container-low);
|
||||
}
|
||||
|
||||
/* Search Input */
|
||||
.search-container {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.search-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: var(--md-outline);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#search-input {
|
||||
width: 100%;
|
||||
padding: 12px 12px 12px 40px;
|
||||
border: 1px solid var(--md-outline-variant);
|
||||
border-radius: var(--md-radius-small);
|
||||
background-color: var(--md-surface-container);
|
||||
color: var(--md-on-surface);
|
||||
}
|
||||
|
||||
#search-input:focus {
|
||||
border-color: var(--md-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#data-container {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
max-height: calc(100vh - 200px);
|
||||
scrollbar-width: thin; /* For Firefox */
|
||||
scrollbar-color: var(--md-outline-variant) transparent;
|
||||
}
|
||||
|
||||
#data-container::-webkit-scrollbar {
|
||||
width: 6px; /* Scrollbar width for WebKit browsers */
|
||||
}
|
||||
|
||||
#data-container::-webkit-scrollbar-thumb {
|
||||
background-color: var(--md-outline-variant); /* Thumb color */
|
||||
border-radius: 3px; /* Rounded corners for the thumb */
|
||||
}
|
||||
|
||||
#data-container::-webkit-scrollbar-track {
|
||||
background-color: transparent; /* Track color */
|
||||
}
|
||||
|
||||
/* Cards for displaying data items */
|
||||
.data-card {
|
||||
background-color: var(--md-surface-container);
|
||||
border-radius: var(--md-radius-medium);
|
||||
padding: 16px;
|
||||
margin-bottom: 12px;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
overflow: hidden;
|
||||
word-break: break-word;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.data-card::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--md-primary);
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.data-card:hover {
|
||||
background-color: var(--md-surface-container-high);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--md-elevation-1);
|
||||
}
|
||||
|
||||
.data-card:hover::after {
|
||||
opacity: 0.05;
|
||||
}
|
||||
|
||||
.data-card h3 {
|
||||
color: var(--md-primary);
|
||||
margin-bottom: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.data-properties {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.property {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.property-label {
|
||||
font-size: 12px;
|
||||
color: var(--md-outline);
|
||||
}
|
||||
|
||||
.property-value {
|
||||
font-size: 14px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* Modal */
|
||||
#edit-modal.hidden {
|
||||
display: none;
|
||||
}
|
||||
#edit-modal {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@@ -371,304 +202,104 @@ button {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: grid;
|
||||
place-items: center; /* Perfectly centers the modal */
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
backdrop-filter: blur(2px);
|
||||
place-items: center;
|
||||
background-color: var(--md-dark-scrim);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
#edit-modal.hidden {
|
||||
animation: modal-disappear 0.2s ease-out forwards;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: var(--md-surface-container);
|
||||
border-radius: var(--md-radius-large);
|
||||
width: 600px;
|
||||
background-color: var(--md-dark-surface);
|
||||
border-radius: var(--md-radius-medium);
|
||||
width: 500px;
|
||||
max-width: 90%;
|
||||
max-height: 90vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: var(--md-elevation-3);
|
||||
animation: modal-appear 0.2s ease-out;
|
||||
box-shadow: var(--md-elevation-4);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid var(--md-outline-variant);
|
||||
background-color: var(--md-surface-container-high);
|
||||
padding: 12px;
|
||||
background-color: var(--md-dark-surface-container-high);
|
||||
border-bottom: 1px solid var(--md-dark-outline-variant);
|
||||
}
|
||||
|
||||
.modal-header h2 {
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
color: var(--md-primary);
|
||||
margin: 0;
|
||||
font-size: var(--md-typescale-title-medium-size);
|
||||
color: var(--md-dark-on-surface);
|
||||
}
|
||||
|
||||
#close-modal-btn {
|
||||
background: none;
|
||||
color: var(--md-on-surface-variant);
|
||||
border: none;
|
||||
font-size: 24px;
|
||||
padding: 0;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
color: var(--md-dark-on-surface-variant);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 50%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#close-modal-btn:hover {
|
||||
color: var(--md-error);
|
||||
background-color: var(--md-surface-container-high);
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 24px;
|
||||
padding: 16px;
|
||||
overflow-y: auto;
|
||||
max-height: 60vh;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--md-outline-variant) transparent;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.modal-body::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.modal-body::-webkit-scrollbar-thumb {
|
||||
background-color: var(--md-outline-variant);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
padding: 16px 24px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
border-top: 1px solid var(--md-outline-variant);
|
||||
background-color: var(--md-surface-container-high);
|
||||
padding: 12px;
|
||||
background-color: var(--md-dark-surface-container-high);
|
||||
border-top: 1px solid var(--md-dark-outline-variant);
|
||||
}
|
||||
|
||||
#save-item-btn {
|
||||
background-color: var(--md-success);
|
||||
color: var(--md-on-success);
|
||||
}
|
||||
|
||||
#save-item-btn:hover {
|
||||
box-shadow: var(--md-elevation-1);
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
|
||||
#cancel-edit-btn {
|
||||
background-color: var(--md-secondary);
|
||||
color: var(--md-on-secondary);
|
||||
}
|
||||
|
||||
#cancel-edit-btn:hover {
|
||||
box-shadow: var(--md-elevation-1);
|
||||
}
|
||||
|
||||
/* Form elements */
|
||||
.form-group {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
color: var(--md-on-surface);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
border: 1px solid var(--md-outline-variant);
|
||||
padding: 8px 16px;
|
||||
border: none;
|
||||
border-radius: var(--md-radius-small);
|
||||
background-color: var(--md-surface-container-low);
|
||||
color: var(--md-on-surface);
|
||||
transition: border-color 0.2s;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--md-outline-variant) transparent;
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
border-color: var(--md-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
textarea.form-control {
|
||||
min-height: 100px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.form-control::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.form-control::-webkit-scrollbar-thumb {
|
||||
background-color: var(--md-outline-variant);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.complex-object {
|
||||
border: 1px solid var(--md-outline-variant);
|
||||
border-radius: var(--md-radius-small);
|
||||
padding: 12px;
|
||||
margin-top: 8px;
|
||||
background-color: var(--md-surface-container);
|
||||
}
|
||||
|
||||
.complex-object-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.complex-object-title {
|
||||
font-weight: 500;
|
||||
color: var(--md-primary);
|
||||
}
|
||||
|
||||
.add-item-btn {
|
||||
background-color: var(--md-primary-container);
|
||||
color: var(--md-on-primary-container);
|
||||
padding: 4px 8px;
|
||||
font-size: 12px;
|
||||
border-radius: var(--md-radius-small);
|
||||
}
|
||||
|
||||
.add-item-btn:hover {
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
|
||||
/* For handling arrays */
|
||||
.array-item {
|
||||
border: 1px solid var(--md-outline-variant);
|
||||
border-radius: var(--md-radius-small);
|
||||
padding: 12px;
|
||||
margin-bottom: 12px;
|
||||
position: relative;
|
||||
background-color: var(--md-surface-container-low);
|
||||
}
|
||||
|
||||
.remove-item-btn {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
background-color: var(--md-error-container);
|
||||
color: var(--md-on-error-container);
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.remove-item-btn:hover {
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
|
||||
/* Improved checkbox styling */
|
||||
input[type="checkbox"] {
|
||||
/* Remove default styling */
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
|
||||
/* Create custom checkbox */
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid var(--md-outline-variant);
|
||||
border-radius: 4px;
|
||||
background-color: var(--md-surface-container-low);
|
||||
position: relative;
|
||||
background-color: var(--md-dark-secondary);
|
||||
color: var(--md-dark-on-secondary);
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
margin-right: 8px;
|
||||
transition: all 0.2s;
|
||||
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);
|
||||
}
|
||||
|
||||
/* Checked state */
|
||||
input[type="checkbox"]:checked {
|
||||
background-color: var(--md-primary);
|
||||
border-color: var(--md-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-variant);
|
||||
}
|
||||
|
||||
/* Checkmark */
|
||||
input[type="checkbox"]:checked::after {
|
||||
content: "✓";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: var(--md-on-primary);
|
||||
font-size: 14px;
|
||||
opacity: 0;
|
||||
animation: fadeIn 0.2s forwards;
|
||||
/* 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);
|
||||
}
|
||||
|
||||
/* Hover state */
|
||||
input[type="checkbox"]:hover {
|
||||
border-color: var(--md-primary);
|
||||
}
|
||||
|
||||
input[type="checkbox"]:active {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
/* Add this to the form-group for boolean/checkbox fields */
|
||||
.form-group.checkbox-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.form-group.checkbox-group label {
|
||||
margin-bottom: 0;
|
||||
margin-left: 8px;
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.form-group.checkbox-group input {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
@keyframes modal-appear {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes modal-disappear {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -60%);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
/* indent array entries a bit */
|
||||
.array-container > .form-group {
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,228 @@
|
||||
:root {
|
||||
/* Light Theme */
|
||||
--md-light-primary: #f44336;
|
||||
--md-light-on-primary: #ffffff;
|
||||
--md-light-primary-container: #ffdad6;
|
||||
--md-light-on-primary-container: #410002;
|
||||
--md-light-secondary: #d32f2f;
|
||||
--md-light-on-secondary: #ffffff;
|
||||
--md-light-secondary-container: #ffdad5;
|
||||
--md-light-on-secondary-container: #410001;
|
||||
--md-light-tertiary: #ff8a65;
|
||||
--md-light-on-tertiary: #ffffff;
|
||||
--md-light-tertiary-container: #ffdacc;
|
||||
--md-light-on-tertiary-container: #410002;
|
||||
--md-light-surface: #fffbff;
|
||||
--md-light-on-surface: #1c1b1f;
|
||||
--md-light-surface-variant: #e7e0ec;
|
||||
--md-light-on-surface-variant: #49454f;
|
||||
--md-light-surface-container-lowest: #ffffff;
|
||||
--md-light-surface-container-low: #f7f2fa;
|
||||
--md-light-surface-container: #f3edf7;
|
||||
--md-light-surface-container-high: #ece8f0;
|
||||
--md-light-surface-container-highest: #e6e1e5;
|
||||
--md-light-error: #b3261e;
|
||||
--md-light-on-error: #ffffff;
|
||||
--md-light-error-container: #f9dedc;
|
||||
--md-light-on-error-container: #410e0b;
|
||||
--md-light-outline: #79747e;
|
||||
--md-light-outline-variant: #c4c7c5;
|
||||
--md-light-inverse-surface: #313033;
|
||||
--md-light-inverse-on-surface: #f4eff4;
|
||||
--md-light-scrim: rgba(0, 0, 0, 0.4);
|
||||
--md-light-shadow: rgba(0, 0, 0, 0.08);
|
||||
--md-light-success: #386a20;
|
||||
--md-light-on-success: #ffffff;
|
||||
--md-light-success-container: #b6f397;
|
||||
--md-light-on-success-container: #0c2000;
|
||||
--md-light-warning: #825500;
|
||||
--md-light-on-warning: #ffffff;
|
||||
--md-light-warning-container: #ffddb0;
|
||||
--md-light-on-warning-container: #281800;
|
||||
--md-light-info: #0055d5;
|
||||
--md-light-on-info: #ffffff;
|
||||
--md-light-info-container: #dae1ff;
|
||||
--md-light-on-info-container: #001847;
|
||||
|
||||
/* Dark Theme (your existing variables) */
|
||||
--md-dark-primary: #f44336;
|
||||
--md-dark-on-primary: #ffffff;
|
||||
--md-dark-primary-container: #ffdad6;
|
||||
--md-dark-on-primary-container: #410002;
|
||||
--md-dark-secondary: #d32f2f;
|
||||
--md-dark-on-secondary: #ffffff;
|
||||
--md-dark-secondary-container: #ffdad5;
|
||||
--md-dark-on-secondary-container: #410001;
|
||||
--md-dark-tertiary: #ff8a65;
|
||||
--md-dark-on-tertiary: #ffffff;
|
||||
--md-dark-tertiary-container: #ffdacc;
|
||||
--md-dark-on-tertiary-container: #410002;
|
||||
--md-dark-surface: #1c1b1f;
|
||||
--md-dark-on-surface: #e6e1e5;
|
||||
--md-dark-surface-container-lowest: #0f0d13;
|
||||
--md-dark-surface-container-low: #1d1b20;
|
||||
--md-dark-surface-container: #211f26;
|
||||
--md-dark-surface-container-high: #2b2930;
|
||||
--md-dark-surface-container-highest: #36343b;
|
||||
--md-dark-error: #b3261e;
|
||||
--md-dark-on-error: #ffffff;
|
||||
--md-dark-error-container: #93000a;
|
||||
--md-dark-on-error-container: #ffdad5;
|
||||
--md-dark-outline: #79747e;
|
||||
--md-dark-outline-variant: #49454f;
|
||||
--md-dark-inverse-surface: #e6e1e5;
|
||||
--md-dark-inverse-on-surface: #1c1b1f;
|
||||
--md-dark-scrim: rgba(0, 0, 0, 0.6);
|
||||
--md-dark-shadow: rgba(0, 0, 0, 0.15);
|
||||
--md-dark-success: #9bd880;
|
||||
--md-dark-on-success: #193800;
|
||||
--md-dark-success-container: #275000;
|
||||
--md-dark-on-success-container: #b6f397;
|
||||
--md-dark-warning: #ffba47;
|
||||
--md-dark-on-warning: #422b00;
|
||||
--md-dark-warning-container: #5f3f00;
|
||||
--md-dark-on-warning-container: #ffddb0;
|
||||
--md-dark-info: #b3c5ff;
|
||||
--md-dark-on-info: #002a77;
|
||||
--md-dark-info-container: #003ea7;
|
||||
--md-dark-on-info-container: #dae1ff;
|
||||
|
||||
/* System states */
|
||||
--md-state-hover-light-opacity: 0.08;
|
||||
--md-state-focus-light-opacity: 0.12;
|
||||
--md-state-pressed-light-opacity: 0.12;
|
||||
--md-state-dragged-light-opacity: 0.16;
|
||||
--md-state-hover-dark-opacity: 0.08;
|
||||
--md-state-focus-dark-opacity: 0.12;
|
||||
--md-state-pressed-dark-opacity: 0.12;
|
||||
--md-state-dragged-dark-opacity: 0.16;
|
||||
|
||||
/* Elevation */
|
||||
--md-elevation-1: 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
|
||||
--md-elevation-2: 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
|
||||
--md-elevation-3: 0px 4px 8px 3px rgba(0, 0, 0, 0.15);
|
||||
--md-elevation-4: 0px 6px 10px 4px rgba(0, 0, 0, 0.15);
|
||||
--md-elevation-5: 0px 8px 12px 6px rgba(0, 0, 0, 0.15);
|
||||
|
||||
/* Shapes */
|
||||
--md-radius-small: 8px;
|
||||
--md-radius-medium: 12px;
|
||||
--md-radius-large: 16px;
|
||||
--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;
|
||||
|
||||
/* Exo 2 Typography */
|
||||
/* @import url("https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;500;600;700&display=swap"); */
|
||||
--font-primary: "Exo 2", sans-serif;
|
||||
--font-weight-regular: 400;
|
||||
--font-weight-medium: 500;
|
||||
--font-weight-bold: 700;
|
||||
}
|
||||
|
||||
/* Default to light theme */
|
||||
:root {
|
||||
--md-primary: var(--md-light-primary);
|
||||
--md-on-primary: var(--md-light-on-primary);
|
||||
--md-primary-container: var(--md-light-primary-container);
|
||||
--md-on-primary-container: var(--md-light-on-primary-container);
|
||||
--md-secondary: var(--md-light-secondary);
|
||||
--md-on-secondary: var(--md-light-on-secondary);
|
||||
--md-secondary-container: var(--md-light-secondary-container);
|
||||
--md-on-secondary-container: var(--md-light-on-secondary-container);
|
||||
--md-tertiary: var(--md-light-tertiary);
|
||||
--md-on-tertiary: var(--md-light-on-tertiary);
|
||||
--md-tertiary-container: var(--md-light-tertiary-container);
|
||||
--md-on-tertiary-container: var(--md-light-on-tertiary-container);
|
||||
--md-surface: var(--md-light-surface);
|
||||
--md-on-surface: var(--md-light-on-surface);
|
||||
--md-surface-variant: var(--md-light-surface-variant);
|
||||
--md-on-surface-variant: var(--md-light-on-surface-variant);
|
||||
--md-surface-container-lowest: var(--md-light-surface-container-lowest);
|
||||
--md-surface-container-low: var(--md-light-surface-container-low);
|
||||
--md-surface-container: var(--md-light-surface-container);
|
||||
--md-surface-container-high: var(--md-light-surface-container-high);
|
||||
--md-surface-container-highest: var(--md-light-surface-container-highest);
|
||||
--md-error: var(--md-light-error);
|
||||
--md-on-error: var(--md-light-on-error);
|
||||
--md-error-container: var(--md-light-error-container);
|
||||
--md-on-error-container: var(--md-light-on-error-container);
|
||||
--md-outline: var(--md-light-outline);
|
||||
--md-outline-variant: var(--md-light-outline-variant);
|
||||
--md-inverse-surface: var(--md-light-inverse-surface);
|
||||
--md-inverse-on-surface: var(--md-light-inverse-on-surface);
|
||||
--md-scrim: var(--md-light-scrim);
|
||||
--md-shadow: var(--md-light-shadow);
|
||||
--md-success: var(--md-light-success);
|
||||
--md-on-success: var(--md-light-on-success);
|
||||
--md-success-container: var(--md-light-success-container);
|
||||
--md-on-success-container: var(--md-light-on-success-container);
|
||||
--md-warning: var(--md-light-warning);
|
||||
--md-on-warning: var(--md-light-on-warning);
|
||||
--md-warning-container: var(--md-light-warning-container);
|
||||
--md-on-warning-container: var(--md-light-on-warning-container);
|
||||
--md-info: var(--md-light-info);
|
||||
--md-on-info: var(--md-light-on-info);
|
||||
--md-info-container: var(--md-light-info-container);
|
||||
--md-on-info-container: var(--md-light-on-info-container);
|
||||
}
|
||||
|
||||
/* Dark theme class */
|
||||
.dark-theme {
|
||||
--md-primary: var(--md-dark-primary);
|
||||
--md-on-primary: var(--md-dark-on-primary);
|
||||
--md-primary-container: var(--md-dark-primary-container);
|
||||
--md-on-primary-container: var(--md-dark-on-primary-container);
|
||||
--md-secondary: var(--md-dark-secondary);
|
||||
--md-on-secondary: var(--md-dark-on-secondary);
|
||||
--md-secondary-container: var(--md-dark-secondary-container);
|
||||
--md-on-secondary-container: var(--md-dark-on-secondary-container);
|
||||
--md-tertiary: var(--md-dark-tertiary);
|
||||
--md-on-tertiary: var(--md-dark-on-tertiary);
|
||||
--md-tertiary-container: var(--md-dark-tertiary-container);
|
||||
--md-on-tertiary-container: var(--md-dark-on-tertiary-container);
|
||||
--md-surface: var(--md-dark-surface);
|
||||
--md-on-surface: var(--md-dark-on-surface);
|
||||
--md-surface-container-lowest: var(--md-dark-surface-container-lowest);
|
||||
--md-surface-container-low: var(--md-dark-surface-container-low);
|
||||
--md-surface-container: var(--md-dark-surface-container);
|
||||
--md-surface-container-high: var(--md-dark-surface-container-high);
|
||||
--md-surface-container-highest: var(--md-dark-surface-container-highest);
|
||||
--md-error: var(--md-dark-error);
|
||||
--md-on-error: var(--md-dark-on-error);
|
||||
--md-error-container: var(--md-dark-error-container);
|
||||
--md-on-error-container: var(--md-dark-on-error-container);
|
||||
--md-outline: var(--md-dark-outline);
|
||||
--md-outline-variant: var(--md-dark-outline-variant);
|
||||
--md-inverse-surface: var(--md-dark-inverse-surface);
|
||||
--md-inverse-on-surface: var(--md-dark-inverse-on-surface);
|
||||
--md-scrim: var(--md-dark-scrim);
|
||||
--md-shadow: var(--md-dark-shadow);
|
||||
--md-success: var(--md-dark-success);
|
||||
--md-on-success: var(--md-dark-on-success);
|
||||
--md-success-container: var(--md-dark-success-container);
|
||||
--md-on-success-container: var(--md-dark-on-success-container);
|
||||
--md-warning: var(--md-dark-warning);
|
||||
--md-on-warning: var(--md-dark-on-warning);
|
||||
--md-warning-container: var(--md-dark-warning-container);
|
||||
--md-on-warning-container: var(--md-dark-on-warning-container);
|
||||
--md-info: var(--md-dark-info);
|
||||
--md-on-info: var(--md-dark-on-info);
|
||||
--md-info-container: var(--md-dark-info-container);
|
||||
--md-on-info-container: var(--md-dark-on-info-container);
|
||||
}
|
||||
+278
-528
@@ -1,579 +1,329 @@
|
||||
// Main data store
|
||||
let configData = {};
|
||||
let currentFile = "config";
|
||||
let currentEditItem = null;
|
||||
let editPath = null;
|
||||
// editor.js – NUI-based config editor with type-aware, recursive editing
|
||||
|
||||
// Elements
|
||||
const dataContainer = document.getElementById("data-container");
|
||||
const searchInput = document.getElementById("search-input");
|
||||
const saveBtn = document.getElementById("save-btn");
|
||||
const closeBtn = document.getElementById("close-btn");
|
||||
const editModal = document.getElementById("edit-modal");
|
||||
const closeModalBtn = document.getElementById("close-modal-btn");
|
||||
const saveItemBtn = document.getElementById("save-item-btn");
|
||||
const cancelEditBtn = document.getElementById("cancel-edit-btn");
|
||||
const editorForm = document.getElementById("editor-form");
|
||||
const fileListItems = document.querySelectorAll(".file-list li");
|
||||
const fabButton = document.getElementById("add-item-fab");
|
||||
let fileInput;
|
||||
// State
|
||||
let allData = {};
|
||||
let currentFile = null;
|
||||
|
||||
// Initialize
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
// Add event listeners
|
||||
searchInput.addEventListener("input", filterData);
|
||||
saveBtn.addEventListener("click", saveChanges);
|
||||
closeBtn.addEventListener("click", closeEditor);
|
||||
closeModalBtn.addEventListener("click", closeModal);
|
||||
saveItemBtn.addEventListener("click", saveItemChanges);
|
||||
cancelEditBtn.addEventListener("click", closeModal);
|
||||
fabButton.addEventListener("click", addItemModal);
|
||||
|
||||
fileListItems.forEach((item) => {
|
||||
item.addEventListener("click", () => {
|
||||
// Update active state
|
||||
fileListItems.forEach((i) => i.classList.remove("active"));
|
||||
item.classList.add("active");
|
||||
|
||||
// Change current file
|
||||
currentFile = item.dataset.file;
|
||||
|
||||
// Load file data - in a real implementation, this would trigger a fetch to the server
|
||||
// For now, we'll just use the data we already have
|
||||
currentFile = item.dataset.file;
|
||||
renderData();
|
||||
});
|
||||
});
|
||||
|
||||
// Listen for NUI messages from FiveM
|
||||
window.addEventListener("message", function (event) {
|
||||
const data = event.data;
|
||||
|
||||
if (data.action === "populateData") {
|
||||
// Expect data.data to be an object with each file's data
|
||||
configData = data.data;
|
||||
renderData();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const templates = {
|
||||
jobs: {
|
||||
defaultDuty: false,
|
||||
offDutyPay: false,
|
||||
type: "",
|
||||
label: "",
|
||||
grades: [
|
||||
{
|
||||
name: "",
|
||||
isboss: false,
|
||||
payment: 0,
|
||||
},
|
||||
],
|
||||
},
|
||||
gangs: {
|
||||
label: "",
|
||||
grades: [
|
||||
{
|
||||
name: "",
|
||||
isboss: false,
|
||||
level: 0,
|
||||
},
|
||||
],
|
||||
},
|
||||
items: {
|
||||
unique: false,
|
||||
shouldClose: false,
|
||||
useable: false,
|
||||
name: "",
|
||||
label: "",
|
||||
weight: 0,
|
||||
type: "",
|
||||
image: "",
|
||||
description: "",
|
||||
ammotype: "",
|
||||
},
|
||||
vehicles: {
|
||||
brand: "",
|
||||
price: 0,
|
||||
name: "",
|
||||
category: "",
|
||||
model: "",
|
||||
type: "",
|
||||
shop: ["pdm"],
|
||||
},
|
||||
weapons: {
|
||||
name: "",
|
||||
label: "",
|
||||
damageReason: "",
|
||||
weapontype: "",
|
||||
ammotype: "",
|
||||
},
|
||||
};
|
||||
|
||||
function addItemModal() {
|
||||
const modal = document.getElementById("edit-modal");
|
||||
const editorForm = document.getElementById("editor-form");
|
||||
|
||||
// Clear the form and set it up for adding a new item
|
||||
editorForm.innerHTML = ""; // Clear any existing content
|
||||
modal.classList.remove("hidden"); // Show the modal
|
||||
|
||||
// Get the template for the current category
|
||||
const template = templates[currentFile] || {};
|
||||
|
||||
// Add fields for the new item based on the template
|
||||
Object.entries(template).forEach(([key, value]) => {
|
||||
const formGroup = document.createElement("div");
|
||||
formGroup.className = "form-group";
|
||||
|
||||
const label = document.createElement("label");
|
||||
label.textContent = key;
|
||||
formGroup.appendChild(label);
|
||||
|
||||
if (typeof value === "boolean" || typeof value === "string" || typeof value === "number") {
|
||||
const field = createInputField({
|
||||
key,
|
||||
value,
|
||||
onChange: () => {}, // No need to handle it now, we'll read from DOM on save
|
||||
});
|
||||
formGroup.appendChild(field.querySelector("input"));
|
||||
} else if (Array.isArray(value)) {
|
||||
const arrayField = createArrayField({
|
||||
key,
|
||||
array: value,
|
||||
onItemChange: () => {}, // Again, no live tracking needed
|
||||
onItemRemove: (index) => {
|
||||
value.splice(index, 1);
|
||||
addItemModal(); // re-render modal
|
||||
},
|
||||
onItemAdd: () => {
|
||||
// Clone first item or fallback
|
||||
if (value.length > 0 && typeof value[0] === "object") {
|
||||
const newItem = {};
|
||||
Object.entries(value[0]).forEach(([k, v]) => {
|
||||
newItem[k] = typeof v === "number" ? 0 : typeof v === "boolean" ? false : "";
|
||||
});
|
||||
value.push(newItem);
|
||||
} else {
|
||||
value.push("");
|
||||
}
|
||||
addItemModal(); // re-render modal
|
||||
},
|
||||
});
|
||||
arrayField.id = `new-item-${key}`;
|
||||
formGroup.appendChild(arrayField);
|
||||
} else {
|
||||
const input = document.createElement("input");
|
||||
input.type = "text";
|
||||
input.className = "form-control";
|
||||
input.value = value;
|
||||
formGroup.appendChild(input);
|
||||
}
|
||||
|
||||
editorForm.appendChild(formGroup);
|
||||
});
|
||||
|
||||
// Add Save and Cancel buttons
|
||||
const saveButton = document.getElementById("save-item-btn");
|
||||
saveButton.onclick = saveNewItem;
|
||||
|
||||
const cancelButton = document.getElementById("cancel-edit-btn");
|
||||
cancelButton.onclick = () => {
|
||||
modal.classList.add("hidden"); // Hide the modal
|
||||
};
|
||||
}
|
||||
|
||||
function saveNewItem() {
|
||||
const template = templates[currentFile] || {};
|
||||
const newItem = {};
|
||||
|
||||
// Populate the new item based on the template
|
||||
Object.entries(template).forEach(([key, value]) => {
|
||||
if (Array.isArray(value)) {
|
||||
// Handle arrays
|
||||
const arrayContainer = document.getElementById(`new-item-${key}`);
|
||||
const arrayItems = Array.from(arrayContainer.querySelectorAll(".array-item"));
|
||||
newItem[key] = arrayItems.map((itemGroup) => {
|
||||
const item = {};
|
||||
Array.from(itemGroup.querySelectorAll("input")).forEach((input) => {
|
||||
const itemKey = input.dataset.itemKey;
|
||||
item[itemKey] = input.type === "number" ? parseFloat(input.value) || 0 : input.value;
|
||||
});
|
||||
return item;
|
||||
});
|
||||
} else {
|
||||
// Handle simple values
|
||||
const input = document.getElementById(`new-item-${key}`);
|
||||
if (input) {
|
||||
newItem[key] = input.type === "checkbox" ? input.checked : input.value;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Add the new item to the current category
|
||||
if (!configData[currentFile]) {
|
||||
configData[currentFile] = {};
|
||||
}
|
||||
const itemName = document.getElementById("new-item-name").value.trim();
|
||||
if (!itemName) {
|
||||
alert("Please provide a name for the new item.");
|
||||
return;
|
||||
}
|
||||
configData[currentFile][itemName] = newItem;
|
||||
|
||||
// Update the UI
|
||||
// Select a file and render its data
|
||||
function selectFile(file, liElement) {
|
||||
document.querySelectorAll(".file-list li").forEach((li) => li.classList.remove("active"));
|
||||
liElement.classList.add("active");
|
||||
currentFile = file;
|
||||
renderData();
|
||||
|
||||
// Close the modal
|
||||
document.getElementById("edit-modal").classList.add("hidden");
|
||||
}
|
||||
|
||||
// Render data in the container
|
||||
// Render JSON data for the current file
|
||||
function renderData() {
|
||||
dataContainer.innerHTML = "";
|
||||
|
||||
if (!configData[currentFile]) {
|
||||
dataContainer.innerHTML = "<p>No data available for this file.</p>";
|
||||
if (!currentFile) return;
|
||||
const data = allData[currentFile];
|
||||
if (!data) {
|
||||
console.error(`No data found for ${currentFile}`);
|
||||
return;
|
||||
}
|
||||
buildEditor(data);
|
||||
}
|
||||
|
||||
const data = configData[currentFile];
|
||||
const searchText = searchInput.value.toLowerCase();
|
||||
|
||||
// For object-based data (like jobs)
|
||||
// Build main editor UI from data object
|
||||
function buildEditor(data) {
|
||||
const container = document.getElementById("data-container");
|
||||
container.innerHTML = "";
|
||||
Object.entries(data).forEach(([key, value]) => {
|
||||
// If there's a search term, filter the data
|
||||
if (searchText && !key.toLowerCase().includes(searchText) && !JSON.stringify(value).toLowerCase().includes(searchText)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const card = document.createElement("div");
|
||||
card.className = "data-card";
|
||||
card.dataset.key = key;
|
||||
card.innerHTML = `<h3>${key}</h3>`;
|
||||
|
||||
// Create card header
|
||||
const header = document.createElement("h3");
|
||||
header.textContent = key;
|
||||
card.appendChild(header);
|
||||
// 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);
|
||||
|
||||
// Create properties section
|
||||
const properties = document.createElement("div");
|
||||
properties.className = "data-properties";
|
||||
const editBtn = document.createElement("button");
|
||||
editBtn.className = "btn-edit";
|
||||
editBtn.innerHTML = `<span class='material-symbols-rounded'>edit</span> Edit`;
|
||||
editBtn.addEventListener("click", () => openEditModal(key, value));
|
||||
card.appendChild(editBtn);
|
||||
|
||||
// Add main properties (not going too deep)
|
||||
Object.entries(value).forEach(([propKey, propValue]) => {
|
||||
// Skip complex objects for the card view
|
||||
if (typeof propValue === "object" && propValue !== null) {
|
||||
return;
|
||||
}
|
||||
|
||||
const property = document.createElement("div");
|
||||
property.className = "property";
|
||||
|
||||
const label = document.createElement("span");
|
||||
label.className = "property-label";
|
||||
label.textContent = propKey;
|
||||
|
||||
const val = document.createElement("span");
|
||||
val.className = "property-value";
|
||||
val.textContent = propValue;
|
||||
|
||||
property.appendChild(label);
|
||||
property.appendChild(val);
|
||||
properties.appendChild(property);
|
||||
});
|
||||
|
||||
card.appendChild(properties);
|
||||
|
||||
// Add click event to edit
|
||||
card.addEventListener("click", () => {
|
||||
editItem(key, value);
|
||||
});
|
||||
|
||||
dataContainer.appendChild(card);
|
||||
container.appendChild(card);
|
||||
});
|
||||
}
|
||||
|
||||
// Create form for editing
|
||||
function createForm(obj) {
|
||||
editorForm.innerHTML = "";
|
||||
|
||||
const sortedKeys = Object.keys(obj).sort((a, b) => {
|
||||
const typeOrder = (value) => {
|
||||
if (typeof value === "boolean") return 0;
|
||||
if (typeof value === "string" || typeof value === "number") return 1;
|
||||
if (Array.isArray(value)) return 2;
|
||||
return 3;
|
||||
};
|
||||
return typeOrder(obj[a]) - typeOrder(obj[b]);
|
||||
});
|
||||
|
||||
sortedKeys.forEach((key) => {
|
||||
const value = obj[key];
|
||||
const formGroup = document.createElement("div");
|
||||
formGroup.className = "form-group";
|
||||
// Recursive field builder
|
||||
function buildFormFields(container, data, prefix = "") {
|
||||
Object.entries(data).forEach(([field, val]) => {
|
||||
const group = document.createElement("div");
|
||||
group.className = "form-group";
|
||||
|
||||
const label = document.createElement("label");
|
||||
label.htmlFor = `field-${key}`;
|
||||
label.textContent = key;
|
||||
formGroup.appendChild(label);
|
||||
label.htmlFor = "field-" + prefix + field;
|
||||
label.textContent = field;
|
||||
group.appendChild(label);
|
||||
|
||||
if (typeof value === "boolean" || typeof value === "string" || typeof value === "number") {
|
||||
const field = createInputField({
|
||||
key,
|
||||
value,
|
||||
onChange: (val) => updateValue(key, val),
|
||||
});
|
||||
formGroup.appendChild(field.querySelector("input"));
|
||||
} else if (Array.isArray(value)) {
|
||||
const arrayField = createArrayField({
|
||||
key,
|
||||
array: value,
|
||||
onItemChange: (index, itemKey, val) => {
|
||||
if (itemKey) {
|
||||
updateArrayObjectValue(key, index, itemKey, val);
|
||||
} else {
|
||||
updateArrayValue(key, index, val);
|
||||
}
|
||||
},
|
||||
onItemRemove: (index) => removeArrayItem(key, index),
|
||||
onItemAdd: () => addArrayItem(key, value),
|
||||
});
|
||||
formGroup.appendChild(arrayField);
|
||||
} else {
|
||||
// Fallback for objects or unknown types
|
||||
const objectContainer = document.createElement("div");
|
||||
objectContainer.className = "complex-object";
|
||||
if (typeof val === "boolean") {
|
||||
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 header = document.createElement("div");
|
||||
header.className = "complex-object-header";
|
||||
objectContainer.appendChild(header);
|
||||
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 textarea = document.createElement("textarea");
|
||||
textarea.className = "form-control";
|
||||
textarea.value = JSON.stringify(value, null, 2);
|
||||
textarea.dataset.key = key;
|
||||
|
||||
textarea.addEventListener("input", (e) => {
|
||||
try {
|
||||
const parsed = JSON.parse(e.target.value);
|
||||
updateValue(key, parsed);
|
||||
textarea.style.borderColor = "#3d3d3d";
|
||||
} catch (err) {
|
||||
textarea.style.borderColor = "#ff4d4d";
|
||||
itemGroup.append(itemLabel, input);
|
||||
group.appendChild(itemGroup);
|
||||
}
|
||||
});
|
||||
|
||||
objectContainer.appendChild(textarea);
|
||||
formGroup.appendChild(objectContainer);
|
||||
}
|
||||
|
||||
editorForm.appendChild(formGroup);
|
||||
});
|
||||
}
|
||||
|
||||
// UTILS
|
||||
|
||||
function createInputField({ key, value, onChange }) {
|
||||
const formGroup = document.createElement("div");
|
||||
formGroup.className = "form-group";
|
||||
|
||||
const label = document.createElement("label");
|
||||
label.textContent = key;
|
||||
formGroup.appendChild(label);
|
||||
|
||||
const input = document.createElement("input");
|
||||
|
||||
if (typeof value === "boolean") {
|
||||
input.type = "checkbox";
|
||||
input.checked = value;
|
||||
} else if (typeof value === "number") {
|
||||
input.type = "number";
|
||||
input.value = value;
|
||||
} else {
|
||||
input.type = "text";
|
||||
input.value = value;
|
||||
}
|
||||
|
||||
input.className = "form-control";
|
||||
|
||||
input.addEventListener("input", (e) => {
|
||||
let newValue;
|
||||
if (input.type === "checkbox") {
|
||||
newValue = input.checked;
|
||||
} else if (input.type === "number") {
|
||||
newValue = parseFloat(e.target.value) || 0;
|
||||
} else {
|
||||
newValue = e.target.value;
|
||||
}
|
||||
|
||||
onChange(newValue);
|
||||
});
|
||||
|
||||
formGroup.appendChild(input);
|
||||
return formGroup;
|
||||
}
|
||||
|
||||
function createArrayField({ key, array, onItemChange, onItemRemove, onItemAdd }) {
|
||||
const container = document.createElement("div");
|
||||
container.className = "complex-object";
|
||||
|
||||
const header = document.createElement("div");
|
||||
header.className = "complex-object-header";
|
||||
|
||||
const addBtn = document.createElement("button");
|
||||
addBtn.className = "add-item-btn";
|
||||
addBtn.textContent = "Add Item";
|
||||
addBtn.addEventListener("click", (e) => {
|
||||
e.preventDefault();
|
||||
onItemAdd();
|
||||
});
|
||||
|
||||
header.appendChild(addBtn);
|
||||
container.appendChild(header);
|
||||
|
||||
array.forEach((item, index) => {
|
||||
const arrayItem = document.createElement("div");
|
||||
arrayItem.className = "array-item";
|
||||
|
||||
// Remove button
|
||||
const removeBtn = document.createElement("button");
|
||||
removeBtn.className = "remove-item-btn";
|
||||
removeBtn.textContent = "x";
|
||||
removeBtn.addEventListener("click", (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
onItemRemove(index);
|
||||
});
|
||||
arrayItem.appendChild(removeBtn);
|
||||
|
||||
if (typeof item === "object" && item !== null) {
|
||||
Object.entries(item).forEach(([itemKey, itemValue]) => {
|
||||
const field = createInputField({
|
||||
key: itemKey,
|
||||
value: itemValue,
|
||||
onChange: (val) => onItemChange(index, itemKey, val),
|
||||
});
|
||||
arrayItem.appendChild(field);
|
||||
});
|
||||
} 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);
|
||||
} else {
|
||||
const input = document.createElement("input");
|
||||
input.type = "text";
|
||||
input.value = val;
|
||||
input.name = prefix + field;
|
||||
input.id = "field-" + prefix + field;
|
||||
input.className = "form-control";
|
||||
input.value = item;
|
||||
input.addEventListener("input", (e) => {
|
||||
onItemChange(index, null, e.target.value);
|
||||
});
|
||||
arrayItem.appendChild(input);
|
||||
group.appendChild(input);
|
||||
}
|
||||
|
||||
container.appendChild(arrayItem);
|
||||
container.appendChild(group);
|
||||
});
|
||||
|
||||
return container;
|
||||
}
|
||||
|
||||
// Filter data based on search input
|
||||
function filterData() {
|
||||
renderData();
|
||||
}
|
||||
// Open modal to edit a key
|
||||
function openEditModal(key, value) {
|
||||
const modal = document.getElementById("edit-modal");
|
||||
modal.querySelector("h2").textContent = `Edit '${key}'`;
|
||||
const formContainer = document.getElementById("editor-form");
|
||||
formContainer.innerHTML = "";
|
||||
|
||||
// Edit an item
|
||||
function editItem(key, value) {
|
||||
currentEditItem = { key, value: JSON.parse(JSON.stringify(value)) };
|
||||
editPath = null; // Reset path for root level editing
|
||||
const form = document.createElement("form");
|
||||
form.id = "editor-form-inner";
|
||||
|
||||
// Create form for editing
|
||||
createForm(value);
|
||||
// Determine if value is object or primitive
|
||||
const isObj = value !== null && typeof value === "object";
|
||||
const editableData = isObj ? value : { [key]: value };
|
||||
const prefix = isObj ? "" : key + ".";
|
||||
|
||||
// Show the modal
|
||||
editModal.classList.remove("hidden");
|
||||
}
|
||||
buildFormFields(form, editableData, prefix);
|
||||
formContainer.appendChild(form);
|
||||
|
||||
function setDeepValue(obj, pathArray, value) {
|
||||
const lastKey = pathArray.pop();
|
||||
const target = pathArray.reduce((acc, key) => acc[key], obj);
|
||||
target[lastKey] = value;
|
||||
}
|
||||
// Save handler
|
||||
document.getElementById("save-item-btn").onclick = async (e) => {
|
||||
e.preventDefault();
|
||||
const formElem = document.getElementById("editor-form-inner");
|
||||
const updated = { ...allData[currentFile] };
|
||||
const resultValue = {};
|
||||
|
||||
function updateValue(key, value) {
|
||||
const path = editPath ? editPath.split(".").concat(key) : [key];
|
||||
setDeepValue(currentEditItem.value, path, value);
|
||||
}
|
||||
Array.from(formElem.elements).forEach((el) => {
|
||||
if (!el.name) return;
|
||||
const name = el.name;
|
||||
let val;
|
||||
if (el.type === "checkbox") val = el.checked;
|
||||
else if (el.tagName === "TEXTAREA") {
|
||||
try {
|
||||
val = JSON.parse(el.value);
|
||||
} catch {
|
||||
val = el.value;
|
||||
}
|
||||
} else val = el.value;
|
||||
|
||||
function updateArrayValue(arrayKey, index, value) {
|
||||
const path = editPath ? editPath.split(".").concat([arrayKey, index]) : [arrayKey, index];
|
||||
setDeepValue(currentEditItem.value, path, value);
|
||||
}
|
||||
|
||||
function updateArrayObjectValue(arrayKey, index, itemKey, value) {
|
||||
const path = editPath ? editPath.split(".").concat([arrayKey, index, itemKey]) : [arrayKey, index, itemKey];
|
||||
setDeepValue(currentEditItem.value, path, value);
|
||||
}
|
||||
|
||||
function updateArray(arrayKey, action, index = null, newItem = null) {
|
||||
const path = editPath ? editPath.split(".").concat([arrayKey]) : [arrayKey];
|
||||
const target = path.reduce((acc, key) => acc[key], currentEditItem.value);
|
||||
|
||||
if (action === "add") {
|
||||
target.push(newItem);
|
||||
} else if (action === "remove" && index !== null) {
|
||||
target.splice(index, 1);
|
||||
}
|
||||
|
||||
createForm(currentEditItem.value);
|
||||
}
|
||||
|
||||
function addArrayItem(arrayKey, array) {
|
||||
let newItem;
|
||||
if (array.length > 0 && typeof array[0] === "object" && array[0] !== null) {
|
||||
newItem = {};
|
||||
Object.keys(array[0]).forEach((key) => {
|
||||
const sample = array[0][key];
|
||||
newItem[key] = typeof sample === "number" ? 0 : typeof sample === "boolean" ? false : "";
|
||||
// assign into nested structure
|
||||
const path = name.split(/\.|\[|\]/).filter((p) => p);
|
||||
let target = resultValue;
|
||||
path.forEach((part, idx) => {
|
||||
const last = idx === path.length - 1;
|
||||
if (last) target[part] = val;
|
||||
else {
|
||||
target[part] = target[part] || {};
|
||||
target = target[part];
|
||||
}
|
||||
});
|
||||
});
|
||||
} else {
|
||||
newItem = typeof array[0] === "number" ? 0 : "";
|
||||
|
||||
updated[key] = Array.isArray(value) || (value !== null && typeof value === "object") ? resultValue : resultValue[key];
|
||||
await saveConfig(updated);
|
||||
};
|
||||
|
||||
setupModalClose();
|
||||
modal.classList.remove("hidden");
|
||||
}
|
||||
|
||||
// Open modal to add a new key/value
|
||||
function openNewItemModal() {
|
||||
const modal = document.getElementById("edit-modal");
|
||||
modal.querySelector("h2").textContent = "Add New Item";
|
||||
const formContainer = document.getElementById("editor-form");
|
||||
formContainer.innerHTML = "";
|
||||
|
||||
const form = document.createElement("form");
|
||||
form.id = "editor-form-inner";
|
||||
|
||||
// Key input
|
||||
const keyGroup = document.createElement("div");
|
||||
keyGroup.className = "form-group";
|
||||
const keyLabel = document.createElement("label");
|
||||
keyLabel.htmlFor = "new-key";
|
||||
keyLabel.textContent = "Key";
|
||||
const keyInput = document.createElement("input");
|
||||
keyInput.type = "text";
|
||||
keyInput.id = "new-key";
|
||||
keyInput.name = "key";
|
||||
keyInput.className = "form-control";
|
||||
keyGroup.append(keyLabel, keyInput);
|
||||
form.appendChild(keyGroup);
|
||||
|
||||
// Value input
|
||||
const valGroup = document.createElement("div");
|
||||
valGroup.className = "form-group";
|
||||
const valLabel = document.createElement("label");
|
||||
valLabel.htmlFor = "new-value";
|
||||
valLabel.textContent = "Value";
|
||||
const valInput = document.createElement("input");
|
||||
valInput.type = "text";
|
||||
valInput.id = "new-value";
|
||||
valInput.name = "value";
|
||||
valInput.className = "form-control";
|
||||
valGroup.append(valLabel, valInput);
|
||||
form.appendChild(valGroup);
|
||||
|
||||
formContainer.appendChild(form);
|
||||
|
||||
// Add handler
|
||||
document.getElementById("save-item-btn").onclick = async (e) => {
|
||||
e.preventDefault();
|
||||
const key = document.getElementById("new-key").value.trim();
|
||||
const raw = document.getElementById("new-value").value;
|
||||
if (!key) {
|
||||
console.error("Key cannot be empty.");
|
||||
return;
|
||||
}
|
||||
let val;
|
||||
if (raw.toLowerCase() === "true" || raw.toLowerCase() === "false") val = raw.toLowerCase() === "true";
|
||||
else if ((raw.startsWith("{") && raw.endsWith("}")) || (raw.startsWith("[") && raw.endsWith("]"))) {
|
||||
try {
|
||||
val = JSON.parse(raw);
|
||||
} catch {
|
||||
val = raw;
|
||||
}
|
||||
} else val = raw;
|
||||
const updated = { ...allData[currentFile] };
|
||||
updated[key] = val;
|
||||
await saveConfig(updated);
|
||||
};
|
||||
|
||||
setupModalClose();
|
||||
modal.classList.remove("hidden");
|
||||
}
|
||||
|
||||
// Save full config via NUI
|
||||
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 }),
|
||||
});
|
||||
const result = await res.json();
|
||||
if (result === "ok") {
|
||||
allData[currentFile] = configData;
|
||||
console.log("Saved successfully!");
|
||||
closeModal();
|
||||
renderData();
|
||||
} else throw new Error(result);
|
||||
} catch (err) {
|
||||
console.error("Save failed.", err);
|
||||
}
|
||||
updateArray(arrayKey, "add", null, newItem);
|
||||
}
|
||||
|
||||
function removeArrayItem(arrayKey, index) {
|
||||
updateArray(arrayKey, "remove", index);
|
||||
// Modal close handlers
|
||||
function setupModalClose() {
|
||||
document.getElementById("close-modal-btn").onclick = closeModal;
|
||||
document.getElementById("cancel-edit-btn").onclick = (e) => {
|
||||
e.preventDefault();
|
||||
closeModal();
|
||||
};
|
||||
}
|
||||
|
||||
// Save changes to the edited item
|
||||
function saveItemChanges() {
|
||||
configData[currentFile][currentEditItem.key] = currentEditItem.value;
|
||||
closeModal();
|
||||
renderData();
|
||||
}
|
||||
|
||||
// Close the edit modal
|
||||
function closeModal() {
|
||||
editModal.classList.add("hidden");
|
||||
currentEditItem = null;
|
||||
editPath = null;
|
||||
document.getElementById("edit-modal").classList.add("hidden");
|
||||
}
|
||||
|
||||
// Save all changes to the server
|
||||
function saveChanges() {
|
||||
// Send data back to the client
|
||||
fetch(`https://${GetParentResourceName()}/saveConfig`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json; charset=UTF-8",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
file: currentFile,
|
||||
data: configData[currentFile],
|
||||
}),
|
||||
}).catch((err) => console.error("Error:", err));
|
||||
// Search/filter cards
|
||||
function setupSearch() {
|
||||
document.getElementById("search-input").addEventListener("input", (e) => {
|
||||
const term = e.target.value.toLowerCase();
|
||||
document.querySelectorAll(".data-card").forEach((card) => {
|
||||
card.style.display = card.dataset.key.toLowerCase().includes(term) ? "" : "none";
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Close the editor
|
||||
function closeEditor() {
|
||||
fetch(`https://${GetParentResourceName()}/closeEditor`, {
|
||||
method: "POST",
|
||||
}).catch((err) => console.error("Error:", err));
|
||||
// Keyboard shortcuts
|
||||
function setupKeyboard() {
|
||||
window.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Escape") closeModal();
|
||||
});
|
||||
}
|
||||
|
||||
// Initialize UI
|
||||
window.addEventListener("DOMContentLoaded", () => {
|
||||
document.querySelectorAll(".file-list li").forEach((li) => {
|
||||
const file = li.dataset.file;
|
||||
li.addEventListener("click", () => selectFile(file, li));
|
||||
});
|
||||
document.getElementById("add-item-fab").onclick = openNewItemModal;
|
||||
setupSearch();
|
||||
setupKeyboard();
|
||||
});
|
||||
|
||||
// Listen for NUI messages and auto-select first file
|
||||
window.addEventListener("message", (event) => {
|
||||
if (event.data.action === "populateData") {
|
||||
allData = event.data.data;
|
||||
if (!currentFile) {
|
||||
const firstLi = document.querySelector(".file-list li");
|
||||
if (firstLi) firstLi.click();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
+4
-6
@@ -2,12 +2,10 @@ local resourceName = GetCurrentResourceName()
|
||||
|
||||
-- Load Config
|
||||
|
||||
if IsDuplicityVersion() then
|
||||
local configData = LoadResourceFile(resourceName, 'shared/config.json')
|
||||
if not configData then return print('^1[QBCore] Failed to Load Config JSON File') end
|
||||
QBCore.Config = json.decode(configData) or {}
|
||||
print('^2[QBCore] Loaded Config.json')
|
||||
end
|
||||
local Config = LoadResourceFile(resourceName, 'shared/config.json')
|
||||
if not Config then return print('^1[QBCore] Failed to Load Config JSON File') end
|
||||
QBCore.Config = json.decode(Config) or {}
|
||||
print('^2[QBCore] Loaded Config.json')
|
||||
|
||||
-- Load Vehicles
|
||||
|
||||
|
||||
Reference in New Issue
Block a user