menu
authorJean-Philippe Orsini <jeanfi@gmail.com>
Mon, 12 Sep 2011 21:50:35 +0000 (21:50 +0000)
committerJean-Philippe Orsini <jeanfi@gmail.com>
Mon, 12 Sep 2011 21:50:35 +0000 (21:50 +0000)
www/details.html
www/psensor.js
www/style.css

index 45bb367..d028246 100644 (file)
@@ -22,6 +22,8 @@ href="http://fonts.googleapis.com/css?family=Ubuntu:regular,bold&subset=Latin">
 
          url_id = get_url_params()["id"];
 
+      update_menu();
+      
           $.getJSON(url_id, function(data) {
                update_chart("chart", type_to_str(data["type"]), data);
          });
@@ -29,6 +31,11 @@ href="http://fonts.googleapis.com/css?family=Ubuntu:regular,bold&subset=Latin">
     </script>
   </head>
   <body>
+    <div id="menu">
+      <ul id="menu-list">
+      </ul>
+    </div>
+
     <h1></h1>
 
     <div class="chart" id="chart"></div>
index 925f3d4..e77fc01 100644 (file)
@@ -142,4 +142,27 @@ function update_chart(chart_id, title, data) {
     };
 
     $.jqplot (chart_id, [data_chart], style);
+}
+
+function update_menu() {
+    var name, link, url, str;
+
+    $.getJSON("/api/1.0/sensors", function(data) {
+       str = "<li class='menu-item'>Sensors\n<ul class='sub-menu'>";
+
+       $.each(data, function(i, item) {
+            name = item["name"];
+           url = "details.html?id="+escape("/api/1.0/sensors/"+item["id"]);
+           link = "<a href='"+url+"'>"+name+"</a>";
+           str += "<li>"+link+"</li>";
+       });
+
+       str += "</ul>";
+
+       $("#menu-list").append(str);
+    });
+
+    $("#menu-list").click(function() {
+       $("ul.sub-menu").slideToggle('medium');
+    });
 }
\ No newline at end of file
index 7703837..bff8f56 100644 (file)
@@ -1,6 +1,7 @@
 body {
     padding: 1em 1em 1em 1em;
     font-family: "Ubuntu", sans-serif;
+    font-size: 100%;
     color: #000;
     background-color: #fff;
 }
@@ -28,9 +29,7 @@ h1 {
 }
 
 p {
-    font-size: 12px;
-    line-height: 16px;
-    color: #333333;
+    font-size: 100%;
     margin-bottom: 8px;
 }
 
@@ -43,8 +42,6 @@ table {
 
 thead {
     background-color: #aea79f;
-    font-size: 12px;
-    line-height: 16px;
     color: #ffffff;
     font-weight: bold;
     padding-top: 4px;
@@ -52,8 +49,6 @@ thead {
 }
 
 tbody {
-    font-size: 12px;
-    line-height: 16px;
     color: #333333;
     padding-top: 4px;
     padding-bottom: 4px;
@@ -65,4 +60,26 @@ th, td {
 
 .chart {
     color: #000;
+}
+
+#menu-list {
+    list-style: none;
+    padding: 0 0 0 0;
+    margin: 0 0 0 0;
+ }
+
+#menu {
+    background: #000;
+    color: #fff;
+    padding-top: 1em;
+    padding-bottom: 1em;
+    padding-left: 1em;
+}
+
+.sub-menu {
+    padding: 0 0 0 0;
+    margin: 0 0 0 0;
+    list-style: none;
+    display: none;
+    color: #fff;
 }
\ No newline at end of file