@bitpoolos/edge-bacnet 1.2.7 → 1.3.0

package/bacnet_write.html

@@ -3,767 +3,1000 @@
 -->
 
 <script type="text/javascript">
-
-    RED.nodes.registerType('Bacnet-Write', {
-        category: 'Bitpool BACnet',
-        color: '#00aeef',
-        defaults: {
-            name: {value: ""},
-            applicationTag: {value: "4"},
-            priority: {value: "16"},
-            pointsToWrite: {value: []},
-            writeDevices: {value: []},
-            hiddenDeployToggle: {value: false},
-            prevHiddenToggleState: {value: false}
+  RED.nodes.registerType("Bacnet-Write", {
+    category: "Bitpool BACnet",
+    color: "#00aeef",
+    defaults: {
+      name: { value: "" },
+      applicationTag: { value: "4" },
+      priority: { value: "16" },
+      pointsToWrite: { value: [] },
+      writeDevices: { value: [] },
+      hiddenDeployToggle: { value: false },
+      prevHiddenToggleState: { value: false },
+    },
+    inputs: 1,
+    outputs: 1,
+    icon: "bitpool.svg",
+    label: function () {
+      return "write";
+    },
+    paletteLabel: function () {
+      return "write";
+    },
+    oneditprepare: function () {
+      let node = this;
+
+      node.prevHiddenToggleState = node.hiddenDeployToggle;
+
+      const { createApp, ref, onMounted } = Vue;
+
+      //prime vue app
+      const App = {
+        data() {
+          return {
+            devices: ref(),
+            writeDevices: ref(),
+            deviceList: ref(),
+            pointList: ref(),
+            pointsToWrite: ref([]),
+            nodeService: ref(new NodeService()),
+            deviceCount: ref(),
+          };
         },
-        inputs: 1,
-        outputs: 1,
-        icon: "bitpool.svg",
-        label: function () {
-            return "write";
+        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,
+          };
         },
-        paletteLabel: function () {
-            return "write";
+        mounted() {
+          this.getData();
         },
-        oneditprepare: function () {
-            let node = this;
-
-            node.prevHiddenToggleState = node.hiddenDeployToggle;
-
-
-            const {createApp, ref, onMounted} = Vue;
-
-            //prime vue app
-            const App = {
-                data() {
-                    return {
-                        devices: ref(),
-                        writeDevices: ref(),
-                        deviceList: ref(),
-                        pointList: ref(),
-                        pointsToWrite: ref([]),
-                        nodeService: ref(new NodeService()),
-                        deviceCount: 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() {
-                    this.getData();
-                },
-                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;
-                        });
-                    },
-                    addAllClicked(slotProps) {
-                        let app = this;
-                        //update UI 
-                        if (this.writeDevices) {
-                            let foundIndex = this.writeDevices.findIndex(ele => ele.key == slotProps.node.key && ele.label == slotProps.node.label);
-                            if (foundIndex == -1) this.writeDevices.push(slotProps.node);
-                        } else {
-                            this.writeDevices = [slotProps.node];
-                        }
-
-                        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.pointsToWrite[key] || typeof this.pointsToWrite[key] == 'undefined') {
-                            this.pointsToWrite[key] = {};
-                        }
-
-                        for (let pointName in points) {
-                            let point = this.pointList[key][pointName];
-                            this.pointsToWrite[key][point.objectName] = point;
-                        }
-
-                        //force a deploy state
-                        node.hiddenDeployToggle = !node.prevHiddenToggleState;
-                    },
-                    removeAllClicked(slotProps) {
-                        let app = this;
-                        //update UI
-                        if (this.writeDevices.length > 0) {
-                            let foundIndex = this.writeDevices.findIndex(ele => ele.key == slotProps.node.key && ele.label == slotProps.node.label);
-                            if (foundIndex !== -1) this.writeDevices.splice(foundIndex, 1);
-                        }
-                        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.pointsToWrite[key]) {
-                            delete this.pointsToWrite[key];
-                        }
-
-                        //force a deploy state
-                        node.hiddenDeployToggle = !node.prevHiddenToggleState;
-                    },
-                    addPointClicked(slotProps) {
-                        let app = this;
-                        //update UI
-                        let parentDeviceName = slotProps.node.parentDevice;
-                        let foundDeviceIndex = this.writeDevices ? this.writeDevices.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.writeDevices) {
-                                this.writeDevices.push(newReadParent);
-                            } else {
-                                this.writeDevices = [newReadParent];
-                            }
-
-                        } else {
-                            // read device found, add point to existing
-                            this.writeDevices[foundDeviceIndex].children.push(slotProps.node);
-                        }
-
-                        slotProps.node.showAdded = true;
-
-                        console.log("write point added, slotProps.node: ", slotProps.node);
-
-                        this.$forceUpdate();
-
-                        //update node-red data structure
-
-                        let point = this.pointList[key][slotProps.node.pointName];
-                        point.deviceId = device.deviceId;
-                        point.deviceAddress = device.address;
-
-                        if (!this.pointsToWrite || this.pointsToWrite.length == 'undefined') {
-                            this.pointsToWrite = [];
-                        }
-
-                        let found = this.pointsToWrite.find(ele =>
-                            ele.deviceId == point.deviceId &&
-                            ele.objectName == point.objectName &&
-                            ele.meta.arrayIndex == point.meta.arrayIndex &&
-                            ele.meta.objectId.instance == point.meta.objectId.instance &&
-                            ele.meta.objectId.type == point.meta.objectId.type);
-
-                        if (!found) this.pointsToWrite.push(point);
-
-                        console.log("this.pointsToWrite: ", this.pointsToWrite);
-
-                        //force a deploy state
-                        node.hiddenDeployToggle = !node.prevHiddenToggleState;
-                    },
-                    removePointClicked(slotProps) {
-                        let app = this;
-                        //update UI
-                        let parentDeviceName = slotProps.node.parentDevice;
-                        let foundDeviceIndex = this.writeDevices ? this.writeDevices.findIndex(ele => ele.label == parentDeviceName) : -1;
-                        let parentDevice = this.devices.find(ele => ele.label == parentDeviceName);
-
-                        if (foundDeviceIndex !== -1) {
-                            let foundIndex = this.writeDevices[foundDeviceIndex].children.findIndex(ele => ele.key == slotProps.node.key && ele.label == slotProps.node.label);
-                            if (foundIndex !== -1) this.writeDevices[foundDeviceIndex].children.splice(foundIndex, 1);
-                            if (this.writeDevices[foundDeviceIndex].children.length == 0) {
-                                this.writeDevices.splice(foundDeviceIndex, 1);
-                            }
-                        }
-
-                        slotProps.node.showAdded = false;
-
-                        this.$forceUpdate();
-
-                        //update node-red data stucture
-                        let device = this.deviceList.find(ele => {
-                            if(ele.address.address) {
-                                return ele.address.address == parentDevice.ipAddr && ele.deviceId == parentDevice.deviceId;
-                            } else {
-                                return ele.address == parentDevice.ipAddr && ele.deviceId == parentDevice.deviceId;
-                            }
-                        });
-                        let deviceAddress = app.getDeviceAddress(device.address);
-                        let key = `${deviceAddress}-${device.deviceId}`;
-                        let point = this.pointList[key][slotProps.node.pointName];
-                        point.deviceId = device.deviceId;
-
-                        let foundIndex = this.pointsToWrite.findIndex(ele =>
-                            ele.deviceId == point.deviceId &&
-                            ele.objectName == point.objectName &&
-                            ele.meta.arrayIndex == point.meta.arrayIndex &&
-                            ele.meta.objectId.instance == point.meta.objectId.instance &&
-                            ele.meta.objectId.type == point.meta.objectId.type);
-
-                        if (foundIndex !== -1) {
-                            this.pointsToWrite.splice(foundIndex, 1);
-                        }
-
-                        //force a deploy state
-                        node.hiddenDeployToggle = !node.prevHiddenToggleState;
-                    },
-                    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) {
-                            return true;
-                        }
-                        return false;
-                    },
-                    isSlotAdded(slotProps) {
-                        if (slotProps.node.showAdded == true) {
-                            return true;
-                        } else {
-                            return false;
-                        }
-                    },
-                    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
-                }
-            };
+        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;
+            });
+          },
+          addAllClicked(slotProps) {
+            let app = this;
+            //update UI
+            if (this.writeDevices) {
+              let foundIndex = this.writeDevices.findIndex(
+                (ele) => ele.key == slotProps.node.key && ele.label == slotProps.node.label
+              );
+              if (foundIndex == -1) this.writeDevices.push(slotProps.node);
+            } else {
+              this.writeDevices = [slotProps.node];
+            }
 
-            let vueapp = createApp(App);
-            vueapp.use(primevue.config.default)
-            node.vm = vueapp.mount("#node-input-tabs-content");
+            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.pointsToWrite[key] || typeof this.pointsToWrite[key] == "undefined") {
+              this.pointsToWrite[key] = {};
+            }
 
