drpuur
/
wo-bisch-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

migrate to leaflet library, part 1

This commit is contained in:
Joerg Lehmann 2021-03-17 20:36:43 +01:00
parent e4001f2d44
commit ae5ead152d
2 changed files with 225 additions and 202 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
snippets/tracker.html
View File

@ -1,3 +1,20 @@
{{define "header_additions"}}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<style>
#map {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
</style>
{{end}}
{{define "body_content"}} {{define "body_content"}}
{{ if ne .UserName "" }} {{ if ne .UserName "" }}
<script src="https://api3.geo.admin.ch/loader.js?lang=en&version=4.4.2" type="text/javascript"></script> <script src="https://api3.geo.admin.ch/loader.js?lang=en&version=4.4.2" type="text/javascript"></script>
@ -88,6 +105,8 @@ Sie erhalten eine E-Mail, sobald die Zahlung erfolgreich abgeschlossen ist.
<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 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 &uuml;bermittelte Messung: {{.Timestamp}}</p> <p id="lastmeasurement_{{.Deveui}}" class="has-text-centered">letzte &uuml;bermittelte Messung: {{.Timestamp}}</p>
<div id="{{.Deveui}}" class="columns mt-3"> <div id="{{.Deveui}}" class="columns mt-3">
<p id="lat" hidden>{{.Lat}}</p>
<p id="lon" hidden>{{.Lon}}</p>
<div class="column is-one-quarter"></div> <div class="column is-one-quarter"></div>
<div class="column is-half"> <div class="column is-half">
<a class="block-link" href="/map.html?deveui={{.Deveui}}&alias={{.Alias}}&lat={{.Lat}}&lon={{.Lon}}"> <a class="block-link" href="/map.html?deveui={{.Deveui}}&alias={{.Alias}}&lat={{.Lat}}&lon={{.Lon}}">
@ -97,41 +116,6 @@ Sie erhalten eine E-Mail, sobald die Zahlung erfolgreich abgeschlossen ist.
<div class="column is-one-quarter"></div> <div class="column is-one-quarter"></div>
</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"> <div class="has-text-centered">
<span class="is-size-6 has-text-centered">Abo aktiv bis</span> <span class="is-size-6 has-text-centered">Abo aktiv bis</span>
<span class="paid_until is-size-6 has-text-centered">{{.ActiveUntil}}</span> <span class="paid_until is-size-6 has-text-centered">{{.ActiveUntil}}</span>

373
static/js/tracker.js
View File

