nodered_cfg/node_modules/@flowfuse/node-red-dashboard/nodes/widgets/ui_switch.html

<script type="text/javascript">
    (function () {
        function hasProperty (obj, prop) {
            return Object.prototype.hasOwnProperty.call(obj, prop)
        }
        RED.nodes.registerType('ui-switch', {
            category: RED._('@flowfuse/node-red-dashboard/ui-base:ui-base.label.category'),
            color: RED._('@flowfuse/node-red-dashboard/ui-base:ui-base.colors.light'),
            defaults: {
                name: { value: '' },
                label: { value: 'switch' },
                // tooltip: {value: ''},
                group: { type: 'ui-group', required: true },
                order: { value: 0 },
                width: {
                    value: 0,
                    validate: function (v) {
                        const width = v || 0
                        const currentGroup = $('#node-input-group').val() || this.group
                        const groupNode = RED.nodes.node(currentGroup)
                        const valid = !groupNode || +width <= +groupNode.width
                        $('#node-input-size').toggleClass('input-error', !valid)
                        return valid
                    }
                },
                height: { value: 0 },
                passthru: { value: false },
                decouple: { value: false },
                topic: { value: 'topic', validate: (hasProperty(RED.validators, 'typedInput') ? RED.validators.typedInput('topicType') : function (v) { return true }) },
                topicType: { value: 'msg' },
                style: { value: '' },
                className: { value: '' },
                // on state
                onvalue: { value: true, validate: (hasProperty(RED.validators, 'typedInput') ? RED.validators.typedInput('onvalueType') : function (v) { return true }) },
                onvalueType: { value: 'bool' },
                onicon: { value: '' },
                oncolor: { value: '' },
                // off state
                offvalue: { value: false, validate: (hasProperty(RED.validators, 'typedInput') ? RED.validators.typedInput('offvalueType') : function (v) { return true }) },
                offvalueType: { value: 'bool' },
                officon: { value: '' },
                offcolor: { value: '' }
            },
            inputs: 1,
            outputs: 1,
            icon: 'font-awesome/fa-toggle-on',
            paletteLabel: 'switch',
            label: function () { return this.name || (~this.label.indexOf('{' + '{') ? null : this.label) || 'switch' },
            labelStyle: function () { return this.name ? 'node_label_italic' : '' },
            oneditprepare: function () {
                // if this groups parent is a subflow template, set the node-config-input-width and node-config-input-height up
                // as typedInputs and hide the elementSizer (as it doesn't make sense for subflow templates)
                if (RED.nodes.subflow(this.z)) {
                    // change inputs from hidden to text & display them
                    $('#node-input-width').attr('type', 'text')
                    $('#node-input-height').attr('type', 'text')
                    $('div.form-row.nr-db-ui-element-sizer-row').hide()
                    $('div.form-row.nr-db-ui-manual-size-row').show()
                } else {
                    // not in a subflow, use the elementSizer
                    $('div.form-row.nr-db-ui-element-sizer-row').show()
                    $('div.form-row.nr-db-ui-manual-size-row').hide()
                    $('#node-input-size').elementSizer({
                        width: '#node-input-width',
                        height: '#node-input-height',
                        group: '#node-input-group'
                    })
                }
                $('#node-input-custom-icons').on('change', function () {
                    if ($('#node-input-custom-icons').val() === 'default') {
                        $('.form-row-custom-icons').hide()
                    } else {
                        $('.form-row-custom-icons').show()
                    }
                })

                if (this.onicon !== '' || this.oncolor !== '' || this.officon !== '' || this.offcolor !== '') {
                    $('#node-input-custom-icons').val('custom')
                } else {
                    $('.form-row-custom-icons').hide()
                    $('#node-input-custom-icons').change()
                }

                $('#node-input-onvalue').typedInput({
                    default: 'str',
                    typeField: $('#node-input-onvalueType'),
                    types: ['str', 'num', 'bool', 'json', 'bin', 'date', 'flow', 'global']
                })

                $('#node-input-offvalue').typedInput({
                    default: 'str',
                    typeField: $('#node-input-offvalueType'),
                    types: ['str', 'num', 'bool', 'json', 'bin', 'date', 'flow', 'global']
                })

                $('#node-input-topic').typedInput({
                    default: 'str',
                    typeField: $('#node-input-topicType'),
                    types: ['str', 'msg', 'flow', 'global']
                })

                $('#node-input-passthru').on('change', function () {
                    if (this.checked) {
                        $('#node-field-decouple').val('false')
                        $('.form-row-decouple').hide()
                    } else {
                        $('.form-row-decouple').show()
                    }
                })

                if (typeof this.decouple === 'undefined') {
                    // backward compatibility
                    this.decouple = false
                }
                // set decouple option correctly
                $('#node-field-decouple').val(this.decouple.toString()).change()

                // use jQuery UI tooltip to convert the plain old title attribute to a nice tooltip
                $('.ui-node-popover-title').tooltip({
                    show: {
                        effect: 'slideDown',
                        delay: 150
                    }
                })
            },
            oneditsave: function () {
                if ($('#node-input-custom-icons').val() === 'default') {
                    $('#node-input-onicon').val('')
                    $('#node-input-officon').val('')
                    $('#node-input-oncolor').val('')
                    $('#node-input-offcolor').val('')
                }

                const decouple = $('#node-field-decouple').val()
                if (decouple === 'true') {
                    this.decouple = true
                } else {
                    this.decouple = false
                }
            }
        })
    })()
