added some basic leaflet and other stuff
parent
756a75d0aa
commit
00b1bb78d2
|
@ -25,6 +25,7 @@
|
||||||
"@types/gulp-sourcemaps": "^0.0.32",
|
"@types/gulp-sourcemaps": "^0.0.32",
|
||||||
"@typescript-eslint/eslint-plugin": "^4.4.0",
|
"@typescript-eslint/eslint-plugin": "^4.4.0",
|
||||||
"@typescript-eslint/parser": "^4.4.0",
|
"@typescript-eslint/parser": "^4.4.0",
|
||||||
|
"@types/leaflet": "^1.5.19",
|
||||||
"babel-preset-minify": "^0.5.1",
|
"babel-preset-minify": "^0.5.1",
|
||||||
"bulma": "^0.9.1",
|
"bulma": "^0.9.1",
|
||||||
"eslint": "^7.10.0",
|
"eslint": "^7.10.0",
|
||||||
|
|
|
@ -1,4 +1,13 @@
|
||||||
let phone = 0;
|
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) =>
|
const request = (resource: string, data: any) =>
|
||||||
fetch(`/api/${resource}.shs`, {
|
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) => {
|
const openLocker = (lat: string, lon: string, openCode: string, id: string) => {
|
||||||
(document.querySelector(".areyousure-box") as HTMLElement).style.display = "block";
|
(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 = () =>
|
const refreshPackages = () =>
|
||||||
|
@ -45,27 +56,63 @@ const refreshPackages = () =>
|
||||||
const sender = row.insertCell(1);
|
const sender = row.insertCell(1);
|
||||||
const status = row.insertCell(2);
|
const status = row.insertCell(2);
|
||||||
const locker = row.insertCell(3);
|
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.pickupPointLat = shipment.pickupPoint.location.latitude.toString();
|
||||||
row.dataset.lon = shipment.pickupPoint.location.longitude.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.openCode = shipment.openCode;
|
||||||
row.dataset.id = shipment.shipmentNumber;
|
row.dataset.id = shipment.shipmentNumber;
|
||||||
|
row.dataset.sender = shipment.senderName;
|
||||||
|
row.dataset.status = shipment.status;
|
||||||
|
|
||||||
|
|
||||||
id.innerText = shipment.shipmentNumber;
|
id.innerText = shipment.shipmentNumber;
|
||||||
sender.innerText = shipment.senderName;
|
sender.innerText = shipment.senderName;
|
||||||
status.innerText = shipment.status;
|
status.innerText = shipment.status;
|
||||||
locker.innerText = `${shipment.pickupPoint.name} - ${shipment.pickupPoint.description}`;
|
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");
|
const openAction = document.createElement("a");
|
||||||
openAction.classList.add("button", "is-light", "is-small");
|
openAction.classList.add("button", "is-light", "is-small");
|
||||||
openAction.innerHTML = "Open";
|
openAction.innerHTML = "Open";
|
||||||
openAction.addEventListener("click", (event) => {
|
if (shipment.status == "ready_to_pickup") {
|
||||||
const data = ((event.target as Element).parentNode!.parentNode as HTMLElement).dataset;
|
openAction.addEventListener("click", (event) => {
|
||||||
openLocker(data.lat!, data.lon!, data.openCode!, data.id!);
|
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);
|
opener.appendChild(openAction);
|
||||||
|
details.appendChild(showDetailsAction);
|
||||||
// console.log(shipment);
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
window.addEventListener("load", () => {
|
window.addEventListener("load", () => {
|
||||||
|
@ -77,24 +124,25 @@ window.addEventListener("load", () => {
|
||||||
login: form.login.value,
|
login: form.login.value,
|
||||||
password: form.password.value,
|
password: form.password.value,
|
||||||
}).then((res) => {
|
}).then((res) => {
|
||||||
if(res.status == 200) {
|
if (res.status == 200) {
|
||||||
refreshPackages().then(() => {
|
refreshPackages().then(() => {
|
||||||
[".login-box", ".register-box"].forEach((elementName) => {
|
[".login-box", ".register-box"].forEach((elementName) => {
|
||||||
(document.querySelector(elementName)! as HTMLDivElement).style.display = "none";
|
(document.querySelector(elementName)! as HTMLDivElement).style.display = "none";
|
||||||
});
|
});
|
||||||
(document.querySelector(".package-list")! as HTMLDivElement).style.display = "block";
|
(document.querySelector(".package-list")! as HTMLDivElement).style.display = "block";
|
||||||
});
|
});
|
||||||
} else {
|
} 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")!;
|
const logout = document.querySelector(".logout-button")!;
|
||||||
logout.addEventListener("click", (event) => {
|
logout.addEventListener("click", (event) => {
|
||||||
request("logout",{}).then(() => {
|
request("logout", {}).then(() => {
|
||||||
document.location = document.location})
|
document.location = document.location;
|
||||||
})
|
});
|
||||||
|
});
|
||||||
|
|
||||||
const register = document.querySelector(".register-form")!;
|
const register = document.querySelector(".register-form")!;
|
||||||
register.addEventListener("submit", async (event) => {
|
register.addEventListener("submit", async (event) => {
|
||||||
|
@ -144,7 +192,6 @@ window.addEventListener("load", () => {
|
||||||
(document.querySelector(".areyousure-box") as HTMLElement).style.display = "none";
|
(document.querySelector(".areyousure-box") as HTMLElement).style.display = "none";
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
request("session", {}).then((res) => {
|
request("session", {}).then((res) => {
|
||||||
if (res.status == 200) {
|
if (res.status == 200) {
|
||||||
// logged in
|
// logged in
|
||||||
|
|
|
@ -10,3 +10,8 @@ $family-sans-serif: BlinkMacSystemFont, -apple-system, sans-serif;
|
||||||
.package-list {
|
.package-list {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#map {
|
||||||
|
width: 400px;
|
||||||
|
height: 400px;
|
||||||
|
}
|
||||||
|
|
|
@ -889,6 +889,11 @@
|
||||||
resolved "https://registry.yarnpkg.com/@types/expect/-/expect-1.20.4.tgz#8288e51737bf7e3ab5d7c77bfa695883745264e5"
|
resolved "https://registry.yarnpkg.com/@types/expect/-/expect-1.20.4.tgz#8288e51737bf7e3ab5d7c77bfa695883745264e5"
|
||||||
integrity sha512-Q5Vn3yjTDyCMV50TB6VRIbQNxSE4OmZR86VSbGaNpfUolm0iePBB4KdEEHmxoY5sT2+2DIvXW0rvMDP2nHZ4Mg==
|
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@*":
|
"@types/glob-stream@*":
|
||||||
version "6.1.0"
|
version "6.1.0"
|
||||||
resolved "https://registry.yarnpkg.com/@types/glob-stream/-/glob-stream-6.1.0.tgz#7ede8a33e59140534f8d8adfb8ac9edfb31897bc"
|
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"
|
resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
|
||||||
integrity sha1-7ihweulOEdK4J7y+UnC86n8+ce4=
|
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@*":
|
"@types/minimatch@*":
|
||||||
version "3.0.3"
|
version "3.0.3"
|
||||||
resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d"
|
resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d"
|
||||||
|
|
|
@ -97,11 +97,16 @@
|
||||||
<th>Status</th>
|
<th>Status</th>
|
||||||
<th>Location</th>
|
<th>Location</th>
|
||||||
<th></th>
|
<th></th>
|
||||||
|
<th></th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody></tbody>
|
<tbody></tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="details-box">
|
||||||
|
<div id="map">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<script src="assets/index.js"></script>
|
<script src="assets/index.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
Loading…
Reference in New Issue