removed dependency on built-editor.min.js

and added ability to test DG from dgbuilder
 and fixed the break node on XML generation
 and added ability to download
  formatted DG XML and DG JSON

Issue-ID: SDNC-353
Change-Id: I799de5de2c4f61e9b56dbe996d8ac3e3b28061f7
Signed-off-by: Chinthakayala,Sheshashailavas(sc2914) <sc2914@att.com>

4 files changed, 176 insertions, 79 deletions

diff --git a/dgbuilder/nodes/dge/dgemain/GenericXML.html b/dgbuilder/nodes/dge/dgemain/GenericXML.html
index 4c9c01a6..123473a0 100644
--- a/dgbuilder/nodes/dge/dgemain/GenericXML.html
+++ b/dgbuilder/nodes/dge/dgemain/GenericXML.html
@@ -59,10 +59,10 @@
             return this.name;
         },
         oneditprepare: function() {
+            var that = this;
             $( "#node-input-outputs" ).spinner({
                 min:1
             });
-
 	     var comments = $( "#node-input-comments").val();
 	     if(comments != null){
 		comments = comments.trim();
@@ -71,70 +71,77 @@
 		}
 	     }
 
-            function functionDialogResize(ev,ui) {
-                $("#node-input-xml-editor").css("height",(ui.size.height-275)+"px");
+            function functionDialogResize() {
+                var rows = $("#dialog-form>div:not(.node-text-editor-row)");
+                var height = $("#dialog-form").height();
+                for (var i=0;i<rows.size();i++) {
+                    height -= $(rows[i]).outerHeight(true);
+                }
+                var editorRow = $("#dialog-form>div.node-text-editor-row");
+                height -= (parseInt(editorRow.css("marginTop"))+parseInt(editorRow.css("marginBottom")));
+                $(".node-text-editor").css("height",height+"px");
+                that.editor.resize();
             };
-
             $( "#dialog" ).on("dialogresize", functionDialogResize);
             $( "#dialog" ).one("dialogopen", function(ev) {
                 var size = $( "#dialog" ).dialog('option','sizeCache-function');
                 if (size) {
-                    functionDialogResize(null,{size:size});
+                    $("#dialog").dialog('option','width',size.width);
+                    $("#dialog").dialog('option','height',size.height);
+                    functionDialogResize();
                 }
             });
+            $( "#dialog" ).one("dialogclose", function(ev,ui) {
+                var height = $( "#dialog" ).dialog('option','height');
+                $( "#dialog" ).off("dialogresize",functionDialogResize);
+            });
 
+            this.editor = RED.editor.createEditor({
+                id: 'node-input-xml-editor',
+                mode: 'ace/mode/html'
+            });
+            this.editor.setValue($("#node-input-xml").val(),-1);
+	/*	
+            RED.library.create({
+                url:"functions", // where to get the data from
+                type:"function", // the type of object the library is for
+                editor:this.editor, // the field name the main text body goes to
+                mode:"ace/mode/html",
+                fields:['name','outputs']
+            });
+	*/
+            this.editor.focus();
 	    /* close dialog when ESC is pressed and released */	
-            $( "#dialog" ).keyup(function(event){
+            $( "#node-input-xml-editor" ).keyup(function(event){
      		if(event.which == 27 ) {
             		$("#node-dialog-cancel").click();
 		}
  	    }); 
-
-            $( "#dialog" ).one("dialogclose", function(ev,ui) {
-                var height = $( "#dialog" ).dialog('option','height');
-                $( "#dialog" ).off("dialogresize",functionDialogResize);
-            });
-            var that = this;
-            require(["orion/editor/edit"], function(edit) {
-                that.editor = edit({
-                    parent:document.getElementById('node-input-xml-editor'),
-                    lang:"html",
-                    contents: $("#node-input-xml").val()
-                });
-                RED.library.create({
-                    url:"functions", // where to get the data from
-                    type:"function", // the type of object the library is for
-                    editor:that.editor, // the field name the main text body goes to
-                    fields:['name','outputs']
-                });
-                $("#node-input-name").focus();
 		$("#node-input-validate").click(function(){
 				console.log("validate clicked.");
 				//console.dir(that.editor);
 				//console.log("getText:" + that.editor.getText());
-				var val = that.editor.getText();
+				var val = that.editor.getValue();
 				validateXML(val); 
 		});
 		$("#node-input-show-sli-values").click(function(){
-				//console.log("SLIValues clicked.");
-				showValuesBox(that.editor,sliValuesObj);
+			//console.log("show Values clicked.");
+			showValuesBox(that.editor,sliValuesObj);
 		});
-
-            });
 	    //for click of add comments button
 	    $("#node-input-btnComments").click(function(e){
 			showCommentsBox();
 	    });	
-        },
+	},
         oneditsave: function() {
-            $("#node-input-xml").val(this.editor.getText());
-		var resp=validateXML(this.editor.getText());
+            $("#node-input-xml").val(this.editor.getValue());
+		var resp=validateXML(this.editor.getValue());
 		if(resp){
 			this.status = {fill:"green",shape:"dot",text:"OK"};
 		}else{
 			this.status = {fill:"red",shape:"dot",text:"ERROR"};
 		}	
            	delete this.editor;
-        }
+	}
     });
 </script>
