Bacnet Table / Conn Status

Owned by Sarah Padilla (Unlicensed)
Last updated: Jul 11, 2018
17 min read

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();
});