package info viewing in modal
parent
d898cc2701
commit
1e5f152407
|
@ -238,7 +238,8 @@ const refreshPackages = () =>
|
|||
showDetailsAction.innerHTML = "Info";
|
||||
|
||||
showDetailsAction.addEventListener("click", async (event) => {
|
||||
(document.querySelector(".details-box")! as HTMLDivElement).style.display = "block";
|
||||
const detailsBox = document.querySelector(".details-box")! as HTMLDivElement;
|
||||
detailsBox.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;
|
||||
|
@ -278,6 +279,41 @@ const refreshPackages = () =>
|
|||
parseFloat(data.pickupPointLon!),
|
||||
]).addTo(map!);
|
||||
markers.push(marker);
|
||||
const openButton = detailsBox.querySelector(
|
||||
".modal-card-foot button.is-primary",
|
||||
)! as HTMLButtonElement;
|
||||
if (data.status === PackageStatus.READY_TO_PICKUP) {
|
||||
openButton.removeAttribute("disabled");
|
||||
} else {
|
||||
openButton.setAttribute("disabled", "true");
|
||||
}
|
||||
const infoTable = detailsBox.querySelector(".details-text")! as HTMLTableElement;
|
||||
// remove previous data from table
|
||||
Array.from(infoTable.tBodies).forEach((tbody) => tbody.remove());
|
||||
([
|
||||
["Status", "status"],
|
||||
[
|
||||
"Pickup point",
|
||||
(d) => `${d.pickupPointName} (${d.pickupPointStatus})
|
||||
${d.pickupPointDescription}
|
||||
${d.pickupPointStreet} ${d.pickupPointStreetNumber}
|
||||
${d.pickupPointProvince}
|
||||
${d.pickupPointPostCode} ${d.pickupPointCity}`,
|
||||
],
|
||||
["Sender", "sender"],
|
||||
["Open code", "openCode"],
|
||||
["Package number", "id"],
|
||||
] as [string, string | ((d: typeof data) => string)][]).forEach(([key, value]) => {
|
||||
const row = infoTable.insertRow();
|
||||
const keyCell = row.insertCell();
|
||||
keyCell.innerText = key;
|
||||
const valueCell = row.insertCell();
|
||||
if (typeof value === "string") {
|
||||
valueCell.innerText = `${data[value]}`;
|
||||
} else {
|
||||
valueCell.innerText = value(data);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const openAction = document.createElement("a");
|
||||
|
|
|
@ -22,3 +22,15 @@ $family-sans-serif: BlinkMacSystemFont, -apple-system, sans-serif;
|
|||
.error-box-text {
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
// bulma pls, why do I have to do this?
|
||||
@media screen and (max-width: $tablet - 1px) {
|
||||
.modal-card {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.details-text tr td:first-child() {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
|
@ -140,7 +140,16 @@
|
|||
<button class="delete" aria-label="close"></button>
|
||||
</header>
|
||||
<section class="modal-card-body">
|
||||
<div id="map"></div>
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div id="map"></div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<table class="details-text table">
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<footer class="modal-card-foot">
|
||||
<button class="button is-primary">Open the locker</button>
|
||||
|
|
Loading…
Reference in New Issue