dgbuilder/nodes/dge/dgelogic/block.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 <script type="text/x-red" data-template-name="block">
  17     <div class="form-row">
  18         <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
  19         <input type="text" id="node-input-name" placeholder="Name">
  20     </div>
  21     <div class="form-row">
  22         <div>
  23         <table border='0' width='100%' style='cellspacing:5px;'>
  24         <tr>
  25         <td>
  26         <input type="checkbox" id="node-input-atomic-chkBox" onclick=updateXml()>
  27         <input type="hidden" id="node-input-atomic" value="">
  28         </td>
  29         <td>
  30         <span style="font-size:.8em;">Atomic</span>
  31         </td>
  32         </tr>
  33         </table>
  34         </div>
  35         <label for="node-input-xml"><i class="fa fa-wrench"></i> Node XML</label>
  36         <input type="hidden" id="node-input-xml" autofocus="autofocus">
  37         <div style="height: 450px;" class="node-text-editor" id="node-input-xml-editor" onkeyup="resetStatus()" ></div>
  38     </div>
  39     <div class="form-row">
  40     <a href="#" class="btn btn-mini" id="node-input-validate" style="margin-top: 4px;"><b>Validate XML</b></a>
  41     <a href="#" class="btn btn-mini" id="node-input-show-sli-values" style="margin-top: 4px;"><b>Show Values</b></a>
  42     <input type="hidden" id="node-input-comments">
  43     <a href="#" class="btn btn-mini" id="node-input-btnComments" style="margin-top: 4px;"><b>Add Comments</b></a>
  44     <div id="node-validate-result" class="form-tips" style="float:right;font-size:10px"></div>
  45     </div>
  46     <div class="form-tips">See the Info tab for help using this node.</div>
  47 </script>
  48
  49 <script type="text/x-red" data-help-name="block">
  50         <p>A block node.</p>
  51         <p>Name can be anything.</p>
  52         <p>Do not include closing tag - it will be automatically generated.</p>
  53
  54         <div class="section">
  55 <h3><a name="Flow_Control"></a>Flow Control</h3>
  56 <div class="section">
  57 <h4><a name="Block_node"></a>Block node</h4>
  58 <div class="section">
  59 <h5><a name="Description"></a>Description</h5>
  60 <p>A <b>block</b> node is used to executes a set of nodes. </p></div>
  61 <div class="section">
  62 <h5><a name="Attributes"></a>Attributes</h5>
  63 <table border="1" class="table table-striped">
  64 <tr class="a">
  65 <td align="center"><b>atomic</b></td>
  66 <td align="left">if <i>true</i>, then if a node returns failure, subsequent nodes will not be executed and nodes already executed will be backed out.</td></tr></table></div>
  67 <div class="section">
  68 <h5><a name="Parameters"></a>Parameters</h5>
  69 <p>None</p></div>
  70 <div class="section">
  71 <h5><a name="Outcomes"></a>Outcomes</h5>
  72 <p>None</p></div>
  73 <div class="section">
  74 <h5><a name="Example"></a>Example</h5>
  75 <div class="source">
  76 <pre>&lt;block&gt;
  77   &lt;record plugin=&quot;org.onap.ccsdk.sli.core.sli.recording.FileRecorder&quot;&gt;
  78     &lt;parameter name=&quot;file&quot; value=&quot;/tmp/sample_r1.log&quot; /&gt;
  79     &lt;parameter name=&quot;field1&quot; value=&quot;__TIMESTAMP__&quot;/&gt;
  80     &lt;parameter name=&quot;field2&quot; value=&quot;RESERVED&quot;/&gt;
  81     &lt;parameter name=&quot;field3&quot; value=&quot;$asePort.uni_circuit_id&quot;/&gt;
  82   &lt;/record&gt;
  83   &lt;return status=&quot;success&quot;&gt;
  84     &lt;parameter name=&quot;uni-circuit-id&quot; value=&quot;$asePort.uni_circuit_id&quot; /&gt;
  85   &lt;/return&gt;
  86 &lt;/block&gt;</pre></div></div></div>
  87
  88 </script>
  89
  90
  91 <script type="text/javascript">
  92  var blockXmlEditor ;
  93     RED.nodes.registerType('block',{
  94         color:"#fdd0a2",
  95         category: 'DGElogic',
  96         defaults: {
  97             name: {value:"block"},
  98             xml: {value:"<block>\n"},
  99             atomic: {value:"false"},
 100             comments:{value:""},
 101             outputs: {value:1}
 102         },
 103         inputs:1,
 104         outputs:1,
 105         icon: "arrow-in.png",
 106         label: function() {
 107             return this.name;
 108         },
 109         oneditprepare: function() {
 110             var that = this;
 111             $( "#node-input-outputs" ).spinner({
 112                 min:1
 113             });
 114              var comments = $( "#node-input-comments").val();
 115              if(comments != null){
 116                 comments = comments.trim();
 117                 if(comments != ''){
 118                         $("#node-input-btnComments").html("<span style='color:blue;'><b>View Comments</b></span>");
 119                 }
 120              }
 121
 122                 var atomic = $( "#node-input-atomic").val();
 123                 if(atomic == "true"){
 124                         $('#node-input-atomic-chkBox').prop('checked', true);
 125                 }else{
 126                         $('#node-input-atomic-chkBox').prop('checked', false);
 127                 }
 128
 129             function functionDialogResize() {
 130                 var rows = $("#dialog-form>div:not(.node-text-editor-row)");
 131                 var height = $("#dialog-form").height();
 132                 for (var i=0;i<rows.size();i++) {
 133                     height -= $(rows[i]).outerHeight(true);
 134                 }
 135                 var editorRow = $("#dialog-form>div.node-text-editor-row");
 136                 height -= (parseInt(editorRow.css("marginTop"))+parseInt(editorRow.css("marginBottom")));
 137                 $(".node-text-editor").css("height",height+"px");
 138                 that.editor.resize();
 139             };
 140             $( "#dialog" ).on("dialogresize", functionDialogResize);
 141             $( "#dialog" ).one("dialogopen", function(ev) {
 142                 var size = $( "#dialog" ).dialog('option','sizeCache-function');
 143                 if (size) {
 144                     $("#dialog").dialog('option','width',size.width);
 145                     $("#dialog").dialog('option','height',size.height);
 146                     functionDialogResize();
 147                 }
 148             });
 149             $( "#dialog" ).one("dialogclose", function(ev,ui) {
 150                 var height = $( "#dialog" ).dialog('option','height');
 151                 $( "#dialog" ).off("dialogresize",functionDialogResize);
 152             });
 153
 154             this.editor = RED.editor.createEditor({
 155                 id: 'node-input-xml-editor',
 156                 mode: 'ace/mode/html'
 157             });
 158             this.editor.setValue($("#node-input-xml").val(),-1);
 159                 blockXmlEditor=that.editor;
 160         /*
 161             RED.library.create({
 162                 url:"functions", // where to get the data from
 163                 type:"function", // the type of object the library is for
 164                 editor:this.editor, // the field name the main text body goes to
 165                 mode:"ace/mode/html",
 166                 fields:['name','outputs']
 167             });
 168         */
 169             this.editor.focus();
 170             /* close dialog when ESC is pressed and released */
 171             $( "#node-input-xml-editor" ).keyup(function(event){
 172                 if(event.which == 27 ) {
 173                         $("#node-dialog-cancel").click();
 174                 }
 175             });
 176                 $("#node-input-validate").click(function(){
 177                                 console.log("validate clicked.");
 178                                 //console.dir(that.editor);
 179                                 //console.log("getText:" + that.editor.getText());
 180                                 var val = that.editor.getValue();
 181                                 validateXML(val);
 182                 });
 183                 $("#node-input-show-sli-values").click(function(){
 184                         //console.log("show Values clicked.");
 185                         showValuesBox(that.editor,sliValuesObj);
 186                 });
 187             //for click of add comments button
 188             $("#node-input-btnComments").click(function(e){
 189                         showCommentsBox();
 190             });
 191         },
 192         oneditsave: function() {
 193             $("#node-input-xml").val(this.editor.getValue());
 194                 var resp=validateXML(this.editor.getValue());
 195                 if(resp){
 196                         this.status = {fill:"green",shape:"dot",text:"OK"};
 197                 }else{
 198                         this.status = {fill:"red",shape:"dot",text:"ERROR"};
 199                 }
 200                 delete this.editor;
 201                 delete blockXmlEditor;
 202         }
 203     });
 204 function updateXml(){
 205         if($("#node-input-atomic-chkBox").is(':checked')){
 206                 $("#node-input-name").val("block : atomic");
 207                 $("#node-input-atomic").val("true");
 208                 //alert($("#node-input-xml-editor div.textview div.textviewContent").text());
 209                 var xmlStr = blockXmlEditor.getValue();
 210                 var re = new RegExp("<block[^<]+");
 211                 xmlStr=xmlStr.replace(re,"<block atomic='true'>");
 212                 //$("#node-input-xml-editor div.textview div.textviewContent").text(xmlStr);
 213                 blockXmlEditor.setValue(xmlStr);
 214                 //console.log("block xmlStr:" + xmlStr);
 215         }else{
 216                 $("#node-input-name").val("block");
 217                 $("#node-input-atomic").val("false");
 218                 var xmlStr = blockXmlEditor.getValue();
 219                 var re = new RegExp("<block[^<]+");
 220                 xmlStr=xmlStr.replace(re,"<block>");
 221                 blockXmlEditor.setValue(xmlStr);
 222                 //$("#node-input-xml-editor div.textview div.textviewContent").text(xmlStr);
 223                 //console.log("block xmlStr:" + xmlStr);
 224         }
 225 }
 226 </script>