prisme-flow/nodes/bridge/isa/ISA-Machine-Mapper.html

prisme platform flow engine

<!--
 Created by prisme.io on 09/06/2017.

 @author <a href="mailto:hello@prisme.io">savane vamara</a> (prisme.io)

-->


<script type="text/javascript">
    RED.nodes.registerType('ISA-Machine-Mapper', {
        category: 'plc',
        color: '#FF7030',
        defaults: {
            machineid: {type: 'ISA-MachineId', required: true},
            name: {value: ''},
            topic: {value: ''},
            register: {value: '1', validate: RED.validators.number()},
            group: {value: ''},
            order: {value: '1', validate: RED.validators.number()},
            mappings: {
                value: [{
                    structureType: 'Variable',
                    start: '0',
                    quantity: '1',
                    structureParentNodeId: 'ns=4;s=Examples',
                    structureNodeId: 'ns=4;s=MyVariable1',
                    structureName: 'MyVariable1',
                    typeMachine: 'UInt16',
                    typeStructure: 'UInt16'
                }]
            }
        },
        inputs: 1,
        outputs: 3,
        icon: "isa95-icon-blue.png",
        label: function () {
            return this.name || "isa structure machine mapper";
        },
        oneditprepare: function () {

            var structureTypes = [
                {val: 'Variable', text: 'Variable'},
                {val: 'Object', text: 'Object'}
            ];

            var typesMachine = [{val: 'Boolean', text: 'Boolean'},
                {val: 'UInt16', text: 'UInt16'},
                {val: 'Int16', text: 'Int16'},
                {val: 'UInt32', text: 'UInt32'},
                {val: 'Int32', text: 'Int32'},
                {val: 'UInt64', text: 'UInt64'},
                {val: 'Int64', text: 'Int64'},
                {val: 'Real', text: 'Real'},
                {val: 'LReal', text: 'LReal'}
            ];

            var typesStructure = [{val: 'Boolean', text: 'Boolean'},
                {val: 'UInt16', text: 'UInt16'},
                {val: 'Int16', text: 'Int16'},
                {val: 'UInt32', text: 'UInt32'},
                {val: 'Int32', text: 'Int32'},
                {val: 'UInt64', text: 'UInt64'},
                {val: 'Int64', text: 'Int64'},
                {val: 'Float', text: 'Float'},
                {val: 'Double', text: 'Double'},
                {val: 'BigDecimal', text: 'BigDecimal'}
            ];

            function resizeButton(mapping, width) {
                var lastField = mapping.find(".node-input-mapping-typeStructure");
                // lastField.width(width - 120);
            }

            function generateButton(mapping, id) {

                var container = $('<li/>', {style: "background: #fff; margin:0; padding:8px 0px; border-bottom: 1px solid #ccc;"});

                var row = $('<div id="row' + id + '"/>').appendTo(container);

                $('<i style="color: #eee; cursor: move;" class="node-input-mapping-handle fa fa-bars"></i>').appendTo(row);

                var structureTypeField = $('<select/>', {
                    id: "node-input-mapping-structureType",
                    type: "text",
                    style: "margin-left:5px;width:100px;"
                }).appendTo(row);

                $(structureTypes).each(function () {
                    structureTypeField.append($("<option>").attr('value', this.val).text(this.text));
                });

                var startField = $('<input/>', {
                    id: "node-input-mapping-start",
                    type: "text",
                    style: "margin-left:5px;width:50px;",
                    placeholder: 'start'
                }).appendTo(row);

                var quantityField = $('<input/>', {
                    id: "node-input-mapping-quantity",
                    type: "text",
                    style: "margin-left:5px;width:50px;",
                    placeholder: 'quantity'
                }).appendTo(row);

                var structureParentNodeIdField = $('<input/>', {
                    id: "node-input-mapping-structureParentNodeId",
                    type: "text",
                    style: "margin-left:5px;width:180px;",
                    placeholder: 'ns=0;i=85'
                }).appendTo(row);

                var structureNodeIdField = $('<input/>', {
                    id: "node-input-mapping-structureNodeId",
                    type: "text",
                    style: "margin-left:5px;width:180px;",
                    placeholder: 'ns=4;s=MyVariable1'
                }).appendTo(row);

                var structureNameField = $('<input/>', {
                    id: "node-input-mapping-structureName",
                    type: "text",
                    style: "margin-left:5px;width:150px;",
                    placeholder: 'MyVariable1'
                }).appendTo(row);

                var typeMachineField,
                        typeStructureField;

                if (mapping.structureType === 'Variable') {

                    typeMachineField = $('<select/>', {
                        id: 'node-input-mapping-typeMachine',
                        type: 'text'
                    }).appendTo(row);

                    typeMachineField.css('margin-left', '5px');
                    typeMachineField.css('width', '100px');

                    $(typesMachine).each(function () {
                        typeMachineField.append($("<option>").attr('value', this.val).text(this.text));
                    });

                    typeStructureField = $('<select/>', {
                        id: 'node-input-mapping-typeStructure',
                        type: 'text'
                    }).appendTo(row);

                    typeStructureField.css('margin-left', '5px');
                    typeStructureField.css('width', '100px');

                    $(typesStructure).each(function () {
                        typeStructureField.append($("<option>").attr('value', this.val).text(this.text));
                    });
                } else {
                    typeMachineField = $('<input/>', {
                        id: "node-input-mapping-typeMachine",
                        type: "text",
                        style: "margin-left:5px;width:60px;",
                        placeholder: 'not used'
                    }).appendTo(row);

                    typeStructureField = $('<input/>', {
                        id: "node-input-mapping-typeStructure",
                        type: "text",
                        style: "margin-left:5px;width:120px;",
                        placeholder: 'BaseObjectType'
                    }).appendTo(row);
                }

                structureTypeField.val(mapping.structureType);
                startField.val(mapping.start);
                quantityField.val(mapping.quantity);
                structureParentNodeIdField.val(mapping.structureParentNodeId);
                structureNodeIdField.val(mapping.structureNodeId);
                structureNameField.val(mapping.structureName);
                typeMachineField.val(mapping.typeMachine);
                typeStructureField.val(mapping.typeStructure);


                structureTypeField.change(function () {

                    if (!typeMachineField || !typeStructureField)
                        return;

                    console.log(structureTypeField.val());

                    var newTypeMachineField,
                            newTypeStructureField;

                    if (structureTypeField.val() == "Variable") {

                        mapping.start = '0';
                        mapping.quantity = '1';
                        mapping.typeMachine = 'UInt16';
                        mapping.typeStructure = 'UInt16';

                        newTypeMachineField = $('<select/>', {
                            id: 'node-input-mapping-typeMachine',
                            type: 'text'
                        });

                        typeMachineField.replaceWith(newTypeMachineField);

                        typeMachineField = newTypeMachineField;

                        newTypeMachineField.css('margin-left', '5px');
                        newTypeMachineField.css('width', '100px');

                        $(typesMachine).each(function () {
                            newTypeMachineField.append($("<option>").attr('value', this.val).text(this.text));
                        });

                        newTypeStructureField = $('<select/>', {
                            id: 'node-input-mapping-typeStructure',
                            type: 'text'
                        });

                        typeStructureField.replaceWith(newTypeStructureField);

                        typeStructureField = newTypeStructureField;

                        newTypeStructureField.css('margin-left', '5px');
                        newTypeStructureField.css('width', '100px');

                        $(typesStructure).each(function () {
                            newTypeStructureField.append($("<option>").attr('value', this.val).text(this.text));
                        });

                    } else {

                        mapping.start = '';
                        mapping.quantity = '';
                        mapping.typeMachine = '';
                        mapping.typeStructure = '';

                        newTypeMachineField = $('<input/>', {
                            id: "node-input-mapping-typeMachine",
                            type: "text",
                            style: "margin-left:5px;width:60px;",
                            placeholder: 'not used'
                        });

                        typeMachineField.replaceWith(newTypeMachineField);

                        typeMachineField = newTypeMachineField;

                        newTypeStructureField = $('<input/>', {
                            id: "node-input-mapping-typeStructure",
                            type: "text",
                            style: "margin-left:5px;width:120px;",
                            placeholder: 'BaseObjectType'
                        });

                        typeStructureField.replaceWith(newTypeStructureField);

                        typeStructureField = newTypeStructureField;
                    }

                    startField.val(mapping.start);
                    quantityField.val(mapping.quantity);
                    typeMachineField.val(mapping.typeMachine);
                    typeStructureField.val(mapping.typeStructure);
                });

                var finalspan = $('<span/>', {style: "float: right;margin-right: 10px;"}).appendTo(row);

                var deleteMapping = $('<a/>', {
                    href: "#",
                    class: "editor-button editor-button-small",
                    style: "margin-top: 7px; margin-left: 5px;"
                }).appendTo(finalspan);

                $('<i/>', {class: "fa fa-remove"}).appendTo(deleteMapping);

                deleteMapping.click(function () {
                    container.css({"background": "#fee"});
                    container.fadeOut(300, function () {
                        $(this).remove();
                    });
                });

                $("#node-input-mappings-container").append(container);

                var width = $("#node-input-mappings-container").width();

                resizeButton(container, width);
            }

            $("#node-input-add-button").click(function () {
                generateButton({
                    start: '',
                    quantity: '',
                    structureParentNodeId: '',
                    structureNodeId: '',
                    structureName: '',
                    typeMachine: '',
                    typeStructure: ''
                });
                $("#node-input-mappings-container-div").scrollTop($("#node-input-mappings-container-div").get(0).scrollHeight);
            });

            for (var i = 0; i < this.mappings.length; i++) {
                var rule = this.mappings[i];
                generateButton(rule, i);
            }

            function switchDialogResize() {
                var rows = $("#dialog-form>div:not(.node-input-mappings-container-row)");
                var height = $("#dialog-form").height();
                for (var i = 0; i < rows.size(); i++) {
                    height -= $(rows[i]).outerHeight(true);
                }
                var editorRow = $("#dialog-form>div.node-input-mappings-container-row");
                height -= (parseInt(editorRow.css("marginTop")) + parseInt(editorRow.css("marginBottom")));
                $("#node-input-mappings-container-div").css("height", height + "px");

                var mappings = $("#node-input-mappings-container").children();
                var newWidth = $("#node-input-mappings-container").width();
                mappings.each(function (i) {
                    resizeButton($(this), newWidth);
                });
            }

            $("#node-input-mappings-container").sortable({
                axis: "y",
                handle: ".node-input-mapping-handle",
                cursor: "move"
            });

            $("#node-input-mappings-container .node-input-mapping-handle").disableSelection();

            $("#dialog").on("dialogresize", switchDialogResize);
            $("#dialog").one("dialogopen", function (ev) {
                var size = $("#dialog").dialog('option', 'sizeCache-switch');
                if (size) {
                    $("#dialog").dialog('option', 'width', size.width);
                    $("#dialog").dialog('option', 'height', size.height);
                    switchDialogResize();
                } else {
                    setTimeout(switchDialogResize, 10);
                }
            });
            $("#dialog").one("dialogclose", function (ev, ui) {
                $("#dialog").off("dialogresize", switchDialogResize);
            });
        },
        oneditsave: function () {
            var mappings = $("#node-input-mappings-container").children();
            var node = this;

            node.mappings = [];

            mappings.each(function (mappingItem) {

                var mappingEntry = $(this);

                var structureTypeFieldValue = mappingEntry.find("#node-input-mapping-structureType").val();
                var startFieldValue = mappingEntry.find("#node-input-mapping-start").val();
                var quantityFieldValue = mappingEntry.find("#node-input-mapping-quantity").val();
                var structureParentNodeIdFieldValue = mappingEntry.find("#node-input-mapping-structureParentNodeId").val();
                var structureNodeIdFieldValue = mappingEntry.find("#node-input-mapping-structureNodeId").val();
                var structureNameFieldValue = mappingEntry.find("#node-input-mapping-structureName").val();
                var typeMachineFieldValue = mappingEntry.find("#node-input-mapping-typeMachine").val();
                var typeStructureFieldValue = mappingEntry.find("#node-input-mapping-typeStructure").val();

                node.mappings.push({
                    structureType: structureTypeFieldValue,
                    start: startFieldValue,
                    quantity: quantityFieldValue,
                    structureParentNodeId: structureParentNodeIdFieldValue,
                    structureNodeId: structureNodeIdFieldValue,
                    structureName: structureNameFieldValue,
                    typeMachine: typeMachineFieldValue,
                    typeStructure: typeStructureFieldValue
                });
            });
        }
    });
