th-170: Add customer home page (#255)

* th-170: + socket env

* th-170: + method to get all active shifts with trucks

* th-170: + socket events to get trucks list

* th-170: + socket event listener for trucks list update

* th-170: + adds the ability to display multiple markers on the map

* th-170: + socket connection hook for home page

* th-170: * update trucks slice to save active trucks

* th-170: + home page

* th-170: * .env.example on backend

* th-170: * moved sendTrucksList to helpers

* th-170: * fix errors

* th-170: * ci fix

* th-170: * update package-lock

* th-170: * moved socket events to shared

* th-170: * update sockets on frontend to use enums

* th-170: * update sockets on backend: add room for home page

* th-170: - remove client-socket-event-parameter

* th-170: * disabled default ui on the map

* th-170: * update scroll rule on truck list

* th-170: * change truck list update interval

* th-170: - removed mock data

* th-170: + type for truck with location

* th-170: * updated styles of tow truck card

* th-170: + adds the ability to select a truck

* th-170: * updated truck selectors types

* th-170: * updated geolocation types

* th-170: * refactoring

* th-170: * renamed truck type

* th-170: + add map for manufacturer names

Author: h0wter

backend/.env.example

@@ -36,6 +36,11 @@ DB_DIALECT=pg
 DB_POOL_MIN=2
 DB_POOL_MAX=10
 
+#
+# SOCKET
+#
+TRUCK_LIST_UPDATE_INTERVAL=interval_in_ms
+
 #
 # API
 #

backend/src/libs/packages/config/config.package.ts

@@ -167,6 +167,14 @@ class Config implements IConfig {
           default: null,
         },
       },
+      SOCKET: {
+        TRUCK_LIST_UPDATE_INTERVAL: {
+          doc: 'Truck list update interval',
+          format: Number,
+          env: 'TRUCK_LIST_UPDATE_INTERVAL',
+          default: 10_000,
+        },
+      },
       API: {
         GOOGLE_MAPS_API_KEY: {
           doc: 'Key for Google maps API',

backend/src/libs/packages/config/libs/types/environment-schema.type.ts

@@ -31,6 +31,9 @@ type EnvironmentSchema = {
     SMTP_TLS: boolean;
     SENDGRID_SENDER_EMAIL: string;
   };
+  SOCKET: {
+    TRUCK_LIST_UPDATE_INTERVAL: number;
+  };
   API: {
     GOOGLE_MAPS_API_KEY: string;
   };

backend/src/libs/packages/database/schema/schema.ts

@@ -7,6 +7,7 @@ import {
   orders,
   ordersRelations,
   shifts,
+  shiftsRelations,
   trucks,
   trucksRelations,
   users,
@@ -20,6 +21,7 @@ const schema = {
   business,
   groups,
   shifts,
+  shiftsRelations,
   trucks,
   trucksRelations,
   users,

backend/src/libs/packages/database/schema/tables-schema.ts

@@ -190,6 +190,13 @@ const businessRelations = relations(users, ({ many }) => ({
   orders: many(orders),
 }));
 
+const shiftsRelations = relations(shifts, ({ one }) => ({
+  truck: one(trucks, {
+    fields: [shifts.truckId],
+    references: [trucks.id],
+  }),
+}));
+
 const usersTrucksRelations = relations(usersTrucks, ({ one }) => ({
   truck: one(trucks, {
     fields: [usersTrucks.truckId],
@@ -224,6 +231,7 @@ export {
   ordersRelations,
   orderStatus,
   shifts,
+  shiftsRelations,
   trucks,
   trucksRelations,
   users,

backend/src/libs/packages/server-application/server-app.ts

@@ -27,6 +27,7 @@ import {
 } from '~/libs/types/types.js';
 import { authPlugin } from '~/packages/auth/auth.js';
 import { filesValidationPlugin } from '~/packages/files/files.js';
+import { type ShiftService } from '~/packages/shifts/shift.service.js';
 import { userService } from '~/packages/users/users.js';
 
 import { type AuthStrategyHandler } from '../controller/controller.js';
@@ -45,6 +46,7 @@ type Constructor = {
   logger: ILogger;
   database: IDatabase;
   apis: IServerAppApi[];
+  shiftService: ShiftService;
 };
 
 class ServerApp implements IServerApp {
@@ -58,11 +60,20 @@ class ServerApp implements IServerApp {
 
   private app: ReturnType<typeof Fastify>;
 
-  public constructor({ config, logger, database, apis }: Constructor) {
+  private shiftService: ShiftService;
+
+  public constructor({
+    config,
+    logger,
+    database,
+    apis,
+    shiftService,
+  }: Constructor) {
     this.config = config;
     this.logger = logger;
     this.database = database;
     this.apis = apis;
+    this.shiftService = shiftService;
 
     this.app = Fastify();
   }
@@ -267,8 +278,10 @@ class ServerApp implements IServerApp {
     await this.initServe();
 
     socketService.initializeIo({
+      config: this.config,
       app: this.app,
       geolocationCacheService: GeolocationCacheService.getInstance(),
+      shiftService: this.shiftService,
     });
 
     await this.initMiddlewares();

backend/src/libs/packages/server-application/server-application.ts

@@ -5,7 +5,7 @@ import { authController } from '~/packages/auth/auth.js';
 import { businessController } from '~/packages/business/business.js';
 import { filesController } from '~/packages/files/files.js';
 import { orderController } from '~/packages/orders/orders.js';
-import { shiftController } from '~/packages/shifts/shift.js';
+import { shiftController, shiftService } from '~/packages/shifts/shift.js';
 import { truckController } from '~/packages/trucks/trucks.js';
 import { userController } from '~/packages/users/users.js';
 
@@ -29,6 +29,7 @@ const serverApp = new ServerApp({
   logger,
   database,
   apis: [apiV1],
+  shiftService,
 });
 
 export { type ServerAppRouteParameters } from './libs/types/types.js';

backend/src/libs/packages/socket/libs/enums/enums.ts

@@ -1 +1,2 @@
-export { ServerSocketEvent } from 'shared/build/index.js';
+export { SocketRoom } from './socket-room.js';
+export { ClientSocketEvent, ServerSocketEvent } from 'shared/build/index.js';

backend/src/libs/packages/socket/libs/enums/socket-room.ts

@@ -0,0 +1,5 @@
+const SocketRoom = {
+  HOME_ROOM: 'home_room',
+} as const;
+
+export { SocketRoom };

backend/src/libs/packages/socket/libs/helpers/get-trucks-list/get-trucks-list.helper.ts

@@ -0,0 +1,24 @@
+import {
+  type GeolocationCacheService,
+  type GeolocationLatLng,
+} from '~/libs/packages/geolocation-cache/geolocation-cache.js';
+import { type ShiftService } from '~/packages/shifts/shift.service.js';
+import { type TruckEntity } from '~/packages/trucks/libs/types/types.js';
+
+type Result = TruckEntity & {
+  location: GeolocationLatLng | undefined;
+};
+
+const getTrucksList = async (
+  shiftService: ShiftService,
+  geolocationCacheService: GeolocationCacheService,
+): Promise<Result[]> => {
+  const result = await shiftService.getAllStartedWithTrucks();
+
+  return result.map((it) => ({
+    ...it,
+    location: geolocationCacheService.getCache(it.id),
+  }));
+};
+
+export { getTrucksList };