Bacnet Table / Conn Status
Jul 11, 2018
Ractive
Drag out Ractive from components on the left side menu
Under Properties, click ractive editor, then open editor
Copy and paste the code below for template, model, style, and init, into the corresponding tabs
Template
<div class="mainBack">
<table class="s-table">
<tr>
<td class="tableDataHeader view-superman-label"><div class="s-horizontal"><div class="icon-tags" on-click="showDis"></div><div class="tooltip" on-click="bacnetDeviceName"> Bacnet Device Name<span class="tooltiptext">Click to sort bacnetDeviceName</span></div></div></td>
<td class="tableDataHeader view-superman-label" on-click="connStatus"><div class="tooltip">Conn Status<span class="tooltiptext">Click to sort connStatus</span></div></td>
<td class="tableDataHeader view-superman-label" on-click="ipAddr"><div class="tooltip">IP Address<span class="tooltiptext">Click to sort ipAddr</span></div></td>
<td class="tableDataHeader view-superman-label" on-click="instanceNum"><div class="tooltip">Instance Number<span class="tooltiptext">Click to sort instanceNum</span></div></td>
<td class="tableDataHeader view-superman-label" on-click="networkNum"><div class="tooltip">Network Number<span class="tooltiptext">Click to sort networkNum</span></div></td>
</tr>
{{#myPoints}}
<tr>
<td class="tableData view-superman-value">{{bacnetDeviceName}}</td>
<td class="s-size {{#if connStatus=="down"}}view-superman-value status-down
{{elseif connStatus=="alarm"}}view-superman-value status-alarm
{{elseif connStatus=="unackedAlarm"}}view-superman-value status-unacked
{{elseif connStatus=="fault"}}view-superman-value status-fault
{{elseif connStatus=="stale"}}view-superman-value status-stale
{{elseif connStatus=="disabled"}}view-superman-value status-disabled
{{elseif connStatus=="ok"}}view-superman-value status-ok
{{elseif connStatus=="null"}}view-superman-value status-null{{else}}tableData view-superman-value{{/if}}">{{connStatus}}</td>
<td class="tableData view-superman-value">{{ipAddr}}</td>
<td class="tableData view-superman-value">{{instanceNum}}</td>
<td class="tableData view-superman-value">{{networkNum}}</td>
</tr>
{{/myPoints}}
</table>
</div>
Model
{
data:
{
myPoints:[]
}
}Style
.mainBack{
width: 100%;
height: 100%;
padding: 10px;
border-radius: 5px;
background-color: #f5f5f5;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.s-table{
width: 100%;
}
.tableDataHeader{
height: 30px;
padding: 10px;
border-radius: 5px;
cursor: pointer;
background-color: #d5d5d5;
}
.tableData{
height: 30px;
padding: 10px;
border-radius: 5px;
}
.s-size{
height: 30px;
padding: 10px;
border-radius: 5px;
}
.s-horizontal{
display: flex;
flex-direction: row;
}
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
font-size: 10px;
font-weight: 100;
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
.s-horizontal{
display: flex;
flex-direction: row;
}Init
this.ractive.fire("obtainData");
var template = this;
var model = this.ractive;
var bacnetDeviceNameAZ = true;
var connStatusAZ = true;
var ipAddrAZ = true;
var instanceNumAZ = true;
var networkNumAZ = true;
var disName = true;
this.ractive.on("showDis", function(event) {
if (disName === true){
finstack.eval('readAll(bacnetConn).map (x=> x.set("ipAddr", x->uri.toStr.split("/")[2]).set("instanceNum", x->uri.toStr.split("/")[3].split("?")[0]).set("networkNum", x->uri.toStr.split("=")[0].split("&")[0].split("/")[-1].split("?")[0])).sort("bacnetDeviceName")', function(data){
var myPoints = [];
var realPoints = data.result.toObj();
realPoints.forEach(function(p,index) {
myPoints.push({
bacnetDeviceName : p.dis,
connStatus : p.connStatus,
ipAddr : p.ipAddr,
instanceNum : p.instanceNum,
networkNum : p.networkNum
});
});
model.set({'myPoints':myPoints});
});
disName = false;
}
else{
finstack.eval('readAll(bacnetConn).map (x=> x.set("ipAddr", x->uri.toStr.split("/")[2]).set("instanceNum", x->uri.toStr.split("/")[3].split("?")[0]).set("networkNum", x->uri.toStr.split("=")[0].split("&")[0].split("/")[-1].split("?")[0])).sort("bacnetDeviceName")', function(data){
var bacnetDeviceName = data.result.toObj();
model.set('myPoints', bacnetDeviceName);
});
disName = true;
}
});
this.ractive.on("bacnetDeviceName", function(event) {
if (bacnetDeviceNameAZ === true){
finstack.eval('readAll(bacnetConn).map (x=> x.set("ipAddr", x->uri.toStr.split("/")[2]).set("instanceNum", x->uri.toStr.split("/")[3].split("?")[0]).set("networkNum", x->uri.toStr.split("=")[0].split("&")[0].split("/")[-1].split("?")[0])).sort("bacnetDeviceName")', function(data){
if(disName === false){
var myPoints = [];
var realPoints = data.result.toObj();
realPoints.forEach(function(p,index) {
myPoints.push({
bacnetDeviceName : p.dis,
connStatus : p.connStatus,
ipAddr : p.ipAddr,
instanceNum : p.instanceNum,
networkNum : p.networkNum
});
});
model.set({'myPoints':myPoints});
}
else{
var bacnetDeviceName = data.result.toObj();
model.set('myPoints', bacnetDeviceName);
}
});
bacnetDeviceNameAZ = false;
connStatusAZ = true;
ipAddrAZ = true;
instanceNumAZ = true;
networkNumAZ = true;
}
else{
finstack.eval('readAll(bacnetConn).map (x=> x.set("ipAddr", x->uri.toStr.split("/")[2]).set("instanceNum", x->uri.toStr.split("/")[3].split("?")[0]).set("networkNum", x->uri.toStr.split("=")[0].split("&")[0].split("/")[-1].split("?")[0])).sortr("bacnetDeviceName")', function(data){
if(disName === false){
var myPoints = [];
var realPoints = data.result.toObj();
realPoints.forEach(function(p,index) {
myPoints.push({
bacnetDeviceName : p.dis,
connStatus : p.connStatus,
ipAddr : p.ipAddr,
instanceNum : p.instanceNum,
networkNum : p.networkNum
});
});
model.set({'myPoints':myPoints});
}
else{
var bacnetDeviceName = data.result.toObj();
model.set('myPoints', bacnetDeviceName);
}
});
bacnetDeviceNameAZ = true;
connStatusAZ = true;
ipAddrAZ = true;
instanceNumAZ = true;
networkNumAZ = true;
}
});
this.ractive.on("connStatus", function(event) {
if (connStatusAZ === true){
finstack.eval('readAll(bacnetConn).map (x=> x.set("ipAddr", x->uri.toStr.split("/")[2]).set("instanceNum", x->uri.toStr.split("/")[3].split("?")[0]).set("networkNum", x->uri.toStr.split("=")[0].split("&")[0].split("/")[-1].split("?")[0])).sort("connStatus")', function(data){
if(disName === false){
var myPoints = [];
var realPoints = data.result.toObj();
realPoints.forEach(function(p,index) {
myPoints.push({
bacnetDeviceName : p.dis,
connStatus : p.connStatus,
ipAddr : p.ipAddr,
instanceNum : p.instanceNum,
networkNum : p.networkNum
});
});
model.set({'myPoints':myPoints});
}
else{
var connStatus = data.result.toObj();
model.set('myPoints', connStatus);
}
});
bacnetDeviceNameAZ = true;
connStatusAZ = false;
ipAddrAZ = true;
instanceNumAZ = true;
networkNumAZ = true;
}
else{
finstack.eval('readAll(bacnetConn).map (x=> x.set("ipAddr", x->uri.toStr.split("/")[2]).set("instanceNum", x->uri.toStr.split("/")[3].split("?")[0]).set("networkNum", x->uri.toStr.split("=")[0].split("&")[0].split("/")[-1].split("?")[0])).sortr("connStatus")', function(data){
if(disName === false){
var myPoints = [];
var realPoints = data.result.toObj();
realPoints.forEach(function(p,index) {
myPoints.push({
bacnetDeviceName : p.dis,
connStatus : p.connStatus,
ipAddr : p.ipAddr,
instanceNum : p.instanceNum,
networkNum : p.networkNum
});
});
model.set({'myPoints':myPoints});
}
else{
var connStatus = data.result.toObj();
model.set('myPoints', connStatus);
}
});
bacnetDeviceNameAZ = true;
connStatusAZ = true;
ipAddrAZ = true;
instanceNumAZ = true;
networkNumAZ = true;
}
});
this.ractive.on("ipAddr", function(event) {
if (ipAddrAZ === true){
finstack.eval('readAll(bacnetConn).map (x=> x.set("ipAddr", x->uri.toStr.split("/")[2]).set("instanceNum", x->uri.toStr.split("/")[3].split("?")[0]).set("networkNum", x->uri.toStr.split("=")[0].split("&")[0].split("/")[-1].split("?")[0])).sort("ipAddr")', function(data){
if(disName === false){
var myPoints = [];
var realPoints = data.result.toObj();
realPoints.forEach(function(p,index) {
myPoints.push({
bacnetDeviceName : p.dis,
connStatus : p.connStatus,
ipAddr : p.ipAddr,
instanceNum : p.instanceNum,
networkNum : p.networkNum
});
});
model.set({'myPoints':myPoints});
}
else{
var ipAddr = data.result.toObj();
model.set('myPoints', ipAddr);
}
});
bacnetDeviceNameAZ = true;
connStatusAZ = true;
ipAddrAZ = false;
instanceNumAZ = true;
networkNumAZ = true;
}
else{
finstack.eval('readAll(bacnetConn).map (x=> x.set("ipAddr", x->uri.toStr.split("/")[2]).set("instanceNum", x->uri.toStr.split("/")[3].split("?")[0]).set("networkNum", x->uri.toStr.split("=")[0].split("&")[0].split("/")[-1].split("?")[0])).sortr("ipAddr")', function(data){
if(disName === false){
var myPoints = [];
var realPoints = data.result.toObj();
realPoints.forEach(function(p,index) {
myPoints.push({
bacnetDeviceName : p.dis,
connStatus : p.connStatus,
ipAddr : p.ipAddr,
instanceNum : p.instanceNum,
networkNum : p.networkNum
});
});
model.set({'myPoints':myPoints});
}
else{
var ipAddr = data.result.toObj();
model.set('myPoints', ipAddr);
}
});
bacnetDeviceNameAZ = true;
connStatusAZ = true;
ipAddrAZ = true;
instanceNumAZ = true;
networkNumAZ = true;
}
});
this.ractive.on("instanceNum", function(event) {
if (instanceNumAZ === true){
finstack.eval('readAll(bacnetConn).map (x=> x.set("ipAddr", x->uri.toStr.split("/")[2]).set("instanceNum", x->uri.toStr.split("/")[3].split("?")[0]).set("networkNum", x->uri.toStr.split("=")[0].split("&")[0].split("/")[-1].split("?")[0])).sort("instanceNum")', function(data){
if(disName === false){
var myPoints = [];
var realPoints = data.result.toObj();
realPoints.forEach(function(p,index) {
myPoints.push({
bacnetDeviceName : p.dis,
connStatus : p.connStatus,
ipAddr : p.ipAddr,
instanceNum : p.instanceNum,
networkNum : p.networkNum
});
});
model.set({'myPoints':myPoints});
}
else{
var instanceNum = data.result.toObj();
model.set('myPoints', instanceNum);
}
});
bacnetDeviceNameAZ = true;
connStatusAZ = true;
ipAddrAZ = true;
instanceNumAZ = false;
networkNumAZ = true;
}
else{
finstack.eval('readAll(bacnetConn).map (x=> x.set("ipAddr", x->uri.toStr.split("/")[2]).set("instanceNum", x->uri.toStr.split("/")[3].split("?")[0]).set("networkNum", x->uri.toStr.split("=")[0].split("&")[0].split("/")[-1].split("?")[0])).sortr("instanceNum")', function(data){
if(disName === false){
var myPoints = [];
var realPoints = data.result.toObj();
realPoints.forEach(function(p,index) {
myPoints.push({
bacnetDeviceName : p.dis,
connStatus : p.connStatus,
ipAddr : p.ipAddr,
instanceNum : p.instanceNum,
networkNum : p.networkNum
});
});
model.set({'myPoints':myPoints});
}
else{
var instanceNum = data.result.toObj();
model.set('myPoints', instanceNum);
}
});
bacnetDeviceNameAZ = true;
connStatusAZ = true;
ipAddrAZ = true;
instanceNumAZ = true;
networkNumAZ = true;
}
});
this.ractive.on("networkNum", function(event) {
if (networkNumAZ === true){
finstack.eval('readAll(bacnetConn).map (x=> x.set("ipAddr", x->uri.toStr.split("/")[2]).set("instanceNum", x->uri.toStr.split("/")[3].split("?")[0]).set("networkNum", x->uri.toStr.split("=")[0].split("&")[0].split("/")[-1].split("?")[0])).sort("networkNum")', function(data){
if(disName === false){
var myPoints = [];
var realPoints = data.result.toObj();
realPoints.forEach(function(p,index) {
myPoints.push({
bacnetDeviceName : p.dis,
connStatus : p.connStatus,
ipAddr : p.ipAddr,
instanceNum : p.instanceNum,
networkNum : p.networkNum
});
});
model.set({'myPoints':myPoints});
}
else{
var networkNum = data.result.toObj();
model.set('myPoints', networkNum);
}
});
bacnetDeviceNameAZ = true;
connStatusAZ = true;
ipAddrAZ = true;
instanceNumAZ = true;
networkNumAZ = false;
}
else{
finstack.eval('readAll(bacnetConn).map (x=> x.set("ipAddr", x->uri.toStr.split("/")[2]).set("instanceNum", x->uri.toStr.split("/")[3].split("?")[0]).set("networkNum", x->uri.toStr.split("=")[0].split("&")[0].split("/")[-1].split("?")[0])).sortr("networkNum")', function(data){
if(disName === false){
var myPoints = [];
var realPoints = data.result.toObj();
realPoints.forEach(function(p,index) {
myPoints.push({
bacnetDeviceName : p.dis,
connStatus : p.connStatus,
ipAddr : p.ipAddr,
instanceNum : p.instanceNum,
networkNum : p.networkNum
});
});
model.set({'myPoints':myPoints});
}
else{
var networkNum = data.result.toObj();
model.set('myPoints', networkNum);
}
});
bacnetDeviceNameAZ = true;
connStatusAZ = true;
ipAddrAZ = true;
instanceNumAZ = true;
networkNumAZ = true;
}
});Program
Go to programs in the left menu
Click the plus to add a new program, and it will pull up the program editor
In the Program Target Filter type stackRactive
Click the three dots in the top right corner, and select variables
Click the gear that appears as you haver over "this"
Turn on Invokes the Function
Change the dropdown to Custom Event
In the textbox below the dropdown type obtainData
Click the gray Save button
Copy and paste the code below into the main section and click the blue save
var ractive = this;
finstack.eval('readAll(bacnetConn).map (x=> x.set("ipAddr", x->uri.toStr.split("/")[2]).set("instanceNum", x->uri.toStr.split("/")[3].split("?")[0]).set("networkNum", if(x->uri.toStr.split("=").size > 1) x->uri.toStr.split("=")[1].split("&")[0] else ""))', function(data){
ractive.myPoints = data.result.toObj();
});