reset branch

html/js/app.js

@@ -0,0 +1,65 @@
+import { determineStyleFromVariant, fetchNotifyConfig, NOTIFY_CONFIG } from "./config.js";
+
+const { useQuasar } = Quasar;
+const { onMounted, onUnmounted } = Vue;
+
+const fetchNui = async (evName, data) => {
+    const resourceName = window.GetParentResourceName();
+
+    const rawResp = await fetch(`https://${resourceName}/${evName}`, {
+        body: JSON.stringify(data),
+        headers: {
+            "Content-Type": "application/json; charset=UTF8",
+        },
+        method: "POST",
+    });
+
+    return await rawResp.json();
+};
+
+window.fetchNui = fetchNui;
+
+const app = Vue.createApp({
+    setup() {
+        const $q = useQuasar();
+
+        const showNotif = async ({ data }) => {
+            if (data?.action !== "notify") return;
+
+            const { text, length, type, caption, icon: dataIcon } = data;
+            let { classes, icon } = determineStyleFromVariant(type);
+
+            if (dataIcon) {
+                icon = dataIcon;
+            }
+
+            if (!NOTIFY_CONFIG) {
+                console.error("The notification config did not load properly, trying again for next time");
+                await fetchNotifyConfig();
+                if (NOTIFY_CONFIG) return showNotif({ data });
+            }
+
+            $q.notify({
+                message: text,
+                multiLine: text.length > 100,
+                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");

html/js/config.js

@@ -0,0 +1,53 @@
+export let NOTIFY_CONFIG = null;
+
+const defaultConfig = {
+    NotificationStyling: {
+        group: true,
+        position: "top-right",
+        progress: true,
+    },
+    VariantDefinitions: {
+        success: {
+            classes: "success",
+            icon: "done",
+        },
+        primary: {
+            classes: "primary",
+            icon: "info",
+        },
+        error: {
+            classes: "error",
+            icon: "dangerous",
+        },
+        police: {
+            classes: "police",
+            icon: "local_police",
+        },
+        ambulance: {
+            classes: "ambulance",
+            icon: "fas fa-ambulance",
+        },
+    },
+};
+
+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;
+};
+
+export const fetchNotifyConfig = async () => {
+    try {
+        NOTIFY_CONFIG = await window.fetchNui("getNotifyConfig", {});
+        if (!NOTIFY_CONFIG) {
+            NOTIFY_CONFIG = defaultConfig;
+        }
+    } catch (error) {
+        console.error("Failed to fetch notification config, using default", error);
+        NOTIFY_CONFIG = defaultConfig;
+    }
+};
+
+window.addEventListener("load", async () => {
+    await fetchNotifyConfig();
+});

html/js/drawtext.js

@@ -0,0 +1,124 @@
+let direction = null;
+
+const drawText = async (textData) => {
+    const text = document.getElementById("text");
+    let { position } = textData;
+    switch (textData.position) {
+        case "left":
+            addClass(text, position);
+            direction = "left";
+            break;
+        case "top":
+            addClass(text, position);
+            direction = "top";
+            break;
+        case "right":
+            addClass(text, position);
+            direction = "right";
+            break;
+        default:
+            addClass(text, "left");
+            direction = "left";
+            break;
+    }
+
+    text.innerHTML = textData.text;
+    document.getElementById("drawtext-container").style.display = "block";
+    await sleep(100);
+    addClass(text, "show");
+};
+
+const changeText = async (textData) => {
+    const text = document.getElementById("text");
+    let { position } = textData;
+
+    removeClass(text, "show");
+    addClass(text, "pressed");
+    addClass(text, "hide");
+
+    await sleep(500);
+    removeClass(text, "left");
+    removeClass(text, "right");
+    removeClass(text, "top");
+    removeClass(text, "bottom");
+    removeClass(text, "hide");
+    removeClass(text, "pressed");
+
+    switch (textData.position) {
+        case "left":
+            addClass(text, position);
+            direction = "left";
+            break;
+        case "top":
+            addClass(text, position);
+            direction = "top";
+            break;
+        case "right":
+            addClass(text, position);
+            direction = "right";
+            break;
+        default:
+            addClass(text, "left");
+            direction = "left";
+            break;
+    }
+    text.innerHTML = textData.text;
+
+    await sleep(100);
+    text.classList.add("show");
+};
+
+const hideText = async () => {
+    const text = document.getElementById("text");
+    removeClass(text, "show");
+    addClass(text, "hide");
+
+    setTimeout(() => {
+        removeClass(text, "left");
+        removeClass(text, "right");
+        removeClass(text, "top");
+        removeClass(text, "bottom");
+        removeClass(text, "hide");
+        removeClass(text, "pressed");
+        document.getElementById("drawtext-container").style.display = "none";
+    }, 1000);
+};
+
+const keyPressed = () => {
+    const text = document.getElementById("text");
+    addClass(text, "pressed");
+};
+
+window.addEventListener("message", (event) => {
+    const data = event.data;
+    const action = data.action;
+    const textData = data.data;
+    switch (action) {
+        case "DRAW_TEXT":
+            return drawText(textData);
+        case "CHANGE_TEXT":
+            return changeText(textData);
+        case "HIDE_TEXT":
+            return hideText();
+        case "KEY_PRESSED":
+            return keyPressed();
+        default:
+            return;
+    }
+});
+
+const sleep = (ms) => {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+};
+
+const removeClass = (element, name) => {
+    if (element.classList.contains(name)) {
+        element.classList.remove(name);
+    }
+};
+
+const addClass = (element, name) => {
+    if (!element.classList.contains(name)) {
+        element.classList.add(name);
+    }
+};