-            //reinstate device data
-            if (node.writeDevices) {
-                node.vm.$data.writeDevices = node.writeDevices;
+            for (let pointName in points) {
+              let point = this.pointList[key][pointName];
+              this.pointsToWrite[key][point.objectName] = point;
             }
-            if (node.pointsToWrite) {
-                node.vm.$data.pointsToWrite = node.pointsToWrite;
+
+            //force a deploy state
+            node.hiddenDeployToggle = !node.prevHiddenToggleState;
+          },
+          removeAllClicked(slotProps) {
+            let app = this;
+            //update UI
+            if (this.writeDevices.length > 0) {
+              let foundIndex = this.writeDevices.findIndex(
+                (ele) => ele.key == slotProps.node.key && ele.label == slotProps.node.label
+              );
+              if (foundIndex !== -1) this.writeDevices.splice(foundIndex, 1);
+            }
+            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.pointsToWrite[key]) {
+              delete this.pointsToWrite[key];
             }
 
-            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-writeList-tab",
-                    label: "Write List"
-                });
-
-
-            tabs.addTab(
-                {
-                    id: "read-write-tab",
-                    label: "Properties"
-                });
-
-            document.getElementById("node-input-applicationTag").value = node.applicationTag;
-            document.getElementById("node-input-priority").value = node.priority;
-
-            //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";
+            //force a deploy state
+            node.hiddenDeployToggle = !node.prevHiddenToggleState;
+          },
+          addPointClicked(slotProps) {
+            let app = this;
+            //update UI
+            let parentDeviceName = slotProps.node.parentDevice;
+            let foundDeviceIndex = this.writeDevices
+              ? this.writeDevices.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];
+              }
+            }
 
