node-red-contrib-uibuilder/resources/uib-sender.js

Easily create data-driven web UI's for Node-RED. Single- & Multi-page. Multiple UI's. Work with existing web development workflows or mix and match with no-code/low-code features.

// NOTE: window.uibuilder is added - see `resources` folder
;(function () {
    'use strict'

    // #region --------- module variables for the panel --------- //

    // NOTE: window.uibuilder is added by editor-common.js - see `resources` folder
    const uibuilder = window['uibuilder']
    const mylog = uibuilder.log

    /** Module name must match this nodes html file @constant {string} moduleName */
    const moduleName = 'uib-sender'

    /** Copy of all deployed uibuilder node instances */
    let uibInstances

    // #endregion ------------------------------------------------- //

    /** Get all of the current uibuilder URL's */
    function getUrls() {
        uibInstances = uibuilder.getDeployedUrls()
        Object.keys(uibInstances).forEach( (key, i, arr) => {
            $('#node-input-url').append($('<option>', {
                'value': uibInstances[key],
                'text': uibInstances[key],
                'data-id': key,
            }))
        })
    } // ---- end of getUrls ---- //

    /** Prep for edit
     * @param {*} node A node instance as seen from the Node-RED Editor
     */
    function onEditPrepare(node) {
        mylog('uib-sender onEditPrepare ', node)

        // initial checkbox states
        if (!node.passthrough) node.passthrough = false
        $('#node-input-passthrough')
            // Initial setting
            .prop('checked', node.passthrough)
            // If the setting changes, change the number of output ports
            .on('change', function passthroughChange() {
                if ( $(this).prop('checked') === true ) {
                    node.outputs = 1
                    $('#node-input-return').prop('checked', false)
                } else if ( $('#node-input-return').prop('checked') === false ) {
                    node.outputs = 0
                }
            })
        if (!node.return) node.return = false
        $('#node-input-return')
            // Initial setting
            .prop('checked', node.return)
            // If the setting changes, change the number of output ports
            .on('change', function returnChange() {
                if ( $(this).prop('checked') === true ) {
                    node.outputs = 1
                    $('#node-input-passthrough').prop('checked', false)
                } else if ( $('#node-input-passthrough').prop('checked') === false ) {
                    node.outputs = 0
                }
            })

        // Deal with the url
        getUrls()

        if ( node.uibId in uibInstances ) {
            // console.log( 'uibuilder node ID is known', node.url, node.uibId)
            // We know the ID, always look up the latest name
            const chkUrl = uibInstances[node.uibId]
            if (chkUrl !== node.url) { // The url for this node changed so force a re-deploy
                RED.nodes.dirty(true)
                node.changed = true
            }
            node.url = uibInstances[node.uibId]
        } else if ( Object.values(uibInstances).includes(node.url) ) {
            // console.log( 'We didnt know the id but we found the url', node.url, node.uibId, Object.keys(uibInstances)[Object.values(uibInstances).indexOf(node.url)])
            // We didn't know the ID but we know the last url so set the ID - always force a redeploy in this case
            node.uibId = uibInstances[Object.keys(uibInstances)[Object.values(uibInstances).indexOf(node.url)]]
            RED.nodes.dirty(true)
            node.changed = true
        } else {
            // console.log( 'Neither id nor url found', node.url, node.uibId)
            node.valid = false
        }

        $('#node-input-url')
            .on('change', function() {
                node.uibId = Object.keys(uibInstances)[Object.values(uibInstances).indexOf(this.value)]
                // console.log('>> URL Change >>', this.value, node.uibId, Object.keys(uibInstances)[Object.values(uibInstances).indexOf(this.value)])
            })

        if ( node.url && node.url.length > 0 ) {
            $(`#node-input-url option[value="${node.url}"]`).prop('selected', true)
            $('#node-input-url').val(node.url)
        }

        window['tiDoTooltips']('#ti-edit-panel') // Do this at the end
    }

    /** When node type is added to the palette
     * Which happens on load of the Editor
     * @param {*} node -
     */
    // function onPaletteAdd(node) {
    //     console.log('uib-sender onPaletteAdd ', node)
    // }

    // @ts-ignore
    RED.nodes.registerType(moduleName, {
        defaults: {
            url: { value: '', required: true, },
            uibId: { value: '', }, // ID of selected uibuilder instance
            name: { value: '', },
            topic: { value: '', },
            passthrough: { value: false, },
            return: { value: false, },
            outputs: { value: 0, },
        },
        align: 'right',
        inputs: 1,
        inputLabels: 'Msg with topic property',
        outputs: 0,
        outputLabels: ['Input msg with node ID added'],
        icon: 'uib-link-out.svg',
        paletteLabel: 'msg sender',
        label: function () { return this.name || this.url || 'choose uibuilder node' },
        category: uibuilder.paletteCategory,
        color: 'var(--uib-node-colour)', // '#E6E0F8' '"hsl(248 100% 91%)"'

        oneditprepare: function() { onEditPrepare(this) },

        /** When this node is added to the palette - happens on (re)load of Editor as well */
        // onpaletteadd: function() { onPaletteAdd(this) },
    })
}())