refactor: Use store to set current resource

src/ui/src/components/menu/NavMenu.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { currentResource } from '../../store/stores';
   const executingResources = ['luke_garages', 'ox_inventory', 'npwd'];
 </script>
 
@@ -7,7 +8,7 @@
   {#each executingResources as resource}
     <div class="resource-wrapper">
       <a href={`#/${resource}`}>
-        <div class="resource">
+        <div class="resource" on:click={() => currentResource.set(resource)}>
           {resource}
         </div>
       </a>

src/ui/src/components/routes/ResourceData.svelte

@@ -1,5 +1,38 @@
 <script lang="ts">
+  import { currentResource } from '../../store/stores';
+  import { fetchNui } from '../../utils/fetchNui';
+  import { onMount } from 'svelte';
+
   export let params: { wild: string };
+
+  interface Data {
+    [key: string]: number[];
+  }
+
+  let queryData: number[];
+  let resource: string;
+
+  const debugQueries: Data = {
+    ['luke_garages']: [300, 200, 100],
+    ['npwd']: [600, 300, 723],
+    ['ox_inventory']: [30, 270, 350],
+  };
+
+  onMount(() => currentResource.set(params.wild));
+
+  currentResource.subscribe((value) => {
+    resource = value;
+    fetchNui('getResourceData', resource)
+      .then((retData) => {
+        queryData = retData;
+      })
+      .catch((e) => {
+        queryData = debugQueries[resource];
+      });
+  });
 </script>
 
-<div>{params.wild}</div>
+<div>
+  {resource}
+  {queryData}
+</div>

src/ui/src/store/stores.ts

@@ -1,3 +1,4 @@
 import { writable } from "svelte/store";
 
-export const visibility = writable(false);
+export const visibility = writable(false);
+export const currentResource = writable('');