tuanta/SeaGateway-App
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: tuanta:67a80c1498f91b29ec0f09b17b8abbc9411612b0
Branches Tags
tuanta:master tuanta:MinhNN tuanta:tunztunzz
...
compare: tuanta:f3ad6e02f270061a2bed777f75d52bef2f86a855
Branches Tags
tuanta:MinhNN tuanta:master tuanta:tunztunzz

2 Commits
67a80c1498 ... f3ad6e02f2

Author SHA1 Message Date
MinhNN
f3ad6e02f2 update NetDetailModal 2025-11-03 19:49:42 +07:00
Tran Anh Tuan
efe9749a8e sửa lỗi polygon không bị xóa ở map 2025-11-03 10:33:30 +07:00
25 changed files with 1289 additions and 948 deletions
Expand all files Collapse all files

652
app/(tabs)/index.tsx
View File

@@ -1,369 +1,188 @@
import { PolygonWithLabel } from "@/components/map/PolygonWithLabel";
import { PolylineWithLabel } from "@/components/map/PolylineWithLabel";
import { showToastError } from "@/config";
import {
AUTO_REFRESH_INTERVAL,
ENTITY,
EVENT_ALARM_DATA,
EVENT_BANZONE_DATA,
EVENT_ENTITY_DATA,
EVENT_GPS_DATA,
EVENT_TRACK_POINTS_DATA,
IOS_PLATFORM,
LIGHT_THEME,
} from "@/constants";
import {
queryAlarm,
queryEntities,
queryGpsData,
queryTrackPoints,
} from "@/controller/DeviceController";
import { useColorScheme } from "@/hooks/use-color-scheme.web";
import { usePlatform } from "@/hooks/use-platform";
import {
getAlarmEventBus,
getBanzonesEventBus,
getEntitiesEventBus,
getGpsEventBus,
getTrackPointsEventBus,
} from "@/services/device_events";
import { getShipIcon } from "@/services/map_service";
import { useBanzones } from "@/state/use-banzones";
import eventBus from "@/utils/eventBus";
import {
convertWKTLineStringToLatLngArray,
convertWKTtoLatLngString,
} from "@/utils/geom";
import { Image as ExpoImage } from "expo-image";
import { useEffect, useRef, useState } from "react";
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
import {
Animated,
Image as RNImage,
StyleSheet,
Text,
TouchableOpacity,
View,
} from "react-native";
import MapView, { Circle, Marker } from "react-native-maps";
import { SafeAreaProvider } from "react-native-safe-area-context";
const testPolyline =
"MULTIPOLYGON(((108.7976074 17.5392966,110.390625 14.2217886,109.4677734 10.8548863,112.9227161 10.6933337,116.4383411 12.565622,116.8997669 17.0466095,109.8685169 17.8013229,108.7973446 17.5393669,108.7976074 17.5392966)))";
import { SafeAreaView } from "react-native-safe-area-context";
export default function HomeScreen() {
const [gpsData, setGpsData] = useState<Model.GPSResonse | null>(null);
const [alarmData, setAlarmData] = useState<Model.AlarmResponse | null>(null);
const [trackPoints, setTrackPoints] = useState<Model.ShipTrackPoint[] | null>(
null
const [gpsData, setGpsData] = useState<Model.GPSResonse | undefined>(
undefined
);
const [alarmData, setAlarmData] = useState<Model.AlarmResponse | null>(null);
const [entityData, setEntityData] = useState<
Model.TransformedEntity[] | null
>(null);
const [banzoneData, setBanzoneData] = useState<Model.Zone[] | null>(null);
const [trackPointsData, setTrackPointsData] = useState<
Model.ShipTrackPoint[] | null
>(null);
const [circleRadius, setCircleRadius] = useState(100);
const [zoomLevel, setZoomLevel] = useState(10);
const [isFirstLoad, setIsFirstLoad] = useState(true);
const [polylineCoordinates, setPolylineCoordinates] = useState<
number[][] | null
>(null);
number[][] | undefined
>(undefined);
const [polygonCoordinates, setPolygonCoordinates] = useState<
number[][][] | null
>(null);
const [, setZoneGeometries] = useState<Map<string, any>>(new Map());
const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
number[][][] | undefined
>(undefined);
const platform = usePlatform();
const theme = useColorScheme();
const { banzones, getBanzone } = useBanzones();
const banzonesRef = useRef(banzones);
const scale = useRef(new Animated.Value(0)).current;
const opacity = useRef(new Animated.Value(1)).current;
// console.log("Platform: ", platform);
// console.log("Theme: ", theme);
const getGpsData = async () => {
try {
const response = await queryGpsData();
// console.log("GpsData: ", response.data);
// console.log(
// "Heading value:",
// response.data?.h,
// "Type:",
// typeof response.data?.h
// );
setGpsData(response.data);
} catch (error) {
console.error("Error fetching GPS data:", error);
showToastError("Lỗi", "Không thể lấy dữ liệu GPS");
}
};
const drawPolyline = () => {
const data = convertWKTtoLatLngString(testPolyline);
console.log("Data: ", data);
// setPolygonCoordinates(data[0]);
// ;
// console.log("Banzones: ", banzones.length);
};
// const [number, setNumber] = useState(0);
useEffect(() => {
banzonesRef.current = banzones;
}, [banzones]);
getGpsEventBus();
getAlarmEventBus();
getEntitiesEventBus();
getBanzonesEventBus();
getTrackPointsEventBus();
const queryGpsData = (gpsData: Model.GPSResonse) => {
setGpsData(gpsData);
};
const queryAlarmData = (alarmData: Model.AlarmResponse) => {
// console.log("Alarm Data: ", alarmData.alarms.length);
setAlarmData(alarmData);
};
const queryEntityData = (entityData: Model.TransformedEntity[]) => {
// console.log("Entities Length Data: ", entityData.length);
const areGeometriesEqual = (
left?: {
geom_type: number;
geom_lines?: string | null;
geom_poly?: string | null;
},
right?: {
geom_type: number;
geom_lines?: string | null;
geom_poly?: string | null;
}
) => {
if (!left && !right) {
return true;
}
setEntityData(entityData);
};
const queryBanzonesData = (banzoneData: Model.Zone[]) => {
// console.log("Banzone Data: ", banzoneData.length);
if (!left || !right) {
return false;
}
setBanzoneData(banzoneData);
};
const queryTrackPointsData = (TrackPointsData: Model.ShipTrackPoint[]) => {
// console.log("TrackPoints Data: ", TrackPointsData.length);
setTrackPointsData(TrackPointsData);
};
return (
left.geom_type === right.geom_type &&
(left.geom_lines || "") === (right.geom_lines || "") &&
(left.geom_poly || "") === (right.geom_poly || "")
);
};
eventBus.on(EVENT_GPS_DATA, queryGpsData);
console.log("Registering event handlers in HomeScreen");
eventBus.on(EVENT_GPS_DATA, queryGpsData);
console.log("Subscribed to EVENT_GPS_DATA");
eventBus.on(EVENT_ALARM_DATA, queryAlarmData);
console.log("Subscribed to EVENT_ALARM_DATA");
eventBus.on(EVENT_ENTITY_DATA, queryEntityData);
console.log("Subscribed to EVENT_ENTITY_DATA");
eventBus.on(EVENT_TRACK_POINTS_DATA, queryTrackPointsData);
console.log("Subscribed to EVENT_TRACK_POINTS_DATA");
eventBus.once(EVENT_BANZONE_DATA, queryBanzonesData);
console.log("Subscribed once to EVENT_BANZONE_DATA");
const areCoordinatesEqual = (
current: number[][] | null,
next: number[][] | null
) => {
if (!current || !next || current.length !== next.length) {
return false;
}
return current.every(
(coord, index) =>
coord[0] === next[index][0] && coord[1] === next[index][1]
);
};
const areMultiPolygonCoordinatesEqual = (
current: number[][][] | null,
next: number[][][] | null
) => {
if (!current || !next || current.length !== next.length) {
return false;
}
return current.every((polygon, polyIndex) => {
const nextPolygon = next[polyIndex];
if (!nextPolygon || polygon.length !== nextPolygon.length) {
return false;
}
return polygon.every(
(coord, coordIndex) =>
coord[0] === nextPolygon[coordIndex][0] &&
coord[1] === nextPolygon[coordIndex][1]
);
});
};
const getAlarmData = async () => {
try {
const response = await queryAlarm();
// console.log("AlarmData: ", response.data);
setAlarmData(response.data);
} catch (error) {
console.error("Error fetching Alarm Data: ", error);
showToastError("Lỗi", "Không thể lấy dữ liệu báo động");
}
};
const getEntities = async () => {
try {
const entities = await queryEntities();
if (!entities) {
// Clear tất cả khu vực khi không có dữ liệu
setPolylineCoordinates(null);
setPolygonCoordinates(null);
setZoneGeometries(new Map());
return;
}
const currentBanzones = banzonesRef.current || [];
let nextPolyline: number[][] | null = null;
let nextMultiPolygon: number[][][] | null = null;
let foundPolyline = false;
let foundPolygon = false;
// Process zones để tìm geometries
for (const entity of entities) {
if (entity.id !== ENTITY.ZONE_ALARM_LIST) {
continue;
}
let zones: any[] = [];
try {
zones = entity.valueString ? JSON.parse(entity.valueString) : [];
} catch (parseError) {
console.error("Error parsing zone list:", parseError);
continue;
}
// Nếu danh sách zone rỗng, clear tất cả
if (zones.length === 0) {
setPolylineCoordinates(null);
setPolygonCoordinates(null);
setZoneGeometries(new Map());
return;
}
for (const zone of zones) {
const geom = currentBanzones.find((b) => b.id === zone.zone_id);
if (!geom) {
continue;
}
const { geom_type, geom_lines, geom_poly } = geom.geom || {};
if (typeof geom_type !== "number") {
continue;
}
if (geom_type === 2) {
foundPolyline = true;
const coordinates = convertWKTLineStringToLatLngArray(
geom_lines || ""
);
if (coordinates.length > 0) {
nextPolyline = coordinates;
}
} else if (geom_type === 1) {
foundPolygon = true;
const coordinates = convertWKTtoLatLngString(geom_poly || "");
if (coordinates.length > 0) {
console.log("Polygon Coordinate: ", coordinates);
nextMultiPolygon = coordinates;
}
}
}
}
// Update state sau khi đã process xong
setZoneGeometries((prevGeometries) => {
const updated = new Map(prevGeometries);
let hasChanges = false;
for (const entity of entities) {
if (entity.id !== ENTITY.ZONE_ALARM_LIST) {
continue;
}
let zones: any[] = [];
try {
zones = entity.valueString ? JSON.parse(entity.valueString) : [];
} catch {
continue;
}
if (zones.length === 0) {
if (updated.size > 0) {
hasChanges = true;
updated.clear();
}
break;
}
for (const zone of zones) {
const geom = currentBanzones.find((b) => b.id === zone.zone_id);
if (!geom) {
continue;
}
const { geom_type, geom_lines, geom_poly } = geom.geom || {};
if (typeof geom_type !== "number") {
continue;
}
const key = `${zone.zone_id}_${geom_type}`;
const newGeomData = { geom_type, geom_lines, geom_poly };
const oldGeom = updated.get(key);
if (!areGeometriesEqual(oldGeom, newGeomData)) {
hasChanges = true;
updated.set(key, newGeomData);
console.log("Geometry changed", { key, oldGeom, newGeomData });
}
}
}
return hasChanges ? updated : prevGeometries;
});
// Cập nhật hoặc clear polyline
if (foundPolyline && nextPolyline) {
setPolylineCoordinates((prev) =>
areCoordinatesEqual(prev, nextPolyline) ? prev : nextPolyline
);
} else if (!foundPolyline) {
console.log("Hết cảnh báo qua polyline");
setPolylineCoordinates(null);
}
// Cập nhật hoặc clear polygon
if (foundPolygon && nextMultiPolygon) {
setPolygonCoordinates((prev) =>
areMultiPolygonCoordinatesEqual(prev, nextMultiPolygon)
? prev
: nextMultiPolygon
);
} else if (!foundPolygon) {
console.log("Hết cảnh báo qua polygon");
setPolygonCoordinates(null);
}
} catch (error) {
console.error("Error fetching Entities: ", error);
// Clear tất cả khi có lỗi
setPolylineCoordinates(null);
setPolygonCoordinates(null);
setZoneGeometries(new Map());
}
};
const getShipTrackPoints = async () => {
try {
const response = await queryTrackPoints();
// console.log("TrackPoints Data Length: ", response.data.length);
setTrackPoints(response.data);
} catch (error) {
console.error("Error fetching TrackPoints Data: ", error);
showToastError("Lỗi", "Không thể lấy lịch sử di chuyển");
}
};
const fetchAllData = async () => {
await Promise.all([
getGpsData(),
getAlarmData(),
getShipTrackPoints(),
getEntities(),
]);
};
const setupAutoRefresh = () => {
// Clear existing interval if any
if (intervalRef.current) {
clearInterval(intervalRef.current);
}
// Set new interval to refresh data every 5 seconds
// Không fetch banzones vì dữ liệu không thay đổi
intervalRef.current = setInterval(async () => {
// console.log("Auto-refreshing data...");
await fetchAllData();
}, AUTO_REFRESH_INTERVAL);
};
const handleMapReady = () => {
// console.log("Map loaded successfully!");
// Gọi fetchAllData ngay lập tức (không cần đợi banzones)
fetchAllData();
setupAutoRefresh();
// Set isFirstLoad to false sau khi map ready để chỉ zoom lần đầu tiên
setTimeout(() => {
setIsFirstLoad(false);
}, 2000);
};
// Cleanup interval on component unmount
useEffect(() => {
return () => {
if (intervalRef.current) {
clearInterval(intervalRef.current);
}
console.log("Unregistering event handlers in HomeScreen");
eventBus.off(EVENT_GPS_DATA, queryGpsData);
console.log("Unsubscribed EVENT_GPS_DATA");
eventBus.off(EVENT_ALARM_DATA, queryAlarmData);
console.log("Unsubscribed EVENT_ALARM_DATA");
eventBus.off(EVENT_ENTITY_DATA, queryEntityData);
console.log("Unsubscribed EVENT_ENTITY_DATA");
eventBus.off(EVENT_TRACK_POINTS_DATA, queryTrackPointsData);
console.log("Unsubscribed EVENT_TRACK_POINTS_DATA");
};
}, []);
useEffect(() => {
getBanzone();
}, [getBanzone]);
if (polylineCoordinates !== undefined) {
console.log("Polyline Khac null");
} else {
console.log("Polyline null");
}
}, [polylineCoordinates]);
useEffect(() => {
setPolylineCoordinates(undefined);
setPolygonCoordinates(undefined);
if (!entityData) return;
if (!banzoneData) return;
for (const entity of entityData) {
if (entity.id !== ENTITY.ZONE_ALARM_LIST) {
continue;
}
let zones: any[] = [];
try {
zones = entity.valueString ? JSON.parse(entity.valueString) : [];
} catch (parseError) {
console.error("Error parsing zone list:", parseError);
continue;
}
// Nếu danh sách zone rỗng, clear tất cả
if (zones.length === 0) {
setPolylineCoordinates(undefined);
setPolygonCoordinates(undefined);
return;
}
for (const zone of zones) {
console.log("Zone Data: ", zone);
const geom = banzoneData.find((b) => b.id === zone.zone_id);
if (!geom) {
continue;
}
const { geom_type, geom_lines, geom_poly } = geom.geom || {};
if (typeof geom_type !== "number") {
continue;
}
if (geom_type === 2) {
// if(oldEntityData.find(e => e.id === ))
// foundPolyline = true;
const coordinates = convertWKTLineStringToLatLngArray(
geom_lines || ""
);
if (coordinates.length > 0) {
setPolylineCoordinates(coordinates);
}
} else if (geom_type === 1) {
// foundPolygon = true;
const coordinates = convertWKTtoLatLngString(geom_poly || "");
if (coordinates.length > 0) {
console.log("Polygon Coordinate: ", coordinates);
setPolygonCoordinates(coordinates);
}
}
}
}
}, [banzoneData, entityData]);
// Hàm tính radius cố định khi zoom change
const calculateRadiusFromZoom = (zoom: number) => {
@@ -410,16 +229,51 @@ export default function HomeScreen() {
};
};
const handleMapReady = () => {
setTimeout(() => {
setIsFirstLoad(false);
}, 2000);
};
useEffect(() => {
if (alarmData?.level === 3) {
const loop = Animated.loop(
Animated.sequence([
Animated.parallel([
Animated.timing(scale, {
toValue: 3, // nở to 3 lần
duration: 1500,
useNativeDriver: true,
}),
Animated.timing(opacity, {
toValue: 0, // mờ dần
duration: 1500,
useNativeDriver: true,
}),
]),
Animated.parallel([
Animated.timing(scale, {
toValue: 0,
duration: 0,
useNativeDriver: true,
}),
Animated.timing(opacity, {
toValue: 1,
duration: 0,
useNativeDriver: true,
}),
]),
])
);
loop.start();
return () => loop.stop();
}
}, [alarmData?.level, scale, opacity]);
return (
<SafeAreaProvider style={styles.container}>
{banzones.length > 0 && (
<Text className="hidden">Banzones loaded: {banzones.length}</Text>
)}
<SafeAreaView edges={["top"]} style={styles.container}>
<MapView
onMapReady={handleMapReady}
onPoiClick={(point) => {
console.log("Poi clicked: ", point.nativeEvent);
}}
onRegionChangeComplete={handleRegionChangeComplete}
style={styles.map}
// initialRegion={getMapRegion()}
@@ -428,11 +282,12 @@ export default function HomeScreen() {
showsBuildings={false}
showsIndoors={false}
loadingEnabled={true}
mapType="standard"
mapType={platform === IOS_PLATFORM ? "mutedStandard" : "standard"}
rotateEnabled={false}
>
{trackPoints &&
trackPoints.length > 0 &&
trackPoints.map((point, index) => {
{trackPointsData &&
trackPointsData.length > 0 &&
trackPointsData.map((point, index) => {
// console.log(`Rendering circle ${index}:`, point);
return (
<Circle
@@ -442,14 +297,14 @@ export default function HomeScreen() {
longitude: point.lon,
}}
zIndex={50}
radius={circleRadius}
fillColor="rgba(16, 85, 201, 0.6)"
strokeColor="rgba(16, 85, 201, 0.8)"
radius={platform === IOS_PLATFORM ? 200 : 50}
strokeColor="rgba(16, 85, 201, 0.7)"
fillColor="rgba(16, 85, 201, 0.7)"
strokeWidth={2}
/>
);
})}
{polylineCoordinates && (
{polylineCoordinates !== undefined && (
<PolylineWithLabel
coordinates={polylineCoordinates.map((coord) => ({
latitude: coord[0],
@@ -462,7 +317,7 @@ export default function HomeScreen() {
zIndex={50}
/>
)}
{polygonCoordinates && polygonCoordinates.length > 0 && (
{polygonCoordinates !== undefined && (
<>
{polygonCoordinates.map((polygon, index) => {
// Tạo key ổn định từ tọa độ đầu tiên của polygon
@@ -472,6 +327,17 @@ export default function HomeScreen() {
: `polygon-${index}`;
return (
// <Polygon
// key={polygonKey}
// coordinates={polygon.map((coords) => ({
// latitude: coords[0],
// longitude: coords[1],
// }))}
// fillColor="rgba(16, 85, 201, 0.6)"
// strokeColor="rgba(16, 85, 201, 0.8)"
// strokeWidth={2}
// zIndex={50}
// />
<PolygonWithLabel
key={polygonKey}
coordinates={polygon.map((coords) => ({
@@ -490,7 +356,7 @@ export default function HomeScreen() {
})}
</>
)}
{gpsData && (
{gpsData !== undefined && (
<Marker
coordinate={{
latitude: gpsData.lat,
@@ -501,34 +367,63 @@ export default function HomeScreen() {
? "Tàu của mình - iOS"
: "Tàu của mình - Android"
}
zIndex={100}
anchor={{ x: 0.5, y: 0.5 }}
zIndex={200}
anchor={
platform === IOS_PLATFORM
? { x: 0.5, y: 0.5 }
: { x: 0.5, y: 0.4 }
}
>
<View className="w-8 h-8 items-center justify-center">
<ExpoImage
source={getShipIcon(alarmData?.level || 0, gpsData.fishing)}
style={{
width: 32,
height: 32,
transform: [
{
rotate: `${
typeof gpsData.h === "number" && !isNaN(gpsData.h)
? gpsData.h
: 0
}deg`,
},
],
}}
/>
<View style={styles.pingContainer}>
{alarmData?.level === 3 && (
<Animated.View
style={[
styles.pingCircle,
{
transform: [{ scale }],
opacity,
},
]}
/>
)}
<RNImage
source={(() => {
const icon = getShipIcon(
alarmData?.level || 0,
gpsData.fishing
);
return typeof icon === "string" ? { uri: icon } : icon;
})()}
style={{
width: 32,
height: 32,
transform: [
{
rotate: `${
typeof gpsData.h === "number" && !isNaN(gpsData.h)
? gpsData.h
: 0
}deg`,
},
],
}}
/>
</View>
</View>
</Marker>
)}
</MapView>
<TouchableOpacity style={styles.button} onPress={drawPolyline}>
<TouchableOpacity
style={styles.button}
onPress={() => {
setPolygonCoordinates(undefined);
setPolylineCoordinates(undefined);
}}
>
<Text style={styles.buttonText}>Get GPS Data</Text>
</TouchableOpacity>
</SafeAreaProvider>
</SafeAreaView>
);
}
@@ -540,7 +435,7 @@ const styles = StyleSheet.create({
flex: 1,
},
button: {
display: "none",
// display: "none",
position: "absolute",
top: 50,
right: 20,
@@ -562,20 +457,25 @@ const styles = StyleSheet.create({
fontSize: 16,
fontWeight: "600",
},
titleContainer: {
flexDirection: "row",
pingContainer: {
width: 32,
height: 32,
alignItems: "center",
gap: 8,
justifyContent: "center",
overflow: "visible",
},
stepContainer: {
gap: 8,
marginBottom: 8,
},
reactLogo: {
height: 178,
width: 290,
bottom: 0,
left: 0,
pingCircle: {
position: "absolute",
width: 40,
height: 40,
borderRadius: 20,
backgroundColor: "#ED3F27",
},
centerDot: {
width: 20,
height: 20,
borderRadius: 10,
backgroundColor: "#0096FF",
},
});

27
components/map/PolygonWithLabel.tsx
View File

@@ -1,5 +1,5 @@
import { getPolygonCenter } from "@/utils/polyline";
import React, { memo } from "react";
import React from "react";
import { StyleSheet, Text, View } from "react-native";
import { Marker, Polygon } from "react-native-maps";
@@ -20,7 +20,7 @@ export interface PolygonWithLabelProps {
/**
* Component render Polygon kèm Label/Text ở giữa
*/
const PolygonWithLabelComponent: React.FC<PolygonWithLabelProps> = ({
export const PolygonWithLabel: React.FC<PolygonWithLabelProps> = ({
coordinates,
label,
content,
@@ -65,7 +65,7 @@ const PolygonWithLabelComponent: React.FC<PolygonWithLabelProps> = ({
{label && (
<Marker
coordinate={centerPoint}
zIndex={200}
zIndex={50}
tracksViewChanges={false}
anchor={{ x: 0.5, y: 0.5 }}
>
@@ -142,24 +142,3 @@ const styles = StyleSheet.create({
opacity: 0.95,
},
});
// Export memoized component để tránh re-render không cần thiết
export const PolygonWithLabel = memo(
PolygonWithLabelComponent,
(prev, next) => {
// Custom comparison: chỉ re-render khi coordinates, label, content hoặc zoomLevel thay đổi
return (
prev.coordinates.length === next.coordinates.length &&
prev.coordinates.every(
(coord, index) =>
coord.latitude === next.coordinates[index]?.latitude &&
coord.longitude === next.coordinates[index]?.longitude
) &&
prev.label === next.label &&
prev.content === next.content &&
prev.zoomLevel === next.zoomLevel &&
prev.fillColor === next.fillColor &&
prev.strokeColor === next.strokeColor
);
}
);

23
components/map/PolylineWithLabel.tsx
View File

@@ -2,7 +2,7 @@ import {
calculateTotalDistance,
getMiddlePointOfPolyline,
} from "@/utils/polyline";
import React, { memo } from "react";
import React from "react";
import { StyleSheet, Text, View } from "react-native";
import { Marker, Polyline } from "react-native-maps";
@@ -21,7 +21,7 @@ export interface PolylineWithLabelProps {
/**
* Component render Polyline kèm Label/Text ở giữa
*/
const PolylineWithLabelComponent: React.FC<PolylineWithLabelProps> = ({
export const PolylineWithLabel: React.FC<PolylineWithLabelProps> = ({
coordinates,
label,
strokeColor = "#FF5733",
@@ -103,22 +103,3 @@ const styles = StyleSheet.create({
textAlign: "center",
},
});
// Export memoized component để tránh re-render không cần thiết
export const PolylineWithLabel = memo(
PolylineWithLabelComponent,
(prev, next) => {
// Custom comparison: chỉ re-render khi coordinates, label hoặc showDistance thay đổi
return (
prev.coordinates.length === next.coordinates.length &&
prev.coordinates.every(
(coord, index) =>
coord.latitude === next.coordinates[index]?.latitude &&
coord.longitude === next.coordinates[index]?.longitude
) &&
prev.label === next.label &&
prev.showDistance === next.showDistance &&
prev.strokeColor === next.strokeColor
);
}
);

2
components/tripInfo/CrewListTable.tsx
View File

@@ -128,7 +128,7 @@ const CrewListTable: React.FC = () => {
<Text style={styles.totalCollapsed}>{tongThanhVien}</Text>
)}
<IconSymbol
name={collapsed ? "arrowshape.down.fill" : "arrowshape.up.fill"}
name={collapsed ? "chevron.down" : "chevron.up"}
size={16}
color="#000"
/>

2
components/tripInfo/FishingToolsList.tsx
View File

@@ -48,7 +48,7 @@ const FishingToolsTable: React.FC = () => {
<Text style={styles.title}>Danh sách ngư cụ</Text>
{collapsed && <Text style={styles.totalCollapsed}>{tongSoLuong}</Text>}
<IconSymbol
name={collapsed ? "arrowshape.down.fill" : "arrowshape.up.fill"}
name={collapsed ? "chevron.down" : "chevron.up"}
size={16}
color="#000"
/>

4
components/tripInfo/NetListTable.tsx
View File

@@ -1,7 +1,7 @@
import { IconSymbol } from "@/components/ui/icon-symbol";
import React, { useRef, useState } from "react";
import { Animated, Text, TouchableOpacity, View } from "react-native";
import NetDetailModal from "./modal/NetDetailModal";
import NetDetailModal from "./modal/NetDetailModal/NetDetailModal";
import styles from "./style/NetListTable.styles";
// ---------------------------
@@ -217,7 +217,7 @@ const NetListTable: React.FC = () => {
<Text style={styles.title}>Danh sách mẻ lưới</Text>
{collapsed && <Text style={styles.totalCollapsed}>{tongSoMe}</Text>}
<IconSymbol
name={collapsed ? "arrowshape.down.fill" : "arrowshape.up.fill"}
name={collapsed ? "chevron.down" : "chevron.up"}
size={16}
color="#000"
/>

2
components/tripInfo/TripCostTable.tsx
View File

@@ -107,7 +107,7 @@ const TripCostTable: React.FC = () => {
</Text>
)}
<IconSymbol
name={collapsed ? "arrowshape.down.fill" : "arrowshape.up.fill"}
name={collapsed ? "chevron.down" : "chevron.up"}
size={15}
color="#000000"
/>

515
components/tripInfo/modal/NetDetailModal.tsx
View File

@@ -1,515 +0,0 @@
import { IconSymbol } from "@/components/ui/icon-symbol";
import React, { useState } from "react";
import {
Modal,
ScrollView,
Text,
TextInput,
TouchableOpacity,
View,
} from "react-native";
import styles from "./style/NetDetailModal.styles";
// ---------------------------
// 🧩 Interface
// ---------------------------
interface FishCatch {
fish_species_id: number;
fish_name: string;
catch_number: number;
catch_unit: string;
fish_size: number;
fish_rarity: number;
fish_condition: string;
gear_usage: string;
}
interface NetDetail {
id: string;
stt: string;
trangThai: string;
thoiGianBatDau?: string;
thoiGianKetThuc?: string;
viTriHaThu?: string;
viTriThuLuoi?: string;
doSauHaThu?: string;
doSauThuLuoi?: string;
catchList?: FishCatch[];
ghiChu?: string;
}
interface NetDetailModalProps {
visible: boolean;
onClose: () => void;
netData: NetDetail | null;
}
// ---------------------------
// 🧵 Component Modal
// ---------------------------
const NetDetailModal: React.FC<NetDetailModalProps> = ({
visible,
onClose,
netData,
}) => {
const [isEditing, setIsEditing] = useState(false);
const [editableCatchList, setEditableCatchList] = useState<FishCatch[]>([]);
const [selectedFishIndex, setSelectedFishIndex] = useState<number | null>(
null
);
const [selectedUnitIndex, setSelectedUnitIndex] = useState<number | null>(
null
);
const [selectedConditionIndex, setSelectedConditionIndex] = useState<
number | null
>(null);
// Khởi tạo dữ liệu khi netData thay đổi
React.useEffect(() => {
if (netData?.catchList) {
setEditableCatchList(netData.catchList);
}
}, [netData]);
if (!netData) return null;
const isCompleted = netData.trangThai === "Đã hoàn thành";
// Danh sách tên cá có sẵn
const fishNameOptions = [
"Cá chim trắng",
"Cá song đỏ",
"Cá hồng",
"Cá nục",
"Cá ngừ đại dương",
"Cá mú trắng",
"Cá hồng phớn",
"Cá hổ Napoleon",
"Cá nược",
"Cá đuối quạt",
];
// Danh sách đơn vị
const unitOptions = ["kg", "con", "tấn"];
// Danh sách tình trạng
const conditionOptions = ["Còn sống", "Chết", "Bị thương"];
const handleEdit = () => {
setIsEditing(!isEditing);
};
const handleSave = () => {
setIsEditing(false);
// TODO: Save data to backend
console.log("Saved catch list:", editableCatchList);
};
const handleCancel = () => {
setIsEditing(false);
setEditableCatchList(netData.catchList || []);
};
const updateCatchItem = (
index: number,
field: keyof FishCatch,
value: string | number
) => {
setEditableCatchList((prev) =>
prev.map((item, i) => {
if (i === index) {
const updatedItem = { ...item };
if (
field === "catch_number" ||
field === "fish_size" ||
field === "fish_rarity"
) {
updatedItem[field] = Number(value) || 0;
} else {
updatedItem[field] = value as never;
}
return updatedItem;
}
return item;
})
);
};
const totalCatch = editableCatchList.reduce(
(sum, item) => sum + item.catch_number,
0
);
const infoItems = [
{ label: "Số thứ tự", value: netData.stt },
{
label: "Trạng thái",
value: netData.trangThai,
isStatus: true,
},
{
label: "Thời gian bắt đầu",
value: netData.thoiGianBatDau || "Chưa cập nhật",
},
{
label: "Thời gian kết thúc",
value: netData.thoiGianKetThuc || "Chưa cập nhật",
},
{
label: "Vị trí hạ thu",
value: netData.viTriHaThu || "Chưa cập nhật",
},
{
label: "Vị trí thu lưới",
value: netData.viTriThuLuoi || "Chưa cập nhật",
},
{
label: "Độ sâu hạ thu",
value: netData.doSauHaThu || "Chưa cập nhật",
},
{
label: "Độ sâu thu lưới",
value: netData.doSauThuLuoi || "Chưa cập nhật",
},
];
return (
<Modal
visible={visible}
animationType="slide"
presentationStyle="pageSheet"
onRequestClose={onClose}
>
<View style={styles.container}>
{/* Header */}
<View style={styles.header}>
<Text style={styles.title}>Chi tiết mẻ lưới</Text>
<View style={styles.headerButtons}>
{isEditing ? (
<>
<TouchableOpacity
onPress={handleCancel}
style={styles.cancelButton}
>
<Text style={styles.cancelButtonText}>Hủy</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={handleSave}
style={styles.saveButton}
>
<Text style={styles.saveButtonText}>Lưu</Text>
</TouchableOpacity>
</>
) : (
<TouchableOpacity onPress={handleEdit} style={styles.editButton}>
<View style={styles.editIconButton}>
<IconSymbol
name="pencil"
size={28}
color="#fff"
weight="heavy"
/>
</View>
</TouchableOpacity>
)}
<TouchableOpacity onPress={onClose} style={styles.closeButton}>
<View style={styles.closeIconButton}>
<IconSymbol name="xmark" size={28} color="#fff" />
</View>
</TouchableOpacity>
</View>
</View>
{/* Content */}
<ScrollView style={styles.content}>
{/* Thông tin chung */}
<View style={styles.infoCard}>
{infoItems.map((item, index) => (
<View key={index} style={styles.infoRow}>
<Text style={styles.infoLabel}>{item.label}</Text>
{item.isStatus ? (
<View
style={[
styles.statusBadge,
isCompleted
? styles.statusBadgeCompleted
: styles.statusBadgeInProgress,
]}
>
<Text
style={[
styles.statusBadgeText,
isCompleted
? styles.statusBadgeTextCompleted
: styles.statusBadgeTextInProgress,
]}
>
{item.value}
</Text>
</View>
) : (
<Text style={styles.infoValue}>{item.value}</Text>
)}
</View>
))}
</View>
{/* Danh sách cá bắt được */}
<View style={styles.sectionHeader}>
<Text style={styles.sectionTitle}>Danh sách cá bắt được</Text>
<Text style={styles.totalCatchText}>
Tổng: {totalCatch.toLocaleString()} kg
</Text>
</View>
{editableCatchList.map((fish, index) => (
<View key={index} style={styles.fishCard}>
{/* Tên cá - Select */}
<View style={[styles.fieldGroup, { zIndex: 1000 - index }]}>
<Text style={styles.label}>Tên cá</Text>
{isEditing ? (
<View style={{ zIndex: 1000 - index }}>
<TouchableOpacity
style={styles.selectButton}
onPress={() =>
setSelectedFishIndex(
selectedFishIndex === index ? null : index
)
}
>
<Text style={styles.selectButtonText}>
{fish.fish_name}
</Text>
<IconSymbol
name={
selectedFishIndex === index
? "chevron.up"
: "chevron.down"
}
size={16}
color="#666"
/>
</TouchableOpacity>
{selectedFishIndex === index && (
<ScrollView
style={styles.optionsList}
nestedScrollEnabled={true}
>
{fishNameOptions.map((option, optIndex) => (
<TouchableOpacity
key={optIndex}
style={styles.optionItem}
onPress={() => {
updateCatchItem(index, "fish_name", option);
setSelectedFishIndex(null);
}}
>
<Text style={styles.optionText}>{option}</Text>
</TouchableOpacity>
))}
</ScrollView>
)}
</View>
) : (
<Text style={styles.infoValue}>{fish.fish_name}</Text>
)}
</View>
{/* Số lượng & Đơn vị */}
<View style={styles.rowGroup}>
<View style={[styles.fieldGroup, { flex: 1, marginRight: 8 }]}>
<Text style={styles.label}>Số lượng</Text>
{isEditing ? (
<TextInput
style={styles.input}
value={String(fish.catch_number)}
onChangeText={(value) =>
updateCatchItem(index, "catch_number", value)
}
keyboardType="numeric"
placeholder="0"
/>
) : (
<Text style={styles.infoValue}>{fish.catch_number}</Text>
)}
</View>
<View
style={[
styles.fieldGroup,
{ flex: 1, marginLeft: 8, zIndex: 900 - index },
]}
>
<Text style={styles.label}>Đơn vị</Text>
{isEditing ? (
<View style={{ zIndex: 900 - index }}>
<TouchableOpacity
style={styles.selectButton}
onPress={() =>
setSelectedUnitIndex(
selectedUnitIndex === index ? null : index
)
}
>
<Text style={styles.selectButtonText}>
{fish.catch_unit}
</Text>
<IconSymbol
name={
selectedUnitIndex === index
? "chevron.up"
: "chevron.down"
}
size={16}
color="#666"
/>
</TouchableOpacity>
{selectedUnitIndex === index && (
<ScrollView
style={styles.optionsList}
nestedScrollEnabled={true}
>
{unitOptions.map((option, optIndex) => (
<TouchableOpacity
key={optIndex}
style={styles.optionItem}
onPress={() => {
updateCatchItem(index, "catch_unit", option);
setSelectedUnitIndex(null);
}}
>
<Text style={styles.optionText}>{option}</Text>
</TouchableOpacity>
))}
</ScrollView>
)}
</View>
) : (
<Text style={styles.infoValue}>{fish.catch_unit}</Text>
)}
</View>
</View>
{/* Kích thước & Độ hiếm */}
<View style={styles.rowGroup}>
<View style={[styles.fieldGroup, { flex: 1, marginRight: 8 }]}>
<Text style={styles.label}>Kích thước (cm)</Text>
{isEditing ? (
<TextInput
style={styles.input}
value={String(fish.fish_size)}
onChangeText={(value) =>
updateCatchItem(index, "fish_size", value)
}
keyboardType="numeric"
placeholder="0"
/>
) : (
<Text style={styles.infoValue}>{fish.fish_size} cm</Text>
)}
</View>
<View style={[styles.fieldGroup, { flex: 1, marginLeft: 8 }]}>
<Text style={styles.label}>Độ hiếm</Text>
{isEditing ? (
<TextInput
style={styles.input}
value={String(fish.fish_rarity)}
onChangeText={(value) =>
updateCatchItem(index, "fish_rarity", value)
}
keyboardType="numeric"
placeholder="1-5"
/>
) : (
<Text style={styles.infoValue}>{fish.fish_rarity}</Text>
)}
</View>
</View>
{/* Tình trạng */}
<View style={[styles.fieldGroup, { zIndex: 800 - index }]}>
<Text style={styles.label}>Tình trạng</Text>
{isEditing ? (
<View style={{ zIndex: 800 - index }}>
<TouchableOpacity
style={styles.selectButton}
onPress={() =>
setSelectedConditionIndex(
selectedConditionIndex === index ? null : index
)
}
>
<Text style={styles.selectButtonText}>
{fish.fish_condition}
</Text>
<IconSymbol
name={
selectedConditionIndex === index
? "chevron.up"
: "chevron.down"
}
size={16}
color="#666"
/>
</TouchableOpacity>
{selectedConditionIndex === index && (
<ScrollView
style={styles.optionsStatusFishList}
nestedScrollEnabled={true}
>
{conditionOptions.map((option, optIndex) => (
<TouchableOpacity
key={optIndex}
style={styles.optionItem}
onPress={() => {
updateCatchItem(index, "fish_condition", option);
setSelectedConditionIndex(null);
}}
>
<Text style={styles.optionText}>{option}</Text>
</TouchableOpacity>
))}
</ScrollView>
)}
</View>
) : (
<Text style={styles.infoValue}>{fish.fish_condition}</Text>
)}
</View>
{/* Ngư cụ sử dụng */}
<View style={styles.fieldGroup}>
<Text style={styles.label}>Ngư cụ sử dụng</Text>
{isEditing ? (
<TextInput
style={styles.input}
value={fish.gear_usage}
onChangeText={(value) =>
updateCatchItem(index, "gear_usage", value)
}
placeholder="Nhập ngư cụ..."
/>
) : (
<Text style={styles.infoValue}>
{fish.gear_usage || "Không có"}
</Text>
)}
</View>
</View>
))}
{/* Ghi chú */}
{netData.ghiChu && (
<View style={styles.infoCard}>
<View style={styles.infoRow}>
<Text style={styles.infoLabel}>Ghi chú</Text>
<Text style={styles.infoValue}>{netData.ghiChu}</Text>
</View>
</View>
)}
</ScrollView>
</View>
</Modal>
);
};
export default NetDetailModal;

238
components/tripInfo/modal/NetDetailModal/NetDetailModal.tsx Normal file
View File

@@ -0,0 +1,238 @@
import { IconSymbol } from "@/components/ui/icon-symbol";
import React, { useState } from "react";
import { Modal, ScrollView, Text, TouchableOpacity, View } from "react-native";
import styles from "../style/NetDetailModal.styles";
import { CatchSectionHeader } from "./components/CatchSectionHeader";
import { FishCardList } from "./components/FishCardList";
import { InfoSection } from "./components/InfoSection";
import { NotesSection } from "./components/NotesSection";
// ---------------------------
// 🧩 Interface
// ---------------------------
interface FishCatch {
fish_species_id: number;
fish_name: string;
catch_number: number;
catch_unit: string;
fish_size: number;
fish_rarity: number;
fish_condition: string;
gear_usage: string;
}
interface NetDetail {
id: string;
stt: string;
trangThai: string;
thoiGianBatDau?: string;
thoiGianKetThuc?: string;
viTriHaThu?: string;
viTriThuLuoi?: string;
doSauHaThu?: string;
doSauThuLuoi?: string;
catchList?: FishCatch[];
ghiChu?: string;
}
interface NetDetailModalProps {
visible: boolean;
onClose: () => void;
netData: NetDetail | null;
}
// ---------------------------
// 🧵 Component Modal
// ---------------------------
const NetDetailModal: React.FC<NetDetailModalProps> = ({
visible,
onClose,
netData,
}) => {
const [isEditing, setIsEditing] = useState(false);
const [editableCatchList, setEditableCatchList] = useState<FishCatch[]>([]);
const [selectedFishIndex, setSelectedFishIndex] = useState<number | null>(
null
);
const [selectedUnitIndex, setSelectedUnitIndex] = useState<number | null>(
null
);
const [selectedConditionIndex, setSelectedConditionIndex] = useState<
number | null
>(null);
const [expandedFishIndices, setExpandedFishIndices] = useState<number[]>([]);
// Khởi tạo dữ liệu khi netData thay đổi
React.useEffect(() => {
if (netData?.catchList) {
setEditableCatchList(netData.catchList);
}
}, [netData]);
// Reset state khi modal đóng
React.useEffect(() => {
if (!visible) {
setExpandedFishIndices([]);
setSelectedFishIndex(null);
setSelectedUnitIndex(null);
setSelectedConditionIndex(null);
setIsEditing(false);
}
}, [visible]);
if (!netData) return null;
const isCompleted = netData.trangThai === "Đã hoàn thành";
// Danh sách tên cá có sẵn
const fishNameOptions = [
"Cá chim trắng",
"Cá song đỏ",
"Cá hồng",
"Cá nục",
"Cá ngừ đại dương",
"Cá mú trắng",
"Cá hồng phớn",
"Cá hổ Napoleon",
"Cá nược",
"Cá đuối quạt",
];
// Danh sách đơn vị
const unitOptions = ["kg", "con", "tấn"];
// Danh sách tình trạng
const conditionOptions = ["Còn sống", "Chết", "Bị thương"];
const handleEdit = () => {
setIsEditing(!isEditing);
};
const handleSave = () => {
setIsEditing(false);
console.log("Saved catch list:", editableCatchList);
};
const handleCancel = () => {
setIsEditing(false);
setEditableCatchList(netData.catchList || []);
};
const handleToggleExpanded = (index: number) => {
setExpandedFishIndices((prev) =>
prev.includes(index) ? prev.filter((i) => i !== index) : [...prev, index]
);
};
const updateCatchItem = (
index: number,
field: keyof FishCatch,
value: string | number
) => {
setEditableCatchList((prev) =>
prev.map((item, i) => {
if (i === index) {
const updatedItem = { ...item };
if (
field === "catch_number" ||
field === "fish_size" ||
field === "fish_rarity"
) {
updatedItem[field] = Number(value) || 0;
} else {
updatedItem[field] = value as never;
}
return updatedItem;
}
return item;
})
);
};
const totalCatch = editableCatchList.reduce(
(sum, item) => sum + item.catch_number,
0
);
return (
<Modal
visible={visible}
animationType="slide"
presentationStyle="pageSheet"
onRequestClose={onClose}
>
<View style={styles.container}>
{/* Header */}
<View style={styles.header}>
<Text style={styles.title}>Chi tiết mẻ lưới</Text>
<View style={styles.headerButtons}>
{isEditing ? (
<>
<TouchableOpacity
onPress={handleCancel}
style={styles.cancelButton}
>
<Text style={styles.cancelButtonText}>Hủy</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={handleSave}
style={styles.saveButton}
>
<Text style={styles.saveButtonText}>Lưu</Text>
</TouchableOpacity>
</>
) : (
<TouchableOpacity onPress={handleEdit} style={styles.editButton}>
<View style={styles.editIconButton}>
<IconSymbol
name="pencil"
size={28}
color="#fff"
weight="heavy"
/>
</View>
</TouchableOpacity>
)}
<TouchableOpacity onPress={onClose} style={styles.closeButton}>
<View style={styles.closeIconButton}>
<IconSymbol name="xmark" size={28} color="#fff" />
</View>
</TouchableOpacity>
</View>
</View>
{/* Content */}
<ScrollView style={styles.content}>
{/* Thông tin chung */}
<InfoSection netData={netData} isCompleted={isCompleted} />
{/* Danh sách cá bắt được */}
<CatchSectionHeader totalCatch={totalCatch} />
{/* Fish cards */}
<FishCardList
catchList={editableCatchList}
isEditing={isEditing}
expandedFishIndex={expandedFishIndices}
selectedFishIndex={selectedFishIndex}
selectedUnitIndex={selectedUnitIndex}
selectedConditionIndex={selectedConditionIndex}
fishNameOptions={fishNameOptions}
unitOptions={unitOptions}
conditionOptions={conditionOptions}
onToggleExpanded={handleToggleExpanded}
onUpdateCatchItem={updateCatchItem}
setSelectedFishIndex={setSelectedFishIndex}
setSelectedUnitIndex={setSelectedUnitIndex}
setSelectedConditionIndex={setSelectedConditionIndex}
/>
{/* Ghi chú */}
<NotesSection ghiChu={netData.ghiChu} />
</ScrollView>
</View>
</Modal>
);
};
export default NetDetailModal;

20
components/tripInfo/modal/NetDetailModal/components/CatchSectionHeader.tsx Normal file
View File

@@ -0,0 +1,20 @@
import React from "react";
import { Text, View } from "react-native";
import styles from "../../style/NetDetailModal.styles";
interface CatchSectionHeaderProps {
totalCatch: number;
}
export const CatchSectionHeader: React.FC<CatchSectionHeaderProps> = ({
totalCatch,
}) => {
return (
<View style={styles.sectionHeader}>
<Text style={styles.sectionTitle}>Danh sách cá bắt được</Text>
<Text style={styles.totalCatchText}>
Tổng: {totalCatch.toLocaleString()} kg
</Text>
</View>
);
};

202
components/tripInfo/modal/NetDetailModal/components/FishCardForm.tsx Normal file
View File

@@ -0,0 +1,202 @@
import React from "react";
import { Text, TextInput, View } from "react-native";
import styles from "../../style/NetDetailModal.styles";
import { FishSelectDropdown } from "./FishSelectDropdown";
interface FishCatch {
fish_species_id: number;
fish_name: string;
catch_number: number;
catch_unit: string;
fish_size: number;
fish_rarity: number;
fish_condition: string;
gear_usage: string;
}
interface FishCardFormProps {
fish: FishCatch;
index: number;
isEditing: boolean;
fishNameOptions: string[];
unitOptions: string[];
conditionOptions: string[];
selectedFishIndex: number | null;
selectedUnitIndex: number | null;
selectedConditionIndex: number | null;
setSelectedFishIndex: (index: number | null) => void;
setSelectedUnitIndex: (index: number | null) => void;
setSelectedConditionIndex: (index: number | null) => void;
onUpdateCatchItem: (
index: number,
field: keyof FishCatch,
value: string | number
) => void;
}
export const FishCardForm: React.FC<FishCardFormProps> = ({
fish,
index,
isEditing,
fishNameOptions,
unitOptions,
conditionOptions,
selectedFishIndex,
selectedUnitIndex,
selectedConditionIndex,
setSelectedFishIndex,
setSelectedUnitIndex,
setSelectedConditionIndex,
onUpdateCatchItem,
}) => {
return (
<>
{/* Tên cá - Select */}
<View
style={[styles.fieldGroup, { zIndex: 1000 - index }, { marginTop: 15 }]}
>
<Text style={styles.label}>Tên cá</Text>
{isEditing ? (
<FishSelectDropdown
options={fishNameOptions}
selectedValue={fish.fish_name}
isOpen={selectedFishIndex === index}
onToggle={() =>
setSelectedFishIndex(selectedFishIndex === index ? null : index)
}
onSelect={(value: string) => {
onUpdateCatchItem(index, "fish_name", value);
setSelectedFishIndex(null);
}}
zIndex={1000 - index}
/>
) : (
<Text style={styles.infoValue}>{fish.fish_name}</Text>
)}
</View>
{/* Số lượng & Đơn vị */}
<View style={styles.rowGroup}>
<View style={[styles.fieldGroup, { flex: 1, marginRight: 8 }]}>
<Text style={styles.label}>Số lượng</Text>
{isEditing ? (
<TextInput
style={styles.input}
value={String(fish.catch_number)}
onChangeText={(value) =>
onUpdateCatchItem(index, "catch_number", value)
}
keyboardType="numeric"
placeholder="0"
/>
) : (
<Text style={styles.infoValue}>{fish.catch_number}</Text>
)}
</View>
<View
style={[
styles.fieldGroup,
{ flex: 1, marginLeft: 8, zIndex: 900 - index },
]}
>
<Text style={styles.label}>Đơn vị</Text>
{isEditing ? (
<FishSelectDropdown
options={unitOptions}
selectedValue={fish.catch_unit}
isOpen={selectedUnitIndex === index}
onToggle={() =>
setSelectedUnitIndex(selectedUnitIndex === index ? null : index)
}
onSelect={(value: string) => {
onUpdateCatchItem(index, "catch_unit", value);
setSelectedUnitIndex(null);
}}
zIndex={900 - index}
/>
) : (
<Text style={styles.infoValue}>{fish.catch_unit}</Text>
)}
</View>
</View>
{/* Kích thước & Độ hiếm */}
<View style={styles.rowGroup}>
<View style={[styles.fieldGroup, { flex: 1, marginRight: 8 }]}>
<Text style={styles.label}>Kích thước (cm)</Text>
{isEditing ? (
<TextInput
style={styles.input}
value={String(fish.fish_size)}
onChangeText={(value) =>
onUpdateCatchItem(index, "fish_size", value)
}
keyboardType="numeric"
placeholder="0"
/>
) : (
<Text style={styles.infoValue}>{fish.fish_size} cm</Text>
)}
</View>
<View style={[styles.fieldGroup, { flex: 1, marginLeft: 8 }]}>
<Text style={styles.label}>Độ hiếm</Text>
{isEditing ? (
<TextInput
style={styles.input}
value={String(fish.fish_rarity)}
onChangeText={(value) =>
onUpdateCatchItem(index, "fish_rarity", value)
}
keyboardType="numeric"
placeholder="1-5"
/>
) : (
<Text style={styles.infoValue}>{fish.fish_rarity}</Text>
)}
</View>
</View>
{/* Tình trạng */}
<View style={[styles.fieldGroup, { zIndex: 800 - index }]}>
<Text style={styles.label}>Tình trạng</Text>
{isEditing ? (
<FishSelectDropdown
options={conditionOptions}
selectedValue={fish.fish_condition}
isOpen={selectedConditionIndex === index}
onToggle={() =>
setSelectedConditionIndex(
selectedConditionIndex === index ? null : index
)
}
onSelect={(value: string) => {
onUpdateCatchItem(index, "fish_condition", value);
setSelectedConditionIndex(null);
}}
zIndex={800 - index}
styleOverride={styles.optionsStatusFishList}
/>
) : (
<Text style={styles.infoValue}>{fish.fish_condition}</Text>
)}
</View>
{/* Ngư cụ sử dụng */}
<View style={styles.fieldGroup}>
<Text style={styles.label}>Ngư cụ sử dụng</Text>
{isEditing ? (
<TextInput
style={styles.input}
value={fish.gear_usage}
onChangeText={(value) =>
onUpdateCatchItem(index, "gear_usage", value)
}
placeholder="Nhập ngư cụ..."
/>
) : (
<Text style={styles.infoValue}>{fish.gear_usage || "Không có"}</Text>
)}
</View>
</>
);
};

29
components/tripInfo/modal/NetDetailModal/components/FishCardHeader.tsx Normal file
View File

@@ -0,0 +1,29 @@
import React from "react";
import { Text, View } from "react-native";
import styles from "../../style/NetDetailModal.styles";
interface FishCatch {
fish_species_id: number;
fish_name: string;
catch_number: number;
catch_unit: string;
fish_size: number;
fish_rarity: number;
fish_condition: string;
gear_usage: string;
}
interface FishCardHeaderProps {
fish: FishCatch;
}
export const FishCardHeader: React.FC<FishCardHeaderProps> = ({ fish }) => {
return (
<View style={styles.fishCardHeaderContent}>
<Text style={styles.fishCardTitle}>{fish.fish_name}:</Text>
<Text style={styles.fishCardSubtitle}>
{fish.catch_number} {fish.catch_unit}
</Text>
</View>
);
};

119
components/tripInfo/modal/NetDetailModal/components/FishCardList.tsx Normal file
View File

@@ -0,0 +1,119 @@
import { IconSymbol } from "@/components/ui/icon-symbol";
import React from "react";
import { TouchableOpacity, View } from "react-native";
import styles from "../../style/NetDetailModal.styles";
import { FishCardForm } from "./FishCardForm";
import { FishCardHeader } from "./FishCardHeader";
interface FishCatch {
fish_species_id: number;
fish_name: string;
catch_number: number;
catch_unit: string;
fish_size: number;
fish_rarity: number;
fish_condition: string;
gear_usage: string;
}
interface FishCardListProps {
catchList: FishCatch[];
isEditing: boolean;
expandedFishIndex: number[];
selectedFishIndex: number | null;
selectedUnitIndex: number | null;
selectedConditionIndex: number | null;
fishNameOptions: string[];
unitOptions: string[];
conditionOptions: string[];
onToggleExpanded: (index: number) => void;
onUpdateCatchItem: (
index: number,
field: keyof FishCatch,
value: string | number
) => void;
setSelectedFishIndex: (index: number | null) => void;
setSelectedUnitIndex: (index: number | null) => void;
setSelectedConditionIndex: (index: number | null) => void;
}
export const FishCardList: React.FC<FishCardListProps> = ({
catchList,
isEditing,
expandedFishIndex,
selectedFishIndex,
selectedUnitIndex,
selectedConditionIndex,
fishNameOptions,
unitOptions,
conditionOptions,
onToggleExpanded,
onUpdateCatchItem,
setSelectedFishIndex,
setSelectedUnitIndex,
setSelectedConditionIndex,
}) => {
// Chuyển về logic đơn giản, không animation
const handleToggleCard = (index: number) => {
onToggleExpanded(index);
};
return (
<>
{catchList.map((fish, index) => (
<View key={index} style={styles.fishCard}>
{/* Chevron button - always on top */}
<View
style={{
position: "absolute",
top: 0,
right: 0,
zIndex: 9999,
padding: 8,
}}
pointerEvents="box-none"
>
<TouchableOpacity
onPress={() => handleToggleCard(index)}
style={[styles.chevronIconRight, { zIndex: 9999 }]}
hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}
activeOpacity={0.7}
>
<IconSymbol
name={
expandedFishIndex.includes(index)
? "chevron.up"
: "chevron.down"
}
size={24}
color="#fff"
/>
</TouchableOpacity>
</View>
{/* Header - Only visible when collapsed */}
{!expandedFishIndex.includes(index) && <FishCardHeader fish={fish} />}
{/* Form - Only show when expanded */}
{expandedFishIndex.includes(index) && (
<FishCardForm
fish={fish}
index={index}
isEditing={isEditing}
fishNameOptions={fishNameOptions}
unitOptions={unitOptions}
conditionOptions={conditionOptions}
selectedFishIndex={selectedFishIndex}
selectedUnitIndex={selectedUnitIndex}
selectedConditionIndex={selectedConditionIndex}
setSelectedFishIndex={setSelectedFishIndex}
setSelectedUnitIndex={setSelectedUnitIndex}
setSelectedConditionIndex={setSelectedConditionIndex}
onUpdateCatchItem={onUpdateCatchItem}
/>
)}
</View>
))}
</>
);
};

52
components/tripInfo/modal/NetDetailModal/components/FishSelectDropdown.tsx Normal file
View File

@@ -0,0 +1,52 @@
import { IconSymbol } from "@/components/ui/icon-symbol";
import React from "react";
import { ScrollView, Text, TouchableOpacity, View } from "react-native";
import styles from "../../style/NetDetailModal.styles";
interface FishSelectDropdownProps {
options: string[];
selectedValue: string;
isOpen: boolean;
onToggle: () => void;
onSelect: (value: string) => void;
zIndex: number;
styleOverride?: any;
}
export const FishSelectDropdown: React.FC<FishSelectDropdownProps> = ({
options,
selectedValue,
isOpen,
onToggle,
onSelect,
zIndex,
styleOverride,
}) => {
const dropdownStyle = styleOverride || styles.optionsList;
return (
<View style={{ zIndex }}>
<TouchableOpacity style={styles.selectButton} onPress={onToggle}>
<Text style={styles.selectButtonText}>{selectedValue}</Text>
<IconSymbol
name={isOpen ? "chevron.up" : "chevron.down"}
size={16}
color="#666"
/>
</TouchableOpacity>
{isOpen && (
<ScrollView style={dropdownStyle} nestedScrollEnabled={true}>
{options.map((option, optIndex) => (
<TouchableOpacity
key={optIndex}
style={styles.optionItem}
onPress={() => onSelect(option)}
>
<Text style={styles.optionText}>{option}</Text>
</TouchableOpacity>
))}
</ScrollView>
)}
</View>
);
};

93
components/tripInfo/modal/NetDetailModal/components/InfoSection.tsx Normal file
View File

@@ -0,0 +1,93 @@
import React from "react";
import { Text, View } from "react-native";
import styles from "../../style/NetDetailModal.styles";
interface NetDetail {
id: string;
stt: string;
trangThai: string;
thoiGianBatDau?: string;
thoiGianKetThuc?: string;
viTriHaThu?: string;
viTriThuLuoi?: string;
doSauHaThu?: string;
doSauThuLuoi?: string;
catchList?: any[];
ghiChu?: string;
}
interface InfoSectionProps {
netData: NetDetail;
isCompleted: boolean;
}
export const InfoSection: React.FC<InfoSectionProps> = ({
netData,
isCompleted,
}) => {
const infoItems = [
{ label: "Số thứ tự", value: netData.stt },
{
label: "Trạng thái",
value: netData.trangThai,
isStatus: true,
},
{
label: "Thời gian bắt đầu",
value: netData.thoiGianBatDau || "Chưa cập nhật",
},
{
label: "Thời gian kết thúc",
value: netData.thoiGianKetThuc || "Chưa cập nhật",
},
{
label: "Vị trí hạ thu",
value: netData.viTriHaThu || "Chưa cập nhật",
},
{
label: "Vị trí thu lưới",
value: netData.viTriThuLuoi || "Chưa cập nhật",
},
{
label: "Độ sâu hạ thu",
value: netData.doSauHaThu || "Chưa cập nhật",
},
{
label: "Độ sâu thu lưới",
value: netData.doSauThuLuoi || "Chưa cập nhật",
},
];
return (
<View style={styles.infoCard}>
{infoItems.map((item, index) => (
<View key={index} style={styles.infoRow}>
<Text style={styles.infoLabel}>{item.label}</Text>
{item.isStatus ? (
<View
style={[
styles.statusBadge,
isCompleted
? styles.statusBadgeCompleted
: styles.statusBadgeInProgress,
]}
>
<Text
style={[
styles.statusBadgeText,
isCompleted
? styles.statusBadgeTextCompleted
: styles.statusBadgeTextInProgress,
]}
>
{item.value}
</Text>
</View>
) : (
<Text style={styles.infoValue}>{item.value}</Text>
)}
</View>
))}
</View>
);
};

20
components/tripInfo/modal/NetDetailModal/components/NotesSection.tsx Normal file
View File

@@ -0,0 +1,20 @@
import React from "react";
import { Text, View } from "react-native";
import styles from "../../style/NetDetailModal.styles";
interface NotesSectionProps {
ghiChu?: string;
}
export const NotesSection: React.FC<NotesSectionProps> = ({ ghiChu }) => {
if (!ghiChu) return null;
return (
<View style={styles.infoCard}>
<View style={styles.infoRow}>
<Text style={styles.infoLabel}>Ghi chú</Text>
<Text style={styles.infoValue}>{ghiChu}</Text>
</View>
</View>
);
};

7
components/tripInfo/modal/NetDetailModal/components/index.ts Normal file
View File

@@ -0,0 +1,7 @@
export { CatchSectionHeader } from "./CatchSectionHeader";
export { FishCardForm } from "./FishCardForm";
export { FishCardHeader } from "./FishCardHeader";
export { FishCardList } from "./FishCardList";
export { FishSelectDropdown } from "./FishSelectDropdown";
export { InfoSection } from "./InfoSection";
export { NotesSection } from "./NotesSection";

35
components/tripInfo/modal/style/NetDetailModal.styles.ts
View File

@@ -140,6 +140,7 @@ const styles = StyleSheet.create({
color: "#007AFF",
},
fishCard: {
position: "relative",
backgroundColor: "#fff",
borderRadius: 12,
padding: 16,
@@ -152,7 +153,7 @@ const styles = StyleSheet.create({
},
fieldGroup: {
marginBottom: 12,
position: "relative",
marginTop: 0,
},
rowGroup: {
flexDirection: "row",
@@ -231,6 +232,38 @@ const styles = StyleSheet.create({
shadowRadius: 8,
shadowOffset: { width: 0, height: 4 },
},
fishCardHeaderContent: {
flexDirection: "row",
gap: 5,
},
chevronIconRight: {
position: "absolute",
top: 6,
right: 12,
zIndex: 1000,
backgroundColor: "#007AFF",
borderRadius: 8,
width: 40,
height: 40,
padding: 0,
justifyContent: "center",
alignItems: "center",
shadowColor: "#000",
shadowOpacity: 0.08,
shadowRadius: 2,
shadowOffset: { width: 0, height: 1 },
elevation: 2,
},
fishCardTitle: {
fontSize: 16,
fontWeight: "600",
color: "#000",
},
fishCardSubtitle: {
fontSize: 15,
color: "#ff6600",
marginTop: 0,
},
});
export default styles;

4
components/ui/icon-symbol.tsx
View File

@@ -23,8 +23,8 @@ const MAPPING = {
"chevron.right": "chevron-right",
"ferry.fill": "directions-boat",
"map.fill": "map",
"arrowshape.down.fill": "arrow-drop-down",
"arrowshape.up.fill": "arrow-drop-up",
"chevron.down": "arrow-drop-down",
"chevron.up": "arrow-drop-up",
"exclamationmark.triangle.fill": "warning",
"book.closed.fill": "book",
"dot.radiowaves.left.and.right": "sensors",

6
constants/index.ts
View File

@@ -15,6 +15,12 @@ export const DARK_THEME = "dark";
export const ROUTE_LOGIN = "/login";
export const ROUTE_HOME = "/map";
export const ROUTE_TRIP = "/trip";
// Event Emitters
export const EVENT_GPS_DATA = "GPS_DATA_EVENT";
export const EVENT_ALARM_DATA = "ALARM_DATA_EVENT";
export const EVENT_ENTITY_DATA = "ENTITY_DATA_EVENT";
export const EVENT_BANZONE_DATA = "BANZONE_DATA_EVENT";
export const EVENT_TRACK_POINTS_DATA = "TRACK_POINTS_DATA_EVENT";
// Entity Contants
export const ENTITY = {

8
eslint.config.js
View File

@@ -1,10 +1,10 @@
// https://docs.expo.dev/guides/using-eslint/
const { defineConfig } = require('eslint/config');
const expoConfig = require('eslint-config-expo/flat');
import expoConfig from "eslint-config-expo/flat";
import { defineConfig } from "eslint/config";
module.exports = defineConfig([
export default defineConfig([
expoConfig,
{
ignores: ['dist/*'],
ignores: ["dist/*"],
},
]);

7
package-lock.json generated
View File

@@ -14,6 +14,7 @@
"@react-navigation/elements": "^2.6.3",
"@react-navigation/native": "^7.1.8",
"axios": "^1.13.1",
"eventemitter3": "^5.0.1",
"expo": "~54.0.20",
"expo-constants": "~18.0.10",
"expo-font": "~14.0.9",
@@ -6317,6 +6318,12 @@
"node": ">=6"
}
},
"node_modules/eventemitter3": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz",
"integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==",
"license": "MIT"
},
"node_modules/exec-async": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/exec-async/-/exec-async-2.2.0.tgz",

1
package.json
View File

@@ -17,6 +17,7 @@
"@react-navigation/elements": "^2.6.3",
"@react-navigation/native": "^7.1.8",
"axios": "^1.13.1",
"eventemitter3": "^5.0.1",
"expo": "~54.0.20",
"expo-constants": "~18.0.10",
"expo-font": "~14.0.9",

164
services/device_events.ts Normal file
View File

@@ -0,0 +1,164 @@
import {
AUTO_REFRESH_INTERVAL,
EVENT_ALARM_DATA,
EVENT_BANZONE_DATA,
EVENT_ENTITY_DATA,
EVENT_GPS_DATA,
EVENT_TRACK_POINTS_DATA,
} from "@/constants";
import {
queryAlarm,
queryEntities,
queryGpsData,
queryTrackPoints,
} from "@/controller/DeviceController";
import { queryBanzones } from "@/controller/MapController";
import eventBus from "@/utils/eventBus";
const intervals: {
gps: ReturnType<typeof setInterval> | null;
alarm: ReturnType<typeof setInterval> | null;
entities: ReturnType<typeof setInterval> | null;
trackPoints: ReturnType<typeof setInterval> | null;
banzones: ReturnType<typeof setInterval> | null;
} = {
gps: null,
alarm: null,
entities: null,
trackPoints: null,
banzones: null,
};
export function getGpsEventBus() {
if (intervals.gps) return;
console.log("Starting GPS poller");
const getGpsData = async () => {
try {
console.log("GPS: fetching data...");
const resp = await queryGpsData();
if (resp && resp.data) {
console.log("GPS: emitting data", resp.data);
eventBus.emit(EVENT_GPS_DATA, resp.data);
} else {
console.log("GPS: no data returned");
}
} catch (err) {
console.error("GPS: fetch error", err);
}
};
// Run immediately once, then schedule
getGpsData();
intervals.gps = setInterval(() => {
getGpsData();
}, AUTO_REFRESH_INTERVAL);
}
export function getAlarmEventBus() {
if (intervals.alarm) return;
console.log("Goi ham get Alarm");
const getAlarmData = async () => {
try {
console.log("Alarm: fetching data...");
const resp = await queryAlarm();
if (resp && resp.data) {
console.log(
"Alarm: emitting data",
resp.data?.alarms?.length ?? resp.data
);
eventBus.emit(EVENT_ALARM_DATA, resp.data);
} else {
console.log("Alarm: no data returned");
}
} catch (err) {
console.error("Alarm: fetch error", err);
}
};
getAlarmData();
intervals.alarm = setInterval(() => {
getAlarmData();
}, AUTO_REFRESH_INTERVAL);
}
export function getEntitiesEventBus() {
if (intervals.entities) return;
console.log("Goi ham get Entities");
const getEntitiesData = async () => {
try {
console.log("Entities: fetching data...");
const resp = await queryEntities();
if (resp && resp.length > 0) {
console.log("Entities: emitting", resp.length);
eventBus.emit(EVENT_ENTITY_DATA, resp);
} else {
console.log("Entities: no data returned");
}
} catch (err) {
console.error("Entities: fetch error", err);
}
};
getEntitiesData();
intervals.entities = setInterval(() => {
getEntitiesData();
}, AUTO_REFRESH_INTERVAL);
}
export function getTrackPointsEventBus() {
if (intervals.trackPoints) return;
console.log("Goi ham get Track Points");
const getTrackPointsData = async () => {
try {
console.log("TrackPoints: fetching data...");
const resp = await queryTrackPoints();
if (resp && resp.data && resp.data.length > 0) {
console.log("TrackPoints: emitting", resp.data.length);
eventBus.emit(EVENT_TRACK_POINTS_DATA, resp.data);
} else {
console.log("TrackPoints: no data returned");
}
} catch (err) {
console.error("TrackPoints: fetch error", err);
}
};
getTrackPointsData();
intervals.trackPoints = setInterval(() => {
getTrackPointsData();
}, AUTO_REFRESH_INTERVAL);
}
export function getBanzonesEventBus() {
if (intervals.banzones) return;
const getBanzonesData = async () => {
try {
console.log("Banzones: fetching data...");
const resp = await queryBanzones();
if (resp && resp.data && resp.data.length > 0) {
console.log("Banzones: emitting", resp.data.length);
eventBus.emit(EVENT_BANZONE_DATA, resp.data);
} else {
console.log("Banzones: no data returned");
}
} catch (err) {
console.error("Banzones: fetch error", err);
}
};
getBanzonesData();
intervals.banzones = setInterval(() => {
getBanzonesData();
}, AUTO_REFRESH_INTERVAL * 60);
}
export function stopEvents() {
Object.keys(intervals).forEach((k) => {
const key = k as keyof typeof intervals;
if (intervals[key]) {
clearInterval(intervals[key] as ReturnType<typeof setInterval>);
intervals[key] = null;
}
});
}

5
utils/eventBus.ts Normal file
View File

@@ -0,0 +1,5 @@
import EventEmitter from "eventemitter3";
const eventBus = new EventEmitter();
export default eventBus;