diff --git a/[esx]/esx_notify/fxmanifest.lua b/[esx]/esx_notify/fxmanifest.lua index d852702d..cbf467ef 100644 --- a/[esx]/esx_notify/fxmanifest.lua +++ b/[esx]/esx_notify/fxmanifest.lua @@ -1,14 +1,15 @@ -fx_version 'adamant' -game 'gta5' -author 'ESX-Framework' -description 'ESX TextUI' - -client_scripts { 'TextUI.lua' } -shared_script '@es_extended/imports.lua' -ui_page 'nui/index.html' - -files { - 'nui/index.html', - 'nui/js/*.js', - 'nui/css/*.css' -} +fx_version 'adamant' +game 'gta5' +author 'ESX-Framework' +description 'ESX Notification' + +client_scripts { 'Notify.lua' } + +ui_page 'nui/index.html' + +files { + 'nui/index.html', + 'nui/js/*.js', + 'nui/css/*.css', + 'nui/img/*.png', +} diff --git a/[esx]/esx_notify/nui/css/style.css b/[esx]/esx_notify/nui/css/style.css index 61d24738..05469ab9 100644 --- a/[esx]/esx_notify/nui/css/style.css +++ b/[esx]/esx_notify/nui/css/style.css @@ -1,14 +1,90 @@ -:root { - --color: white; - --bgColor: #212121; -} - -* { - padding: 0; - margin: 0; -} - -body { - color: var(--color); - font-family: sans-serif; +:root { + --color: white; + --bgColor: #212121; +} + +* { + padding: 0; + margin: 0; +} + +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; +} +.custom { + +} +.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 b1f1e739..65579325 100644 --- a/[esx]/esx_notify/nui/index.html +++ b/[esx]/esx_notify/nui/index.html @@ -1,94 +1,39 @@ - - - - - - - - - - -
-
- -

-
-
-
-
- -

-
-
-
-
- -

-
-
- - - - \ No newline at end of file + + + + + + + + + +
+
+ +

+
+
+
+
+
+ +

+
+
+
+
+
+ +

+
+
+
+
+
+ +

+
+
+
+ + diff --git a/[esx]/esx_notify/nui/js/script.js b/[esx]/esx_notify/nui/js/script.js index 816f2cbe..eb734ef5 100644 --- a/[esx]/esx_notify/nui/js/script.js +++ b/[esx]/esx_notify/nui/js/script.js @@ -1,126 +1,399 @@ -const w = window -const doc = document -let blackc = {'color': '#000'}; -let redc = {'color': '#F00'}; -let greenc = {'color': '#0F0'}; -let bluec = {'color': '#00F'}; -let yellowc = {'color': '#ff0'}; -let greyc = {'color': '#808080'}; -let darkgreyc = {'color': '#a9a9a9'}; -let orangec = {'color': '#FFA500'}; -let purplec = {'color': '#800080'}; -let whitec = {'color': '#FFF'}; - -$(function () { - w.addEventListener('message', function(e) { - $(".text").text('') - if (e.data.action === "show") { - if (e.data.type === "info") { - - finalarr = conv(e.data.message) - - $(".text").append(finalarr); - finalarr = [] - doc.getElementById("notifyInfo").style.display = "block"; - } else if (e.data.type === "error") { - finalarr = conv(e.data.message) - - $(".text").append(finalarr); - finalarr = [] - doc.getElementById("notifyError").style.display = "block"; - } else if (e.data.type === "success") { - finalarr = conv(e.data.message) - - $(".text").append(finalarr); - finalarr = [] - doc.getElementById("notifySuccess").style.display = "block"; - } - } else if (e.data.action === "hide") { - doc.getElementById("notifyInfo").style.display = "none"; - doc.getElementById("notifyError").style.display = "none"; - doc.getElementById("notifySuccess").style.display = "none"; - } - }) -}) - -function conv(spoop) { - let finalarr = [] - var arr = spoop.split("~") - for (let i = 0; i < arr.length; i++) { - let arr1 = arr[i] - - let redTrue = arr1.startsWith("r") - let greenTrue = arr1.startsWith("g") - let whiteTrue = arr1.startsWith("w") - let blackTrue = arr1.startsWith("u") - let blueTrue = arr1.startsWith("b") - let yellowTrue = arr1.startsWith("y") - let greyTrue = arr1.startsWith("c") - let darkgreyTrue = arr1.startsWith("m") - let orangeTrue = arr1.startsWith("o") - let purpleTrue = arr1.startsWith("p") - x = i + 1 - if (i == 0) { - if (arr1.startsWith("~")) { - - } else { - let arr3 = $('' + arr[i] + ''); - arr3.css(whitec) - - finalarr.push(arr3) - } - } - - if (redTrue) { - arr3 = PushData(arr[x], redc) - - finalarr.push(arr3) - } else if (greenTrue) { - arr3 = PushData(arr[x], greenc) - - finalarr.push(arr3) - } else if (whiteTrue) { - arr3 = PushData(arr[x], whitec) - - finalarr.push(arr3) - } else if (blackTrue) { - arr3 = PushData(arr[x], blackc) - - finalarr.push(arr3) - } else if (blueTrue) { - arr3 = PushData(arr[x], bluec) - - finalarr.push(arr3) - } else if (yellowTrue) { - arr3 = PushData(arr[x], yellowc) - - finalarr.push(arr3) - } else if (greyTrue) { - arr3 = PushData(arr[x], greyc) - - finalarr.push(arr3) - } else if (darkgreyTrue) { - arr3 = PushData(arr[x], darkgreyc) - - finalarr.push(arr3) - } else if (orangeTrue) { - arr3 = PushData(arr[x], orangec) - - finalarr.push(arr3) - } else if (purpleTrue) { - arr3 = PushData(arr[x], purplec) - finalarr.push(arr3) - } - - - } - return finalarr -} -function PushData(data, color) { - - - let arr3 = $('' + data + ''); - arr3.css(color) - - return arr3 -} \ No newline at end of file +const w = window +const doc = document + + +$(function () { + w.addEventListener('message', function(e) { + $(".text").text('') + const start = new Date() + const max = e.data.length + const val = Math.floor(max/100) + let current = "" + let blackc = {'color': '#000'}; + let redc = {'color': '#F00'}; + let greenc = {'color': '#0F0'}; + let bluec = {'color': '#00F'}; + let yellowc = {'color': '#ff0'}; + let greyc = {'color': '#808080'}; + let darkgreyc = {'color': '#a9a9a9'}; + let orangec = {'color': '#FFA500'}; + let purplec = {'color': '#800080'}; + let whitec = {'color': '#FFF'}; + + if (e.data.type === "info") { + doc.getElementById("notifyInfo").style.display = "block"; + let finalarr = [] + + + + + var arr = e.data.message.split("~") + for (let i = 0; i < arr.length; i++) { + let arr1 = arr[i] + + let redTrue = arr1.startsWith("r") + let greenTrue = arr1.startsWith("g") + let whiteTrue = arr1.startsWith("w") + let blackTrue = arr1.startsWith("u") + let blueTrue = arr1.startsWith("b") + let yellowTrue = arr1.startsWith("y") + let greyTrue = arr1.startsWith("c") + let darkgreyTrue = arr1.startsWith("m") + let orangeTrue = arr1.startsWith("o") + let purpleTrue = arr1.startsWith("p") + + if (i == 0) { + if (arr1.startsWith("~")) { + + } else { + let arr3 = $('' + arr[i] + ''); + arr3.css(whitec) + + finalarr.push(arr3) + } + } + + if (redTrue) { + x = i + 1 + + + let arr3 = $('' + arr[x] + ''); + arr3.css(redc) + + finalarr.push(arr3) + } else if (greenTrue) { + x = i + 1 + + + let arr3 = $('' + arr[x] + ''); + arr3.css(greenc) + + finalarr.push(arr3) + } else if (whiteTrue) { + x = i + 1 + + + let arr3 = $('' + arr[x] + ''); + arr3.css(whitec) + + finalarr.push(arr3) + } else if (blackTrue) { + x = i + 1 + + + let arr3 = $('' + arr[x] + ''); + arr3.css(blackc) + + finalarr.push(arr3) + } else if (blueTrue) { + x = i + 1 + + + let arr3 = $('' + arr[x] + ''); + arr3.css(bluec) + + finalarr.push(arr3) + } else if (yellowTrue) { + x = i + 1 + + + let arr3 = $('' + arr[x] + ''); + arr3.css(yellowc) + + finalarr.push(arr3) + } else if (greyTrue) { + x = i + 1 + + + let arr3 = $('' + arr[x] + ''); + arr3.css(greyc) + + finalarr.push(arr3) + } else if (darkgreyTrue) { + x = i + 1 + + + let arr3 = $('' + arr[x] + ''); + arr3.css(darkgreyc) + + finalarr.push(arr3) + } else if (orangeTrue) { + x = i + 1 + + + let arr3 = $('' + arr[x] + ''); + arr3.css(orangec) + + finalarr.push(arr3) + } else if (purpleTrue) { + x = i + 1 + + + let arr3 = $('' + arr[x] + ''); + arr3.css(purplec) + finalarr.push(arr3) + } + + + } + $(".text").append(finalarr); + finalarr = [] + RequestAnimUpdate() + current = "notifyInfo" + } else if (e.data.type === "error") { + doc.getElementById("notifyError").style.display = "block"; + let finalarr = [] + + + + + var arr = e.data.message.split("~") + for (let i = 0; i < arr.length; i++) { + let arr1 = arr[i] + + let redTrue = arr1.startsWith("r") + let greenTrue = arr1.startsWith("g") + let whiteTrue = arr1.startsWith("w") + let blackTrue = arr1.startsWith("u") + let blueTrue = arr1.startsWith("b") + let yellowTrue = arr1.startsWith("y") + let greyTrue = arr1.startsWith("c") + let darkgreyTrue = arr1.startsWith("m") + let orangeTrue = arr1.startsWith("o") + let purpleTrue = arr1.startsWith("p") + + if (i == 0) { + if (arr1.startsWith("~")) { + + } else { + let arr3 = $('' + arr[i] + ''); + arr3.css(whitec) + + finalarr.push(arr3) + } + } + + if (redTrue) { + x = i + 1 + + + let arr3 = $('' + arr[x] + ''); + arr3.css(redc) + + finalarr.push(arr3) + } else if (greenTrue) { + x = i + 1 + + + let arr3 = $('' + arr[x] + ''); + arr3.css(greenc) + + finalarr.push(arr3) + } else if (whiteTrue) { + x = i + 1 + + + let arr3 = $('' + arr[x] + ''); + arr3.css(whitec) + + finalarr.push(arr3) + } else if (blackTrue) { + x = i + 1 + + + let arr3 = $('' + arr[x] + ''); + arr3.css(blackc) + + finalarr.push(arr3) + } else if (blueTrue) { + x = i + 1 + + + let arr3 = $('' + arr[x] + ''); + arr3.css(bluec) + + finalarr.push(arr3) + } else if (yellowTrue) { + x = i + 1 + + + let arr3 = $('' + arr[x] + ''); + arr3.css(yellowc) + + finalarr.push(arr3) + } else if (greyTrue) { + x = i + 1 + + + let arr3 = $('' + arr[x] + ''); + arr3.css(greyc) + + finalarr.push(arr3) + } else if (darkgreyTrue) { + x = i + 1 + + + let arr3 = $('' + arr[x] + ''); + arr3.css(darkgreyc) + + finalarr.push(arr3) + } else if (orangeTrue) { + x = i + 1 + + + let arr3 = $('' + arr[x] + ''); + arr3.css(orangec) + + finalarr.push(arr3) + } else if (purpleTrue) { + x = i + 1 + + + let arr3 = $('' + arr[x] + ''); + arr3.css(purplec) + finalarr.push(arr3) + } + + + } + $(".text").append(finalarr); + RequestAnimUpdate() + current = "notifyError" + } else if (e.data.type === "success") { + doc.getElementById("notifySuccess").style.display = "block"; + let finalarr = [] + + + + + var arr = e.data.message.split("~") + for (let i = 0; i < arr.length; i++) { + let arr1 = arr[i] + + let redTrue = arr1.startsWith("r") + let greenTrue = arr1.startsWith("g") + let whiteTrue = arr1.startsWith("w") + let blackTrue = arr1.startsWith("u") + let blueTrue = arr1.startsWith("b") + let yellowTrue = arr1.startsWith("y") + let greyTrue = arr1.startsWith("c") + let darkgreyTrue = arr1.startsWith("m") + let orangeTrue = arr1.startsWith("o") + let purpleTrue = arr1.startsWith("p") + + if (i == 0) { + if (arr1.startsWith("~")) { + + } else { + let arr3 = $('' + arr[i] + ''); + arr3.css(whitec) + + finalarr.push(arr3) + } + } + + if (redTrue) { + x = i + 1 + + + let arr3 = $('' + arr[x] + ''); + arr3.css(redc) + + finalarr.push(arr3) + } else if (greenTrue) { + x = i + 1 + + + let arr3 = $('' + arr[x] + ''); + arr3.css(greenc) + + finalarr.push(arr3) + } else if (whiteTrue) { + x = i + 1 + + + let arr3 = $('' + arr[x] + ''); + arr3.css(whitec) + + finalarr.push(arr3) + } else if (blackTrue) { + x = i + 1 + + + let arr3 = $('' + arr[x] + ''); + arr3.css(blackc) + + finalarr.push(arr3) + } else if (blueTrue) { + x = i + 1 + + + let arr3 = $('' + arr[x] + ''); + arr3.css(bluec) + + finalarr.push(arr3) + } else if (yellowTrue) { + x = i + 1 + + + let arr3 = $('' + arr[x] + ''); + arr3.css(yellowc) + + finalarr.push(arr3) + } else if (greyTrue) { + x = i + 1 + + + let arr3 = $('' + arr[x] + ''); + arr3.css(greyc) + + finalarr.push(arr3) + } else if (darkgreyTrue) { + x = i + 1 + + + let arr3 = $('' + arr[x] + ''); + arr3.css(darkgreyc) + + finalarr.push(arr3) + } else if (orangeTrue) { + x = i + 1 + + + let arr3 = $('' + arr[x] + ''); + arr3.css(orangec) + + finalarr.push(arr3) + } else if (purpleTrue) { + x = i + 1 + + + let arr3 = $('' + arr[x] + ''); + arr3.css(purplec) + finalarr.push(arr3) + } + + + } + $(".text").append(finalarr); + RequestAnimUpdate() + current = "notifySuccess" + } + + 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 + "%") + } + }) +})