-        },
-        oneditsave: function () {
-            let node = this;
-            if (node.vm.$data.devices && node.vm.$data.devices.length > 0) node.devices = node.vm.$data.devices;
-            if (node.vm.$data.writeDevices && node.vm.$data.writeDevices.length > 0) node.writeDevices = node.vm.$data.writeDevices;
-            if (node.vm.$data.pointsToWrite && node.vm.$data.pointsToWrite.length > 0) node.pointsToWrite = node.vm.$data.pointsToWrite;
-        }
-    });
+            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.writeDevices) {
+                this.writeDevices.push(newReadParent);
+              } else {
+                this.writeDevices = [newReadParent];
+              }
+            } else {
+              // read device found, add point to existing
+              this.writeDevices[foundDeviceIndex].children.push(slotProps.node);
+            }
 
-</script>
+            slotProps.node.showAdded = true;
+            this.$forceUpdate();
 
-<script type="text/html" data-template-name="Bacnet-Write">
-    <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-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;
-        }
-
-    </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>
+            //update node-red data structure
+            let point = this.pointList[key][slotProps.node.pointName];
+            point.deviceId = device.deviceId;
+            point.deviceAddress = device.address;
+            point.key = slotProps.node.key;
 
-    <div class='form-row node-input-read-tabs-row'>
-        <ul style='min-width:600px;margin-bottom:20px' id='node-input-read-tabs'></ul>
-    </div>
+            if (!this.pointsToWrite || this.pointsToWrite.length == "undefined") {
+              this.pointsToWrite = [];
+            }
 
