From: vasary.daniel <TFS\vasary.daniel>
Date: Wed, 13 Apr 2022 15:22:02 +0000 (+0000)
Subject: flowchart integrated
X-Git-Url: http://git.useribm.hu/?a=commitdiff_plain;h=a26a823b5e63e42cabcaf02965315d2955d49fe7;p=mediacube.git

flowchart integrated

git-tfs-id: [http://tfs.userrendszerhaz.hu:8080/tfs/DefaultCollection]$/MediaCube;C33157
---

diff --git a/server/user.mediacube.gui/js/processVisualizer.js b/server/user.mediacube.gui/js/processVisualizer.js
index e0630fe4..835bab85 100644
--- a/server/user.mediacube.gui/js/processVisualizer.js
+++ b/server/user.mediacube.gui/js/processVisualizer.js
@@ -1,4 +1,5 @@
 
+/*
 var defaultFlowchartData = {
 	operators: {
 		operator1: {
@@ -40,14 +41,15 @@ var defaultFlowchartData = {
 		},
 	}
 };
+*/
 
-var otherFlowchartData = {
+var defaultFlowchartData = {
 	operators: {
 		operator1: {
 			top: 20,
 			left: 20,
 			properties: {
-				title: 'Operator 3',
+				title: 'Operator 1',
 				inputs: {},
 				outputs: {
 					output_1: {
@@ -56,49 +58,28 @@ var otherFlowchartData = {
 				}
 			}
 		},
-		operator2: {
-			top: 80,
-			left: 300,
-			properties: {
-				title: 'Operator 4',
-				inputs: {
-					input_1: {
-						label: 'Input 1',
-					},
-					input_2: {
-						label: 'Input 2',
-					},
-				},
-				outputs: {}
-			}
-		},
-	},
-	links: {
-		link_1: {
-			fromOperator: 'operator1',
-			fromConnector: 'output_1',
-			toOperator: 'operator2',
-			toConnector: 'input_2',
-		},
 	}
 };
 
+var flowChartWidget = null;
+
 $(document).ready(function() {
 	var $flowchart = $('#flowchartworkspace');
 
 	// Apply the plugin on a standard, empty div...
-	var widget = $flowchart.flowchart({		
+	flowChartWidget = $flowchart.flowchart({		
 		data: defaultFlowchartData,
 		defaultSelectedLinkColor: '#000055',
 		grid: 10,
 		multipleLinksOnInput: true,
 		multipleLinksOnOutput: true
 	});	
-	
-	setTimeout(() => {
-		console.log("Changing data", widget.flowchart);
-		widget.flowchart("setData", otherFlowchartData); 
-		
-	}, 500);	
 });
 
+function setFlowchartData(data) {
+	console.log("Changing data", data);
+	//var x = {operators: { operator1 : { properties: { title: 'Operator X' }	}}};
+	flowChartWidget.flowchart("setData", data);		
+}
+
+
diff --git a/server/user.mediacube.gui/pages/processVisualizer.zul b/server/user.mediacube.gui/pages/processVisualizer.zul
index 81e29229..19977f28 100644
--- a/server/user.mediacube.gui/pages/processVisualizer.zul
+++ b/server/user.mediacube.gui/pages/processVisualizer.zul
@@ -4,9 +4,12 @@
  	<style src="/css/jquery.flowchart.css" />
  	<h:script src="/js/jquery-ui.js" />
  	<h:script src="/js/jquery.flowchart.js" />
-	<script src="/js/processVisualizer.js?v=7" />
-	
-	<h:div id="chart_container">
-		<h:div class="flowchart-example-container" id="flowchartworkspace" />
-	</h:div>
+	<script src="/js/processVisualizer.js?v=16" />
+	<div viewModel="@id('jlm') @init('user.jobengine.zk.model.JobFlowChartModel')">
+		<h:div id="chart_container">
+			<h:div class="flowchart-example-container" id="flowchartworkspace" />
+		</h:div>
+				<button id="loadChartButton" label="Load chart" onClick="@command('loadChart')" />
+		
+	</div>
 </zk>
diff --git a/server/user.mediacube.gui/src/user/jobengine/zk/model/JobFlowChartModel.java b/server/user.mediacube.gui/src/user/jobengine/zk/model/JobFlowChartModel.java
new file mode 100644
index 00000000..c76c7e44
--- /dev/null
+++ b/server/user.mediacube.gui/src/user/jobengine/zk/model/JobFlowChartModel.java
@@ -0,0 +1,57 @@
+package user.jobengine.zk.model;
+
+import org.zkoss.bind.annotation.AfterCompose;
+import org.zkoss.bind.annotation.Command;
+import org.zkoss.bind.annotation.ContextParam;
+import org.zkoss.bind.annotation.ContextType;
+import org.zkoss.zk.ui.Component;
+import org.zkoss.zk.ui.select.Selectors;
+import org.zkoss.zk.ui.util.Clients;
+
+import com.ibm.nosql.json.api.BasicDBObject;
+
+public class JobFlowChartModel extends BaseModel {
+	@AfterCompose
+	public void afterCompose(@ContextParam(ContextType.VIEW) Component view) {
+		Selectors.wireComponents(view, this, false);
+	}
+
+	@Command
+	public void loadChart() {
+		/*
+			operators: {
+				operator1: {
+					top: 20,
+					left: 20,
+					properties: {
+						title: 'Operator 3',
+						inputs: {},
+						outputs: {
+							output_1: {
+								label: 'Output 1',
+							}
+						}
+					}
+				},
+			},
+		*/
+
+		BasicDBObject data = new BasicDBObject();
+		BasicDBObject op1 = new BasicDBObject();
+		BasicDBObject op11 = new BasicDBObject();
+		BasicDBObject p = new BasicDBObject();
+		op11.append("top", 20);
+		op11.append("left", 20);
+		op11.append("properties", p);
+		p.append("title", "Operator 3");
+		p.append("inputs", new BasicDBObject());
+		p.append("outputs", new BasicDBObject("output_1", new BasicDBObject().append("label", "Output 1")));
+		op1.append("operatorX", op11);
+		data.append("operators", op1);
+
+		// String x = "{operators: { operator1 : { properties: { title: 'START' } }}}";
+		String js = String.format("setFlowchartData(%s)", data.toString());
+		Clients.evalJavaScript(js);
+	}
+
+}
\ No newline at end of file