diff --git a/static/css/main.css b/static/css/main.css index 8a1078e..e56b823 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -300,3 +300,19 @@ dialog#connection-data div.button { text-align: center; margin-top: 8px; } +#editor-type-schema .label { + font-size: 1.25em; + font-weight: bold; + color: var(--section-color); +} +#editor-type-schema textarea { + font-family: monospace; + font-size: 0.85em; + margin-top: 16px; + width: 100%; + height: calc(100% - 96px); + min-height: calc(100vh - 380px); +} +#editor-type-schema img { + height: 32px; +} diff --git a/static/js/app.mjs b/static/js/app.mjs index 4c1b7a6..cff0b86 100644 --- a/static/js/app.mjs +++ b/static/js/app.mjs @@ -23,6 +23,7 @@ export class App { 'NODE_MOVE', 'NODE_SELECTED', 'TREE_RELOAD_NODE', + 'TYPE_EDIT', 'TYPES_LIST_FETCHED', ] for (const eventName of events) @@ -106,6 +107,11 @@ export class App { .catch(err => showError(err)) break + case 'TYPE_EDIT': + const editor = new TypeSchemaEditor(event.detail.Type) + document.getElementById('editor-type-schema').replaceChildren(editor.render()) + break + default: alert(`Unhandled event: ${event.type}`) console.log(event) @@ -712,6 +718,7 @@ export class TypesList {
${t.Schema.title || t.Name}
` + tDiv.addEventListener('click', () => mbus.dispatch('TYPE_EDIT', { Type: t })) div.appendChild(tDiv) } @@ -719,6 +726,32 @@ export class TypesList { }// }}} } +class TypeSchemaEditor { + constructor(dataType) { + this.type = dataType + } + render() { + const tmpl = document.createElement('template') + tmpl.innerHTML = ` +
+
${this.type.Schema.title}
+
+
+
+ +
+ + ` + + tmpl.content.querySelector('.name').value = this.type.Name + + const textarea = tmpl.content.querySelector('textarea') + textarea.value = JSON.stringify(this.type.Schema, null, 4) + + return tmpl.content + } +} + class ConnectedNodes { constructor(nodes) {// {{{ this.nodes = nodes diff --git a/static/less/main.less b/static/less/main.less index 7295aab..4324e5d 100644 --- a/static/less/main.less +++ b/static/less/main.less @@ -397,3 +397,24 @@ dialog#connection-data { margin-top: 8px; } } + +#editor-type-schema { + .label { + font-size: 1.25em; + font-weight: bold; + color: var(--section-color); + } + + textarea { + font-family: monospace; + font-size: 0.85em; + margin-top: 16px; + width: 100%; + height: calc(100% - 96px); + min-height: calc(100vh - 380px); + } + + img { + height: 32px; + } +}