fix: improve view of the block with qr-code

alrotech · Jul 16, 2021 · 33fa40c · 33fa40c
1 parent 30ddf45
commit 33fa40c
Show file tree

Hide file tree

Showing 4 changed files with 111 additions and 48 deletions.
diff --git a/assets/mspoplati/app/oplati.app.js b/assets/mspoplati/app/oplati.app.js
@@ -10,54 +10,45 @@ document
     .querySelectorAll(oWrapper)
     .forEach(block => {
 
-        const oplatiinfomessage = '';
-
-
-    console.log(
-        block.dataset.size,
-        block.dataset.fill,
-        block.dataset.path,
-        block.dataset.code,
-    );
-
-    const codeBlock = block.querySelector(oCodeBlock);
-
-    const qrCode = new QRCode(codeBlock, {
-        width: block.dataset.size,
-        height: block.dataset.size,
-        colorDark : block.dataset.path,
-        colorLight : block.dataset.fill,
-        correctLevel : QRCode.CorrectLevel.H,
-    });
-
-    qrCode.clear();
-    qrCode.makeCode(block.dataset.code);
-
-    // setInterval();
-
-    const button = block.querySelector('.button');
-
-    console.log(button);
-
-    button.addEventListener('click', function () {
-
-        const urlParams = new URLSearchParams(window.location.search);
-        const orderId = urlParams.get('msorder');
-
-        let form = new FormData();
-        form.set('ctx', 'web');
-        form.set('action', 'check');
-        form.set('id', orderId);
-
-        fetch("/assets/components/mspoplati/connector.php", {
-            method: "POST",
-            body: form
-        }).then(res => {
-            console.log("Request complete!, resp: ", res);
+        // console.log(block.dataset, block.dataset.path.padStart(7, '#'));
+
+        const qrCode = new QRCode(block.querySelector(oCodeBlock), {
+            width: block.dataset.size,
+            height: block.dataset.size,
+            colorDark: block.dataset.path.padStart(7, '#'),
+            colorLight: block.dataset.fill.padStart(7, '#'),
+            correctLevel: QRCode.CorrectLevel.H,
         });
 
-    });
+        qrCode.clear();
+        qrCode.makeCode(block.dataset.code);
+
+        let start = 60;
+        let interval = setInterval(() => {
+            start--;
+            block.querySelector(oTimerBlock).textContent = '00:' + start.toString(10).padStart(2, '0');
+            // every 3 second?
+            // update state?
+            checkPaymentStatus(block.dataset.oid);
+
+            if (start <= 0) {
+                clearInterval(interval);
+                // show button for renew
+                console.log('renewwing the code');
+            }
+        }, 1000);
 });
 
-// check payment
-// request new code
+function checkPaymentStatus(oid) {
+    let form = new FormData();
+    form.set('ctx', 'web');
+    form.set('action', 'check');
+    form.set('id', oid);
+
+    fetch('/assets/components/mspoplati/connector.php', {
+        method: 'POST',
+        body: form
+    }).then(response => {
+        console.log(response);
+    });
+}
diff --git a/assets/mspoplati/styles/oplati.app.css b/assets/mspoplati/styles/oplati.app.css
diff --git a/assets/mspoplati/styles/oplati.app.css.map b/assets/mspoplati/styles/oplati.app.css.map
diff --git a/assets/mspoplati/styles/oplati.app.scss b/assets/mspoplati/styles/oplati.app.scss
@@ -5,9 +5,42 @@
   border-radius: 0.75rem;
   box-shadow: 0 .25rem 0.75rem silver;
   padding: 1rem;
+  .oplati-mobile-block {
+    display: none;
+    margin-bottom: 1rem;
+    @media screen and (max-device-width: 768px) {
+      display: block;
+    }
+    .oplati-mobile-button {
+      border: 1px solid silver;
+      border-radius: 5px;
+      background: white;
+      font-size: .75rem;
+      font-weight: bold;
+      color: darkslategrey;
+      box-shadow: 0 3px 6px rgba(55, 55, 55, .2);
+    }
+  }
+  .oplati-help-message {
+    display: inline-block;
+    width: 50%;
+    font-size: 0.75rem;
+  }
   .oplati-code-block {
+    margin: 1rem 0;
+    @media screen and (max-device-width: 768px) {
+      display: none;
+    }
     img {
       margin: 0 auto;
     }
   }
+  .oplati-timer-block {
+    margin-top: 1rem;
+    color: gray;
+  }
+  .oplati-status-block {
+    margin-top: 1rem;
+    color: dimgray;
+  }
 }