bacnet_read.html

<!-- 
  MIT License Copyright 2021, 2022 - Bitpool Pty Ltd
-->

<script type="text/javascript">

    RED.nodes.registerType('Bacnet-Discovery', {
        category: 'Bitpool BACnet',
        color: '#00aeef',
        defaults: {
            name: {value: ""},
            events: {value: true},
            json: {value: true},
            mqtt: {value: false},
            hiddenDeployToggle: {value: false},
            prevHiddenToggleState: {value: false},
            roundDecimal: {value: 2},
            deviceList: [],
            pointList: [],
            pointsToRead: {value: {}},
            readDevices: {value: []},
            devicesToRead: [],
            object_property_simplePayload: {value: false},
            object_property_fullObject: {value: true}

        },
        inputs: 1,
        outputs: 1,
        icon: "bitpool.svg",
        label: function () {
            return this.name || "read";
        },
        paletteLabel: function () {
            return "read";
        },
        oneditprepare: function () {
            let node = this;

            node.prevHiddenToggleState = node.hiddenDeployToggle;

            const {createApp, ref, onMounted} = Vue;

            //prime vue app
            const App = {
                data() {
                    return {
                        devices: ref(),
                        readDevices: ref(),
                        deviceList: ref(),
                        pointList: ref(),
                        pointsToRead: ref(),
                        nodeService: ref(new NodeService()),
                        pollFrequency: ref(),
                        deviceCount: ref(),
                        progressBarValue: ref(),
                    }
                },
                setup() {
                    let pointList;
                    let deviceList;
                    const selectedKeys = ref(null);
                    const nodes = ref();
                    const expandedKeys = ref({});
                    const expandAll = () => {
                        for (let node of devices.value) {
                            expandNode(node);
                        }

                        expandedKeys.value = {...expandedKeys.value};
                    };
                    const collapseAll = () => {
                        expandedKeys.value = {};
                    };
                    const expandNode = (node) => {
                        if (node.children && node.children.length) {
                            expandedKeys.value[node.key] = true;

                            for (let child of node.children) {
                                expandNode(child);
                            }
                        }
                    };

                    return {
                        nodes,
                        expandedKeys,
                        expandAll,
                        collapseAll,
                        expandNode,
                    }
                },
                mounted() {
                    let app = this;
                    this.getData();
                    if(!node.reloadTimer) {
                        node.reloadTimer = setInterval(() => app.getData(), 5000);
                    }
                },
                methods: {
                    getData() {
                        let app = this;
                        this.nodeService.getNetworkData().then(function (result) {
                            app.devices = result.renderList;
                            app.deviceList = result.deviceList;
                            app.pointList = result.pointList;
                            app.pollFrequency = parseInt(result.pollFrequency);
                            app.deviceCount = result.deviceList.length;
                            //progress bar percentage
                            let progressVal = parseInt((result.renderListCount / result.deviceList.length) * 100);
                            if(typeof progressVal == "number" && !isNaN(progressVal)) {
                                app.progressBarValue = progressVal;
                            } else {
                                app.progressBarValue = 0;
                            }

                            app.$forceUpdate();
                        });

                        app.$forceUpdate();
                    },
                    rebuildDataModel() {
                        let app = this;
                        app.nodeService.rebuildDataModel().then(function (result) {
                            if(result == true){
                                app.progressBarValue = 0;
                            }
                        });
                        app.$forceUpdate();
                    },
                    addAllDevices() {
                        let app = this;
                        app.devices.forEach(function (device) {
                            app.addAllClicked({"node": device});
                        });
                        app.$forceUpdate();
                    },
                    addAllClicked(slotProps) {
                        //update UI 
                        let app = this;

                        let clone = JSON.parse(JSON.stringify(slotProps.node));

                        if (this.readDevices) {
                            let foundIndex = this.readDevices.findIndex(ele => ele.key == slotProps.node.key && ele.label == slotProps.node.label);
                            if (foundIndex == -1) this.readDevices.push(clone);
                        } else {
                            this.readDevices = [clone];
                        }

                        let deviceSlot = this.devices.find(ele => ele.label == slotProps.node.label);
                        if(deviceSlot) {
                            deviceSlot.showAdded = true;
                            deviceSlot.children.forEach(function(child) {
                                child.showAdded = true;
                            });
                        }
                        slotProps.node.showAdded = true;

                        this.$forceUpdate()

                        //update node-red data structure to forward to gateway
                        let device = this.deviceList.find(ele => {
                            if(ele.address.address) {
                                return ele.address.address == slotProps.node.ipAddr && ele.deviceId == slotProps.node.deviceId;
                            } else {
                                return ele.address == slotProps.node.ipAddr && ele.deviceId == slotProps.node.deviceId;
                            }
                        });
                        let deviceAddress = app.getDeviceAddress(device.address);
                        let key = `${deviceAddress}-${device.deviceId}`;
                        let points = this.pointList[key];

                        if (!this.pointsToRead[key]) {
                            this.pointsToRead[key] = {};
                        }

                        for (let pointName in points) {
                            let point = this.pointList[key][pointName];
                            this.pointsToRead[key][point.objectName] = point;
                        }

                        //force a deploy state
                        node.hiddenDeployToggle = !node.prevHiddenToggleState;
                    },
                    removeAllDevices() {
                        let app = this;                        

                        let clone = JSON.parse(JSON.stringify(app.readDevices));

                        clone.forEach(function (device) {
                            app.removeAllClicked({"node": device});
                        });

                        app.$forceUpdate();

                    },
                    removeAllClicked(slotProps) {
                        let app = this;
                        try {
                            //update UI
                            if (this.readDevices.length > 0) {
                                let foundIndex = this.readDevices.findIndex(ele => ele.key == slotProps.node.key && ele.label == slotProps.node.label);
                                if (foundIndex !== -1) this.readDevices.splice(foundIndex, 1);
                            }

                            let deviceSlot = this.devices.find(ele => ele.label == slotProps.node.label);
                            if(deviceSlot) {
                                deviceSlot.showAdded = false;
                                deviceSlot.children.forEach(function(child) {
                                    child.showAdded = false;
                                });
                            }
                            slotProps.node.showAdded = false;
                            this.$forceUpdate();

                            //update node-red data structure
                            let device = this.deviceList.find(ele => {
                                if(ele.address.address) {
                                    return ele.address.address == slotProps.node.ipAddr && ele.deviceId == slotProps.node.deviceId;
                                } else{
                                    return ele.address == slotProps.node.ipAddr && ele.deviceId == slotProps.node.deviceId;
                                }
                            });
                            let deviceAddress = app.getDeviceAddress(device.address);
                            let key = `${deviceAddress}-${device.deviceId}`;
                            if (this.pointsToRead[key]) {
                                delete this.pointsToRead[key];
                            }

                            //force a deploy state
                            node.hiddenDeployToggle = !node.prevHiddenToggleState;

                        } catch(e) {
                            //do nothing
                        }

                        app.$forceUpdate();
                    },
                    addPointClicked(slotProps) {
                        let app = this;
                        //update UI
                        let parentDeviceName = slotProps.node.parentDevice;
                        let foundDeviceIndex = this.readDevices ? this.readDevices.findIndex(ele => ele.label == parentDeviceName) : -1;
                        let device = this.deviceList.find(ele => ele.deviceName == parentDeviceName);
                        let deviceAddress = app.getDeviceAddress(device.address);
                        let key = `${deviceAddress}-${device.deviceId}`;
                        let parentDevice = this.devices.find(ele => ele.ipAddr == deviceAddress);
                        let childDevice;
                        if(device.isMstp){
                            let foundChildIndex = parentDevice.children[1].children.findIndex(ele => ele.label == parentDeviceName);
                            if(foundChildIndex !== -1) {
                                childDevice = parentDevice.children[1].children[foundChildIndex];
                            }
                        } 

                        if (foundDeviceIndex == -1) {
                            //no read devices present, add new
                            let newReadParent;
                            if(childDevice) {
                                newReadParent = {...childDevice};
                            } else{
                                newReadParent = {...parentDevice};
                            } 
                            newReadParent.children = [];
                            newReadParent.children.push(slotProps.node);

                            if (this.readDevices) {
                                this.readDevices.push(newReadParent);
                            } else {
                                this.readDevices = [newReadParent];
                            }
                        } else {
                            // read device found, add point to existing
                            this.readDevices[foundDeviceIndex].children.push(slotProps.node);
                        }

                        //set show added to true 
                        slotProps.node.showAdded = true;
                        this.$forceUpdate();

                        //update node-red data structure
                        if (!this.pointsToRead[key]) {
                            this.pointsToRead[key] = {};
                        }

                        let point = this.pointList[key][slotProps.node.pointName];
                        this.pointsToRead[key][point.objectName] = point;

                        //force a deploy state
                        node.hiddenDeployToggle = !node.prevHiddenToggleState;

                        app.$forceUpdate();
                    },
                    removePointClicked(slotProps) {
                        let app = this;
                        //update UI
                        let parentDeviceName = slotProps.node.parentDevice;
                        let foundDeviceIndex = this.readDevices ? this.readDevices.findIndex(ele => ele.label == parentDeviceName) : -1;
                        let parentDevice = this.devices.find(ele => ele.label == parentDeviceName);
                        let device = this.deviceList.find(ele => ele.deviceName == parentDeviceName);
                        let deviceAddress = app.getDeviceAddress(device.address);
                        let key = `${deviceAddress}-${device.deviceId}`;

                        if (foundDeviceIndex !== -1) {
                            let foundIndex = this.readDevices[foundDeviceIndex].children.findIndex(ele => ele.key == slotProps.node.key && ele.pointName == slotProps.node.pointName);
                            if (foundIndex !== -1) this.readDevices[foundDeviceIndex].children.splice(foundIndex, 1);
                            if (this.readDevices[foundDeviceIndex].children.length == 0) {
                                this.readDevices.splice(foundDeviceIndex, 1);
                            }
                        }

                        //set show added to true 
                        slotProps.node.showAdded = false;
                        this.$forceUpdate();

                        //update node-red data stucture
                        let point = this.pointList[key][slotProps.node.pointName];
                        if (this.pointsToRead[key][point.objectName]) delete this.pointsToRead[key][point.objectName];
                        //if last point is removed, deleted whole entry
                        if(Object.keys(this.pointsToRead[key]).length == 0) delete this.pointsToRead[key];

                        //force a deploy state
                        node.hiddenDeployToggle = !node.prevHiddenToggleState;

                        app.$forceUpdate();
                    },
                    getDeviceAddress(addr) {
                        switch(typeof addr) {
                            case "object":
                                return addr.address;
                            case "string":
                                return addr;
                            default:    
                                return addr;
                        }
                    },
                    isDeviceActive(slotProps) {
                        let app = this;
                        if (((Date.now() - slotProps.node.lastSeen) / 1000) < (app.pollFrequency + 5)) {
                            return true;
                        }
                        return false;
                    },
                    isDeviceAdded(slotProps) {
                        if (slotProps.node.showAdded == true) {
                            return true;
                        } else {
                            return false;
                        }
                    },
                    isSlotAdded(slotProps) {
                        return slotProps.node.showAdded;
                    },
                    hasData() {
                        if (this.devices && this.devices.length > 0) {
                            return true
                        } else {
                            return false;
                        }
                    }
                },
                components: {
                    "p-tree": primevue.tree,
                    "p-button": primevue.button,
                    "p-timeline": primevue.timeline,
                    "p-progressbar": primevue.progressbar
                }
            };

            let vueapp = createApp(App);
            vueapp.use(primevue.config.default);
            vueapp.use(primevue.confirmationservice);
            node.vm = vueapp.mount("#node-input-tabs-content");

            //reinstate device data
            if (node.readDevices) {
                node.vm.$data.readDevices = node.readDevices;
            }

            if (node.pointsToRead) {
                node.vm.$data.pointsToRead = node.pointsToRead;
            }

            //set checkboxes to config values stored in backend

            document.getElementById("node-input-object_property_simplePayload").checked = node.object_property_simplePayload;
            document.getElementById("node-input-object_property_simplePayload").onclick = handleCheckboxClick;
            document.getElementById("node-input-object_property_fullObject").checked = node.object_property_fullObject;
            document.getElementById("node-input-object_property_fullObject").onclick = handleCheckboxClick;

            document.getElementById("node-input-roundDecimal").value = node.roundDecimal;
            document.getElementById("node-input-json").checked = node.json;
            document.getElementById("node-input-json").onclick = handleMsgTypeClick;
            document.getElementById("node-input-mqtt").checked = node.mqtt;
            document.getElementById("node-input-mqtt").onclick = handleMsgTypeClick;

            function handleCheckboxClick() {

                if(this.id == "node-input-object_property_simplePayload") {
                    document.getElementById("node-input-object_property_fullObject").checked = !document.getElementById("node-input-object_property_fullObject").checked;
                }
                if(this.id == "node-input-object_property_fullObject") {
                    document.getElementById("node-input-object_property_simplePayload").checked = !document.getElementById("node-input-object_property_simplePayload").checked;
                }
            }

            function handleMsgTypeClick() {
                if (this.id == "node-input-json") {
                    document.getElementById("node-input-mqtt").checked = !document.getElementById("node-input-mqtt").checked;
                }
                if (this.id == "node-input-mqtt") {
                    document.getElementById("node-input-json").checked = !document.getElementById("node-input-json").checked;
                }
            }

            //create tabs 
            let tabs = RED.tabs.create(
                {
                    id: "node-input-read-tabs",
                    onchange: function (tab) {
                        $("#node-input-tabs-content").children().hide()
                        $("#" + tab.id).show()
                    }
                });

            tabs.addTab(
                {
                    id: "read-networkTree-tab",
                    label: "Device List"
                });

            tabs.addTab(
                {
                    id: "read-readList-tab",
                    label: "Read List"
                });

            tabs.addTab(
                {
                    id: "read-properties-tab",
                    label: "Properties"
                });

            //remove loading animation
            let loadingGif = document.getElementById("loadingGif");
            let loadingText = document.getElementById("loadingText");
            let table = document.getElementById("read-networkTree-tab-content");
            loadingGif.style.display = "none";
            loadingText.style.display = "none";
            table.style.display = "inherit";

        },
        oneditsave: function () {
            let node = this;
            if (node.vm.$data.devices) node.devices = node.vm.$data.devices;
            if (node.vm.$data.readDevices) node.readDevices = node.vm.$data.readDevices;
            if (node.vm.$data.pointsToRead) node.pointsToRead = node.vm.$data.pointsToRead;
            //clear reload data function
            if(node.reloadTimer) {
                clearInterval(node.reloadTimer);
                node.reloadTimer = null;
            }
        },
        oneditcancel: function () {
            let node = this;
            if (node.vm.$data.devices) node.devices = node.vm.$data.devices;
            if (node.vm.$data.readDevices) node.readDevices = node.vm.$data.readDevices;
            if (node.vm.$data.pointsToRead) node.pointsToRead = node.vm.$data.pointsToRead;
            //clear reload data function
            if(node.reloadTimer) {
                clearInterval(node.reloadTimer);
                node.reloadTimer = null;
            }
        }
    });

