smart-nodes/delay/delay.html

Smart Nodes

<script type="text/javascript">
    RED.nodes.registerType("smart_delay", {
        category: "Smart Nodes",
        paletteLabel: "delay",
        color: "#6EE2D9",
        defaults: {
            name: { value: "" },
            on_delay: { value: 10 },
            on_delay_unit: { value: "s" },
            off_delay: { value: 10 },
            off_delay_unit: { value: "s" },
            delay_only_on_change: { value: true },
            save_state: { value: false },
            resend_on_start: { value: false }
        },
        inputs: 1,
        outputs: 1,
        icon: "timer.png",
        label: function ()
        {
            return this.name || "Delay";
        },
        oneditprepare: function ()
        {
            let node = this;

            $("#node-input-on_delay")
                .css("max-width", "4rem")
                .spinner({
                    min: 0,
                    change: function (event, ui)
                    {
                        var value = parseInt(this.value);
                        value = isNaN(value) ? 0 : value;
                        value = Math.max(value, parseInt($(this).attr("aria-valuemin")));
                        // value = Math.min(value, parseInt($(this).attr("aria-valuemax")));
                        if (value !== this.value)
                            $(this).spinner("value", value);
                    }
                });

            $("#node-input-on_delay_unit")
                .css("max-width", "10rem")
                .typedInput({
                    types: [{
                        default: "s",
                        value: "on_delay_unit",
                        options: [
                            { value: "ms", label: node._("delay.ui.milliseconds") },
                            { value: "s", label: node._("delay.ui.seconds") },
                            { value: "min", label: node._("delay.ui.minutes") },
                            { value: "h", label: node._("delay.ui.hours") },
                        ]
                    }]
                });

            $("#node-input-off_delay")
                .css("max-width", "4rem")
                .spinner({
                    min: 0,
                    change: function (event, ui)
                    {
                        var value = parseInt(this.value);
                        value = isNaN(value) ? 0 : value;
                        value = Math.max(value, parseInt($(this).attr("aria-valuemin")));
                        // value = Math.min(value, parseInt($(this).attr("aria-valuemax")));
                        if (value !== this.value)
                            $(this).spinner("value", value);
                    }
                });

            $("#node-input-off_delay_unit")
                .css("max-width", "10rem")
                .typedInput({
                    types: [{
                        default: "s",
                        value: "on_delay_unit",
                        options: [
                            { value: "ms", label: node._("delay.ui.milliseconds") },
                            { value: "s", label: node._("delay.ui.seconds") },
                            { value: "min", label: node._("delay.ui.minutes") },
                            { value: "h", label: node._("delay.ui.hours") },
                        ]
                    }]
                });

            $("#node-input-save_state").on("change", ev =>
            {
                if (ev.target.checked)
                    $("#resend_on_start_row").show();
                else
                    $("#resend_on_start_row").hide();
            });
            $("#node-input-save_state").trigger("change");
        },
    });
</script>

<script type="text/html" data-template-name="smart_delay">
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="delay.ui.name"></span></label>
        <input type="text" id="node-input-name" data-i18n="[placeholder]delay.ui.name" />
    </div>
    <div class="form-row">
        <label for="node-input-on_delay"><i class="fa fa-clock-o"></i> <span data-i18n="delay.ui.on_delay"></label>
        <input id="node-input-on_delay" value="0" />
        <input id="node-input-on_delay_unit" />
    </div>
    <div class="form-row">
        <label for="node-input-off_delay"><i class="fa fa-clock-o"></i> <span data-i18n="delay.ui.off_delay"></label>
        <input id="node-input-off_delay" value="0" />
        <input id="node-input-off_delay_unit" />
    </div>
    <div class="form-row">
        <input id="node-input-delay_only_on_change" type="checkbox" style="display: inline-block; width: auto; vertical-align: top;"/>
        <span data-i18n="[html]delay.ui.delay_only_on_change"></span>
    </div>
    <hr/>
    <h4 style="margin: 0.5rem 0;" data-i18n="delay.ui.system_start"></h4>
    <div class="form-row">
        <input type="checkbox" id="node-input-save_state" style="width: 20px;" />
        <label for="node-input-save_state" style="width: calc(100% - 30px);" data-i18n="delay.ui.save_state"></label>
    </div>
    <div class="form-row" id="resend_on_start_row">
        <input type="checkbox" id="node-input-resend_on_start" style="width: 20px;" />
        <label for="node-input-resend_on_start" style="width: calc(100% - 30px);" data-i18n="delay.ui.send_after_start"></label>
    </div>
</script>