FCF-Dispatcher.html

<script type="text/javascript">
    RED.nodes.registerType("FCF-Dispatcher", {//Dispatcher開始
        category: "FCF",
        color: "#A6BBCF",
        defaults: {
            rules: {
                value: [{
                    topic: ""
                }]
            },
            email: {
                value: ""
            },
            privateKey: {
                value: ""
            },
            outputs: {
                value: 1
            }
        },
        inputs: 1,
        outputs: 1,
        paletteLabel: "Dispatcher",//在面板上顯示的名稱
        icon: "template.png",
        label: function () {
            return "Dispatcher";
        },
        oneditsave: function () {//當它Ok的時候存起來
            var rules = $("#node-input-rule-container").editableList("items");//editableList的用法請見http://bit.ly/2u7kewg
            var node = this;
            node.rules = [];
            rules.each(function (i) {
                var rule = $(this);
                var topic = rule.find("input").val();
                if (topic != null && topic != "") {
                    node.rules.push({
                        topic: topic
                    });
                }
            });
            this.outputs = node.rules.length;//增加了幾個Action，就有幾個輸出？
        },
        oneditprepare: function () {//在現在這個狀態，要做的事情。oneditprepare官方說明請見http://bit.ly/2uHbmAZ
            var node = this;
            $("#node-input-rule-container").css("min-height", "250px").css("min-width", "450px").editableList({
                addItem: function (container, i, opt) {//新增項目。http://bit.ly/2uBgKVp
                    var rule = opt;
                    var row = $("<div/>").appendTo(container);//http://api.jquery.com/appendto/
                    var selectField = $("<input/>", {
                        style: "width:80%; margin-left: 5px; text-align: left;"
                    })
                        .attr("placeholder", "Action Value")
                        .attr("type", "text")
                        .appendTo(row);
                    if (rule.topic != null) {
                        selectField.val(rule.topic);
                    }
                    var finalspan = $("<span/>", {
                        style: "float: right;margin-top: 6px;"
                    }).appendTo(row);
                    finalspan.append("&nbsp;&#8594; <span class=\"node - input - rule - index\">" + (i + 1) + "</span>");
                },
                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);//這裡是抓rule這個字
                    });
                },
                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-Dispatcher">
    <div class="form-row">
        <label for="node-input-email"><i class="icon-tag"></i> Dialogflow Service Account E-mail：</label>
        <input type="text" id="node-input-email">
    </div>
    <div class="form-row">
        <label for="node-input-privateKey"><i class="icon-tag"></i> Dialogflow Service Account Private Key：</label>
        <input type="text" id="node-input-privateKey">
    </div>
    <div class="form-row">
        <label for="node-input-name" style="width:100%;"><i class="fa fa-tag"></i> Action Value：</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-Dispatcher">
    <p>
        藉由串接 Api.ai 來分析對話的分支
    </p>
</script>