new ESX Notification

2026-08-29 09:18:53 +00:00 · 2022-04-26 17:30:17 +02:00
parent c9fb366efa
commit de76329b4d
5 changed files with 195 additions and 0 deletions
@@ -0,0 +1,11 @@
+local function Notify(type, length, message)
+    SendNuiMessage(json.encode({
+        type = type or "info",
+        length = length or 3000,
+        message = message or "ESX-Notify"
+    }))
+end
+
+exports('Notify', Notify)
+RegisterNetEvent("Notify", Notify)
+
@@ -0,0 +1,23 @@
+fx_version 'adamant'
+game 'gta5'
+author 'ESX-Framework'
+description 'ESX Notification'
+
+shared_scripts  {
+	'@es_extended/imports.lua',
+}
+
+client_scripts { 'Notify.lua' }
+
+ui_page 'nui/index.html'
+
+files {
+    'nui/index.html',
+    'nui/js/*.js',
+    'nui/css/*.css',
+    'nui/img/*.png',
+}
+
+exports {
+    'Notify'
+}
@@ -0,0 +1,14 @@
+:root {
+    --color: white;
+    --bgColor: #212121;
+}
+
+* {
+    padding: 0;
+    margin: 0;
+}
+
+body {
+    color: var(--color);
+    font-family: sans-serif;
+}
@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <script src="nui://game/ui/jquery.js" type="text/javascript"></script>
+    <script src="https://kit.fontawesome.com/a81368914c.js"></script>
+    <link rel="stylesheet" href="css/style.css">
+    <script src="js/script.js"></script>
+</head>
+<body>
+    <div id="notifyInfo" class="notifyInfo">
+        <div class="innerText">
+            <i class="fas fa-info-circle icon info"></i>
+            <p class="text" id="infoMessage"></p>
+        </div>
+    </div>
+    <div id="notifySuccess" class="notifySuccess">
+        <div class="innerText">
+            <i class="fas fa-check-circle icon info"></i>
+            <p class="text" id="successMessage"></p>
+        </div>
+    </div>
+    <div id="notifyError" class="notifyError">
+        <div class="innerText">
+            <i class="fas fa-exclamation-circle icon info"></i>
+            <p lass="text" id="errorMessage"></p>
+        </div>
+    </div>
+</body>
+</html>
+
+<style>
+    .notifyInfo {
+        flex: auto;
+        display: none;
+        border-left: 3px solid rgb(0, 97, 153);
+        position:absolute;
+        margin: 0 auto;
+        left: 0;
+        right: 0;
+        top: 25px;
+        min-width:15%;
+        width:fit-content; 
+        height:50px;
+        background-color:#212121;
+        border-radius: 5px;
+        animation: growDown 300ms ease-in-out;
+    }
+    .notifySuccess {
+        flex: auto;
+        display: none;
+        border-left: 3px solid rgb(13, 153, 0);
+        position:absolute;
+        margin: 0 auto;
+        left: 0;
+        right: 0;
+        top: 25px;
+        min-width:15%;
+        width:fit-content; 
+        height:50px;
+        background-color:#212121;
+        border-radius: 5px;
+        animation: growDown 300ms ease-in-out;
+    }
+    .notifyError {
+        flex: auto;
+        display: none;
+        border-left: 3px solid rgb(153, 5, 0);
+        position:absolute;
+        margin: 0 auto;
+        left: 0;
+        right: 0;
+        top: 25px;
+        min-width:15%;
+        width:fit-content; 
+        height:50px;
+        background-color:#212121;
+        border-radius: 5px;
+        animation: growDown 300ms ease-in-out;
+    }
+
+    .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: 15px;
+    }
+
+    .innerText .icon {
+        float: left;
+        margin-left: 15px;
+        font-size: 20px;
+    }
+
+    @keyframes growDown {
+        0% {
+            transform: scaleY(0);
+        }
+        80% {
+            transform: scaleY(1.1)
+        }
+        100% {
+            transform: scaleY(1)
+        }
+    }
+</style>
@@ -0,0 +1,29 @@
+const w = window
+const doc = document
+
+$(function () {
+    w.addEventListener('message', function(e) {
+        $(".text").text(e.data.message)
+        if (e.data.type === "info") {
+            console.log("info")
+            doc.getElementById("notifyInfo").style.display = "block";
+            Timeout()
+        } else if (e.data.type === "error") {
+            console.log("error")
+            doc.getElementById("notifyError").style.display = "block";
+            Timeout()
+        } else if (e.data.type === "success") {
+            console.log("succeeeess")
+            doc.getElementById("notifySuccess").style.display = "block";
+            Timeout()
+        }
+
+        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)
+        }
+    })
+})