@bitpoolos/edge-bacnet 1.4.4 → 1.4.5

package/bacnet_read.html

@@ -359,7 +359,8 @@
                         //update UI
                         let parentDeviceName = slotProps.node.parentDevice;
                         let parentDevice = this.devices.find((ele) => ele.label == parentDeviceName);
-                        let device = this.deviceList.find((ele) => ele.deviceName == parentDeviceName);
+                        const slotDeviceId = slotProps.node.parentDeviceId;
+                        let device = this.deviceList.find((ele) => ele.deviceId == slotDeviceId);
                         let foundDeviceIndex = this.readDevices
                             ? this.readDevices.findIndex((ele) => ele.deviceId == device.deviceId)
                             : -1;
@@ -1105,17 +1106,19 @@
         </p-dialog>
 
         <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>
+          <a class="countStatus" style="margin-left: 15px;"> <span class="bp-deviceCount">{{deviceCount}}</span> Device(s)</a>
+          <p-progressbar :value="progressBarValue" :show-value="true" style="width: 220px; 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>
+              <i class="pi pi-wrench" style="color: #969696;"></i>
             </button>
+            
             <button @click="addAllDevices()" class="reloadButton" title="Add all devices">
-              <i class="pi pi-plus" style="color: #00AEEF;"></i>
+              <i class="pi pi-plus" style="color: #62ABE9;"></i> <span>Add all devices</span>
+            </button>
+
+            <button @click="getData()" class="reloadButton" title="Reload Data">
+                <i class="fa fa-refresh" style="color: #4D88B7;"></i> <span>Refresh tree</span>
             </button>
           </div>
         </div>
@@ -1157,12 +1160,12 @@
                 </template>
                 <template v-else>
                   <button @click="addAllClicked(slotProps)" class="addAllButton bacnetbutton">
-                    <i class="pi pi-plus-circle "><a class="allFunctionsText">Add all</a></i>
+                    <i class="pi pi-plus " title="Add all points"><a class="allFunctionsText"></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>
+                  <i class="pi pi-times" title="Remove all points"><a class="allFunctionsText">Remove all</a></i>
                 </button>
               </div>
             </template>
@@ -1210,33 +1213,35 @@
                 *
                 *
             -->
-    <div id="read-readList-tab" style="display:none">
+    <div id="read-readList-tab" class="read-readList-tab" style="display:none">
       <div class="removeAllDevicesDiv">
         <button @click="exportReadList()" class="export-points-button" title="Export Read List">
-          <i class="fa fa-cloud-download"> </i><a id="fileLabelText" style="padding-left: 10px;">Export</a>
+          <i class="fa fa-arrow-circle-down"> </i><a id="fileLabelText" style="padding-left: 10px;">Export</a>
         </button>
         <a id="exportJSON" style="display: none"></a>
 
         <button @click="importReadList()" class="export-points-button" title="Import Read List">
-          <i class="fa fa-cloud-upload" id="importReadListButton"></i
+          <i class="fa fa-arrow-circle-up" id="importReadListButton"></i
           ><a id="fileLabelText" style="padding-left: 10px;">Import</a>
         </button>
         <input type="file" id="readlist-file-upload" accept="application/JSON" class="inputStyle" style="display: none;" />
 
         <button @click="removeAllDevices()" class="removeAllDevicesButton" title="Remove all devices">
-          <a style="color: #ff0000;">Remove All Devices</a>
+            <i class="pi pi-times" title="Remove all points"></i> <a>Remove all devices</a>
         </button>
 
-        <button @click="refreshReadListTree()" class="refreshReadListButton" title="Refresh tree">
-            <i class="pi pi-refresh" style="color: #00AEEF;"> </i>
+        <button @click="refreshReadListTree()" class="reloadButton bp-read-list-refresh-button" title="Refresh tree">
+            <i class="fa fa-refresh" style="color: #4D88B7;"> </i><span>Refresh tree</span>
         </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>
+            <i class="pi pi-times"><a class="allFunctionsText">Remove device</a></i>
           </button>
         </template>
 
@@ -1256,16 +1261,17 @@
             *
         -->
     <div id="read-properties-tab" style="display:none">