diff --git a/dgbuilder/nodes/dge/dgemain/comment.html b/dgbuilder/nodes/dge/dgemain/comment.html
index c34d14c9..f6da4616 100644
--- a/dgbuilder/nodes/dge/dgemain/comment.html
+++ b/dgbuilder/nodes/dge/dgemain/comment.html
@@ -22,6 +22,7 @@
     <div class="form-row">
         <label for="node-input-info" style="width: 100% !important;"><i class="fa fa-comments"></i> More</label>
         <input type="hidden" id="node-input-info" autofocus="autofocus">
+	<div class="form-row node-text-editor-row">
         <div style="height: 250px;" class="node-text-editor" id="node-input-info-editor" ></div>
         <input type="hidden" id="node-input-comments">
     </div>
@@ -51,6 +52,52 @@
             return this.name?"node_label_italic":"";
         },
         oneditprepare: function() {
+            var that = this;
+            $( "#node-input-outputs" ).spinner({
+                min:1
+            });
+	     var comments = $( "#node-input-comments").val();
+	     if(comments != null){
+		comments = comments.trim();
+		if(comments != ''){
+			$("#node-input-btnComments").html("<span style='color:blue;'><b>View Comments</b></span>");
+		}
+	     }
+            function functionDialogResize() {
+                var rows = $("#dialog-form>div:not(.node-text-editor-row)");
+                var height = $("#dialog-form").height();
+                for (var i=0;i<rows.size();i++) {
+                    height -= $(rows[i]).outerHeight(true);
+                }
+                var editorRow = $("#dialog-form>div.node-text-editor-row");
+                height -= (parseInt(editorRow.css("marginTop"))+parseInt(editorRow.css("marginBottom")));
+                $(".node-text-editor").css("height",height+"px");
+                that.editor.resize();
+            };
+            $( "#dialog" ).on("dialogresize", functionDialogResize);
+            $( "#dialog" ).one("dialogopen", function(ev) {
+                var size = $( "#dialog" ).dialog('option','sizeCache-function');
+                if (size) {
+                    $("#dialog").dialog('option','width',size.width);
+                    $("#dialog").dialog('option','height',size.height);
+                    functionDialogResize();
+                }
+            });
+            $( "#dialog" ).one("dialogclose", function(ev,ui) {
+                var height = $( "#dialog" ).dialog('option','height');
+                $( "#dialog" ).off("dialogresize",functionDialogResize);
+            });
+            this.editor = RED.editor.createEditor({
+                id: 'node-input-info-editor',
+                mode: 'ace/mode/markdown',
+		fontSize: "15pt"
+            });
+	console.dir(this.editor);
+           this.editor.setValue($("#node-input-info").val(),-1);
+           this.editor.focus();
+        },
+/*
+        oneditprepare: function() {
             $( "#node-input-outputs" ).spinner({
                 min:1
             });
@@ -88,9 +135,24 @@
                 });
                 $("#node-input-name").focus();
             });
+	    this.editor = RED.editor.createEditor({
+                	id: 'node-input-info-editor',
+                	mode: 'ace/mode/markdown',
+			options: {
+				showLineNumbers : false,
+				enableBasicAutocompletion : true,
+				enableSnippets:true,
+				fontSize: "14px"
+			}
+            	});
+            console.dir(this.editor);
+            this.editor.setValue($("#node-input-info").val(),-1);
+            this.editor.focus();
+
         },
+	*/
         oneditsave: function() {
-            $("#node-input-info").val(this.editor.getText());
+            $("#node-input-info").val(this.editor.getValue());
             delete this.editor;
         }
     });
