opensensemap/osem_dash
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

document query parameters, improve styling

Browse source
This commit is contained in:
Norwin 2019-10-24 14:09:14 +02:00
parent 9164c0c6e4
commit cb1cd79162
1 changed files with 30 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
app/aggregate.html
View file

@ -1,9 +1,15 @@
<!doctype html> <!doctype html>
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>openSenseMap Dataview</title> <title>openSenseMap data aggregation</title>
<style> <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; } th, td { padding: 10px; text-align: right; }
tr:nth-child(odd) { background: #eee; } tr:nth-child(odd) { background: #eee; }
</style> </style>
@ -26,6 +32,22 @@
<button onclick="loadConfig('&windowSize=1 day', reset=false)">Tag</button> <button onclick="loadConfig('&windowSize=1 day', reset=false)">Tag</button>
<button onclick="loadConfig('&windowSize=1 hour', reset=false)">Stunde</button> <button onclick="loadConfig('&windowSize=1 hour', reset=false)">Stunde</button>
</div> </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&amp;phenomenon=Temperatur&amp;operation=max&amp;windowSize=14 days&amp;start=2019-10-01T00:00:00.000Z
</code>
</p>
</details>
<br/> <br/>
<div id="status"></div> <div id="status"></div>
@ -43,10 +65,9 @@
windowSize: '30 days', windowSize: '30 days',
} }
const config = Object.assign(defaultConfig, parseHash()) const config = Object.assign(defaultConfig, parseQuery())
main(config).catch(console.error) main(config).catch(console.error)
async function main (config) { async function main (config) {
try { try {
const data = await fetchOsemDataAggregate(config) const data = await fetchOsemDataAggregate(config)
@ -64,12 +85,10 @@
} }
} }
function parseHash () { function parseQuery () {
const kvPairs = window.location.search const kvPairs = window.location.search
// remove leading ? .slice(1) // remove leading ?
.slice(1) .split('&') // create list of { key: value } objects
// create objects from kvpairs
.split('&')
.map(kv => { .map(kv => {
[k,v] = kv.split('=') [k,v] = kv.split('=')
return { [k]: decodeURIComponent(v) } return { [k]: decodeURIComponent(v) }
@ -134,9 +153,10 @@
addRow(config.operation, `${valFormat(aggregate)} ${data['unit']}`) addRow(config.operation, `${valFormat(aggregate)} ${data['unit']}`)
} }
// click handler of the UI buttons.
function loadConfig (queryString, reset = true) { function loadConfig (queryString, reset = true) {
if (reset) if (reset)
window.location.search = queryString window.location.search = queryString // this assignment reloads the page
else else
window.location.search += queryString window.location.search += queryString
} }