-      <div class="form-row" style="display: flex; width: fit-content; flex-wrap: nowrap; flex-direction: column;">
+      <div class="form-row bp-prop-row" style="display: flex; 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
+          style="display: flex; align-items: center; white-space: nowrap;"
+          class="bp-prop-heading"
+          >Object Properties</label
         >
 
         <div
           id="node-input-object_properties_group"
-          style="display: flex; align-items: flex-start; flex-direction: column; padding-left: 50px;">
+          style="display: flex; align-items: flex-start; flex-direction: column;">
           <div class="objectPropertiesLabel">
             <label
               for="node-input-object_property_simplePayload"
@@ -1274,7 +1280,7 @@
               <i class="icon-tag"></i> <span data-i18n="bitpool-bacnet.label.object_property_simplePayload"></span>
               <input
                 style="margin-left: 5px;"
-                class=" objectProp"
+                class=" objectProp checkbox-round"
                 type="checkbox"
                 id="node-input-object_property_simplePayload" />
               <a style="white-space: nowrap; padding-left: 20px;">Simple Payload</a>
@@ -1289,7 +1295,7 @@
               <i class="icon-tag"></i> <span data-i18n="bitpool-bacnet.label.object_property_simpleWithStatus"></span>
               <input
                 style="margin-left: 5px;"
-                class=" objectProp"
+                class=" objectProp checkbox-round"
                 type="checkbox"
                 id="node-input-object_property_simpleWithStatus" />
               <a style="white-space: nowrap; padding-left: 20px;">Simple With Status</a>
@@ -1304,23 +1310,20 @@
               <i class="icon-tag"></i> <span data-i18n="bitpool-bacnet.label.object_property_fullObject"></span>
               <input
                 style="margin-left: 5px;"
-                class=" objectProp"
+                class=" objectProp checkbox-round"
                 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 class="form-row msgTypeDiv bp-prop-row" style="display: flex;">
+        <label for="node-input-msgType" class="bp-prop-heading"> Message type </label>
         <div
           id="node-input-msgType"
-          style="display: flex; align-items: flex-start; flex-direction: column; padding-left: 50px;">
+          style="display: flex; align-items: flex-start; flex-direction: column;">
           <!-- class= checkbox-round -->
           <div style="display: flex; flex-direction: row; align-items: flex-start;">
             <input
@@ -1358,24 +1361,23 @@
         </div>
       </div>
 
-      <hr />
-
-      <div class="objectPropertiesLabel" style="margin-top: 20px; margin-bottom: 20px;">
+      <div class="bp-checkbox-row bp-readnode-useDeviceName">
         <label
         for="node-input-useDeviceName"
-        style="width: auto; align-items: start;"
+        style="padding-left: 4px; align-items: start;"
         class="objectPropertiesLabel">
-        <i class="icon-tag"></i> <span data-i18n="bitpool-bacnet.label.useDeviceName"></span>
+        <span data-i18n="bitpool-bacnet.label.useDeviceName"></span>
+        <a style="white-space: nowrap;">Use device name in topic</a>
         <input
-            class=" objectProp"
+            style="margin-left: 10px; bottom: 3px;"
+            class=" objectProp bp-checkbox"
             type="checkbox"
             id="node-input-useDeviceName" />
-        <a style="white-space: nowrap; padding-left: 20px;">Use device name in topic</a>
         </label>
       </div>
 
-      <div class="form-row">
-        <label for="node-input-roundDecimal"> Decimal place precision </label>
+      <div class="form-row bp-row">
+        <label> Decimal place precision </label>
         <input type="number" id="node-input-roundDecimal" placeholder="None" />
       </div>
 
@@ -1385,10 +1387,11 @@
         <input style="display: none !important;" type="checkbox" id="node-input-hiddenDeployToggle" />
       </label>
 
-      <div class="form-row">
-        <label for="node-input-exportCsv"> Points List </label>
+      <hr>
+
+      <div class="form-row bp-import-buttons">
         <label for="points-export" class="export-points-button" @click="exportPointListCsv()">
-          <i class="fa fa-cloud-download" id="fileLabel"></i> <a id="points-export" style="padding-left: 10px;">Export</a>
+          <i class="fa fa-arrow-circle-down" id="fileLabel"></i> <a id="points-export" style="padding-left: 10px;">Export point list</a>
         </label>
       </div>
     </div>

