This repository has been archived by the owner on Feb 24, 2020. It is now read-only.
/
dashboard.html
163 lines (155 loc) · 7.57 KB
/
dashboard.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<html>
<head>
<title>Stats Dashboard</title>
<script src="/_ah/channel/jsapi"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script src="/js/jquery.color.js" type="text/javascript"></script>
<script type="text/javascript">
function addOrUpdate(datestamp, date, datapoint, hour, value) {
checkAndCreateTable(datestamp, date);
checkAndCreateTr(datestamp, datapoint);
tr = $("#"+datestamp+"_"+datapoint);
td = $("#"+datestamp+"_"+datapoint+"_"+hour);
td.text(value);
if(tr.attr('class') == 'odd') {
td.animate({backgroundColor: '#cceeff'}).animate({backgroundColor: '#eeffff'});
} else {
td.animate({backgroundColor: '#eeffff'}).animate({backgroundColor: '#cceeff'});
}
}
function checkAndCreateTable(datestamp, date) {
if($("#"+datestamp).length > 0) {
return;
}
table = $('<table>').attr('id', datestamp);
tr = $('<tr>');
tr.append($('<th>').attr('colspan', '2').text(date));
for(i=0; i < 24; i++) {
tr.append($('<th>').text(i));
}
table.append(tr);
$("#wrap").append(table);
return;
}
function checkAndCreateTr(datestamp, datapoint) {
if($("#"+datestamp+"_"+datapoint).length > 0) {
return;
}
table = $("#"+datestamp);
last_tr = $("#"+datestamp+">tbody>tr:last");
last_class = last_tr.attr('class');
if(last_class == 'odd') {
new_class = 'even';
} else {
new_class = 'odd';
}
tr = $('<tr>').attr('id', datestamp+"_"+datapoint).attr('class', class);
tr.append($('<td>').attr('id', datestamp+"_"+datapoint+"_name").text(datapoint));
tr.append($('<td>').attr('id', datestamp+"_"+datapoint+"_total"));
for(i=0; i < 24; i++) {
tr.append($('<td>').attr('id', datestamp+"_"+datapoint+"_"+i));
}
table.append(tr);
return;
}
</script>
<style>
h2 {
text-align: center;
}
table {
margin: 0 auto;
}
tr.odd {
background-color: #eeffff;
}
tr.even {
background-color: #cceeff;
}
td {
padding: 10px;
font-size: 0.9em;
}
th {
border-bottom: 3px #000 solid;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<script type="text/javascript">
var token = "{{ channel_id }}";
var channel = new goog.appengine.Channel(token);
var socket = channel.open();
socket.onmessage = function(evt) {
console.log(evt.data);
message = JSON.parse(evt.data);
for(x = 0; x < message.stats.length; x++)
addOrUpdate(message.stats[x].datestamp, message.stats[x].date, message.stats[x].datapoint, message.stats[x].hour, message.stats[x].value);
}
</script>
<div id="wrap">
{% for date in stats.values|dictsortreversed:"datestamp" %}
<table id="{{ date.datestamp }}">
<tr>
<th colspan="2">{{ date.date|date:"D, M d y" }}</th>
<th>0</th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
<th>8</th>
<th>9</th>
<th>10</th>
<th>11</th>
<th>12</th>
<th>13</th>
<th>14</th>
<th>15</th>
<th>16</th>
<th>17</th>
<th>18</th>
<th>19</th>
<th>20</th>
<th>21</th>
<th>22</th>
<th>23</th>
</tr>
{% for datapoint in date.datapoints.values|dictsort:"datapoint" %}
<tr class="{% cycle odd,even %}" id="{{ date.datestamp }}_{{ datapoint.datapoint }}">
<td id="{{ date.datestamp }}_{{ datapoint.datapoint }}_name">{{ datapoint.datapoint }}</td>
<td id="{{ date.datestamp }}_{{ datapoint.datapoint }}_total">{{ datapoint.values.total.count }}</td>
<td id="{{ date.datestamp }}_{{ datapoint.datapoint }}_0">{{ datapoint.values.0.count }}</td>
<td id="{{ date.datestamp }}_{{ datapoint.datapoint }}_1">{{ datapoint.values.1.count }}</td>
<td id="{{ date.datestamp }}_{{ datapoint.datapoint }}_2">{{ datapoint.values.2.count }}</td>
<td id="{{ date.datestamp }}_{{ datapoint.datapoint }}_3">{{ datapoint.values.3.count }}</td>
<td id="{{ date.datestamp }}_{{ datapoint.datapoint }}_4">{{ datapoint.values.4.count }}</td>
<td id="{{ date.datestamp }}_{{ datapoint.datapoint }}_5">{{ datapoint.values.5.count }}</td>
<td id="{{ date.datestamp }}_{{ datapoint.datapoint }}_6">{{ datapoint.values.6.count }}</td>
<td id="{{ date.datestamp }}_{{ datapoint.datapoint }}_7">{{ datapoint.values.7.count }}</td>
<td id="{{ date.datestamp }}_{{ datapoint.datapoint }}_8">{{ datapoint.values.8.count }}</td>
<td id="{{ date.datestamp }}_{{ datapoint.datapoint }}_9">{{ datapoint.values.9.count }}</td>
<td id="{{ date.datestamp }}_{{ datapoint.datapoint }}_10">{{ datapoint.values.10.count }}</td>
<td id="{{ date.datestamp }}_{{ datapoint.datapoint }}_11">{{ datapoint.values.11.count }}</td>
<td id="{{ date.datestamp }}_{{ datapoint.datapoint }}_12">{{ datapoint.values.12.count }}</td>
<td id="{{ date.datestamp }}_{{ datapoint.datapoint }}_13">{{ datapoint.values.13.count }}</td>
<td id="{{ date.datestamp }}_{{ datapoint.datapoint }}_14">{{ datapoint.values.14.count }}</td>
<td id="{{ date.datestamp }}_{{ datapoint.datapoint }}_15">{{ datapoint.values.15.count }}</td>
<td id="{{ date.datestamp }}_{{ datapoint.datapoint }}_16">{{ datapoint.values.16.count }}</td>
<td id="{{ date.datestamp }}_{{ datapoint.datapoint }}_17">{{ datapoint.values.17.count }}</td>
<td id="{{ date.datestamp }}_{{ datapoint.datapoint }}_18">{{ datapoint.values.18.count }}</td>
<td id="{{ date.datestamp }}_{{ datapoint.datapoint }}_19">{{ datapoint.values.19.count }}</td>
<td id="{{ date.datestamp }}_{{ datapoint.datapoint }}_20">{{ datapoint.values.20.count }}</td>
<td id="{{ date.datestamp }}_{{ datapoint.datapoint }}_21">{{ datapoint.values.21.count }}</td>
<td id="{{ date.datestamp }}_{{ datapoint.datapoint }}_22">{{ datapoint.values.22.count }}</td>
<td id="{{ date.datestamp }}_{{ datapoint.datapoint }}_23">{{ datapoint.values.23.count }}</td>
</tr>{% endfor %}
</table><br />
{% endfor %}</div>
</body>
</html>