node-red-contrib-polymer/nodes/nav_group.html

Polymer based dashboard UI for Node-RED

<script type="text/javascript">
    RED.nodes.registerType('polymer_nav_group', {
        category: 'polymer',
        color: '#869baf',
        defaults: {
            name: {value: ''},
            parent: {value: ''},
            'class': {value: ''},
            title: {value: ''},
            elementOrder: {value: []}
        },
        inputs: 1,
        outputs: 0,
        //icon: "ui_switch.png",
        paletteLabel: 'group',
        label: function() { return this.name || 'group'; },
        oneditprepare: function () {
            var group = this;
            var options = {};
            var elems = {};
            var $elemlist = jQuery("#node-input-sort-container");
            $elemlist.css('min-height', '250px').css('min-width', '450px').editableList({
                sortable: true,
                addButton: false,
                addItem: function(row, index, data) {
                    $(row).html((data.name && data.name !== '') ? data.name : data.id);
                }
            });
            RED.nodes.eachNode(function (n) {
                if (n.type === 'polymer_nav_page') {
                    var optionText = RED.nodes.node(RED.nodes.node(n.id).parent).name + '/' + n.name;
                    options[optionText] = '<option value="' + n.id + '"' +
                        (n.id === group.parent ? ' selected' : '') +
                        '>' + optionText + '</option>';
                } else if ((n.type.indexOf('polymer_nav_') === -1) && (n.parent === group.id)) {
                    elems[n.id] = n;
                }
            });

            if (!group.elementOrder) group.elementOrder = [];
            group.elementOrder.forEach(function (elemId) {
                if (elems[elemId]) $elemlist.editableList('addItem', elems[elemId]);
            });

            Object.keys(elems).forEach(function (elemId) {
                if (group.elementOrder.indexOf(elemId) === -1) $elemlist.editableList('addItem', elems[elemId]);
            });

            Object.keys(options).sort().forEach(function (option) {
                jQuery('#node-input-parent').append(options[option]);
            });
        },
        oneditsave: function () {
            var $elemlist = jQuery("#node-input-sort-container");
            var elems = $elemlist.editableList('items');
            var elemOrder = [];
            elems.each(function () {
                elemOrder.push($(this).data('data').id);
            });

            this.elementOrder = elemOrder;
        }
    });
</script>

<script type="text/x-red" data-template-name="polymer_nav_group">
    <div class="form-row">
        <label for="node-input-parent"><i class="fa fa-tag"></i> Parent Page</label>
        <select id="node-input-parent">
        </select>
    </div>
    <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-title"><i class="fa fa-tag"></i> Title</label>
        <input type="text" id="node-input-title">
    </div>
    <div class="form-row">
        <label for="node-input-class"><i class="fa fa-tag"></i> Class</label>
        <input type="text" id="node-input-class">
    </div>

    <div class="form-row node-input-sort-container-row">
        <ol id="node-input-sort-container"></ol>
    </div>
</script>

<script type="text/x-red" data-help-name="polymer_nav_group">

</script>