deprecated-oc-search/views/workflow.tpl
2023-08-26 22:04:56 +02:00

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>