Use ace editor (readonly) to render current and historical shared environments
This commit is contained in:
@@ -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
|
||||
});
|
||||
}
|
||||
})
|
||||
])
|
||||
)
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user