feat(ui): Client-side wrapper

fxmanifest.lua

@@ -7,19 +7,18 @@ version '1.9.0'
 url 'https://github.com/overextended/oxmysql'
 author 'overextended'
 
-ui_page 'src/ui/public/index.html'
-
 dependencies {
 	'/server:5104',
 }
 
-server_scripts {
-	'dist/build.js',
-}
+client_script 'ui.lua'
+server_script 'dist/build.js'
 
 files {
-	'src/ui/public/index.html',
-	'src/ui/public/**/*'
+	'ui/public/index.html',
+	'ui/public/**/*'
 }
 
+ui_page 'src/ui/public/index.html'
+
 provide 'mysql-async'

src/logger/index.ts

@@ -4,12 +4,10 @@ import type { CFXParameters } from '../types';
 interface QueryData {
   date: number;
   query: string;
-  executionTime: number
+  executionTime: number;
 }
 
-type QueryLog = {
-  [invokingResource: string]: QueryData[];
-};
+type QueryLog = Record<string, QueryData[]>;
 
 const logStorage: QueryLog = {};
 
@@ -22,17 +20,40 @@ export const logQuery = (invokingResource: string, query: string, executionTime:
 
   if (!mysql_ui) return;
 
-  if (logStorage[invokingResource] === undefined) logStorage[invokingResource] = []
+  if (logStorage[invokingResource] === undefined) logStorage[invokingResource] = [];
   logStorage[invokingResource].push({ query, executionTime, date: Date.now() });
-
 };
 
 RegisterCommand(
   'mysql',
   (source: number) => {
     if (!mysql_ui) return;
 
-    emitNet(`oxmysql:openUi`, source, logStorage);
+    let totalQueries: number = 0;
+    let totalTime = 0;
+
+    for (const resource in logStorage) {
+      const queries = logStorage[resource];
+
+      totalQueries += queries.length;
+      totalTime += queries.reduce((totalTime, query) => (totalTime += query.executionTime), 0);
+    }
+
+    emitNet(`oxmysql:openUi`, source, {
+      resources: Object.keys(logStorage),
+      totalQueries,
+      totalTime,
+    });
   },
   true
 );
+
+onNet(`oxmysql:fetchResource`, (resource: string) => {
+  if (typeof resource !== 'string') return;
+
+  const queries = logStorage[resource];
+
+  if (!queries) return;
+
+  emitNet(`oxmysql:loadResource`, source, queries);
+});

ui.lua

@@ -0,0 +1,23 @@
+RegisterNetEvent('oxmysql:openUi', function(data)
+    SendNUIMessage({
+        action = 'init',
+        data = data
+    })
+    SetNuiFocus(true, true)
+end)
+
+RegisterNUICallback('exit', function(_, cb)
+    cb(true)
+end)
+
+RegisterNUICallback('fetchResource', function(resource, cb)
+    TriggerServerEvent('oxmysql:fetchResource', resource)
+    cb(true)
+end)
+
+RegisterNetEvent('oxmysql:loadResource', function(data)
+    SendNUIMessage({
+        action = 'loadResource',
+        data = data
+    })
+end)