now uses datasets to store data for opening locker; location column

front/src/index.ts

@@ -43,13 +43,29 @@ window.addEventListener("load", () => {
     const table = document.querySelector("tbody")!;
     res.forEach((shipment: Package) => {
       let row = table.insertRow();
-      let checkbox = row.insertCell(0);
-      let id = row.insertCell(1);
-      let sender = row.insertCell(2);
-      let status = row.insertCell(3);
+      let id = row.insertCell(0);
+      let sender = row.insertCell(1);
+      let status = row.insertCell(2);
+      let locker = row.insertCell(3);
+      let openAction = row.insertCell(4);
+
+      row.dataset.lat = shipment.pickupPoint.location.latitude.toString();
+      row.dataset.lon = shipment.pickupPoint.location.longitude.toString();
+      row.dataset.openCode = shipment.openCode;
+      row.dataset.id = shipment.shipmentNumber;
+
       id.innerText = shipment.shipmentNumber;
       sender.innerText = shipment.senderName;
       status.innerText = shipment.status;
+      locker.innerText =
+        shipment.pickupPoint.name + " - " + shipment.pickupPoint.description;
+      openAction.innerHTML = "Open";
+      openAction.addEventListener("click", (event) => {
+        console.log(
+          ((event.target as Element).parentNode as HTMLElement).dataset
+        );
+      });
+
       // console.log(shipment);
     });
   });
@@ -67,6 +83,8 @@ interface Locker {
   name: string;
   status: string;
   description: string;
+  location: Location;
+  address: Address;
 }
 
 interface Address {
@@ -79,7 +97,7 @@ interface Address {
 
 interface Location {
   latitude: number;
-  longtitude: number;
+  longitude: number;
 }
 
 enum PackageStatus {

webroot/index.html

@@ -41,11 +41,11 @@
 	  <table>
         <thead>
           <tr>
-            <th></th>
             <th>Package number</th>
             <th>Sender</th>
             <th>Status</th>
-            <th>Action</th>
+            <th>Location</th>
+            <th></th>
           </tr>
         </thead>
         <tbody></tbody>