package info viewing in modal

front/src/index.ts

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

front/src/style.scss

@@ -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;
+}

webroot/index.html

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