node-red-contrib-mi-devices/node-red-contrib-xiaomi-gateway/xiaomi-gateway.html

<!--  The Input Node  -->
<script type="text/javascript">
    RED.nodes.registerType('xiaomi-gateway', {
        category: 'xiaomi',
        color: '#3FADB5',
        defaults: {
            gateway: {value:"", type:"xiaomi-configurator"},
            name: {value: ""}
        },
        inputs: 1,
        outputs: 1,
        outputLabels: ["Gateway"],
        paletteLabel: "gateway",
        icon: "mijia.png",
        label: function () {
            return this.name || "xiaomi-gateway";
        }
    });
</script>

<script type="text/x-red" data-template-name="xiaomi-gateway">
    <div class="form-row">
        <label for="node-input-gateway"><i class="icon-tag"></i> Gateway</label>
        <input type="text" id="node-input-gateway" placeholder="xiaomi gateway">
    </div>
    <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>
</script>

<script type="text/x-red" data-help-name="xiaomi-gateway">
    <p>The gateway itself.</p>

    <h3>Outputs</h3>
    <ol class="node-ports">
        <li>Devices output
            <dl class="message-properties">
                <dt>gateway <span class="property-type">xiaomi-configurator</span></dt>
                <dd>The gateway.</dd>
            </dl>
            <dl class="message-properties">
                <dt>payload <span class="property-type">json</span></dt>
                <dd>Data from gateway, with computed data.</dd>
            </dl>
        </li>
    </ol>
</script>

<!--  The Input Node  -->
<script type="text/x-red" data-template-name="xiaomi-gateway in">
    <div class="form-row">
        <label for="node-input-gateway"><i class="icon-tag"></i> Gateway</label>
        <input type="text" id="node-input-gateway" placeholder="xiaomi gateway">
    </div>
    <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-ip"><i class="icon-tag"></i> IP</label>
        <input type="text" id="node-input-ip" placeholder="IP" readonly>
    </div>
</script>

<script type="text/x-red" data-help-name="xiaomi-gateway in">
    <p>A Xiaomi Gateway input node, that produces a <code>msg.payload</code> containing a
    string with the gateway message content.
    </p>
</script>

<script type="text/javascript">
    RED.nodes.registerType('xiaomi-gateway in',{
        category: 'xiaomi in out',
        color: '#087F8A',
        defaults: {
            name: {value:""},
            gateway: {value:"", type:"xiaomi-configurator"},
            ip: {value:""}
        },
        inputs:0,
        outputs:1,
        paletteLabel: "gateway in",
        icon: "mijia-io.png",
        label: function() {
            return this.name||"xiaomi-gateway";
        },
        labelStyle: function() {
            return this.name?"node_label_italic":"";
        },
        oneditprepare: function() {
            function changeGateway() {
                var configNodeID = $('#node-input-gateway').val();
                if (configNodeID) {
                    var configNode = RED.nodes.node(configNodeID);
                    if(configNode) {
                        if(!this.name) {
                            $("#node-input-name").val(configNode.name);
                        }
                        $('#node-input-ip').val(configNode.ip);
                    }
                }
            }

            $("#node-input-gateway").change(function () {
                changeGateway();
            });
        }
    });
</script>


<!--  The Output Node  -->
<script type="text/x-red" data-template-name="xiaomi-gateway out">
<div class="form-row">
    <label for="node-input-gateway"><i class="icon-tag"></i> Gateway</label>
    <input type="text" id="node-input-gateway" placeholder="xiaomi gateway">
</div>
<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-ip"><i class="icon-tag"></i> IP</label>
    <input type="text" id="node-input-ip" placeholder="IP" readonly>
</div>
</script>

<script type="text/x-red" data-help-name="xiaomi-gateway out">
<p>This node sends <code>msg.payload</code> to the configured Xiaomi Gateway.</p>
</script>

<script type="text/javascript">
    RED.nodes.registerType('xiaomi-gateway out',{
        category: 'xiaomi in out',
        color: '#087F8A',
        defaults: {
            name: {value:""},
            gateway: {value:"", type:"xiaomi-configurator"},
            ip: {value:""}
        },
        inputs:1,
        outputs:0,
        paletteLabel: "gateway out",
        icon: "mijia-io.png",
        align: "right",
        label: function() {
            return this.name||"xiaomi-gateway";
        },
        labelStyle: function() {
            return this.name?"node_label_italic":"";
        },
        oneditprepare: function() {
            function changeGateway() {
                var configNodeID = $('#node-input-gateway').val();
                if (configNodeID) {
                    var configNode = RED.nodes.node(configNodeID);
                    if(configNode) {
                        if(!this.name) {
                            $("#node-input-name").val(configNode.name);
                        }
                        $('#node-input-ip').val(configNode.ip);
                    }
                }
            }

            $("#node-input-gateway").change(function () {
                changeGateway();
            });
        }
    });
</script>