106 lines
2.8 KiB
HTML
106 lines
2.8 KiB
HTML
{{define "body_content"}}
|
|
{{ if ne .UserName "" }}
|
|
|
|
<script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/momentjs/latest/moment-with-locales.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
|
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
|
|
|
|
<link href="static/bulma-calendar/css/bulma-calendar.min.css" rel="stylesheet">
|
|
<script src="static/bulma-calendar/js/bulma-calendar.min.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>
|
|
</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>
|
|
|
|
<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");
|
|
|
|
|
|
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>
|
|
{{ else }}
|
|
<h4>Bitte zuerst <a href="login.html">einloggen</a></h4>
|
|
{{end}}
|
|
{{end}}
|