</script>

<script type="text/html" data-template-name="Bacnet-Discovery">
    <style>

        .p-treenode-label {
            color: black;
            width: 100%;
        }
        .p-tree {
            background: inherit !important;
            border: inherit !important;
            padding-right: 0px !important;
        }
        .p-button {
            margin-right: .5rem;
        }
        .addPointButton {
            float: right;
        }
        .minusPointButton {
            float: right;
        }
        .addPointButton:hover, .minusPointButton:hover {
            background: #d5d5d5 !important;
        }
        .pointLabel {
            font-weight: 400;
        }
        .deviceLabel {
            font-weight: 100;
        }
        .removeAllButton {
            float: right;
        }
        .addAllButton {
            float: right;
        }
        .bacnetbutton {
            background: none;
            border: none;
            color: black;
            font-weight: 400;
        }
        .bacnetbutton:hover {
            background: #f0f0f0;
            border-radius: 10px;
        }
        .allFunctionsText {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
            padding-left: 5px;
        }
        .p-treenode-children > li > .p-treenode-children > li {
            font-size: 14px;
            /* height: 35px; */
            color: #b5b5b5 !important;
        }
        .p-treenode-children > li > .p-treenode-children > .p-treenode-label {
            color: #b5b5b5 !important;
        }
        /*
        .p-treenode-children > li > .p-treenode-children > li:last-child {
            padding-bottom: 30px; 
        }
        */
        .p-tree-toggler:enabled:hover {
            background: #d5d5d5 !important;
        }
        .p-tree-toggler:focus {
            border: none !important;
            box-shadow: none !important;
        }
        .deviceStatus {
            font-size: 10px;
        }
        .statusOnline {
            color: #11c511;
        }
        .statusOffline {
            color: red;
        }
        
        .deviceLabel {
            position: absolute;
        }
        .objectPropertiesLabel {
            display: flex !important;
            flex-direction: row;
            align-items: center;
        }
        .p-tree .p-tree-container .p-treenode .p-treenode-content:focus {
            outline: 0 none !important;
            outline-offset: 0 !important;
            box-shadow: inset 0 0 0 1px #bdbdbd !important;
        }
        .checkbox-round {
            width: 13px !important;
            height: 13px !important;
            background-color: white;
            border-radius: 50%;
            vertical-align: middle;
            border: 1px solid #ddd;
            appearance: none;
            -webkit-appearance: none;
            outline: none;
            cursor: pointer;
        }
        .checkbox-round:checked {
            background-color: #00AEEF;
        }
        .checkbox-round:focus {
            outline: none !important;
        }
        .p-tree-filter:focus, .p-tree-filter:focus-visible, .p-inputtext:enabled:hover {
            box-shadow: inset 0 0 0 0.15rem #dfdcdc !important;
            border-color: transparent !important;
        }
        .bacnetbutton > .pi {
            display: flex;
        }
        .p-tree-container {
            margin: 0 !important;
        }
        .reloadButtonIcon {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
        }
        .removeAllDevicesButton {
            border: none;
            background: none;
            font-size: 14px !important;
            float: right;
            display: flex;
            align-items: center;
        }
        .removeAllDevicesButton:hover {
            background-color: #d5d5d5;
            border-radius: 10px;
        }
        .reloadButton {
            border: none;
            background: none;
            font-size: 14px !important;
            float: right;
        }
        .rebuildDataButton {
            border: none;
            background: none;
            font-size: 14px !important;
            float: right;
        }
        .reloadButton:hover {
            background-color: #d5d5d5;
            border-radius: 10px;
        }
        .rebuildDataButton:hover {
            background-color: #d5d5d5;
            border-radius: 10px;
        }
        .headerDiv {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: space-around;
            height: 20px;
        }
        .msgTypeDiv {
            display: flex;
            align-items: flex-start;
            flex-direction: column;
        }
        .p-progressbar .p-progressbar-value {
            background: #00AEEF !important;
        }
        .p-treenode-label {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .buttonGroup {
            padding-left: 7px;
        }
        #read-readList-tab {
            display: flex; 
            flex-direction: column;
        }
        .removeAllDevicesDiv {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
            padding-right: 20px;
        }

        .p-tree .p-treenode-children {
            padding: 0 !important;
        }

        .p-tree-toggler .p-link {
            width: 25px !important;
        }

        
        /*
        .p-treenode-content {
            height: 15px;
        }
        */


    </style>
    
    <div class="form-row">
        <label for="node-input-name"><i class="icon-tag"></i><span data-i18n="bitpool-bacnet.label.name"></span> Name</label>
        <input type="text" id="node-input-name" placeholder="Name">
    </div>

    <div class='form-row node-input-read-tabs-row'>
        <ul style='min-width:600px;margin-bottom:20px' id='node-input-read-tabs'></ul>
    </div>

    <div id='node-input-tabs-content'>

            <!--
                *
                *
                *   Network Tree tab
                *
                *
            -->
            <div id='read-networkTree-tab' style='display:none'>

                <div id='read-networkTree-tab-content' class="networkTreeContent" style='display:none'>
                    
                    <div class="headerDiv">
                        <a class="countStatus" style="margin-left: 15px;">Count: {{deviceCount}} device(s)</a>
                        <p-progressbar :value="progressBarValue" :show-value="true" style="width: 300px; height: 20px;"></p-progressbar>
                        <div class="buttonGroup" style="padding-left: 15px;">
                            <button @click="rebuildDataModel()" class="rebuildDataButton" title="Rebuild Data Model" >
                                <i class="pi pi-wrench" style="color: #ff0000;"></i>
                            </button>
                            <button @click="getData()" class="reloadButton" title="Reload Data">
                                <i class="pi pi-refresh" style="color: #00AEEF;"></i>
                            </button>
                            <button @click="addAllDevices()" class="reloadButton" title="Add all devices">
                                <i class="pi pi-plus" style="color: #00AEEF;"></i>
                            </button>
                        </div>
                    </div>
                    

                    <div id="deviceListApp">
                        <p-tree :value="devices" selectable="false" :filter="true" filterMode="lenient" filterPlaceholder="No results found." v-if="hasData()">
                            <template #device="slotProps">
                                <div v-if="isDeviceActive(slotProps)" class="deviceLabelParent">
                                    <b class="deviceLabel">{{slotProps.node.label}} <b class="statusOnline deviceStatus">Online</b></b>
                                </div>
                                <div v-else>
                                    <b class="deviceLabel">{{slotProps.node.label}} <b class="statusOffline deviceStatus">Offline</b></b>
                                </div>

                                <template v-if="isDeviceAdded(slotProps)">
                                    <button class="addAllButton bacnetbutton">
                                        <i class="pi pi-check-circle " style="color: #00AEEF;"></i>
                                    </button>
                                </template>
                                <template v-else>
                                    <button @click="addAllClicked(slotProps)" class="addAllButton bacnetbutton">
                                        <i class="pi pi-plus-circle "><a class="allFunctionsText">Add all</a></i>
                                    </button>
                                </template>
                                
                                <button @click="removeAllClicked(slotProps, this)" class="removeAllButton bacnetbutton">
                                    <i class="pi pi-minus-circle "><a class="allFunctionsText">Remove all</a></i>
                                </button>
                            </template>

                            <!-- <template #pointFolder="slotProps">

                            </template>

                            
                            <template #deviceFolder="slotProps">

                            </template> -->

                            <template #point="slotProps" v-model:class="pointContent">                                
                                <b class="pointLabel">{{slotProps.node.label}}</b>

                                <template v-if="isSlotAdded(slotProps)">
                                    <button class="addPointButton bacnetbutton">
                                        <i class="pi pi-check-circle " style="color: #00AEEF;"></i>
                                    </button>
                                </template>
                                <template v-else>
                                    <button @click="addPointClicked(slotProps, this)" class="addPointButton bacnetbutton">
                                        <i class="pi pi-plus-circle "></i>
                                    </button>
                                </template>
                                
                                <button @click="removePointClicked(slotProps, this)" class="minusPointButton bacnetbutton">
                                    <i class="pi pi-minus-circle "></i>
                                </button>
                            </template>
                        </p-tree>
                        <div v-else style="text-align: center; padding-top: 20px;">
                            <a>No devices found.</a>
                        </div>
                    </div>
                </div>

                <img id="loadingGif" src="resources/@bitpoolos/edge-bacnet/BitpoolCube_Blue_350.gif" style="width: 70px; display: block; margin-left: auto; margin-right: auto;" />
                <p id="loadingText" style="display: block; margin-left: auto; margin-right: auto; text-align: center; color: #505050;">Loading current network info</p>
            </div>

            <!--
                *
                *
                *   Read list tab
                *
                *
            -->
            <div id='read-readList-tab' style='display:none'>
                <div class="removeAllDevicesDiv" >
                    <button @click="removeAllDevices()" class="removeAllDevicesButton" title="Remove all devices">
                        <i class="pi pi-minus-circle" style="color: #ff0000; padding-right: 5px;"> </i><a style="color: #ff0000;">Remove All Devices</a>
                    </button>
                </div>

                <p-tree :value="readDevices">
                    <template #device="slotProps">
                        <b class="deviceLabel">{{slotProps.node.label}} </b>
                        <button @click="removeAllClicked(slotProps, this)" class="removeAllButton bacnetbutton">
                            <i class="pi pi-minus-circle "><a class="allFunctionsText">Remove all</a></i>
                        </button>
                    </template>

                    <template #point="slotProps" v-model:class="pointContent">
                        <b class="pointLabel">{{slotProps.node.label}}</b>
                        <button @click="removePointClicked(slotProps, this)" class="minusPointButton bacnetbutton">
                            <i class="pi pi-minus-circle "></i>
                        </button>
                    </template>
                </p-tree>

            </div>
        <!--
            *
            *
            *   Read Properties tab
            *
            *
        -->
        <div id='read-properties-tab' style='display:none'>
            <div class="form-row" style="display: flex; width: fit-content; flex-wrap: nowrap; flex-direction: column;">

                <label for="node-input-object_properties_group" style="display: flex; align-items: center; white-space: nowrap; text-decoration: underline;">Object Properties:</label>


                <div id="node-input-object_properties_group"  style="display: flex; align-items: flex-start; flex-direction: column; padding-left: 50px;">
                    <div class="objectPropertiesLabel">
                        <label for="node-input-object_property_simplePayload" style="padding-left: 4px; width: auto; align-items: start;" class="objectPropertiesLabel">
                            <i class="icon-tag"></i> <span data-i18n="bitpool-bacnet.label.object_property_simplePayload"></span>
                            <input style="margin-left: 5px;" class=" objectProp" type="checkbox" id="node-input-object_property_simplePayload">
                            <a style="white-space: nowrap; padding-left: 20px;">Simple Payload</a>
                        </label>
                    </div>

                    <div class="objectPropertiesLabel">
                        <label for="node-input-object_property_fullObject" style="padding-left: 4px; width: auto; align-items: start;" class="objectPropertiesLabel">
                            <i class="icon-tag"></i> <span data-i18n="bitpool-bacnet.label.object_property_fullObject"></span>
                            <input style="margin-left: 5px;" class=" objectProp" type="checkbox" id="node-input-object_property_fullObject">
                            <a style="white-space: nowrap; padding-left: 20px;">Full Object</a>
                        </label>
                    </div>

                </div> 
            </div>

            <hr>

            <div class="form-row msgTypeDiv" style="display: flex;">
                <label for="node-input-msgType" style="text-decoration: underline;">
                    Message type: 
                </label>
                <div id="node-input-msgType" style="display: flex; align-items: flex-start; flex-direction: column; padding-left: 50px;">

                        <!-- class= checkbox-round -->
                    <div style="display: flex; flex-direction: row; align-items: flex-start;"><input class="checkbox-round" type="checkbox" id="node-input-json" style="width: 13px; margin-left: 5px;"/><label for="node-input-json" style="padding-left: 20px; width: fit-content;">Block per device</label> </div>
                    <div style="display: flex; flex-direction: row; align-items: flex-start;"><input class="checkbox-round" type="checkbox" id="node-input-mqtt" style="width: 13px; margin-left: 5px;"/><label for="node-input-mqtt" style="padding-left: 20px; width: fit-content;">Individual msgs</label> </div>
                
                </div>
            </div>

            <div class="form-row">
                <label for="node-input-roundDecimal">
                    Decimal place precision
                </label>
                <input type="number" id="node-input-roundDecimal" placeholder="None">
            </div>

            <label for="node-input-hiddenDeployToggle" style="display: none !important;" >
                <i class="icon-tag" style="display: none !important;"></i> <span data-i18n="bitpool-bacnet.label.hiddenDeployToggle" style="display: none !important;"></span>
                <input style="display: none !important;" type="checkbox" id="node-input-hiddenDeployToggle">
            </label>
        </div>
    
    </div>

