|
|
|
|
@ -1,9 +1,15 @@
|
|
|
|
|
<!doctype html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8" />
|
|
|
|
|
<title>openSenseMap Dataview</title>
|
|
|
|
|
<title>openSenseMap data aggregation</title>
|
|
|
|
|
<style>
|
|
|
|
|
body { font-family: sans; }
|
|
|
|
|
body {
|
|
|
|
|
font-family: sans-serif;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
details { padding: 10px; }
|
|
|
|
|
th, td { padding: 10px; text-align: right; }
|
|
|
|
|
tr:nth-child(odd) { background: #eee; }
|
|
|
|
|
</style>
|
|
|
|
|
@ -26,6 +32,22 @@
|
|
|
|
|
<button onclick="loadConfig('&windowSize=1 day', reset=false)">Tag</button>
|
|
|
|
|
<button onclick="loadConfig('&windowSize=1 hour', reset=false)">Stunde</button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<details>
|
|
|
|
|
<summary>Advanced Usage</summary>
|
|
|
|
|
<p>
|
|
|
|
|
Shown data can be modified through the URL search query. Supported keys are:
|
|
|
|
|
<code>boxId, phenomenon, start, end, windowSize, operation</code>
|
|
|
|
|
For supported values check out the <a href="https://docs.opensensemap.org/#api-Statistics-descriptive" target="_blank">openSenseMap API docs</a>.
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
Example:
|
|
|
|
|
<code>
|
|
|
|
|
?boxId=5b26181b1fef04001b69093c&phenomenon=Temperatur&operation=max&windowSize=14 days&start=2019-10-01T00:00:00.000Z
|
|
|
|
|
</code>
|
|
|
|
|
</p>
|
|
|
|
|
</details>
|
|
|
|
|
|
|
|
|
|
<br/>
|
|
|
|
|
|
|
|
|
|
<div id="status"></div>
|
|
|
|
|
@ -43,10 +65,9 @@
|
|
|
|
|
windowSize: '30 days',
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const config = Object.assign(defaultConfig, parseHash())
|
|
|
|
|
const config = Object.assign(defaultConfig, parseQuery())
|
|
|
|
|
main(config).catch(console.error)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
async function main (config) {
|
|
|
|
|
try {
|
|
|
|
|
const data = await fetchOsemDataAggregate(config)
|
|
|
|
|
@ -64,12 +85,10 @@
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function parseHash () {
|
|
|
|
|
function parseQuery () {
|
|
|
|
|
const kvPairs = window.location.search
|
|
|
|
|
// remove leading ?
|
|
|
|
|
.slice(1)
|
|
|
|
|
// create objects from kvpairs
|
|
|
|
|
.split('&')
|
|
|
|
|
.slice(1) // remove leading ?
|
|
|
|
|
.split('&') // create list of { key: value } objects
|
|
|
|
|
.map(kv => {
|
|
|
|
|
[k,v] = kv.split('=')
|
|
|
|
|
return { [k]: decodeURIComponent(v) }
|
|
|
|
|
@ -134,9 +153,10 @@
|
|
|
|
|
addRow(config.operation, `${valFormat(aggregate)} ${data['unit']}`)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// click handler of the UI buttons.
|
|
|
|
|
function loadConfig (queryString, reset = true) {
|
|
|
|
|
if (reset)
|
|
|
|
|
window.location.search = queryString
|
|
|
|
|
window.location.search = queryString // this assignment reloads the page
|
|
|
|
|
else
|
|
|
|
|
window.location.search += queryString
|
|
|
|
|
}
|
|
|
|
|
|
