\ No newline at end of file
diff --git a/resources/[jobs]/ps-multijob/svelte-source/src/components/atoms/NavItem.svelte b/resources/[jobs]/ps-multijob/svelte-source/src/components/atoms/NavItem.svelte
new file mode 100644
index 000000000..8e77d761f
--- /dev/null
+++ b/resources/[jobs]/ps-multijob/svelte-source/src/components/atoms/NavItem.svelte
@@ -0,0 +1,38 @@
+
+
+
navItemClicked(name)}
+>
+
+
+
+
+
+
diff --git a/resources/[jobs]/ps-multijob/svelte-source/src/components/atoms/svgs/ActiveSVG.svelte b/resources/[jobs]/ps-multijob/svelte-source/src/components/atoms/svgs/ActiveSVG.svelte
new file mode 100644
index 000000000..60eb09e8c
--- /dev/null
+++ b/resources/[jobs]/ps-multijob/svelte-source/src/components/atoms/svgs/ActiveSVG.svelte
@@ -0,0 +1,5 @@
+
\ No newline at end of file
diff --git a/resources/[jobs]/ps-multijob/svelte-source/src/components/atoms/svgs/CivilianSVG.svelte b/resources/[jobs]/ps-multijob/svelte-source/src/components/atoms/svgs/CivilianSVG.svelte
new file mode 100644
index 000000000..c919fce4e
--- /dev/null
+++ b/resources/[jobs]/ps-multijob/svelte-source/src/components/atoms/svgs/CivilianSVG.svelte
@@ -0,0 +1,7 @@
+
+
+
\ No newline at end of file
diff --git a/resources/[jobs]/ps-multijob/svelte-source/src/components/atoms/svgs/ClockSVG.svelte b/resources/[jobs]/ps-multijob/svelte-source/src/components/atoms/svgs/ClockSVG.svelte
new file mode 100644
index 000000000..8c82b7b2a
--- /dev/null
+++ b/resources/[jobs]/ps-multijob/svelte-source/src/components/atoms/svgs/ClockSVG.svelte
@@ -0,0 +1,6 @@
+
\ No newline at end of file
diff --git a/resources/[jobs]/ps-multijob/svelte-source/src/components/atoms/svgs/CrossMarkSVG.svelte b/resources/[jobs]/ps-multijob/svelte-source/src/components/atoms/svgs/CrossMarkSVG.svelte
new file mode 100644
index 000000000..d1a9e43c0
--- /dev/null
+++ b/resources/[jobs]/ps-multijob/svelte-source/src/components/atoms/svgs/CrossMarkSVG.svelte
@@ -0,0 +1,5 @@
+
\ No newline at end of file
diff --git a/resources/[jobs]/ps-multijob/svelte-source/src/components/atoms/svgs/DeleteSVG.svelte b/resources/[jobs]/ps-multijob/svelte-source/src/components/atoms/svgs/DeleteSVG.svelte
new file mode 100644
index 000000000..c1d99e7b2
--- /dev/null
+++ b/resources/[jobs]/ps-multijob/svelte-source/src/components/atoms/svgs/DeleteSVG.svelte
@@ -0,0 +1,4 @@
+
\ No newline at end of file
diff --git a/resources/[jobs]/ps-multijob/svelte-source/src/components/atoms/svgs/PoliceSVG.svelte b/resources/[jobs]/ps-multijob/svelte-source/src/components/atoms/svgs/PoliceSVG.svelte
new file mode 100644
index 000000000..aabf3c74f
--- /dev/null
+++ b/resources/[jobs]/ps-multijob/svelte-source/src/components/atoms/svgs/PoliceSVG.svelte
@@ -0,0 +1,14 @@
+
\ No newline at end of file
diff --git a/resources/[jobs]/ps-multijob/svelte-source/src/components/atoms/svgs/RankSVG.svelte b/resources/[jobs]/ps-multijob/svelte-source/src/components/atoms/svgs/RankSVG.svelte
new file mode 100644
index 000000000..351a305b0
--- /dev/null
+++ b/resources/[jobs]/ps-multijob/svelte-source/src/components/atoms/svgs/RankSVG.svelte
@@ -0,0 +1,10 @@
+
\ No newline at end of file
diff --git a/resources/[jobs]/ps-multijob/svelte-source/src/components/atoms/svgs/SalarySVG.svelte b/resources/[jobs]/ps-multijob/svelte-source/src/components/atoms/svgs/SalarySVG.svelte
new file mode 100644
index 000000000..742b1b5a3
--- /dev/null
+++ b/resources/[jobs]/ps-multijob/svelte-source/src/components/atoms/svgs/SalarySVG.svelte
@@ -0,0 +1,13 @@
+
\ No newline at end of file
diff --git a/resources/[jobs]/ps-multijob/svelte-source/src/components/atoms/svgs/SelectSVG.svelte b/resources/[jobs]/ps-multijob/svelte-source/src/components/atoms/svgs/SelectSVG.svelte
new file mode 100644
index 000000000..51e062a84
--- /dev/null
+++ b/resources/[jobs]/ps-multijob/svelte-source/src/components/atoms/svgs/SelectSVG.svelte
@@ -0,0 +1,7 @@
+
diff --git a/resources/[jobs]/ps-multijob/svelte-source/src/components/atoms/svgs/TaxiSVG.svelte b/resources/[jobs]/ps-multijob/svelte-source/src/components/atoms/svgs/TaxiSVG.svelte
new file mode 100644
index 000000000..263c9848a
--- /dev/null
+++ b/resources/[jobs]/ps-multijob/svelte-source/src/components/atoms/svgs/TaxiSVG.svelte
@@ -0,0 +1,10 @@
+
\ No newline at end of file
diff --git a/resources/[jobs]/ps-multijob/svelte-source/src/components/atoms/svgs/WhitelistSVG.svelte b/resources/[jobs]/ps-multijob/svelte-source/src/components/atoms/svgs/WhitelistSVG.svelte
new file mode 100644
index 000000000..e609d4d6b
--- /dev/null
+++ b/resources/[jobs]/ps-multijob/svelte-source/src/components/atoms/svgs/WhitelistSVG.svelte
@@ -0,0 +1,16 @@
+
+
+
\ No newline at end of file
diff --git a/resources/[jobs]/ps-multijob/svelte-source/src/main.ts b/resources/[jobs]/ps-multijob/svelte-source/src/main.ts
new file mode 100644
index 000000000..c9a3922d7
--- /dev/null
+++ b/resources/[jobs]/ps-multijob/svelte-source/src/main.ts
@@ -0,0 +1,9 @@
+import App from './App.svelte'
+import 'uno.css'
+import '@unocss/reset/tailwind.css'
+
+const app = new App({
+ target: document.getElementById('app')
+})
+
+export default app
\ No newline at end of file
diff --git a/resources/[jobs]/ps-multijob/svelte-source/src/stores/JobStore.ts b/resources/[jobs]/ps-multijob/svelte-source/src/stores/JobStore.ts
new file mode 100644
index 000000000..b6587f194
--- /dev/null
+++ b/resources/[jobs]/ps-multijob/svelte-source/src/stores/JobStore.ts
@@ -0,0 +1,120 @@
+import { writable, Writable, get } from "svelte/store";
+import fetchNUI from '../utils/fetch';
+import type { Job, JobManifest, side, nuiUpdateJobMessage } from '../types/types';
+import PanelStore from "./PanelStore";
+
+export interface nuiOpenMessage {
+ activeJob: string;
+ onDuty: boolean;
+ jobs: JobManifest;
+ side: side;
+}
+
+interface JobState {
+ jobManifest: Writable;
+ activeJob: Writable;
+ onDuty: Writable;
+}
+
+const store = () => {
+ const JobStore: JobState = {
+ jobManifest: writable({
+ "civilian": [],
+ "whitelist": [],
+ }),
+ activeJob: writable("police person"),
+ onDuty: writable(false),
+ }
+
+ const methods = {
+ deleteJob(nuiName: string, nuiRank: number, category: string) {
+ fetchNUI("removejob", {
+ name: nuiName,
+ grade: nuiRank,
+ });
+ // Remove job from list
+ JobStore.jobManifest.update((state) => {
+ state[category] = state[category].filter((element: Job) => element.name != nuiName);
+ return state;
+ });
+ },
+ receiveOpenMessage(data: nuiOpenMessage) {
+ JobStore.jobManifest.set(data.jobs);
+ JobStore.activeJob.set(data.activeJob);
+ JobStore.onDuty.set(data.onDuty);
+ PanelStore.side.set(data.side || "right");
+ },
+ recieveUpdateJob(data: nuiUpdateJobMessage) {
+ const activeJob: string = get(JobStore.activeJob);
+ if (activeJob == data.name) {
+ JobStore.onDuty.set(data.onDuty);
+ }
+
+ JobStore.jobManifest.update((state) => {
+ function updateJob(kind: "whitelist" | "civilian", index: number) {
+ let changeJob = state[kind][index];
+ changeJob.grade = data.grade;
+ changeJob.gradeLabel = data.gradeLabel;
+ changeJob.salary = data.salary;
+ }
+
+ function newJob(): Job {
+ return {
+ name: data.name,
+ label: data.label,
+ description: data.description,
+ salary: data.salary,
+ gradeLabel: data.gradeLabel,
+ grade: data.grade,
+ active: 0,
+ icon: data.icon,
+ }
+ }
+
+ let findSameName = (job: Job) => {
+ return job.name == data.name
+ }
+
+ const accessString: "civilian" | "whitelist" = data.isWhitelist ? "whitelist" : "civilian";
+ let index = state[accessString]?.findIndex(findSameName);
+
+ if (index != -1) {
+ updateJob(accessString, index);
+ } else {
+ state[accessString] = [...state[accessString], newJob()]
+ }
+
+ return state;
+ })
+ },
+ async setActiveJob(jobName: string, nuiName: string, nuiRank: number) {
+ JobStore.activeJob.set(jobName);
+ // Needs to give back onDuty
+ let data = await fetchNUI("selectjob", {
+ name: nuiName,
+ grade: nuiRank,
+ });
+ JobStore.onDuty.set(data?.onDuty);
+ },
+ unSetActiveJob() {
+ JobStore.activeJob.set("");
+ JobStore.onDuty.set(false);
+ // Unselect current job by setting player to unemployed
+ fetchNUI("selectjob", {
+ name: 'unemployed',
+ grade: 0,
+ });
+ },
+ toggleDuty() {
+ JobStore.onDuty.update(state => !state);
+ fetchNUI('toggleduty', null);
+ }
+ }
+
+ return {
+ ...JobStore,
+ ...methods
+ }
+}
+
+export default store();
\ No newline at end of file
diff --git a/resources/[jobs]/ps-multijob/svelte-source/src/stores/PanelStore.ts b/resources/[jobs]/ps-multijob/svelte-source/src/stores/PanelStore.ts
new file mode 100644
index 000000000..f55cd0dcc
--- /dev/null
+++ b/resources/[jobs]/ps-multijob/svelte-source/src/stores/PanelStore.ts
@@ -0,0 +1,62 @@
+import { writable, Writable } from "svelte/store";
+import type { side } from '../types/types';
+import fetchNUI from '../utils/fetch';
+import CivilianSVG from '../components/atoms/svgs/CivilianSVG.svelte';
+import WhiteListSVG from '../components/atoms/svgs/WhitelistSVG.svelte';
+
+interface panel {
+ name: string;
+ icon: any;
+}
+
+interface PanelState {
+ show: Writable;
+ panelActive: Writable;
+ panels: Writable>;
+ side: Writable;
+}
+
+const panels: Array = [
+ {
+ name: "whitelist",
+ icon: WhiteListSVG,
+ },
+ {
+ name: "civilian",
+ icon: CivilianSVG,
+ }
+]
+
+const store = () => {
+ const PanelStore: PanelState = {
+ panelActive: writable(""),
+ panels: writable(panels),
+ show: writable(false),
+ side: writable("right"),
+ }
+
+ const methods = {
+ handleKeyUp(event: KeyboardEvent) {
+ if (event.key == "Escape") {
+ methods.setShow(false);
+ fetchNUI("closemenu", null);
+ }
+ },
+ setActive(name: string) {
+ PanelStore.panelActive.set(name);
+ },
+ setShow(show: boolean) {
+ PanelStore.show.set(show);
+ },
+ setSide(side: side) {
+ PanelStore.side.set(side);
+ }
+ }
+
+ return {
+ ...PanelStore,
+ ...methods
+ }
+}
+
+export default store();
\ No newline at end of file
diff --git a/resources/[jobs]/ps-multijob/svelte-source/src/stores/debugStore.ts b/resources/[jobs]/ps-multijob/svelte-source/src/stores/debugStore.ts
new file mode 100644
index 000000000..5ff73f03f
--- /dev/null
+++ b/resources/[jobs]/ps-multijob/svelte-source/src/stores/debugStore.ts
@@ -0,0 +1,2 @@
+const debugMode: boolean = import.meta.env.DEV;
+export default debugMode;
\ No newline at end of file
diff --git a/resources/[jobs]/ps-multijob/svelte-source/src/tests/example.test.ts b/resources/[jobs]/ps-multijob/svelte-source/src/tests/example.test.ts
new file mode 100644
index 000000000..15460146c
--- /dev/null
+++ b/resources/[jobs]/ps-multijob/svelte-source/src/tests/example.test.ts
@@ -0,0 +1,7 @@
+import { describe, expect, test } from 'vitest';
+
+describe('function()', async () => {
+ test('behavior', () => {
+ expect(1).toBe(1);
+ });
+});
\ No newline at end of file
diff --git a/resources/[jobs]/ps-multijob/svelte-source/src/types/types.ts b/resources/[jobs]/ps-multijob/svelte-source/src/types/types.ts
new file mode 100644
index 000000000..934f3265c
--- /dev/null
+++ b/resources/[jobs]/ps-multijob/svelte-source/src/types/types.ts
@@ -0,0 +1,22 @@
+export interface Job {
+ name: string;
+ label: string;
+ description: string;
+ salary: number;
+ gradeLabel: string;
+ grade: number;
+ active: number;
+ icon: string;
+}
+
+export interface nuiUpdateJobMessage extends Omit {
+ isWhitelist: boolean;
+ onDuty: boolean;
+}
+
+export interface JobManifest {
+ "whitelist": Array;
+ "civilian": Array;
+}
+
+export type side = "left" | "right";
\ No newline at end of file
diff --git a/resources/[jobs]/ps-multijob/svelte-source/src/utils/eventHandler.ts b/resources/[jobs]/ps-multijob/svelte-source/src/utils/eventHandler.ts
new file mode 100644
index 000000000..b74f7a141
--- /dev/null
+++ b/resources/[jobs]/ps-multijob/svelte-source/src/utils/eventHandler.ts
@@ -0,0 +1,33 @@
+import { onMount, onDestroy } from "svelte";
+import JobStore from '../stores/JobStore';
+import PanelStore from '../stores/PanelStore';
+
+interface nuiMessage {
+ data: {
+ action: string,
+ [key: string]: any,
+ },
+}
+
+export function EventHandler() {
+ function mainEvent(event: nuiMessage) {
+ switch (event.data.action) {
+ case "sendjobs":
+ JobStore.receiveOpenMessage(event.data as any);
+ PanelStore.setShow(true);
+ break;
+ case "updatejob":
+ JobStore.recieveUpdateJob(event.data as any);
+ break;
+ }
+ }
+
+ onMount(() => window.addEventListener("message", mainEvent));
+ onDestroy(() => window.removeEventListener("message", mainEvent));
+}
+
+export function handleKeyUp(event: KeyboardEvent) {
+ const charCode = event.key;
+ if (charCode == "Escape") {
+ }
+}
\ No newline at end of file
diff --git a/resources/[jobs]/ps-multijob/svelte-source/src/utils/fetch.ts b/resources/[jobs]/ps-multijob/svelte-source/src/utils/fetch.ts
new file mode 100644
index 000000000..c12a67375
--- /dev/null
+++ b/resources/[jobs]/ps-multijob/svelte-source/src/utils/fetch.ts
@@ -0,0 +1,26 @@
+export default async function fetchNui(eventName: string, data: unknown = {}) {
+ const options = {
+ method: "post",
+ headers: {
+ "Content-Type": "application/json; charset=UTF-8",
+ },
+ body: JSON.stringify(data),
+ };
+
+ const getResourceName = () => {
+ try {
+ // @ts-ignore
+ return window.GetParentResourceName();
+ } catch(err) {
+ return "ps-multijob";
+ }
+ }
+
+ const resourceName = getResourceName();
+
+ try {
+ const resp = await fetch(`https://${resourceName}/${eventName}`, options);
+ return await resp.json();
+ } catch(err) {
+ }
+}
\ No newline at end of file
diff --git a/resources/[jobs]/ps-multijob/svelte-source/src/utils/mockEvent.ts b/resources/[jobs]/ps-multijob/svelte-source/src/utils/mockEvent.ts
new file mode 100644
index 000000000..51eb20159
--- /dev/null
+++ b/resources/[jobs]/ps-multijob/svelte-source/src/utils/mockEvent.ts
@@ -0,0 +1,132 @@
+import type { JobManifest } from '../types/types';
+import type { nuiOpenMessage } from '../stores/JobStore';
+
+export default function mockEventCall(data: unknown = {}) {
+ window.dispatchEvent(
+ new MessageEvent("message", {data})
+ );
+};
+
+export function exampleCall() {
+ setTimeout(() => {
+ mockEventCall({
+ action: 'show',
+ data: {
+ header: "Some Header!",
+ },
+ });
+ }, 100);
+};
+
+export function mockJobMenuOpen() {
+ const mockJobManifest: JobManifest = {
+ "whitelist": [
+ {
+ name: "police person",
+ label: "police person",
+ description: `Generate Lorem lpsum placeholder text.
+ Select the number of characters, words, sentences or paragraphs, and hit generate!`,
+ salary: 250,
+ gradeLabel: "Regular",
+ grade: 0,
+ active: 0,
+ icon: "fa-solid fa-trash-can",
+ },
+ {
+ name: "police chief",
+ label: "police chief",
+ description: "Blah blah blah",
+ salary: 500,
+ gradeLabel: "Boss",
+ grade: 0,
+ active: 1,
+ icon: "",
+ },
+ {
+ name: "police chief2",
+ label: "police chief2",
+ description: "Blah blah blah",
+ salary: 500,
+ gradeLabel: "Boss",
+ grade: 0,
+ active: 1,
+ icon: "",
+ },
+ {
+ name: "police chief3",
+ label: "police chief3",
+ description: "Blah blah blah",
+ salary: 500,
+ gradeLabel: "Boss",
+ grade: 0,
+ active: 1,
+ icon: "",
+ },
+ {
+ name: "police chief4",
+ label: "police chief4",
+ description: "Blah blah blah",
+ salary: 500,
+ gradeLabel: "Boss",
+ grade: 0,
+ active: 1,
+ icon: "",
+ },
+ ],
+ "civilian": [
+ {
+ name: "taxi driver",
+ label: "taxi driver",
+ description: `Generate Lorem lpsum placeholder text.
+ Select the number of characters, words, sentences or paragraphs, and hit generate!`,
+ salary: 150,
+ gradeLabel: "Regular",
+ grade: 0,
+ active: 0,
+ icon: "",
+ },
+ {
+ name: "murdershot1",
+ label: "murdershot1",
+ description: "Take people's order and serve them food",
+ salary: 100,
+ gradeLabel: "Cashier",
+ grade: 0,
+ active: 0,
+ icon: "",
+ },
+ {
+ name: "murdershot2",
+ label: "murdershot2",
+ description: "Take people's order and serve them food",
+ salary: 100,
+ gradeLabel: "Cashier",
+ grade: 0,
+ active: 0,
+ icon: "",
+ },
+ {
+ name: "murdershot3",
+ label: "murdershot3",
+ description: "Take people's order and serve them food",
+ salary: 100,
+ gradeLabel: "Cashier",
+ grade: 0,
+ active: 0,
+ icon: "",
+ }
+ ],
+ }
+ setTimeout(() => {
+ let sendData: nuiOpenMessage = {
+ activeJob: "murdershot1",
+ jobs: mockJobManifest,
+ onDuty: true,
+ side: "right",
+ }
+ mockEventCall({
+ action: 'sendjobs',
+ ...sendData,
+ });
+ }, 1000);
+}
\ No newline at end of file
diff --git a/resources/[jobs]/ps-multijob/svelte-source/src/vite-env.d.ts b/resources/[jobs]/ps-multijob/svelte-source/src/vite-env.d.ts
new file mode 100644
index 000000000..4078e7476
--- /dev/null
+++ b/resources/[jobs]/ps-multijob/svelte-source/src/vite-env.d.ts
@@ -0,0 +1,2 @@
+///
+///
diff --git a/resources/[jobs]/ps-multijob/svelte-source/svelte.config.js b/resources/[jobs]/ps-multijob/svelte-source/svelte.config.js
new file mode 100644
index 000000000..3630bb396
--- /dev/null
+++ b/resources/[jobs]/ps-multijob/svelte-source/svelte.config.js
@@ -0,0 +1,7 @@
+import sveltePreprocess from 'svelte-preprocess'
+
+export default {
+ // Consult https://github.com/sveltejs/svelte-preprocess
+ // for more information about preprocessors
+ preprocess: sveltePreprocess()
+}
diff --git a/resources/[jobs]/ps-multijob/svelte-source/tsconfig.json b/resources/[jobs]/ps-multijob/svelte-source/tsconfig.json
new file mode 100644
index 000000000..96bfd81aa
--- /dev/null
+++ b/resources/[jobs]/ps-multijob/svelte-source/tsconfig.json
@@ -0,0 +1,21 @@
+{
+ "extends": "@tsconfig/svelte/tsconfig.json",
+ "compilerOptions": {
+ "target": "esnext",
+ "useDefineForClassFields": true,
+ "module": "esnext",
+ "resolveJsonModule": true,
+ "baseUrl": ".",
+ /**
+ * Typecheck JS in `.svelte` and `.js` files by default.
+ * Disable checkJs if you'd like to use dynamic types in JS.
+ * Note that setting allowJs false does not prevent the use
+ * of JS in `.svelte` files.
+ */
+ "allowJs": true,
+ "checkJs": true,
+ "isolatedModules": true
+ },
+ "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"],
+ "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/resources/[jobs]/ps-multijob/svelte-source/tsconfig.node.json b/resources/[jobs]/ps-multijob/svelte-source/tsconfig.node.json
new file mode 100644
index 000000000..e993792cb
--- /dev/null
+++ b/resources/[jobs]/ps-multijob/svelte-source/tsconfig.node.json
@@ -0,0 +1,8 @@
+{
+ "compilerOptions": {
+ "composite": true,
+ "module": "esnext",
+ "moduleResolution": "node"
+ },
+ "include": ["vite.config.ts"]
+}
diff --git a/resources/[jobs]/ps-multijob/svelte-source/vite.config.ts b/resources/[jobs]/ps-multijob/svelte-source/vite.config.ts
new file mode 100644
index 000000000..5fb79230f
--- /dev/null
+++ b/resources/[jobs]/ps-multijob/svelte-source/vite.config.ts
@@ -0,0 +1,50 @@
+///
+import { defineConfig } from 'vite'
+import { svelte } from '@sveltejs/vite-plugin-svelte'
+import { minify } from "html-minifier";
+import Unocss from 'unocss/vite'
+import presetUno from '@unocss/preset-uno'
+
+const minifyHtml = () => {
+ return {
+ name: 'html-transform',
+ transformIndexHtml(html) {
+ return minify(html, {
+ collapseWhitespace: true,
+ });
+ },
+ };
+};
+
+export default defineConfig(({ mode }) => {
+ const isProduction = mode === 'production';
+
+ return {
+ plugins: [
+ Unocss({
+ presets: [ presetUno() ],
+ }),
+ svelte(),
+ isProduction && minifyHtml(),
+ ],
+ test: {
+ globals: true,
+ environment: 'jsdom',
+ },
+ base: './', // fivem nui needs to have local dir reference
+ build: {
+ minify: isProduction,
+ emptyOutDir: true,
+ outDir: '../html',
+ assetsDir: './',
+ rollupOptions: {
+ output: {
+ // By not having hashes in the name, you don't have to update the manifest, yay!
+ entryFileNames: `[name].js`,
+ chunkFileNames: `[name].js`,
+ assetFileNames: `[name].[ext]`
+ }
+ }
+ },
+ };
+});