From 65f9468bbd9501f6377a2954921c7387789b0240 Mon Sep 17 00:00:00 2001
From: Tran Anh Tuan <tunztunzz@Trans-Mac-mini.local>
Date: Wed, 8 Oct 2025 09:38:54 +0700
Subject: [PATCH] chore(maps): display position in DMS

---
 config/proxy.ts                       |  2 +-
 src/constants/index.ts                |  4 ++--
 src/pages/Home/components/BaseMap.tsx |  2 +-
 src/pages/Home/components/GpsInfo.tsx |  8 +++++---
 src/pages/Home/index.tsx              |  2 +-
 src/services/service/MapService.ts    | 15 +++++++++++++--
 6 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/config/proxy.ts b/config/proxy.ts
index dcb4371..ad5d9c2 100644
--- a/config/proxy.ts
+++ b/config/proxy.ts
@@ -1,7 +1,7 @@
 const proxy: Record<string, any> = {
   dev: {
     '/api': {
-      target: 'http://192.168.30.102:81',
+      target: 'http://192.168.30.85:9001',
       changeOrigin: true,
     },
   },
diff --git a/src/constants/index.ts b/src/constants/index.ts
index 0aaa8ba..5cf80bc 100644
--- a/src/constants/index.ts
+++ b/src/constants/index.ts
@@ -14,12 +14,12 @@ export const ROUTE_TRIP = '/trip';
 
 // API Path Constants
 export const API_PATH_LOGIN = '/api/agent/login';
-export const API_PATH_ENTITIES = '/api/agent/entities';
+export const API_PATH_ENTITIES = '/api/io/entities';
 export const API_PATH_SHIP_INFO = '/api/sgw/shipinfo';
 export const API_GET_ALL_LAYER = '/api/sgw/geojsonlist';
 export const API_GET_LAYER_INFO = '/api/sgw/geojson';
 export const API_GET_TRIP = '/api/sgw/trip';
-export const API_GET_ALARMS = '/api/agent/alarms';
+export const API_GET_ALARMS = '/api/io/alarms';
 export const API_UPDATE_TRIP_STATUS = '/api/sgw/tripState';
 export const API_HAUL_HANDLE = '/api/sgw/fishingLog';
 export const API_GET_GPS = '/api/sgw/gps';
diff --git a/src/pages/Home/components/BaseMap.tsx b/src/pages/Home/components/BaseMap.tsx
index 52fe4b0..1042a79 100644
--- a/src/pages/Home/components/BaseMap.tsx
+++ b/src/pages/Home/components/BaseMap.tsx
@@ -114,7 +114,7 @@ class MapManager {
           const data = await getLayer(layerMeta); // lấy GeoJSON từ server
           let style = {};
           if (layerMeta === 'base-countries') {
-            style = createLabelAndFillStyle('#F3F2EC', '#E5BEB5');
+            style = createLabelAndFillStyle('#fafaf8', '#E5BEB5');
           } else {
             style = createLabelAndFillStyle('#77BEF0', '#000000');
           }
diff --git a/src/pages/Home/components/GpsInfo.tsx b/src/pages/Home/components/GpsInfo.tsx
index ce67493..2ef2ab6 100644
--- a/src/pages/Home/components/GpsInfo.tsx
+++ b/src/pages/Home/components/GpsInfo.tsx
@@ -1,3 +1,4 @@
+import { convertToDMS } from '@/services/service/MapService';
 import { ProDescriptions } from '@ant-design/pro-components';
 import { GpsData } from '..';
 const GpsInfo = ({ gpsData }: { gpsData: GpsData | null }) => {
@@ -18,19 +19,20 @@ const GpsInfo = ({ gpsData }: { gpsData: GpsData | null }) => {
           title: 'Kinh độ',
           dataIndex: 'lat',
           render: (_, record) =>
-            record?.lat != null ? `${Number(record.lat).toFixed(5)}°` : '--',
+            record?.lat != null ? `${convertToDMS(record.lat, true)}°` : '--',
         },
         {
           title: 'Vĩ độ',
           dataIndex: 'lon',
           render: (_, record) =>
-            record?.lon != null ? `${Number(record.lon).toFixed(5)}°` : '--',
+            record?.lon != null ? `${convertToDMS(record.lon, false)}°` : '--',
         },
         {
           title: 'Tốc độ',
           dataIndex: 's',
           valueType: 'digit',
-          render: (_, record) => `${record.s} km/h`,
+          render: (_, record) =>
+            record?.s != null ? `${record.s} km/h` : '-- km/h',
           span: 1,
         },
         {
diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
index c54d0f1..3d506ca 100644
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -239,7 +239,7 @@ const HomePage: React.FC = () => {
       />
       <Popover
         styles={{
-          root: { width: '85%', maxWidth: 500, paddingLeft: 15 },
+          root: { width: '85%', maxWidth: 600, paddingLeft: 15 },
         }}
         placement="left"
         title="Trạng thái hiện tại"
diff --git a/src/services/service/MapService.ts b/src/services/service/MapService.ts
index e855c3a..82a221a 100644
--- a/src/services/service/MapService.ts
+++ b/src/services/service/MapService.ts
@@ -15,8 +15,8 @@ export const BASEMAP_ATTRIBUTIONS = '© OpenStreetMap contributors, © CartoDB';
 
 export const INITIAL_VIEW_CONFIG = {
   // Dịch tâm bản đồ ra phía biển và zoom ra xa hơn để thấy bao quát
-  center: [109.5, 16.0],
-  zoom: 5.5,
+  center: [116.152685, 15.70581],
+  zoom: 6.5,
   minZoom: 5,
   maxZoom: 12,
   minScale: 0.1,
@@ -62,3 +62,14 @@ export const getShipIcon = (type: number, isFishing: boolean) => {
     return shipUndefineIcon;
   }
 };
+
+export const convertToDMS = (value: number, isLat: boolean): string => {
+  const deg = Math.floor(Math.abs(value));
+  const minFloat = (Math.abs(value) - deg) * 60;
+  const min = Math.floor(minFloat);
+  const sec = (minFloat - min) * 60;
+
+  const direction = value >= 0 ? (isLat ? 'N' : 'E') : isLat ? 'S' : 'W';
+
+  return `${deg}°${min}'${sec.toFixed(2)}"${direction}`;
+};