node-red-contrib-context-editor
Version:
Context Editor
148 lines (124 loc) • 4.37 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Flow Context Editor</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link href="jsoneditor/jsoneditor.min.css" rel="stylesheet" type="text/css">
<script src="jsoneditor/jsoneditor.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
#jsoneditor {
height:500pt;
}
html, body {
padding: 0;
}
html {
height: 100%;
}
body{
min-height: 100%;
}
</style>
</head>
<body style="display:flex;flex-direction: column">
<div>
<select id="select-flow"></select>
<button id="update-button" onclick="update()">Update</button>
</div>
<br/>
<div id="jsoneditor"></div>
<script>
function update() {
const flowId = $('#select-flow').val();
try {
if(!confirm(`Update Flow ?`)) return;
const newJson = editor.get();
const delta = jsondiffpatch.diff(originalFlowContextObject, newJson);
if(delta) {
$.ajax({
url: `../flowContext/${flowId}`,
contentType: "application/json",
dataType:'json',
type: 'PATCH',
data: JSON.stringify(delta),
error: function(e) {
alert(`Failed to patch flow context: ${e}`);
},
success: function() {}
});
}
} catch (e) {
alert('Patch parsing/diff failed locally');
}
retrieveFlowContextIntoView(flowId);
}
function getJsonPromise(url) {
return new Promise( function(resolve, reject) {
$.getJSON(url).done(resolve).error(reject);
});
}
function getFlowIdInHashUrl() {
let selectedFlow = window.location.hash;
if(selectedFlow.startsWith('#')) selectedFlow = selectedFlow.substring(1);
return selectedFlow;
}
async function refreshFlowsOptions() {
const flows = await getJsonPromise('../flows');
const $el = $('#select-flow');
$el.empty();
for(const flow of flows) {
$el.append($("<option></option>")
.attr("value", flow.id).text(flow.label));
}
$el.val(getFlowIdInHashUrl());
onValueChanged();
window.onhashchange();
}
refreshFlowsOptions();
let originalFlowContextObject;
function retrieveFlowContextIntoView(flowId) {
getJsonPromise(`../flowContext/${flowId}`).then((flowContext)=>{
originalFlowContextObject = JSON.parse(JSON.stringify(flowContext));
editor.set(flowContext);
$('.jsoneditor-expand-all').click();
});
}
window.onhashchange = function () {
const selectedFlow = getFlowIdInHashUrl();
$('#select-flow').val(selectedFlow);
// dropdown option chosen
retrieveFlowContextIntoView(selectedFlow);
};
const onValueChanged = function() {
const selectedFlow = $('#select-flow').val();
if(!selectedFlow || selectedFlow.length < 1) return;
window.location.hash = selectedFlow;
};
$(()=>{
if(!window.jsondiffpatch) {
const $jsondiffpatch = $('<script>', {src: `jsondiffpatch/jsondiffpatch.umd.slim.js`});
$jsondiffpatch.appendTo(document.head);
}
const $el = $('#select-flow');
$el.change(onValueChanged);
});
const container = document.getElementById("jsoneditor");
const editor = new JSONEditor(container, {
mode: 'tree',
modes: ['code', 'form', 'tree', 'view'], // allowed modes
onError: function (err) {
alert(err.toString());
},
onModeChange: function (newMode, oldMode) {
console.log('Mode switched from', oldMode, 'to', newMode);
}
});
</script>
</body>
</html>