last demo import - cleaned
This commit is contained in:
290
views/workflow.tpl
Normal file
290
views/workflow.tpl
Normal file
@@ -0,0 +1,290 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user