package info modals
This commit is contained in:
parent
68d37197b6
commit
d898cc2701
|
@ -140,6 +140,8 @@ enum PackageStatus {
|
|||
}
|
||||
|
||||
let phone: string | null = localStorage.getItem("phone");
|
||||
let map: L.Map | null = null;
|
||||
const markers: L.Marker[] = [];
|
||||
const leafletLoaderJS = document.createElement("script");
|
||||
leafletLoaderJS.setAttribute("src", "https://unpkg.com/leaflet@1.7.1/dist/leaflet.js");
|
||||
leafletLoaderJS.setAttribute(
|
||||
|
@ -235,22 +237,47 @@ const refreshPackages = () =>
|
|||
showDetailsAction.classList.add("button", "is-light", "is-small");
|
||||
showDetailsAction.innerHTML = "Info";
|
||||
|
||||
showDetailsAction.addEventListener("click", (event) => {
|
||||
showDetailsAction.addEventListener("click", async (event) => {
|
||||
(document.querySelector(".details-box")! as HTMLDivElement).style.display = "block";
|
||||
const data = ((event.target as Element).parentNode!.parentNode as HTMLElement).dataset;
|
||||
// maybe this looks like shit, but it works
|
||||
let leafletLoaded = false;
|
||||
try {
|
||||
leafletLoaded = !!L;
|
||||
} catch (e) {
|
||||
if (!(e instanceof ReferenceError)) {
|
||||
throw e;
|
||||
}
|
||||
}
|
||||
if (!leafletLoaded) {
|
||||
document.querySelector("head")!.appendChild(leafletLoaderCSS);
|
||||
document.querySelector("head")!.appendChild(leafletLoaderJS);
|
||||
await new Promise((resolve, reject) => {
|
||||
leafletLoaderJS.addEventListener("load", () => {
|
||||
const map = L.map("map").setView(
|
||||
[parseFloat(data.pickupPointLat!), parseFloat(data.pickupPointLon!)],
|
||||
17,
|
||||
);
|
||||
resolve();
|
||||
});
|
||||
leafletLoaderJS.addEventListener("error", () => {
|
||||
reject();
|
||||
});
|
||||
});
|
||||
map = L.map("map");
|
||||
}
|
||||
map!.setView([parseFloat(data.pickupPointLat!), parseFloat(data.pickupPointLon!)], 17);
|
||||
L.tileLayer("https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png", {
|
||||
attribution:
|
||||
'Map data © <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>',
|
||||
maxZoom: 19,
|
||||
}).addTo(map);
|
||||
L.marker([parseFloat(data.pickupPointLat!), parseFloat(data.pickupPointLon!)]).addTo(map);
|
||||
});
|
||||
}).addTo(map!);
|
||||
// delete previous markers
|
||||
while (markers.length > 0) {
|
||||
// @ts-ignore it's always marker, while loop checks length
|
||||
map.removeLayer(markers.pop());
|
||||
}
|
||||
const marker = L.marker([
|
||||
parseFloat(data.pickupPointLat!),
|
||||
parseFloat(data.pickupPointLon!),
|
||||
]).addTo(map!);
|
||||
markers.push(marker);
|
||||
});
|
||||
|
||||
const openAction = document.createElement("a");
|
||||
|
@ -371,6 +398,20 @@ window.addEventListener("load", () => {
|
|||
(document.querySelector(".areyousure-box") as HTMLElement).style.display = "none";
|
||||
});
|
||||
|
||||
[...Array.from(document.querySelectorAll(".modal-background"))].forEach((element) => {
|
||||
element.addEventListener("click", () => {
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
element.parentElement!.style.display = "none";
|
||||
});
|
||||
});
|
||||
|
||||
[...Array.from(document.querySelectorAll(".modal button.delete"))].forEach((element) => {
|
||||
element.addEventListener("click", () => {
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
element.parentElement!.parentElement!.parentElement!.style.display = "none";
|
||||
});
|
||||
});
|
||||
|
||||
request("session", {}).then((res) => {
|
||||
switch (parseInt(res.status, 10)) {
|
||||
case 200:
|
||||
|
|
|
@ -9,12 +9,13 @@ $family-sans-serif: BlinkMacSystemFont, -apple-system, sans-serif;
|
|||
.sms-phone-field,
|
||||
.error-box,
|
||||
.areyousure-box,
|
||||
.package-list {
|
||||
.package-list,
|
||||
.details-box {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#map {
|
||||
width: 400px;
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
|
|
|
@ -116,6 +116,7 @@
|
|||
</div>
|
||||
<div class="package-list container">
|
||||
<div class="logout-button button">Log out</div>
|
||||
<div class="table-container">
|
||||
<table class="table is-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
|
@ -130,8 +131,20 @@
|
|||
<tbody></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="details-box">
|
||||
<div id="map">
|
||||
</div>
|
||||
<div class="modal details-box">
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-card">
|
||||
<header class="modal-card-head">
|
||||
<p class="modal-card-title">Details</p>
|
||||
<button class="delete" aria-label="close"></button>
|
||||
</header>
|
||||
<section class="modal-card-body">
|
||||
<div id="map"></div>
|
||||
</section>
|
||||
<footer class="modal-card-foot">
|
||||
<button class="button is-primary">Open the locker</button>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
Loading…
Reference in a new issue