diff --git a/front/package.json b/front/package.json
index 05f730f..12b986b 100644
--- a/front/package.json
+++ b/front/package.json
@@ -25,6 +25,7 @@
"@types/gulp-sourcemaps": "^0.0.32",
"@typescript-eslint/eslint-plugin": "^4.4.0",
"@typescript-eslint/parser": "^4.4.0",
+ "@types/leaflet": "^1.5.19",
"babel-preset-minify": "^0.5.1",
"bulma": "^0.9.1",
"eslint": "^7.10.0",
diff --git a/front/src/index.ts b/front/src/index.ts
index e0e8b81..7101261 100644
--- a/front/src/index.ts
+++ b/front/src/index.ts
@@ -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 © OpenStreetMap contributors',
+ 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
diff --git a/front/src/style.scss b/front/src/style.scss
index 363c48e..3b355dd 100644
--- a/front/src/style.scss
+++ b/front/src/style.scss
@@ -10,3 +10,8 @@ $family-sans-serif: BlinkMacSystemFont, -apple-system, sans-serif;
.package-list {
display: none;
}
+
+#map {
+ width: 400px;
+ height: 400px;
+}
diff --git a/front/yarn.lock b/front/yarn.lock
index 6905f23..15b31da 100644
--- a/front/yarn.lock
+++ b/front/yarn.lock
@@ -889,6 +889,11 @@
resolved "https://registry.yarnpkg.com/@types/expect/-/expect-1.20.4.tgz#8288e51737bf7e3ab5d7c77bfa695883745264e5"
integrity sha512-Q5Vn3yjTDyCMV50TB6VRIbQNxSE4OmZR86VSbGaNpfUolm0iePBB4KdEEHmxoY5sT2+2DIvXW0rvMDP2nHZ4Mg==
+"@types/geojson@*":
+ version "7946.0.7"
+ resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.7.tgz#c8fa532b60a0042219cdf173ca21a975ef0666ad"
+ integrity sha512-wE2v81i4C4Ol09RtsWFAqg3BUitWbHSpSlIo+bNdsCJijO9sjme+zm+73ZMCa/qMC8UEERxzGbvmr1cffo2SiQ==
+
"@types/glob-stream@*":
version "6.1.0"
resolved "https://registry.yarnpkg.com/@types/glob-stream/-/glob-stream-6.1.0.tgz#7ede8a33e59140534f8d8adfb8ac9edfb31897bc"
@@ -946,6 +951,13 @@
resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
integrity sha1-7ihweulOEdK4J7y+UnC86n8+ce4=
+"@types/leaflet@^1.5.19":
+ version "1.5.19"
+ resolved "https://registry.yarnpkg.com/@types/leaflet/-/leaflet-1.5.19.tgz#f290e21fe7a4744d68bb4b0709e99ce490120e6e"
+ integrity sha512-ZAKqfvdU/+KFoCpf8aUba09F8mfSc8R2esq++Cha3E2DgwS5K/I/4eJ+0JylrVHZivgY7PSAeXFv/izP+81/MQ==
+ dependencies:
+ "@types/geojson" "*"
+
"@types/minimatch@*":
version "3.0.3"
resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d"
diff --git a/webroot/index.html b/webroot/index.html
index 67e6320..9d2dedd 100644
--- a/webroot/index.html
+++ b/webroot/index.html
@@ -97,11 +97,16 @@
| Status |
Location |
|
+ |
+