wo-bisch-web/static/js/tracker.js

325 lines
9.4 KiB
JavaScript

function validate(what, text) {
if (what == 'alias') {
var re = /^[a-zA-Z0-9 ]{1,25}$/;
}
return re.test(text);
}
$(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();
$("#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("&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);
});
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 () {
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 (!(is_valid)) {
return;
}
$.ajax({
url: "save_scale_settings",
type: "get", //send it through get method
dataType: "json",
data: {
deveui: $('#deveui').html(),
alias: $('#alias').val()
},
success: function (response) {
console.log('save success');
if (response.rc == 0) {
$('#alias_' + $('#deveui').html()).html($('#alias').val());
}
},
error: function (xhr) {
console.log('save error');
//Do Something to handle error
}
});
console.log("save");
$("#modal").removeClass("is-active");
});
});
function loadStripeLibrary() {
$.ajax({
url: "https://js.stripe.com/v3/",
dataType: "script",
async: false, // <-- This is the key
success: function () {
// all good...
console.log("loadStripeLibrary called...");
SetupStripe();
},
error: function () {
throw new Error("Could not load script " + script);
}
});
}
function SetupStripe() {
console.log("SetupStripe");
// Set your publishable key: remember to change this to your live publishable key in production
// See your keys here: https://dashboard.stripe.com/account/apikeys
stripe = Stripe('pk_test_YkSGqH3Tk9WKK9HrlY63GhAg');
elements = stripe.elements({ locale: "de" });
// Set up Stripe.js and Elements to use in checkout form
style = {
base: {
color: "#32325d",
}
};
card = elements.create("card", { style: style });
card.mount("#card-element");
$("#card-errors-article").hide();
card.addEventListener('change', ({ error }) => {
if (error) {
$("#card-errors").text(error.message);
$("#card-errors-article").show();
} else {
$("#card-errors").text("");
$("#card-errors-article").hide();
}
});
}
function ConfirmPayment(clientSecret) {
stripe.confirmCardPayment(clientSecret, {
payment_method: {
card: card,
billing_details: {
name: '{{ .UserName }}'
}
}
}).then(function (result) {
if (result.error) {
// Show error to your customer (e.g., insufficient funds)
console.log(result.error.message);
$('#card-errors').text(result.error.message);
$('#card-errors-article').show();
//Do Something to handle error
EndPaymentProgress();
} else {
// The payment has been processed!
if (result.paymentIntent.status === 'succeeded') {
// Show a success message to your customer
// There's a risk of the customer closing the window before callback
// execution. Set up a webhook or plugin to listen for the
// payment_intent.succeeded event that handles any business critical
// post-payment actions.
console.log("Payment succeeded!!!");
$('#card-errors').text("");
$('#card-errors-article').hide();
$("#cart").removeClass("is-active");
EndPaymentProgress();
$('#payment_notifier').addClass('is-active');
}
}
});
}
function StartPaymentProgress() {
$("#cart-pay").attr("disabled", true).addClass("is-loading");
$("#cart-close").attr("disabled", true);
}
function EndPaymentProgress() {
$("#cart-pay").attr("disabled", false).removeClass("is-loading");
$("#cart-close").attr("disabled", false);
}
function PayMe() {
$.ajax({
url: "getstripepaymentintent",
type: "get", //send it through get method
dataType: "json",
data: {
charge_data: $("#charge_data").html()
},
success: function (response) {
console.log('pay success');
console.log('rc: ' + response.rc);
if (response.rc == 0) {
ConfirmPayment(response.stripeclientsecret);
}
},
error: function (xhr) {
console.log('getstripepaymentintent error');
//Do Something to handle error
EndPaymentProgress();
}
});
}
$('#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);
});
});