node-red-contrib-zigbee2mqtt-devices/dist/zigbee2mqtt-config.html

Nodes to interact with zigbee2mqtt for Node-RED

<!--- BRIDGE CONFIG NODE --->
<script type="text/javascript">
    RED.nodes.registerType("zigbee2mqtt-bridge-config", {
        category: "config",
        defaults: {
            name: { value: "", required: true },
            broker: { value: "", type: "mqtt-broker" },
            baseTopic: { value: "zigbee2mqtt", required: true },
            enabledLogging: { value: false },
            allowDeviceStatusRefresh: { value: true },
        },
        label: function () { return this.name; },
        paletteLabel: "bridge config"
    });
</script>

<script type="text/html" data-template-name="zigbee2mqtt-bridge-config">
    <style>
        .zigbee2mqtt-bridge-config-editor label{
            width:132px !important;
        }
    </style>
    <div class="zigbee2mqtt-bridge-config-editor">
        <div class="form-row">
            <label for="node-config-input-name"><i class="fa fa-tag"></i> Name</label>
            <input type="text" id="node-config-input-name" placeholder="Name" />
        </div>	
        <div class="form-row">
            <label for="node-config-input-broker"><i class="fa fa-server"></i> Broker</label>
            <input type="text" id="node-config-input-broker" />
        </div>
        <div class="form-row">
            <label for="node-config-input-baseTopic"><i class="fa fa-hashtag"></i> Base MQTT Topic</label>
            <input type="text" id="node-config-input-baseTopic" placeholder="topic" />
        </div>
        <div class="form-row">
            <label for="node-config-input-enabledLogging"><i class="fa fa-envelope"></i> Output Bridge logs</label>
            <input type="checkbox" id="node-config-input-enabledLogging" placeholder="topic" />
        </div>
        <div class="form-row">
            <label for="node-config-input-allowDeviceStatusRefresh"><i class="fa fa-refresh"></i> Allows Device Status Refresh</label>
            <input type="checkbox" id="node-config-input-allowDeviceStatusRefresh" placeholder="topic" />
        </div>
    </div>
</script>

<script type="text/html" data-help-name="zigbee2mqtt-bridge-config">
    <p>
        Configure the connection to your MQTT Broker and zigbee2mqtt. This is needed to get or send messages via MQTT to zigbee2mqtt.
    </p>
    <h3>Inputs</h3>
    <dl class="message-properties">
        <dt class="required">Base MQTT Topic <span class="property-type">string</span></dt>
        <dd>The base topic which is configured in the configuration.yml in zigbee2mqtt. Usually: <code>zigbee2mqtt</code></dd>
        <dt class="required">Broker <span class="property-type">config</span></dt>
        <dd>MQTT connection configuration</dd>
    </dl>
</script>

<!--- DEVICE CONFIG NODE --->
<script type="text/javascript">
    RED.nodes.registerType("zigbee2mqtt-device-config", {
        category: 'config',
        defaults: {
            name: { value: "", required: true },
            bridge: { value: "", type: "zigbee2mqtt-bridge-config" },
            deviceName: { value: "---", required: true },
            brightnessSupport: { value: false },
            temperatureSupport: { value: false },
            colorSupport: { value: false },
            genericMqttDevice: { value: false },
            statusTopic: { value: "" },
            commandTopic: { value: "" },
            refreshTopic: { value: "" },
        },
        label: function () { return this.name; },
        paletteLabel: "Device config",
        oneditprepare: function () {
            var node = this;
            var deviceName = node.deviceName;
            RED.bavaria.devices.createDeviceSelector("device-selection", deviceName, "router", "all", "all", true);

            if (node.genericMqttDevice === true) {
                $("#fullMqttTopic").show()
            } else {
                $("#fullMqttTopic").hide()
            }

            $("#node-config-input-genericMqttDevice").change(function () {
                if (this.checked) {
                    $("#fullMqttTopic").show()
                    node.deviceName = "---";
                } else {
                    $("#fullMqttTopic").hide()
                    $("#node-config-input-deviceName").val(deviceName);
                }
            })

            $("#node-config-input-deviceName").change(function () {
                if ($(this).val() !== "---") {
                    $("#select-empty-option").remove();
                }
            });
        }
    });
</script>

<script type="text/html" data-template-name="zigbee2mqtt-device-config">
    <div class="form-row">
        <label for="node-config-input-name"><i class="fa fa-tag"></i> Name</label>
        <input type="text" id="node-config-input-name" placeholder="Name" />
    </div>	
    <div class="form-row">
        <label for="node-config-input-bridge"><i class="fa fa-tag"></i> Bridge</label>
        <input type="text" id="node-config-input-bridge" />
    </div>
    <div id="device-selection" class="form-row">
    </div>
    <div class="form-row">
        <label for="node-config-input-brightnessSupport"><i class="fa fa-tag"></i> Dimmable</label>
        <input type="checkbox" id="node-config-input-brightnessSupport" />
    </div>
    <div class="form-row">
        <label for="node-config-input-temperatureSupport"><i class="fa fa-tag"></i> Temperature Support</label>
        <input type="checkbox" id="node-config-input-temperatureSupport" />
    </div>
    <div class="form-row">
        <label for="node-config-input-colorSupport"><i class="fa fa-tag"></i> Color Support</label>
        <input type="checkbox" id="node-config-input-colorSupport" />
    </div>
    <div class="form-row">
        <h3>Non zigbee2mqtt device support (experimental)</h3>
        <label for="node-config-input-genericMqttDevice"><i class="fa fa-tag"></i> Is generic MQTT device</label>
        <input type="checkbox" id="node-config-input-genericMqttDevice" />
    </div>

    <div id="fullMqttTopic">
        <div class="form-row">
            <label for="node-config-input-fullMqttTopic"><i class="fa fa-tag"></i> Status Topic</label>
            <input type="text" id="node-config-input-statusTopic" />
        </div>
        <div class="form-row">
            <label for="node-config-input-fullMqttTopic"><i class="fa fa-tag"></i> Command Topic</label>
            <input type="text" id="node-config-input-commandTopic" />
        </div>
        <div class="form-row">
            <label for="node-config-input-fullMqttTopic"><i class="fa fa-tag"></i> Refresh Topic</label>
            <input type="text" id="node-config-input-refreshTopic" />
        </div>
    </div>
</script>