@ -7,185 +7,184 @@ function validate(what, text) {
return re.test(text); return re.test(text);
} }
// A $( document ).ready() block.
$( document ).ready(function() { $( document ).ready(function() {
$(".show-modal").click(function() { $(".show-modal").click(function() {
$("#alias_exclamation").hide(); $("#alias_exclamation").hide();
$("#smsnumber_exclamation").hide(); $("#smsnumber_exclamation").hide();
var alias = $(this).prev().html(); var alias = $(this).prev().html();
var deveui = $(this).prev().attr('id').replace("alias_",""); var deveui = $(this).prev().attr('id').replace("alias_","");
$('#deveui').html(deveui); $('#deveui').html(deveui);
var alarmactive = $('#alarmactive_'+deveui).html(); var alarmactive = $('#alarmactive_'+deveui).html();
var smsnumber = $('#smsnumber_'+deveui).html(); var smsnumber = $('#smsnumber_'+deveui).html();
$("#alias").val(alias); $("#alias").val(alias);
console.log(alarmactive); console.log(alarmactive);
if (alarmactive == "1") { if (alarmactive == "1") {
$('#checkbox').prop('checked', true); $('#checkbox').prop('checked', true);
} else { } else {
$('#checkbox').prop('checked', false); $('#checkbox').prop('checked', false);
}
$("#smsnumber").val(smsnumber);
$("#modal").addClass("is-active");
});
$("#cart-close").click(function() {
$("#cart").removeClass("is-active");
});
$("#payment_notifier_close").click(function() {
$("#payment_notifier").removeClass("is-active");
location.reload(true);
});
$(".abo_plus").click(function() {
console.log("abo_plus");
el = $(this).parent().find(".abo_add_years");
el_text = $(this).parent().parent().find(".abo_add_years_text");
counter = Number(el.html());
if (counter < 3) {
counter = counter + 1;
el.html(counter);
if (counter == 1) {
el_text.html("+" + counter + " Jahr");
} else {
el_text.html("+" + counter + " Jahre");
}
}
});
$(".abo_minus").click(function() {
console.log("abo_minus");
el = $(this).parent().find(".abo_add_years");
el_text = $(this).parent().parent().find(".abo_add_years_text");
counter = Number(el.html());
if (counter > 0) {
counter = counter - 1;
el.html(counter);
if (counter == 0) {
el_text.html("&nbsp;");
} else if (counter == 1) {
el_text.html("+" + counter + " Jahr");
} else {
el_text.html("+" + counter + " Jahre");
}
}
});
function add_years(dt,n)
{
return new Date(dt.setFullYear(dt.getFullYear() + n));
}
$(".abo_pay").click(function() {
console.log("pay...");
loadStripeLibrary();
counter = 0;
charge_data = '';
abo_table = '<table class="table is-bordered is-fullwidth" >';
abo_table += '<tr><th class="is-2">Alias</th><th>verl&auml;ngern bis</th><th class="has-text-right">Betrag</th></tr>';
$(".tracker").each(function( index ) {
console.log( index + ": " + $( this ).find(".alias").html() );
this_count = Number($( this ).find(".abo_add_years").html());
if (this_count > 0) {
counter += this_count;
paid_until = $( this ).find(".paid_until").html();
if (moment(paid_until,'DD.MM.YYYY') < moment()) {
this_date = moment().format('DD.MM.YYYY');
} else {
this_date = paid_until;
}
abo_table += '<tr><td>' + $( this ).find('.alias').html() + '</td><td>' + moment(this_date,'DD.MM.YYYY').add('years', this_count).format('DD.MM.YYYY') + '</td><td class="has-text-right">' + (this_count * 24).toFixed(2) + '</td></tr>';
if (charge_data == '') {
charge_data = $( this ).find("div").first().attr('id') + ":" + this_count;
} else {
charge_data += "," + $( this ).find("div").first().attr('id') + ":" + this_count;
}
} }
console.log( counter ); $("#smsnumber").val(smsnumber);
$("#modal").addClass("is-active");
}); });
abo_table += '<tr><td>Total CHF</td><td></td><td class="has-text-right">' + (counter * 24).toFixed(2) + '</td></tr>';
console.log("Counter: "+counter);
abo_table += "</table>";
if (counter > 0) {
console.log(abo_table);
console.log("charge_data: "+charge_data);
$("#abos_verlaengern").html(abo_table);
$("#charge_data").html(charge_data);
$("#cart").addClass("is-active");
}
});
$("#modal-close").click(function() { $("#cart-close").click(function() {
console.log("blabla"); $("#cart").removeClass("is-active");
$("#modal").removeClass("is-active"); });
});
$("#modal-save").click(function() { $("#payment_notifier_close").click(function() {
var alarmactive = "0"; $("#payment_notifier").removeClass("is-active");
if ($('#checkbox').prop('checked')) { location.reload(true);
alarmactive = "1"; });
$(".abo_plus").click(function() {
console.log("abo_plus");
el = $(this).parent().find(".abo_add_years");
el_text = $(this).parent().parent().find(".abo_add_years_text");
counter = Number(el.html());
if (counter < 3) {
counter = counter + 1;
el.html(counter);
if (counter == 1) {
el_text.html("+" + counter + " Jahr");
} else {
el_text.html("+" + counter + " Jahre");
}
}
});
$(".abo_minus").click(function() {
console.log("abo_minus");
el = $(this).parent().find(".abo_add_years");
el_text = $(this).parent().parent().find(".abo_add_years_text");
counter = Number(el.html());
if (counter > 0) {
counter = counter - 1;
el.html(counter);
if (counter == 0) {
el_text.html("&nbsp;");
} else if (counter == 1) {
el_text.html("+" + counter + " Jahr");
} else {
el_text.html("+" + counter + " Jahre");
}
}
});
function add_years(dt,n)
{
return new Date(dt.setFullYear(dt.getFullYear() + n));
} }
// Validation Code $(".abo_pay").click(function() {
var is_valid = true; console.log("pay...");
if (!validate('alias',$('#alias').val())) { loadStripeLibrary();
$('#alias_errormsg').html('Ung&uuml;ltige Bezeichnung; erlaubte Zeichen A-Z, 0-9 und Leerschlag'); counter = 0;
$("#alias").addClass("is-danger"); charge_data = '';
$("#alias_exclamation").show(); abo_table = '<table class="table is-bordered is-fullwidth" >';
is_valid = false; abo_table += '<tr><th class="is-2">Alias</th><th>verl&auml;ngern bis</th><th class="has-text-right">Betrag</th></tr>';
} else { $(".tracker").each(function( index ) {
$('#alias_errormsg').html(''); console.log( index + ": " + $( this ).find(".alias").html() );
$("#alias").removeClass("is-danger"); this_count = Number($( this ).find(".abo_add_years").html());
$("#alias_exclamation").hide(); if (this_count > 0) {
} counter += this_count;
paid_until = $( this ).find(".paid_until").html();
if (!validate('smsnumber',$('#smsnumber').val())) { if (moment(paid_until,'DD.MM.YYYY') < moment()) {
$('#smsnumber_errormsg').html('Beispiel einer g&uuml;ltigen SMS Nummer: +41761234567'); this_date = moment().format('DD.MM.YYYY');
$("#smsnumber").addClass("is-danger"); } else {
$("#smsnumber_exclamation").show(); this_date = paid_until;
is_valid = false; }
} else { abo_table += '<tr><td>' + $( this ).find('.alias').html() + '</td><td>' + moment(this_date,'DD.MM.YYYY').add('years', this_count).format('DD.MM.YYYY') + '</td><td class="has-text-right">' + (this_count * 24).toFixed(2) + '</td></tr>';
$('#smsnumber_errormsg').html(''); if (charge_data == '') {
$("#smsnumber").removeClass("is-danger"); charge_data = $( this ).find("div").first().attr('id') + ":" + this_count;
$("#smsnumber_exclamation").hide(); } else {
} charge_data += "," + $( this ).find("div").first().attr('id') + ":" + this_count;
}
if (!(is_valid)) {
return;
}
$.ajax({
url: "save_scale_settings",
type: "get", //send it through get method
dataType: "json",
data: {
deveui: $('#deveui').html(),
alias: $('#alias').val(),
smsnumber: $("#smsnumber").val(),
alarmactive: alarmactive
},
success: function(response) {
console.log('save success');
if (response.rc == 0) {
$('#alias_'+$('#deveui').html()).html($('#alias').val());
var alarmactive = "0";
if ($('#checkbox').prop('checked')) {
alarmactive = "1";
}
$('#alarmactive_'+$('#deveui').html()).html(alarmactive);
$('#smsnumber_'+$('#deveui').html()).html($('#smsnumber').val());
} }
}, console.log( counter );
error: function(xhr) { });
console.log('save error'); abo_table += '<tr><td>Total CHF</td><td></td><td class="has-text-right">' + (counter * 24).toFixed(2) + '</td></tr>';
//Do Something to handle error console.log("Counter: "+counter);
abo_table += "</table>";
if (counter > 0) {
console.log(abo_table);
console.log("charge_data: "+charge_data);
$("#abos_verlaengern").html(abo_table);
$("#charge_data").html(charge_data);
$("#cart").addClass("is-active");
} }
}); });
console.log("save"); $("#modal-close").click(function() {
$("#modal").removeClass("is-active"); console.log("blabla");
}); $("#modal").removeClass("is-active");
});
$("#modal-save").click(function() {
var alarmactive = "0";
if ($('#checkbox').prop('checked')) {
alarmactive = "1";
}
// Validation Code
var is_valid = true;
if (!validate('alias',$('#alias').val())) {
$('#alias_errormsg').html('Ung&uuml;ltige Bezeichnung; erlaubte Zeichen A-Z, 0-9 und Leerschlag');
$("#alias").addClass("is-danger");
$("#alias_exclamation").show();
is_valid = false;
} else {
$('#alias_errormsg').html('');
$("#alias").removeClass("is-danger");
$("#alias_exclamation").hide();
}
if (!validate('smsnumber',$('#smsnumber').val())) {
$('#smsnumber_errormsg').html('Beispiel einer g&uuml;ltigen SMS Nummer: +41761234567');
$("#smsnumber").addClass("is-danger");
$("#smsnumber_exclamation").show();
is_valid = false;
} else {
$('#smsnumber_errormsg').html('');
$("#smsnumber").removeClass("is-danger");
$("#smsnumber_exclamation").hide();
}
if (!(is_valid)) {
return;
}
$.ajax({
url: "save_scale_settings",
type: "get", //send it through get method
dataType: "json",
data: {
deveui: $('#deveui').html(),
alias: $('#alias').val(),
smsnumber: $("#smsnumber").val(),
alarmactive: alarmactive
},
success: function(response) {
console.log('save success');
if (response.rc == 0) {
$('#alias_'+$('#deveui').html()).html($('#alias').val());
var alarmactive = "0";
if ($('#checkbox').prop('checked')) {
alarmactive = "1";
}
$('#alarmactive_'+$('#deveui').html()).html(alarmactive);
$('#smsnumber_'+$('#deveui').html()).html($('#smsnumber').val());
}
},
error: function(xhr) {
console.log('save error');
//Do Something to handle error
}
});
console.log("save");
$("#modal").removeClass("is-active");
});
}); });
@ -306,3 +305,43 @@ $('#cart-pay').on('click', function(ev) {
StartPaymentProgress(); StartPaymentProgress();
PayMe(); PayMe();
}); });
// draw all maps
var woBischIcon = L.icon({
iconUrl: '/static/images/marker.png',
iconSize: [64, 64],
iconAnchor: [32, 64]
});
var maps = [];
$(document).ready(function() {
$(".tracker").each(function(index) {
console.log('Draw Map (' + index + "): " + $(this).find(".alias").html());
deveui = $(this).find("div").first().attr("id");
lat = $(this).find("#lat").html();
lon = $(this).find("#lon").html();
console.log("Deveui: " + deveui);
var map = new L.Map('map_' + deveui, {
crs: L.CRS.EPSG3857,
zoomControl: false
});
map.dragging.disable();
map.touchZoom.disable();
map.doubleClickZoom.disable();
map.scrollWheelZoom.disable();
map.boxZoom.disable();
map.keyboard.disable();
if (map.tap) map.tap.disable();
var url = 'https://wmts20.geo.admin.ch/1.0.0/ch.swisstopo.pixelkarte-farbe/default/current/3857/{z}/{x}/{y}.jpeg';
var tilelayer = new L.tileLayer(url);
map.addLayer(tilelayer);
map.setView(L.latLng(lat, lon), 10);
var marker = L.marker([lat, lon],{icon: woBischIcon}).addTo(map);
maps.push(map);
});
});