-    <div id='node-input-tabs-content'>
+            let found = this.pointsToWrite.find(
+              (ele) =>
+                ele.deviceId == point.deviceId &&
+                ele.objectName == point.objectName &&
+                ele.meta.arrayIndex == point.meta.arrayIndex &&
+                ele.meta.objectId.instance == point.meta.objectId.instance &&
+                ele.meta.objectId.type == point.meta.objectId.type
+            );
+
+            if (!found) this.pointsToWrite.push(point);
+
+            //force a deploy state
+            node.hiddenDeployToggle = !node.prevHiddenToggleState;
+          },
+          removePointClicked(slotProps) {
+            let app = this;
+
+            //update UI
+            let parentDeviceName = slotProps.node.parentDevice;
+            let foundDeviceIndex = this.writeDevices
+              ? this.writeDevices.findIndex((ele) => ele.label == parentDeviceName)
+              : -1;
+            let parentDevice = this.devices.find((ele) => ele.label == parentDeviceName);
+
+            if (foundDeviceIndex !== -1) {
+              let foundIndex = this.writeDevices[foundDeviceIndex].children.findIndex(
+                (ele) => ele.key == slotProps.node.key && ele.label == slotProps.node.label
+              );
+              if (foundIndex !== -1) this.writeDevices[foundDeviceIndex].children.splice(foundIndex, 1);
+              if (this.writeDevices[foundDeviceIndex].children.length == 0) {
+                this.writeDevices.splice(foundDeviceIndex, 1);
+              }
+            }
 
-        <div id='read-networkTree-tab' style='display:none'>
+            let foundIndex = this.pointsToWrite.findIndex((ele) => ele.key == slotProps.node.key);
 
-            <div id='read-networkTree-tab-content' class="networkTreeContent" style='display:none'>
-                <div>
-                    <a class="countStatus" style="margin-left: 15px;">Count: {{deviceCount}} device(s)</a>
-                    <button @click="getData()" class="reloadButton">
-                        <i class="pi pi-refresh" style="color: #00AEEF;"><a class="allFunctionsText">Reload data</a></i>
-                    </button>
-                </div>
+            if (foundIndex !== -1) {
+              this.pointsToWrite.splice(foundIndex, 1);
+            }
 
-                <div id="deviceListApp">
-                    <p-tree :value="devices" selectable="false" :filter="true" filterMode="lenient" 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>
-
-                        <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>
+            slotProps.node.showAdded = false;
+
+            this.$forceUpdate();
+
+            //force a deploy state
+            node.hiddenDeployToggle = !node.prevHiddenToggleState;
+          },
+          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) {
+              return true;
+            }
+            return false;
+          },
+          isSlotAdded(slotProps) {
+            if (slotProps.node.showAdded == true) {
+              return true;
+            } else {
+              return false;
+            }
+          },
+          hasData() {
+            if (this.devices && this.devices.length > 0) {
+              return true;
+            } else {
+              return false;
+            }
+          },
+          calculateMstpCount(slotProps) {
+            let count = 0;
+            slotProps.node.children.forEach(function (child) {
+              if (child.label.includes("MSTP")) {
+                count += child.children.length;
+              }
+            });
+
+            return count;
+          },
+          settingDeviceName(slotProps) {
+            let app = this;
+            if (slotProps.node.settingDisplayName) {
+              return true;
+            }
+            return false;
+          },
+          cancelDisplayNameDialog() {
+            let app = this;
+            app.deviceDisplayNameValue = "";
+            app.showDeviceNameDialog = false;
+          },
+          cancelPointNameDialog() {
+            let app = this;
+            app.pointDisplayNameValue = "";
+            app.showPointNameDialog = false;
+          },
+          onDeviceRightClick(slotProps, event) {
+            let app = this;
+            app.rightClickedDevice = slotProps;
+            event.preventDefault();
+            menu.style.setProperty("--mouse-x", event.clientX + "px");
+            menu.style.setProperty("--mouse-y", event.clientY + "px");
+            menu.style.display = "block";
+          },
+          onPointRightClick(slotProps, event) {
+            let app = this;
+            app.rightClickedPoint = slotProps;
+            event.preventDefault();
+            pointMenu.style.setProperty("--mouse-x", event.clientX + "px");
+            pointMenu.style.setProperty("--mouse-y", event.clientY + "px");
+            pointMenu.style.display = "block";
+          },
+          handleContextMenuClick(type) {
+            let app = this;
+            switch (type) {
+              case "purgeDevice":
+                app.purgeDevice(app.rightClickedDevice);
+                break;
+              case "updatePoints":
+                app.updatePointsForDevice(app.rightClickedDevice);
+                break;
+              case "addAllPoints":
+                app.addAllClicked(app.rightClickedDevice);
+                break;
+              case "removeAllPoints":
+                app.removeAllClicked(app.rightClickedDevice);
+                break;
+              case "setDeviceName":
+                app.showDeviceNameDialog = true;
+                app.deviceDisplayNameValue = app.rightClickedDevice.node.label;
+                break;
+              default:
+                break;
+            }
+          },
+          handlePointContextMenuClick(type) {
+            let app = this;
+            switch (type) {
+              case "setPointName":
+                app.showPointNameDialog = true;
+                app.pointDisplayNameValue = app.rightClickedPoint.node.label;
+                break;
+              case "updatePoint":
+                app.updatePoint(app.rightClickedDevice);
+                break;
+              default:
+                break;
+            }
+          },
+          purgeDevice(slotProps) {
+            let app = this;
+            let device = app.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;
+              }
+            });
+            if (device) {
+              app.nodeService.purgeDevice(device).then(function (result) { });
+            }
+          },
+          updatePointsForDevice(slotProps) {
+            let app = this;
+            let device = app.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;
+              }
+            });
+            if (device) {
+              app.nodeService.updatePointsForDevice(device).then(function (result) { });
+            }
+          },
+          updatePoint(slotProps) {
+            let app = this;
+            let device = app.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;
+              }
+            });
+            if (device) {
+              app.nodeService.updatePoint(device).then(function (result) { });
+            }
+          },
+          setDeviceName() {
+            let app = this;
+            const slotProps = app.rightClickedDevice;
+            const displayName = app.deviceDisplayNameValue;
+            let device = app.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;
+              }
+            });
+
+            if (device) {
+              app.nodeService.setDeviceDisplayName(device, displayName).then(function (result) {
+                if (result) {
+                  slotProps.node.label = displayName;
+                }
+              });
+            }
+
+            app.showDeviceNameDialog = false;
+          },
+          setPointName() {
+            let app = this;
+
+            const slotProps = app.rightClickedPoint;
+            const pointDisplayName = app.pointDisplayNameValue;
+            const pointName = slotProps.node.pointName;
+
+            let device = app.deviceList.find((ele) => {
+              return ele.deviceName == slotProps.node.parentDevice;
+            });
+
+            if (device) {
+              let deviceAddress = app.getDeviceAddress(device.address);
+              let deviceKey = `${deviceAddress}-${device.deviceId}`;
+
+              app.nodeService.setPointDisplayName(deviceKey, pointName, pointDisplayName).then(function (result) {
+                if (result) {
+                  slotProps.node.label = pointDisplayName;
+                }
+              });
+            }
+
+            app.showPointNameDialog = false;
+          },
+        },
+        components: {
+          "p-tree": primevue.tree,
+          "p-button": primevue.button,
+          "p-timeline": primevue.timeline,
+        },
+      };
+
+      let vueapp = createApp(App);
+      vueapp.use(primevue.config.default);
+      node.vm = vueapp.mount("#node-input-tabs-content");
+
+      //reinstate device data
+      if (node.writeDevices) {
+        node.vm.$data.writeDevices = node.writeDevices;
+      }
+      if (node.pointsToWrite) {
+        node.vm.$data.pointsToWrite = node.pointsToWrite;
+      }
+
+      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-writeList-tab",
+        label: "Write List",
+      });
+
+      tabs.addTab({
+        id: "read-write-tab",
+        label: "Properties",
+      });
+
+      document.getElementById("node-input-applicationTag").value = node.applicationTag;
+      document.getElementById("node-input-priority").value = node.priority;
+
+      var menu = document.querySelector(".context-menu");
+      window.addEventListener("click", (event) => {
+        menu.style.display = "none";
+      });
+
+      var pointMenu = document.querySelector(".point-context-menu");
+      window.addEventListener("click", (event) => {
+        pointMenu.style.display = "none";
+      });
+
+      //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.vm.$data.devices.length > 0) node.devices = node.vm.$data.devices;
+      if (node.vm.$data.writeDevices && node.vm.$data.writeDevices.length > 0)
+        node.writeDevices = node.vm.$data.writeDevices;
+      if (node.vm.$data.pointsToWrite && node.vm.$data.pointsToWrite.length > 0)
+        node.pointsToWrite = node.vm.$data.pointsToWrite;
+    },
+  });
+</script>
 