package/bacnet_write.html

@@ -170,7 +170,9 @@
             let foundDeviceIndex = this.writeDevices
               ? this.writeDevices.findIndex((ele) => ele.label == parentDeviceName)
               : -1;
-            let device = this.deviceList.find((ele) => ele.deviceName == parentDeviceName);
+
+            const slotDeviceId = slotProps.node.parentDeviceId;
+            let device = this.deviceList.find((ele) => ele.deviceId == slotDeviceId);
             let deviceAddress = app.getDeviceAddress(device.address);
             let key = `${deviceAddress}-${device.deviceId}`;
             let parentDevice = this.devices.find((ele) => ele.ipAddr == deviceAddress);
@@ -852,7 +854,7 @@
         <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>
+            <i class="fa fa-refresh" style="color: #4D88B7;"><a class="allFunctionsText">Refresh list</a></i>
           </button>
         </div>
 
@@ -920,7 +922,7 @@
       </p>
     </div>
 
-    <div id="read-writeList-tab" style="display:none">
+    <div id="read-writeList-tab" class="read-writeList-tab" style="display:none">
       <p-tree :value="writeDevices">
         <template #device="slotProps">
           <b class="deviceLabel">{{slotProps.node.label}} </b>
@@ -936,7 +938,7 @@
     </div>
 
     <div id="read-write-tab" style="display:none">
-      <div class="form-row">
+      <div class="form-row bp-row">
         <label for="node-input-applicationTag"
           ><i class="icon-tag"></i><span data-i18n="bitpool-bacnet.label.applicationTag"></span> Application Tag</label
         >
@@ -982,7 +984,7 @@
         </select>
       </div>
 
-      <div class="form-row">
+      <div class="form-row bp-row">
         <label for="node-input-priority"
           ><i class="icon-tag"></i><span data-i18n="bitpool-bacnet.label.priority"></span> Priority</label
         >

package/bitpool_inject.html

@@ -20,38 +20,48 @@
 
 
 <script type="text/html" data-template-name="Bitpool-Inject">
-    <div class="form-row">
-        <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="common.label.name"></span></label>
+    <div class="form-row bp-row">
+        <label for="node-input-name"> <span data-i18n="common.label.name"></span></label>
         <input type="text" id="node-input-name" data-i18n="[placeholder]common.label.name">
     </div>
 
+    <div class="bp-objectPropertiesLabel bp-checkbox-row">
+        <label
+        for="node-input-useDeviceName"
+        style="padding-left: 4px; align-items: start;"
+        class="objectPropertiesLabel">
+        <span data-i18n="bitpool-bacnet.label.useDeviceName"></span>
+        <a style="white-space: nowrap; padding-left: 20px;">Use device name in topic</a>
+        <input
+            style="margin-left: 10px; bottom: 3px;"
+            class=" objectProp bp-checkbox"
+            type="checkbox"
+            id="node-input-useDeviceName" />
+        </label>
+    </div>
+
     <div class="form-row node-input-property-container-row bitpoolInjectList">
         <div id="node-input-property-container-list" class="optionsSelector">
             <div class="injectHeading">
                 <a>Inject Type </a>
             </div>
 
-            <div class="optionParent">
-                <div class="msgOptions discoverOption">
-                    <input class="checkbox-round" type="checkbox" id="node-input-doDiscover" class="" style="margin: 0 50px 0 10px;"/>
+            <div class="bp-button-group">
+                <div id="node-input-doDiscover-button" class="msgOptions discoverOption">
+                    <input class="checkbox-round" type="checkbox" id="node-input-doDiscover" style="display: none;"/>
                     <label style="font-size: 16px; height: min-content; margin-bottom: 0px;" for="node-input-doDiscover">Discover</label> 
                 </div>
-                <div class="msgOptions pollOption">
-                    <input class="checkbox-round" type="checkbox" id="node-input-doPoll" class="" style="margin: 0 50px 0 10px;"/>
+                <div class="msgOptions pollOption" id="node-input-doPoll-button">
+                    <input class="checkbox-round" type="checkbox" id="node-input-doPoll" style="display: none;"/>
                     <label style="font-size: 16px; height: min-content; margin-bottom: 0px;" for="node-input-doPoll">Poll</label> 
                 </div>
             </div>
 