</script>


<script type="text/x-red" data-template-name="ISA-Machine-Mapper">
    <div class="form-row" style="min-width:60px">
        <label for="node-input-machineid"><i class="fa fa-table"></i> Machine</label>
        <input type="text" id="node-input-machineid">
    </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" placeholder="Name">
    </div>
    <div class="form-row">
        <label for="node-input-topic"><i class="fa fa-tasks"></i> Topic</label>
        <input type="text" id="node-input-topic" placeholder="Topic">
    </div>
    <div class="form-row">
        <label for="node-input-register"><i class="fa fa-th"></i> Register</label>
        <input type="text" id="node-input-register" placeholder="size to check input data array">
    </div>
    <div class="form-row">
        <label for="node-input-group"><i class="fa fa-object-group"></i> Group</label>
        <select type="text" id="node-input-group" style="width: calc(70% - 132px)">
            <option value="EquipmentType">EquipmentType</option>
            <option value="PhysicalAssetType">PhysicalAssetType</option>
            <option value="MaterialLotType">MaterialLotType</option>
            <option value="MaterialSublotType">MaterialSublotType</option>
            <option value="PersonType">PersonType</option>
            <option value="MixedType">MixedType</option>
        </select>

        <label for="node-input-order" style="text-align: right; width: 60px"><i class="fa fa-sort"></i> Order</label>
        <input type="text" style="width: 50px" id="node-input-order">
    </div>
    <div class="form-row node-input-mappings-container-row" style="margin-bottom: 0px;">
        <div id="node-input-mappings-container-div" style="box-sizing: border-box; border-radius: 5px; height: 210px; padding: 5px; border: 1px solid #ccc; overflow-y:scroll;">
            <ol id="node-input-mappings-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-button" style="margin-top: 4px;"><i class="fa fa-plus"></i> add</a>
    </div>
</script>

<script type="text/x-red" data-help-name="ISA-Machine-Mapper">
    <p>A simple node that works as wrapper of flat machine data to structure</p>
    <p>The amount of register is configurable. If it doesn't match the input amount the node will stop mapping.</p>
    <p><strong>Output 1</strong> RAW</p>
    <p><strong>Output 2</strong> ISA structured model</p>
    <p><strong>Output 3</strong> Mappings</p>
</script>