-            </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>
+<script type="text/html" data-template-name="Bacnet-Write">
+  <style>
+    .p-treenode-label {
+      color: black;
+      width: 100%;
+    }
+    .p-tree {
+      background: inherit !important;
+      border: inherit !important;
+      padding-right: 0px !important;
+    }
+    .p-button {
+      margin-right: 0.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-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;
+    }
+
+    .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;
+    }
+  </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">
+
+        <!-- Start Device Context Menu -->
+        <ul
+        class="red-ui-menu red-ui-menu-dropdown red-ui-menu-dropdown-direction-right red-ui-menu-dropdown-noicons red-ui-menu-dropdown-submenus context-menu">
+        <li class="context-menu-item" @click="handleContextMenuClick('purgeDevice')">
+          <a class="red-ui-menu-label">
+            <i class="pi pi-wrench context-menu-icon"></i>
+            <span class="context-menu-item-text">Purge Device</span>
+          </a>
+        </li>
+        <li class="context-menu-item" @click="handleContextMenuClick('updatePoints')">
+          <a class="red-ui-menu-label">
+            <i class="pi pi-refresh context-menu-icon"></i>
+            <span class="context-menu-item-text">Update Points</span>
+          </a>
+        </li>
+        <li class="red-ui-menu-divider"></li>
+        <li class="context-menu-item" @click="handleContextMenuClick('addAllPoints')">
+          <a class="red-ui-menu-label">
+            <i class="pi pi-plus-circle context-menu-icon"></i>
+            <span class="context-menu-item-text">Add All Points </span>
+          </a>
+        </li>
+        <li class="context-menu-item" @click="handleContextMenuClick('removeAllPoints')">
+          <a class="red-ui-menu-label">
+            <i class="pi pi-minus-circle context-menu-icon"></i>
+            <span class="context-menu-item-text">Remove All Points</span>
+          </a>
+        </li>
+        <li class="red-ui-menu-divider"></li>
+        <li class="context-menu-item" @click="handleContextMenuClick('setDeviceName')">
+          <a class="red-ui-menu-label">
+            <i class="pi pi-pencil context-menu-icon"></i>
+            <span class="context-menu-item-text">Set Device Name</span>
+          </a>
+        </li>
+      </ul>
+      <!-- End Device Context Menu -->
+  
+      <!-- Start Point Context Menu -->
+      <ul
+        class="red-ui-menu red-ui-menu-dropdown red-ui-menu-dropdown-direction-right red-ui-menu-dropdown-noicons red-ui-menu-dropdown-submenus point-context-menu">
+        <li class="context-menu-item" @click="handlePointContextMenuClick('setPointName')">
+          <a class="red-ui-menu-label">
+            <i class="pi pi-pencil context-menu-icon"></i>
+            <span class="context-menu-item-text">Set Point Name</span>
+          </a>
+        </li>
+        <li class="red-ui-menu-divider"></li>
+        <li class="context-menu-item" @click="handlePointContextMenuClick('updatePoint')">
+          <a class="red-ui-menu-label">
+            <i class="pi pi-refresh context-menu-icon"></i>
+            <span class="context-menu-item-text">Update Point</span>
+          </a>
+        </li>
+      </ul>
+      <!-- End Point Context Menu -->
+
+
+    <div id="read-networkTree-tab" style="display:none">
+      <div id="read-networkTree-tab-content" class="networkTreeContent" style="display:none">
+        <div>
+          <a class="countStatus" style="margin-left: 15px;">Count: {{deviceCount}} device(s)</a>
+          <button @click="getData()" class="reloadButton">
+            <i class="pi pi-refresh" style="color: #00AEEF;"><a class="allFunctionsText">Reload data</a></i>
+          </button>
         </div>
 
