node-red-contrib-zigbee2mqtt/nodes/in.html

Zigbee2mqtt connectivity nodes for node-red

<script type="text/x-red" data-template-name="zigbee2mqtt-in">
    <link rel="stylesheet" href="resources/node-red-contrib-zigbee2mqtt/css/multiple-select.css" type="text/css" />
    <link rel="stylesheet" href="resources/node-red-contrib-zigbee2mqtt/css/common.css" type="text/css" />

    <div class="form-row">
        <label for="node-input-name" class="l-width"><i class="fa fa-bookmark"></i> <span data-i18n="label.name"></span></label>
        <input type="text" id="node-input-name" data-i18n="[placeholder]placeholder.name">
    </div>
    <div class="form-row" style="display:none;">
        <label for="node-input-friendly_name" class="l-width"><i class="fa fa-bookmark"></i> <span data-i18n="label.friendly_name"></span></label>
        <input type="text" id="node-input-friendly_name" data-i18n="[placeholder]placeholder.friendly_name">
    </div>
    <div class="form-row">
        <label for="node-input-server" class="l-width"><i class="fa fa-globe"></i> <span data-i18n="label.server"></span></label>
        <input type="text" id="node-input-server">
    </div>
    <div class="form-row">
        <label for="node-input-device_id" class="l-width"><i class="fa fa-crosshairs"></i> <span data-i18n="label.topic"></span></label>
        <select id="node-input-device_id" class="s-width" multiple="multiple"></select>
    </div>
    <div class="form-row">
        <label for="node-input-state" class="l-width"><i class="fa fa-tag"></i> <span data-i18n="label.state"></span></label>
        <select id="node-input-state" class="s-width" data-i18n="[placeholder]multiselect.complete_payload"></select>
    </div>
    <div class="form-row">
        <label for="force-refresh" class="l-width"><i class="fa fa-refresh"></i> <span data-i18n="label.refresh"></span></label>
        <a class="red-ui-button s-width" id="force-refresh" name="force-refresh"><span data-i18n="label.refresh_devices_list"></span></a>
    </div>
    <div class="form-row">
        <label for='node-input-enableMultiple' class="l-width"><i class='fa fa-filter'></i> <span data-i18n="label.enable_multiple"></span></label>
        <input type="checkbox" id="node-input-enableMultiple" style="display: inline-block; width: auto; vertical-align: top;"> <span data-i18n="label.enable_multiple_help"></span></input>
    </div>
    <div class="form-row">
        <label for='node-input-outputAtStartup' class="l-width"><i class='fa fa-share-square'></i> <span data-i18n="label.start_output"></span></label>
        <input type="checkbox" id="node-input-outputAtStartup" checked="checked" style="display: inline-block; width: auto; vertical-align: top;"> <span data-i18n="label.start_output_help"></span></input>
    </div>
    <div class="form-row">
        <label for='node-input-filterChanges' class="l-width"><i class='fa fa-share-square'></i> <span data-i18n="label.filter_changes"></span></label>
        <input type="checkbox" id="node-input-filterChanges" checked="checked" style="display: inline-block; width: auto; vertical-align: top;"> <span data-i18n="label.filter_changes_help"></span></input>
    </div>
</script>

<script type='text/javascript'>
    RED.nodes.registerType('zigbee2mqtt-in', {
        category: 'Zigbee2mqtt',
        color: '#FDBF48',
        defaults: {
            name: {
                value: ""
            },
            server: {
                type: "zigbee2mqtt-server",
                required: true
            },
            friendly_name: {
                value: "",
                required: false
            },
            device_id: {
                value: null,
                required: true
            },
            state: {
                value: null
            },
            outputAtStartup: {
                value: true,
                required: true
            },
            filterChanges: {
                value: false,
                required: true
            },
            enableMultiple: {
                value: false,
                required: true
            },
        },
        inputs: 0,
        outputs: 1,
        outputLabels: ["value"],
        paletteLabel: 'in',
        icon: "icon.png",
        label: function () {
            var label = 'z2m-input';

            if (this.name) {
                label = this.name;
            } else if (typeof(this.friendly_name) == 'string' && this.friendly_name.length) {
                label = this.friendly_name;
            } else if (typeof(this.device_id) == 'string') {
                label = this.device_id;
            }

            return label;
        },
        oneditprepare: function () {
            let node = this;

            setTimeout(()=>{
                new Zigbee2MqttEditor(node).build();
            }, 100); //need timeout to load server node
        },
        oneditsave: function () {
            //convert array for string if single mode
            if (!$('#node-input-enableMultiple').is(':checked')) {
                let device_id = $('#node-input-device_id').multipleSelect('getSelects', 'value');
                this.device_id = device_id.length ? device_id[0] : null;
            }

            let selectedOptions = $('#node-input-device_id option:selected');
            if (selectedOptions) {
                this.topic = selectedOptions.map(function () {
                    return $(this).val();
                });
            } else {
                this.topic = null;
            }

            let $property = $('#node-input-state');
            this.state = $property.val()!=='0'?$property.val():null;
        }
    });

</script>