feat(ui): Setting resource list from NUI message

overextended · Dec 28, 2021 · ce802e7 · ce802e7
1 parent 49bf5bb
commit ce802e7
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 33 deletions.
diff --git a/ui/src/App.svelte b/ui/src/App.svelte
@@ -2,13 +2,31 @@
   import VisibilityProvider from './providers/VisibilityProvider.svelte';
   import Main from './components/Main.svelte';
   import { debugData } from './utils/debugData';
+  import { useNuiEvent } from './utils/useNuiEvent';
+  import { resources } from './store/stores';
+  import type { InitData } from './types/init';
 
   debugData([
     {
       action: 'setVisible',
       data: true,
     },
   ]);
+
+  debugData([
+    {
+      action: 'init',
+      data: {
+        resources: ['ox_inventory', 'luke_garages', 'npwd'],
+        totalQueries: 350,
+        totalTime: 75000,
+      },
+    },
+  ]);
+
+  useNuiEvent<InitData>('init', (data) => {
+    resources.set(data.resources);
+  });
 </script>
 
 <main>

diff --git a/ui/src/components/menu/NavMenu.svelte b/ui/src/components/menu/NavMenu.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
   import { currentResource } from '../../store/stores';
-  const executingResources = ['luke_garages', 'ox_inventory', 'npwd'];
+  import { resources } from '../../store/stores';
 </script>
 
 <div class="container">
   <a href="#/"><div class="home-header">Home</div></a>
-  {#each executingResources as resource}
+  {#each $resources as resource}
     <div class="resource-wrapper">
       <a href={`#/${resource}`}>
         <div class="resource" on:click={() => currentResource.set(resource)}>
@@ -55,7 +55,10 @@
     background-color: grey;
   }
 
-  a:visited {
+  a,
+  a:visited,
+  a:active,
+  a:focus {
     color: white;
   }
 </style>
diff --git a/ui/src/components/routes/Home.svelte b/ui/src/components/routes/Home.svelte
@@ -1,29 +1,10 @@
 <script lang="ts">
   import { useNuiEvent } from '../../utils/useNuiEvent';
-  import { debugData } from '../../utils/debugData';
+  import type { InitData } from '../../types/init';
 
-  debugData([
-    {
-      action: 'init',
-      data: {
-        resources: ['ox_inventory', 'luke_garages', 'npwd'],
-        totalQueries: 350,
-        totalTime: 75000,
-      },
-    },
-  ]);
+  let initData: InitData;
 
-  interface QueryData {
-    date: number;
-    query: string;
-    executionTime: number;
-  }
-
-  type QueryLog = Record<string, QueryData[]>;
-
-  let initData: QueryLog;
-
-  useNuiEvent('init', (data: QueryLog) => {
+  useNuiEvent<InitData>('init', (data) => {
     initData = data;
   });
 </script>

diff --git a/ui/src/components/routes/ResourceData.svelte b/ui/src/components/routes/ResourceData.svelte
@@ -4,16 +4,11 @@
   import { onMount } from 'svelte';
   import { useNuiEvent } from '../../utils/useNuiEvent';
   import { debugData } from '../../utils/debugData';
+  import type { QueryData } from '../../types/query';
 
   export let params: { wild: string };
 
-  interface QueryData {
-    date: number;
-    query: string;
-    executionTime: number;
-  }
-
-  let queryData: QueryData[] | undefined;
+  let queryData: QueryData[];
   let isDataLoaded: boolean = false;
 
   onMount(() => currentResource.set(params.wild));

diff --git a/ui/src/store/stores.ts b/ui/src/store/stores.ts
@@ -1,4 +1,5 @@
 import { writable } from "svelte/store";
 
 export const visibility = writable(false);
-export const currentResource = writable('');
+export const currentResource = writable('');
+export const resources = writable<string[]>([])
diff --git a/ui/src/types/init.ts b/ui/src/types/init.ts
@@ -0,0 +1,5 @@
+export type InitData = {
+    resources: string[];
+    totalQueries: number;
+    totalTime: number;
+}
diff --git a/ui/src/types/query.ts b/ui/src/types/query.ts
@@ -0,0 +1,5 @@
+export type QueryData = {
+    date: number;
+    query: string;
+    executionTime: number;
+}