|
|
|
@ -1,4 +1,13 @@
|
|
|
|
|
let phone = 0;
|
|
|
|
|
const leafletLoaderJS = document.createElement("script");
|
|
|
|
|
leafletLoaderJS.setAttribute("src", "https://unpkg.com/leaflet@1.7.1/dist/leaflet.js");
|
|
|
|
|
leafletLoaderJS.setAttribute("integrity", "sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==");
|
|
|
|
|
leafletLoaderJS.setAttribute("crossorigin", "anonymous");
|
|
|
|
|
const leafletLoaderCSS = document.createElement("link");
|
|
|
|
|
leafletLoaderCSS.setAttribute("rel", "stylesheet")
|
|
|
|
|
leafletLoaderCSS.setAttribute("href", "https://unpkg.com/leaflet@1.7.1/dist/leaflet.css")
|
|
|
|
|
leafletLoaderCSS.setAttribute("integrity", "sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==");
|
|
|
|
|
leafletLoaderCSS.setAttribute("crossorigin", "anonymous");
|
|
|
|
|
|
|
|
|
|
const request = (resource: string, data: any) =>
|
|
|
|
|
fetch(`/api/${resource}.shs`, {
|
|
|
|
@ -33,7 +42,9 @@ const openLockerConfirm = (lat: string, lon: string, openCode: string, id: strin
|
|
|
|
|
|
|
|
|
|
const openLocker = (lat: string, lon: string, openCode: string, id: string) => {
|
|
|
|
|
(document.querySelector(".areyousure-box") as HTMLElement).style.display = "block";
|
|
|
|
|
(document.querySelector(".areyousure-button") as HTMLElement)!.onclick = () => { openLockerConfirm(lat, lon, openCode, id) };
|
|
|
|
|
(document.querySelector(".areyousure-button") as HTMLElement)!.onclick = () => {
|
|
|
|
|
openLockerConfirm(lat, lon, openCode, id);
|
|
|
|
|
};
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const refreshPackages = () =>
|
|
|
|
@ -45,27 +56,63 @@ const refreshPackages = () =>
|
|
|
|
|
const sender = row.insertCell(1);
|
|
|
|
|
const status = row.insertCell(2);
|
|
|
|
|
const locker = row.insertCell(3);
|
|
|
|
|
const opener = row.insertCell(4);
|
|
|
|
|
const details = row.insertCell(4);
|
|
|
|
|
const opener = row.insertCell(5);
|
|
|
|
|
|
|
|
|
|
row.dataset.lat = shipment.pickupPoint.location.latitude.toString();
|
|
|
|
|
row.dataset.lon = shipment.pickupPoint.location.longitude.toString();
|
|
|
|
|
row.dataset.pickupPointLat = shipment.pickupPoint.location.latitude.toString();
|
|
|
|
|
row.dataset.pickupPointLon = shipment.pickupPoint.location.longitude.toString();
|
|
|
|
|
row.dataset.pickupPointDescription = shipment.pickupPoint.description;
|
|
|
|
|
row.dataset.pickupPointName = shipment.pickupPoint.name;
|
|
|
|
|
row.dataset.pickupPointStatus = shipment.pickupPoint.status;
|
|
|
|
|
row.dataset.pickupPointStreet = shipment.pickupPoint.address.street;
|
|
|
|
|
row.dataset.pickupPointStreetNumber = shipment.pickupPoint.address.buildingNumber;
|
|
|
|
|
row.dataset.pickupPointCity = shipment.pickupPoint.address.city;
|
|
|
|
|
row.dataset.pickupPointProvince = shipment.pickupPoint.address.province;
|
|
|
|
|
row.dataset.pickupPointPostCode = shipment.pickupPoint.address.postCode;
|
|
|
|
|
row.dataset.openCode = shipment.openCode;
|
|
|
|
|
row.dataset.id = shipment.shipmentNumber;
|
|
|
|
|
row.dataset.sender = shipment.senderName;
|
|
|
|
|
row.dataset.status = shipment.status;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
id.innerText = shipment.shipmentNumber;
|
|
|
|
|
sender.innerText = shipment.senderName;
|
|
|
|
|
status.innerText = shipment.status;
|
|
|
|
|
locker.innerText = `${shipment.pickupPoint.name} - ${shipment.pickupPoint.description}`;
|
|
|
|
|
|
|
|
|
|
const showDetailsAction = document.createElement("a");
|
|
|
|
|
showDetailsAction.classList.add("button", "is-light", "is-small");
|
|
|
|
|
showDetailsAction.innerHTML = "Info";
|
|
|
|
|
|
|
|
|
|
showDetailsAction.addEventListener("click", (event) => {
|
|
|
|
|
const data = ((event.target as Element).parentNode!.parentNode as HTMLElement).dataset;
|
|
|
|
|
console.log(data)
|
|
|
|
|
document.querySelector("head").appendChild(leafletLoaderCSS);
|
|
|
|
|
document.querySelector("head").appendChild(leafletLoaderJS);
|
|
|
|
|
leafletLoaderJS.addEventListener('load', () => {
|
|
|
|
|
const map = L.map('map').setView([Number(data.pickupPointLat), Number(data.pickupPointLon)], 17);
|
|
|
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
|
|
|
attribution: 'Map data © <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>',
|
|
|
|
|
maxZoom: 19,
|
|
|
|
|
}).addTo(map);
|
|
|
|
|
L.marker([Number(data.pickupPointLat), Number(data.pickupPointLon)]).addTo(map);
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
const openAction = document.createElement("a");
|
|
|
|
|
openAction.classList.add("button", "is-light", "is-small");
|
|
|
|
|
openAction.innerHTML = "Open";
|
|
|
|
|
openAction.addEventListener("click", (event) => {
|
|
|
|
|
const data = ((event.target as Element).parentNode!.parentNode as HTMLElement).dataset;
|
|
|
|
|
openLocker(data.lat!, data.lon!, data.openCode!, data.id!);
|
|
|
|
|
});
|
|
|
|
|
if (shipment.status == "ready_to_pickup") {
|
|
|
|
|
openAction.addEventListener("click", (event) => {
|
|
|
|
|
const data = ((event.target as Element).parentNode!.parentNode as HTMLElement).dataset;
|
|
|
|
|
openLocker(data.lat!, data.lon!, data.openCode!, data.id!);
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
openAction.setAttribute("disabled", "");
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
opener.appendChild(openAction);
|
|
|
|
|
|
|
|
|
|
// console.log(shipment);
|
|
|
|
|
details.appendChild(showDetailsAction);
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
window.addEventListener("load", () => {
|
|
|
|
@ -77,24 +124,25 @@ window.addEventListener("load", () => {
|
|
|
|
|
login: form.login.value,
|
|
|
|
|
password: form.password.value,
|
|
|
|
|
}).then((res) => {
|
|
|
|
|
if(res.status == 200) {
|
|
|
|
|
if (res.status == 200) {
|
|
|
|
|
refreshPackages().then(() => {
|
|
|
|
|
[".login-box", ".register-box"].forEach((elementName) => {
|
|
|
|
|
(document.querySelector(elementName)! as HTMLDivElement).style.display = "none";
|
|
|
|
|
});
|
|
|
|
|
(document.querySelector(".package-list")! as HTMLDivElement).style.display = "block";
|
|
|
|
|
});
|
|
|
|
|
[".login-box", ".register-box"].forEach((elementName) => {
|
|
|
|
|
(document.querySelector(elementName)! as HTMLDivElement).style.display = "none";
|
|
|
|
|
});
|
|
|
|
|
(document.querySelector(".package-list")! as HTMLDivElement).style.display = "block";
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
openError(res.msg || "Error during login. Try again in a while?")
|
|
|
|
|
openError(res.msg || "Error during login. Try again in a while?");
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const logout = document.querySelector(".logout-button")!;
|
|
|
|
|
logout.addEventListener("click", (event) => {
|
|
|
|
|
request("logout",{}).then(() => {
|
|
|
|
|
document.location = document.location})
|
|
|
|
|
})
|
|
|
|
|
request("logout", {}).then(() => {
|
|
|
|
|
document.location = document.location;
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const register = document.querySelector(".register-form")!;
|
|
|
|
|
register.addEventListener("submit", async (event) => {
|
|
|
|
@ -144,7 +192,6 @@ window.addEventListener("load", () => {
|
|
|
|
|
(document.querySelector(".areyousure-box") as HTMLElement).style.display = "none";
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
request("session", {}).then((res) => {
|
|
|
|
|
if (res.status == 200) {
|
|
|
|
|
// logged in
|
|
|
|
|