subscribe.html

<script type="text/javascript">
    RED.nodes.registerType('mattersubscribe',{
        category: 'Matter',
        color: '#95cc95',
        icon: "font-awesome/fa-eye",
        inputs:0,
        outputs:1,
        defaults: {
            name: {value:""},
            controller: { value: "", type: "mattercontroller", required: true },
            device: {value:""},
            deviceName: {value:""},
            endpoint: {value:""},
            cluster: {value:""},
            attr: {value:""},
            simpleMode: {value: "true"},
            topic: {value:""}
        },
        paletteLabel: "Subscribe",
        label: function() {
            let defaultName = `${this.deviceName} | ${this.attr}`
            return this.name || defaultName || "Read";
        },
        oneditprepare: function() {
            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=false);
            } 
            $('#refresh-devices').on("click", getDevices);
            $('#refresh-clusters').on("click", getClusters);
            $('#refresh-attr').on("click", function() { getAttributes(writable=false); } );

        },
        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="mattersubscribe">
    <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-topic">Topic</label>
        <input type="text" id="node-input-topic">
    </div>
</script>

<script type="text/x-red" data-help-name="mattersubscribe">
    <p>Subscribe to Attribute changes on a Device</p>
</script>