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 phone: string | null = localStorage.getItem("phone");
|
||||||
|
let map: L.Map | null = null;
|
||||||
|
const markers: L.Marker[] = [];
|
||||||
const leafletLoaderJS = document.createElement("script");
|
const leafletLoaderJS = document.createElement("script");
|
||||||
leafletLoaderJS.setAttribute("src", "https://unpkg.com/leaflet@1.7.1/dist/leaflet.js");
|
leafletLoaderJS.setAttribute("src", "https://unpkg.com/leaflet@1.7.1/dist/leaflet.js");
|
||||||
leafletLoaderJS.setAttribute(
|
leafletLoaderJS.setAttribute(
|
||||||
|
@ -235,22 +237,47 @@ const refreshPackages = () =>
|
||||||
showDetailsAction.classList.add("button", "is-light", "is-small");
|
showDetailsAction.classList.add("button", "is-light", "is-small");
|
||||||
showDetailsAction.innerHTML = "Info";
|
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;
|
const data = ((event.target as Element).parentNode!.parentNode as HTMLElement).dataset;
|
||||||
document.querySelector("head")!.appendChild(leafletLoaderCSS);
|
// maybe this looks like shit, but it works
|
||||||
document.querySelector("head")!.appendChild(leafletLoaderJS);
|
let leafletLoaded = false;
|
||||||
leafletLoaderJS.addEventListener("load", () => {
|
try {
|
||||||
const map = L.map("map").setView(
|
leafletLoaded = !!L;
|
||||||
[parseFloat(data.pickupPointLat!), parseFloat(data.pickupPointLon!)],
|
} catch (e) {
|
||||||
17,
|
if (!(e instanceof ReferenceError)) {
|
||||||
);
|
throw e;
|
||||||
L.tileLayer("https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png", {
|
}
|
||||||
attribution:
|
}
|
||||||
'Map data © <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>',
|
if (!leafletLoaded) {
|
||||||
maxZoom: 19,
|
document.querySelector("head")!.appendChild(leafletLoaderCSS);
|
||||||
}).addTo(map);
|
document.querySelector("head")!.appendChild(leafletLoaderJS);
|
||||||
L.marker([parseFloat(data.pickupPointLat!), parseFloat(data.pickupPointLon!)]).addTo(map);
|
await new Promise((resolve, reject) => {
|
||||||
});
|
leafletLoaderJS.addEventListener("load", () => {
|
||||||
|
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!);
|
||||||
|
// 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");
|
const openAction = document.createElement("a");
|
||||||
|
@ -371,6 +398,20 @@ window.addEventListener("load", () => {
|
||||||
(document.querySelector(".areyousure-box") as HTMLElement).style.display = "none";
|
(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) => {
|
request("session", {}).then((res) => {
|
||||||
switch (parseInt(res.status, 10)) {
|
switch (parseInt(res.status, 10)) {
|
||||||
case 200:
|
case 200:
|
||||||
|
|
|
@ -9,12 +9,13 @@ $family-sans-serif: BlinkMacSystemFont, -apple-system, sans-serif;
|
||||||
.sms-phone-field,
|
.sms-phone-field,
|
||||||
.error-box,
|
.error-box,
|
||||||
.areyousure-box,
|
.areyousure-box,
|
||||||
.package-list {
|
.package-list,
|
||||||
|
.details-box {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#map {
|
#map {
|
||||||
width: 400px;
|
width: 100%;
|
||||||
height: 400px;
|
height: 400px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -116,22 +116,35 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="package-list container">
|
<div class="package-list container">
|
||||||
<div class="logout-button button">Log out</div>
|
<div class="logout-button button">Log out</div>
|
||||||
<table class="table is-striped">
|
<div class="table-container">
|
||||||
<thead>
|
<table class="table is-striped">
|
||||||
<tr>
|
<thead>
|
||||||
<th>Package number</th>
|
<tr>
|
||||||
<th>Sender</th>
|
<th>Package number</th>
|
||||||
<th>Status</th>
|
<th>Sender</th>
|
||||||
<th>Location</th>
|
<th>Status</th>
|
||||||
<th></th>
|
<th>Location</th>
|
||||||
<th></th>
|
<th></th>
|
||||||
</tr>
|
<th></th>
|
||||||
</thead>
|
</tr>
|
||||||
<tbody></tbody>
|
</thead>
|
||||||
</table>
|
<tbody></tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="details-box">
|
<div class="modal details-box">
|
||||||
<div id="map">
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in a new issue