From ae5ead152d41a86ff64cd2280c722277995b86b1 Mon Sep 17 00:00:00 2001 From: Joerg Lehmann Date: Wed, 17 Mar 2021 20:36:43 +0100 Subject: [PATCH] migrate to leaflet library, part 1 --- snippets/tracker.html | 54 +++--- static/js/tracker.js | 373 +++++++++++++++++++++++------------------- 2 files changed, 225 insertions(+), 202 deletions(-) diff --git a/snippets/tracker.html b/snippets/tracker.html index 544e5ec..8d03bae 100644 --- a/snippets/tracker.html +++ b/snippets/tracker.html @@ -1,3 +1,20 @@ +{{define "header_additions"}} + + + +{{end}} {{define "body_content"}} {{ if ne .UserName "" }} @@ -88,6 +105,8 @@ Sie erhalten eine E-Mail, sobald die Zahlung erfolgreich abgeschlossen ist.

{{.Alias}}{{ if not .Readonly }}{{ end }}

letzte übermittelte Messung: {{.Timestamp}}

+ +
@@ -97,41 +116,6 @@ Sie erhalten eine E-Mail, sobald die Zahlung erfolgreich abgeschlossen ist.
- -
Abo aktiv bis diff --git a/static/js/tracker.js b/static/js/tracker.js index 9c32c0a..d9998fe 100644 --- a/static/js/tracker.js +++ b/static/js/tracker.js @@ -7,185 +7,184 @@ function validate(what, text) { return re.test(text); } -// A $( document ).ready() block. $( document ).ready(function() { -$(".show-modal").click(function() { - $("#alias_exclamation").hide(); - $("#smsnumber_exclamation").hide(); - var alias = $(this).prev().html(); - var deveui = $(this).prev().attr('id').replace("alias_",""); - $('#deveui').html(deveui); - var alarmactive = $('#alarmactive_'+deveui).html(); - var smsnumber = $('#smsnumber_'+deveui).html(); + $(".show-modal").click(function() { + $("#alias_exclamation").hide(); + $("#smsnumber_exclamation").hide(); + var alias = $(this).prev().html(); + var deveui = $(this).prev().attr('id').replace("alias_",""); + $('#deveui').html(deveui); + var alarmactive = $('#alarmactive_'+deveui).html(); + var smsnumber = $('#smsnumber_'+deveui).html(); - $("#alias").val(alias); - console.log(alarmactive); - if (alarmactive == "1") { - $('#checkbox').prop('checked', true); - } else { - $('#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(" "); - } 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 = ''; - abo_table += ''; - $(".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 += ''; - if (charge_data == '') { - charge_data = $( this ).find("div").first().attr('id') + ":" + this_count; - } else { - charge_data += "," + $( this ).find("div").first().attr('id') + ":" + this_count; - } + $("#alias").val(alias); + console.log(alarmactive); + if (alarmactive == "1") { + $('#checkbox').prop('checked', true); + } else { + $('#checkbox').prop('checked', false); } - console.log( counter ); + $("#smsnumber").val(smsnumber); + $("#modal").addClass("is-active"); }); - abo_table += ''; - console.log("Counter: "+counter); - abo_table += "
Aliasverlängern bisBetrag
' + $( this ).find('.alias').html() + '' + moment(this_date,'DD.MM.YYYY').add('years', this_count).format('DD.MM.YYYY') + '' + (this_count * 24).toFixed(2) + '
Total CHF' + (counter * 24).toFixed(2) + '
"; - 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() { - console.log("blabla"); - $("#modal").removeClass("is-active"); -}); + $("#cart-close").click(function() { + $("#cart").removeClass("is-active"); + }); -$("#modal-save").click(function() { - var alarmactive = "0"; - if ($('#checkbox').prop('checked')) { - alarmactive = "1"; + $("#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(" "); + } 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 - var is_valid = true; - if (!validate('alias',$('#alias').val())) { - $('#alias_errormsg').html('Ungü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ü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()); + $(".abo_pay").click(function() { + console.log("pay..."); + loadStripeLibrary(); + counter = 0; + charge_data = ''; + abo_table = ''; + abo_table += ''; + $(".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 += ''; + if (charge_data == '') { + charge_data = $( this ).find("div").first().attr('id') + ":" + this_count; + } else { + charge_data += "," + $( this ).find("div").first().attr('id') + ":" + this_count; + } } - }, - error: function(xhr) { - console.log('save error'); - //Do Something to handle error + console.log( counter ); + }); + abo_table += ''; + console.log("Counter: "+counter); + abo_table += "
Aliasverlängern bisBetrag
' + $( this ).find('.alias').html() + '' + moment(this_date,'DD.MM.YYYY').add('years', this_count).format('DD.MM.YYYY') + '' + (this_count * 24).toFixed(2) + '
Total CHF' + (counter * 24).toFixed(2) + '
"; + 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").removeClass("is-active"); -}); + $("#modal-close").click(function() { + 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ü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ü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(); 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); + + + }); +});