-            <div class="form-row" style="display: flex; width: fit-content; flex-wrap: nowrap; flex-direction: row; padding-top: 10px; margin-left: auto; margin-right: auto;">
+            <div class="form-row bp-msg-type-row">
 
-                <div
-                  id="node-input-object_properties_group"
-                  style="display: flex; align-items: flex-start; flex-direction: column;">
-                    <label
-                    for="node-input-object_properties_group"
-                    style="display: flex; align-items: center; white-space: nowrap; text-decoration: underline;"
-                    >
-                        Object Properties:
+                <div id="node-input-object_properties_group" class="bp-msg-type-column bp-object">
+                    <label for="node-input-object_properties_group" class="bp-msg-type-labels">
+                        Object Properties
                     </label>
                     
                     <div class="objectPropertiesLabel">
@@ -62,7 +72,7 @@
                         <i class="icon-tag"></i> <span data-i18n="bitpool-bacnet.label.object_property_simplePayload"></span>
                         <input
                             style="margin-left: 5px;"
-                            class=" objectProp"
+                            class=" objectProp checkbox-round"
                             type="checkbox"
                             id="node-input-object_property_simplePayload" />
                         <a style="white-space: nowrap; padding-left: 20px;">Simple Payload</a>
@@ -77,7 +87,7 @@
                         <i class="icon-tag"></i> <span data-i18n="bitpool-bacnet.label.object_property_simpleWithStatus"></span>
                         <input
                             style="margin-left: 5px;"
-                            class=" objectProp"
+                            class=" objectProp checkbox-round"
                             type="checkbox"
                             id="node-input-object_property_simpleWithStatus" />
                         <a style="white-space: nowrap; padding-left: 20px;">Simple With Status</a>
@@ -92,7 +102,7 @@
                         <i class="icon-tag"></i> <span data-i18n="bitpool-bacnet.label.object_property_fullObject"></span>
                         <input
                             style="margin-left: 5px;"
-                            class=" objectProp"
+                            class=" objectProp checkbox-round"
                             type="checkbox"
                             id="node-input-object_property_fullObject" />
                         <a style="white-space: nowrap; padding-left: 20px;">Full Object</a>
@@ -102,8 +112,8 @@
                 </div>
                 <div
                   id="node-input-msgType"
-                  style="display: flex; align-items: flex-start; flex-direction: column; padding-left: 50px;">
-                  <label for="node-input-msgType" style="text-decoration: underline;"> Message type: </label>
+                  class="bp-msg-type-column bp-msg">
+                  <label for="node-input-msgType" class="bp-msg-type-labels"> Message type </label>
                   <!-- class= checkbox-round -->
                   <div style="display: flex; flex-direction: row; align-items: flex-start;">
                     <input
@@ -142,31 +152,11 @@
             </div>
         </div>
 
-
-        <div class="injectHeading" style="margin-top: 20px;">
-            <a>Topic Properties</a>
-        </div>
-
-        <div class="objectPropertiesLabel" style="margin-top: 20px;">
-            <label
-            for="node-input-useDeviceName"
-            style="padding-left: 4px; width: auto; align-items: start;"
-            class="objectPropertiesLabel">
-            <i class="icon-tag"></i> <span data-i18n="bitpool-bacnet.label.useDeviceName"></span>
-            <input
-                style="margin-left: 5px;"
-                class=" objectProp"
-                type="checkbox"
-                id="node-input-useDeviceName" />
-            <a style="white-space: nowrap; padding-left: 20px;">Use device name in topic</a>
-            </label>
-        </div>
-
         <div class="injectHeading" style="margin-top: 20px;">
             <a>Msg Properties</a>
         </div>
 
-        <ol id="node-input-property-container" class="nrEditableList" style="height: 400px !important;"></ol>
+        <ol id="node-input-property-container" class="nrEditableList bp-editable-list" style="height: 400px !important;"></ol>
 
     </div>
 
@@ -261,91 +251,6 @@
 
 </script>
 <style>
