url_id = get_url_params()["id"];
+ update_menu();
+
$.getJSON(url_id, function(data) {
update_chart("chart", type_to_str(data["type"]), data);
});
</script>
</head>
<body>
+ <div id="menu">
+ <ul id="menu-list">
+ </ul>
+ </div>
+
<h1></h1>
<div class="chart" id="chart"></div>
};
$.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
body {
padding: 1em 1em 1em 1em;
font-family: "Ubuntu", sans-serif;
+ font-size: 100%;
color: #000;
background-color: #fff;
}
}
p {
- font-size: 12px;
- line-height: 16px;
- color: #333333;
+ font-size: 100%;
margin-bottom: 8px;
}
thead {
background-color: #aea79f;
- font-size: 12px;
- line-height: 16px;
color: #ffffff;
font-weight: bold;
padding-top: 4px;
}
tbody {
- font-size: 12px;
- line-height: 16px;
color: #333333;
padding-top: 4px;
padding-bottom: 4px;
.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