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
#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


Messages In This Thread
RE: App to display object info - by admin - 09.10.2017, 12:02
RE: App to display object info - by admin - 10.10.2017, 06:11
RE: App to display object info - by admin - 10.10.2017, 06:26

Forum Jump: