command.html

<script type="text/javascript">
    RED.nodes.registerType('mattercommand',{
        category: 'Matter',
        color: '#95cc95',
        icon: "font-awesome/fa-arrow-circle-o-down",
        inputs:1,
        outputs:1,
        defaults: {
            name: {value:""},
            controller: { value: "", type: "mattercontroller", required: true },
            device: {value:""},
            deviceName: {value:""},
            endpoint: {value:""},
            cluster: {value:""},
            command: {value:""},
            data: {value:"{}"},
            dataType: {value:""},
            simpleMode: {value: "true"}
        },
        paletteLabel: "Command",
        label: function() {
            let defaultName = `${this.deviceName} | ${this.command}`
            return this.name || defaultName || "Command";
        },
        oneditprepare: function() {
            $('#node-input-data').typedInput({
                types: ['json', 'msg', 'flow', 'global', 'jsonata', 'env'],
                typeField: $('#node-input-dataType')
            });
            if (this.device.length != 0){
                setDevice(this.controller, this.device)
            } 
            if (this.cluster.length != 0){
                setCluster(this.controller, this.device, this.cluster)
            }
            if (this.command.length != 0){
                setCommand(this.controller, this.device, this.cluster, this.command);
            } 
            $('#refresh-devices').on("click", getDevices);
            $('#refresh-clusters').on("click", getClusters);
            $('#refresh-commands').on("click", getCommands);
            $('#refresh-sample').on("click", getCommandOpts);
            $('node-input-command').on("changed", getCommandOpts);
        },
        oneditsave: function() {
            let el = document.getElementById('node-input-device');
            this.deviceName = el.options[el.selectedIndex].innerHTML;
        }
    });
</script>

<script type="text/x-red" data-template-name="mattercommand">
    <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-controller">Controller</label>
        <input type="text" id="node-input-controller" style="width:70%;">
    </div>
    <div class="form-row">
        <label for="node-input-simpleMode">Simple Mode</label>
        <input type="checkbox" id="node-input-simpleMode" value="true" >
    </div>
    <div class="form-row">
        <label for="node-input-device">Device</label>
        <select type="text" id="node-input-device" style="width:50%;" >
        </select>
        <a id="refresh-devices" class="btn"><i class="fa fa-refresh"></i></a>
    </div>
    <!--
        <div class="form-row">
        <label for="node-input-endpoint">Endpoint</label>
        <select type="text" id="node-input-endpoint" style="width:50%;" >
        </select>
    </div>
    -->
    <div class="form-row">
        <label for="node-input-cluster">Cluster</label>
        <select type="text" id="node-input-cluster" style="width:50%;" >
        </select>
        <a id="refresh-clusters" class="btn"><i class="fa fa-refresh"></i></a>
    </div>
    <div class="form-row">
        <label for="node-input-command">Command</label>
        <select type="text" id="node-input-command" style="width:50%;" >
        </select>
        <a id="refresh-commands" class="btn"><i class="fa fa-refresh"></i></a>
    </div>
    <div class="form-row">
        <label for="node-input-data">Params</label>
        <input type="hidden" id="node-input-dataType">
        <input type="text" id="node-input-data">
        <div class="form-tips" style="width:90%;">
            <b>Sample Params</b>&nbsp;
            <a id="refresh-sample" class="btn"><i class="fa fa-refresh"></i></a>
            <pre id="sample-data"></pre>
        </div>
    </div>
   
</script>

<script type="text/x-red" data-help-name="mattercommand">
    <p>Send a Command to a Device</p>
</script>