FCF-DataCollection.html

<script type="text/javascript">
  RED.nodes.registerType('FCF-DataCollection', {
    category: 'FCF',
    color: '#FDF0C2',
    defaults: {
      rules: {
        value: [{
          topic: '',
          topic2: ''
        }]
      },
      collect: {
        value: 'query'
      }
    },
    inputs: 1,
    outputs: 2,
    paletteLabel: 'Data Collection',
    icon: 'db.png',
    label: function () {
      return 'Data Collection';
    },
    oneditsave: function () {
      var rules = $('#node-input-rule-container').editableList('items');
      var node = this;
      node.rules = [];
      rules.each(function (i) {
        var rule = $(this);
        var topic = rule.find('#input1').val();
        var topic2 = rule.find('#input2').val();
        if (topic != null && topic != '' && topic2 != null && topic2 != '') {
          node.rules.push({
            topic: topic,
            topic2: topic2
          });
        }
      });
      //this.outputs = node.rules.length;
    },
    oneditprepare: function () {
      var node = this;
      $("#node-input-rule-container").css('min-height', '250px').css('min-width', '450px').editableList({
        addItem: function (container, i, opt) {
          var rule = opt;
          var row = $('<div/>').appendTo(container);
          var selectField = $('<input/>', {
              style: "width:80%; margin-left: 5px; text-align: left;",
              id: "input1"
            })
            .attr('placeholder', 'Message Content')
            .attr('type', 'text')
            .appendTo(row);

          var selectField2 = $('<input/>', {
              style: "width:80%; margin-left: 5px; text-align: left;",
              id: "input2"
            })
            .attr('placeholder', 'Variable Name')
            .attr('type', 'text')
            .appendTo(row);

          if (rule.topic != null) {
            selectField.val(rule.topic);
          }
          if (rule.topic2 != null) {
            selectField2.val(rule.topic2);
          }
          var finalspan = $('<span/>', {
            style: "float: right;margin-top: 6px;"
          }).appendTo(row);
        },
        removeItem: function (opt) {
          var rules = $('#node-input-rule-container').editableList('items');
          rules.each(function (i) {
            $(this).find('.node-input-rule-index').html(i + 1);
          });
        },
        sortItems: function () {
          var rules = $('#node-input-rule-container').editableList('items');
          rules.each(function (i) {
            $(this).find('.node-input-rule-index').html(i + 1);
          });
        },
        sortable: true,
        removable: true
      });
      for (var i = 0; i < node.rules.length; i++) {
        var rule = this.rules[i];
        $('#node-input-rule-container').editableList('addItem', rule);
      }
    }
  });
</script>

<script type="text/x-red" data-template-name="FCF-DataCollection">

  <div class="form-row">
    <label for="node-input-collect"><i class="fa fa-tasks"></i> Data Type</span></label>
    <select type="text" id="node-input-collect" style="width:70%;">
        <option value="query">Query</option>
        <option value="userData">User Data</option>
        </select>
  </div>

  <div class="form-row">
    <label for="node-input-name" style="width:100%;"><i class="fa fa-tag"></i> Message Content and Variable Name：</label>
  </div>
  <div class="form-row node-input-rule-container-row">
    <ol id="node-input-rule-container"></ol>
  </div>
  <div style="max-width: 460px;font-size: 12px;color: #999999;line-height: 14px;clear:both;margin-top:5px;">

  </div>
</script>

<script type="text/x-red" data-help-name="FCF-DataCollection">
  <p>
    用來收集使用者所輸入的資料
  </p>
</script>