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>
<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&amp;phenomenon=Temperatur&amp;operation=max&amp;windowSize=14 days&amp;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
}