node-red-dashboard/nodes/ui_group.html

A set of dashboard nodes for Node-RED

<script type="text/javascript">
    RED.nodes.registerType('ui_group',{
        category: 'config',
        defaults: {
            name: {value: 'Default'},
            tab: {type:"ui_tab",required: true },
            order: {value: 0},
            disp: {value: true},
            width: {value: 6}
        },
        sort: function(A,B) {
            if (A.tab !== B.tab) {
                var tabA = RED.nodes.node(A.tab);
                var tabB = RED.nodes.node(B.tab);
                if (!tabA && tabB) {
                    return -1;
                } else if (tabA && !tabB) {
                    return 1;
                } else {
                    return tabA.order - tabB.order;
                }
            }
            return A.order - B.order;
        },
        paletteLabel: 'dashboard group',
        label: function() {
            var tabNode = RED.nodes.node(this.tab);
            if (tabNode) {
                return (this.name||"Group")+ " ["+(tabNode.name||"Tab")+"]"
            }
            return (this.name || 'Group')+" [unassigned]";
        },
        oneditprepare: function() {
            $("#node-input-size").elementSizer({
                width: "#node-config-input-width",
                auto: false
            });
        }
    });
</script>

<script type="text/x-red" data-template-name="ui_group">
    <div class="form-row">
        <label for="node-config-input-name"><i class="fa fa-tag"></i> Name</label>
        <input type="text" id="node-config-input-name">
    </div>
    <div class="form-row">
        <label for="node-config-input-tab"><i class="fa fa-table"></i> Tab</label>
        <input type="text" id="node-config-input-tab">
    </div>
    <div class="form-row">
        <label for="node-config-input-width"><i class="fa fa-arrows-h"></i> Width</label>
        <input type="hidden" id="node-config-input-width">
        <button class="editor-button" id="node-input-size"></button>
    </div>
    <div class="form-row">
        <input style="margin:8px 0 10px 102px; width:20px;" type="checkbox" checked id="node-config-input-disp"> <label style="width:auto" for="node-config-input-disp">Display group name</label>
    </div>
</script>

<script type="text/x-red" data-help-name="ui_group">
    <p>Group</p>
</script>