Added some CSS & auto refresh

git-svn-id: https://redmine.imt-atlantique.fr/svn/xaal/code/Python/branches/fork@1662 b32b6428-25c9-4566-ad07-03861ab6144f

Added some CSS & auto refresh
b779ce49 · jkerdreu · 4a6e3b0f · b779ce49 · b779ce49
Commit b779ce49 authored 8 years ago by jkerdreu
--- a/apps/rest/xaal/rest/static/device.html
+++ b/apps/rest/xaal/rest/static/device.html
@@ -2,10 +2,39 @@
 <head>
  <title>xAAL JSON / List of devices</title>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
+<style>
+h1,h2 {
+    color: #00bbd7;
+}
+
+table {
+    border-collapse: collapse;
+    width: 800;
+}
+
+th, td {
+    padding: 6px;
+    text-align: left;
+    border-bottom: 1px solid #ddd;
+}
+th {
+    background: #00bbd7;
+    color: white;
+}
+
+</style>
 <body>
-<h1>Device</h1>
+<h1>xAAL Device</h1>
+
+<h2>Description</h2>
+<table id="description">
+</table>
+
+<br/>

-<div id="attributes"></div>
+<h2>Attributes</h2>
+<table id="attributes">
+</table>

 <script>
 function getUrlVars()
@@ -21,13 +50,29 @@ function getUrlVars()
    return vars;
 }

+
+function update() {
    addr=getUrlVars()['addr'];
    url="/devices/"+addr;
-
    $.getJSON(url, function(result){
-        $("#attributes").html(result["attributes"]["temperature"]);
+        $("#description").html("<tr><th>Name</th><th>Value</th></tr>");
+        $.each(result["description"], function(id, field){
+            if (field) {
+                $("#description").append("<tr><td>"+id+"</td><td>"+field+"</td></tr>");
+            }
+        });
+        

+        $("#attributes").html("<tr><th>Name</th><th>Value</th></tr>");        
+        $.each(result["attributes"], function(id, field){          
+            $("#attributes").append("<tr><td>"+id+"</td><td>"+field+"</td></tr>");
        });
+        
+    });
+}
+        
+setInterval(update,(1000*30));
+update();  
 </script>
 </script>


--- a/apps/rest/xaal/rest/static/index.html
+++ b/apps/rest/xaal/rest/static/index.html
@@ -2,15 +2,51 @@
 <head>
  <title>xAAL JSON / List of devices</title>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
+
+<style>
+h1{
+    color: #00bbd7;
+}
+
+table {
+    border-collapse: collapse;
+    width: 800;
+}
+
+th, td {
+    padding: 6px;
+    text-align: left;
+    border-bottom: 1px solid #ddd;
+}
+
+th {
+    background: #00bbd7;
+    color: white;
+}
+</style>
+
+
 <body>
-<h1>Devices</h1>
+<h1>xAAL Devices</h1>
+
+<style>
+table {
+    border-collapse: collapse;
+    width: 800;
+}
+
+th, td {
+    padding: 6px;
+    text-align: left;
+    border-bottom: 1px solid #ddd;
+}
+</style>
+

 <table id="devices">
+<tr><th>DevType</th><th>Address</th></tr>
 </table>

-<div id="url">
-</div>
-
 <script>
  $.getJSON("/devices", function(result){
        $.each(result, function(i, field){