From be4f57410b4985f916d206bbeb05ba897c8e9d79 Mon Sep 17 00:00:00 2001
From: Kakarot <57848836+GhzGarage@users.noreply.github.com>
Date: Tue, 28 Sep 2021 23:39:11 -0600
Subject: [PATCH] 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)
---
client/functions.lua | 23 +++++++++++++---
fxmanifest.lua | 7 +++--
html/app.js | 63 ++++++++++++++++++++++++++++++++++++++++++++
html/css/main.css | 44 -------------------------------
html/index.html | 37 ++++++++++++++++++++++++++
html/js/app.js | 24 -----------------
html/ui.html | 11 --------
7 files changed, 123 insertions(+), 86 deletions(-)
create mode 100644 html/app.js
delete mode 100644 html/css/main.css
create mode 100644 html/index.html
delete mode 100644 html/js/app.js
delete mode 100644 html/ui.html
diff --git a/client/functions.lua b/client/functions.lua
index fa0fc4f..4f30682 100644
--- a/client/functions.lua
+++ b/client/functions.lua
@@ -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)
diff --git a/fxmanifest.lua b/fxmanifest.lua
index 778ad41..6588803 100644
--- a/fxmanifest.lua
+++ b/fxmanifest.lua
@@ -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 {
diff --git a/html/app.js b/html/app.js
new file mode 100644
index 0000000..dad371e
--- /dev/null
+++ b/html/app.js
@@ -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');
diff --git a/html/css/main.css b/html/css/main.css
deleted file mode 100644
index 695cd1a..0000000
--- a/html/css/main.css
+++ /dev/null
@@ -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;
-}
\ No newline at end of file
diff --git a/html/index.html b/html/index.html
new file mode 100644
index 0000000..53c31ae
--- /dev/null
+++ b/html/index.html
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/html/js/app.js b/html/js/app.js
deleted file mode 100644
index cc63183..0000000
--- a/html/js/app.js
+++ /dev/null
@@ -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);
-}
\ No newline at end of file
diff --git a/html/ui.html b/html/ui.html
deleted file mode 100644
index 8fd3280..0000000
--- a/html/ui.html
+++ /dev/null
@@ -1,11 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-