</script>

<script type="text/html" data-template-name="ui-switch">
    <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-group"><i class="fa fa-table"></i> Group</label>
        <input type="text" id="node-input-group">
    </div>
    <div class="form-row nr-db-ui-element-sizer-row">
        <label><i class="fa fa-object-group"></i> <span data-i18n="ui-switch.label.size">Size</label>
        <button class="editor-button" id="node-input-size"></button>
    </div>
    <div class="form-row nr-db-ui-manual-size-row">
        <label><i class="fa fa-arrows-h"></i> <span data-i18n="ui-switch.label.width">Width</label>
        <input type="hidden" id="node-input-width">
    </div>
    <div class="form-row nr-db-ui-manual-size-row">
        <label><i class="fa fa-arrows-v"></i> <span data-i18n="ui-switch.label.height">Height</label>
        <input type="hidden" id="node-input-height">
    </div>
    <div class="form-row">
        <label for="node-input-label"><i class="fa fa-i-cursor"></i> Label</label>
        <input type="text" id="node-input-label">
    </div>
    <div class="form-row">
        <label for="node-input-className"><i class="fa fa-code"></i> Class</label>
        <div style="display: inline;">
            <input style="width: 70%;" type="text" id="node-input-className" placeholder="Optional CSS class name(s)" style="flex-grow: 1;">
            <a
                data-html="true"
                title="Dynamic Property: Send msg.class to append new classes to this widget. NOTE: classes set at runtime will be applied in addition to any class(es) set in the nodes class field."
                class="red-ui-button ui-node-popover-title"
                style="margin-left: 4px; cursor: help; font-size: 0.625rem; border-radius: 50%; width: 24px; height: 24px; display: inline-flex; justify-content: center; align-items: center;">
                <i style="font-family: ui-serif;">fx</i>
            </a>
        </div>
    </div>
    <!--<div class="form-row">
        <label for="node-input-tooltip"><i class="fa fa-info-circle"></i> Tooltip</label>
        <input type="text" id="node-input-tooltip" placeholder="optional tooltip">
    </div>-->
    <div class="form-row">
        <label for="node-input-custom-icons"><i class="fa fa-picture-o"></i> Icon</label>
        <select id="node-input-custom-icons" style="width:35%">
            <option value="default">Default</option>
            <option value="custom">Custom</option>
        </select>
    </div>
    <div class="form-row form-row-custom-icons">
        <label for="node-input-onicon" style="text-align:right;"><i class="fa fa-toggle-on"></i> On Icon</label>
        <input type="text" id="node-input-onicon" style="width:120px">
        <label for="node-input-oncolor" style="width:50px; text-align:right;">Colour</label>
        <input type="text" id="node-input-oncolor" style="width:120px">
    </div>
    <div class="form-row form-row-custom-icons">
        <label for="node-input-officon" style="text-align:right;"><i class="fa fa-toggle-off"></i> Off Icon</label>
        <input type="text" id="node-input-officon" style="width:120px">
        <label for="node-input-offcolor" style="width:50px; text-align:right;">Colour</label>
        <input type="text" id="node-input-offcolor" style="width:120px">
    </div>
    <div class="form-row">
        <label style="width:auto" for="node-input-passthru"><i class="fa fa-arrow-right"></i> If <code>msg</code> arrives on input, pass through to output: </label>
        <input type="checkbox" checked id="node-input-passthru" style="display:inline-block; width:auto; vertical-align:top;">
    </div>
    <div class="form-row form-row-decouple">
        <!-- do not us node-input-<property> so we can enforce boolean types -->
        <label for="node-field-decouple"><i class="fa fa-toggle-on"></i> Indicator</label>
        <select id="node-field-decouple" style="display: inline-block; vertical-align: middle; width:70%;">
            <option value="false">Switch icon shows state of the output</option>
            <option value="true">Switch icon shows state of the input</option>
        </select>
    </div>
    <div class="form-row">
        <label style="width:auto" for="node-input-onvalue"><i class="fa fa-envelope-o"></i> When clicked, send:</label>
    </div>
    <div class="form-row">
        <label for="node-input-onvalue" style="padding-left:25px; margin-right:-25px">On Payload</label>
        <input type="text" id="node-input-onvalue" style="width:70%">
        <input type="hidden" id="node-input-onvalueType">
    </div>
    <div class="form-row">
        <label for="node-input-offvalue" style="padding-left:25px; margin-right:-25px">Off Payload</label>
        <input type="text" id="node-input-offvalue" style="width:70%">
        <input type="hidden" id="node-input-offvalueType">
    </div>
    <div class="form-row">
        <label for="node-input-topic" style="padding-left:25px; margin-right:-25px">Topic</label>
        <input type="text" id="node-input-topic">
        <input type="hidden" id="node-input-topicType">
    </div>
</script>