Files
newwalls.pl/modules/epaka/views/js/front/epaka-map.js
2024-12-17 13:43:22 +01:00

598 lines
25 KiB
JavaScript

(function ($) {
var map = null;
var cluster = null;
var elementInvoking = null;
var postRequest = null;
var searchValue = null;
var refreshing = false;
var refresh = 0;
var lastRefresh = 0;
var markers = [];
var defaultSettings = {
autoClose: true,
sourceUrl: "api/getInpostMachines.xml",
type: "point",
title: "Wybierz punkt nadania",
country: "PL",
};
var callbackGlobal = null;
var scrollToElem = null;
var settings = {};
// old browser compatible below
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var icons = {
red: new (L.Icon.Default)({
iconUrl: 'marker-icon.png',
iconRetinaUrl: 'marker-icon-2x.png',
shadowUrl: '',
shadowSize: [0, 0]
}),
};
window.displayMessage = function (type) {
$(".pointsList .choose-point-info").show();
$(".pointsList .choose-point-info").hide();
$(".pointsList .choose-point-" + type).show();
}
// window.ShowMap = function (event, courierSource, lat, lng, autoClose = true) {
window.ShowMap = function (event, courierSource, lat, lng, autoClose = true, callback = function () { }) {
return new Promise(async (resolve, reject) => {
// debugger;
$('#mapPopup').show();
$("#mapPopup #search-input").val("");
callbackGlobal = callback;
elementInvoking = null;
elementInvoking = event.target;
defaultSettings = sources[courierSource];
if (typeof defaultSettings !== "undefined") {
// defaultSettings = courierSource;
settings = _extends({}, defaultSettings, settings);
var boundingbox = [
"49.0020468",
"55.0336963",
"14.1229707",
"24.145783"
];
var zoom = 10;
if (lat !== undefined && lng !== undefined) {
zoom = 12;
} else {
zoom = 6;
}
if (lat === undefined) lat = 52.209402;
if (lng === undefined) lng = 19.302979;
if (!map) {
map = L.map('placeMapHere', {
center: [lat, lng],
zoom: zoom,
maxBounds: [
[boundingbox[0], boundingbox[2]],
[boundingbox[1], boundingbox[3]],
]
});
L.tileLayer('https://b.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
maxZoom: 18,
}).addTo(map);
map.addLayer(cluster = L.markerClusterGroup(
{
maxClusterRadius: 50
}
));
map.on('zoomend', idle);
map.on('moveend', idle);
} else {
markers.forEach(function (marker) {
$("#mapPopup #point-details-" + marker.fullPointData.id).remove();
if (marker.fullPointData.source !== undefined) {
$("#mapPopup #point-details-" + marker.fullPointData.id + "---" + marker.fullPointData.source.id).remove();
}
cluster.removeLayer(marker);
});
map.setView(new L.LatLng(lat, lng), zoom, { animation: false });
map.fire('moveend');
}
// await Promise.all([refreshPoints(lat, lng)]).then(resolve).catch(reject);
await Promise.all([refreshPoints(lat, lng, callback)]).then(resolve).catch(reject);
} else {
window.displayMessage("nocarrier");
markers = [];
$('#mapPopup').hide();
await Promise.all([callback(elementInvoking, null, 'Prawdopodobnie dostęp do tego kuriera nie został włączony. Skontaktuj się z administratorem serwisu www.epaka.pl')]).then(resolve).catch(reject);
}
});
}
async function idle() {
// await Promise.all([refreshPoints(map.getCenter().lat, map.getCenter().lng)]).then(() => {
await Promise.all([refreshPoints(map.getCenter().lat, map.getCenter().lng, callbackGlobal)]).then(() => {
if (scrollToElem != null) {
$(".pointsList").scrollTo($(scrollToElem), 1000);
}
});
}
// function refreshPoints(lat, lon/*,callback*/) {
function refreshPoints(lat, lon, callback) {
return new Promise((resolve, reject) => {
// debugger;
refreshing = true;
refresh = (new Date()).getTime();
var data = _extends({ lat: lat, lon: lon, map: true }, settings.additionalData);
if (postRequest != null) {
postRequest.abort();
// postRequest = null;
}
console.log('| showMapPopUp Ajax POINT SEARCHING START...');
window.displayMessage("searching");
console.log(epakaGetMachinesPointsAjax + '&endpoint=' + encodeURIComponent(defaultSettings.sourceUrl));
postRequest = $.post(epakaGetMachinesPointsAjax + '&endpoint=' + encodeURIComponent(defaultSettings.sourceUrl), data, function (response) {
postRequest = null;
// debugger;
if (typeof response != "undefined") {
if (typeof response != "object") {
response = JSON.parse(response);
}
if (!jQuery.isEmptyObject(response)) {
if (response.status == "OK") {
// Promise.all([refreshPointsFromData(response.points/*,callback*/)]);
Promise.all([refreshPointsFromData(response.points, callback)]);
}
}
}
resolve();
}, "json");
});
}
function filterMap(map, markers) {
// debugger;
if (markers.length) {
var bounds = map.getBounds();
var found = 0;
for (var i in markers) {
if (bounds.contains(markers[i].getLatLng())) {
$('#point-details-' + markers[i].customPointId).removeClass("d-none");
found++;
} else {
$('#point-details-' + markers[i].customPointId).addClass("d-none");
}
}
if(!found && refreshing){
window.displayMessage("searching");
} else if(!found) {
window.displayMessage("empty");
} else {
window.displayMessage("");
}
}
}
function createSearchPointSuccessHandler(mode = 17) {
return function (response) {
var isArray = Array.isArray(response);
var isEmptyArray = isArray ? response.length === 0 : false
// debugger;
if (response && !isEmptyArray) {
if (isArray) {
response = response[0];
};
var latlng = {
lat: parseFloat(response.lat),
lng: parseFloat(response.lon),
};
map.setView(latlng, mode);
setTimeout(function () {
filterMap(map, markers);
}, 50);
} else {
filterMap(map, markers);
window.displayMessage("notfound");
}
}
}
function searchPoint() {
const postcode = /([0-9]{2}-[0-9]{3})|([0-9]{5})/;
const regInpost = /(\P\O\P\-)?[a-zA-Z]{3}[0-9]{1,3}[a-zA-Z]{0,2}/;
const regPWR = /[a-zA-Z0-9]{2}-[0-9]{6}-[0-9]{2}-[0-9]{2}/;
const regDPD = /[a-zA-Z]{2}[0-9]{5,6}/;
const regDHL = /[0-9]{6,8}/;
const regPP = /(UP|PP|DER|FUP)\W[a-zA-ZęĘóÓąĄśŚłŁżŻźŹćĆńŃ]{3,}/;
if (searchValue == $('#search-input').val()) return;
searchValue = $('#search-input').val();
$('.choose-point-details').css("display", "none");
$('.choose-point-searching').css("display", "inline-block");
// debugger;
if (searchValue == "") {
$('.choose-point-details').css("display", "inline-block");
$('.choose-point-searching').css("display", "none");
var latlng = {
lat: 52.209402,
lng: 19.302979,
};
map.setView(latlng, 5);
} else if (regInpost.test(searchValue)) {
console.log("searchInpost: " + epakaGetMachinesPointsAjax + '&endpoint=' + encodeURIComponent("map_popup/searchInpost"));
$.post(epakaGetMachinesPointsAjax + '&endpoint=' + encodeURIComponent("map_popup/searchInpost"), { q: searchValue }, createSearchPointSuccessHandler(), "json");
} else if (regPWR.test(searchValue)) {
console.log("searchPWR (inpost): " + epakaGetMachinesPointsAjax + '&endpoint=' + encodeURIComponent("map_popup/searchPWR"));
$.post(epakaGetMachinesPointsAjax + '&endpoint=' + encodeURIComponent("map_popup/searchPWR"), { q: searchValue }, createSearchPointSuccessHandler(), "json");
} else if (regDPD.test(searchValue)) {
console.log("searchDPD: " + epakaGetMachinesPointsAjax + '&endpoint=' + encodeURIComponent("map_popup/searchDPD"));
$.post(epakaGetMachinesPointsAjax + '&endpoint=' + encodeURIComponent("map_popup/searchDPD"), { q: searchValue }, createSearchPointSuccessHandler(), "json");
} else if (regDHL.test(searchValue)) {
console.log("searchDHLSP: " + epakaGetMachinesPointsAjax + '&endpoint=' + encodeURIComponent("map_popup/searchDHLSP"));
$.post(epakaGetMachinesPointsAjax + '&endpoint=' + encodeURIComponent("map_popup/searchDHLSP"), { q: searchValue }, createSearchPointSuccessHandler(), "json");
} else if (regPP.test(searchValue)) {
console.log("searchPP: " + epakaGetMachinesPointsAjax + '&endpoint=' + encodeURIComponent("map_popup/searchPP"));
$.post(epakaGetMachinesPointsAjax + '&endpoint=' + encodeURIComponent("map_popup/searchPP"), { q: searchValue }, createSearchPointSuccessHandler(), "json");
} else {
var params = {
limit: '1',
countrycodes: settings.country,
format: 'json',
addressdetails: '1',
};
if (postcode.test(searchValue)) {
params.postalcode = searchValue;
} else {
params.q = searchValue;
params.limit = 10;
}
var sanitizedPayload = encodeURIComponent("map.php?" + $.param(params));
console.log("searchPoint: " + EPAKA_API_URL_FULL + sanitizedPayload);
$.ajax({
data: {},
method: 'GET',
dataType: 'json',
url: EPAKA_API_URL_FULL + sanitizedPayload,
success: createSearchPointSuccessHandler(14)
}).done(function (msg) {
createSearchPointSuccessHandler(14);
});
}
return false;
}
// function refreshPointsFromData(data, /*callback*/) {
function refreshPointsFromData(data, callback) {
return new Promise((resolve, reject) => {
// debugger;
$('.choose-point-searching').css("display", "none");
var pointsArray = null;
if (Array.isArray(data.point)) {
// if (!jQuery.isEmptyObject(points)) {
pointsArray = data.point;
} else {
pointsArray = [data.point];
}
if (pointsArray === undefined) {
reject();
return;
};
if (refresh < lastRefresh) {
return;
}
lastRefresh = refresh;
var pointsToDelete = [];
var pointsToKeep = [];
var pointsToAdd = [];
markers.forEach(function (el, index) {
var test = false;
for (var i = 0; i < pointsArray.length; i++) {
if (el.fullPointData.id == pointsArray[i].id) {
pointsToKeep.push(el);
test = true;
break;
}
}
if (!test) {
pointsToDelete.push(el);
}
});
pointsToDelete.forEach(function (el) {
$("#mapPopup #point-details-" + el.fullPointData.id).remove();
if (el.fullPointData.source !== undefined) {
$("#mapPopup #point-details-" + el.fullPointData.id + "---" + el.fullPointData.source.id).remove();
}
cluster.removeLayer(el);
});
markers = [...pointsToKeep];
for (var i = 0; i < pointsArray.length; i++) {
var point = pointsArray[i];
if (point === undefined) continue;
var newPoint = true;
for (var x = 0; x < pointsToKeep.length; x++) {
if (point.id == pointsToKeep[x].fullPointData.id) {
newPoint = false;
break;
}
}
if (newPoint) {
var icon = icons["red"];
if (point.source !== undefined) {
if (point.source.marker !== undefined) {
icon = icons[point.source.marker];
}
}
var marker = L.marker({ lat: point.lat, lng: point.lng }, { title: point.name, icon: icon })
// var marker = L.marker({ lat: point.lat, lng: point.lng }, { title: point.name })
markers.push(marker);
if (point.source !== undefined) {
marker.customPointId = point.id + "---" + point.source.id;
} else {
marker.customPointId = point.id;
}
marker.fullPointData = point;
cluster.addLayer(marker);
var choosePointDetailsElement =
"<div id='point-details-" + marker.customPointId + "' class='row choose-point-details py-2 font-size-14px cursor-pointer mx-0 px-0'>" +
"<div class='col-3 d-flex flex-column align-items-center justify-content-center px-3'>" +
"<img class='img-fluid' src=''/>" +
// "<span class='mt-2 font-size-12px font-weight-bold text-center'>"+(point.source.id == 0 ? point.name : point.id)+"</span>"+
"<span class='mt-2 font-size-12px font-weight-bold text-center'>" + point.id + "</span>"+
"</div>" +
"<div class='col-9 d-flex flex-column'>" +
"<div class='point-details-content'>" +
(!point.street && !point.post_code && !point.other && point.description ? "<div class='font-weight-bold'>" + point.description + "</div>" : "<div class='font-weight-bold'>" + point.name + "</div>") +
(point.street ? ("<div>" + point.street + " " + point.number + (point.local_number ? "/" + point.local_number + " " : " ") + "</div>") : "") +
(point.post_code ? "<div>" + point.post_code + " " + point.city + "</div>" : "") +
"</div>" +
(point.other ? "<div class='font-size-12px font-size-md-14px font-weight-semibold mt-3'>" + point.other.replace(/;/g, "<br />") + "</div>" : "") +
"</div>" +
"<div style='display: none;' class='listDbClickButton pointButton'>" +
"<span style='text-align: center;'>Wybierz punkt</span>" +
"</div>" +
"</div>";
$("#mapPopup .pointsList").append(choosePointDetailsElement);
marker.bindPopup(
"<div style='width: 63px;'>" +
"<img class='img-fluid' src=''/>" +
"</div>" +
"<div class='mt-3' style='width: 100%;'>" +
"<span class='font-size-13px font-weight-bold text-center'>" + point.name + "</span>" +
"<div class='font-size-13px font-weight-regular'>" +
(!point.street && !point.post_code && !point.other ? "<div>" + (point.description ? point.description : (point.name ? point.name : '')) + "</div>" : "") +
(point.street ? ("<div>" + point.street + " " + point.number + (point.local_number ? "/" + point.local_number + " " : " ") + "</div>") : "") +
(point.post_code ? "<div>" + point.post_code + " " + point.city + "</div>" : "") +
(point.other ? "<div>" + point.other.replace(/;/g, "<br />") + "</div>" : "") +
"</div>" +
"<div id='choosePoint' class='pointButton' style='margin-left: auto;margin-right: auto;' data-id='" + marker.customPointId + "'>" +
"<span style='text-align: center;'>Wybierz punkt</span>" +
"</div>" +
"</div>"
, { className: (point.source !== undefined) ? point.id + "---" + point.source.id : point.id });
var dblClickWindow, canDblClick = false;
marker.off('click');
marker.on("click", function () {
// debugger;
var element = $('#point-details-' + this.customPointId);
if (element.hasClass("active") && canDblClick) {
$(".accept-point").click();
canDblClick = false;
} else {
window.dontZoomOnPointClick = 1;
element.click();
$(document).off("click", "#choosePoint");
$(document).on("click", "#choosePoint", function () {
// debugger;
// $('#mapPopup .pointsList #point-details-' + $(this).attr("data-id") + ' .listDbClickButton').click();
$('#mapPopup .pointsList #point-details-' + $(this).attr("data-id") + ' .listDbClickButton').trigger('click');
});
this.openPopup();
setTimeout(function () {
dblClickWindow = setTimeout(function () {
canDblClick = false;
}, 500);
canDblClick = true;
}, 50);
}
});
$("#mapPopup .pointsList .choose-point-details").off('click');
$("#mapPopup .pointsList .choose-point-details").click(function () {
// debugger;
$("#mapPopup .pointsList .choose-point-details").removeClass("active");
$("#mapPopup .pointsList .choose-point-details .listDbClickButton").css('display', 'none');
var id = $(this).attr("id").split("point-details-")[1];
if (typeof window.dontZoomOnPointClick == "undefined") {
var marker = markers.filter(function (element) {
if (element.customPointId == id) {
return true;
}
return false;
});
marker[0].openPopup();
map.setView(marker[0]._latlng, 20);
scrollToElem = $(this);
}
window.dontZoomOnPointClick = undefined;
$(this).addClass("active");
$(this).find('.listDbClickButton').css('display', 'inline-block');
});
$("#mapPopup .pointsList .listDbClickButton").off("click");
$("#mapPopup .pointsList .listDbClickButton").click(function () {
// debugger;
var id = $(this).parent().attr("id").split("point-details-")[1];
var marker = markers.filter(function (element) {
if (element.customPointId == id) {
return true;
}
return false;
});
// $($(elementInvoking).siblings()[0]).val(marker[0].fullPointData.id);
// $(elementInvoking).val(marker[0].fullPointData.name);
// $('#epaka-delivery-point-code').val(marker[0].fullPointData.id);
// $('#epaka-delivery-point-name').val(marker[0].fullPointData.name);
$(elementInvoking).change();
$(".popupCloseButton").click();
callback(elementInvoking, marker[0], null);
});
// debugger;
}
}
filterMap(map, markers);
refreshing = false;
console.log('| showMapPopUp Ajax POINT SEARCHING DONE.');
resolve();
});
}
window.mapBind = function () {
$(".showMapOnClick").off("click");
$(".showMapOnClick").off("change");
$(".pointClear").off("click");
$('.popupCloseButton').off("click");
$('#search').off("click");
$('#mapPopup .menu-control-button').off("click");
$(".showMapOnClick").click(async function (event) {
$('#mapPopup').show();
var courierSource = {
autoClose: true,
sourceUrl: $(this).attr("data-map-source-url"),
type: "point",
title: "Wybierz punkt odbioru " + $(this).attr("data-map-source-name"),
country: "PL",
};
await Promise.all([window.ShowMap(event, courierSource)]);
});
$(".showMapOnClick").each(function () {
if ($(this).val() != "") {
$(this).parent().find(".pointClear").show();
} else {
$(this).parent().find(".pointClear").hide();
}
});
$(".showMapOnClick").change(function () {
if ($(this).val() != "") {
$(this).parent().find(".pointClear").show();
} else {
$(this).parent().find(".pointClear").hide();
}
});
$(".pointClear").click(function () {
$(this).parent().find("input").each(function () {
$(this).val("");
$(this).change();
});
});
$('.popupCloseButton').click(function () {
markers.forEach(function (marker) {
$("#mapPopup #point-details-" + marker.fullPointData.id).remove();
if (marker.fullPointData.source !== undefined) {
$("#mapPopup #point-details-" + marker.fullPointData.id + "---" + marker.fullPointData.source.id).remove();
}
cluster.removeLayer(marker);
});
markers = [];
$('#mapPopup').hide();
});
$('#search').click(function () {
searchPoint();
});
$('#mapPopup .menu-control-button').click(function () {
if ($("#mapPopup .menu").is(":visible")) {
$("#mapPopup .menu").hide();
} else {
$("#mapPopup .menu").show();
}
return false;
});
$("#mapPopup .localise-me").click(function () {
// debugger;
if ('geolocation' in navigator) {
/* geolocation is available */
navigator.geolocation.getCurrentPosition((position) => {
var latlng = {
lat: position.coords.latitude,
lng: position.coords.longitude,
};
map.setView(latlng, 11);
});
} else {
/* geolocation IS NOT available */
alert("Lokalizacja nie jest wspierana przez twoją przeglądarkę.")
}
})
map = null;
}
$(window).load(function () {
window.mapBind();
})
})(jQuery);