aboutsummaryrefslogtreecommitdiff
path: root/internal/admin/static/moduleeditor.js
diff options
context:
space:
mode:
Diffstat (limited to 'internal/admin/static/moduleeditor.js')
-rw-r--r--internal/admin/static/moduleeditor.js318
1 files changed, 318 insertions, 0 deletions
diff --git a/internal/admin/static/moduleeditor.js b/internal/admin/static/moduleeditor.js
new file mode 100644
index 0000000..128148d
--- /dev/null
+++ b/internal/admin/static/moduleeditor.js
@@ -0,0 +1,318 @@
+var moduleData = null;
+var moduleID = null;
+var expandedCards = {};
+var addedSections = {};
+var cardWidths = {};
+
+var MODULE_SECTIONS = [
+ {
+ id: 'core', label: 'Core', always: true,
+ fields: [
+ ['name', 'Name', 'text'],
+ ['level', 'Level', 'number', '', 'narrow'],
+ ['max_hit', 'Max Hit', 'number', '', 'narrow'],
+ ['base_xp', 'Base XP', 'number', '', 'narrow'],
+ ['category', 'Category', 'select', 'combat|utility|enchant|processing|transport'],
+ ['element', 'Element', 'text'],
+ ['destination', 'Destination', 'number', '', 'narrow'],
+ ],
+ inline: [
+ {label:'Junk Cost', key:'junk_cost', type:'kv', valType:'number'},
+ ]
+ },
+ {
+ id: 'sequence', label: 'Sequence', path: 'sequence', isArray: true,
+ detect: function(d) { return d.sequence && Array.isArray(d.sequence); },
+ fields: [
+ ['message', 'Message', 'text', '', 'wide'],
+ ['delay', 'Delay', 'number', '', 'narrow'],
+ ]
+ }
+];
+
+function initModuleEditor() {
+ editorType = 'modules';
+ editorFields = [];
+ loadList();
+ if (window.location.hash) loadModuleEditor(window.location.hash.substring(1));
+}
+
+function cardPath(sec) { return sec.path || ''; }
+
+function getVal(data, sec, key) {
+ return ced_getVal(data, sec, key);
+}
+
+function fieldID(sec, key, idx) {
+ return ced_fieldID(sec, key, idx);
+}
+
+function setupSearchFields() { ced_setupSearchFields(); }
+
+function collectFieldValue(el, type) { return ced_collectFieldValue(el, type); }
+
+function loadModuleEditor(id) {
+ moduleID = id;
+ currentID = id;
+ renderList('');
+ window.location.hash = id;
+ API.get('/api/modules/' + encodeURIComponent(id)).then(function(data) {
+ moduleData = data;
+ renderModuleEditor(id, data);
+ }).catch(function(e) {
+ $('#editorMain').innerHTML = '<p style="color:var(--danger)">Failed to load: ' + esc(e.message) + '</p>';
+ });
+}
+
+function loadItem(id) { loadModuleEditor(id); }
+
+function renderModuleEditor(id, data) {
+ var html = '<h2>Module: ' + esc(id) + '</h2>';
+ html += '<div class="tabs"><button class="tab active" onclick="switchTab(event,\'fields\')">Fields</button>';
+ html += '<button class="tab" onclick="switchTab(event,\'yaml\')">Raw YAML</button></div>';
+
+ html += '<div class="tab-content" id="tabFields">';
+ html += '<div class="obj-fields-wrap">';
+ MODULE_SECTIONS.forEach(function(sec) {
+ if (!sec.always && sec.detect && !sec.detect(data) && !addedSections[sec.id]) return;
+ html += renderCard(sec, data);
+ });
+ html += '</div>';
+
+ html += '<div class="add-section-bar">';
+ html += '<select id="addSectionSelect">';
+ html += '<option value="">+ Add Section...</option>';
+ MODULE_SECTIONS.forEach(function(sec) {
+ if (sec.always) return;
+ if (sec.detect && sec.detect(data)) return;
+ if (addedSections[sec.id]) return;
+ html += '<option value="' + sec.id + '">' + esc(sec.label) + '</option>';
+ });
+ html += '</select>';
+ html += '<button class="btn btn-primary btn-sm" onclick="addSection()">Add</button>';
+ html += '</div>';
+ html += '</div>';
+
+ html += '<div class="tab-content" id="tabYaml" style="display:none">';
+ html += '<pre>' + esc(data._raw || JSON.stringify(data, null, 2)) + '</pre>';
+ html += '</div>';
+
+ html += '<div class="btn-row">';
+ html += '<button class="btn btn-primary" onclick="saveModule()">Save</button>';
+ html += '<button class="btn btn-danger" onclick="deleteModule()">Delete</button>';
+ html += '</div>';
+
+ $('#editorMain').innerHTML = html;
+ setupSearchFields();
+}
+
+function renderCurrent() {
+ if (!moduleData || !moduleID) return;
+ renderModuleEditor(moduleID, moduleData);
+}
+
+function renderCard(sec, data) {
+ var collapsed = expandedCards[sec.id] === false;
+ var isFull = cardWidths[sec.id] !== undefined ? cardWidths[sec.id] : (sec.fullWidth || false);
+ var fullClass = isFull ? ' obj-card-full' : '';
+ var h = '<div class="obj-card' + fullClass + '" data-card="' + sec.id + '">';
+ h += '<div class="obj-card-header" onclick="toggleCard(\'' + sec.id + '\')">';
+ h += '<span class="obj-card-arrow">' + (collapsed ? '&#9654;' : '&#9660;') + '</span>';
+ h += '<button class="btn btn-sm obj-card-expand" onclick="event.stopPropagation();toggleCardWidth(\'' + sec.id + '\')" title="' + (isFull ? 'Half width' : 'Full width') + '">' + (isFull ? '\u229F' : '\u229E') + '</button>';
+ h += '<span class="obj-card-label">' + sec.label + '</span>';
+ if (!sec.always) {
+ h += '<button class="btn btn-sm btn-danger obj-card-remove" onclick="event.stopPropagation();removeSection(\'' + sec.id + '\')">X</button>';
+ }
+ h += '</div>';
+ if (!collapsed) {
+ h += '<div class="obj-card-body">';
+
+ if (sec.isArray) {
+ h += renderArraySection(sec, data);
+ } else {
+ h += '<div class="obj-card-grid">';
+ sec.fields.forEach(function(f) {
+ h += renderField(sec, f, data, -1);
+ });
+ h += '</div>';
+
+ if (sec.inline) {
+ sec.inline.forEach(function(il) {
+ if (il.type === 'kv') {
+ h += ced_renderKV(sec, il, data);
+ }
+ });
+ }
+ }
+ h += '</div>';
+ }
+ h += '</div>';
+ return h;
+}
+
+function renderArraySection(sec, data) {
+ var arr = moduleData[cardPath(sec)] || [];
+ var h = '';
+ arr.forEach(function(item, idx) {
+ h += '<div class="obj-sub-row" data-idx="' + idx + '">';
+ h += '<div class="obj-card-grid">';
+ sec.fields.forEach(function(f) {
+ h += renderField(sec, f, data, idx);
+ });
+ h += '</div>';
+ h += '<button class="btn btn-sm btn-danger obj-sub-remove" onclick="removeArrayItem(\'' + sec.id + '\',' + idx + ')">X</button>';
+ h += '</div>';
+ });
+ h += '<button class="btn btn-sm obj-sub-add" onclick="addArrayItem(\'' + sec.id + '\')">+ Add Step</button>';
+ return h;
+}
+
+function renderField(sec, f, data, idx) {
+ return ced_renderField(sec, f, data, idx, null, null, cardPath, fieldID, getVal);
+}
+
+function toggleCard(id) {
+ expandedCards[id] = expandedCards[id] === false ? true : false;
+ renderCurrent();
+}
+
+function toggleCardWidth(id) {
+ cardWidths[id] = !cardWidths[id];
+ renderCurrent();
+}
+
+function removeSection(id) {
+ var sec = MODULE_SECTIONS.find(function(s) { return s.id === id; });
+ if (!sec) return;
+ if (sec.path) {
+ delete moduleData[sec.path];
+ }
+ delete addedSections[id];
+ renderCurrent();
+}
+
+function addSection() {
+ var sel = $('#addSectionSelect');
+ var id = sel.value;
+ if (!id) return;
+ var sec = MODULE_SECTIONS.find(function(s) { return s.id === id; });
+ if (!sec) return;
+
+ if (sec.path && sec.isArray) {
+ moduleData[sec.path] = [];
+ } else if (sec.path) {
+ moduleData[sec.path] = {};
+ }
+ addedSections[id] = true;
+ expandedCards[id] = true;
+ renderCurrent();
+}
+
+function addArrayItem(cardID) {
+ var sec = MODULE_SECTIONS.find(function(s) { return s.id === cardID; });
+ if (!sec || !sec.isArray) return;
+ var arr = moduleData[sec.path] || [];
+ var empty = {};
+ sec.fields.forEach(function(f) {
+ empty[f[0]] = f[2] === 'checkbox' ? false : (f[2] === 'number' ? 0 : '');
+ });
+ arr.push(empty);
+ moduleData[sec.path] = arr;
+ renderCurrent();
+}
+
+function removeArrayItem(cardID, idx) {
+ var sec = MODULE_SECTIONS.find(function(s) { return s.id === cardID; });
+ if (!sec || !sec.isArray) return;
+ var arr = moduleData[sec.path] || [];
+ arr.splice(idx, 1);
+ renderCurrent();
+}
+
+function saveModule() {
+ if (!ced_validateFields(MODULE_SECTIONS, fieldID, null)) return;
+
+ var out = {};
+ MODULE_SECTIONS.forEach(function(sec) {
+ if (sec.isArray) {
+ var arr = [];
+ var card = document.querySelector('.obj-card[data-card="' + sec.id + '"]');
+ if (!card) return;
+ var rows = card.querySelectorAll('.obj-sub-row');
+ rows.forEach(function(row, idx) {
+ var item = {};
+ sec.fields.forEach(function(f) {
+ var fid = fieldID(sec, f[0], idx);
+ var el = document.getElementById(fid);
+ if (el) item[f[0]] = collectFieldValue(el, f[2]);
+ });
+ if (Object.keys(item).length > 0) arr.push(item);
+ });
+ if (arr.length > 0) { out[sec.path] = arr; }
+ return;
+ }
+
+ var sectionObj = {};
+ var hasValues = sec.always;
+
+ if (sec.fields) {
+ sec.fields.forEach(function(f) {
+ var fid = fieldID(sec, f[0]);
+ var el = document.getElementById(fid);
+ if (!el) return;
+ var val = collectFieldValue(el, f[2]);
+ if (val !== '' && val !== false && val !== 0 && val !== null) hasValues = true;
+ sectionObj[f[0]] = val;
+ });
+ }
+
+ if (sec.inline) {
+ sec.inline.forEach(function(il) {
+ if (il.type === 'kv') {
+ var kvEl = document.querySelector('.obj-kv-list[data-sec="' + sec.id + '"][data-key="' + il.key + '"]');
+ if (kvEl) {
+ var map = {};
+ kvEl.querySelectorAll('.obj-kv-row').forEach(function(row) {
+ var keyEl = row.querySelector('.obj-kv-key');
+ var valEl = row.querySelector('.obj-kv-val');
+ if (keyEl && keyEl.value.trim() && valEl) {
+ map[keyEl.value.trim()] = parseFloat(valEl.value) || 0;
+ }
+ });
+ if (Object.keys(map).length > 0) { sectionObj[il.key] = map; hasValues = true; }
+ }
+ }
+ });
+ }
+
+ if (sec.always) {
+ Object.keys(sectionObj).forEach(function(k) { out[k] = sectionObj[k]; });
+ } else if (hasValues && sec.path) {
+ out[sec.path] = sectionObj;
+ } else if (hasValues) {
+ Object.keys(sectionObj).forEach(function(k) { out[k] = sectionObj[k]; });
+ }
+ });
+
+ ced_cleanOutput(out);
+ out.id = moduleID;
+
+ API.put('/api/modules/' + encodeURIComponent(moduleID), out).then(function(resp) {
+ notify('Module ' + moduleID + ' saved', 'success');
+ updateUndoBar();
+ if (resp && resp._raw) moduleData._raw = resp._raw;
+ }).catch(function(e) { notify('Save failed: ' + e.message, 'error'); });
+}
+
+function deleteModule() {
+ if (!confirm('Delete module "' + moduleID + '"?')) return;
+ API.del('/api/modules/' + encodeURIComponent(moduleID)).then(function() {
+ notify('Module ' + moduleID + ' deleted', 'success');
+ updateUndoBar();
+ moduleID = null;
+ currentID = null;
+ moduleData = null;
+ $('#editorMain').innerHTML = '<p style="color:#888;text-align:center;margin-top:60px">Deleted</p>';
+ loadList();
+ }).catch(function(e) { notify('Delete failed: ' + e.message, 'error'); });
+}