-    .optionParent {
-        display: flex;
-    }
-
-    .injectHeading>a {
-        margin: 0;
-        font-weight: 600;
-        font-size: 14px;
-    }
-
-    .injectHeading {
-        border-bottom: 1px solid #cbcbcb;
-        text-align: start;
-        height: 30px;
-    }
-
-    .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;
-    }
-
-    .msgOptions {
-        border: 1px solid #cbcbcb;
-        border-radius: 4px;
-        height: 35px;
-        transition: 1s;
-        display: flex;
-        flex-direction: row;
-        justify-content: space-evenly;
-        align-items: center;
-        cursor: pointer;
-        width: 50%;
-    }
-
-    .msgOptions:hover {
-        border: 1px solid #00AEEF;
-        transition: 1s;
-        background-color: #f5fcff;
-    }
-
-    .discoverOption {
-        margin-top: 15px;
-        width: 180px;
-        margin-right: 20px;
-        margin-left: auto;
-    }
-
-    .pollOption {
-        margin-top: 15px;
-        width: 180px;
-        margin-right: auto;
-    }
-
-    .optionsSelector {
-        min-height: 90px !important;
-        max-height: none !important;
-        display: flex;
-        flex-direction: column;
-        flex-wrap: nowrap;
-        justify-content: space-around;
-    }
-
-    .bitpoolInjectList>.red-ui-editableList>.red-ui-editableList-container {
-        min-height: 120px !important;
-        max-height: none;
-        overflow-y: scroll;
-        height: 410px !important;
-    }
-
     /* node-red css */
 
     .inject-time-row {
@@ -799,13 +704,9 @@
                 document.getElementById("node-input-object_property_simpleWithStatus").onclick = handlePayloadCheckboxClick;
                 document.getElementById("node-input-object_property_fullObject").checked = node.object_property_fullObject;
                 document.getElementById("node-input-object_property_fullObject").onclick = handlePayloadCheckboxClick;
-
                 document.getElementById("node-input-useDeviceName").checked = node.useDeviceName;
-
-
-                document.getElementById("node-input-doDiscover").onclick = handleCheckboxClick;
-                document.getElementById("node-input-doPoll").onclick = handleCheckboxClick;
-
+                document.getElementById("node-input-doDiscover-button").onclick = handleCheckboxClick;
+                document.getElementById("node-input-doPoll-button").onclick = handleCheckboxClick;
                 document.getElementById("node-input-json").checked = node.json;
                 document.getElementById("node-input-json").onclick = handleMsgTypeClick;
                 document.getElementById("node-input-mqtt").checked = node.mqtt;
@@ -813,14 +714,26 @@
                 document.getElementById("node-input-pointJson").checked = node.pointJson;
                 document.getElementById("node-input-pointJson").onclick = handleMsgTypeClick;
 
-
+                if (document.getElementById("node-input-doPoll").checked) {
+                    document.getElementById("node-input-doPoll-button").classList.add("activeButton");
+                    document.getElementById("node-input-doDiscover-button").classList.remove("activeButton");
+                } else if (document.getElementById("node-input-doDiscover").checked) {
+                    document.getElementById("node-input-doDiscover-button").classList.add("activeButton");
+                    document.getElementById("node-input-doPoll-button").classList.remove("activeButton");
+                }
 
                 function handleCheckboxClick() {
-                    if (this.id == "node-input-doDiscover") {
+                    if (this.id == "node-input-doDiscover-button") {
+                        document.getElementById("node-input-doDiscover").checked = true;
                         document.getElementById("node-input-doPoll").checked = false;
+                        document.getElementById("node-input-doDiscover-button").classList.add("activeButton");
+                        document.getElementById("node-input-doPoll-button").classList.remove("activeButton");
                     }
-                    if (this.id == "node-input-doPoll") {
+                    if (this.id == "node-input-doPoll-button") {
+                        document.getElementById("node-input-doPoll").checked = true;
                         document.getElementById("node-input-doDiscover").checked = false;
+                        document.getElementById("node-input-doPoll-button").classList.add("activeButton");
+                        document.getElementById("node-input-doDiscover-button").classList.remove("activeButton");
                     }
                 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bitpoolos/edge-bacnet",
-  "version": "1.4.4",
+  "version": "1.4.5",
   "description": "A bacnet gateway for node-red",
   "dependencies": {
     "@plus4nodered/ts-node-bacnet": "^1.0.0-beta.2",