diff --git a/metrics.go b/metrics.go index 2b3541e..f7ce87b 100644 --- a/metrics.go +++ b/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 { diff --git a/snippets/map.html b/snippets/map.html index 090c373..f90da26 100644 --- a/snippets/map.html +++ b/snippets/map.html @@ -8,97 +8,34 @@ + +
-   - + 100 %
- - -
- -
+
+
- - - -
- - - -
-
- 0 -
+
+ +
{{ else }}

Bitte zuerst einloggen

{{end}} diff --git a/static/js/graph.js b/static/js/graph.js deleted file mode 100644 index 3be9191..0000000 --- a/static/js/graph.js +++ /dev/null @@ -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); - -}); diff --git a/static/js/map.js b/static/js/map.js index bbe9ac7..9a4bf4f 100644 --- a/static/js/map.js +++ b/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] + '% '; + $('#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] + '% '; + $('#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);