From 7308f3759885dae119faef9ef61954e942aa3adf Mon Sep 17 00:00:00 2001
From: selfisekai <laura@selfisekai.rocks>
Date: Tue, 3 Nov 2020 21:38:47 +0100
Subject: [PATCH] error and areyousure modals

---
 front/src/index.ts | 33 +++++++++++++++++++--------------
 webroot/index.html | 41 +++++++++++++++++++++++++++--------------
 2 files changed, 46 insertions(+), 28 deletions(-)

diff --git a/front/src/index.ts b/front/src/index.ts
index 6eb0427..63cefdf 100644
--- a/front/src/index.ts
+++ b/front/src/index.ts
@@ -160,7 +160,7 @@ leafletLoaderCSS.setAttribute("crossorigin", "anonymous");
 
 const openError = (content: string) => {
   const errorBox = <HTMLDivElement>document.querySelector(".error-box")!;
-  const txt = <HTMLSpanElement>errorBox.querySelector(".error-box-text")!;
+  const txt = <HTMLParagraphElement>errorBox.querySelector(".error-box-text")!;
   txt.innerText = content;
   errorBox.style.display = "block";
 };
@@ -284,8 +284,20 @@ const refreshPackages = () =>
         )! as HTMLButtonElement;
         if (data.status === PackageStatus.READY_TO_PICKUP) {
           openButton.removeAttribute("disabled");
+          openButton.onclick = (e: Event) => {
+            e.preventDefault();
+            (document.querySelector(".details-box")! as HTMLElement).style.display = "none";
+            const { dataset } = (event.target as Element).parentNode!.parentNode as HTMLElement;
+            openLocker(
+              dataset.pickupPointLat!,
+              dataset.pickupPointLon!,
+              dataset.openCode!,
+              dataset.id!,
+            );
+          };
         } else {
           openButton.setAttribute("disabled", "true");
+          openButton.onclick = null;
         }
         const infoTable = detailsBox.querySelector(".details-text")! as HTMLTableElement;
         // remove previous data from table
@@ -319,7 +331,7 @@ ${d.pickupPointPostCode} ${d.pickupPointCity}`,
       const openAction = document.createElement("a");
       openAction.classList.add("button", "is-light", "is-small");
       openAction.innerHTML = "Open";
-      if (shipment.status == PackageStatus.READY_TO_PICKUP) {
+      if (shipment.status === PackageStatus.READY_TO_PICKUP) {
         openAction.addEventListener("click", (event) => {
           const data = ((event.target as Element).parentNode!.parentNode as HTMLElement).dataset;
           openLocker(data.pickupPointLat!, data.pickupPointLon!, data.openCode!, data.id!);
@@ -423,17 +435,6 @@ window.addEventListener("load", () => {
     }
   });
 
-  const errorBoxWindow = <HTMLDivElement>document.querySelector(".error-box")!;
-  const errorBoxButton = <HTMLAnchorElement>document.querySelector(".error-box-button")!;
-  errorBoxButton.addEventListener("click", () => {
-    errorBoxWindow.style.display = "none";
-  });
-
-  const areYouNotSureButton = <HTMLAnchorElement>document.querySelector(".areyousure-button-deny")!;
-  areYouNotSureButton.addEventListener("click", () => {
-    (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
@@ -441,7 +442,11 @@ window.addEventListener("load", () => {
     });
   });
 
-  [...Array.from(document.querySelectorAll(".modal button.delete"))].forEach((element) => {
+  ([
+    ...Array.from(document.querySelectorAll(".modal button.delete")),
+    document.querySelector(".modal .error-box-button"),
+    document.querySelector(".modal .areyousure-button-deny"),
+  ].filter((e) => !!e) as HTMLElement[]).forEach((element) => {
     element.addEventListener("click", () => {
       // eslint-disable-next-line no-param-reassign
       element.parentElement!.parentElement!.parentElement!.style.display = "none";
diff --git a/webroot/index.html b/webroot/index.html
index 5d0372d..885a7e8 100644
--- a/webroot/index.html
+++ b/webroot/index.html
@@ -96,22 +96,35 @@
         </form>
       </div>
     </div>
-    <div class="areyousure-box message is-warning">
-      <div class="message-header">Are you sure?</div>
-      <div class="message-body">
-        <div class="control">
-          <a class="areyousure-button button is-danger">Open locker</a>
-          <a class="areyousure-button-deny button">Cancel</a>
-        </div>
+    <div class="areyousure-box modal">
+      <div class="modal-background"></div>
+      <div class="modal-card">
+        <header class="modal-card-head">
+          <p class="modal-card-title">Are you sure?</p>
+          <button class="delete" aria-label="close"></button>
+        </header>
+        <section class="modal-card-body">
+          <p class="areyousure-text">The parcel locker will open even if you're not close to it, and so, anyone could take your package.</p>
+        </section>
+        <footer class="modal-card-foot">
+          <button class="areyousure-button button is-danger">Open locker</button>
+          <button class="areyousure-button-deny button">Cancel</button>
+        </footer>
       </div>
     </div>
-    <div class="error-box message is-danger">
-      <div class="message-header">Error</div>
-      <div class="message-body">
-        <span class="error-box-text"></span>
-        <div class="control">
-          <a class="error-box-button button is-danger">OK</a>
-        </div>
+    <div class="error-box modal">
+      <div class="modal-background"></div>
+      <div class="modal-card">
+        <header class="modal-card-head">
+          <p class="modal-card-title">Error</p>
+          <button class="delete" aria-label="close"></button>
+        </header>
+        <section class="modal-card-body">
+          <p class="error-box-text"></p>
+        </section>
+        <footer class="modal-card-foot">
+          <button class="error-box-button button">OK</button>
+        </footer>
       </div>
     </div>
     <div class="package-list container">