still improving map logic
This commit is contained in:
@@ -1,63 +0,0 @@
|
||||
{{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">
|
||||
<a id="btn_w" class="button">
|
||||
<span class="icon">
|
||||
<i class="fa fa-balance-scale"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a id="btn_t" class="button">
|
||||
<span class="icon">
|
||||
<i class="fa fa-thermometer-half"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a id="btn_h" class="button">
|
||||
<span class="icon">
|
||||
<i class="fa fa-tint"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a id="btn_p" class="button">
|
||||
<span class="icon">
|
||||
<i class="fa fa-cloud"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a id="btn_vp" class="button">
|
||||
<span class="icon">
|
||||
<i class="fa fa-battery-three-quarters"></i>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="static/js/graph.js"></script>
|
||||
|
||||
<div>
|
||||
<section id="chart">
|
||||
<!-- Content ... -->
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
|
||||
|
||||
<script src="static/js/chart.js"></script>
|
||||
|
||||
{{ else }}
|
||||
<h4>Bitte zuerst <a href="login.html">einloggen</a></h4>
|
||||
{{end}}
|
||||
{{end}}
|
||||
@@ -0,0 +1,105 @@
|
||||
{{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}}
|
||||
+72
-140
@@ -1,5 +1,6 @@
|
||||
{{define "body_content"}}
|
||||
{{ if ne .UserName "" }}
|
||||
<script src="https://api3.geo.admin.ch/loader.js?lang=en&version=4.4.2" type="text/javascript"></script>
|
||||
<div id="modal" class="modal">
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-card">
|
||||
@@ -83,155 +84,86 @@ Sie erhalten eine E-Mail, sobald die Zahlung erfolgreich abgeschlossen ist.
|
||||
</div>
|
||||
|
||||
{{range .LastMetrics}}
|
||||
<div class="column waage is-full notification is-warning">
|
||||
<div class="column tracker is-full notification is-warning">
|
||||
<p class="is-size-2 is-size-5-mobile has-text-centered has-text-weight-bold" ><span class="alias" id="alias_{{.Deveui}}">{{.Alias}}</span>{{ if not .Readonly }}<a class="show-modal" class="block-link"><span style="float:right;" class="icon is-size-4 is-size-5-mobile"><i class="fa fa-cog"></i></span></a>{{ end }}</p>
|
||||
<p id="lastmeasurement_{{.Deveui}}" class="has-text-centered">letzte übermittelte Messung: {{.Timestamp}}</p>
|
||||
<div id="{{.Deveui}}">
|
||||
<div class="column is-full notification is-warning">
|
||||
<nav class="level">
|
||||
<div class="level-item has-text-centered">
|
||||
<a class="block-link" href="/graph.html?deveui={{.Deveui}}&alias={{.Alias}}&property=t">
|
||||
<div>
|
||||
<p class="icon"><i class="fa fa-thermometer-half"></i></p>
|
||||
<p id="temp_{{.Deveui}}" class="title">Lat {{.Lat}}</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="level-item has-text-centered">
|
||||
<a class="block-link" href="/graph.html?deveui={{.Deveui}}&alias={{.Alias}}&property=h">
|
||||
<div>
|
||||
<p class="icon"><i class="fa fa-tint"></i></p>
|
||||
<p id="humidity_{{.Deveui}}" class="title">Lon {{.Lon}}</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
{{ if (lt .DaysUntilDeactivated 0) }}
|
||||
<div class="level-item has-text-centered">
|
||||
<div>
|
||||
<p class="icon"><i class="fa fa-balance-scale"></i></p>
|
||||
<p id="weight_{{.Deveui}}" class="title is-size-2 has-text-weight-bold has-text-danger">Abo ist abgelaufen</p>
|
||||
</div>
|
||||
</div>
|
||||
{{ else }}
|
||||
{{ end }}
|
||||
<div class="level-item has-text-centered">
|
||||
<a class="block-link" href="/graph.html?deveui={{.Deveui}}&alias={{.Alias}}&property=p">
|
||||
<div>
|
||||
<p class="icon"><i class="fa fa-cloud"></i></p>
|
||||
<p id="pressure_{{.Deveui}}" class="title">VBat {{.Vbat}} mV</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="level-item has-text-centered">
|
||||
<a class="block-link" href="/graph.html?deveui={{.Deveui}}&alias={{.Alias}}&property=vp">
|
||||
<div>
|
||||
<p class="icon"><i class="fa fa-battery-three-quarters"></i></p>
|
||||
<p id="acculevel_{{.Deveui}}" class="title">Fw {{.Fw}}</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<script src="https://api3.geo.admin.ch/loader.js?lang=en&version=4.4.2" type="text/javascript"></script>
|
||||
<div id="map_{{.Deveui}}" class="map"></div>
|
||||
|
||||
<script>
|
||||
var position = ol.proj.fromLonLat([{{.LonJS}}, {{.LatJS}}], "EPSG:2056");
|
||||
|
||||
var layer = ga.layer.create('ch.swisstopo.pixelkarte-farbe');
|
||||
var map_{{.DeveuiJS}} = new ga.Map({
|
||||
target: 'map_{{.Deveui}}',
|
||||
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_{{.DeveuiJS}}.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="has-text-centered">
|
||||
<span class="is-size-6 has-text-centered">Abo aktiv bis</span>
|
||||
<span class="paid_until is-size-6 has-text-centered">{{.ActiveUntil}}</span>
|
||||
</div>
|
||||
{{ if (lt .DaysUntilDeactivated 1095) }}
|
||||
<div class="has-text-centered is-size-7">
|
||||
<p class="abo_add_years_text" id="abo_add_years_text_{.Deveui}}"> </p>
|
||||
</div>
|
||||
<div class="has-text-centered">
|
||||
<p class="abo_add_years" id="abo_add_years_{{.Deveui}}" hidden>0</p>
|
||||
<a class="block-link abo_plus is-unselectable" id="abo_plus_{{.Deveui}}">
|
||||
<span class="icon is-medium">
|
||||
<i class="fa fa-lg fa-plus"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a class="block-link abo_pay is-unselectable" id="abo_{{.Deveui}}">
|
||||
<span class="icon is-medium">
|
||||
<i class="fa fa-2x fa-shopping-cart"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a class="block-link abo_minus is-unselectable" id="abo_minus_{{.Deveui}}">
|
||||
<span class="icon is-medium">
|
||||
<i class="fa fa-lg fa-minus"></i>
|
||||
</span>
|
||||
<div id="{{.Deveui}}" class="columns mt-3">
|
||||
<div class="column is-one-quarter"></div>
|
||||
<div class="column is-half">
|
||||
<a class="block-link" href="/map.html?deveui={{.Deveui}}&alias={{.Alias}}&lat={{.Lat}}&lon={{.Lon}}">
|
||||
<div id="map_{{.Deveui}}" class="map"></div>
|
||||
</a>
|
||||
</div>
|
||||
{{ end }}
|
||||
<div class="column is-one-quarter"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var position = ol.proj.fromLonLat([{{.LonJS}}, {{.LatJS}}], "EPSG:2056");
|
||||
|
||||
var layer = ga.layer.create('ch.swisstopo.pixelkarte-farbe');
|
||||
var map_{{.DeveuiJS}} = new ga.Map({
|
||||
target: 'map_{{.Deveui}}',
|
||||
interactions: [],
|
||||
controls: [],
|
||||
layers: [layer],
|
||||
view: new ol.View({
|
||||
center: position,
|
||||
controls: [],
|
||||
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_{{.DeveuiJS}}.addLayer(vectorLayer);
|
||||
</script>
|
||||
|
||||
<div class="has-text-centered">
|
||||
<span class="is-size-6 has-text-centered">Abo aktiv bis</span>
|
||||
<span class="paid_until is-size-6 has-text-centered">{{.ActiveUntil}}</span>
|
||||
</div>
|
||||
{{ if (lt .DaysUntilDeactivated 1095) }}
|
||||
<div class="has-text-centered is-size-7">
|
||||
<p class="abo_add_years_text" id="abo_add_years_text_{.Deveui}}"> </p>
|
||||
</div>
|
||||
<div class="has-text-centered">
|
||||
<p class="abo_add_years" id="abo_add_years_{{.Deveui}}" hidden>0</p>
|
||||
<a class="block-link abo_plus is-unselectable" id="abo_plus_{{.Deveui}}">
|
||||
<span class="icon is-medium">
|
||||
<i class="fa fa-lg fa-plus"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a class="block-link abo_pay is-unselectable" id="abo_{{.Deveui}}">
|
||||
<span class="icon is-medium">
|
||||
<i class="fa fa-2x fa-shopping-cart"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a class="block-link abo_minus is-unselectable" id="abo_minus_{{.Deveui}}">
|
||||
<span class="icon is-medium">
|
||||
<i class="fa fa-lg fa-minus"></i>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/momentjs/latest/moment-with-locales.min.js"></script>
|
||||
<script src="static/js/scales.js"></script>
|
||||
<script src="static/js/tracker.js"></script>
|
||||
{{ else }}
|
||||
<h4>Bitte zuerst <a href="login.html">einloggen</a></h4>
|
||||
{{end}}
|
||||
|
||||
Reference in New Issue
Block a user