290 lines
9.8 KiB
Smarty
290 lines
9.8 KiB
Smarty
|
<!DOCTYPE html>
|
||
|
|
|
||
|
|
<html>
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<title>workflow editor</title>
|
||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||
|
|
<!--Import Google Icon Font-->
|
||
|
|
<link type="text/css" rel="stylesheet" href="/static/css/material-icons.css">
|
||
|
|
<!--Import materialize.css-->
|
||
|
|
<link type="text/css" rel="stylesheet" href="/static/css/materialize.min.css" media="screen,projection" />
|
||
|
|
<!--Let browser know website is optimized for mobile-->
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
|
|
<link rel="stylesheet" type="text/css" href="/static/mxgraph/examples/grapheditor/www/styles/grapheditor.css">
|
||
|
|
<script type="text/javascript" src="/static/js/jquery-3.5.1.min.js"></script>
|
||
|
|
<script type="text/javascript">
|
||
|
|
// Parses URL parameters. Supported parameters are:
|
||
|
|
// - lang=xy: Specifies the language of the user interface.
|
||
|
|
// - touch=1: Enables a touch-style user interface.
|
||
|
|
// - storage=local: Enables HTML5 local storage.
|
||
|
|
// - chrome=0: Chromeless mode.
|
||
|
|
var urlParams = (function (url) {
|
||
|
|
var result = new Object();
|
||
|
|
var idx = url.lastIndexOf('?');
|
||
|
|
|
||
|
|
if (idx > 0) {
|
||
|
|
var params = url.substring(idx + 1).split('&');
|
||
|
|
|
||
|
|
for (var i = 0; i < params.length; i++) {
|
||
|
|
idx = params[i].indexOf('=');
|
||
|
|
|
||
|
|
if (idx > 0) {
|
||
|
|
result[params[i].substring(0, idx)] = params[i].substring(idx + 1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return result;
|
||
|
|
})(window.location.href);
|
||
|
|
mxBasePath = '/static/mxgraph/src';
|
||
|
|
// Default resources are included in grapheditor resources
|
||
|
|
mxLoadResources = false;
|
||
|
|
</script>
|
||
|
|
<script type="text/javascript" src="/static/mxgraph/examples/grapheditor/www/js/Init.js"></script>
|
||
|
|
<script type="text/javascript" src="/static/mxgraph/examples/grapheditor/www/deflate/pako.min.js"></script>
|
||
|
|
<script type="text/javascript" src="/static/mxgraph/examples/grapheditor/www/deflate/base64.js"></script>
|
||
|
|
<script type="text/javascript" src="/static/mxgraph/examples/grapheditor/www/jscolor/jscolor.js"></script>
|
||
|
|
<script type="text/javascript" src="/static/mxgraph/examples/grapheditor/www/sanitizer/sanitizer.min.js"></script>
|
||
|
|
<script type="text/javascript" src="/static/mxgraph/src/js/mxClient.js"></script>
|
||
|
|
<script type="text/javascript" src="/static/mxgraph/examples/grapheditor/www/js/EditorUi.js"></script>
|
||
|
|
<script type="text/javascript" src="/static/mxgraph/examples/grapheditor/www/js/Editor.js"></script>
|
||
|
|
<script type="text/javascript" src="/static/mxgraph/examples/grapheditor/www/js/Sidebar.js"></script>
|
||
|
|
<script type="text/javascript" src="/static/mxgraph/examples/grapheditor/www/js/Graph.js"></script>
|
||
|
|
<script type="text/javascript" src="/static/mxgraph/examples/grapheditor/www/js/Format.js"></script>
|
||
|
|
<script type="text/javascript" src="/static/mxgraph/examples/grapheditor/www/js/Shapes.js"></script>
|
||
|
|
<script type="text/javascript" src="/static/mxgraph/examples/grapheditor/www/js/Actions.js"></script>
|
||
|
|
<script type="text/javascript" src="/static/mxgraph/examples/grapheditor/www/js/Menus.js"></script>
|
||
|
|
<script type="text/javascript" src="/static/mxgraph/examples/grapheditor/www/js/Toolbar.js"></script>
|
||
|
|
<script type="text/javascript" src="/static/mxgraph/examples/grapheditor/www/js/Dialogs.js"></script>
|
||
|
|
<script type="text/javascript" src="/static/mxgraph/examples/grapheditor/www/js/Swagger.js"></script>
|
||
|
|
|
||
|
|
{{ template "swagger.tpl" . }}
|
||
|
|
|
||
|
|
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
|
||
|
|
<script src="/static/js/bootstrap.bundle.min.js"></script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.refresh {
|
||
|
|
margin-right: 10px;
|
||
|
|
margin-top: 10px;
|
||
|
|
}
|
||
|
|
.load {
|
||
|
|
margin-left: 10px;
|
||
|
|
margin-top: 10px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body class="geEditor">
|
||
|
|
|
||
|
|
{{ template "floating_menu.tpl" . }}
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
<div class="center-align">
|
||
|
|
<a href="/"><img src="/static/img/O-cloud.svg" width="20%" height="auto" /></a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="geEditor">
|
||
|
|
<script type="text/javascript">
|
||
|
|
var MX_EDITORUI
|
||
|
|
var OC_WORKSPACE
|
||
|
|
var cursorX;
|
||
|
|
var cursorY;
|
||
|
|
document.onmousemove = function(e){
|
||
|
|
cursorX = e.pageX;
|
||
|
|
cursorY = e.pageY;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
// Extends EditorUi to update I/O action states based on availability of backend
|
||
|
|
function LoadWorkloadWindow(ProjectName, XMLdata) {
|
||
|
|
|
||
|
|
OC_CATALOG_API = oc_catalog_api
|
||
|
|
OC_PROJECT_NAME = ProjectName
|
||
|
|
|
||
|
|
Editor.useLocalStorage = false;
|
||
|
|
var editorUiInit = EditorUi.prototype.init;
|
||
|
|
|
||
|
|
EditorUi.prototype.init = function () {
|
||
|
|
editorUiInit.apply(this, arguments);
|
||
|
|
this.actions.get('export').setEnabled(false);
|
||
|
|
|
||
|
|
// Updates action states which require a backend
|
||
|
|
if (!Editor.useLocalStorage) {
|
||
|
|
mxUtils.post(OPEN_URL, '', mxUtils.bind(this, function (req) {
|
||
|
|
var enabled = req.getStatus() != 404;
|
||
|
|
this.actions.get('open').setEnabled(enabled || Graph.fileSupport);
|
||
|
|
this.actions.get('import').setEnabled(enabled || Graph.fileSupport);
|
||
|
|
this.actions.get('save').setEnabled(enabled);
|
||
|
|
this.actions.get('saveAs').setEnabled(enabled);
|
||
|
|
this.actions.get('export').setEnabled(enabled);
|
||
|
|
}));
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
// Adds required resources (disables loading of fallback properties, this can only
|
||
|
|
// be used if we know that all keys are defined in the language specific file)
|
||
|
|
mxResources.loadDefaultBundle = false;
|
||
|
|
var bundle = mxResources.getDefaultBundle(RESOURCE_BASE, mxLanguage) ||
|
||
|
|
mxResources.getSpecialBundle(RESOURCE_BASE, mxLanguage);
|
||
|
|
|
||
|
|
// Fixes possible asynchronous requests
|
||
|
|
mxUtils.getAll([bundle, STYLE_PATH + '/default.xml'], function (xhr) {
|
||
|
|
// Adds bundle text to resources
|
||
|
|
mxResources.parse(xhr[0].getText());
|
||
|
|
|
||
|
|
// Configures the default graph theme
|
||
|
|
var themes = new Object();
|
||
|
|
themes[Graph.prototype.defaultThemeName] = xhr[1].getDocumentElement();
|
||
|
|
|
||
|
|
// Main
|
||
|
|
MX_EDITORUI = new EditorUi(new Editor(urlParams['chrome'] == '0', themes));
|
||
|
|
if (XMLdata != null) {
|
||
|
|
MX_EDITORUI.editor.setGraphXml(mxUtils.parseXml(XMLdata).documentElement);
|
||
|
|
}
|
||
|
|
}, function () {
|
||
|
|
document.body.innerHTML = '<center style="margin-top:10%;">Error loading resource files. Please check browser console.</center>';
|
||
|
|
});
|
||
|
|
};
|
||
|
|
$(document).ready(function () {
|
||
|
|
refreshProjects()
|
||
|
|
// LoadSavedData('test_project')
|
||
|
|
$('.tooltipped').tooltip();
|
||
|
|
$('.fixed-action-btn').floatingActionButton({ direction: 'bottom' });
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script type="text/javascript" src="/static/js/materialize.min.js"></script>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
<div>
|
||
|
|
<select class="form-select col m4 offset-m4" id="inlineFormSelectPref">
|
||
|
|
<!-- <option selected>Choose...</option> -->
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div class="btns center-align">
|
||
|
|
<span type="button" onclick="refreshProjects()" class="refresh btn btn-secondary">
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
|
||
|
|
class="bi bi-arrow-clockwise" viewBox="0 0 16 16">
|
||
|
|
<path fill-rule="evenodd"
|
||
|
|
d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z" />
|
||
|
|
<path
|
||
|
|
d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z" />
|
||
|
|
</svg>
|
||
|
|
</span>
|
||
|
|
<span id="loadButton" type="submit" onclick="LoadSelectedProject()" class="load btn btn-primary disabled">Load</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<div>
|
||
|
|
<input class="col m4 offset-m4" id="new_workflow_name" type="text" placeholder="New Workflow Name">
|
||
|
|
</div>
|
||
|
|
<div class="center-align">
|
||
|
|
<button type="button" class="btn btn-success" onclick="CreateNewWorkflow()">
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
|
||
|
|
class="bi bi-plus" viewBox="0 0 16 16">
|
||
|
|
<path
|
||
|
|
d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" />
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<script>
|
||
|
|
function LoadSavedData(PrjName) {
|
||
|
|
oc_catalog_api.then(client => {
|
||
|
|
client.apis
|
||
|
|
.workflow
|
||
|
|
.WorkflowController_Get_mxGraph_last_status({
|
||
|
|
workflowName: PrjName
|
||
|
|
})
|
||
|
|
.then(response => {
|
||
|
|
console.log(response)
|
||
|
|
LoadWorkloadWindow(PrjName, response.body)
|
||
|
|
})
|
||
|
|
.catch((error) => {
|
||
|
|
console.log("Workflow get XML error: " + error)
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function CreateNewWorkflow() {
|
||
|
|
//debugger
|
||
|
|
var select = document.getElementById("new_workflow_name");
|
||
|
|
var NewProjectName = select.value;
|
||
|
|
if (!!NewProjectName) {
|
||
|
|
oc_catalog_api.then(client => {
|
||
|
|
client.apis
|
||
|
|
.workflow
|
||
|
|
.WorkflowController_Create_a_new_workflow({
|
||
|
|
workflowName: NewProjectName
|
||
|
|
})
|
||
|
|
.then(response => {
|
||
|
|
// console.log(response)
|
||
|
|
refreshProjects(NewProjectName)
|
||
|
|
select.value = "";
|
||
|
|
})
|
||
|
|
.catch((error) => {
|
||
|
|
console.log("Workflow create projects error: " + error)
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function LoadSelectedProject() {
|
||
|
|
var select = document.getElementById("inlineFormSelectPref");
|
||
|
|
var projectName = select.value;
|
||
|
|
if (!!projectName) {
|
||
|
|
LoadSavedData(projectName)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function populateProjectOptions(arrayProjectNames, focusValue) {
|
||
|
|
var select = document.getElementById("inlineFormSelectPref");
|
||
|
|
select.innerHTML = '' // clear previous options
|
||
|
|
|
||
|
|
arrayProjectNames.forEach(elem => {
|
||
|
|
var option = document.createElement("option");
|
||
|
|
if (elem == focusValue) {
|
||
|
|
option.selected="selected"
|
||
|
|
}
|
||
|
|
|
||
|
|
option.value = elem
|
||
|
|
option.text = elem
|
||
|
|
select.appendChild(option)
|
||
|
|
})
|
||
|
|
|
||
|
|
if (arrayProjectNames !== null && arrayProjectNames.length > 0) {
|
||
|
|
document.getElementById("loadButton").classList.remove("disabled");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function refreshProjects(focusValue) {
|
||
|
|
oc_catalog_api.then(client => {
|
||
|
|
client.apis
|
||
|
|
.workflow
|
||
|
|
.WorkflowController_List_workflows()
|
||
|
|
.then(response => {
|
||
|
|
// console.log(response)
|
||
|
|
populateProjectOptions(response.body, focusValue)
|
||
|
|
})
|
||
|
|
.catch((error) => {
|
||
|
|
console.log("Workflow list projects error: " + error)
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|