schon ein bisschen besser mit location slider...
This commit is contained in:
parent
874aee24ff
commit
4374027909
57
metrics.go
57
metrics.go
|
|
@ -8,8 +8,6 @@ import (
|
|||
"io/ioutil"
|
||||
"log"
|
||||
"net/http"
|
||||
"sort"
|
||||
"strconv"
|
||||
"strings"
|
||||
"time"
|
||||
)
|
||||
|
|
@ -95,7 +93,12 @@ func metricsHandler(response http.ResponseWriter, request *http.Request) {
|
|||
}
|
||||
|
||||
url := "http://localhost:8086/api/v2/query?org=wobischorg"
|
||||
data := []byte(fmt.Sprintf(`from(bucket:"wobischbucket") |> range(start: %s, stop: %s) |> filter(fn: (r) => r._measurement == "measurement") |> filter(fn: (r) => r._field == "lon" or r._field == "lat") |> filter(fn: (r) => r.deveui == "%s")`, mystart, mystop, mydeveui))
|
||||
data := []byte(fmt.Sprintf(`from(bucket:"wobischbucket")
|
||||
|> range(start: %s, stop: %s)
|
||||
|> filter(fn: (r) => r._measurement == "measurement")
|
||||
|> filter(fn: (r) => r._field == "lon" or r._field == "lat" or r._field == "vbat")
|
||||
|> filter(fn: (r) => r.deveui == "%s")
|
||||
|> pivot(rowKey:["_time"], columnKey: ["_field"], valueColumn: "_value")`, mystart, mystop, mydeveui))
|
||||
|
||||
req, err := http.NewRequest("POST", url, bytes.NewBuffer(data))
|
||||
if err != nil {
|
||||
|
|
@ -126,58 +129,34 @@ func metricsHandler(response http.ResponseWriter, request *http.Request) {
|
|||
}
|
||||
fmt.Println("response Body:", string(body))
|
||||
|
||||
m := make(map[int64][2]float64)
|
||||
|
||||
scanner := bufio.NewScanner(strings.NewReader(string(body)))
|
||||
first := true
|
||||
fmt.Fprintf(response, "[\n")
|
||||
for scanner.Scan() {
|
||||
s := strings.Split(scanner.Text(), ",")
|
||||
fmt.Printf("Scanned Line: %v\n", s)
|
||||
if (len(s) >= 7) && !(strings.HasPrefix(s[5], "_")) {
|
||||
t, err := time.Parse(time.RFC3339, s[5])
|
||||
if (len(s) >= 11) && !(strings.HasPrefix(s[3], "_")) {
|
||||
t, err := time.Parse(time.RFC3339, s[3])
|
||||
if err != nil {
|
||||
fmt.Printf("error converting time: %s\n", s[5])
|
||||
fmt.Printf("error converting time: %s\n", s[3])
|
||||
continue
|
||||
}
|
||||
a := t.Unix()
|
||||
b := s[6]
|
||||
if b == "0" {
|
||||
if s[8] == "0" {
|
||||
fmt.Println("skip 0 value for lon/lat")
|
||||
} else {
|
||||
t := s[7]
|
||||
f, err := strconv.ParseFloat(b, 64)
|
||||
if err == nil {
|
||||
v := m[a]
|
||||
if t == "lon" {
|
||||
v[0] = f
|
||||
}
|
||||
if t == "lat" {
|
||||
v[1] = f
|
||||
}
|
||||
m[a] = v
|
||||
if !(first) {
|
||||
fmt.Fprintf(response, ",")
|
||||
} else {
|
||||
fmt.Printf("error converting string to float64: %s\n", b)
|
||||
first = false
|
||||
}
|
||||
|
||||
fmt.Fprintf(response, "[%d, %s, %s, %s]\n", a, s[8], s[9], s[10])
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
first := true
|
||||
fmt.Fprintf(response, "[\n")
|
||||
keys := make([]int64, 0, len(m))
|
||||
for k := range m {
|
||||
keys = append(keys, k)
|
||||
}
|
||||
sort.SliceStable(keys, func(i, j int) bool { return keys[i] < keys[j] })
|
||||
|
||||
for _, k := range keys {
|
||||
if !(first) {
|
||||
fmt.Fprintf(response, ",")
|
||||
} else {
|
||||
first = false
|
||||
}
|
||||
|
||||
fmt.Fprintf(response, "[%d, %f, %f]\n", k, m[k][0], m[k][1])
|
||||
}
|
||||
fmt.Fprintf(response, "]\n")
|
||||
|
||||
} else {
|
||||
|
|
|
|||
|
|
@ -8,97 +8,34 @@
|
|||
|
||||
<link href="static/bulma-calendar/css/bulma-calendar.min.css" rel="stylesheet">
|
||||
<script src="static/bulma-calendar/js/bulma-calendar.min.js"></script>
|
||||
<script src="https://api3.geo.admin.ch/loader.js?lang=en&version=4.4.2" type="text/javascript"></script>
|
||||
<script src="static/js/map.js"></script>
|
||||
|
||||
<div class="columns" id="myselectors">
|
||||
<div class="column is-half py-1">
|
||||
<div id="reportrange" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
|
||||
<i class="fa fa-calendar"></i>
|
||||
<span></span> <i class="fa fa-caret-down"></i>
|
||||
<i class="fa fa-calendar"></i><span>100 %</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-half py-1">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="static/js/map.js"></script>
|
||||
<script src="static/js/graph.js"></script>
|
||||
|
||||
<div>
|
||||
<section id="chart">
|
||||
<!-- Content ... -->
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<script src="https://api3.geo.admin.ch/loader.js?lang=en&version=4.4.2" type="text/javascript"></script>
|
||||
<div id="map" class="mapbig"></div>
|
||||
<div id="map" class="mapbig">
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var urlParams = new URLSearchParams(window.location.search);
|
||||
var deveui = urlParams.get('deveui');
|
||||
var lon = urlParams.get('lon');
|
||||
var lat = urlParams.get('lat');
|
||||
var position = ol.proj.fromLonLat([lon, lat], "EPSG:2056");
|
||||
<div id="tooltiptext" class="slidecontainer has-text-centered">
|
||||
</div>
|
||||
|
||||
|
||||
var layer = ga.layer.create('ch.swisstopo.pixelkarte-farbe');
|
||||
var map = new ga.Map({
|
||||
target: 'map',
|
||||
layers: [layer],
|
||||
view: new ol.View({
|
||||
center: position,
|
||||
resolution: 20
|
||||
})
|
||||
});
|
||||
|
||||
// Create the layer with the icon
|
||||
var vectorLayer = new ol.layer.Vector({
|
||||
source: new ol.source.Vector({
|
||||
features: [new ol.Feature({
|
||||
geometry: new ol.geom.Point(position)
|
||||
})]
|
||||
}),
|
||||
style: new ol.style.Style({
|
||||
image: new ol.style.Icon({
|
||||
anchor: [0.5, 1],
|
||||
anchorXUnits: 'fraction',
|
||||
anchorYUnits: 'fraction',
|
||||
src: '/static/images/marker.png'
|
||||
})
|
||||
})
|
||||
});
|
||||
map.addLayer(vectorLayer);
|
||||
</script>
|
||||
|
||||
|
||||
<div class="slidecontainer">
|
||||
<input class="slider" id="datetimeslider" type="range" label="Zeitpunkt" min="0" max="200000" step="1" value="100000" onchange="updateSlider(this)" ontouchmove="updateSliderTooltip(this)" onmousemove="updateSliderTooltip(this)" />
|
||||
|
||||
<script>
|
||||
function updateSlider(c)
|
||||
{
|
||||
if(c.value <= 50000)
|
||||
{
|
||||
if(c.step != 1)
|
||||
c.step = 1;
|
||||
alert(c.value);
|
||||
}
|
||||
else
|
||||
{
|
||||
if(c.step != 3)
|
||||
c.step = 3;
|
||||
alert(c.value);
|
||||
}
|
||||
}
|
||||
|
||||
function updateSliderTooltip(c)
|
||||
{
|
||||
$('#tooltiptext').html(c.value);
|
||||
}
|
||||
</script>
|
||||
</div>
|
||||
<div class="slidecontainer has-textcentered">
|
||||
<span id="tooltiptext">0</span>
|
||||
</div>
|
||||
<div class="slidecontainer">
|
||||
<input class="slider" id="datetimeslider" type="range" label="Zeitpunkt" min="0" max="0" step="1" value="" onchange="updateSlider(this)" ontouchmove="updateSliderTooltip(this)" onmousemove="updateSliderTooltip(this)" />
|
||||
</div>
|
||||
{{ else }}
|
||||
<h4>Bitte zuerst <a href="login.html">einloggen</a></h4>
|
||||
{{end}}
|
||||
|
|
|
|||
|
|
@ -1,105 +0,0 @@
|
|||
$(function() {
|
||||
|
||||
var start = moment({hour: 0});
|
||||
var end = moment();
|
||||
var s_start = start.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
|
||||
var s_end = end.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
|
||||
|
||||
console.log("XXX: "+start.format());
|
||||
|
||||
function change_property(new_property) {
|
||||
if (new_property != property) {
|
||||
property = new_property;
|
||||
|
||||
if (history.pushState) {
|
||||
var newurl = window.location.href.replace(/property=[a-z]+/,'property='+new_property);
|
||||
window.history.pushState({path:newurl},'',newurl);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function cb(start, end) {
|
||||
$('#reportrange span').html(start.locale('de').format('D. MMM YYYY') + ' - ' + end.locale('de').format('D. MMM YYYY'));
|
||||
console.log("A new date selection was made: " + start.format() + ' to ' + end.format());
|
||||
s_start = start.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
|
||||
s_end = end.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
|
||||
console.log("Start: " + s_start + ' End: ' + s_end + ' Property: '+ property);
|
||||
drawGraph(deveui, alias, property, s_start,s_end, false);
|
||||
}
|
||||
|
||||
$('#btn_w').on("click", function() {
|
||||
change_property('w');
|
||||
drawGraph(deveui, alias, property, s_start, s_end, false);
|
||||
});
|
||||
|
||||
$('#btn_t').on("click", function() {
|
||||
change_property('t');
|
||||
drawGraph(deveui, alias, property, s_start, s_end, false);
|
||||
});
|
||||
|
||||
$('#btn_h').on("click", function() {
|
||||
change_property('h');
|
||||
drawGraph(deveui, alias, property, s_start, s_end, false);
|
||||
});
|
||||
|
||||
$('#btn_p').on("click", function() {
|
||||
change_property('p');
|
||||
drawGraph(deveui, alias, property, s_start, s_end, false);
|
||||
});
|
||||
|
||||
$('#btn_vp').on("click", function() {
|
||||
change_property('vp');
|
||||
drawGraph(deveui, alias, property, s_start, s_end, false);
|
||||
});
|
||||
|
||||
$('#reportrange').daterangepicker({
|
||||
startDate: start.local(),
|
||||
endDate: end.local(),
|
||||
regional: [ "de" ],
|
||||
"locale": {
|
||||
format: 'DD.MM.YYYY',
|
||||
"separator": " - ",
|
||||
"applyLabel": "Anwenden",
|
||||
"cancelLabel": "Abbrechen",
|
||||
"fromLabel": "Von",
|
||||
"toLabel": "Bis",
|
||||
customRangeLabel: 'Benutzerdefiniert',
|
||||
"weekLabel": "W",
|
||||
"daysOfWeek": [
|
||||
"So",
|
||||
"Mo",
|
||||
"Di",
|
||||
"Mi",
|
||||
"Do",
|
||||
"Fr",
|
||||
"Sa"
|
||||
],
|
||||
"monthNames": [
|
||||
"Jan",
|
||||
"Feb",
|
||||
"Mär",
|
||||
"Apr",
|
||||
"Mai",
|
||||
"Jun",
|
||||
"Jul",
|
||||
"Aug",
|
||||
"Sep",
|
||||
"Okt",
|
||||
"Nov",
|
||||
"Dez"
|
||||
],
|
||||
"firstDay": 1
|
||||
},
|
||||
ranges: {
|
||||
'Heute': [moment(), moment()],
|
||||
'Gestern': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
|
||||
'Letzte 7 Tage': [moment().subtract(6, 'days'), moment()],
|
||||
'Letzte 30 Tage': [moment().subtract(29, 'days'), moment()],
|
||||
'Diesen Monat': [moment().startOf('month'), moment().endOf('month')],
|
||||
'Letzten Monat': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
|
||||
}
|
||||
}, cb);
|
||||
|
||||
//cb(start, end);
|
||||
|
||||
});
|
||||
189
static/js/map.js
189
static/js/map.js
|
|
@ -2,6 +2,21 @@ var urlParams = new URLSearchParams(window.location.search);
|
|||
var deveui = urlParams.get('deveui');
|
||||
var start = urlParams.get('start');
|
||||
var stop = urlParams.get('stop');
|
||||
var lon = urlParams.get('lon');
|
||||
var lat = urlParams.get('lat');
|
||||
var map;
|
||||
|
||||
if (start == null) {
|
||||
var dstart = moment({hour: 0});
|
||||
var start = dstart.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
|
||||
}
|
||||
|
||||
if (stop == null) {
|
||||
var dstop = moment();
|
||||
var stop = dstop.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
|
||||
}
|
||||
|
||||
var datapoints;
|
||||
|
||||
function refreshDatapoints(deveui, start, stop) {
|
||||
range = ""
|
||||
|
|
@ -29,20 +44,172 @@ function refreshDatapoints(deveui, start, stop) {
|
|||
return;
|
||||
}
|
||||
|
||||
alert(mydata);
|
||||
datapoints = mydata;
|
||||
$('#datetimeslider').attr('max', mydata.length - 1);
|
||||
$('#datetimeslider').val(mydata.length - 1);
|
||||
var unix_timestamp = mydata[mydata.length - 1][0];
|
||||
var date = new Date(unix_timestamp * 1000);
|
||||
var myhtml = moment(date).format('DD.MM.YYYY HH:mm') + ' / ' + mydata[mydata.length - 1][3] + '% <i class="fa fa-battery-three-quarters"></i>';
|
||||
$('#tooltiptext').html(myhtml);
|
||||
});
|
||||
}
|
||||
|
||||
if (start == null) {
|
||||
var dstart = moment({hour: 0});
|
||||
var start = dstart.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
|
||||
function updateSlider(c)
|
||||
{
|
||||
if(c.value <= 50000)
|
||||
{
|
||||
if(c.step != 1)
|
||||
c.step = 1;
|
||||
//alert(c.value);
|
||||
}
|
||||
else
|
||||
{
|
||||
if(c.step != 3)
|
||||
c.step = 3;
|
||||
//alert(c.value);
|
||||
}
|
||||
}
|
||||
|
||||
if (stop == null) {
|
||||
var dstop = moment();
|
||||
var stop = dstop.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
|
||||
|
||||
$(document).ready(function() {
|
||||
var position = ol.proj.fromLonLat([lon, lat], "EPSG:2056");
|
||||
console.log("Document Ready Position:");
|
||||
console.log(position);
|
||||
|
||||
var layer = ga.layer.create('ch.swisstopo.pixelkarte-farbe');
|
||||
map = new ga.Map({
|
||||
target: 'map',
|
||||
layers: [layer],
|
||||
view: new ol.View({
|
||||
center: position,
|
||||
resolution: 20
|
||||
})
|
||||
});
|
||||
|
||||
// Create the layer with the icon
|
||||
var vectorLayer = new ol.layer.Vector({
|
||||
source: new ol.source.Vector({
|
||||
features: [new ol.Feature({
|
||||
geometry: new ol.geom.Point(position)
|
||||
})]
|
||||
}),
|
||||
style: new ol.style.Style({
|
||||
image: new ol.style.Icon({
|
||||
anchor: [0.5, 1],
|
||||
anchorXUnits: 'fraction',
|
||||
anchorYUnits: 'fraction',
|
||||
src: '/static/images/marker.png'
|
||||
})
|
||||
})
|
||||
});
|
||||
map.addLayer(vectorLayer);
|
||||
|
||||
$('#reportrange span').html(moment(start).locale('de').format('D. MMM YYYY') + ' - ' + moment(stop).locale('de').format('D. MMM YYYY'));
|
||||
|
||||
refreshDatapoints(deveui,start,stop);
|
||||
console.log("End of document ready...");
|
||||
});
|
||||
|
||||
|
||||
$(function() {
|
||||
var start = moment({hour: 0});
|
||||
var end = moment();
|
||||
var s_start = start.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
|
||||
var s_end = end.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
|
||||
|
||||
console.log("XXX: "+start.format());
|
||||
|
||||
function cb(start, end) {
|
||||
$('#reportrange span').html(start.locale('de').format('D. MMM YYYY') + ' - ' + end.locale('de').format('D. MMM YYYY'));
|
||||
console.log("A new date selection was made: " + start.format() + ' to ' + end.format());
|
||||
s_start = start.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
|
||||
s_end = end.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
|
||||
console.log("Start: " + s_start + ' End: ' + s_end);
|
||||
//drawGraph(deveui, alias, property, s_start,s_end, false);
|
||||
refreshDatapoints(deveui, s_start, s_end);
|
||||
}
|
||||
|
||||
$('#reportrange').daterangepicker({
|
||||
startDate: start.local(),
|
||||
endDate: end.local(),
|
||||
regional: [ "de" ],
|
||||
"locale": {
|
||||
format: 'DD.MM.YYYY',
|
||||
"separator": " - ",
|
||||
"applyLabel": "Anwenden",
|
||||
"cancelLabel": "Abbrechen",
|
||||
"fromLabel": "Von",
|
||||
"toLabel": "Bis",
|
||||
customRangeLabel: 'Benutzerdefiniert',
|
||||
"weekLabel": "W",
|
||||
"daysOfWeek": [
|
||||
"So",
|
||||
"Mo",
|
||||
"Di",
|
||||
"Mi",
|
||||
"Do",
|
||||
"Fr",
|
||||
"Sa"
|
||||
],
|
||||
"monthNames": [
|
||||
"Jan",
|
||||
"Feb",
|
||||
"Mär",
|
||||
"Apr",
|
||||
"Mai",
|
||||
"Jun",
|
||||
"Jul",
|
||||
"Aug",
|
||||
"Sep",
|
||||
"Okt",
|
||||
"Nov",
|
||||
"Dez"
|
||||
],
|
||||
"firstDay": 1
|
||||
},
|
||||
ranges: {
|
||||
'Heute': [moment(), moment()],
|
||||
'Gestern': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
|
||||
'Letzte 7 Tage': [moment().subtract(6, 'days'), moment()],
|
||||
'Letzte 30 Tage': [moment().subtract(29, 'days'), moment()],
|
||||
'Diesen Monat': [moment().startOf('month'), moment().endOf('month')],
|
||||
'Letzten Monat': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
|
||||
}
|
||||
}, cb);
|
||||
|
||||
//cb(start, end);
|
||||
|
||||
});
|
||||
|
||||
|
||||
function updateSliderTooltip(c)
|
||||
{
|
||||
var unix_timestamp = datapoints[c.value][0];
|
||||
var date = new Date(unix_timestamp * 1000);
|
||||
var myhtml = moment(date).format('DD.MM.YYYY HH:mm') + ' / ' + datapoints[c.value][3] + '% <i class="fa fa-battery-three-quarters"></i>';
|
||||
$('#tooltiptext').html(myhtml);
|
||||
|
||||
var position = ol.proj.fromLonLat([datapoints[c.value][2], datapoints[c.value][1]], "EPSG:2056");
|
||||
|
||||
console.log("updateSliderTooltip Position:");
|
||||
console.log(position);
|
||||
|
||||
// Create the layer with the icon
|
||||
var vectorLayer2 = new ol.layer.Vector({
|
||||
source: new ol.source.Vector({
|
||||
features: [new ol.Feature({
|
||||
geometry: new ol.geom.Point(position)
|
||||
})]
|
||||
}),
|
||||
style: new ol.style.Style({
|
||||
image: new ol.style.Icon({
|
||||
anchor: [0.5, 1],
|
||||
anchorXUnits: 'fraction',
|
||||
anchorYUnits: 'fraction',
|
||||
src: '/static/images/marker.png'
|
||||
})
|
||||
})
|
||||
});
|
||||
map.addLayer(vectorLayer2);
|
||||
|
||||
}
|
||||
|
||||
$('#reportrange span').html(moment(start).locale('de').format('D. MMM YYYY') + ' - ' + moment(stop).locale('de').format('D. MMM YYYY'));
|
||||
|
||||
refreshDatapoints(deveui,start,stop);
|
||||
|
|
|
|||
Loading…
Reference in New Issue