removed dependency on built-editor.min.js
[ccsdk/distribution.git] / dgbuilder / nodes / dge / dgelogic / call.html
1 <!--
2   Copyright 2013 IBM Corp.
3
4   Licensed under the Apache License, Version 2.0 (the "License");
5   you may not use this file except in compliance with the License.
6   You may obtain a copy of the License at
7
8   http://www.apache.org/licenses/LICENSE-2.0
9
10   Unless required by applicable law or agreed to in writing, software
11   distributed under the License is distributed on an "AS IS" BASIS,
12   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13   See the License for the specific language governing permissions and
14   limitations under the License.
15 -->
16
17 <script type="text/x-red" data-template-name="call">
18     <div class="form-row">
19         <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
20         <input type="text" id="node-input-name" placeholder="Name">
21     </div>
22     <div class="form-row">
23         <label for="node-input-xml"><i class="fa fa-wrench"></i> Node XML</label>
24         <input type="hidden" id="node-input-xml" autofocus="autofocus">
25         <div style="height: 450px;" class="node-text-editor" id="node-input-xml-editor" onkeyup="resetStatus()" ></div>
26     </div>
27     <div class="form-row">
28     <a href="#" class="btn btn-mini" id="node-input-validate" style="margin-top: 4px;"><b>Validate XML</b></a>
29     <a href="#" class="btn btn-mini" id="node-input-show-sli-values" style="margin-top: 4px;"><b>Show Values</b></a>
30     <input type="hidden" id="node-input-comments">
31     <a href="#" class="btn btn-mini" id="node-input-btnComments" style="margin-top: 4px;"><b>Add Comments</b></a>
32     <div id="node-validate-result" class="form-tips" style="float:right;font-size:10px"></div>
33     </div>
34     <div class="form-tips">See the Info tab for help using this node.</div>
35 </script>
36
37 <script type="text/x-red" data-help-name="call">
38         <p>A call node.</p>
39         <p>Name can be anything.</p>
40         <p>Do not include closing tag - it will be automatically generated.</p>
41
42 <div class="section">
43 <h4><a name="Call_node"></a>Call node</h4>
44 <div class="section">
45 <h5><a name="Description"></a>Description</h5>
46 <p>A <b>call</b> node is used to call another graph</p></div>
47 <div class="section">
48 <h5><a name="Attributes"></a>Attributes</h5>
49 <table border="1" class="table table-striped">
50 <tr class="a">
51 <td align="center"><b>module</b></td>
52 <td align="left">Module of directed graph to call. If unset, defaults to that of calling graph</td></tr>
53 <tr class="b">
54 <td align="center"><b>rpc</b></td>
55 <td align="left">rpc of directed graph to call.</td></tr>
56 <tr class="a">
57 <td align="center"><b>version</b></td>
58 <td align="left">version of graph to call, If unset, uses active version.</td></tr>
59 <tr class="b">
60 <td align="center"><b>mode</b></td>
61 <td align="left">mode (sync/async) of graph to call. If unset, defaults to that of calling graph.</td></tr></table></div>
62 <div class="section">
63 <h5><a name="Parameters"></a>Parameters</h5>
64 <p>Not applicable</p></div>
65 <div class="section">
66 <h5><a name="Outcomes"></a>Outcomes</h5>
67 <table border="1" class="table table-striped"><caption> .</caption>
68 <tr class="a">
69 <td align="center"><b>success</b></td>
70 <td align="left">Sub graph returned success</td></tr>
71 <tr class="b">
72 <td align="center"><b>not-found</b></td>
73 <td align="left">Graph not found</td></tr>
74 <tr class="a">
75 <td align="center"><b>failure</b></td>
76 <td align="left">Subgraph returned success</td></tr></table></div>
77 <div class="section">
78 <h5><a name="Example"></a>Example</h5>
79 <div class="source">
80 <pre>&lt;call rpc=&quot;svc-topology-reserve&quot; mode=&quot;sync&quot; /&gt;</pre></div></div></div>
81
82 </script>
83
84
85 <script type="text/javascript">
86     RED.nodes.registerType('call',{
87         color:"#fdd0a2",
88         category: 'DGElogic',
89         defaults: {
90             name: {value:"call"},
91             xml: {value:"<call module='' rpc='' mode='sync' >\n"},
92             comments:{value:""},        
93             outputs: {value:1}
94         },
95         inputs:1,
96         outputs:1,
97         icon: "arrow-in.png",
98         label: function() {
99             return this.name;
100         },
101         oneditprepare: function() {
102             var that = this;
103             $( "#node-input-outputs" ).spinner({
104                 min:1
105             });
106              var comments = $( "#node-input-comments").val();
107              if(comments != null){
108                 comments = comments.trim();
109                 if(comments != ''){
110                         $("#node-input-btnComments").html("<span style='color:blue;'><b>View Comments</b></span>");
111                 }
112              }
113
114             function functionDialogResize() {
115                 var rows = $("#dialog-form>div:not(.node-text-editor-row)");
116                 var height = $("#dialog-form").height();
117                 for (var i=0;i<rows.size();i++) {
118                     height -= $(rows[i]).outerHeight(true);
119                 }
120                 var editorRow = $("#dialog-form>div.node-text-editor-row");
121                 height -= (parseInt(editorRow.css("marginTop"))+parseInt(editorRow.css("marginBottom")));
122                 $(".node-text-editor").css("height",height+"px");
123                 that.editor.resize();
124             };
125             $( "#dialog" ).on("dialogresize", functionDialogResize);
126             $( "#dialog" ).one("dialogopen", function(ev) {
127                 var size = $( "#dialog" ).dialog('option','sizeCache-function');
128                 if (size) {
129                     $("#dialog").dialog('option','width',size.width);
130                     $("#dialog").dialog('option','height',size.height);
131                     functionDialogResize();
132                 }
133             });
134             $( "#dialog" ).one("dialogclose", function(ev,ui) {
135                 var height = $( "#dialog" ).dialog('option','height');
136                 $( "#dialog" ).off("dialogresize",functionDialogResize);
137             });
138
139             this.editor = RED.editor.createEditor({
140                 id: 'node-input-xml-editor',
141                 mode: 'ace/mode/html'
142             });
143             this.editor.setValue($("#node-input-xml").val(),-1);
144         /*      
145             RED.library.create({
146                 url:"functions", // where to get the data from
147                 type:"function", // the type of object the library is for
148                 editor:this.editor, // the field name the main text body goes to
149                 mode:"ace/mode/html",
150                 fields:['name','outputs']
151             });
152         */
153             this.editor.focus();
154             /* close dialog when ESC is pressed and released */ 
155             $( "#node-input-xml-editor" ).keyup(function(event){
156                 if(event.which == 27 ) {
157                         $("#node-dialog-cancel").click();
158                 }
159             }); 
160                 $("#node-input-validate").click(function(){
161                                 console.log("validate clicked.");
162                                 //console.dir(that.editor);
163                                 //console.log("getText:" + that.editor.getText());
164                                 var val = that.editor.getValue();
165                                 validateXML(val); 
166                 });
167                 $("#node-input-show-sli-values").click(function(){
168                         //console.log("show Values clicked.");
169                         showValuesBox(that.editor,sliValuesObj);
170                 });
171             //for click of add comments button
172             $("#node-input-btnComments").click(function(e){
173                         showCommentsBox();
174             }); 
175         },
176         oneditsave: function() {
177             $("#node-input-xml").val(this.editor.getValue());
178                 var resp=validateXML(this.editor.getValue());
179                 if(resp){
180                         this.status = {fill:"green",shape:"dot",text:"OK"};
181                 }else{
182                         this.status = {fill:"red",shape:"dot",text:"ERROR"};
183                 }       
184                 delete this.editor;
185         }
186     });
187 </script>