Add Config - part 2

Let's convert the select2 input to something we can use. We are going to use spread syntax in this example.

 var selectedEntities = {};
$("#selectedEntitesInput")
    .val()
    .forEach((entity) => {
        selectedEntities = {
            ...selectedEntities,
            [entity.toUpperCase()]: entity,
        };
    });

This might look very complicated, but don't worry.

  1. We simply get our selection by calling $("#selectedEntitesInput").val()

  2. We create an object for each selected entity using.forEach((entity) =>

  3. We use an arrow function expression. Our emtpy object, selectedEntities, gets populated.

Our HTML should look something like this:

<!DOCTYPE html>
<html>
    <body>
        <h3>Advanced Example</h3>
        <!-- Input -->
        <select
            id="selectedEntitesInput"
            name="selectedEntites[]"
            multiple="multiple"
            style="width: 100%"
            required
        ></select>
        <input type="file" id="myIfcFile" onchange="myFunction()" />
        <!-- Bootstrap, jQuery, DataTables -->
        <link
            rel="stylesheet"
            type="text/css"
            href="https://cdn.datatables.net/v/bs4-4.1.1/jq-3.3.1/dt-1.10.22/datatables.min.css"
        />
        <script
            type="text/javascript"
            src="https://cdn.datatables.net/v/bs4-4.1.1/jq-3.3.1/dt-1.10.22/datatables.min.js"
        ></script>
        <!-- Select2 -->
        <link
            href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css"
            rel="stylesheet"
        />
        <script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
        <!-- BIMWHALE.js -->
        <script src="https://cdn.jsdelivr.net/gh/andrewisen/bim-whale/dist/bundle.min.js"></script>
        <script>
            // Select
            $(document).ready(function () {
                var data = [
                    {
                        text: "Shared Building Elements",
                        children: [
                            {
                                id: "IfcDoor",
                                text: "IfcDoor",
                            },
                            {
                                id: "IfcWallStandardCase",
                                text: "IfcWallStandardCase",
                            },
                            {
                                id: "IfcWindow",
                                text: "IfcWindow",
                            },
                        ],
                    },
                ];
                $("#selectedEntitesInput").select2({
                    data: data,
                    placeholder: "Select which entities to include",
                });
            });
            // File Input
            function myFunction() {
                let selectedEntities = {};
                $("#selectedEntitesInput")
                    .val()
                    .forEach((entity) => {
                        selectedEntities = {
                            ...selectedEntities,
                            [entity.toUpperCase()]: entity,
                        };
                    });
                var requiredEntities = {
                    IFCPROPERTYSINGLEVALUE: "IfcPropertySingleValue",
                    IFCRELDEFINESBYPROPERTIES: "IfcRelDefinesByProperties",
                    IFCPROPERTYSET: "IfcPropertySet",
                };
                var selectedPropertySets = [];
                var allEntities = {
                    ...requiredEntities,
                    ...selectedEntities,
                };
                var config = {
                    requiredEntities,
                    selectedEntities,
                    selectedPropertySets,
                    allEntities,
                };

                var file = document.getElementById("myIfcFile").files[0];
                var reader = new FileReader();
                reader.onload = function (e) {
                    var lines = e.target.result.split(/\r\n|\n/);
                    // Create new BIMWHALE.js object
                    var ifcFile = new BIMWHALE.IfcFile(lines, config);
                    // Parse file and get IFC entiteis
                    var ifcEntites = ifcFile.parseIfcFile();
                    console.log(ifcEntites);
                };
                reader.readAsText(file);
            }
        </script>
    </body>
</html>
PreviousAdd Config - part 1NextCreate a Table

Last updated