feat(settings): added theme & scale settings

src/server/.env copy

@@ -0,0 +1,2 @@
+DROP_TABLE_BEFORE_CREATING=false
+MYSQL_CONNECTION_STRING='mysql://root:hejhej123123@172.20.192.1:3307/qbcoreframework_02?charset=utf8mb4'

src/server/database/schemas/Contact.ts

@@ -4,8 +4,8 @@ import { Contact } from '../../../shared/Types';
 
 export type InsertContact = Pick<Contact, 'name' | 'phone_number' | 'sim_card_id'>;
 
-export const createContactsTable = () => {
-  createDbTable('contact', (table) => {
+export const createContactsTable = async () => {
+  await createDbTable('contact', (table) => {
     table.increments('id').primary();
     table.string('name').notNullable();
     table.string('phone_number').notNullable();

src/server/database/schemas/Device.ts

@@ -12,6 +12,7 @@ export const createDevicesTable = async () => {
     // Generate random string for the identifier
     table.string('identifier').notNullable().unique().defaultTo(DBInstance.fn.uuid());
     table.integer('sim_card_id').unsigned().references('id').inTable(`${DATABASE_PREFIX}sim_card`);
+    table.jsonb('settings').nullable();
     table.dateTime('created_at').notNullable().defaultTo(DBInstance.fn.now());
     table.dateTime('updated_at').notNullable().defaultTo(DBInstance.fn.now());
   });

src/server/global.ts

@@ -1,3 +1,5 @@
+import PlayerService from './services/PlayerService';
+
 const isRunningIngame = typeof RegisterCommand !== 'undefined';
 
 if (!isRunningIngame) {
@@ -28,4 +30,9 @@ if (!isRunningIngame) {
       },
     },
   } as unknown as CitizenExports;
+
+  const baseLicense = `license:ef0b12fd95e37572c24c00503c3fd02f3f9b99cb`;
+  PlayerService.selectDevice(1, `1:${baseLicense}`);
+  PlayerService.selectDevice(2, `2:${baseLicense}`);
+  PlayerService.selectDevice(3, `3:${baseLicense}`);
 }

src/server/repositories/AuthRepository.ts

@@ -1,4 +1,5 @@
 import { ResourceConfig, getServerConfig } from '../utils/config';
+import { isRunningInGame } from '../utils/game';
 const _exports = global.exports;
 
 const frameworks = ['standalone', 'custom'] as const;
@@ -25,6 +26,10 @@ const getFramework = () => {
   const convarFramework = getConvarFramework();
   const framework = convarFramework || config.framework;
 
+  if (!isRunningInGame()) {
+    return 'standalone';
+  }
+
   if (convarFramework) {
     console.log(`Using framework "${convarFramework}" from GetConvar`);
   } else {
@@ -65,7 +70,7 @@ class AuthRepository {
      * Development outside FiveM.
      */
     if (typeof RegisterCommand === 'undefined') {
-      return `${src}` === deviceIdentifier;
+      return true;
     }
 
     const playerLicenses = getPlayerIdentifiers(src);

src/server/repositories/DeviceRepository.ts

@@ -25,7 +25,7 @@ class DeviceRepository {
   }
 
   public async getDeviceById(deviceId: number): Promise<ExtendedDevice> {
-    return await DBInstance(tableName)
+    const result = await DBInstance(tableName)
       .leftJoin('tmp_phone_sim_card', 'tmp_phone_device.sim_card_id', 'tmp_phone_sim_card.id')
       .where('tmp_phone_device.id', deviceId)
       .select(
@@ -35,10 +35,20 @@ class DeviceRepository {
         'tmp_phone_sim_card.id as sim_card_id',
       )
       .first();
+
+    try {
+      if (result) {
+        result.settings = JSON.parse(result.settings);
+      }
+    } catch (error) {
+      console.log('Error parsing settings', error);
+    }
+
+    return result;
   }
 
   public async getDeviceByIdentifier(identifier: string): Promise<ExtendedDevice | null> {
-    return await DBInstance(tableName)
+    const result = await DBInstance(tableName)
       .leftJoin('tmp_phone_sim_card', 'tmp_phone_device.sim_card_id', 'tmp_phone_sim_card.id')
       .where('identifier', identifier)
       .select(
@@ -48,6 +58,16 @@ class DeviceRepository {
         'tmp_phone_sim_card.id as sim_card_id',
       )
       .first();
+
+    try {
+      if (result) {
+        result.settings = JSON.parse(result.settings);
+      }
+    } catch (error) {
+      console.log('Error parsing settings', error);
+    }
+
+    return result;
   }
 
   public async getDeviceBySid(simCardId: number): Promise<Device | null> {
@@ -71,6 +91,16 @@ class DeviceRepository {
   public async deleteDevice(deviceId: number): Promise<void> {
     await DBInstance(tableName).where('id', deviceId).delete();
   }
+
+  public async updateDeviceSettings(
+    deviceId: number,
+    settings: Record<string, unknown>,
+  ): Promise<Device> {
+    await DBInstance(tableName)
+      .where('id', deviceId)
+      .update({ settings: JSON.stringify(settings) });
+    return await this.getDeviceById(deviceId);
+  }
 }
 
 export default new DeviceRepository();

src/server/router/devices.ts

@@ -74,3 +74,23 @@ devicesRouter.add('/current', async (ctx, next) => {
 
   await next();
 });
+
+const updateSettingsSchema = z.object({
+  settings: z.record(z.unknown()),
+});
+
+devicesRouter.add('/update-settings', async (ctx, next) => {
+  try {
+    const { settings } = updateSettingsSchema.parse(ctx.request.body);
+    const device = await DeviceService.updateDeviceSettings(ctx.device.id, settings);
+
+    ctx.body = {
+      ok: true,
+      payload: device,
+    };
+  } catch (error) {
+    handleError(error, ctx);
+  }
+
+  await next();
+});

src/server/services/DeviceService.ts

@@ -47,6 +47,13 @@ class DeviceService {
   public async deleteDevice(deviceId: number): Promise<void> {
     return this.deviceRepository.deleteDevice(deviceId);
   }
+
+  public async updateDeviceSettings(
+    deviceId: number,
+    settings: Record<string, unknown>,
+  ): Promise<Device> {
+    return this.deviceRepository.updateDeviceSettings(deviceId, settings);
+  }
 }
 
 export default new DeviceService(DeviceRepository);

src/shared/Types.ts

@@ -1,7 +1,13 @@
+export interface Settings extends Record<string, unknown> {
+  theme: 'light' | 'dark';
+  scale: number;
+}
+
 export interface Device {
   id: number;
   sim_card_id: number;
   identifier: string;
+  settings: Settings; // JSON
   created_at: Date;
   updated_at: Date;
 }

src/ui/package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@originjs/vite-plugin-federation": "^1.3.6",
     "@radix-ui/react-dialog": "^1.1.1",
+    "@radix-ui/react-slider": "^1.2.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@tanstack/react-query": "^5.55.1",
     "@tanstack/react-query-devtools": "4",

src/ui/src/App.tsx

@@ -17,6 +17,7 @@ import { isEnvBrowser } from './utils/game';
 import { setTheme, Theme } from './utils/theme';
 import { useActiveCall } from './api/hooks/useActiveCall';
 import { useMessagesNotifications } from './api/hooks/useMessagesNotifications';
+import { useSyncSettings } from './hooks/useSyncSettings';
 
 export const lightTheme: Theme = {
   type: 'light',
@@ -45,6 +46,7 @@ export const darkTheme: Theme = {
 function App() {
   useActiveCall();
   useMessagesNotifications();
+  useSyncSettings();
 
   const location = useLocation();
   const navigate = useNavigate();