From 5c60c94197d0a31be30ca7f2f06c4a894699f2bd Mon Sep 17 00:00:00 2001 From: Kakarot <57848836+GhzGarage@users.noreply.github.com> Date: Sat, 17 Feb 2024 06:13:47 -0600 Subject: [PATCH] Allow defining icon - Adds warning class --- client/events.lua | 4 +- client/functions.lua | 59 +++++++++++++++------------- config.lua | 8 +++- html/css/style.css | 9 ++++- html/index.html | 38 +++++++++--------- html/js/app.js | 91 +++++++++++++++++++++----------------------- html/js/config.js | 19 +++++---- 7 files changed, 119 insertions(+), 109 deletions(-) diff --git a/client/events.lua b/client/events.lua index f492bdd..d875110 100644 --- a/client/events.lua +++ b/client/events.lua @@ -190,8 +190,8 @@ RegisterNetEvent('QBCore:Player:UpdatePlayerData', function() TriggerServerEvent('QBCore:UpdatePlayer') end) -RegisterNetEvent('QBCore:Notify', function(text, type, length) - QBCore.Functions.Notify(text, type, length) +RegisterNetEvent('QBCore:Notify', function(text, type, length, icon) + QBCore.Functions.Notify(text, type, length, icon) end) -- This event is exploitable and should not be used. It has been deprecated, and will be removed soon. diff --git a/client/functions.lua b/client/functions.lua index 3b96992..8073e9a 100644 --- a/client/functions.lua +++ b/client/functions.lua @@ -58,9 +58,18 @@ end ---@return number - The time at which the entity was looked at function QBCore.Functions.LookAtEntity(entity, timeout, speed) local involved = GetInvokingResource() - if not DoesEntityExist(entity) then turnPromise:reject(involved..' :^1 Entity does not exist') return turnPromise.value end - if not type(entity) == 'number' then turnPromise:reject(involved..' :^1 Entity must be a number') return turnPromise.value end - if not type(speed) == 'number' then turnPromise:reject(involved..' :^1 Speed must be a number') return turnPromise.value end + if not DoesEntityExist(entity) then + turnPromise:reject(involved .. ' :^1 Entity does not exist') + return turnPromise.value + end + if not type(entity) == 'number' then + turnPromise:reject(involved .. ' :^1 Entity must be a number') + return turnPromise.value + end + if not type(speed) == 'number' then + turnPromise:reject(involved .. ' :^1 Speed must be a number') + return turnPromise.value + end if speed > 5.0 then speed = 5.0 end if timeout > 5000 then timeout = 5000 end @@ -111,11 +120,11 @@ function QBCore.Functions.PlayAnim(animDict, animName, upperbodyOnly, duration) local invoked = GetInvokingResource() local animPromise = promise.new() if type(animDict) ~= 'string' or type(animName) ~= 'string' then - animPromise:reject(invoked..' :^1 Wrong type for animDict or animName') + animPromise:reject(invoked .. ' :^1 Wrong type for animDict or animName') return animPromise.value end if not DoesAnimDictExist(animDict) then - animPromise:reject(invoked..' :^1 Animation dictionary does not exist') + animPromise:reject(invoked .. ' :^1 Animation dictionary does not exist') return animPromise.value end @@ -127,7 +136,7 @@ function QBCore.Functions.PlayAnim(animDict, animName, upperbodyOnly, duration) while not HasAnimDictLoaded(animDict) do RequestAnimDict(animDict) if (GetGameTimer() - start) > 5000 then - animPromise:reject(invoked..' :^1 Animation dictionary failed to load') + animPromise:reject(invoked .. ' :^1 Animation dictionary failed to load') return animPromise.value end Wait(1) @@ -137,7 +146,7 @@ function QBCore.Functions.PlayAnim(animDict, animName, upperbodyOnly, duration) Wait(10) -- Wait a bit for the animation to start, then check if it exists local currentTime = GetAnimDuration(animDict, animName) if currentTime == 0 then - animPromise:reject(invoked..' :^1 Animation does not exist') + animPromise:reject(invoked .. ' :^1 Animation does not exist') return animPromise.value end @@ -171,29 +180,25 @@ RegisterNUICallback('getNotifyConfig', function(_, cb) cb(QBCore.Config.Notify) end) -function QBCore.Functions.Notify(text, texttype, length) +function QBCore.Functions.Notify(text, texttype, length, icon) + local message = { + action = 'notify', + type = texttype or 'primary', + length = length or 5000, + } + if type(text) == 'table' then - local ttext = text.text or 'Placeholder' - local caption = text.caption or 'Placeholder' - texttype = texttype or 'primary' - length = length or 5000 - SendNUIMessage({ - action = 'notify', - type = texttype, - length = length, - text = ttext, - caption = caption - }) + message.text = text.text or 'Placeholder' + message.caption = text.caption or 'Placeholder' else - texttype = texttype or 'primary' - length = length or 5000 - SendNUIMessage({ - action = 'notify', - type = texttype, - length = length, - text = text - }) + message.text = text end + + if icon then + message.icon = icon + end + + SendNUIMessage(message) end function QBCore.Debug(resource, obj, depth) diff --git a/config.lua b/config.lua index 2b0a36e..cb28517 100644 --- a/config.lua +++ b/config.lua @@ -46,15 +46,19 @@ QBConfig.Notify.NotificationStyling = { QBConfig.Notify.VariantDefinitions = { success = { classes = 'success', - icon = 'task_alt' + icon = 'check_circle' }, primary = { classes = 'primary', icon = 'notifications' }, + warning = { + classes = 'warning', + icon = 'warning' + }, error = { classes = 'error', - icon = 'warning' + icon = 'error' }, police = { classes = 'police', diff --git a/html/css/style.css b/html/css/style.css index 881cd00..1211654 100644 --- a/html/css/style.css +++ b/html/css/style.css @@ -42,7 +42,6 @@ html::-webkit-scrollbar { border-left: 5px solid #f44236; font-size: 1.5vh; } - } .success { @@ -57,6 +56,12 @@ html::-webkit-scrollbar { border: 1px solid #6facec; } +.warning { + background-color: #ff9800; + border-radius: 5px; + border: 1px solid #ffc107; +} + .error { background-color: #c10114; border-radius: 5px; @@ -73,4 +78,4 @@ html::-webkit-scrollbar { background-color: #f44236; border-radius: 5px; border: 1px solid #f88e86; -} \ No newline at end of file +} diff --git a/html/index.html b/html/index.html index 801f533..13c31e3 100644 --- a/html/index.html +++ b/html/index.html @@ -1,20 +1,20 @@ - - - - - - - - - - - - - -
-
-
-
- - \ No newline at end of file + + + + + + + + + + + + + +
+
+
+
+ + diff --git a/html/js/app.js b/html/js/app.js index d13562e..7a9b374 100644 --- a/html/js/app.js +++ b/html/js/app.js @@ -1,65 +1,62 @@ import { registerWindowMethods } from "./testing.js"; import { isEnvBrowser } from "./utils.js"; -import { - determineStyleFromVariant, - DEV_MODE, - fetchNotifyConfig, - NOTIFY_CONFIG, -} from "./config.js"; +import { determineStyleFromVariant, DEV_MODE, fetchNotifyConfig, NOTIFY_CONFIG } from "./config.js"; const { useQuasar } = Quasar; const { onMounted, onUnmounted } = Vue; const app = Vue.createApp({ - setup() { - const $q = useQuasar(); + setup() { + const $q = useQuasar(); - const showNotif = async ({ data }) => { - // Otherwise we process any old MessageEvent with a data property - if (data?.action !== "notify") return; + const showNotif = async ({ data }) => { + // Otherwise we process any old MessageEvent with a data property + if (data?.action !== "notify") return; - const { text, length, type, caption } = data; - const { classes, icon } = determineStyleFromVariant(type); + const { text, length, type, caption, icon: dataIcon } = data; + let { classes, icon } = determineStyleFromVariant(type); - // Make sure we have sucessfully fetched out config properly - if (!NOTIFY_CONFIG) { - console.error( - "The notification config did not load properly, trying again for next time" - ); - // Lets check again to see if it exists - await fetchNotifyConfig(); - // If we have a config lets re-run notification with same data, this - // isn't recursive though. - if (NOTIFY_CONFIG) return showNotif({ data }); - } + if (dataIcon) { + icon = dataIcon; + } - $q.notify({ - message: text, - multiLine: text.length > 100, - // If our text is larger than a 100 characters, - // we should use multiline notifications - group: NOTIFY_CONFIG.NotificationStyling.group ?? false, - progress: NOTIFY_CONFIG.NotificationStyling.progress ?? true, - position: NOTIFY_CONFIG.NotificationStyling.position ?? "right", - timeout: length, - caption, - classes, - icon, - }); - }; - onMounted(() => { - window.addEventListener("message", showNotif); - }); - onUnmounted(() => { - window.removeEventListener("message", showNotif); - }); - return {}; - }, + // Make sure we have sucessfully fetched out config properly + if (!NOTIFY_CONFIG) { + console.error("The notification config did not load properly, trying again for next time"); + // Lets check again to see if it exists + await fetchNotifyConfig(); + // If we have a config lets re-run notification with same data, this + // isn't recursive though. + if (NOTIFY_CONFIG) return showNotif({ data }); + } + + $q.notify({ + message: text, + multiLine: text.length > 100, + // If our text is larger than a 100 characters, + // we should use multiline notifications + group: NOTIFY_CONFIG.NotificationStyling.group ?? false, + progress: NOTIFY_CONFIG.NotificationStyling.progress ?? true, + position: NOTIFY_CONFIG.NotificationStyling.position ?? "right", + timeout: length, + caption, + classes, + icon, + }); + }; + onMounted(() => { + window.addEventListener("message", showNotif); + }); + onUnmounted(() => { + window.removeEventListener("message", showNotif); + }); + return {}; + }, }); app.use(Quasar, { config: {} }); app.mount("#q-app"); if (DEV_MODE || isEnvBrowser()) { - registerWindowMethods(); + registerWindowMethods(); } diff --git a/html/js/config.js b/html/js/config.js index 32fa978..3757238 100644 --- a/html/js/config.js +++ b/html/js/config.js @@ -23,24 +23,23 @@ export let NOTIFY_CONFIG = null; * @returns NotiVariantData **/ export const determineStyleFromVariant = (variant) => { - const variantData = NOTIFY_CONFIG.VariantDefinitions[variant]; - if (!variantData) - throw new Error(`Style of type: ${variant}, does not exist in the config`); - return variantData; + const variantData = NOTIFY_CONFIG.VariantDefinitions[variant]; + if (!variantData) throw new Error(`Style of type: ${variant}, does not exist in the config`); + return variantData; }; // Fetch and set NOTIFY_CONFIG from client script callback export const fetchNotifyConfig = async () => { - NOTIFY_CONFIG = await fetchNui("getNotifyConfig", {}, BrowserMockConfigData); - if (isEnvBrowser() || DEV_MODE) { - console.log("Fetched Config:"); - console.dir(NOTIFY_CONFIG); - } + NOTIFY_CONFIG = await fetchNui("getNotifyConfig", {}, BrowserMockConfigData); + if (isEnvBrowser() || DEV_MODE) { + console.log("Fetched Config:"); + console.dir(NOTIFY_CONFIG); + } }; // We specifically wait for all other files to load // just in case of a race condition between client handlers // and NUI fetch call window.addEventListener("load", async () => { - await fetchNotifyConfig(); + await fetchNotifyConfig(); });