node-red-node-tdengine/tdengine-operator.html

The official plugin developed by TDengine for Node-RED.

<script type="text/html" data-template-name="TDengineServer">

    <div class="form-row">
        <label for="node-config-input-name"><i class="fa fa-tag"></i> <span data-i18n="node-red:common.label.name"></span></label>
        <input type="text" id="node-config-input-name" data-i18n="[placeholder]node-red:common.label.name">
    </div>

    <div class="form-row">
        <label style="display: block; width: 200px; text-align: left;"><i class="fa fa-plug"></i> <span data-i18n="tdengine.label.conntype" ></span> </label>
    </div>

    <div class="form-row">
        <label style="display: block; width: 200px; text-align: left;">
            <input type="radio" name="connection-type" style="width: 30px; margin-bottom: 5px;" value="connection-string" checked> 
            <span data-i18n="tdengine.label.connstring"></span>
        </label> 

        <span id="uri-section">
            <div class="form-row">
                <label for="node-config-input-uri" style="margin-left: 20px;"><i class="fa fa-link"></i> URI:</label>
                <input type="text" id="node-config-input-uri">
            </div>
        </span>

        <label style="display: block; width: 200px; text-align: left;">
            <input type="radio" name="connection-type" style="width: 30px; margin-bottom: 5px;" value="host-port"> 
            <span data-i18n="tdengine.label.hostport"></span>
        </label>
        <span id="host-port-section">
            <div class="form-row">
                <label for="node-config-input-host" style="margin-left: 20px;"><i class="fa fa-globe"></i> <span data-i18n="tdengine.label.host"></span></label>
                <input type="text" id="node-config-input-host">
            </div>
            <div class="form-row">
                <label for="node-config-input-port" style="margin-left: 20px;"><i class="fa fa-random"></i> <span data-i18n="tdengine.label.port"></span></label>
                <input type="text" id="node-config-input-port">
            </div>
            <div class="form-row">
                <label for="node-config-input-user" style="margin-left: 20px;"><i class="fa fa-user"></i> <span data-i18n="tdengine.label.user"></span></label>
                <input type="text" id="node-config-input-user">
            </div>
            <div class="form-row">
                <label for="node-config-input-pass" style="margin-left: 20px;"><i class="fa fa-lock"></i> <span data-i18n="tdengine.label.password"></label>
                <input type="password" id="node-config-input-password">
            </div>
            <div class="form-row">
                <label for="node-config-input-db" style="margin-left: 20px;"><i class="fa fa-database"></i> <span data-i18n="tdengine.label.database"></span></label>
                <input type="text" id="node-config-input-db">
            </div>
        </span>    
    </div>  


    <div class="form-tips"><span data-i18n="[html]tdengine.tip"></span></div>    
</script>

<script type="text/javascript">
    RED.nodes.registerType('TDengineServer',{
        category: 'config',
        defaults: {
            name:     {value: "" },
            uri:      {value: "ws://root:taosdata@localhost:6041" },
            connType: {value: "connection-string"},
            host:     {value: "127.0.0.1", required: true},
            port:     {value: "6041",      required: true},
            db:       {value: "" }
        },
        credentials: {
            user:     {type: "text"},
            password: {type: "password"}
        },
        label: function() {
            return this.name || this.db;
        },
        oneditprepare: function() {
            // init
            const updateDisplay = () => {
                const type = $("input[name='connection-type']:checked").val();
                if (type === "host-port") {
                    $("#uri-section input").attr("disabled", "disabled");
                    $("#host-port-section").show();
                } else {
                    $("#uri-section input").removeAttr("disabled");
                    $("#host-port-section").hide();
                }
            };
            
            // set
            
            $("input[name='connection-type'][value='" + this.connType + "']")
                .prop("checked", true);
            
            //$("#node-config-input-uri").val(this.uri);
                
            updateDisplay();
            
            // bind env
            $("input[name='connection-type']").on("change", updateDisplay);
        },
        // save 
        oneditsave: function() {
            this.connType = $("input[name='connection-type']:checked").val();
            //this.uri = $("#node-config-input-uri").val();
        }       
    });
</script>

<script type="text/html" data-template-name="tdengine-operator">
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="node-red:common.label.name"></span></label>
        <input type="text" id="node-input-name" data-i18n="[placeholder]node-red:common.label.name">
    </div>
    <div class="form-row">
        <label for="node-input-db"><i class="fa fa-database"></i> <span data-i18n="tdengine.label.database"></label>
        <input type="text" id="node-input-db">
    </div>
</script>

<script type="text/javascript">
    RED.nodes.registerType('tdengine-operator',{
        category: 'storage-input',
        color: '#a6bb00',
        defaults: {
            db:   {type:"TDengineServer", required:true},
            name: {value:""}
        },
        inputs:1,
        outputs:1,
        icon: "tdengine.png",
        label: function() {
            var levelNode = RED.nodes.node(this.db);
            return this.name||(levelNode ? levelNode.label(): "tdengine-operator");
        },
        labelStyle: function() {
            return this.name?"node_label_italic":"";
        }
    });
</script>