<!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>