Ninja Blocks Presence Widget

options.js

return {
  "name": "Ping Presence",
  "deviceMap": [
    {deviceId:264},
    {deviceId:261}
  ]
}

style.less

.devices-online {
  background-color:#DDD;
  background-size: cover;
  background-position:center; 
  height: 100%;
  padding:5px;
  margin-top:30px;
  overflow:auto;
}

.device {
  .name {display:block;}
  .time{display:block;text-align:right;font-size:12px;}
  border:white 1px solid;
  color: black;
  font-size: 18px;
  padding:5px;
  margin-bottom:5px;

  background: #8fc400;
  background: -moz-linear-gradient(left, #8fc400 0%, #8fc400 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,#8fc400), color-stop(100%,#8fc400));
  background: -webkit-linear-gradient(left, #8fc400 0%,#8fc400 100%);
  background: -o-linear-gradient(left, #8fc400 0%,#8fc400 100%);
  background: -ms-linear-gradient(left, #8fc400 0%,#8fc400 100%);
  background: linear-gradient(to right, #8fc400 0%,#8fc400 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8fc400', endColorstr='#8fc400',GradientType=1 );

}

view.html

<div class="devices-online">
</div>

widget.js

var entities = [];
var ids = [];

scope.onData = function(data) {
  data = JSON.parse(JSON.stringify(data));// FIXME
  //console.log("Presence actuate", data);
  //console.log("Entities: ",entities);
  
  var index = ids.indexOf(data.DA.id);
  if(index > -1) {
    entities[index] = data.DA;
    d = new Date(data.DA.TIMESTAMP);
    element.find('#'+data.DA.id).attr('style','').find('.time').text('Last seen: '+d.toLocaleString());
  } else {
  	item = data.DA;
  	var el = $('<div class="device"><span class="name"></span><span class="time"></span></div>');
  	el.find('.name').text(item.name);
  	d = new Date(item.TIMESTAMP);
    el.find('.time').text('Last seen: '+d.toLocaleString());
  	el.attr('id',item.id);
  	element.find('.devices-online').append(el);
  	ids.push(item.id);
  	entities.push(item);
  }
 
  var timeoutTime = new Date();
  timeoutTime.setMinutes(timeoutTime.getMinutes()-1);
  for(var i = 0;i<ids.length;i++)
  {
    if(entities[i].TIMESTAMP < timeoutTime) {
      element.find('#'+entities[i].id).attr('style','display:none'); 
      entities[i].present = false;
    }
  }
    
  
}