package info viewing in modal
This commit is contained in:
parent
d898cc2701
commit
1e5f152407
|
@ -238,7 +238,8 @@ const refreshPackages = () =>
|
||||||
showDetailsAction.innerHTML = "Info";
|
showDetailsAction.innerHTML = "Info";
|
||||||
|
|
||||||
showDetailsAction.addEventListener("click", async (event) => {
|
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;
|
const data = ((event.target as Element).parentNode!.parentNode as HTMLElement).dataset;
|
||||||
// maybe this looks like shit, but it works
|
// maybe this looks like shit, but it works
|
||||||
let leafletLoaded = false;
|
let leafletLoaded = false;
|
||||||
|
@ -278,6 +279,41 @@ const refreshPackages = () =>
|
||||||
parseFloat(data.pickupPointLon!),
|
parseFloat(data.pickupPointLon!),
|
||||||
]).addTo(map!);
|
]).addTo(map!);
|
||||||
markers.push(marker);
|
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");
|
const openAction = document.createElement("a");
|
||||||
|
|
|
@ -22,3 +22,15 @@ $family-sans-serif: BlinkMacSystemFont, -apple-system, sans-serif;
|
||||||
.error-box-text {
|
.error-box-text {
|
||||||
font-family: monospace;
|
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>
|
<button class="delete" aria-label="close"></button>
|
||||||
</header>
|
</header>
|
||||||
<section class="modal-card-body">
|
<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>
|
</section>
|
||||||
<footer class="modal-card-foot">
|
<footer class="modal-card-foot">
|
||||||
<button class="button is-primary">Open the locker</button>
|
<button class="button is-primary">Open the locker</button>
|
||||||
|
|
Loading…
Reference in a new issue