feat(html): New Notify System

-Replaces old notification system but is also backwards compatible so no changes necessary - Now allows for the use of sending a table with text and caption - Can add as many types of notifications as wanted/needed - Configure position and icons in app,js (google icons or fontawesome)
2026-08-28 23:01:29 +00:00 · 2021-09-28 23:39:11 -06:00
parent 8a1181171c
commit be4f57410b
7 changed files with 123 additions and 86 deletions
@@ -59,9 +59,26 @@ function QBCore.Functions.DrawText3D(x, y, z, text) -- Use local function instea
 end

 function QBCore.Functions.Notify(text, textype, length)
-    local ttype = textype or 'primary'
-    local length = length or 5000
-    SendNUIMessage({action = 'show', type = ttype, length = length, text = text})
+	if type(text) == "table" then
+		local ttext = text.text or 'Placeholder'
+		local caption = text.caption or 'Placeholder'
+		local ttype = textype or 'primary'
+		local length = length or 5000
+		SendNUIMessage({
+			type = ttype,
+			length = length,
+			text = ttext,
+			caption = caption
+		})
+	else
+    	local ttype = textype or 'primary'
+    	local length = length or 5000
+    	SendNUIMessage({
+			type = ttype,
+			length = length,
+			text = text
+		})
+	end
 end

 function QBCore.Debug(resource, obj, depth)
@@ -26,12 +26,11 @@ server_scripts {
 	'server/debug.lua'
 }

-ui_page 'html/ui.html'
+ui_page 'html/index.html'

 files {
-	'html/ui.html',
-	'html/css/main.css',
-	'html/js/app.js'
+	'html/index.html',
+	'html/app.js'
 }

 dependencies {
@@ -0,0 +1,63 @@
+const { useQuasar } = Quasar;
+const { onMounted, onUnmounted } = Vue;
+const app = Vue.createApp({
+  setup() {
+    const $q = useQuasar();
+    const showNotif = (e) => {
+      const text = e.data.text;
+      const length = e.data.length;
+      const type = e.data.type;
+      const caption = e.data.caption;
+
+      switch (type) {
+        case 'success':
+          color = 'green';
+          icon = 'done';
+          break;
+        case 'primary':
+          color = 'blue';
+          icon = 'info';
+          break;
+        case 'error':
+          color = 'red';
+          icon = 'dangerous';
+          break;
+        case 'police':
+          color = 'blue';
+          icon = 'local_police';
+          break;
+        case 'ambulance':
+          color = 'red';
+          icon = 'fas fa-ambulance';
+          break;
+      }
+
+      if (text.length > 100) {
+        multiline = true;
+      } else {
+        multiline = false;
+      }
+
+      $q.notify({
+        message: text,
+        caption: caption,
+        multiLine: multiline,
+        color: color,
+        group: false,
+        progress: true,
+        position: 'right',
+        timeout: length,
+        icon: icon,
+      });
+    };
+    onMounted(() => {
+      window.addEventListener('message', showNotif);
+    });
+    onUnmounted(() => {
+      window.removeEventListener('message', showNotif);
+    });
+    return {};
+  },
+});
+app.use(Quasar, { config: {} });
+app.mount('#q-app');
@@ -1,44 +0,0 @@
-body {
-    background-color: transparent !important;
-}
-
-.template, .notification {
-    display: none;
-}
-
-.notif-container {
-    width: 20vw;
-    position: absolute;
-    top: 4vh;
-    right: 12vw;
-    display: flex;
-    flex-flow: row;
-    flex-wrap: wrap;
-}
-
-.notification {
-    position: relative;
-    padding: 1vh;
-    width: fit-content;
-    border-radius: .4vh;
-    margin: 5px;
-    font: caption;
-    font-size: 1.2vh;
-    font-weight: bold;
-    float: left;
-}
-
-.success {
-    background: #27ae60;
-    color: #fff;
-}
-
-.primary {
-    background-color: #2980b9;
-    color: #ffffff;
-}
-
-.error {
-    background: #c0392b;
-    color: #fff;
-}
@@ -0,0 +1,37 @@
+<html>
+  <head>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://cdn.jsdelivr.net/npm/quasar@2.1.0/dist/quasar.prod.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <script
+      src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"
+      defer
+    ></script>
+    <script
+      src="https://cdn.jsdelivr.net/npm/quasar@2.1.0/dist/quasar.umd.prod.js"
+      defer
+    ></script>
+    <script src="app.js" defer></script>
+  </head>
+  <body style="font-family: 'Poppins', sans-serif">
+    <div
+      id="q-app"
+      style="min-height: 100vh"
+    ></div>
+  </body>
+</html>
@@ -1,24 +0,0 @@
-window.addEventListener('message', function (event) {
-    switch(event.data.action) {
-        case 'show':
-            ShowNotif(event.data);
-            break;
-        default:
-            ShowNotif(event.data);
-            break;
-    }
-});
-
-function ShowNotif(data) {
-    var $notification = $('.notification.template').clone();
-    $notification.removeClass('template');
-    $notification.addClass(data.type);
-    $notification.html(data.text);
-    $notification.fadeIn();
-    $('.notif-container').prepend($notification);
-    setTimeout(function() {
-        $.when($notification.fadeOut(1500)).done(function() {
-            $notification.remove()
-        });
-    }, data.length != null ? data.length : 2500);
-}
@@ -1,11 +0,0 @@
-<html>
-    <head>
-        <script src="nui://game/ui/jquery.js" type="text/javascript"></script>
-        <link href="css/main.css" rel="stylesheet" type="text/css"/>
-    </head>
-    <body>
-        <div class="notif-container"></div>
-        <div class="notification template"></div>
-    </body>
-    <script src="js/app.js" type="text/javascript"></script>
-</html>