nodered_cfg/node_modules/@flowfuse/node-red-dashboard-2-ui-led/nodes/ui-led.html

<script type="text/javascript">

    function generateStateRow (i, state) {
        const color = state.color
        const value = state.value
        const valueType = state.valueType

        const container = $('<li/>', { style: 'background: var(--red-ui-secondary-background, #fff); margin:0; padding:8px 0px 0px; border-bottom: 1px solid var(--red-ui-form-input-border-color, #ccc);' })
        const row = $('<div/>', {class: 'form-row-flex'}).appendTo(container)
        $('<div/>', { style: 'padding-top:5px; padding-left:175px;' }).appendTo(container)
        $('<div/>', { style: 'padding-top:5px; padding-left:120px;' }).appendTo(container)

        $('<i style="color: var(--red-ui-form-text-color, #eee); cursor:move; margin-left:3px;" class="node-input-state-handle fa fa-bars"></i>').appendTo(row)
        
        // color picker
        $('<input/>', { class: 'node-input-state-color', type: 'color', style: 'margin-left:7px; width: 50px;', placeholder: 'Color', value: color }).appendTo(row)
        
        // value field
        const valueFieldContainer = $('<div/>', {
            style: 'min-width:30%; flex-grow:1; margin-left:10px;'
        }).appendTo(row)
        const valueField = $('<input/>', { class: 'node-input-state-value', type: 'text', style: 'width: 100%;', placeholder: 'Value', value: value }).appendTo(valueFieldContainer)
        const valueTypeField = $('<input/>', { class: 'node-input-state-valueType', type: 'hidden', value: valueType }).appendTo(valueFieldContainer)

        valueField.typedInput({
            default: 'bool',
            typeField: valueTypeField,
            types: ['str', 'num', 'bool', 'json', 'bin']
        })

        const finalSpan = $('<span/>', { style: 'float:right; margin-right:8px;' }).appendTo(row)
        const deleteButton = $('<a/>', { href: '#', class: 'editor-button editor-button-small', style: 'margin-top:7px; margin-left:5px;' }).appendTo(finalSpan)
        $('<i/>', { class: 'fa fa-remove' }).appendTo(deleteButton)

        deleteButton.click(function () {
            container.css({ background: 'var(--red-ui-secondary-background-inactive, #fee)' })
            container.fadeOut(300, function () {
                $(this).remove()
            })
        })

        $('#node-input-states-container').append(container)
    }

    RED.nodes.registerType('ui-led', {
        category: RED._('@flowfuse/node-red-dashboard/ui-base:ui-base.label.category'),
        color: RED._('@flowfuse/node-red-dashboard/ui-base:ui-base.colors.medium'),
        defaults: {
            name: { value: "" },
            group: { type: 'ui-group', required: true },
            order: { value: -1 },
            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 },
            label: { value: '' },
            labelPlacement: { value: 'left' },
            labelAlignment: { value: 'left' },
            states: {
                required: true,
                value: [
                    {
                        color: '#FF0000',
                        value: false,
                        valueType: 'bool'
                    },
                    {
                        color: '#00FF00',
                        value: true,
                        valueType: 'bool'
                    }
                ]
            },
            allowColorForValueInMessage: { value: false },
            shape: { value: 'circle' },
            showBorder: { value: true },
            showGlow: { value: true }
        },
        inputs: 1,
        outputs: 0,
        icon: "font-awesome/fa-lightbulb-o",
        label: function() {
            return this.name || "ui-led";
        },
        oneditprepare: function () {
            $('#node-input-size').elementSizer({
                width: '#node-input-width',
                height: '#node-input-height',
                group: '#node-input-group'
            });

            // update the colorForValue list
            // setupColorForValue(this)

            console.log(this.states)

            $('#node-input-add-state').click(function () {
                generateStateRow($('#node-input-states-container').children().length + 1, {})
                $('#node-input-states-container-div').scrollTop($('#node-input-states-container-div').get(0).scrollHeight)
            })

            $('#node-input-states-container').sortable({
                axis: 'y',
                handle: '.node-input-option-handle',
                cursor: 'move'
            })

            for (let i = 0; i < this.states.length; i++) {
                const state = this.states[i]
                generateStateRow(i + 1, state)
            }
        },
        oneditsave: function () {
            const states = $('#node-input-states-container').children()

            const node = this
            node.states = []
            states.each(function (i) {
                const state = $(this)
                const s = {
                    value: state.find('.node-input-state-value').val(),
                    valueType: state.find('.node-input-state-valueType').val(),
                    color: state.find('.node-input-state-color').val()
                }
                node.states.push(s)
            })
        }
    });
