chore: further publishable packages (#101)

integrations/alpr/client/client.ts

@@ -1,62 +1,57 @@
-import { TextureTypes } from "~/types/texture-types";
-import { createNotification } from "~/utils/notification";
 import { GetBolosData, PostLeoSearchVehicleData } from "@snailycad/types/api";
-import { Events } from "~/types/events";
+import { ClientEvents, Events } from "~/types/events";
 
 onNet(Events.ALPRCadBoloResults, (plate: string, body?: GetBolosData | "failed") => {
   if (!body || body === "failed") return;
 
   if (body.bolos.length > 0) {
-    createNotification({
-      title: "BOLO Results",
+    emit(ClientEvents.CreateNotification, {
+      title: "Active Bolo Notice",
       message: `${plate} has an active BOLO. Open SnailyCAD for more details.`,
-      picture: TextureTypes.CHAR_CALL911,
     });
   }
 });
 
 onNet(Events.ALPRCadPlateResults, (plate: string, body?: PostLeoSearchVehicleData[] | "failed") => {
   if (!body || body === "failed") {
-    return createNotification({
-      picture: TextureTypes.CHAR_CALL911,
-      message: "Unable to fetch plate search results: failed to fetch",
+    return emit(ClientEvents.CreateNotification, {
+      message: "Unable to fetch plate search results: failed to fetch.",
       title: "Plate Search Results",
     });
   }
 
   const [vehicle] = body;
   if (!vehicle) {
-    return createNotification({
-      picture: TextureTypes.CHAR_CALL911,
+    return emit(ClientEvents.CreateNotification, {
       message: `Plate is not registered: ${plate}`,
       title: "Plate Search Results",
     });
   }
 
   const owner = vehicle.citizen ? `${vehicle.citizen.name} ${vehicle.citizen.surname}` : "Unknown";
   const message = [
-    `Plate: ${plate}`,
-    `Model: ${vehicle.model.value.value}`,
-    `Color: ${vehicle.color}`,
-    `VIN Number: ${vehicle.vinNumber}`,
-    `Owner: ${owner}`,
+    `<li><b>Plate:</b> ${plate}</li>`,
+    `<li><b>Model:</b> ${vehicle.model.value.value}</li>`,
+    `<li><b>Color:</b> ${vehicle.color}</li>`,
+    `<li><b>VIN Number:</b> ${vehicle.vinNumber}</li>`,
+    `<li><b>Owner:</b> ${owner}</li>`,
   ];
 
-  createNotification({
-    picture: TextureTypes.CHAR_CALL911,
+  emit(ClientEvents.CreateNotification, {
     message: message.join("\n"),
     title: "Plate Search Results",
+    timeout: 17_000,
   });
 
-  // todo: type will be fixed in a later version
-  const warrants = (vehicle.citizen as any)?.warrants?.filter((v: any) => v.status === "ACTIVE");
-  const hasWarrants = warrants?.length > 0;
+  const warrants = vehicle.citizen?.warrants?.filter((v: any) => v.status === "ACTIVE") ?? [];
+  const hasWarrants = warrants.length > 0;
 
   if (hasWarrants) {
-    createNotification({
-      picture: TextureTypes.CHAR_CALL911,
-      message: "This vehicle owner has active warrants",
-      title: "Active Warrants",
+    const citizenFullName = `${vehicle.citizen?.name} ${vehicle.citizen?.surname}`;
+
+    emit(ClientEvents.CreateNotification, {
+      title: "Active Warrants Notice",
+      message: `This vehicle - ${citizenFullName} - owner has active warrants.`,
     });
   }
 });

integrations/sync/client/client.ts

@@ -13,6 +13,18 @@ onNet("playerSpawned", () => {
   SendNuiMessage(JSON.stringify({ action: "sn:initialize", data: { url: API_URL } }));
 });
 
+on(
+  ClientEvents.CreateNotification,
+  (options: { timeout?: number; title: string; message: string }) => {
+    SendNuiMessage(
+      JSON.stringify({
+        action: ClientEvents.CreateNotification,
+        data: { ...options, url: API_URL },
+      }),
+    );
+  },
+);
+
 /**
  * event: connected
  * simply send a message back to the NUI side to confirm that we are connected.
@@ -30,7 +42,7 @@ on(`__cfx_nui:${NuiEvents.ConnectionError}`, (data: Partial<Error> | null, cb: F
   cb({ ok: true });
 });
 
-import { NuiEvents, SnCommands } from "~/types/events";
+import { ClientEvents, NuiEvents, SnCommands } from "~/types/events";
 import "./flows/auth";
 import "./flows/unit-status";
 import "./flows/911-call-attach";

integrations/sync/nui-dev/index.html

@@ -14,7 +14,7 @@
   </head>
   <body>
     <div id="app" class="text-white">
-      <div id="notification-portal" class="fixed inset-5 top-[56px] flex flex-col items-end pointer-events-none z-[999]"></div>
+      <div id="notification-portal" class="fixed inset-5 gap-y-2 top-[56px] flex flex-col items-end pointer-events-none z-[999]"></div>
 
       <div id="authentication-flow" class="max-w-4xl rounded-md bg-primary p-8 hidden">
         <header class="mb-2">
@@ -111,7 +111,7 @@ <h1 class="text-2xl font-bold text-white">Set Status</h1>
       </div>
     </div>
 
-    <div id="call-911-attach-flow" class="max-w-5xl hidden rounded-md bg-primary p-8">
+    <div id="call-911-attach-flow" class="max-w-7xl hidden rounded-md bg-primary p-8">
       <header class="mb-2">
         <div class="mb-3 flex items-center justify-between">
           <h1 class="text-2xl font-bold text-white">Active 911 Calls</h1>

integrations/sync/nui-dev/package.json

@@ -15,10 +15,12 @@
     "vite": "^4.3.9"
   },
   "dependencies": {
-    "@snailycad/permissions": "^1.68.2",
-    "@snailycad/types": "^1.68.2",
+    "@snailycad/config": "1.68.3",
+    "@snailycad/permissions": "1.68.3",
+    "@snailycad/types": "1.68.3",
+    "@snailycad/utils": "1.68.3",
     "html-minifier": "^4.0.0",
     "slate": "^0.94.1",
     "socket.io-client": "^4.6.2"
   }
-}
+}

integrations/sync/nui-dev/src/flows/911-call-attach.ts

@@ -1,7 +1,7 @@
 import { AssignedUnit, Call911 } from "@snailycad/types";
 import { fetchNUI } from "../main";
 import { NuiEvents } from "../types";
-import { slateDataToString } from "../utils/slate-data-to-string";
+import { slateDataToString } from "@snailycad/utils/editor";
 
 interface HandleCall911AttachFlowOptions {
   calls: (Call911 & { assignedUnits?: AssignedUnit[] })[];

integrations/sync/nui-dev/src/flows/notification.ts

@@ -4,7 +4,7 @@ interface CreateNotificationOptions {
   title: string;
   message: string;
   type?: "success" | "error";
-  timestamp?: number;
+  timeout?: number;
 }
 
 const notificationPortal = document.getElementById("notification-portal");
@@ -39,10 +39,12 @@ export function createNotification(options: CreateNotificationOptions) {
 
   notifications.push(element);
 
+  const timeout = options.timeout ?? NOTIFICATION_TIMEOUT_IN_MS;
+
   setTimeout(() => {
     element.remove();
     notifications.splice(notifications.indexOf(element), 1);
-  }, NOTIFICATION_TIMEOUT_IN_MS);
+  }, timeout);
 }
 
 function formatDate(date: Date) {

integrations/sync/nui-dev/src/main.ts

@@ -5,6 +5,7 @@ import { ClientEvents, NuiEvents } from "./types";
 import { handleCall911AttachFlow } from "./flows/911-call-attach";
 import { createNotification } from "./flows/notification";
 import { AssignedUnit, Call911, StatusValue } from "@snailycad/types";
+import { SocketEvents } from "@snailycad/config";
 
 export interface NuiMessage {
   action: string;
@@ -15,6 +16,9 @@ export interface NuiMessage {
     unitId?: string;
     source?: number;
     calls?: (Call911 & { assignedUnits?: AssignedUnit[] })[];
+    message?: string;
+    title?: string;
+    timeout?: number;
   };
 }
 
@@ -35,6 +39,17 @@ window.addEventListener("message", (event: MessageEvent<NuiMessage>) => {
       onSpawn(apiURL);
       break;
     }
+    case ClientEvents.CreateNotification: {
+      const title = event.data.data?.title;
+      const message = event.data.data?.message;
+      const timeout = event.data.data?.timeout;
+
+      if (title && message) {
+        createNotification({ timeout, title, message });
+      }
+
+      break;
+    }
     case ClientEvents.RequestAuthFlow: {
       const identifiers = event.data.data?.identifiers;
 
@@ -85,31 +100,27 @@ function onSpawn(apiURL: string) {
   socket.on("connect", () => fetchNUI(NuiEvents.Connected, { socketId: socket.id }));
   socket.on("connect_error", (error) => fetchNUI(NuiEvents.ConnectionError, { error }));
 
-  socket.on("Signal100", (enabled) => {
+  socket.on(SocketEvents.Signal100, (enabled: boolean) => {
     if (enabled) {
       createNotification({
-        timestamp: Date.now(),
         message: "Signal 100 is now enabled.",
         title: "Signal 100 Enabled",
       });
     } else {
       createNotification({
-        timestamp: Date.now(),
         message: "Signal 100 is now disabled.",
         title: "Signal 100 Disabled",
       });
     }
   });
-  socket.on("UpdateAreaOfPlay", (areaOfPlay: string | null) =>
+  socket.on(SocketEvents.UpdateAreaOfPlay, (areaOfPlay: string | null) =>
     createNotification({
-      timestamp: Date.now(),
       message: `Area of play has been updated to: ${areaOfPlay ?? "None"}`,
       title: "AOP Changed",
     }),
   );
-  socket.on("PANIC_BUTTON_ON", (unit: { formattedUnitData: string }) => {
+  socket.on(SocketEvents.PANIC_BUTTON_ON, (unit: { formattedUnitData: string }) => {
     createNotification({
-      timestamp: Date.now(),
       message: `${unit.formattedUnitData} has pressed their panic button.`,
       title: "Panic Button Enabled",
     });

integrations/sync/nui-dev/styles/main.css

@@ -37,3 +37,7 @@ body {
     sans-serif;
   overflow: hidden;
 }
+
+li {
+  list-style-type: none;
+}

package.json

@@ -37,8 +37,9 @@
   },
   "dependencies": {
     "@octokit/action": "^6.0.5",
-    "@snailycad/permissions": "^1.68.1",
-    "@snailycad/types": "^1.68.1",
+    "@snailycad/permissions": "1.68.3",
+    "@snailycad/types": "1.68.3",
+    "@snailycad/config": "1.68.3",
     "archiver": "^6.0.0",
     "dotenv": "^16.3.1",
     "undici": "^5.23.0"

src/types/events.ts

@@ -86,6 +86,8 @@ export enum ClientEvents {
    * the server is requesting the player's position for the traffic stop.
    */
   RequestTrafficStopFlow = "sna-sync:request-traffic-stop-flow",
+
+  CreateNotification = "sna-sync:create-notification",
 }
 
 export enum NuiEvents {