-        <div id='read-writeList-tab' style='display:none'>
-            <p-tree :value="writeDevices">
-                <template #device="slotProps">
-                    <b class="deviceLabel">{{slotProps.node.label}} </b>
-                </template>
+        <div id="deviceListApp">
+          <p-tree :value="devices" selectable="false" :filter="true" filterMode="lenient" v-if="hasData()">
+            <template #device="slotProps">
+              <div @contextmenu="onDeviceRightClick(slotProps, $event)" class="p-treenode-label">
+
+                <div v-if="isDeviceActive(slotProps)" class="deviceLabelParent">
+                  <b class="deviceLabel">
+                    <span class="statusOnline deviceStatus dotOnline dot"></span>
+                    {{slotProps.node.label}} 
+                  </b>
+                </div>
+                <div v-else>
+                  <b class="deviceLabel">
+                    <span class="statusOffline deviceStatus dotOffline dot"></span>
+                    {{slotProps.node.label}} 
+                  </b>
+                </div>
+
+              </div>
+            </template>
+
+            <template #point="slotProps" v-model:class="pointContent">
+              <div @contextmenu="onDeviceRightClick(slotProps, $event)" class="p-treenode-label">
 
-                <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>
+                <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>
-            </p-tree>
-        </div>
 
-        <div id='read-write-tab' style='display:none'>
-            <div class="form-row">
-                <label for="node-input-applicationTag"><i class="icon-tag"></i><span data-i18n="bitpool-bacnet.label.applicationTag"></span> Application Tag</label>
-                <select id="node-input-applicationTag">
-                    <option value="0">NULL</option>
-                    <option value="1">BOOLEAN</option>
-                    <option value="2">UNSIGNED_INT</option>
-                    <option value="3">SIGNED_INT</option>
-                    <option value="4">REAL</option>
-                    <option value="5">DOUBLE</option>
-                    <option value="6">OCTET_STRING</option>
-                    <option value="7">CHARACTER_STRING</option>
-                    <option value="8">BIT_STRING</option>
-                    <option value="9">ENUMERATED</option>
-                    <option value="10">DATE</option>
-                    <option value="11">TIME</option>
-                    <option value="12">OBJECT_ID</option>
-                    <option value="13">RESERVE1</option>
-                    <option value="14">RESERVE2</option>
-                    <option value="15">RESERVE3</option>
-                    <option value="16">MAX_BACNET_APPLICATION_TAG</option>
-                    <option value="100">EMPTYLIST</option>
-                    <option value="101">WEEKNDAY</option>
-                    <option value="102">DATERANGE</option>
-                    <option value="103">DATETIME</option>
-                    <option value="104">TIMESTAMP</option>
-                    <option value="105">ERROR</option>
-                    <option value="106">DEVICE_OBJECT_PROPERTY_REFERENCE</option>
-                    <option value="107">DEVICE_OBJECT_REFERENCE</option>
-                    <option value="108">OBJECT_PROPERTY_REFERENCE</option>
-                    <option value="109">DESTINATION</option>
-                    <option value="110">RECIPIENT</option>
-                    <option value="111">COV_SUBSCRIPTION</option>
-                    <option value="112">CALENDAR_ENTRY</option>
-                    <option value="113">WEEKLY_SCHEDULE</option>
-                    <option value="114">SPECIAL_EVENT</option>
-                    <option value="115">READ_ACCESS_SPECIFICATION</option>
-                    <option value="116">READ_ACCESS_RESULT</option>
-                    <option value="117">LIGHTING_COMMAND</option>
-                    <option value="118">CONTEXT_SPECIFIC_DECODED</option>
-                    <option value="119">CONTEXT_SPECIFIC_ENCODED</option>
-                    <option value="120">LOG_RECORD</option>
-                </select>
-            </div>
-
-            <div class="form-row">
-                <label for="node-input-priority"><i class="icon-tag"></i><span data-i18n="bitpool-bacnet.label.priority"></span> Priority</label>
-                <select id="node-input-priority">
-                    <option value="1">1 - Manual-Life Safety</option>
-                    <option value="2">2 - Automatic-Life Safety</option>
-                    <option value="3">3 - Available</option>
-                    <option value="4">4 - Available</option>
-                    <option value="5">5 - Critical Equipment Control</option>
-                    <option value="6">6 - Minimum On/Off</option>
-                    <option value="7">7 - Available</option>
-                    <option value="8">8 - Manual Operator</option>
-                    <option value="9">9 - Available</option>
-                    <option value="10">10 - Available</option>
-                    <option value="11">11 - Available</option>
-                    <option value="12">12 - Available</option>
-                    <option value="13">13 - Available</option>
-                    <option value="14">14 - Available</option>
-                    <option value="15">15 - Available</option>
-                    <option value="16">16 - Available</option>
-                </select>
-            </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>
+                <button @click="removePointClicked(slotProps, this)" class="minusPointButton bacnetbutton">
+                  <i class="pi pi-minus-circle "></i>
+                </button>
+              </div>
+
+            </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>
 
