From 54dc5e6397f5143395e9b37aab0b8a0a74f8f3e9 Mon Sep 17 00:00:00 2001
From: xorzo <80540494+xorzo1@users.noreply.github.com>
Date: Sat, 21 May 2022 18:10:06 +0200
Subject: [PATCH] refactor()

Added ProgressBar to esx notify
- the ProgressBar shows the timeout for when the notification is going to disappear

https://imgur.com/nKda41I
---
 [esx]/esx_notify/nui/css/style.css | 73 ++++++++++++++++++++++++++++++
 [esx]/esx_notify/nui/index.html    | 70 ++--------------------------
 [esx]/esx_notify/nui/js/script.js  | 33 ++++++++++----
 3 files changed, 100 insertions(+), 76 deletions(-)

diff --git a/[esx]/esx_notify/nui/css/style.css b/[esx]/esx_notify/nui/css/style.css
index 4b24467e..3eacd92a 100644
--- a/[esx]/esx_notify/nui/css/style.css
+++ b/[esx]/esx_notify/nui/css/style.css
@@ -11,4 +11,77 @@
 body {
     color: var(--color);
     font-family: sans-serif;
+}
+
+.notify {
+    display: none;
+    flex: auto;
+    border-left: 5px solid rgb(34, 132, 189);
+    position:absolute;
+    margin: 0 auto;
+    left: 0;
+    right: 0;
+    top: 5%;
+    min-width:15%;
+    width:fit-content; 
+    height:50px;
+    background: rgba(5,5, 5, 0.9);
+    border-radius: 5px;
+    animation: growDown 300ms ease-in-out;
+    padding-right: 10px;
+}
+.success {
+    border-left: 5px solid rgb(33, 223, 15) !important; 
+}
+.error {
+    border-left: 5px solid rgb(231, 35, 28) !important; 
+}
+
+.icon {
+    border: 0;
+}
+
+.innerText {
+    flex: auto;
+    margin-top: 15px;
+    width:100%;
+}
+
+.innerText{
+    margin-left: 10px;
+}
+
+p {
+    flex: auto;
+    word-wrap: break-word;
+    margin-left: 40px; 
+    margin-top: 17px;
+}
+
+.innerText .icon {
+    float: left;
+    margin-left: 5px;
+    font-size: 20px;
+}
+
+@keyframes growDown {
+    0% {
+        transform: scaleY(0);
+    }
+    80% {
+        transform: scaleY(1.1)
+    }
+    100% {
+        transform: scaleY(1)
+    }
+}
+
+.prog {
+    flex: auto;
+    position:absolute;
+    margin: 0 auto;
+    left: 0;
+    bottom: 0;
+    background: rgb(75, 75, 75);
+    height: 4px;
 }
\ No newline at end of file
diff --git a/[esx]/esx_notify/nui/index.html b/[esx]/esx_notify/nui/index.html
index 1fd3c86c..58817fe1 100644
--- a/[esx]/esx_notify/nui/index.html
+++ b/[esx]/esx_notify/nui/index.html
@@ -12,85 +12,21 @@
             <i class="fas fa-info-circle icon info"></i>
             <p class="text" id="infoMessage"></p>
         </div>
+        <div class="prog" id="prog"></div>
     </div>
     <div id="notifySuccess" class="notify success">
         <div class="innerText">
             <i class="fas fa-check-circle icon info"></i>
             <p class="text" id="successMessage"></p>
         </div>
+        <div class="prog" id="prog"></div>
     </div>
     <div id="notifyError" class="notify error">
         <div class="innerText">
             <i class="fas fa-exclamation-circle icon info"></i>
             <p class="text" id="errorMessage"></p>
         </div>
+        <div class="prog" id="prog"></div>
     </div>
 </body>
 </html>
-
-<style>
-
-
-.notify {
-        flex: auto;
-        display: none;
-        border-left: 5px solid rgb(34, 132, 189);
-        position:absolute;
-        margin: 0 auto;
-        left: 0;
-        right: 0;
-        top: 5%;
-        min-width:15%;
-        width:fit-content; 
-        height:50px;
-        background: rgba(5,5, 5, 0.9);
-        border-radius: 5px;
-        animation: growDown 300ms ease-in-out;
-        padding-right: 10px;
-    }
-    .success {
-        border-left: 5px solid rgb(33, 223, 15) !important; 
-    }
-    .error {
-        border-left: 5px solid rgb(231, 35, 28) !important; 
-    }
-
-    .icon {
-        border: 0;
-    }
-
-    .innerText {
-        flex: auto;
-        margin-top: 15px;
-        width:100%;
-    }
-
-    .innerText{
-        margin-left: 10px;
-    }
-
-    p {
-        flex: auto;
-        word-wrap: break-word;
-        margin-left: 40px; 
-        margin-top: 17px;
-    }
-
-    .innerText .icon {
-        float: left;
-        margin-left: 5px;
-        font-size: 20px;
-    }
-
-    @keyframes growDown {
-        0% {
-            transform: scaleY(0);
-        }
-        80% {
-            transform: scaleY(1.1)
-        }
-        100% {
-            transform: scaleY(1)
-        }
-    }
-</style>
diff --git a/[esx]/esx_notify/nui/js/script.js b/[esx]/esx_notify/nui/js/script.js
index 5122b5a1..9bacc374 100644
--- a/[esx]/esx_notify/nui/js/script.js
+++ b/[esx]/esx_notify/nui/js/script.js
@@ -4,23 +4,38 @@ const doc = document
 $(function () {
     w.addEventListener('message', function(e) {
         $(".text").text(e.data.message)
+        const start = new Date()
+        const max = e.data.length
+        const val = Math.floor(max/100)
+        let current = ""
         if (e.data.type === "info") {
             doc.getElementById("notifyInfo").style.display = "block";
-            Timeout()
+            RequestAnimUpdate()
+            current = "notifyInfo"
         } else if (e.data.type === "error") {
             doc.getElementById("notifyError").style.display = "block";
-            Timeout()
+            RequestAnimUpdate()
+            current = "notifyError"
         } else if (e.data.type === "success") {
             doc.getElementById("notifySuccess").style.display = "block";
-            Timeout()
+            RequestAnimUpdate()
+            current = "notifySuccess"
         }
 
-        function Timeout() {
-            setTimeout(function () {
-                doc.getElementById("notifyInfo").style.display = "none";
-                doc.getElementById("notifyError").style.display = "none";
-                doc.getElementById("notifySuccess").style.display = "none";
-            }, e.data.length)
+        function RequestAnimUpdate() {
+            const now = new Date()
+            const diff = now.getTime() - start.getTime();
+            const prc = Math.round((diff/max)*100)
+            if (prc <= 100) {
+                RequestUpdateProgress(prc)
+                setTimeout(RequestAnimUpdate, val)
+            } else {
+                doc.getElementById(current).style.display = "none"
+            }
+        }
+
+        function RequestUpdateProgress(prc) {
+            $(".prog").css("width", prc + "%")
         }
     })
 })