... | ... |
@@ -231,6 +231,7 @@ function main() { |
231 | 231 |
initializeDateSelector(); |
232 | 232 |
getNodeData(); |
233 | 233 |
getNodeCharts(); |
234 |
+ setInterval(getNodeData, 10000); |
|
234 | 235 |
} |
235 | 236 |
|
236 | 237 |
function getNodeData() { |
... | ... |
@@ -292,23 +293,19 @@ function displayData(dataItem) { |
292 | 293 |
statusElmt.innerHTML = "Online"; |
293 | 294 |
statusElmt.style.color = "green"; |
294 | 295 |
|
295 |
- chartUpdateInterval = dataItem.chartUpdateInterval; |
|
296 |
- dataRequestInterval = dataItem.dataRequestInterval; |
|
296 |
+ chartUpdateInterval = dataItem.chartUpdateInterval; |
|
297 | 297 |
periodElmt.innerHTML = chartUpdateInterval / 60; |
298 |
- setInterval(getNodeData, 1000 * dataRequestInterval); |
|
299 | 298 |
setInterval(getNodeCharts, 1000 * chartUpdateInterval); |
300 | 299 |
} |
301 | 300 |
|
302 | 301 |
function displayOfflineStatus() { |
302 |
+ var localTimeZone; |
|
303 | 303 |
var d = new Date(); |
304 |
- localTimeZone = d.getTimezoneOffset() / 60; |
|
305 |
- dateElmt.innerHTML = (d.getMonth() + 1) + "/" + d.getDate() + "/" + |
|
306 |
- d.getFullYear(); |
|
307 |
- timeElmt.innerHTML = d.getHours() + ":" + d.getMinutes() + |
|
308 |
- " <small>(GMT+" + localTimeZone + ")</small>"; |
|
309 |
- periodElmt.innerHTML = "?"; |
|
304 |
+ |
|
310 | 305 |
statusElmt.innerHTML = "offline"; |
311 | 306 |
statusElmt.style.color = "red"; |
307 |
+ |
|
308 |
+ periodElmt.innerHTML = "?"; |
|
312 | 309 |
} |
313 | 310 |
|
314 | 311 |
function initializeDateSelector() { |
1 | 1 |
old mode 100644 |
2 | 2 |
new mode 100755 |
... | ... |
@@ -125,8 +125,9 @@ Charts update every: <span id="period"></span> minutes |
125 | 125 |
onclick="setChartPeriod(2)">4 weeks</span></li> |
126 | 126 |
<li class="selectorElement"><span class="selectorElement" |
127 | 127 |
onclick="setChartPeriod(3)">12 months</span></li> |
128 |
-<li class="selectorElement"><span class="selectorElement" |
|
129 |
- onclick="setChartPeriod(0)">Custom…</span></li> |
|
128 |
+<li id="customSelector" class="selectorElement" style="visibility:hidden;"> |
|
129 |
+<span class="selectorElement" |
|
130 |
+ onclick="setChartPeriod(0)">Custom...</span></li> |
|
130 | 131 |
</ul> |
131 | 132 |
</span> |
132 | 133 |
|
... | ... |
@@ -177,10 +178,10 @@ www.arednmesh.org</a>.</li> |
177 | 178 |
<br> |
178 | 179 |
|
179 | 180 |
<script> |
180 |
- |
|
181 |
+"use strict"; |
|
181 | 182 |
/* Global constants */ |
182 | 183 |
|
183 |
-var nodeDataUrl = "dynamic/nodeOnline.js"; |
|
184 |
+var nodeDataUrl = "dynamic/arednsigData.js"; |
|
184 | 185 |
|
185 | 186 |
/* Global DOM objects */ |
186 | 187 |
|
... | ... |
@@ -199,6 +200,7 @@ var customChartsContainer = document.getElementById("customChartsContainer"); |
199 | 200 |
var stockChartsContainer = document.getElementById("stockChartsContainer"); |
200 | 201 |
var fmDateSelector = document.getElementById("fmDateSelector"); |
201 | 202 |
var errorMsg = document.getElementById("errorMsg"); |
203 |
+var customSelector = document.getElementById("customSelector"); |
|
202 | 204 |
|
203 | 205 |
/* Global objects */ |
204 | 206 |
|
... | ... |
@@ -207,9 +209,12 @@ var httpRequest = new XMLHttpRequest(); |
207 | 209 |
/* Global variables */ |
208 | 210 |
|
209 | 211 |
var chartPeriod = 1; |
210 |
-var chartRefreshRate = 0; // chart refresh rate in minutes |
|
212 |
+var chartUpdateInterval; // chart refresh rate in seconds |
|
213 |
+var dataRequestInterval; // data request interval in seconds |
|
211 | 214 |
|
212 | 215 |
function main() { |
216 |
+ httpRequest.timeout = 3000; |
|
217 |
+ |
|
213 | 218 |
/* Register call back function to process http requests */ |
214 | 219 |
httpRequest.onreadystatechange = function() { |
215 | 220 |
if (httpRequest.readyState == 4 && httpRequest.status == 200) { |
... | ... |
@@ -229,8 +234,7 @@ function main() { |
229 | 234 |
} |
230 | 235 |
|
231 | 236 |
function getNodeData() { |
232 |
- httpRequest.open("GET", nodeDataUrl, true); |
|
233 |
- httpRequest.timeout = 3000; |
|
237 |
+ httpRequest.open("POST", nodeDataUrl, true); |
|
234 | 238 |
httpRequest.send(); |
235 | 239 |
} |
236 | 240 |
|
... | ... |
@@ -242,7 +246,7 @@ function setChartPeriod(n) { |
242 | 246 |
} else { |
243 | 247 |
customChartsContainer.style.display = "none"; |
244 | 248 |
stockChartsContainer.style.display = "block"; |
245 |
- getNodeCharts(); |
|
249 |
+ getNodeCharts(); |
|
246 | 250 |
} |
247 | 251 |
} |
248 | 252 |
|
... | ... |
@@ -267,7 +271,13 @@ function getNodeCharts() { |
267 | 271 |
|
268 | 272 |
function displayData(dataItem) { |
269 | 273 |
var timeStamp, date, time, hourminute; |
270 |
- var localDateObj,localTimeZone; |
|
274 |
+ var localDate,localTimeZone; |
|
275 |
+ |
|
276 |
+ // Custom charts can only be generated by the local server, i.e, |
|
277 |
+ // with access to rrdtool database. |
|
278 |
+ if (dataItem.serverMode == "primary") { |
|
279 |
+ customSelector.style.visibility = "visible"; |
|
280 |
+ } |
|
271 | 281 |
|
272 | 282 |
timeStamp = dataItem.date; |
273 | 283 |
date = timeStamp.split(" ")[0]; |
... | ... |
@@ -282,10 +292,11 @@ function displayData(dataItem) { |
282 | 292 |
statusElmt.innerHTML = "Online"; |
283 | 293 |
statusElmt.style.color = "green"; |
284 | 294 |
|
285 |
- chartRefreshRate = dataItem.period; |
|
286 |
- periodElmt.innerHTML = chartRefreshRate / 60; |
|
287 |
- setInterval(getNodeData, 1000 * chartRefreshRate); |
|
288 |
- setInterval(getNodeCharts, 1000 * chartRefreshRate); |
|
295 |
+ chartUpdateInterval = dataItem.chartUpdateInterval; |
|
296 |
+ dataRequestInterval = dataItem.dataRequestInterval; |
|
297 |
+ periodElmt.innerHTML = chartUpdateInterval / 60; |
|
298 |
+ setInterval(getNodeData, 1000 * dataRequestInterval); |
|
299 |
+ setInterval(getNodeCharts, 1000 * chartUpdateInterval); |
|
289 | 300 |
} |
290 | 301 |
|
291 | 302 |
function displayOfflineStatus() { |
1 | 1 |
new file mode 100644 |
... | ... |
@@ -0,0 +1,323 @@ |
1 |
+<!DOCTYPE html> |
|
2 |
+<!-- Courtesy ruler for editing this file |
|
3 |
+12345678901234567890123456789012345678901234567890123456789012345678901234567890 |
|
4 |
+--> |
|
5 |
+<html> |
|
6 |
+<head> |
|
7 |
+<title>AREDN Node - Signal Status</title> |
|
8 |
+<meta charset="UTF-8"> |
|
9 |
+<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
10 |
+<style> |
|
11 |
+body { |
|
12 |
+ background-image: url("static/chalk.jpg"); |
|
13 |
+} |
|
14 |
+h2 { |
|
15 |
+ font: bold 24px arial, sans-serif; |
|
16 |
+} |
|
17 |
+h3 { |
|
18 |
+ font: bold 18px arial, sans-serif; |
|
19 |
+} |
|
20 |
+h4 { |
|
21 |
+ font: bold 16px arial, sans-serif; |
|
22 |
+} |
|
23 |
+.mainContainer { |
|
24 |
+ width: 750px; |
|
25 |
+ text-align: center; |
|
26 |
+ margin: auto; |
|
27 |
+ /*border: 1px solid black;*/ |
|
28 |
+} |
|
29 |
+.datetime { |
|
30 |
+ font: bold 22px arial, sans-serif; |
|
31 |
+ padding: 0px; |
|
32 |
+} |
|
33 |
+.rowContainer { |
|
34 |
+ display: table; |
|
35 |
+ width: 100%; |
|
36 |
+} |
|
37 |
+.currentDataCell { |
|
38 |
+ width: 50%; |
|
39 |
+ padding: 10px; |
|
40 |
+ font: bold 20px arial, sans-serif; |
|
41 |
+ text-align: center; |
|
42 |
+ display: table-cell; |
|
43 |
+ vertical-align: middle; |
|
44 |
+} |
|
45 |
+.dataItems { |
|
46 |
+ padding: 2px; |
|
47 |
+ text-align: left; |
|
48 |
+ line-height: 130%; |
|
49 |
+ display: inline-block; |
|
50 |
+ vertical-align: middle; |
|
51 |
+} |
|
52 |
+.chartContainer { |
|
53 |
+ padding: 2px; |
|
54 |
+} |
|
55 |
+img.chart { |
|
56 |
+ width:100%; |
|
57 |
+} |
|
58 |
+.notes { |
|
59 |
+ font: 17px arial, sans-serif; |
|
60 |
+ text-align: left; |
|
61 |
+ padding: 10px; |
|
62 |
+} |
|
63 |
+span.chartSelector { |
|
64 |
+ margin: auto; |
|
65 |
+} |
|
66 |
+ul.selectorElement { |
|
67 |
+ list-style-type: none; |
|
68 |
+ margin: 10px; |
|
69 |
+ padding: 0; |
|
70 |
+ overflow: hidden; |
|
71 |
+ background-color: #bbb; |
|
72 |
+ text-align: center; |
|
73 |
+} |
|
74 |
+li.selectorElement { |
|
75 |
+ display: inline-block; |
|
76 |
+ font: bold 18px arial, sans-serif; |
|
77 |
+ color: black; |
|
78 |
+} |
|
79 |
+span.selectorElement:hover { |
|
80 |
+ background-color: #333; |
|
81 |
+ cursor: pointer; |
|
82 |
+ color: white; |
|
83 |
+} |
|
84 |
+span.selectorElement { |
|
85 |
+ display: inline-block; |
|
86 |
+ padding: 8px 12px; |
|
87 |
+} |
|
88 |
+#iframe_a { |
|
89 |
+ border:none; |
|
90 |
+ width:100%; |
|
91 |
+ height:450px; |
|
92 |
+} |
|
93 |
+</style> |
|
94 |
+</head> |
|
95 |
+ |
|
96 |
+<body onload="main()"> |
|
97 |
+ |
|
98 |
+<div class="mainContainer"> |
|
99 |
+<h2><a href="https://github.com/fractalxaos/ham/tree/master/arednsig" |
|
100 |
+ style="text-decoration:none" target="_new"> |
|
101 |
+AREDN<sup>®</sup> Node Signal</a></h2> |
|
102 |
+<h3>Last Updated</h3> |
|
103 |
+<div class="datetime"> |
|
104 |
+<span id="date"></span> |
|
105 |
+ |
|
106 |
+<span id="time"></span> |
|
107 |
+</div> |
|
108 |
+ |
|
109 |
+<div class="rowContainer"> |
|
110 |
+<div class="currentDataCell"> |
|
111 |
+<div class="dataItems" style="text-align: center;"> |
|
112 |
+Status: <span id="status"></span><br> |
|
113 |
+Charts update every: <span id="period"></span> minutes |
|
114 |
+</div> |
|
115 |
+ |
|
116 |
+</div> |
|
117 |
+</div> |
|
118 |
+ |
|
119 |
+<span class="chartSelectors"> |
|
120 |
+<ul class="selectorElement"> |
|
121 |
+<li class="selectorElement">Select charts:</li> |
|
122 |
+<li class="selectorElement"><span class="selectorElement" |
|
123 |
+ onclick="setChartPeriod(1)">24 hours</span></li> |
|
124 |
+<li class="selectorElement"><span class="selectorElement" |
|
125 |
+ onclick="setChartPeriod(2)">4 weeks</span></li> |
|
126 |
+<li class="selectorElement"><span class="selectorElement" |
|
127 |
+ onclick="setChartPeriod(3)">12 months</span></li> |
|
128 |
+<li class="selectorElement"><span class="selectorElement" |
|
129 |
+ onclick="setChartPeriod(0)">Custom…</span></li> |
|
130 |
+</ul> |
|
131 |
+</span> |
|
132 |
+ |
|
133 |
+<div class="rowContainer" id="customChartsContainer" style="display:none;"> |
|
134 |
+<div class="currentDataCell"> |
|
135 |
+<form id="fmDateSelector" action="arednsig.php" method="post" |
|
136 |
+ target="iframe_a"> |
|
137 |
+<label for="beginDate">Begin Date: </label> |
|
138 |
+<input id="beginDate" name="beginDate" type="date" value="mm/dd/yyyy" /> |
|
139 |
+<label for="endDate">End Date: </label> |
|
140 |
+<input id="endDate" name="endDate" type="date" value="mm/dd/yyyy" /> |
|
141 |
+<br><br> |
|
142 |
+<input type="button" onclick="getCustomCharts()" value="Get Charts"> |
|
143 |
+</form> |
|
144 |
+<span id="errorMsg"></span><br> |
|
145 |
+<iframe id="iframe_a" name="iframe_a"></iframe> |
|
146 |
+</div> |
|
147 |
+</div> |
|
148 |
+ |
|
149 |
+<br> |
|
150 |
+ |
|
151 |
+<div class="rowContainer" id="stockChartsContainer"> |
|
152 |
+<div class="chartContainer"> |
|
153 |
+<img class="chart" id="signalChart"> |
|
154 |
+</div> |
|
155 |
+<div class="chartContainer"> |
|
156 |
+<img class="chart" id="snrChart"> |
|
157 |
+</div> |
|
158 |
+</div> |
|
159 |
+ |
|
160 |
+<div class="notes"> |
|
161 |
+<b>NOTES:</b> |
|
162 |
+<ul> |
|
163 |
+<li>Aredn Node Signal software available at |
|
164 |
+<a href="https://github.com/fractalxaos/ham/tree/master/arednsig" |
|
165 |
+ target="_new"> |
|
166 |
+<i>Github.com</i></a>.</li> |
|
167 |
+<li>Project sponsored by |
|
168 |
+<a href="https://willamettevalleymesh.net" TARGET="_NEW"> |
|
169 |
+<i>Willamette Valley Mesh Network</i></a>, Salem, Oregon.</li> |
|
170 |
+<li>For more information about the amateur radio emergency |
|
171 |
+ data network (AREDN) see official web site at |
|
172 |
+ <a href="http://www.arednmesh.org" target="_blank"> |
|
173 |
+www.arednmesh.org</a>.</li> |
|
174 |
+</ul> |
|
175 |
+</div> |
|
176 |
+</div> |
|
177 |
+<br> |
|
178 |
+ |
|
179 |
+<script> |
|
180 |
+ |
|
181 |
+/* Global constants */ |
|
182 |
+ |
|
183 |
+var nodeDataUrl = "dynamic/nodeOnline.js"; |
|
184 |
+ |
|
185 |
+/* Global DOM objects */ |
|
186 |
+ |
|
187 |
+// Chart elements |
|
188 |
+var signalChart = document.getElementById("signalChart"); |
|
189 |
+var snrChart = document.getElementById("snrChart"); |
|
190 |
+ |
|
191 |
+// Text elements |
|
192 |
+var dateElmt = document.getElementById("date"); |
|
193 |
+var timeElmt = document.getElementById("time"); |
|
194 |
+var statusElmt = document.getElementById("status"); |
|
195 |
+var periodElmt = document.getElementById("period"); |
|
196 |
+ |
|
197 |
+// Document elements |
|
198 |
+var customChartsContainer = document.getElementById("customChartsContainer"); |
|
199 |
+var stockChartsContainer = document.getElementById("stockChartsContainer"); |
|
200 |
+var fmDateSelector = document.getElementById("fmDateSelector"); |
|
201 |
+var errorMsg = document.getElementById("errorMsg"); |
|
202 |
+ |
|
203 |
+/* Global objects */ |
|
204 |
+ |
|
205 |
+var httpRequest = new XMLHttpRequest(); |
|
206 |
+ |
|
207 |
+/* Global variables */ |
|
208 |
+ |
|
209 |
+var chartPeriod = 1; |
|
210 |
+var chartRefreshRate = 0; // chart refresh rate in minutes |
|
211 |
+ |
|
212 |
+function main() { |
|
213 |
+ /* Register call back function to process http requests */ |
|
214 |
+ httpRequest.onreadystatechange = function() { |
|
215 |
+ if (httpRequest.readyState == 4 && httpRequest.status == 200) { |
|
216 |
+ var dataArray = JSON.parse(httpRequest.responseText); |
|
217 |
+ displayData(dataArray[0]); |
|
218 |
+ } else if (httpRequest.readyState == 4 && httpRequest.status == 404) { |
|
219 |
+ displayOfflineStatus(); |
|
220 |
+ } |
|
221 |
+ }; |
|
222 |
+ httpRequest.ontimeout = function(e) { |
|
223 |
+ displayOfflineStatus(); |
|
224 |
+ }; |
|
225 |
+ |
|
226 |
+ initializeDateSelector(); |
|
227 |
+ getNodeData(); |
|
228 |
+ getNodeCharts(); |
|
229 |
+} |
|
230 |
+ |
|
231 |
+function getNodeData() { |
|
232 |
+ httpRequest.open("GET", nodeDataUrl, true); |
|
233 |
+ httpRequest.timeout = 3000; |
|
234 |
+ httpRequest.send(); |
|
235 |
+} |
|
236 |
+ |
|
237 |
+function setChartPeriod(n) { |
|
238 |
+ chartPeriod = n; |
|
239 |
+ if (n == 0) { |
|
240 |
+ customChartsContainer.style.display = "block"; |
|
241 |
+ stockChartsContainer.style.display = "none"; |
|
242 |
+ } else { |
|
243 |
+ customChartsContainer.style.display = "none"; |
|
244 |
+ stockChartsContainer.style.display = "block"; |
|
245 |
+ getNodeCharts(); |
|
246 |
+ } |
|
247 |
+} |
|
248 |
+ |
|
249 |
+function getNodeCharts() { |
|
250 |
+ var d = new Date; |
|
251 |
+ var pfx; |
|
252 |
+ |
|
253 |
+ switch(chartPeriod) { |
|
254 |
+ case 1: |
|
255 |
+ pfx = "24hr_"; |
|
256 |
+ break; |
|
257 |
+ case 2: |
|
258 |
+ pfx = "4wk_"; |
|
259 |
+ break; |
|
260 |
+ case 3: |
|
261 |
+ pfx = "12m_"; |
|
262 |
+ break; |
|
263 |
+ } |
|
264 |
+ signalChart.src = "dynamic/" + pfx + "signal.png?ver=" + d.getTime(); |
|
265 |
+ snrChart.src = "dynamic/" + pfx + "snr.png?ver=" + d.getTime(); |
|
266 |
+} |
|
267 |
+ |
|
268 |
+function displayData(dataItem) { |
|
269 |
+ var timeStamp, date, time, hourminute; |
|
270 |
+ var localDateObj,localTimeZone; |
|
271 |
+ |
|
272 |
+ timeStamp = dataItem.date; |
|
273 |
+ date = timeStamp.split(" ")[0]; |
|
274 |
+ time = timeStamp.split(" ")[1]; |
|
275 |
+ hourminute = time.split(":")[0] + ":" + time.split(":")[1]; |
|
276 |
+ localDate = new Date(); |
|
277 |
+ localTimeZone = localDate.getTimezoneOffset() / 60; |
|
278 |
+ dateElmt.innerHTML = date; |
|
279 |
+ timeElmt.innerHTML = hourminute + |
|
280 |
+ " <small>(GMT+" + localTimeZone + ")</small>"; |
|
281 |
+ |
|
282 |
+ statusElmt.innerHTML = "Online"; |
|
283 |
+ statusElmt.style.color = "green"; |
|
284 |
+ |
|
285 |
+ chartRefreshRate = dataItem.period; |
|
286 |
+ periodElmt.innerHTML = chartRefreshRate / 60; |
|
287 |
+ setInterval(getNodeData, 1000 * chartRefreshRate); |
|
288 |
+ setInterval(getNodeCharts, 1000 * chartRefreshRate); |
|
289 |
+} |
|
290 |
+ |
|
291 |
+function displayOfflineStatus() { |
|
292 |
+ var d = new Date(); |
|
293 |
+ localTimeZone = d.getTimezoneOffset() / 60; |
|
294 |
+ dateElmt.innerHTML = (d.getMonth() + 1) + "/" + d.getDate() + "/" + |
|
295 |
+ d.getFullYear(); |
|
296 |
+ timeElmt.innerHTML = d.getHours() + ":" + d.getMinutes() + |
|
297 |
+ " <small>(GMT+" + localTimeZone + ")</small>"; |
|
298 |
+ periodElmt.innerHTML = "?"; |
|
299 |
+ statusElmt.innerHTML = "offline"; |
|
300 |
+ statusElmt.style.color = "red"; |
|
301 |
+} |
|
302 |
+ |
|
303 |
+function initializeDateSelector() { |
|
304 |
+ var d = new Date(); |
|
305 |
+ |
|
306 |
+ var dEnd = new Date(d.getFullYear(), |
|
307 |
+ d.getMonth(), d.getDate() - 0); |
|
308 |
+ |
|
309 |
+ var dBegin = new Date(d.getFullYear(), |
|
310 |
+ d.getMonth(), d.getDate() - 1); |
|
311 |
+ |
|
312 |
+ document.getElementById("beginDate").valueAsDate = dBegin; |
|
313 |
+ document.getElementById("endDate").valueAsDate = dEnd; |
|
314 |
+} |
|
315 |
+ |
|
316 |
+function getCustomCharts() { |
|
317 |
+ fmDateSelector.submit(); |
|
318 |
+} |
|
319 |
+</script> |
|
320 |
+ |
|
321 |
+</body> |
|
322 |
+</html> |
|
323 |
+ |
1 | 1 |
deleted file mode 100644 |
... | ... |
@@ -1,323 +0,0 @@ |
1 |
-<!DOCTYPE html> |
|
2 |
-<!-- Courtesy ruler for editing this file |
|
3 |
-12345678901234567890123456789012345678901234567890123456789012345678901234567890 |
|
4 |
-<html> |
|
5 |
-<head> |
|
6 |
-<title>Node Signal</title> |
|
7 |
-<meta charset="UTF-8"> |
|
8 |
-<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
9 |
-<style> |
|
10 |
-body { |
|
11 |
- background-image: url("static/chalk.jpg"); |
|
12 |
-} |
|
13 |
-h2 { |
|
14 |
- font: bold 24px arial, sans-serif; |
|
15 |
-} |
|
16 |
-h3 { |
|
17 |
- font: bold 18px arial, sans-serif; |
|
18 |
-} |
|
19 |
-h4 { |
|
20 |
- font: bold 16px arial, sans-serif; |
|
21 |
-} |
|
22 |
-.mainContainer { |
|
23 |
- width: 750px; |
|
24 |
- text-align: center; |
|
25 |
- margin: auto; |
|
26 |
- /*border: 1px solid black;*/ |
|
27 |
-} |
|
28 |
-.datetime { |
|
29 |
- font: bold 22px arial, sans-serif; |
|
30 |
- padding: 0px; |
|
31 |
-} |
|
32 |
-.rowContainer { |
|
33 |
- display: table; |
|
34 |
- width: 100%; |
|
35 |
-} |
|
36 |
-.currentDataCell { |
|
37 |
- width: 50%; |
|
38 |
- padding: 10px; |
|
39 |
- font: bold 20px arial, sans-serif; |
|
40 |
- text-align: center; |
|
41 |
- display: table-cell; |
|
42 |
- vertical-align: middle; |
|
43 |
-} |
|
44 |
-.dataItems { |
|
45 |
- padding: 2px; |
|
46 |
- text-align: left; |
|
47 |
- line-height: 130%; |
|
48 |
- display: inline-block; |
|
49 |
- vertical-align: middle; |
|
50 |
-} |
|
51 |
-.chartContainer { |
|
52 |
- padding: 2px; |
|
53 |
-} |
|
54 |
-img.chart { |
|
55 |
- width:100%; |
|
56 |
-} |
|
57 |
-.notes { |
|
58 |
- font: 17px arial, sans-serif; |
|
59 |
- text-align: left; |
|
60 |
- padding: 10px; |
|
61 |
-} |
|
62 |
-span.chartSelector { |
|
63 |
- margin: auto; |
|
64 |
-} |
|
65 |
-ul.selectorElement { |
|
66 |
- list-style-type: none; |
|
67 |
- margin: 10px; |
|
68 |
- padding: 0; |
|
69 |
- overflow: hidden; |
|
70 |
- background-color: #bbb; |
|
71 |
- text-align: center; |
|
72 |
-} |
|
73 |
-li.selectorElement { |
|
74 |
- display: inline-block; |
|
75 |
- font: bold 18px arial, sans-serif; |
|
76 |
- color: black; |
|
77 |
-} |
|
78 |
-span.selectorElement:hover { |
|
79 |
- background-color: #333; |
|
80 |
- cursor: pointer; |
|
81 |
- color: white; |
|
82 |
-} |
|
83 |
-span.selectorElement { |
|
84 |
- display: inline-block; |
|
85 |
- padding: 8px 12px; |
|
86 |
-} |
|
87 |
-#iframe_a { |
|
88 |
- border:none; |
|
89 |
- width:100%; |
|
90 |
- height:450px; |
|
91 |
-} |
|
92 |
-</style> |
|
93 |
-</head> |
|
94 |
- |
|
95 |
-<body onload="main()"> |
|
96 |
- |
|
97 |
-<div class="mainContainer"> |
|
98 |
-<h2><a href="https://github.com/fractalxaos/ham/tree/master/arednsig" |
|
99 |
- style="text-decoration:none" target="_new"> |
|
100 |
-KA7JLO AREDN<sup>®</sup> Node Signal</a></h2> |
|
101 |
-<h3>Last Updated</h3> |
|
102 |
-<div class="datetime"> |
|
103 |
-<span id="date"></span> |
|
104 |
- |
|
105 |
-<span id="time"></span> |
|
106 |
-</div> |
|
107 |
- |
|
108 |
-<div class="rowContainer"> |
|
109 |
-<div class="currentDataCell"> |
|
110 |
-<div class="dataItems" style="text-align: center;"> |
|
111 |
-Status: <span id="status"></span><br> |
|
112 |
-Data updates every: <span id="period"></span> minutes |
|
113 |
-</div> |
|
114 |
- |
|
115 |
-</div> |
|
116 |
-</div> |
|
117 |
- |
|
118 |
-<span class="chartSelectors"> |
|
119 |
-<ul class="selectorElement"> |
|
120 |
-<li class="selectorElement">Select charts:</li> |
|
121 |
-<li class="selectorElement"><span class="selectorElement" |
|
122 |
- onclick="setChartPeriod(1)">24 hours</span></li> |
|
123 |
-<li class="selectorElement"><span class="selectorElement" |
|
124 |
- onclick="setChartPeriod(2)">4 weeks</span></li> |
|
125 |
-<li class="selectorElement"><span class="selectorElement" |
|
126 |
- onclick="setChartPeriod(3)">12 months</span></li> |
|
127 |
-<li class="selectorElement"><span class="selectorElement" |
|
128 |
- onclick="setChartPeriod(0)">Custom…</span></li> |
|
129 |
-</ul> |
|
130 |
-</span> |
|
131 |
- |
|
132 |
-<div class="rowContainer" id="customChartsContainer" style="display:none;"> |
|
133 |
-<div class="currentDataCell"> |
|
134 |
-<form id="fmDateSelector" action="arednsig.php" method="post" |
|
135 |
- target="iframe_a"> |
|
136 |
-<label for="beginDate">Begin Date: </label> |
|
137 |
-<input id="beginDate" name="beginDate" type="date" value="mm/dd/yyyy" /> |
|
138 |
-<label for="endDate">End Date: </label> |
|
139 |
-<input id="endDate" name="endDate" type="date" value="mm/dd/yyyy" /> |
|
140 |
-<br><br> |
|
141 |
-<input type="button" onclick="getCustomCharts()" value="Get Charts"> |
|
142 |
-</form> |
|
143 |
-<span id="errorMsg"></span><br> |
|
144 |
-<iframe id="iframe_a" name="iframe_a"></iframe> |
|
145 |
-</div> |
|
146 |
-</div> |
|
147 |
- |
|
148 |
-<br> |
|
149 |
- |
|
150 |
-<div class="rowContainer" id="stockChartsContainer"> |
|
151 |
-<div class="chartContainer"> |
|
152 |
-<img class="chart" id="signalChart"> |
|
153 |
-</div> |
|
154 |
-<div class="chartContainer"> |
|
155 |
-<img class="chart" id="snrChart"> |
|
156 |
-</div> |
|
157 |
-</div> |
|
158 |
- |
|
159 |
-<div class="notes"> |
|
160 |
-<b>NOTES:</b> |
|
161 |
-<ul> |
|
162 |
-<li>Aredn Node Signal software available at |
|
163 |
-<a href="https://github.com/fractalxaos/ham/tree/master/arednsig" |
|
164 |
- target="_new"> |
|
165 |
-<i>Github.com</i></a>.</li> |
|
166 |
-<li>Project sponsored by |
|
167 |
-<a href="https://willamettevalleymesh.net" TARGET="_NEW"> |
|
168 |
-<i>Willamette Valley Mesh Network</i></a>, Salem, Oregon.</li> |
|
169 |
-<li>For more information about the amateur radio emergency |
|
170 |
- data network (AREDN) see official web site at |
|
171 |
- <a href="http://www.arednmesh.org" target="_blank"> |
|
172 |
-www.arednmesh.org</a>.</li> |
|
173 |
-</ul> |
|
174 |
-</div> |
|
175 |
-</div> |
|
176 |
-<br> |
|
177 |
- |
|
178 |
-<script> |
|
179 |
- |
|
180 |
-/* Global constants */ |
|
181 |
- |
|
182 |
-var nodeDataUrl = "dynamic/nodeOnline.js"; |
|
183 |
- |
|
184 |
-/* Global DOM objects */ |
|
185 |
- |
|
186 |
-// Chart elements |
|
187 |
-var signalChart = document.getElementById("signalChart"); |
|
188 |
-var snrChart = document.getElementById("snrChart"); |
|
189 |
- |
|
190 |
-// Text elements |
|
191 |
-var dateElmt = document.getElementById("date"); |
|
192 |
-var timeElmt = document.getElementById("time"); |
|
193 |
-var statusElmt = document.getElementById("status"); |
|
194 |
-var periodElmt = document.getElementById("period"); |
|
195 |
- |
|
196 |
-// Document elements |
|
197 |
-var customChartsContainer = document.getElementById("customChartsContainer"); |
|
198 |
-var stockChartsContainer = document.getElementById("stockChartsContainer"); |
|
199 |
-var fmDateSelector = document.getElementById("fmDateSelector"); |
|
200 |
-var errorMsg = document.getElementById("errorMsg"); |
|
201 |
- |
|
202 |
-/* Global objects */ |
|
203 |
- |
|
204 |
-var httpRequest = new XMLHttpRequest(); |
|
205 |
- |
|
206 |
-/* Global variables */ |
|
207 |
- |
|
208 |
-var chartPeriod = 1; |
|
209 |
-var chartRefreshRate = 0; // chart refresh rate in minutes |
|
210 |
- |
|
211 |
-function main() { |
|
212 |
- /* Register call back function to process http requests */ |
|
213 |
- httpRequest.onreadystatechange = function() { |
|
214 |
- if (httpRequest.readyState == 4 && httpRequest.status == 200) { |
|
215 |
- var dataArray = JSON.parse(httpRequest.responseText); |
|
216 |
- displayData(dataArray[0]); |
|
217 |
- } else if (httpRequest.readyState == 4 && httpRequest.status == 404) { |
|
218 |
- displayOfflineStatus(); |
|
219 |
- } |
|
220 |
- }; |
|
221 |
- httpRequest.ontimeout = function(e) { |
|
222 |
- displayOfflineStatus(); |
|
223 |
- }; |
|
224 |
- |
|
225 |
- initializeDateSelector(); |
|
226 |
- getNodeData(); |
|
227 |
- getNodeCharts(); |
|
228 |
-} |
|
229 |
- |
|
230 |
-function getNodeData() { |
|
231 |
- httpRequest.open("GET", nodeDataUrl, true); |
|
232 |
- httpRequest.timeout = 3000; |
|
233 |
- httpRequest.send(); |
|
234 |
-} |
|
235 |
- |
|
236 |
-function setChartPeriod(n) { |
|
237 |
- chartPeriod = n; |
|
238 |
- if (n == 0) { |
|
239 |
- customChartsContainer.style.display = "block"; |
|
240 |
- stockChartsContainer.style.display = "none"; |
|
241 |
- } else { |
|
242 |
- customChartsContainer.style.display = "none"; |
|
243 |
- stockChartsContainer.style.display = "block"; |
|
244 |
- getNodeCharts(); |
|
245 |
- } |
|
246 |
-} |
|
247 |
- |
|
248 |
-function getNodeCharts() { |
|
249 |
- var d = new Date; |
|
250 |
- var pfx; |
|
251 |
- |
|
252 |
- switch(chartPeriod) { |
|
253 |
- case 1: |
|
254 |
- pfx = "24hr_"; |
|
255 |
- break; |
|
256 |
- case 2: |
|
257 |
- pfx = "4wk_"; |
|
258 |
- break; |
|
259 |
- case 3: |
|
260 |
- pfx = "12m_"; |
|
261 |
- break; |
|
262 |
- } |
|
263 |
- signalChart.src = "dynamic/" + pfx + "signal.png?ver=" + d.getTime(); |
|
264 |
- snrChart.src = "dynamic/" + pfx + "snr.png?ver=" + d.getTime(); |
|
265 |
-} |
|
266 |
- |
|
267 |
-function displayData(dataItem) { |
|
268 |
- var timeStamp, date, time, hourminute; |
|
269 |
- var localDateObj,localTimeZone; |
|
270 |
- |
|
271 |
- timeStamp = dataItem.date; |
|
272 |
- date = timeStamp.split(" ")[0]; |
|
273 |
- time = timeStamp.split(" ")[1]; |
|
274 |
- hourminute = time.split(":")[0] + ":" + time.split(":")[1]; |
|
275 |
- localDate = new Date(); |
|
276 |
- localTimeZone = localDate.getTimezoneOffset() / 60; |
|
277 |
- dateElmt.innerHTML = date; |
|
278 |
- timeElmt.innerHTML = hourminute + |
|
279 |
- " <small>(GMT+" + localTimeZone + ")</small>"; |
|
280 |
- |
|
281 |
- statusElmt.innerHTML = "Online"; |
|
282 |
- statusElmt.style.color = "green"; |
|
283 |
- |
|
284 |
- chartRefreshRate = dataItem.period; |
|
285 |
- periodElmt.innerHTML = chartRefreshRate; |
|
286 |
- setInterval(getNodeData, 60000 * chartRefreshRate); |
|
287 |
- setInterval(getNodeCharts, 60000 * chartRefreshRate); |
|
288 |
-} |
|
289 |
- |
|
290 |
-function displayOfflineStatus() { |
|
291 |
- var d = new Date(); |
|
292 |
- localTimeZone = d.getTimezoneOffset() / 60; |
|
293 |
- dateElmt.innerHTML = (d.getMonth() + 1) + "/" + d.getDate() + "/" + |
|
294 |
- d.getFullYear(); |
|
295 |
- timeElmt.innerHTML = d.getHours() + ":" + d.getMinutes() + |
|
296 |
- " <small>(GMT+" + localTimeZone + ")</small>"; |
|
297 |
- periodElmt.innerHTML = "?"; |
|
298 |
- statusElmt.innerHTML = "offline"; |
|
299 |
- statusElmt.style.color = "red"; |
|
300 |
-} |
|
301 |
- |
|
302 |
-function initializeDateSelector() { |
|
303 |
- var d = new Date(); |
|
304 |
- |
|
305 |
- var dEnd = new Date(d.getFullYear(), |
|
306 |
- d.getMonth(), d.getDate() - 0); |
|
307 |
- |
|
308 |
- var dBegin = new Date(d.getFullYear(), |
|
309 |
- d.getMonth(), d.getDate() - 1); |
|
310 |
- |
|
311 |
- document.getElementById("beginDate").valueAsDate = dBegin; |
|
312 |
- document.getElementById("endDate").valueAsDate = dEnd; |
|
313 |
-} |
|
314 |
- |
|
315 |
-function getCustomCharts() { |
|
316 |
- fmDateSelector.submit(); |
|
317 |
-} |
|
318 |
-</script> |
|
319 |
- |
|
320 |
-</body> |
|
321 |
-</html> |
|
322 |
- |
... | ... |
@@ -98,7 +98,7 @@ span.selectorElement { |
98 | 98 |
<div class="mainContainer"> |
99 | 99 |
<h2><a href="https://github.com/fractalxaos/ham/tree/master/arednsig" |
100 | 100 |
style="text-decoration:none" target="_new"> |
101 |
-KA7JLO Aredn Node Signal</a></h2> |
|
101 |
+KA7JLO AREDN<sup>®</sup> Node Signal</a></h2> |
|
102 | 102 |
<h3>Last Updated</h3> |
103 | 103 |
<div class="datetime"> |
104 | 104 |
<span id="date"></span> |
... | ... |
@@ -96,7 +96,7 @@ span.selectorElement { |
96 | 96 |
<body onload="main()"> |
97 | 97 |
|
98 | 98 |
<div class="mainContainer"> |
99 |
-<h2><a href="https://github.com/fractalxaos/arednsig" |
|
99 |
+<h2><a href="https://github.com/fractalxaos/ham/tree/master/arednsig" |
|
100 | 100 |
style="text-decoration:none" target="_new"> |
101 | 101 |
KA7JLO Aredn Node Signal</a></h2> |
102 | 102 |
<h3>Last Updated</h3> |
... | ... |
@@ -161,7 +161,8 @@ Data updates every: <span id="period"></span> minutes |
161 | 161 |
<b>NOTES:</b> |
162 | 162 |
<ul> |
163 | 163 |
<li>Aredn Node Signal software available at |
164 |
-<a href="https://github.com/fractalxaos/arednsig" target="_new"> |
|
164 |
+<a href="https://github.com/fractalxaos/ham/tree/master/arednsig" |
|
165 |
+ target="_new"> |
|
165 | 166 |
<i>Github.com</i></a>.</li> |
166 | 167 |
<li>Project sponsored by |
167 | 168 |
<a href="https://willamettevalleymesh.net" TARGET="_NEW"> |
... | ... |
@@ -96,7 +96,7 @@ span.selectorElement { |
96 | 96 |
<body onload="main()"> |
97 | 97 |
|
98 | 98 |
<div class="mainContainer"> |
99 |
-<h2><a href="https://github.com/fractalxaos/arednstat" |
|
99 |
+<h2><a href="https://github.com/fractalxaos/arednsig" |
|
100 | 100 |
style="text-decoration:none" target="_new"> |
101 | 101 |
KA7JLO Aredn Node Signal</a></h2> |
102 | 102 |
<h3>Last Updated</h3> |
... | ... |
@@ -161,7 +161,7 @@ Data updates every: <span id="period"></span> minutes |
161 | 161 |
<b>NOTES:</b> |
162 | 162 |
<ul> |
163 | 163 |
<li>Aredn Node Signal software available at |
164 |
-<a href="https://github.com/fractalxaos/radmon" target="_new"> |
|
164 |
+<a href="https://github.com/fractalxaos/arednsig" target="_new"> |
|
165 | 165 |
<i>Github.com</i></a>.</li> |
166 | 166 |
<li>Project sponsored by |
167 | 167 |
<a href="https://willamettevalleymesh.net" TARGET="_NEW"> |
... | ... |
@@ -60,10 +60,10 @@ img.chart { |
60 | 60 |
text-align: left; |
61 | 61 |
padding: 10px; |
62 | 62 |
} |
63 |
-span.navContainer { |
|
63 |
+span.chartSelector { |
|
64 | 64 |
margin: auto; |
65 | 65 |
} |
66 |
-ul.navElement { |
|
66 |
+ul.selectorElement { |
|
67 | 67 |
list-style-type: none; |
68 | 68 |
margin: 10px; |
69 | 69 |
padding: 0; |
... | ... |
@@ -71,17 +71,17 @@ ul.navElement { |
71 | 71 |
background-color: #bbb; |
72 | 72 |
text-align: center; |
73 | 73 |
} |
74 |
-li.navElement { |
|
74 |
+li.selectorElement { |
|
75 | 75 |
display: inline-block; |
76 | 76 |
font: bold 18px arial, sans-serif; |
77 | 77 |
color: black; |
78 | 78 |
} |
79 |
-span.navElement:hover { |
|
79 |
+span.selectorElement:hover { |
|
80 | 80 |
background-color: #333; |
81 | 81 |
cursor: pointer; |
82 | 82 |
color: white; |
83 | 83 |
} |
84 |
-span.navElement { |
|
84 |
+span.selectorElement { |
|
85 | 85 |
display: inline-block; |
86 | 86 |
padding: 8px 12px; |
87 | 87 |
} |
... | ... |
@@ -96,9 +96,8 @@ span.navElement { |
96 | 96 |
<body onload="main()"> |
97 | 97 |
|
98 | 98 |
<div class="mainContainer"> |
99 |
- |
|
100 | 99 |
<h2><a href="https://github.com/fractalxaos/arednstat" |
101 |
-style="text-decoration:none" target="_new"> |
|
100 |
+ style="text-decoration:none" target="_new"> |
|
102 | 101 |
KA7JLO Aredn Node Signal</a></h2> |
103 | 102 |
<h3>Last Updated</h3> |
104 | 103 |
<div class="datetime"> |
... | ... |
@@ -109,28 +108,25 @@ KA7JLO Aredn Node Signal</a></h2> |
109 | 108 |
|
110 | 109 |
<div class="rowContainer"> |
111 | 110 |
<div class="currentDataCell"> |
112 |
-<div class="dataItems" style="text-align: right;"> |
|
113 |
-Status:<br> |
|
114 |
-Page updates every: |
|
115 |
-</div> |
|
116 |
-<div class="dataItems"> |
|
117 |
-<span id="status"></span><br> |
|
118 |
-<span id="period"></span> minutes |
|
111 |
+<div class="dataItems" style="text-align: center;"> |
|
112 |
+Status: <span id="status"></span><br> |
|
113 |
+Data updates every: <span id="period"></span> minutes |
|
119 | 114 |
</div> |
115 |
+ |
|
120 | 116 |
</div> |
121 | 117 |
</div> |
122 | 118 |
|
123 |
-<span class="navContainer"> |
|
124 |
-<ul class="navElement"> |
|
125 |
-<li class="navElement">Select charts:</li> |
|
126 |
-<li class="navElement"><span class="navElement" onclick="setChartPeriod(1)"> |
|
127 |
-24 hours</span></li> |
|
128 |
-<li class="navElement"><span class="navElement" onclick="setChartPeriod(2)"> |
|
129 |
-4 weeks</span></li> |
|
130 |
-<li class="navElement"><span class="navElement" onclick="setChartPeriod(3)"> |
|
131 |
-12 months</span></li> |
|
132 |
-<li class="navElement"><span class="navElement" onclick="setChartPeriod(0)"> |
|
133 |
-Custom...</span></li> |
|
119 |
+<span class="chartSelectors"> |
|
120 |
+<ul class="selectorElement"> |
|
121 |
+<li class="selectorElement">Select charts:</li> |
|
122 |
+<li class="selectorElement"><span class="selectorElement" |
|
123 |
+ onclick="setChartPeriod(1)">24 hours</span></li> |
|
124 |
+<li class="selectorElement"><span class="selectorElement" |
|
125 |
+ onclick="setChartPeriod(2)">4 weeks</span></li> |
|
126 |
+<li class="selectorElement"><span class="selectorElement" |
|
127 |
+ onclick="setChartPeriod(3)">12 months</span></li> |
|
128 |
+<li class="selectorElement"><span class="selectorElement" |
|
129 |
+ onclick="setChartPeriod(0)">Custom…</span></li> |
|
134 | 130 |
</ul> |
135 | 131 |
</span> |
136 | 132 |
|
... | ... |
@@ -200,10 +196,7 @@ var periodElmt = document.getElementById("period"); |
200 | 196 |
// Document elements |
201 | 197 |
var customChartsContainer = document.getElementById("customChartsContainer"); |
202 | 198 |
var stockChartsContainer = document.getElementById("stockChartsContainer"); |
203 |
-var chartContainer = document.getElementsByClassName("chartContainer"); |
|
204 | 199 |
var fmDateSelector = document.getElementById("fmDateSelector"); |
205 |
-var beginDate = document.getElementById("beginDate"); |
|
206 |
-var endDate = document.getElementById("endDate"); |
|
207 | 200 |
var errorMsg = document.getElementById("errorMsg"); |
208 | 201 |
|
209 | 202 |
/* Global objects */ |
... | ... |
@@ -213,7 +206,7 @@ var httpRequest = new XMLHttpRequest(); |
213 | 206 |
/* Global variables */ |
214 | 207 |
|
215 | 208 |
var chartPeriod = 1; |
216 |
-var chartRefreshRate = 10; // chart refresh rate in minutes |
|
209 |
+var chartRefreshRate = 0; // chart refresh rate in minutes |
|
217 | 210 |
|
218 | 211 |
function main() { |
219 | 212 |
/* Register call back function to process http requests */ |
... | ... |
@@ -315,14 +308,8 @@ function initializeDateSelector() { |
315 | 308 |
var dBegin = new Date(d.getFullYear(), |
316 | 309 |
d.getMonth(), d.getDate() - 1); |
317 | 310 |
|
318 |
- var strBegin = dBegin.getFullYear() + "-" + (dBegin.getMonth() + 1) + |
|
319 |
- "-" + dBegin.getDate(); |
|
320 |
- var strEnd = dEnd.getFullYear() + "-" + (dEnd.getMonth() + 1) + |
|
321 |
- "-" + dEnd.getDate(); |
|
322 |
- |
|
323 |
- beginDate.valueAsDate = dBegin; |
|
324 |
- endDate.valueAsDate = dEnd; |
|
325 |
- //errorMsg.innerHTML = strBegin + " thru " + strEnd; |
|
311 |
+ document.getElementById("beginDate").valueAsDate = dBegin; |
|
312 |
+ document.getElementById("endDate").valueAsDate = dEnd; |
|
326 | 313 |
} |
327 | 314 |
|
328 | 315 |
function getCustomCharts() { |
... | ... |
@@ -24,6 +24,7 @@ h4 { |
24 | 24 |
width: 750px; |
25 | 25 |
text-align: center; |
26 | 26 |
margin: auto; |
27 |
+ /*border: 1px solid black;*/ |
|
27 | 28 |
} |
28 | 29 |
.datetime { |
29 | 30 |
font: bold 22px arial, sans-serif; |
... | ... |
@@ -40,7 +41,6 @@ h4 { |
40 | 41 |
text-align: center; |
41 | 42 |
display: table-cell; |
42 | 43 |
vertical-align: middle; |
43 |
- /*border: 1px solid black;*/ |
|
44 | 44 |
} |
45 | 45 |
.dataItems { |
46 | 46 |
padding: 2px; |
... | ... |
@@ -60,10 +60,10 @@ img.chart { |
60 | 60 |
text-align: left; |
61 | 61 |
padding: 10px; |
62 | 62 |
} |
63 |
-span.chartNav { |
|
63 |
+span.navContainer { |
|
64 | 64 |
margin: auto; |
65 | 65 |
} |
66 |
-ul.chartNav { |
|
66 |
+ul.navElement { |
|
67 | 67 |
list-style-type: none; |
68 | 68 |
margin: 10px; |
69 | 69 |
padding: 0; |
... | ... |
@@ -71,20 +71,25 @@ ul.chartNav { |
71 | 71 |
background-color: #bbb; |
72 | 72 |
text-align: center; |
73 | 73 |
} |
74 |
-li.chartNav { |
|
74 |
+li.navElement { |
|
75 | 75 |
display: inline-block; |
76 | 76 |
font: bold 18px arial, sans-serif; |
77 | 77 |
color: black; |
78 | 78 |
} |
79 |
-text.chartNav:hover { |
|
79 |
+span.navElement:hover { |
|
80 | 80 |
background-color: #333; |
81 | 81 |
cursor: pointer; |
82 | 82 |
color: white; |
83 | 83 |
} |
84 |
-text.chartNav { |
|
84 |
+span.navElement { |
|
85 | 85 |
display: inline-block; |
86 | 86 |
padding: 8px 12px; |
87 | 87 |
} |
88 |
+#iframe_a { |
|
89 |
+ border:none; |
|
90 |
+ width:100%; |
|
91 |
+ height:450px; |
|
92 |
+} |
|
88 | 93 |
</style> |
89 | 94 |
</head> |
90 | 95 |
|
... | ... |
@@ -97,9 +102,9 @@ style="text-decoration:none" target="_new"> |
97 | 102 |
KA7JLO Aredn Node Signal</a></h2> |
98 | 103 |
<h3>Last Updated</h3> |
99 | 104 |
<div class="datetime"> |
100 |
-<text id="date"></text> |
|
105 |
+<span id="date"></span> |
|
101 | 106 |
|
102 |
-<text id="time"></text> |
|
107 |
+<span id="time"></span> |
|
103 | 108 |
</div> |
104 | 109 |
|
105 | 110 |
<div class="rowContainer"> |
... | ... |
@@ -109,43 +114,51 @@ Status:<br> |
109 | 114 |
Page updates every: |
110 | 115 |
</div> |
111 | 116 |
<div class="dataItems"> |
112 |
-<text id="status"></text><br> |
|
113 |
-<text id="period"></text> minutes |
|
117 |
+<span id="status"></span><br> |
|
118 |
+<span id="period"></span> minutes |
|
114 | 119 |
</div> |
115 | 120 |
</div> |
116 | 121 |
</div> |
117 | 122 |
|
118 |
-<span class="chartNav"> |
|
119 |
-<ul class="chartNav"> |
|
120 |
-<li class="chartNav">Select charts:</li> |
|
121 |
-<li class="chartNav"><text class="chartNav" onclick="setChartPeriod(1)"> |
|
122 |
-24 hours</text></li> |
|
123 |
-<li class="chartNav"><text class="chartNav" onclick="setChartPeriod(2)"> |
|
124 |
-4 weeks</text></li> |
|
125 |
-<li class="chartNav"><text class="chartNav" onclick="setChartPeriod(3)"> |
|
126 |
-12 months</text></li> |
|
123 |
+<span class="navContainer"> |
|
124 |
+<ul class="navElement"> |
|
125 |
+<li class="navElement">Select charts:</li> |
|
126 |
+<li class="navElement"><span class="navElement" onclick="setChartPeriod(1)"> |
|
127 |
+24 hours</span></li> |
|
128 |
+<li class="navElement"><span class="navElement" onclick="setChartPeriod(2)"> |
|
129 |
+4 weeks</span></li> |
|
130 |
+<li class="navElement"><span class="navElement" onclick="setChartPeriod(3)"> |
|
131 |
+12 months</span></li> |
|
132 |
+<li class="navElement"><span class="navElement" onclick="setChartPeriod(0)"> |
|
133 |
+Custom...</span></li> |
|
127 | 134 |
</ul> |
128 | 135 |
</span> |
129 |
-<br> |
|
130 | 136 |
|
131 |
-<div class="chartContainer"> |
|
132 |
-<img class="chart" id="snrChart"> |
|
137 |
+<div class="rowContainer" id="customChartsContainer" style="display:none;"> |
|
138 |
+<div class="currentDataCell"> |
|
139 |
+<form id="fmDateSelector" action="arednsig.php" method="post" |
|
140 |
+ target="iframe_a"> |
|
141 |
+<label for="beginDate">Begin Date: </label> |
|
142 |
+<input id="beginDate" name="beginDate" type="date" value="mm/dd/yyyy" /> |
|
143 |
+<label for="endDate">End Date: </label> |
|
144 |
+<input id="endDate" name="endDate" type="date" value="mm/dd/yyyy" /> |
|
145 |
+<br><br> |
|
146 |
+<input type="button" onclick="getCustomCharts()" value="Get Charts"> |
|
147 |
+</form> |
|
148 |
+<span id="errorMsg"></span><br> |
|
149 |
+<iframe id="iframe_a" name="iframe_a"></iframe> |
|
133 | 150 |
</div> |
134 |
- |
|
135 |
-<div class="chartContainer"> |
|
136 |
-<img class="chart" id="signalChart"> |
|
137 | 151 |
</div> |
138 | 152 |
|
139 |
-<div class="chartContainer"> |
|
140 |
-<img class="chart" id="noiseChart"> |
|
141 |
-</div> |
|
153 |
+<br> |
|
142 | 154 |
|
155 |
+<div class="rowContainer" id="stockChartsContainer"> |
|
143 | 156 |
<div class="chartContainer"> |
144 |
-<img class="chart" id="rxrateChart"> |
|
157 |
+<img class="chart" id="signalChart"> |
|
145 | 158 |
</div> |
146 |
- |
|
147 | 159 |
<div class="chartContainer"> |
148 |
-<img class="chart" id="txrateChart"> |
|
160 |
+<img class="chart" id="snrChart"> |
|
161 |
+</div> |
|
149 | 162 |
</div> |
150 | 163 |
|
151 | 164 |
<div class="notes"> |
... | ... |
@@ -175,25 +188,32 @@ var nodeDataUrl = "dynamic/nodeOnline.js"; |
175 | 188 |
/* Global DOM objects */ |
176 | 189 |
|
177 | 190 |
// Chart elements |
178 |
-var snrChart = document.getElementById("snrChart"); |
|
179 | 191 |
var signalChart = document.getElementById("signalChart"); |
180 |
-var noiseChart = document.getElementById("noiseChart"); |
|
181 |
-var rxrateChart = document.getElementById("rxrateChart"); |
|
182 |
-var txrateChart = document.getElementById("txrateChart"); |
|
192 |
+var snrChart = document.getElementById("snrChart"); |
|
183 | 193 |
|
184 | 194 |
// Text elements |
185 | 195 |
var dateElmt = document.getElementById("date"); |
186 | 196 |
var timeElmt = document.getElementById("time"); |
187 | 197 |
var statusElmt = document.getElementById("status"); |
188 | 198 |
var periodElmt = document.getElementById("period"); |
199 |
+ |
|
200 |
+// Document elements |
|
201 |
+var customChartsContainer = document.getElementById("customChartsContainer"); |
|
202 |
+var stockChartsContainer = document.getElementById("stockChartsContainer"); |
|
203 |
+var chartContainer = document.getElementsByClassName("chartContainer"); |
|
204 |
+var fmDateSelector = document.getElementById("fmDateSelector"); |
|
205 |
+var beginDate = document.getElementById("beginDate"); |
|
206 |
+var endDate = document.getElementById("endDate"); |
|
207 |
+var errorMsg = document.getElementById("errorMsg"); |
|
208 |
+ |
|
189 | 209 |
/* Global objects */ |
190 | 210 |
|
191 | 211 |
var httpRequest = new XMLHttpRequest(); |
192 | 212 |
|
193 | 213 |
/* Global variables */ |
194 | 214 |
|
195 |
-var graphPeriod; |
|
196 |
-var graphRefreshRate = 10; // chart refresh rate in minutes |
|
215 |
+var chartPeriod = 1; |
|
216 |
+var chartRefreshRate = 10; // chart refresh rate in minutes |
|
197 | 217 |
|
198 | 218 |
function main() { |
199 | 219 |
/* Register call back function to process http requests */ |
... | ... |
@@ -209,9 +229,9 @@ function main() { |
209 | 229 |
displayOfflineStatus(); |
210 | 230 |
}; |
211 | 231 |
|
232 |
+ initializeDateSelector(); |
|
212 | 233 |
getNodeData(); |
213 |
- graphPeriod = 1; |
|
214 |
- getNodeGraphs(); |
|
234 |
+ getNodeCharts(); |
|
215 | 235 |
} |
216 | 236 |
|
217 | 237 |
function getNodeData() { |
... | ... |
@@ -221,15 +241,22 @@ function getNodeData() { |
221 | 241 |
} |
222 | 242 |
|
223 | 243 |
function setChartPeriod(n) { |
224 |
- graphPeriod = n; |
|
225 |
- getNodeGraphs(); |
|
244 |
+ chartPeriod = n; |
|
245 |
+ if (n == 0) { |
|
246 |
+ customChartsContainer.style.display = "block"; |
|
247 |
+ stockChartsContainer.style.display = "none"; |
|
248 |
+ } else { |
|
249 |
+ customChartsContainer.style.display = "none"; |
|
250 |
+ stockChartsContainer.style.display = "block"; |
|
251 |
+ getNodeCharts(); |
|
252 |
+ } |
|
226 | 253 |
} |
227 | 254 |
|
228 |
-function getNodeGraphs() { |
|
255 |
+function getNodeCharts() { |
|
229 | 256 |
var d = new Date; |
230 | 257 |
var pfx; |
231 | 258 |
|
232 |
- switch(graphPeriod) { |
|
259 |
+ switch(chartPeriod) { |
|
233 | 260 |
case 1: |
234 | 261 |
pfx = "24hr_"; |
235 | 262 |
break; |
... | ... |
@@ -241,10 +268,7 @@ function getNodeGraphs() { |
241 | 268 |
break; |
242 | 269 |
} |
243 | 270 |
signalChart.src = "dynamic/" + pfx + "signal.png?ver=" + d.getTime(); |
244 |
- noiseChart.src = "dynamic/" + pfx + "noise.png?ver=" + d.getTime(); |
|
245 | 271 |
snrChart.src = "dynamic/" + pfx + "snr.png?ver=" + d.getTime(); |
246 |
- rxrateChart.src = "dynamic/" + pfx + "rx_rate.png?ver=" + d.getTime(); |
|
247 |
- txrateChart.src = "dynamic/" + pfx + "tx_rate.png?ver=" + d.getTime(); |
|
248 | 272 |
} |
249 | 273 |
|
250 | 274 |
function displayData(dataItem) { |
... | ... |
@@ -259,29 +283,51 @@ function displayData(dataItem) { |
259 | 283 |
localTimeZone = localDate.getTimezoneOffset() / 60; |
260 | 284 |
dateElmt.innerHTML = date; |
261 | 285 |
timeElmt.innerHTML = hourminute + |
262 |
- " <small>(GMT+" + localTimeZone + ")</small>"; |
|
286 |
+ " <small>(GMT+" + localTimeZone + ")</small>"; |
|
263 | 287 |
|
264 | 288 |
statusElmt.innerHTML = "Online"; |
265 | 289 |
statusElmt.style.color = "green"; |
266 | 290 |
|
267 |
- graphRefreshRate = dataItem.period; |
|
268 |
- periodElmt.innerHTML = graphRefreshRate; |
|
269 |
- setInterval(getNodeData, 60000 * graphRefreshRate); |
|
270 |
- setInterval(getNodeGraphs, 60000 * graphRefreshRate); |
|
291 |
+ chartRefreshRate = dataItem.period; |
|
292 |
+ periodElmt.innerHTML = chartRefreshRate; |
|
293 |
+ setInterval(getNodeData, 60000 * chartRefreshRate); |
|
294 |
+ setInterval(getNodeCharts, 60000 * chartRefreshRate); |
|
271 | 295 |
} |
272 | 296 |
|
273 | 297 |
function displayOfflineStatus() { |
274 | 298 |
var d = new Date(); |
275 | 299 |
localTimeZone = d.getTimezoneOffset() / 60; |
276 | 300 |
dateElmt.innerHTML = (d.getMonth() + 1) + "/" + d.getDate() + "/" + |
277 |
- d.getFullYear(); |
|
301 |
+ d.getFullYear(); |
|
278 | 302 |
timeElmt.innerHTML = d.getHours() + ":" + d.getMinutes() + |
279 |
- " <small>(GMT+" + localTimeZone + ")</small>"; |
|
303 |
+ " <small>(GMT+" + localTimeZone + ")</small>"; |
|
280 | 304 |
periodElmt.innerHTML = "?"; |
281 | 305 |
statusElmt.innerHTML = "offline"; |
282 | 306 |
statusElmt.style.color = "red"; |
283 | 307 |
} |
284 | 308 |
|
309 |
+function initializeDateSelector() { |
|
310 |
+ var d = new Date(); |
|
311 |
+ |
|
312 |
+ var dEnd = new Date(d.getFullYear(), |
|
313 |
+ d.getMonth(), d.getDate() - 0); |
|
314 |
+ |
|
315 |
+ var dBegin = new Date(d.getFullYear(), |
|
316 |
+ d.getMonth(), d.getDate() - 1); |
|
317 |
+ |
|
318 |
+ var strBegin = dBegin.getFullYear() + "-" + (dBegin.getMonth() + 1) + |
|
319 |
+ "-" + dBegin.getDate(); |
|
320 |
+ var strEnd = dEnd.getFullYear() + "-" + (dEnd.getMonth() + 1) + |
|
321 |
+ "-" + dEnd.getDate(); |
|
322 |
+ |
|
323 |
+ beginDate.valueAsDate = dBegin; |
|
324 |
+ endDate.valueAsDate = dEnd; |
|
325 |
+ //errorMsg.innerHTML = strBegin + " thru " + strEnd; |
|
326 |
+} |
|
327 |
+ |
|
328 |
+function getCustomCharts() { |
|
329 |
+ fmDateSelector.submit(); |
|
330 |
+} |
|
285 | 331 |
</script> |
286 | 332 |
|
287 | 333 |
</body> |
1 | 1 |
new file mode 100644 |
... | ... |
@@ -0,0 +1,289 @@ |
1 |
+<!DOCTYPE html> |
|
2 |
+<!-- Courtesy ruler for editing this file |
|
3 |
+12345678901234567890123456789012345678901234567890123456789012345678901234567890 |
|
4 |
+--> |
|
5 |
+<html> |
|
6 |
+<head> |
|
7 |
+<title>Node Signal</title> |
|
8 |
+<meta charset="UTF-8"> |
|
9 |
+<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
10 |
+<style> |
|
11 |
+body { |
|
12 |
+ background-image: url("static/chalk.jpg"); |
|
13 |
+} |
|
14 |
+h2 { |
|
15 |
+ font: bold 24px arial, sans-serif; |
|
16 |
+} |
|
17 |
+h3 { |
|
18 |
+ font: bold 18px arial, sans-serif; |
|
19 |
+} |
|
20 |
+h4 { |
|
21 |
+ font: bold 16px arial, sans-serif; |
|
22 |
+} |
|
23 |
+.mainContainer { |
|
24 |
+ width: 750px; |
|
25 |
+ text-align: center; |
|
26 |
+ margin: auto; |
|
27 |
+} |
|
28 |
+.datetime { |
|
29 |
+ font: bold 22px arial, sans-serif; |
|
30 |
+ padding: 0px; |
|
31 |
+} |
|
32 |
+.rowContainer { |
|
33 |
+ display: table; |
|
34 |
+ width: 100%; |
|
35 |
+} |
|
36 |
+.currentDataCell { |
|
37 |
+ width: 50%; |
|
38 |
+ padding: 10px; |
|
39 |
+ font: bold 20px arial, sans-serif; |
|
40 |
+ text-align: center; |
|
41 |
+ display: table-cell; |
|
42 |
+ vertical-align: middle; |
|
43 |
+ /*border: 1px solid black;*/ |
|
44 |
+} |
|
45 |
+.dataItems { |
|
46 |
+ padding: 2px; |
|
47 |
+ text-align: left; |
|
48 |
+ line-height: 130%; |
|
49 |
+ display: inline-block; |
|
50 |
+ vertical-align: middle; |
|
51 |
+} |
|
52 |
+.chartContainer { |
|
53 |
+ padding: 2px; |
|
54 |
+} |
|
55 |
+img.chart { |
|
56 |
+ width:100%; |
|
57 |
+} |
|
58 |
+.notes { |
|
59 |
+ font: 17px arial, sans-serif; |
|
60 |
+ text-align: left; |
|
61 |
+ padding: 10px; |
|
62 |
+} |
|
63 |
+span.chartNav { |
|
64 |
+ margin: auto; |
|
65 |
+} |
|
66 |
+ul.chartNav { |
|
67 |
+ list-style-type: none; |
|
68 |
+ margin: 10px; |
|
69 |
+ padding: 0; |
|
70 |
+ overflow: hidden; |
|
71 |
+ background-color: #bbb; |
|
72 |
+ text-align: center; |
|
73 |
+} |
|
74 |
+li.chartNav { |
|
75 |
+ display: inline-block; |
|
76 |
+ font: bold 18px arial, sans-serif; |
|
77 |
+ color: black; |
|
78 |
+} |
|
79 |
+text.chartNav:hover { |
|
80 |
+ background-color: #333; |
|
81 |
+ cursor: pointer; |
|
82 |
+ color: white; |
|
83 |
+} |
|
84 |
+text.chartNav { |
|
85 |
+ display: inline-block; |
|
86 |
+ padding: 8px 12px; |
|
87 |
+} |
|
88 |
+</style> |
|
89 |
+</head> |
|
90 |
+ |
|
91 |
+<body onload="main()"> |
|
92 |
+ |
|
93 |
+<div class="mainContainer"> |
|
94 |
+ |
|
95 |
+<h2><a href="https://github.com/fractalxaos/arednstat" |
|
96 |
+style="text-decoration:none" target="_new"> |
|
97 |
+KA7JLO Aredn Node Signal</a></h2> |
|
98 |
+<h3>Last Updated</h3> |
|
99 |
+<div class="datetime"> |
|
100 |
+<text id="date"></text> |
|
101 |
+ |
|
102 |
+<text id="time"></text> |
|
103 |
+</div> |
|
104 |
+ |
|
105 |
+<div class="rowContainer"> |
|
106 |
+<div class="currentDataCell"> |
|
107 |
+<div class="dataItems" style="text-align: right;"> |
|
108 |
+Status:<br> |
|
109 |
+Page updates every: |
|
110 |
+</div> |
|
111 |
+<div class="dataItems"> |
|
112 |
+<text id="status"></text><br> |
|
113 |
+<text id="period"></text> minutes |
|
114 |
+</div> |
|
115 |
+</div> |
|
116 |
+</div> |
|
117 |
+ |
|
118 |
+<span class="chartNav"> |
|
119 |
+<ul class="chartNav"> |
|
120 |
+<li class="chartNav">Select charts:</li> |
|
121 |
+<li class="chartNav"><text class="chartNav" onclick="setChartPeriod(1)"> |
|
122 |
+24 hours</text></li> |
|
123 |
+<li class="chartNav"><text class="chartNav" onclick="setChartPeriod(2)"> |
|
124 |
+4 weeks</text></li> |
|
125 |
+<li class="chartNav"><text class="chartNav" onclick="setChartPeriod(3)"> |
|
126 |
+12 months</text></li> |
|
127 |
+</ul> |
|
128 |
+</span> |
|
129 |
+<br> |
|
130 |
+ |
|
131 |
+<div class="chartContainer"> |
|
132 |
+<img class="chart" id="snrChart"> |
|
133 |
+</div> |
|
134 |
+ |
|
135 |
+<div class="chartContainer"> |
|
136 |
+<img class="chart" id="signalChart"> |
|
137 |
+</div> |
|
138 |
+ |
|
139 |
+<div class="chartContainer"> |
|
140 |
+<img class="chart" id="noiseChart"> |
|
141 |
+</div> |
|
142 |
+ |
|
143 |
+<div class="chartContainer"> |
|
144 |
+<img class="chart" id="rxrateChart"> |
|
145 |
+</div> |
|
146 |
+ |
|
147 |
+<div class="chartContainer"> |
|
148 |
+<img class="chart" id="txrateChart"> |
|
149 |
+</div> |
|
150 |
+ |
|
151 |
+<div class="notes"> |
|
152 |
+<b>NOTES:</b> |
|
153 |
+<ul> |
|
154 |
+<li>Aredn Node Signal software available at |
|
155 |
+<a href="https://github.com/fractalxaos/radmon" target="_new"> |
|
156 |
+<i>Github.com</i></a>.</li> |
|
157 |
+<li>Project sponsored by |
|
158 |
+<a href="https://willamettevalleymesh.net" TARGET="_NEW"> |
|
159 |
+<i>Willamette Valley Mesh Network</i></a>, Salem, Oregon.</li> |
|
160 |
+<li>For more information about the amateur radio emergency |
|
161 |
+ data network (AREDN) see official web site at |
|
162 |
+ <a href="http://www.arednmesh.org" target="_blank"> |
|
163 |
+www.arednmesh.org</a>.</li> |
|
164 |
+</ul> |
|
165 |
+</div> |
|
166 |
+</div> |
|
167 |
+<br> |
|
168 |
+ |
|
169 |
+<script> |
|
170 |
+ |
|
171 |
+/* Global constants */ |
|
172 |
+ |
|
173 |
+var nodeDataUrl = "dynamic/nodeOnline.js"; |
|
174 |
+ |
|
175 |
+/* Global DOM objects */ |
|
176 |
+ |
|
177 |
+// Chart elements |
|
178 |
+var snrChart = document.getElementById("snrChart"); |
|
179 |
+var signalChart = document.getElementById("signalChart"); |
|
180 |
+var noiseChart = document.getElementById("noiseChart"); |
|
181 |
+var rxrateChart = document.getElementById("rxrateChart"); |
|
182 |
+var txrateChart = document.getElementById("txrateChart"); |
|
183 |
+ |
|
184 |
+// Text elements |
|
185 |
+var dateElmt = document.getElementById("date"); |
|
186 |
+var timeElmt = document.getElementById("time"); |
|
187 |
+var statusElmt = document.getElementById("status"); |
|
188 |
+var periodElmt = document.getElementById("period"); |
|
189 |
+/* Global objects */ |
|
190 |
+ |
|
191 |
+var httpRequest = new XMLHttpRequest(); |
|
192 |
+ |
|
193 |
+/* Global variables */ |
|
194 |
+ |
|
195 |
+var graphPeriod; |
|
196 |
+var graphRefreshRate = 10; // chart refresh rate in minutes |
|
197 |
+ |
|
198 |
+function main() { |
|
199 |
+ /* Register call back function to process http requests */ |
|
200 |
+ httpRequest.onreadystatechange = function() { |
|
201 |
+ if (httpRequest.readyState == 4 && httpRequest.status == 200) { |
|
202 |
+ var dataArray = JSON.parse(httpRequest.responseText); |
|
203 |
+ displayData(dataArray[0]); |
|
204 |
+ } else if (httpRequest.readyState == 4 && httpRequest.status == 404) { |
|
205 |
+ displayOfflineStatus(); |
|
206 |
+ } |
|
207 |
+ }; |
|
208 |
+ httpRequest.ontimeout = function(e) { |
|
209 |
+ displayOfflineStatus(); |
|
210 |
+ }; |
|
211 |
+ |
|
212 |
+ getNodeData(); |
|
213 |
+ graphPeriod = 1; |
|
214 |
+ getNodeGraphs(); |
|
215 |
+} |
|
216 |
+ |
|
217 |
+function getNodeData() { |
|
218 |
+ httpRequest.open("GET", nodeDataUrl, true); |
|
219 |
+ httpRequest.timeout = 3000; |
|
220 |
+ httpRequest.send(); |
|
221 |
+} |
|
222 |
+ |
|
223 |
+function setChartPeriod(n) { |
|
224 |
+ graphPeriod = n; |
|
225 |
+ getNodeGraphs(); |
|
226 |
+} |
|
227 |
+ |
|
228 |
+function getNodeGraphs() { |
|
229 |
+ var d = new Date; |
|
230 |
+ var pfx; |
|
231 |
+ |
|
232 |
+ switch(graphPeriod) { |
|
233 |
+ case 1: |
|
234 |
+ pfx = "24hr_"; |
|
235 |
+ break; |
|
236 |
+ case 2: |
|
237 |
+ pfx = "4wk_"; |
|
238 |
+ break; |
|
239 |
+ case 3: |
|
240 |
+ pfx = "12m_"; |
|
241 |
+ break; |
|
242 |
+ } |
|
243 |
+ signalChart.src = "dynamic/" + pfx + "signal.png?ver=" + d.getTime(); |
|
244 |
+ noiseChart.src = "dynamic/" + pfx + "noise.png?ver=" + d.getTime(); |
|
245 |
+ snrChart.src = "dynamic/" + pfx + "snr.png?ver=" + d.getTime(); |
|
246 |
+ rxrateChart.src = "dynamic/" + pfx + "rx_rate.png?ver=" + d.getTime(); |
|
247 |
+ txrateChart.src = "dynamic/" + pfx + "tx_rate.png?ver=" + d.getTime(); |
|
248 |
+} |
|
249 |
+ |
|
250 |
+function displayData(dataItem) { |
|
251 |
+ var timeStamp, date, time, hourminute; |
|
252 |
+ var localDateObj,localTimeZone; |
|
253 |
+ |
|
254 |
+ timeStamp = dataItem.date; |
|
255 |
+ date = timeStamp.split(" ")[0]; |
|
256 |
+ time = timeStamp.split(" ")[1]; |
|
257 |
+ hourminute = time.split(":")[0] + ":" + time.split(":")[1]; |
|
258 |
+ localDate = new Date(); |
|
259 |
+ localTimeZone = localDate.getTimezoneOffset() / 60; |
|
260 |
+ dateElmt.innerHTML = date; |
|
261 |
+ timeElmt.innerHTML = hourminute + |
|
262 |
+ " <small>(GMT+" + localTimeZone + ")</small>"; |
|
263 |
+ |
|
264 |
+ statusElmt.innerHTML = "Online"; |
|
265 |
+ statusElmt.style.color = "green"; |
|
266 |
+ |
|
267 |
+ graphRefreshRate = dataItem.period; |
|
268 |
+ periodElmt.innerHTML = graphRefreshRate; |
|
269 |
+ setInterval(getNodeData, 60000 * graphRefreshRate); |
|
270 |
+ setInterval(getNodeGraphs, 60000 * graphRefreshRate); |
|
271 |
+} |
|
272 |
+ |
|
273 |
+function displayOfflineStatus() { |
|
274 |
+ var d = new Date(); |
|
275 |
+ localTimeZone = d.getTimezoneOffset() / 60; |
|
276 |
+ dateElmt.innerHTML = (d.getMonth() + 1) + "/" + d.getDate() + "/" + |
|
277 |
+ d.getFullYear(); |
|
278 |
+ timeElmt.innerHTML = d.getHours() + ":" + d.getMinutes() + |
|
279 |
+ " <small>(GMT+" + localTimeZone + ")</small>"; |
|
280 |
+ periodElmt.innerHTML = "?"; |
|
281 |
+ statusElmt.innerHTML = "offline"; |
|
282 |
+ statusElmt.style.color = "red"; |
|
283 |
+} |
|
284 |
+ |
|
285 |
+</script> |
|
286 |
+ |
|
287 |
+</body> |
|
288 |
+</html> |
|
289 |
+ |