node-red-contrib-zigbee2mqtt-devices/dist/nodes/scenes.html

Nodes to interact with zigbee2mqtt for Node-RED

<!--- SCENE IN NODE --->
<script type="text/javascript">
    RED.nodes.registerType('scene-in', {
        category: 'zigbee2mqtt_scene',
        color: '#bada66',
        defaults: {
            name: { value: "" },
            scene: { value: "", required: true },
            active: { value: true }
        },
        button: {
            toggle: "active",
            onclick: function () {
                var label = this.name || this.scene || "scene in";
                var node = this;
                node.dirty = true;
                node.changed = true;

                RED.nodes.dirty(true);
                RED.history.push({
                    t: 'edit',
                    node: node,
                    changes: {
                        active: !node.active
                    },
                    dirty: node.dirty,
                    changed: node.changed,
                    callback: function (ev) {
                        activateAjaxCall(ev.node, ev.node.active);
                    }
                });

                RED.view.redraw();
            }
        },
        inputs: 0,
        outputs: 1,
        icon: "inject.png",
        label: function () {
            return this.name || this.scene || "scene in";
        }
    });
</script>

<script type="text/html" data-template-name="scene-in">
    <div class="zigbee2mqtt-devices-properties">

        <div class="form-row">
            <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
            <input type="text" id="node-input-name">
        </div>
        <div class="form-row">
            <label for="node-input-scene"><i class="fa fa-picture-o"></i> Scene</label>
            <input type="text" id="node-input-scene">
        </div>
    </div>
</script>

<script type="text/html" data-help-name="scene-in">
    <p>Node to trigger scenes</p>
</script>

<!--- SCENE SELECTOR NODE --->
<script type="text/javascript">
    function getSelection() {
        return $("#selected-scenes li span").map(function () { return $(this).text() }).get();
    }

    function initSelection(scenes) {
        scenes.forEach(scene => {
            addToSelection(scene);
        });
    }

    function addToSelection(scene) {
        $("#selected-scenes").append('<li style="background: #f5f5f5;padding: 10px;list-style-type: none;right: 0px;border: 1px solid;border-radius: 5px;border-color: rgb(204, 204, 204);"><span>' + scene + '</span><button onclick="removeScene(this)" style="position:absolute;right: 8px;margin-top: -3px;border-radius: 5px;border: 1px solid;border-color: rgb(204, 204, 204);">x</button></li>');
    }

    function removeScene(a) {
        $(a).parent().remove();
        refreshScenes();
    }

    function refreshScenes() {
        $.getJSON('z2m/scenes', function (data) {
            var selection = getSelection();

            var scenes = data.scenes.filter(f => {
                return (selection.length === 0 || selection.every(s => s != f)) && selection.length < data.scenes.length;
            });

            $("#available-scenes").empty();

            scenes.forEach(scene => {
                $("#available-scenes").append("<option>" + scene + "</option>");
            });
        });
    }

    RED.nodes.registerType('scene-selector', {
        category: 'zigbee2mqtt_scene',
        color: '#bada66',
        defaults: {
            name: { value: "" },
            scenes: { value: [], required: true },
            wrapAround: { value: true },
            changedOutputOnly: { value: false }
        },
        inputs: 1,
        outputs: 0,
        icon: "debug.png",
        label: function () {
            return this.name || this.scene || "scene selector";
        },
        oneditprepare: function () {
            initSelection(this.scenes);

            $("#scene-add-button").click(function () {
                var scene = $("#available-scenes").val();
                if (!scene) {
                    return;
                }

                var scenes = getSelection();
                if (scenes.some(s => s == scene)) {
                    return;
                }

                addToSelection(scene);
                refreshScenes();
            });

            refreshScenes();
        },
        oneditsave: function () {
            this.scenes = getSelection();
        }
    });
</script>

<script type="text/html" data-template-name="scene-selector">
    <div class="zigbee2mqtt-devices-properties">

        <div class="form-row">
            <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
            <input type="text" id="node-input-name">
        </div>
        <div class="form-row">
            <label for="node-input-scene"><i class="fa fa-picture-o"></i> Scenes</label>
            <div id="input-scenes" style="display:inline;">
                <select id="available-scenes">
                </select>
                <button type="button" class="red-ui-button" id="scene-add-button">add scene</button>
                <div>
                    <ul id="selected-scenes" style="margin: 10px 0px 0px 105px;width: 70%;position: relative;right: 0px;"></ul>
                </div>
            </div>
        </div>
        <div class="form-row">
            <label for="node-input-wrapAround"><i class="fa fa-retweet"></i> Wrap around</label>
            <input type="checkbox" id="node-input-wrapAround">
        </div>
        <div class="form-row">
            <label for="node-input-changedOutputOnly"><i class="fa fa-envelope"></i> Changed output only</label>
            <input type="checkbox" id="node-input-changedOutputOnly">
        </div>
        
    </div>
</script>

<script type="text/html" data-help-name="scene-selector">
    <p>Node to trigger scenes</p>
</script>