</script>

<script type="text/html" data-template-name="ui-led">
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
        <input type="text" id="node-input-name" placeholder="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">
        <label><i class="fa fa-object-group"></i> <span data-i18n="ui-led.label.size"></label>
        <input type="hidden" id="node-input-width">
        <input type="hidden" id="node-input-height">
        <button class="editor-button" id="node-input-size"></button>
    </div>
    <h3>Label Styling</h3>
    <div class="form-row">
        <label for="node-input-label"><i class="icon-tag"></i>  <span data-i18n="ui-led.label.text"></span></label>
        <input type="text" id="node-input-label" data-i18n="[placeholder]editor:editor.defaultLabel">
    </div>
    <div class="form-row-flex" style="gap: 100px;">
        <div class="form-row">
            <label for="node-input-labelPlacement"><i class="icon-tag"></i> Placement</label>
            <select id="node-input-labelPlacement" style="width: 75px;">
                <option value="left">left</option>
                <option value="right">right</option>
            </select>
        </div>
        <div class="form-row">
            <label for="node-input-labelAlignment"><i class="icon-tag"></i> Alignment</label>
            <select id="node-input-labelAlignment" style="width: 75px;">
                <option value="flex-start">left</option>
                <option value="center">center</option>
                <option value="flex-end">right</option>
            </select>
        </div>
    </div>
    <h3>LED Styling</h3>
    <div class="form-row">
        <label for="node-input-shape"><i class="icon-tag"></i> Shape</label>
        <select id="node-input-shape" style="width: 75px;">
            <option value="circle">circle</option>
            <option value="square">square</option>
        </select>
    </div>
    <div class="form-row" style="display: flex; flex-direction: row; width: 100%;">
        <div style="flex-grow: 1; display: flex; flex-direction: row;">
            <label for="node-input-showBorder" style="flex-grow: 1; margin-bottom: unset;">Show border around LED</label>
            <input type="checkbox" id="node-input-showBorder" style="width: unset;">
        </div>
    </div>
    <div class="form-row" style="display: flex; flex-direction: row; width: 100%;">
        <div style="flex-grow: 1; display: flex; flex-direction: row;">
            <label for="node-input-showGlow" style="flex-grow: 1; margin-bottom: unset;">Show glow effect around LED</label>
            <input type="checkbox" id="node-input-showGlow" style="width: unset;">
        </div>
    </div>
    <h3>Values</h3>
    <div class="form-row node-input-states-container-row" style="margin-bottom:0px; width:100%; min-width:520px; display: flex; flex-direction: column;">
        <label style="vertical-align:top; width: 100%;"><i class="fa fa-list-alt"></i> Colors for value of msg.payload</label>
        <div id="node-input-states-container-div" style="box-sizing:border-box; border-radius:5px; height:257px; padding:5px; border:1px solid var(--red-ui-form-input-border-color, #ccc); overflow-y:scroll; display:inline-block; width: 100%;">
            <span id="valWarning" style="color: var(--red-ui-text-color-error, #910000)"><b data-i18n="ui-led.errors.unique"></b></span>
            <ol id="node-input-states-container" style="list-style-type:none; margin:0;"></ol>
        </div>
    </div>
    <div class="form-row">
        <a href="#" class="editor-button editor-button-small" id="node-input-add-state" style="margin-top:4px;"><i class="fa fa-plus"></i> <span>Color</span></a>
    </div>
</script>