diff --git a/dgbuilder/nodes/dge/dgemain/dgstart.html b/dgbuilder/nodes/dge/dgemain/dgstart.html
index a203a444..273d51d4 100644
--- a/dgbuilder/nodes/dge/dgemain/dgstart.html
+++ b/dgbuilder/nodes/dge/dgemain/dgstart.html
@@ -764,7 +764,7 @@ function showDgStartGenerateXmlStatus(){
 		}
 		var xmlLines = formatted_xml.split("\n");
 		console.log("Number of lines " + xmlLines.length);
-		var numberOfLines = xmlLines.length;
+		//var numberOfLines = xmlLines.length;
 		//var display_formatted_xml = formatted_xml.replace("&lt;","<");
 		var currentNodeSet = getCurrentFlowNodeSet();
 		//get max x and y coordinates
@@ -810,8 +810,10 @@ function showDgStartGenerateXmlStatus(){
 		var unformatted_json_str=JSON.stringify(currentNodeSet);
 		var formatted_json = vkbeautify.json(unformatted_json_str);
 		//var displayHtmlStr="<div><textarea readonly='1' style='width:1100px;height:700px;border:none'>" + formatted_xml + "</textarea></div>";
-		var displayHtmlStr="<div style='font-size:20px;'><xmp>" + formatted_xml + "</xmp></div>";
-		var xmlInfoStr = "<div id='xml-info-div'><p>" + "XML size:" + sizeStr +  " <br>Number of Lines:" + numberOfLines +  "</p></div>";
+		//var displayHtmlStr="<div style='font-size:20px;'><xmp>" + formatted_xml + "</xmp></div>";
+		var displayHtmlStr=  "";
+              
+		//var xmlInfoStr = "<div id='xml-info-div'><p>" + "XML size:" + sizeStr +  " <br>Number of Lines:" + numberOfLines +  "</p></div>";
 		var htmlCode ="";
 		$( "#xmldialog" ).dialog({
 			title: "XML Generated",
@@ -866,6 +868,7 @@ function showDgStartGenerateXmlStatus(){
 				},
 			*/
                            "Validate XML" : function (event) {
+				$("#ace-editor-div").show();
 				if(!event) event = window.event;
 				var target = $(event.target);
 			        target.text("Validating XML");
@@ -928,7 +931,8 @@ function showDgStartGenerateXmlStatus(){
 					var reqData = {
 						"flowHtml" : htmlCode,
 						"flowXml" : formatted_xml,
-						"flowJson" : formatted_json
+						"flowJson" : formatted_json,
+						"emailAddress" : RED.settings.emailAddress
 					};
 
 					$.post( "/sendEmail",reqData )
@@ -988,8 +992,8 @@ function showDgStartGenerateXmlStatus(){
 					.done(function( data ) {
 					console.log("calling uploadxml. sending to server");
 						//var successHtmlStr = "<object width='600' height='450' type='text/html' data='"  + data.url + "' />";
-						
-						if( data != undefined  && data != null &&  (data.stdout.indexOf('Saving SvcLogicGraph') != -1 || data.stderr.indexOf('Saving SvcLogicGraph') != -1)){
+						//console.dir(data);	
+						if( data != undefined  && data != null &&  ((data.stdout != undefined && data.stdout != null && data.stdout.indexOf('Saving SvcLogicGraph') != -1) || (data.stderr != undefined && data.stderr != null &&  data.stderr.indexOf('Saving SvcLogicGraph') != -1))){
                          				//RED.notify("<strong>Uploaded Successfully</strong>");
 							//console.dir(data);
 							var _moduleName = data.module;
@@ -1204,8 +1208,12 @@ function showDgStartGenerateXmlStatus(){
 					form.append('<input type="hidden" name="moduleName" value="' + moduleName + '"/>');
 					form.append('<input type="hidden" name="methodName" value="' + formattedMethodName + '"/>');
 					form.appendTo('body');
-					//$("#flowXmlId").val(formatted_xml);
-					$("#flowXmlId").val(unformatted_xml_str);
+					console.log("format_xml:" + format_xml);
+					if(format_xml == "Y" || format_xml == undefined){
+						$("#flowXmlId").val(formatted_xml);
+					}else{
+						$("#flowXmlId").val(unformatted_xml_str);
+					}
 					$("#dwnldXmlFormId").submit();
 					//console.log("Form submitted.");
 				});
@@ -1245,8 +1253,12 @@ function showDgStartGenerateXmlStatus(){
 					form.append('<input type="hidden" name="moduleName" value="' + moduleName + '"/>');
 					form.append('<input type="hidden" name="methodName" value="' + formattedMethodName + '"/>');
 					form.appendTo('body');
-					//$("#flowJsonId").val(formatted_json);
-					$("#flowJsonId").val(unformatted_json_str);
+					console.log("format_json:" + format_json);
+					if(format_json == "Y" || format_json == undefined){
+						$("#flowJsonId").val(formatted_json);
+					}else{
+						$("#flowJsonId").val(unformatted_json_str);
+					}
 					$("#dwnldJsonFormId").submit();
 					//console.log("Form submitted.");
 				});
@@ -1261,6 +1273,7 @@ function showDgStartGenerateXmlStatus(){
 				unformatted_xml_str="";
 				unformatted_json_str="";
 				*/
+				ace.edit('xmldialog').destroy();
 			       $('.ui-dialog:has(#xmldialog)').empty().remove();
 				RED.view.redraw();
 
@@ -1272,6 +1285,17 @@ function showDgStartGenerateXmlStatus(){
                        },
 			open:function (){
 				$(function(){
+					try{
+						var aceEditor = ace.edit("xmldialog");
+    							aceEditor.setTheme("ace/theme/eclipse");
+    							aceEditor.session.setMode("ace/mode/xml");
+							aceEditor.setValue(formatted_xml);
+							document.getElementById('xmldialog').style.fontSize='18px';
+							aceEditor.setReadOnly(true);
+							var numberOfLines = aceEditor.session.getLength();
+							var xmlInfoStr = "<div id='xml-info-div'><p>" + "XML size:" + sizeStr +  " <br>Number of Lines:" + numberOfLines +  "</p></div>";
+					}catch(err){
+					}
 				$("#xmldialog").dialog("widget").find(".ui-dialog-buttonpane").append(xmlInfoStr);
 					console.log("opened.");
 				});
diff --git a/dgbuilder/nodes/dge/dgemain/method.html b/dgbuilder/nodes/dge/dgemain/method.html
index 134896e7..c83c3196 100644
--- a/dgbuilder/nodes/dge/dgemain/method.html
+++ b/dgbuilder/nodes/dge/dgemain/method.html
@@ -57,10 +57,10 @@
             return this.name;
         },
         oneditprepare: function() {
+            var that = this;
             $( "#node-input-outputs" ).spinner({
                 min:1
             });
-
 	     var comments = $( "#node-input-comments").val();
 	     if(comments != null){
 		comments = comments.trim();
@@ -69,67 +69,71 @@
 		}
 	     }
 
-            function functionDialogResize(ev,ui) {
-                $("#node-input-xml-editor").css("height",(ui.size.height-275)+"px");
+            function functionDialogResize() {
+                var rows = $("#dialog-form>div:not(.node-text-editor-row)");
+                var height = $("#dialog-form").height();
+                for (var i=0;i<rows.size();i++) {
+                    height -= $(rows[i]).outerHeight(true);
+                }
+                var editorRow = $("#dialog-form>div.node-text-editor-row");
+                height -= (parseInt(editorRow.css("marginTop"))+parseInt(editorRow.css("marginBottom")));
+                $(".node-text-editor").css("height",height+"px");
+                that.editor.resize();
             };
-
-            $( "#dialog" ).dialog( "option", "width", 1200 );
-            $( "#dialog" ).dialog( "option", "height", 750 );
             $( "#dialog" ).on("dialogresize", functionDialogResize);
             $( "#dialog" ).one("dialogopen", function(ev) {
                 var size = $( "#dialog" ).dialog('option','sizeCache-function');
                 if (size) {
-                    functionDialogResize(null,{size:size});
+                    $("#dialog").dialog('option','width',size.width);
+                    $("#dialog").dialog('option','height',size.height);
+                    functionDialogResize();
                 }
             });
+            $( "#dialog" ).one("dialogclose", function(ev,ui) {
+                var height = $( "#dialog" ).dialog('option','height');
+                $( "#dialog" ).off("dialogresize",functionDialogResize);
+            });
 
+            this.editor = RED.editor.createEditor({
+                id: 'node-input-xml-editor',
+                mode: 'ace/mode/html'
+            });
+            this.editor.setValue($("#node-input-xml").val(),-1);
+	/*	
+            RED.library.create({
+                url:"functions", // where to get the data from
+                type:"function", // the type of object the library is for
+                editor:this.editor, // the field name the main text body goes to
+                mode:"ace/mode/html",
+                fields:['name','outputs']
+            });
+	*/
+            this.editor.focus();
 	    /* close dialog when ESC is pressed and released */	
-            $( "#dialog" ).keyup(function(event){
+            $( "#node-input-xml-editor" ).keyup(function(event){
      		if(event.which == 27 ) {
             		$("#node-dialog-cancel").click();
 		}
  	    }); 
-
-            $( "#dialog" ).one("dialogclose", function(ev,ui) {
-                var height = $( "#dialog" ).dialog('option','height');
-                $( "#dialog" ).off("dialogresize",functionDialogResize);
-            });
-            var that = this;
-            require(["orion/editor/edit"], function(edit) {
-                that.editor = edit({
-                    parent:document.getElementById('node-input-xml-editor'),
-                    lang:"html",
-                    contents: $("#node-input-xml").val()
-                });
-                RED.library.create({
-                    url:"functions", // where to get the data from
-                    type:"function", // the type of object the library is for
-                    editor:that.editor, // the field name the main text body goes to
-                    fields:['name','outputs']
-                });
-                $("#node-input-name").focus();
 		$("#node-input-validate").click(function(){
 				console.log("validate clicked.");
 				//console.dir(that.editor);
 				//console.log("getText:" + that.editor.getText());
-				var val = that.editor.getText();
+				var val = that.editor.getValue();
 				validateXML(val); 
 		});
 		$("#node-input-show-sli-values").click(function(){
 				//console.log("show Values clicked.");
 				showRpcsValuesBox(that.editor,rpcValues);
 		});
-
-            });
-
 	    //for click of add comments button
 	    $("#node-input-btnComments").click(function(e){
 			showCommentsBox();
 	    });	
-        },
+	},
         oneditsave: function() {
-            $("#node-input-xml").val(this.editor.getText());
-		var resp=validateXML(this.editor.getText());
+            $("#node-input-xml").val(this.editor.getValue());
+		var resp=validateXML(this.editor.getValue());
 		if(resp){
 			this.status = {fill:"green",shape:"dot",text:"OK"};
 		}else{