+    <div id="read-writeList-tab" style="display:none">
+      <p-tree :value="writeDevices">
+        <template #device="slotProps">
+          <b class="deviceLabel">{{slotProps.node.label}} </b>
+        </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>
-  </script>
-  <script type="text/html" data-help-name="Bacnet-Write">
-    <p> A node used to view, select devices, device points, and point properties to add to the Write 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 Write values to. 
-
-                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>Write List</strong></h3>
-        <ol class="node-ports">
-            <p>
-                This tab shows all of the devices and points that have been chosen to write. 
-            </p>
-         
-        </ol>
-
-        <h3><strong>Properties</strong></h3>
-        <ol class="node-ports">
-            <p>
-                This tab allows the user to choose the Application Tag and Priority to be used in a Write function. Please make sure the device / controller is configured correctly to accept the write command. 
-            </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>
+
+    <div id="read-write-tab" style="display:none">
+      <div class="form-row">
+        <label for="node-input-applicationTag"
+          ><i class="icon-tag"></i><span data-i18n="bitpool-bacnet.label.applicationTag"></span> Application Tag</label
+        >
+        <select id="node-input-applicationTag">
+          <option value="0">NULL</option>
+          <option value="1">BOOLEAN</option>
+          <option value="2">UNSIGNED_INT</option>
+          <option value="3">SIGNED_INT</option>
+          <option value="4">REAL</option>
+          <option value="5">DOUBLE</option>
+          <option value="6">OCTET_STRING</option>
+          <option value="7">CHARACTER_STRING</option>
+          <option value="8">BIT_STRING</option>
+          <option value="9">ENUMERATED</option>
+          <option value="10">DATE</option>
+          <option value="11">TIME</option>
+          <option value="12">OBJECT_ID</option>
+          <option value="13">RESERVE1</option>
+          <option value="14">RESERVE2</option>
+          <option value="15">RESERVE3</option>
+          <option value="16">MAX_BACNET_APPLICATION_TAG</option>
+          <option value="100">EMPTYLIST</option>
+          <option value="101">WEEKNDAY</option>
+          <option value="102">DATERANGE</option>
+          <option value="103">DATETIME</option>
+          <option value="104">TIMESTAMP</option>
+          <option value="105">ERROR</option>
+          <option value="106">DEVICE_OBJECT_PROPERTY_REFERENCE</option>
+          <option value="107">DEVICE_OBJECT_REFERENCE</option>
+          <option value="108">OBJECT_PROPERTY_REFERENCE</option>
+          <option value="109">DESTINATION</option>
+          <option value="110">RECIPIENT</option>
+          <option value="111">COV_SUBSCRIPTION</option>
+          <option value="112">CALENDAR_ENTRY</option>
+          <option value="113">WEEKLY_SCHEDULE</option>
+          <option value="114">SPECIAL_EVENT</option>
+          <option value="115">READ_ACCESS_SPECIFICATION</option>
+          <option value="116">READ_ACCESS_RESULT</option>
+          <option value="117">LIGHTING_COMMAND</option>
+          <option value="118">CONTEXT_SPECIFIC_DECODED</option>
+          <option value="119">CONTEXT_SPECIFIC_ENCODED</option>
+          <option value="120">LOG_RECORD</option>
+        </select>
+      </div>
+
+      <div class="form-row">
+        <label for="node-input-priority"
+          ><i class="icon-tag"></i><span data-i18n="bitpool-bacnet.label.priority"></span> Priority</label
+        >
+        <select id="node-input-priority">
+          <option value="1">1 - Manual-Life Safety</option>
+          <option value="2">2 - Automatic-Life Safety</option>
+          <option value="3">3 - Available</option>
+          <option value="4">4 - Available</option>
+          <option value="5">5 - Critical Equipment Control</option>
+          <option value="6">6 - Minimum On/Off</option>
+          <option value="7">7 - Available</option>
+          <option value="8">8 - Manual Operator</option>
+          <option value="9">9 - Available</option>
+          <option value="10">10 - Available</option>
+          <option value="11">11 - Available</option>
+          <option value="12">12 - Available</option>
+          <option value="13">13 - Available</option>
+          <option value="14">14 - Available</option>
+          <option value="15">15 - Available</option>
+          <option value="16">16 - Available</option>
+        </select>
+      </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-Write">
+  <p>A node used to view, select devices, device points, and point properties to add to the Write 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 Write values to. 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>Write List</strong></h3>
+  <ol class="node-ports">
+    <p>This tab shows all of the devices and points that have been chosen to write.</p>
+  </ol>
+
+  <h3><strong>Properties</strong></h3>
+  <ol class="node-ports">
+    <p>
+      This tab allows the user to choose the Application Tag and Priority to be used in a Write function. Please make sure
+      the device / controller is configured correctly to accept the write command.
+    </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>