added some basic leaflet and other stuff

master
Dominika Liberda 2020-10-26 14:07:33 +01:00
parent 756a75d0aa
commit 00b1bb78d2
5 changed files with 91 additions and 21 deletions

View File

@ -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",

View File

@ -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 &copy; <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

View File

@ -10,3 +10,8 @@ $family-sans-serif: BlinkMacSystemFont, -apple-system, sans-serif;
.package-list {
display: none;
}
#map {
width: 400px;
height: 400px;
}

View File

@ -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"

View File

@ -97,11 +97,16 @@
<th>Status</th>
<th>Location</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<div class="details-box">
<div id="map">
</div>
</div>
</div>
<script src="assets/index.js"></script>
</body>