This forum uses cookies
This forum makes use of cookies to store your login information if you are registered, and your last visit if you are not. Cookies are small text documents stored on your computer; the cookies set by this forum can only be used on this website and pose no security risk. Cookies on this forum also track the specific topics you have read and when you last read them. Please confirm that you accept these cookies being set.

App to display object info
#1
Hello my goal is to make a app to display battery info for all my battery powered devices.

Tags used in the object: battery_chk1 (20 devices) and battery_chk2 (10 devices).

How to make a app that displays the object name, object value, last updated time (order by tag, object name)?
Reply
#2
Code:
<?
require('apps')
d1 = grp.tag('battery_chk1')
d2 = grp.tag('battery_chk2')
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Objects</title>
<link rel="stylesheet" href="/apps/css/bootstrap.css">
<link rel="stylesheet" href="/apps/css/font-awesome.css">
<link rel="stylesheet" href="/apps/css/style.css">
<script src="/apps/js/jquery.js.gz"></script>
<style>
body { padding: 20px; background-color: #fff; }
.navbar { background-color: #eee; }
</style>
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid text-center">
<span class="btn btn-default navbar-btn pull-right back"><span class="fa fa-lg fa-times"></span></span>
<span class="btn btn-default navbar-btn pull-left refresh"><span class="fa fa-lg fa-refresh"></span></span>
<span class="navbar-brand">Objects</span>
</div>
</div>
<div class="wrap">
<div class="container">
  <table class="table table-hover">
    <thead>
      <tr>
        <th>Name</th>
        <th>Value</th>
        <th>Date</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
</div>
</div>
<script>
$(function() {
  function render(data) {
    // sort data by name
    data.sort(function(a, b) {
      var na = a.name.toLowerCase()
        , nb = b.name.toLowerCase();

      if (na > nb) {
        return 1;
      }
      else if (na < nb) {
        return -1;
      }
      else {
        return 0;
      }
    });

    // show each object name/value/update time
    $.each(data, function(index, item) {
      var trs = $('<tr><td></td><td></td><td></td></tr>').appendTo('tbody')
        , tds = trs.find('td')
        , d = new Date(item.updatetime * 1000);

      $(tds[ 0 ]).text(item.name);
      $(tds[ 1 ]).text(item.value);
      $(tds[ 2 ]).text(d.toString().split(' GMT')[0]);
    });
  }

  render(<?=json.encode(d1)?>);
  render(<?=json.encode(d2)?>);

  $('.refresh').click(function() {
    window.location.reload();
  });

  $('.back').click(function() {
    $(this).find('.fa')
      .removeClass('fa-times')
      .addClass('fa-refresh fa-spin')
    window.location = '/apps/';
  });
});
</script>
</body>
</html>
Reply
#3
(09.10.2017, 12:02)admin Wrote:
Code:
<?
require('apps')
d1 = grp.tag('battery_chk1')
d2 = grp.tag('battery_chk2')
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Objects</title>
<link rel="stylesheet" href="/apps/css/bootstrap.css">
<link rel="stylesheet" href="/apps/css/font-awesome.css">
<link rel="stylesheet" href="/apps/css/style.css">
<script src="/apps/js/jquery.js.gz"></script>
<style>
body { padding: 20px; background-color: #fff; }
.navbar { background-color: #eee; }
</style>
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid text-center">
<span class="btn btn-default navbar-btn pull-right back"><span class="fa fa-lg fa-times"></span></span>
<span class="btn btn-default navbar-btn pull-left refresh"><span class="fa fa-lg fa-refresh"></span></span>
<span class="navbar-brand">Objects</span>
</div>
</div>
<div class="wrap">
<div class="container">
 <table class="table table-hover">
   <thead>
     <tr>
       <th>Name</th>
       <th>Value</th>
       <th>Date</th>
     </tr>
   </thead>
   <tbody></tbody>
 </table>
</div>
</div>
<script>
$(function() {
 function render(data) {
   // sort data by name
   data.sort(function(a, b) {
     var na = a.name.toLowerCase()
       , nb = b.name.toLowerCase();

     if (na > nb) {
       return 1;
     }
     else if (na < nb) {
       return -1;
     }
     else {
       return 0;
     }
   });

   // show each object name/value/update time
   $.each(data, function(index, item) {
     var trs = $('<tr><td></td><td></td><td></td></tr>').appendTo('tbody')
       , tds = trs.find('td')
       , d = new Date(item.updatetime * 1000);

     $(tds[ 0 ]).text(item.name);
     $(tds[ 1 ]).text(item.value);
     $(tds[ 2 ]).text(d.toString().split(' GMT')[0]);
   });
 }

 render(<?=json.encode(d1)?>);
 render(<?=json.encode(d2)?>);

 $('.refresh').click(function() {
   window.location.reload();
 });

 $('.back').click(function() {
   $(this).find('.fa')
     .removeClass('fa-times')
     .addClass('fa-refresh fa-spin')
   window.location = '/apps/';
 });
});
</script>
</body>
</html>

thnks....
Reply
#4
It gives: Uncaught SyntaxError: Unexpected token < at:
render(<?=json.encode(d1)?>);
Reply
#5
Which firmware version are you running?
Try this:
Code:
render(<? write(json.encode(d1)) ?>);
render(<? write(json.encode(d2)) ?>);
Reply
#6
(10.10.2017, 06:11)admin Wrote: Which firmware version are you running?
Try this:
Code:
render(<? write(json.encode(d1)) ?>);
render(<? write(json.encode(d2)) ?>);

Versie: 20170620

same error:
Uncaught SyntaxError: Unexpected token <
Reply
#7
Are you putting this into .lp file? It must be .lp, .html will not work.
Reply
#8
(10.10.2017, 06:26)admin Wrote: Are you putting this into .lp file? It must be .lp, .html will not work.

yes, that works.. Thanks
Reply


Forum Jump: