@logiccloud/node-red-logiccloud-control/src/output/logiccloud-control-output.html

The all-in-one logiccloud control package for Node-RED environment.

<script type="text/javascript">
  RED.nodes.registerType("logiccloud-control-output", {
    category: "logiccloud",
    color: '#ff5064',
    defaults: {
      name: {value: "logiccloud-control-output", required: true},
      logiccloudControl: {value: "", type: "logiccloud-control-configuration", required: true},
      variable: {value: "", required: false}
    },
    inputs: 0,
    outputs: 1,
    paletteLabel: "logiccloud-control-output",
    icon: "lc-cloud-icon.png",

    label: function () {
      return this.name || "logiccloud-control-output";
    },
    labelStyle: function () {
      return "palette_label";
    },
    inputLabels: "no input",
    outputLabels: "logiccloud control variable's value",
    align: "right",

    oneditprepare: function () {
      var cfgNode = RED.nodes.node(this.logiccloudControl);

      if (cfgNode) {
        enableBrowsing();

        try {
          $("#node-input-variable").autocomplete("destroy");
        } catch (err) {
        }

        $("#node-lookup-variable").click(function () {
          $("#node-lookup-variable").addClass('disabled');
          $.getJSON("logiccloud/outputs", function (data) {
            $("#node-lookup-variable").removeClass('disabled');
            let variables = [];
            const listOfVars = data[cfgNode.port];

            if (listOfVars !== null && listOfVars !== undefined && listOfVars.length > 0) {
              variables = listOfVars;
              $("#node-input-variable").autocomplete({
                source: variables,
                minLength: 0,
                close: function (event, ui) {
                  $("#node-input-variable").autocomplete("destroy");
                }
              }).autocomplete("search", "");

            } else {
              RED.notify(`No outputs found on logiccloud control on port: ${cfgNode.port}!`, {
                type: "warning",
                timeout: 5000
              });
            }

          });

        }); // end $("#node-lookup-variable").click

      } else {
        disableBrowsing();
      }

      // $('#node-input-logiccloudControl').change(function(e){
      //   console.log(`node-input-logiccloudControl changed; event: ${e}`);
      //   const newValue = $('#node-input-logiccloudControl').val();
      //   console.log(`node-input-logiccloudControl changed value: ${newValue}`);
      //
      //   if (cfgNode) {
      //     const id = cfgNode.id;
      //     console.log(`cfgNode id: ${id}`);
      //     if (newValue) {
      //       if (id === newValue) {
      //         enableBrowsing();
      //       } else {
      //         disableBrowsing();
      //       }
      //
      //     } else {
      //       disableBrowsing();
      //     }
      //
      //   } else {
      //     disableBrowsing();
      //   }
      //
      // });

    }

  });
  function disableBrowsing(){
    $("#divBrowseInfo").show();
    // $("#divBrowse").prop("disabled", true);
    // $("#lbl-node-input-variable").addClass('disabled');
    // $("#node-input-variable").addClass('disabled');
    // $("#node-lookup-variable").addClass('disabled');
    // $("#node-lookup-variable-icon").addClass('disabled');
  }
  function enableBrowsing(){
    $("#divBrowseInfo").hide();
    // $("#divBrowse").prop("disabled", false);
    // $("#lbl-node-input-variable").prop("disabled", true);
    // $("#node-input-variable").prop("disabled", true);
    // $("#node-lookup-variable").prop("disabled", true);
    // $("#node-lookup-variable-icon").prop("disabled", true);
  }
</script>

<script type="text/x-red" data-template-name="logiccloud-control-output">
  <div class="form-row" style="display: flex;align-items: center;">
    <label style="margin:0; min-width:150px"  for="node-input-name"><i class="fa fa-tag"></i> Configuration Name</label>
    <input style="flex:1" type="text" id="node-input-name" placeholder="Name">
  </div>

  <div class="form-row" style="display: flex;align-items: center;">
    <label style="margin:0; min-width:150px" for="node-input-logiccloudControl"><i class="fa fa-plug"></i> Logiccloud Control</label>
    <input style="flex:1; width:100%"  type="text" id="node-input-logiccloudControl" placeholder="LogiccloudControl">
  </div>

  <div class="form-row" style="display: flex;align-items: center;" id="divBrowse">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" width="16" height="16" style="min-width:16px; min-height:16px; margin: 0px 5px 0px 0px">
          <path fill="#e38d07" d="M 0 1 L 0 13 L 9 13 L 9 10 L 7 10 L 7 11 L 2 11 L 2 3 L 7 3 L 7 4 L 9 4 L 9 1 L 0 1 z M 10 4 L 10 6 L 4 6 L 4 8 L 10 8 L 10 10 L 14 7 L 10 4 z "/>
      </svg>
      <label style="margin:0; min-width:130px" for="node-input-variable" id="lbl-node-input-variable><i class="icon-tag"></i>Output Variable</label>
      <input type="text" id="node-input-variable" style="flex:1; width: calc(70% - 45px); margin-right: 10px;" placeholder="for example OUTPUT">
      <a id="node-lookup-variable" class="red-ui-button"><i id="node-lookup-variable-icon" class="fa fa-search"></i></a>
  </div>

  <div class="form-tips" id="divBrowseInfo">
    <span id="noteBrowseInfo"><b>Note</b>: In order to browse successfully for input variables, a valid connection has to be setup and deployed. Please provide a valid connection, save it, deploy it and re-open this configurator to browse for inputs. If a valid connection was already deployed, a subsequent configuration for an input/output node has only to be re-open in order to browse for inputs/outputs.</span>
  </div>
</script>

<script type="text/x-red" data-help-name="logiccloud-control-output">
  <p>This node is used to receive (output) data from the logiccloud control.</p>

  <p>The logiccloud control output node provides the following properties:</p>
  <ul>
    <li>name: the name of the node; if it is not set, the node will have the default name "logiccloud-control-output"</li>
    <li>logiccloudControl: the logiccloud control configuration node to be used for the communication with the logiccloud control</li>
    <li>variable: the access variable name for which the node will receive updates; there are two ways to set the access variable name:</li>
    <ul>
      <li>by typing the access variable name in the variable field</li>
      <li>by browsing the available output access variables in the logiccloud control (by clicking on the search icon next to the variable field)</li>
    </ul>
  </ul>

  <br/>
  <p><b>Note:</b> in order to use the browsing functionality, several steps have to be performed beforehand:</p>
  <ul>
    <li>the logiccloud control configuration node has to be properly configured (valid host and port of an existing running logiccloud control Node-RED connector)</li>
    <li>the logiccloud control configuration node has to be deployed</li>
    <li>the logiccloud control configuration node has to be selected in the logiccloudControl field of the logiccloud control output node</li>
    <li>close and re-open the configuration for the logiccloud control output node</li>
  </ul>

  <p>If the above steps are performed and the logiccloud control Node-RED connector is running, by clicking the search icon next to the variable field the list of available outputs will be displayed.
  Then the user can select the desired access variable.
  The access variable name will be automatically filled in the variable field.</p>

  <p>If all of the above steps are performed and the logiccloud control Node-RED connector is running, but there are no output access variables defined in the mappings for the logiccloud Node-RED connector, a warning message will be displayed: "No outputs found on logiccloud control on port: [port]".</p>

  <p>If one of the above steps is not performed or logiccloud control Node-RED connector is not running, the browsing functionality will not work.
  In this case, a warning message will be displayed: "No outputs found on logiccloud control on port: [port]".
  The user has to manually type the access variable name in the variable field.</p>
</script>