overextended · LukeWasTakenn · Dec 26, 2021 · Dec 23, 2021 · Dec 23, 2021 · Dec 23, 2021
diff --git a/fxmanifest.lua b/fxmanifest.lua
@@ -7,6 +7,8 @@ version '1.9.0'
 url 'https://github.com/overextended/oxmysql'
 author 'overextended'
 
+ui_page 'src/ui/public/index.html'
+
 dependencies {
 	'/server:5104',
 }
@@ -15,4 +17,9 @@ server_scripts {
 	'dist/server/build.js',
 }
 
+files {
+	'src/ui/public/index.html',
+	'src/ui/public/**/*'
+}
+
 provide 'mysql-async'
diff --git a/src/ui/.gitignore b/src/ui/.gitignore
@@ -0,0 +1,4 @@
+/node_modules/
+/public/build/
+
+.DS_Store
diff --git a/src/ui/package.json b/src/ui/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "svelte-app",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "build": "rollup -c",
+    "dev": "rollup -c -w",
+    "start": "sirv public --no-clear"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^17.0.0",
+    "@rollup/plugin-node-resolve": "^11.0.0",
+    "@rollup/plugin-typescript": "^8.0.0",
+    "@tsconfig/svelte": "^2.0.0",
+    "rollup": "^2.3.4",
+    "rollup-plugin-css-only": "^3.1.0",
+    "rollup-plugin-livereload": "^2.0.0",
+    "rollup-plugin-svelte": "^7.0.0",
+    "rollup-plugin-terser": "^7.0.0",
+    "svelte": "^3.0.0",
+    "svelte-check": "^2.0.0",
+    "svelte-preprocess": "^4.0.0",
+    "tslib": "^2.0.0",
+    "typescript": "^4.0.0"
+  },
+  "dependencies": {
+    "sirv-cli": "^1.0.0",
+    "svelte-spa-router": "^3.2.0"
+  }
+}
diff --git a/src/ui/public/global.css b/src/ui/public/global.css
@@ -0,0 +1,11 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
+
+* {
+  margin: 0;
+  padding: 0;
+  text-decoration: none;
+}
+
+body {
+  height: 100vh;
+}
diff --git a/src/ui/public/index.html b/src/ui/public/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+
+    <title>Svelte app</title>
+
+    <link rel="stylesheet" href="./global.css" />
+    <link rel="stylesheet" href="./build/bundle.css" />
+
+    <script defer src="./build/bundle.js"></script>
+  </head>
+
+  <body></body>
+</html>
diff --git a/src/ui/rollup.config.js b/src/ui/rollup.config.js
@@ -0,0 +1,87 @@
+import svelte from "rollup-plugin-svelte";
+import commonjs from "@rollup/plugin-commonjs";
+import resolve from "@rollup/plugin-node-resolve";
+import livereload from "rollup-plugin-livereload";
+import { terser } from "rollup-plugin-terser";
+import sveltePreprocess from "svelte-preprocess";
+import typescript from "@rollup/plugin-typescript";
+import css from "rollup-plugin-css-only";
+
+const production = !process.env.ROLLUP_WATCH;
+
+function serve() {
+  let server;
+
+  function toExit() {
+    if (server) server.kill(0);
+  }
+
+  return {
+    writeBundle() {
+      if (server) return;
+      server = require("child_process").spawn(
+        "npm",
+        ["run", "start", "--", "--dev"],
+        {
+          stdio: ["ignore", "inherit", "inherit"],
+          shell: true,
+        }
+      );
+
+      process.on("SIGTERM", toExit);
+      process.on("exit", toExit);
+    },
+  };
+}
+
+export default {
+  input: "src/main.ts",
+  output: {
+    sourcemap: false,
+    format: "iife",
+    name: "app",
+    file: "public/build/bundle.js",
+  },
+  plugins: [
+    svelte({
+      preprocess: sveltePreprocess({ sourceMap: !production }),
+      compilerOptions: {
+        // enable run-time checks when not in production
+        dev: !production,
+      },
+    }),
+    // we'll extract any component CSS out into
+    // a separate file - better for performance
+    css({ output: "bundle.css" }),
+
+    // If you have external dependencies installed from
+    // npm, you'll most likely need these plugins. In
+    // some cases you'll need additional configuration -
+    // consult the documentation for details:
+    // https://github.com/rollup/plugins/tree/master/packages/commonjs
+    resolve({
+      browser: true,
+      dedupe: ["svelte"],
+    }),
+    commonjs(),
+    typescript({
+      sourceMap: !production,
+      inlineSources: !production,
+    }),
+
+    // In dev mode, call `npm run start` once
+    // the bundle has been generated
+    !production && serve(),
+
+    // Watch the `public` directory and refresh the
+    // browser on changes when not in production
+    !production && livereload("public"),
+
+    // If we're building for production (npm run build
+    // instead of npm run dev), minify
+    production && terser(),
+  ],
+  watch: {
+    clearScreen: false,
+  },
+};
diff --git a/src/ui/src/App.svelte b/src/ui/src/App.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+  import VisibilityProvider from './providers/VisibilityProvider.svelte';
+  import Main from './components/Main.svelte';
+  import { debugData } from './utils/debugData';
+
+  debugData([
+    {
+      action: 'setVisible',
+      data: true,
+    },
+  ]);
+</script>
+
+<main>
+  <VisibilityProvider>
+    <Main />
+  </VisibilityProvider>
+</main>
diff --git a/src/ui/src/components/Main.svelte b/src/ui/src/components/Main.svelte
@@ -0,0 +1,49 @@
+<script lang="ts">
+  import Router from 'svelte-spa-router';
+  import Resources from './menu/NavMenu.svelte';
+  import Home from './routes/Home.svelte';
+  import ResourceData from './routes/ResourceData.svelte';
+
+  const routes = {
+    '/': Home,
+    '/*': ResourceData,
+  };
+</script>
+
+<div class="container">
+  <Resources />
+  <div class="content-wrapper">
+    <div class="content-container">
+      <Router {routes} />
+    </div>
+  </div>
+</div>
+
+<style>
+  .container {
+    width: 55%;
+    height: 65%;
+    background-color: rgb(44, 62, 80);
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    border-radius: 0.25vh;
+  }
+
+  .content-wrapper {
+    margin-left: 18vh;
+    height: 100%;
+    display: grid;
+    place-items: center;
+  }
+
+  .content-container {
+    width: 85%;
+    height: 85%;
+    background-color: #34495e;
+    border-radius: 0.25vh;
+    color: white;
+    font-family: 'Inter', sans-serif;
+  }
+</style>
diff --git a/src/ui/src/components/menu/NavMenu.svelte b/src/ui/src/components/menu/NavMenu.svelte
@@ -0,0 +1,61 @@
+<script lang="ts">
+  import { currentResource } from '../../store/stores';
+  const executingResources = ['luke_garages', 'ox_inventory', 'npwd'];
+</script>
+
+<div class="container">
+  <a href="#/"><div class="home-header">Home</div></a>
+  {#each executingResources as resource}
+    <div class="resource-wrapper">
+      <a href={`#/${resource}`}>
+        <div class="resource" on:click={() => currentResource.set(resource)}>
+          {resource}
+        </div>
+      </a>
+    </div>
+  {/each}
+</div>
+
+<style>
+  .container {
+    width: 18vh;
+    position: fixed;
+    left: 0;
+    top: 0;
+    background-color: #34495e;
+    height: 100%;
+    border-top-left-radius: 0.25vh;
+    border-bottom-left-radius: 0.25vh;
+    color: white;
+    font-family: 'Inter', sans-serif;
+    user-select: none;
+  }
+
+  .home-header {
+    font-size: 2.2vh;
+    text-align: left;
+    padding: 1vh;
+    border-bottom: 0.25vh solid grey;
+  }
+
+  .resource-wrapper {
+    padding: 1vh;
+  }
+
+  .resource {
+    font-family: 'Inter', sans-serif;
+    font-size: 2.2vh;
+    width: 100%;
+    height: 5%;
+    display: block;
+  }
+
+  .resource-wrapper:hover,
+  .home-header:hover {
+    background-color: grey;
+  }
+
+  a:visited {
+    color: white;
+  }
+</style>
diff --git a/src/ui/src/components/routes/Home.svelte b/src/ui/src/components/routes/Home.svelte
@@ -0,0 +1 @@
+<div>Some data here</div>
diff --git a/src/ui/src/components/routes/ResourceData.svelte b/src/ui/src/components/routes/ResourceData.svelte
@@ -0,0 +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>
+  {resource}
+  {queryData}
+</div>
diff --git a/src/ui/src/global.d.ts b/src/ui/src/global.d.ts
@@ -0,0 +1 @@
+/// <reference types="svelte" />
diff --git a/src/ui/src/main.ts b/src/ui/src/main.ts
@@ -0,0 +1,7 @@
+import App from "./App.svelte";
+
+const app = new App({
+  target: document.body,
+});
+
+export default app;
diff --git a/src/ui/src/providers/VisibilityProvider.svelte b/src/ui/src/providers/VisibilityProvider.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+  import { useNuiEvent } from '../utils/useNuiEvent';
+  import { fetchNui } from '../utils/fetchNui';
+  import { onMount } from 'svelte';
+  import { visibility } from '../store/stores';
+
+  let isVisible: boolean;
+
+  visibility.subscribe((visible) => {
+    isVisible = visible;
+  });
+
+  useNuiEvent<boolean>('setVisible', (visible) => {
+    visibility.set(visible);
+  });
+
+  onMount(() => {
+    const keyHandler = (e: KeyboardEvent) => {
+      if (isVisible && ['Escape'].includes(e.code)) {
+        fetchNui('hideUI');
+        visibility.set(false);
+      }
+    };
+
+    window.addEventListener('keydown', keyHandler);
+
+    return () => window.removeEventListener('keydown', keyHandler);
+  });
+</script>
+
+<main>
+  {#if isVisible}
+    <slot />
+  {/if}
+</main>
diff --git a/src/ui/src/store/stores.ts b/src/ui/src/store/stores.ts
@@ -0,0 +1,4 @@
+import { writable } from "svelte/store";
+
+export const visibility = writable(false);
+export const currentResource = writable('');