143 lines
4.5 KiB
JavaScript
143 lines
4.5 KiB
JavaScript
/*
|
|
* This Source Code Form is subject to the terms of the Mozilla Public
|
|
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
|
*/
|
|
|
|
var map = null;
|
|
|
|
var maptype = "mapbox";
|
|
|
|
function createMap() {
|
|
if (getStorage("maptype") == null) {
|
|
setStorage("maptype", "mapbox");
|
|
}
|
|
maptype = getStorage("maptype");
|
|
if (maptype == "mapbox") {
|
|
if (mapboxgl.supported()) {
|
|
map = mapboxMap();
|
|
} else {
|
|
console.log("Warn", "mapbox-gl not supported, falling back to Leaflet");
|
|
maptype = "leaflet";
|
|
map = leafletMap();
|
|
}
|
|
} else {
|
|
map = leafletMap();
|
|
}
|
|
map.updatePackageLayer(packages);
|
|
}
|
|
|
|
/**
|
|
* Destroy and re-create the map.
|
|
* @returns {undefined}
|
|
*/
|
|
function reloadMap() {
|
|
try {
|
|
if (map != null && typeof map != 'undefined') {
|
|
var mapcenter = map.getCenter();
|
|
var mapzoom = map.getZoom();
|
|
if (map.maptype == "mapbox") {
|
|
var mapbearing = map.getBearing();
|
|
var mappitch = map.getPitch();
|
|
}
|
|
|
|
map.off();
|
|
map.remove();
|
|
map = null;
|
|
|
|
if (document.getElementById("mapbox") != null) {
|
|
createMap();
|
|
|
|
if (map.maptype == "mapbox") {
|
|
map.jumpTo({
|
|
center: mapcenter,
|
|
zoom: mapzoom,
|
|
bearing: mapbearing,
|
|
pitch: mappitch
|
|
});
|
|
} else {
|
|
map.setView(mapcenter, mapzoom);
|
|
}
|
|
} else {
|
|
console.log("Info", "Not re-creating map because #mapbox is not in DOM. Creation will be automatically triggered when map page is loaded.");
|
|
}
|
|
} else {
|
|
createMap();
|
|
}
|
|
} catch (ex) {
|
|
// oh well ¯\(°_o)/¯
|
|
console.log(ex);
|
|
}
|
|
}
|
|
|
|
$("#app").on("click", "#package-info-sheet #package-info-get-directions", function () {
|
|
window.open($(this).attr("href"), "_system");
|
|
});
|
|
|
|
$("#app").on("click", "#package-info-sheet #package-info-sheet-inner .list ul li .item-content", function () {
|
|
markDelivered($(this).data("id"));
|
|
map.updatePackageLayer(packages);
|
|
openPackageInfoSheet($(this).data("coordid"), true);
|
|
});
|
|
|
|
function openPackageInfoSheet(coordid, refreshOnly) {
|
|
if (typeof refreshOnly == "undefined") {
|
|
refreshOnly = false;
|
|
}
|
|
|
|
//console.log("Packages array: ", packages);
|
|
|
|
for (var i = 0; i < packages.length; i++) {
|
|
if (packages[i].id == coordid) {
|
|
package = packages[i];
|
|
//console.log("Single Address:", package);
|
|
|
|
$("#package-info-get-directions").attr("href", "geo:" + package.coords[0] + "," + package.coords[1]);
|
|
$("#package-info-sheet-inner .list ul").html("");
|
|
|
|
for (var j = 0; j < package.items.length; j++) {
|
|
var classes = "";
|
|
var icon = getIconForType(package.items[j].type);
|
|
var statusicon = "far fa-circle";
|
|
if (package.items[j].delivered) {
|
|
classes = "text-color-green";
|
|
statusicon = "far fa-check-circle";
|
|
}
|
|
$("#package-info-sheet-inner .list ul").append(''
|
|
+ '<li>'
|
|
+ ' <div class="item-content ' + classes + '" data-id="' + package.items[j].id + '" data-coordid="' + package.id + '">'
|
|
+ ' <div class="item-media"><i class="' + statusicon + '"></i></div>'
|
|
+ ' <div class="item-inner">'
|
|
+ ' <div class="item-title">' + package.items[j].address + '</div>'
|
|
+ ' <div class="item-after"><i class="' + icon + '"></i></div>'
|
|
+ ' </div>'
|
|
+ ' </div>'
|
|
+ '</li>');
|
|
}
|
|
|
|
if (!refreshOnly) {
|
|
app.sheet.create({el: "#package-info-sheet"}).open();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function setMapLocation(latitude, longitude) {
|
|
if (map == null) {
|
|
return;
|
|
}
|
|
map.setMapLocation(latitude, longitude);
|
|
}
|
|
|
|
function animateMapIn(latitude, longitude, zoom, heading) {
|
|
if (map == null) {
|
|
return;
|
|
}
|
|
if (typeof zoom == 'undefined') {
|
|
zoom = 14;
|
|
}
|
|
if (typeof heading == 'undefined') {
|
|
heading = 0;
|
|
}
|
|
map.animateMapIn(latitude, longitude, zoom, heading);
|
|
} |