Use ace editor (readonly) to render current and historical shared environments

This commit is contained in:
Peter Stockings
2025-11-30 22:00:47 +11:00
parent 9533ebf91f
commit fa29b90af1

View File

@@ -339,9 +339,27 @@ const SharedEnvironments = {
m("div.flex-1", [
m("h3.text-xl.font-semibold.text-gray-900.dark:text-white.mb-1", env.name),
env.description ? m("p.text-gray-600.dark:text-gray-400.text-sm.mb-3", env.description) : null,
m("div.bg-gray-50.dark:bg-gray-900.rounded.p-3.font-mono.text-sm.overflow-x-auto",
m("pre.text-gray-800.dark:text-gray-200", JSON.stringify(env.environment, null, 2))
),
m("div.border.border-gray-300.dark:border-gray-600.rounded.overflow-hidden", {
oncreate: function(vnode) {
const editorId = `env-display-${env.id}`;
const editorDiv = document.createElement('div');
editorDiv.id = editorId;
editorDiv.style.height = '200px';
vnode.dom.appendChild(editorDiv);
const editor = ace.edit(editorId);
editor.setTheme("ace/theme/github_dark");
editor.session.setMode("ace/mode/json");
editor.setValue(JSON.stringify(env.environment, null, 2), -1);
editor.setReadOnly(true);
editor.setOptions({
fontSize: "13px",
showPrintMargin: false,
highlightActiveLine: false,
highlightGutterLine: false
});
}
}),
m("div.mt-3.text-xs.text-gray-500.dark:text-gray-400", [
`Created: ${new Date(env.created_at).toLocaleString()}`,
env.updated_at && env.updated_at !== env.created_at
@@ -625,11 +643,27 @@ const SharedEnvironments = {
"Restore"
)
]),
m("div.bg-gray-100.dark:bg-gray-900.rounded.p-3.font-mono.text-xs.overflow-x-auto",
m("pre.text-gray-800.dark:text-gray-200",
JSON.stringify(version.environment, null, 2)
)
)
m("div.border.border-gray-300.dark:border-gray-600.rounded.overflow-hidden", {
oncreate: function(vnode) {
const editorId = `version-${version.version_number}-${SharedEnvironments.historyModal.envId}`;
const editorDiv = document.createElement('div');
editorDiv.id = editorId;
editorDiv.style.height = '150px';
vnode.dom.appendChild(editorDiv);
const editor = ace.edit(editorId);
editor.setTheme("ace/theme/github_dark");
editor.session.setMode("ace/mode/json");
editor.setValue(JSON.stringify(version.environment, null, 2), -1);
editor.setReadOnly(true);
editor.setOptions({
fontSize: "12px",
showPrintMargin: false,
highlightActiveLine: false,
highlightGutterLine: false
});
}
})
])
)
)