prisme-flow/nodes/bridge/bot/bot-ask.html

prisme platform flow engine

<!--
 Created by prisme.io on 09/06/2017.

 @author <a href="mailto:hello@prisme.io">savane vamara</a> (prisme.io)

-->


<script type="text/javascript">
  RED.nodes.registerType('bot-ask', {
    category: 'bot',
    color: '#FFCC66',
    defaults: {
      name: {
        value: ''
      },
      answers: {
        value: []
      },
      message: {
        value: ''
      }
    },
    inputs: 1,
    outputs: 1,
    paletteLabel: 'bot keyboards',
    icon: 'ask.png',
    label: function() {
      return this.name || 'Keyboards';
    },
    oneditsave: function() {
      var answers = $("#node-input-answers-container").editableList('items');
      var node = this;
      node.answers = [];

      var idx;
      for(idx = 0; idx < answers.length; idx++) {
        node.answers.push({
          value: answers[idx].find('input').val(),
          label: answers[idx].find('input').val()
        });
      }
    },

    oneditprepare: function() {

      function resizeRule(rule) {}
      $('#node-input-answers-container').css('min-height','300px').css('min-width','450px').editableList({
        addItem: function(container, i, answer) {
          var value = typeof answer == 'object' ? '' : answer;
          var row1 = $('<div/>').appendTo(container);
          $('<input type="text" value="' + (answer.value != null ? answer.value : '') + '"/>', {
            class: 'node-input-rule-type',
            style: 'width:100%px; margin-right:10px;'
            })
            .appendTo(row1);
          resizeRule(container);
        },
        resizeItem: resizeRule,
        removable: true,
        sortable: true
      });

      var answers = this.answers;
      var idx;
      for (idx = 0; idx < answers.length; idx++) {
        var answer = answers[idx];
        $("#node-input-answers-container").editableList('addItem', answer);
      }
    }
  });
</script>

<script type="text/x-red" data-template-name="bot-ask">
<div class="form-row">
  <label for="node-input-name"><i class="icon-tag"></i> Name</label>
  <input type="text" id="node-input-name" placeholder="Name">
</div>
<div class="form-row">
  <label for="node-input-message"><i class="icon-envelope"></i> Message</label>
  <textarea id="node-input-message" placeholder="Message" style="width:93%;height:100px;"></textarea>
  <div style="max-width: 460px;font-size: 12px;color: #999999;line-height: 14px;clear:both;margin-top:5px;">
    Supports handlebars-like variables for chat context like {{firstName}}, {{lastName}}, etc. and emoticons (:smile:, etc.)
  </div>
</div>
<div class="form-row" style="margin-bottom:0;">
  <label><i class="fa fa-list"></i> <span>Buttons</span></label>
</div>
<div class="form-row node-input-rule-container-row">
  <ol id="node-input-answers-container"></ol>
</div>
</script>

<script type="text/x-red" data-help-name="bot-ask">
<p>Show quick alternatives (canned answers) to the users with custom keyboards <em>[Telegram]</em>.</p>
<p>The custom keyboards can also be passed through the payload by the upstream node:</p>
<br/>
<pre>
msg.payload = {
  message: 'The message with the buttons',
  buttons: [
    {value: 'text 1', label: 'label of the button 1'},
    {value: 'text 2', label: 'another label'}
  ]
}
return msg;
</pre>
</script>