package info modals

front/src/index.ts

@@ -140,6 +140,8 @@ enum PackageStatus {
 }
 
 let phone: string | null = localStorage.getItem("phone");
+let map: L.Map | null = null;
+const markers: L.Marker[] = [];
 const leafletLoaderJS = document.createElement("script");
 leafletLoaderJS.setAttribute("src", "https://unpkg.com/leaflet@1.7.1/dist/leaflet.js");
 leafletLoaderJS.setAttribute(
@@ -235,22 +237,47 @@ const refreshPackages = () =>
       showDetailsAction.classList.add("button", "is-light", "is-small");
       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;
-        document.querySelector("head")!.appendChild(leafletLoaderCSS);
-        document.querySelector("head")!.appendChild(leafletLoaderJS);
-        leafletLoaderJS.addEventListener("load", () => {
-          const map = L.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 &copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>',
-            maxZoom: 19,
-          }).addTo(map);
-          L.marker([parseFloat(data.pickupPointLat!), parseFloat(data.pickupPointLon!)]).addTo(map);
-        });
+        // maybe this looks like shit, but it works
+        let leafletLoaded = false;
+        try {
+          leafletLoaded = !!L;
+        } catch (e) {
+          if (!(e instanceof ReferenceError)) {
+            throw e;
+          }
+        }
+        if (!leafletLoaded) {
+          document.querySelector("head")!.appendChild(leafletLoaderCSS);
+          document.querySelector("head")!.appendChild(leafletLoaderJS);
+          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 &copy; <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");
@@ -371,6 +398,20 @@ window.addEventListener("load", () => {
     (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) => {
     switch (parseInt(res.status, 10)) {
       case 200:

front/src/style.scss

@@ -9,12 +9,13 @@ $family-sans-serif: BlinkMacSystemFont, -apple-system, sans-serif;
 .sms-phone-field,
 .error-box,
 .areyousure-box,
-.package-list {
+.package-list,
+.details-box {
   display: none;
 }
 
 #map {
-  width: 400px;
+  width: 100%;
   height: 400px;
 }
 

webroot/index.html

@@ -116,22 +116,35 @@
     </div>
     <div class="package-list container">
       <div class="logout-button button">Log out</div>
-	      <table class="table is-striped">
-          <thead>
-            <tr>
-              <th>Package number</th>
-              <th>Sender</th>
-              <th>Status</th>
-              <th>Location</th>
-              <th></th>
-              <th></th>
-            </tr>
-          </thead>
-          <tbody></tbody>
-	    </table>
+        <div class="table-container">
+          <table class="table is-striped">
+            <thead>
+              <tr>
+                <th>Package number</th>
+                <th>Sender</th>
+                <th>Status</th>
+                <th>Location</th>
+                <th></th>
+                <th></th>
+              </tr>
+            </thead>
+            <tbody></tbody>
+        </table>
+      </div>
     </div>
-    <div class="details-box">
-      <div id="map">
+    <div class="modal details-box">
+      <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>