write_attribute.html

<script type="text/javascript">
    RED.nodes.registerType('matterwriteattr',{
        category: 'Matter',
        color: '#95cc95',
        icon: "font-awesome/fa-pencil",
        inputs:1,
        outputs:1,
        defaults: {
            name: {value:""},
            controller: { value: "", type: "mattercontroller", required: true },
            device: {value:""},
            deviceName: {value:""},
            endpoint: {value:""},
            cluster: {value:""},
            attr: {value:""},
            simpleMode: {value: "true"},
            data: {value:""},
            dataType: {value:""}
        },
        paletteLabel: "Write Attribute",
        label: function() {
            let defaultName = `${this.deviceName} | ${this.attr}`
            return this.name || defaultName || "Read";
        },
        oneditprepare: function() {
            $('#node-input-data').typedInput({
                types: ['str', 'num', 'msg', 'flow', 'global', 'jsonata', 'env', {value: 'null', label: 'null', hasValue: false}],
                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.attr.length != 0){
                setAttribute(this.controller, this.device, this.cluster, this.attr, writable=true);
            }

            $('#refresh-devices').on("click", getDevices);
            $('#refresh-clusters').on("click", getClusters);
            $('#refresh-attr').on("click", function() { getAttributes(writable=true); } );
            $('#refresh-sample').on("click", getAttributeOpts);
            $('node-input-attribute').on("changed", getAttributeOpts);
        },
        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="matterwriteattr">
    <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-attr">Attribute</label>
        <select type="text" id="node-input-attr" style="width:50%;" >
        </select>
        <a id="refresh-attr" 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>Param Info</b>&nbsp;
            <a id="refresh-sample" class="btn"><i class="fa fa-refresh"></i></a>
            <pre id="sample-data"></pre>
            <div id="sample-details"></div>
        </div>
    </div>
</script>

<script type="text/x-red" data-help-name="matterwriteattr">
    <p>Write to an Attribute on a Device</p>
</script>