</script>
<script type="text/html" data-help-name="Bacnet-Discovery">
    <p> A node used to view, select devices, device points, and point properties to add to the Read polling list. </p>

        <h3><strong>Device List</strong></h3>
        <ol class="node-ports">
            <p>
                This tab displays the devices and device points that are a result of a network Discover. The data is broken down and listed as Devices, Points for the Device,
                and Point properties for the Points. 
                
                On this tab the user may choose specific points to read, or all of the points present in a device. 

                The reload button may be used to show any new data that may have been recieved by the bitpool BACnet node.

                Please note: Data can only be shown here once a Discover sucessfully recieves a response from online devices on the network
            </p>
        
        </ol>

        <h3><strong>Read List</strong></h3>
        <ol class="node-ports">
            <p>
                This tab shows all of the devices and points that have been chosen to read. 
            </p>
         
        </ol>

        <h3><strong>Properties</strong></h3>
        <ol class="node-ports">
            <p>
                This tab shows all of the point properties the user may choose to read from the points detailed in the Read List tab. 
                Here the user may also choose the output format of the Read data, as MQTT compatible Individual msgs, or a JSON block per device. 
            </p>
         
        </ol>

        <h3><strong>Examples</strong></h3>
            <p>For example flows, please use the examples section for this node. These examples can be found at: Node-red hamburger menu on top right -> Import -> Examples -> @bitpoolos/edge-bacnet</p>
            <p>To find captured examples of settings and flows, please go to our wiki <a href="https://wiki.bitpool.com/en/edge/apps/bitpool-edge/nr-bacnet">here</a></p>


        

        <h3>Resources:</h3>

        <p><a href="https://youtu.be/4K7mVxfvfbc">Video Walk-through </a></p>

        <h4><strong>Online Docs:</strong></h4>
        <ul type="1">
          <li><a href="https://www.bitpool.com/">bitpool.com</a> - check us out here.</li>
          <li><a href="https://app.bitpool.com/">app.bitpool.com</a> - set up your account.</li>
          <li><a href="https://wiki.bitpool.com/">wiki.bitpool.com</a> - find more documentation.</li>
          <li><a href="https://bacnet.org/">BACnet</a> - find more about the protocol.</li>
        </ul>
</script>