cập nhật modal add/edit fishingLog và sửa lỗi event ở map
This commit is contained in:
@@ -1,12 +1,32 @@
|
||||
import { Tabs } from "expo-router";
|
||||
import { Tabs, useSegments } from "expo-router";
|
||||
|
||||
import { HapticTab } from "@/components/haptic-tab";
|
||||
import { IconSymbol } from "@/components/ui/icon-symbol";
|
||||
import { Colors } from "@/constants/theme";
|
||||
import { useColorScheme } from "@/hooks/use-color-scheme";
|
||||
import { startEvents, stopEvents } from "@/services/device_events";
|
||||
import { useEffect, useRef } from "react";
|
||||
|
||||
export default function TabLayout() {
|
||||
const colorScheme = useColorScheme();
|
||||
const segments = useSegments();
|
||||
const prev = useRef<string | null>(null);
|
||||
const currentSegment = segments[1] ?? segments[segments.length - 1] ?? null; // tuỳ cấu trúc của bạn
|
||||
useEffect(() => {
|
||||
if (prev.current !== currentSegment) {
|
||||
// console.log("Tab changed ->", { from: prev.current, to: currentSegment });
|
||||
// TODO: xử lý khi chuyển tab ở đây
|
||||
if (prev.current === "(tabs)" && currentSegment !== "(tabs)") {
|
||||
stopEvents();
|
||||
// console.log("Stop events");
|
||||
} else if (prev.current !== "(tabs)" && currentSegment === "(tabs)") {
|
||||
// we came back into the tabs group — restart polling
|
||||
startEvents();
|
||||
// console.log("start events");
|
||||
}
|
||||
prev.current = currentSegment;
|
||||
}
|
||||
}, [currentSegment]);
|
||||
|
||||
return (
|
||||
<Tabs
|
||||
|
||||
@@ -9,7 +9,7 @@ export default function Warning() {
|
||||
<SafeAreaView style={{ flex: 1 }}>
|
||||
<View style={styles.container}>
|
||||
<CreateOrUpdateHaulModal
|
||||
haulData={null}
|
||||
fishingLog={fishingLogData}
|
||||
isVisible={isShowModal}
|
||||
onClose={function (): void {
|
||||
setIsShowModal(false);
|
||||
@@ -54,105 +54,118 @@ const styles = StyleSheet.create({
|
||||
},
|
||||
});
|
||||
|
||||
const fishingInfoDatas: Model.FishingLogInfo[] = [
|
||||
const fishingLogData:Model.FishingLog = {
|
||||
fishing_log_id: "124b2701-a5d6-4eb0-ba3b-6789473c14a9",
|
||||
trip_id: "d84caab6-ebb0-4cf7-abf9-31e5617d23b9",
|
||||
start_at: "2025-11-07T10:50:01.693193764Z",
|
||||
end_at: "2025-11-07T10:50:31.693027729Z",
|
||||
start_lat: 11.59141,
|
||||
start_lon: 109.0489,
|
||||
haul_lat: 11.590274,
|
||||
haul_lon: 109.049284,
|
||||
status: 1,
|
||||
weather_description: "Stormy",
|
||||
info: [
|
||||
{
|
||||
fish_species_id: 10,
|
||||
fish_name: "Cá quỷ biển (Barracuda)",
|
||||
catch_number: 820,
|
||||
fish_species_id: 8,
|
||||
fish_name: "Cá hồng phớn",
|
||||
catch_number: 1309,
|
||||
catch_unit: "kg",
|
||||
fish_size: 29,
|
||||
fish_size: 173,
|
||||
fish_rarity: 3,
|
||||
fish_condition: "Còn sống",
|
||||
gear_usage: "Câu vàng",
|
||||
},
|
||||
{
|
||||
fish_species_id: 18,
|
||||
fish_name: "Cá đuối quạt",
|
||||
catch_number: 731,
|
||||
catch_unit: "kg",
|
||||
fish_size: 16,
|
||||
fish_rarity: 4,
|
||||
fish_condition: "Chết",
|
||||
gear_usage: "Bẫy lưới",
|
||||
},
|
||||
{
|
||||
fish_species_id: 7,
|
||||
fish_name: "Cá bơn vàng",
|
||||
catch_number: 1224,
|
||||
catch_unit: "kg",
|
||||
fish_size: 12,
|
||||
fish_rarity: 1,
|
||||
fish_condition: "Bị thương",
|
||||
fish_condition: "Chết",
|
||||
gear_usage: "",
|
||||
},
|
||||
{
|
||||
fish_species_id: 1,
|
||||
fish_name: "Cá thu",
|
||||
catch_number: 1293,
|
||||
fish_species_id: 16,
|
||||
fish_name: "Cá rồng biển",
|
||||
catch_number: 838,
|
||||
catch_unit: "kg",
|
||||
fish_size: 37,
|
||||
fish_rarity: 1,
|
||||
fish_size: 164,
|
||||
fish_rarity: 3,
|
||||
fish_condition: "Chết",
|
||||
gear_usage: "Lưới rê",
|
||||
},
|
||||
{
|
||||
fish_species_id: 9,
|
||||
fish_name: "Cá hổ Napoleon",
|
||||
catch_number: 1410,
|
||||
catch_unit: "kg",
|
||||
fish_size: 104,
|
||||
fish_rarity: 4,
|
||||
fish_condition: "Bị thương",
|
||||
gear_usage: "Câu vàng",
|
||||
},
|
||||
{
|
||||
fish_species_id: 3,
|
||||
fish_name: "Cá chim trắng",
|
||||
catch_number: 1184,
|
||||
catch_unit: "kg",
|
||||
fish_size: 104,
|
||||
fish_rarity: 2,
|
||||
fish_condition: "Còn sống",
|
||||
gear_usage: "",
|
||||
},
|
||||
{
|
||||
fish_species_id: 5,
|
||||
fish_name: "Cá mú đỏ",
|
||||
catch_number: 987,
|
||||
catch_unit: "kg",
|
||||
fish_size: 171,
|
||||
fish_rarity: 2,
|
||||
fish_condition: "Bị thương",
|
||||
gear_usage: "",
|
||||
},
|
||||
{
|
||||
fish_species_id: 13,
|
||||
fish_name: "Cá song đỏ",
|
||||
catch_number: 1738,
|
||||
catch_number: 1676,
|
||||
catch_unit: "kg",
|
||||
fish_size: 28,
|
||||
fish_size: 99,
|
||||
fish_rarity: 2,
|
||||
fish_condition: "Còn sống",
|
||||
fish_condition: "Bị thương",
|
||||
gear_usage: "",
|
||||
},
|
||||
{
|
||||
fish_species_id: 17,
|
||||
fish_name: "Cá nược",
|
||||
catch_number: 690,
|
||||
fish_species_id: 11,
|
||||
fish_name: "Cá ngừ đại dương",
|
||||
catch_number: 462,
|
||||
catch_unit: "kg",
|
||||
fish_size: 63,
|
||||
fish_size: 11,
|
||||
fish_rarity: 1,
|
||||
fish_condition: "Chết",
|
||||
fish_condition: "Bị thương",
|
||||
gear_usage: "",
|
||||
},
|
||||
{
|
||||
fish_species_id: 19,
|
||||
fish_name: "Cá hổ Thái Lan",
|
||||
catch_number: 825,
|
||||
fish_species_id: 2,
|
||||
fish_name: "Cá nục",
|
||||
catch_number: 496,
|
||||
catch_unit: "kg",
|
||||
fish_size: 55,
|
||||
fish_rarity: 4,
|
||||
fish_condition: "Chết",
|
||||
gear_usage: "Câu tay",
|
||||
},
|
||||
{
|
||||
fish_species_id: 8,
|
||||
fish_name: "Cá hồng phớn",
|
||||
catch_number: 1409,
|
||||
catch_unit: "kg",
|
||||
fish_size: 172,
|
||||
fish_rarity: 3,
|
||||
fish_condition: "Chết",
|
||||
gear_usage: "Bẫy lưới",
|
||||
},
|
||||
{
|
||||
fish_species_id: 16,
|
||||
fish_name: "Cá rồng biển",
|
||||
catch_number: 1426,
|
||||
catch_unit: "kg",
|
||||
fish_size: 105,
|
||||
fish_rarity: 3,
|
||||
fish_condition: "Chết",
|
||||
gear_usage: "Lưới rê",
|
||||
},
|
||||
{
|
||||
fish_species_id: 3,
|
||||
fish_name: "Cá chim trắng",
|
||||
catch_number: 176,
|
||||
catch_unit: "kg",
|
||||
fish_size: 83,
|
||||
fish_rarity: 2,
|
||||
fish_condition: "Chết",
|
||||
gear_usage: "",
|
||||
},
|
||||
{
|
||||
fish_species_id: 14,
|
||||
fish_name: "Cá mú cườm",
|
||||
catch_number: 724,
|
||||
catch_unit: "kg",
|
||||
fish_size: 36,
|
||||
fish_rarity: 2,
|
||||
fish_condition: "Chết",
|
||||
gear_usage: "",
|
||||
},
|
||||
{
|
||||
fish_species_id: 18,
|
||||
fish_name: "Cá đuối quạt",
|
||||
catch_number: 1712,
|
||||
catch_unit: "kg",
|
||||
fish_size: 105,
|
||||
fish_rarity: 4,
|
||||
fish_size: 125,
|
||||
fish_rarity: 1,
|
||||
fish_condition: "Còn sống",
|
||||
gear_usage: "Câu vàng",
|
||||
gear_usage: "",
|
||||
},
|
||||
];
|
||||
],
|
||||
sync: true,
|
||||
};
|
||||
|
||||
@@ -4,10 +4,27 @@ import { PolygonWithLabel } from "@/components/map/PolygonWithLabel";
|
||||
import type { PolylineWithLabelProps } from "@/components/map/PolylineWithLabel";
|
||||
import { PolylineWithLabel } from "@/components/map/PolylineWithLabel";
|
||||
import SosButton from "@/components/map/SosButton";
|
||||
import { ENTITY, IOS_PLATFORM, LIGHT_THEME } from "@/constants";
|
||||
import {
|
||||
ENTITY,
|
||||
EVENT_ALARM_DATA,
|
||||
EVENT_BANZONE_DATA,
|
||||
EVENT_ENTITY_DATA,
|
||||
EVENT_GPS_DATA,
|
||||
EVENT_TRACK_POINTS_DATA,
|
||||
IOS_PLATFORM,
|
||||
LIGHT_THEME,
|
||||
} from "@/constants";
|
||||
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 eventBus from "@/utils/eventBus";
|
||||
import {
|
||||
convertWKTLineStringToLatLngArray,
|
||||
convertWKTtoLatLngString,
|
||||
@@ -39,74 +56,69 @@ export default function HomeScreen() {
|
||||
const scale = useRef(new Animated.Value(0)).current;
|
||||
const opacity = useRef(new Animated.Value(1)).current;
|
||||
|
||||
// console.log("Platform: ", platform);
|
||||
// console.log("Theme: ", theme);
|
||||
useEffect(() => {
|
||||
getGpsEventBus();
|
||||
getAlarmEventBus();
|
||||
getEntitiesEventBus();
|
||||
getBanzonesEventBus();
|
||||
getTrackPointsEventBus();
|
||||
const queryGpsData = (gpsData: Model.GPSResponse) => {
|
||||
if (gpsData) {
|
||||
// console.log("GPS Data: ", gpsData);
|
||||
setGpsData(gpsData);
|
||||
} else {
|
||||
setGpsData(null);
|
||||
setPolygonCoordinates([]);
|
||||
setPolylineCoordinates(null);
|
||||
}
|
||||
};
|
||||
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);
|
||||
setEntityData(entityData);
|
||||
};
|
||||
const queryBanzonesData = (banzoneData: Model.Zone[]) => {
|
||||
// console.log("Banzone Data: ", banzoneData.length);
|
||||
|
||||
// const [number, setNumber] = useState(0);
|
||||
setBanzoneData(banzoneData);
|
||||
};
|
||||
const queryTrackPointsData = (TrackPointsData: Model.ShipTrackPoint[]) => {
|
||||
// console.log("TrackPoints Data: ", TrackPointsData.length);
|
||||
if (TrackPointsData && TrackPointsData.length > 0) {
|
||||
setTrackPointsData(TrackPointsData);
|
||||
} else {
|
||||
setTrackPointsData(null);
|
||||
}
|
||||
};
|
||||
|
||||
// useEffect(() => {
|
||||
// getGpsEventBus();
|
||||
// getAlarmEventBus();
|
||||
// getEntitiesEventBus();
|
||||
// getBanzonesEventBus();
|
||||
// getTrackPointsEventBus();
|
||||
// const queryGpsData = (gpsData: Model.GPSResponse) => {
|
||||
// if (gpsData) {
|
||||
// // console.log("GPS Data: ", gpsData);
|
||||
// setGpsData(gpsData);
|
||||
// } else {
|
||||
// setGpsData(null);
|
||||
// setPolygonCoordinates([]);
|
||||
// setPolylineCoordinates(null);
|
||||
// }
|
||||
// };
|
||||
// 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);
|
||||
// setEntityData(entityData);
|
||||
// };
|
||||
// const queryBanzonesData = (banzoneData: Model.Zone[]) => {
|
||||
// // console.log("Banzone Data: ", banzoneData.length);
|
||||
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");
|
||||
|
||||
// setBanzoneData(banzoneData);
|
||||
// };
|
||||
// const queryTrackPointsData = (TrackPointsData: Model.ShipTrackPoint[]) => {
|
||||
// // console.log("TrackPoints Data: ", TrackPointsData.length);
|
||||
// if (TrackPointsData && TrackPointsData.length > 0) {
|
||||
// setTrackPointsData(TrackPointsData);
|
||||
// } else {
|
||||
// setTrackPointsData(null);
|
||||
// }
|
||||
// };
|
||||
|
||||
// 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");
|
||||
|
||||
// return () => {
|
||||
// // 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");
|
||||
// };
|
||||
// }, []);
|
||||
return () => {
|
||||
// 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(() => {
|
||||
setPolylineCoordinates(null);
|
||||
@@ -162,7 +174,7 @@ export default function HomeScreen() {
|
||||
// foundPolygon = true;
|
||||
const coordinates = convertWKTtoLatLngString(geom_poly || "");
|
||||
if (coordinates.length > 0) {
|
||||
console.log("Polygon Coordinate: ", coordinates);
|
||||
// console.log("Polygon Coordinate: ", coordinates);
|
||||
setPolygonCoordinates(
|
||||
coordinates.map((polygon) => ({
|
||||
coordinates: polygon.map((coord) => ({
|
||||
|
||||
@@ -94,7 +94,7 @@ const ButtonCreateNewHaulOrTrip: React.FC<StartButtonProps> = ({
|
||||
});
|
||||
if (resp.status === 200) {
|
||||
showSuccessToast("Bắt đầu chuyến đi thành công!");
|
||||
getTrip();
|
||||
await getTrip();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error stating trip :", error);
|
||||
@@ -125,7 +125,7 @@ const ButtonCreateNewHaulOrTrip: React.FC<StartButtonProps> = ({
|
||||
const resp = await queryStartNewHaul(body);
|
||||
if (resp.status === 200) {
|
||||
showSuccessToast("Bắt đầu mẻ lưới mới thành công!");
|
||||
getTrip();
|
||||
await getTrip();
|
||||
} else {
|
||||
showErrorToast("Tạo mẻ lưới mới thất bại!");
|
||||
}
|
||||
@@ -173,7 +173,8 @@ const ButtonCreateNewHaulOrTrip: React.FC<StartButtonProps> = ({
|
||||
</IconButton>
|
||||
)}
|
||||
<CreateOrUpdateHaulModal
|
||||
haulData={null}
|
||||
fishingLog={trip?.fishing_logs?.find((f) => f.status === 0)!}
|
||||
fishingLogIndex={trip?.fishing_logs?.length!}
|
||||
isVisible={isFinishHaulModalOpen}
|
||||
onClose={function (): void {
|
||||
setIsFinishHaulModalOpen(false);
|
||||
|
||||
@@ -3,7 +3,7 @@ import { useFishes } from "@/state/use-fish";
|
||||
import { useTrip } from "@/state/use-trip";
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
import { Animated, Text, TouchableOpacity, View } from "react-native";
|
||||
import NetDetailModal from "./modal/NetDetailModal/NetDetailModal";
|
||||
import CreateOrUpdateHaulModal from "./modal/CreateOrUpdateHaulModal";
|
||||
import styles from "./style/NetListTable.styles";
|
||||
|
||||
const NetListTable: React.FC = () => {
|
||||
@@ -17,8 +17,11 @@ const NetListTable: React.FC = () => {
|
||||
useEffect(() => {
|
||||
getFishSpecies();
|
||||
}, []);
|
||||
const data: Model.FishingLog[] = trip?.fishing_logs ?? [];
|
||||
const tongSoMe = data.length;
|
||||
|
||||
// useEffect(() => {
|
||||
// console.log("Trip thay đổi: ", trip?.fishing_logs?.length);
|
||||
// }, [trip]);
|
||||
// const data: Model.FishingLog[] = trip?.fishing_logs ?? [];
|
||||
|
||||
const handleToggle = () => {
|
||||
const toValue = collapsed ? contentHeight : 0;
|
||||
@@ -31,7 +34,7 @@ const NetListTable: React.FC = () => {
|
||||
};
|
||||
|
||||
const handleStatusPress = (id: string) => {
|
||||
const net = data.find((item) => item.fishing_log_id === id);
|
||||
const net = trip?.fishing_logs?.find((item) => item.fishing_log_id === id);
|
||||
if (net) {
|
||||
setSelectedNet(net);
|
||||
setModalVisible(true);
|
||||
@@ -47,7 +50,11 @@ const NetListTable: React.FC = () => {
|
||||
style={styles.headerRow}
|
||||
>
|
||||
<Text style={styles.title}>Danh sách mẻ lưới</Text>
|
||||
{collapsed && <Text style={styles.totalCollapsed}>{tongSoMe}</Text>}
|
||||
{collapsed && (
|
||||
<Text style={styles.totalCollapsed}>
|
||||
{trip?.fishing_logs?.length}
|
||||
</Text>
|
||||
)}
|
||||
<IconSymbol
|
||||
name={collapsed ? "chevron.down" : "chevron.up"}
|
||||
size={16}
|
||||
@@ -60,8 +67,18 @@ const NetListTable: React.FC = () => {
|
||||
style={{ position: "absolute", opacity: 0, zIndex: -1000 }}
|
||||
onLayout={(event) => {
|
||||
const height = event.nativeEvent.layout.height;
|
||||
if (height > 0 && contentHeight === 0) {
|
||||
// Update measured content height whenever it actually changes.
|
||||
if (height > 0 && height !== contentHeight) {
|
||||
setContentHeight(height);
|
||||
// If the panel is currently expanded, animate to the new height so
|
||||
// newly added/removed rows become visible immediately.
|
||||
if (!collapsed) {
|
||||
Animated.timing(animatedHeight, {
|
||||
toValue: height,
|
||||
duration: 200,
|
||||
useNativeDriver: false,
|
||||
}).start();
|
||||
}
|
||||
}
|
||||
}}
|
||||
>
|
||||
@@ -72,7 +89,7 @@ const NetListTable: React.FC = () => {
|
||||
</View>
|
||||
|
||||
{/* Body */}
|
||||
{data.map((item, index) => (
|
||||
{trip?.fishing_logs?.map((item, index) => (
|
||||
<View key={item.fishing_log_id} style={styles.row}>
|
||||
{/* Cột STT */}
|
||||
<Text style={styles.sttCell}>Mẻ {index + 1}</Text>
|
||||
@@ -101,7 +118,7 @@ const NetListTable: React.FC = () => {
|
||||
</View>
|
||||
|
||||
{/* Body */}
|
||||
{data.map((item, index) => (
|
||||
{trip?.fishing_logs?.map((item, index) => (
|
||||
<View key={item.fishing_log_id} style={styles.row}>
|
||||
{/* Cột STT */}
|
||||
<Text style={styles.sttCell}>Mẻ {index + 1}</Text>
|
||||
@@ -120,9 +137,23 @@ const NetListTable: React.FC = () => {
|
||||
</View>
|
||||
))}
|
||||
</Animated.View>
|
||||
|
||||
<CreateOrUpdateHaulModal
|
||||
isVisible={modalVisible}
|
||||
onClose={() => {
|
||||
console.log("OnCLose");
|
||||
setModalVisible(false);
|
||||
}}
|
||||
fishingLog={selectedNet}
|
||||
fishingLogIndex={
|
||||
selectedNet
|
||||
? trip!.fishing_logs!.findIndex(
|
||||
(item) => item.fishing_log_id === selectedNet.fishing_log_id
|
||||
) + 1
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
{/* Modal chi tiết */}
|
||||
<NetDetailModal
|
||||
{/* <NetDetailModal
|
||||
visible={modalVisible}
|
||||
onClose={() => {
|
||||
console.log("OnCLose");
|
||||
@@ -136,7 +167,7 @@ const NetListTable: React.FC = () => {
|
||||
) + 1
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
/> */}
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -5,11 +5,13 @@ import React from "react";
|
||||
import { Controller, useFieldArray, useForm } from "react-hook-form";
|
||||
import { Button, FlatList, Modal, Text, TextInput, View } from "react-native";
|
||||
import { z } from "zod";
|
||||
import { InfoSection } from "./NetDetailModal/components";
|
||||
|
||||
interface CreateOrUpdateHaulModalProps {
|
||||
isVisible: boolean;
|
||||
onClose: () => void;
|
||||
haulData?: Model.FishingLogInfo[] | null;
|
||||
fishingLog?: Model.FishingLog | null;
|
||||
fishingLogIndex?: number;
|
||||
}
|
||||
|
||||
const UNITS = ["con", "kg", "tấn"] as const;
|
||||
@@ -49,9 +51,10 @@ const defaultItem = (): FormValues["fish"][number] => ({
|
||||
const CreateOrUpdateHaulModal: React.FC<CreateOrUpdateHaulModalProps> = ({
|
||||
isVisible,
|
||||
onClose,
|
||||
haulData,
|
||||
fishingLog,
|
||||
fishingLogIndex
|
||||
}) => {
|
||||
const [isCreateMode, setIsCreateMode] = React.useState(!haulData);
|
||||
const [isCreateMode, setIsCreateMode] = React.useState(!fishingLog?.info);
|
||||
const { control, handleSubmit, formState, watch, reset } =
|
||||
useForm<FormValues>({
|
||||
resolver: zodResolver(formSchema),
|
||||
@@ -102,14 +105,14 @@ const CreateOrUpdateHaulModal: React.FC<CreateOrUpdateHaulModalProps> = ({
|
||||
return;
|
||||
}
|
||||
|
||||
// when modal opened, populate based on haulData
|
||||
if (haulData === null) {
|
||||
// when modal opened, populate based on fishingLog
|
||||
if (fishingLog?.info === null) {
|
||||
// explicit null -> start with a single default item
|
||||
reset({ fish: [defaultItem()] });
|
||||
setIsCreateMode(true);
|
||||
} else if (Array.isArray(haulData) && haulData.length > 0) {
|
||||
} else if (Array.isArray(fishingLog?.info) && fishingLog?.info.length > 0) {
|
||||
// map FishingLogInfo -> form rows
|
||||
const mapped = haulData.map((h) => ({
|
||||
const mapped = fishingLog.info.map((h) => ({
|
||||
id: h.fish_species_id ?? -1,
|
||||
quantity: (h.catch_number as number) ?? 1,
|
||||
unit: (h.catch_unit as Unit) ?? (defaultItem().unit as Unit),
|
||||
@@ -122,7 +125,7 @@ const CreateOrUpdateHaulModal: React.FC<CreateOrUpdateHaulModalProps> = ({
|
||||
reset({ fish: [defaultItem()] });
|
||||
setIsCreateMode(true);
|
||||
}
|
||||
}, [isVisible, haulData, reset]);
|
||||
}, [isVisible, fishingLog?.info, reset]);
|
||||
const renderRow = ({ item, index }: { item: any; index: number }) => {
|
||||
return (
|
||||
<View
|
||||
@@ -255,6 +258,7 @@ const CreateOrUpdateHaulModal: React.FC<CreateOrUpdateHaulModalProps> = ({
|
||||
onRequestClose={onClose}
|
||||
>
|
||||
<Text>{isCreateMode ? "Create Haul" : "Update Haul"}</Text>
|
||||
<InfoSection fishingLog={fishingLog!} stt={fishingLogIndex} />
|
||||
<FlatList
|
||||
data={fields}
|
||||
keyExtractor={(it) => it._id}
|
||||
|
||||
@@ -11,7 +11,6 @@ import {
|
||||
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 NetDetailModalProps {
|
||||
@@ -320,11 +319,11 @@ const NetDetailModal: React.FC<NetDetailModalProps> = ({
|
||||
{/* Content */}
|
||||
<ScrollView style={styles.content}>
|
||||
{/* Thông tin chung */}
|
||||
<InfoSection
|
||||
{/* <InfoSection
|
||||
netData={netData ?? undefined}
|
||||
isCompleted={isCompleted}
|
||||
stt={stt}
|
||||
/>
|
||||
/> */}
|
||||
|
||||
{/* Danh sách cá bắt được */}
|
||||
<CatchSectionHeader totalCatch={totalCatch} />
|
||||
|
||||
@@ -3,53 +3,52 @@ import { Text, View } from "react-native";
|
||||
import styles from "../../style/NetDetailModal.styles";
|
||||
|
||||
interface InfoSectionProps {
|
||||
netData?: Model.FishingLog;
|
||||
isCompleted: boolean;
|
||||
fishingLog?: Model.FishingLog;
|
||||
stt?: number;
|
||||
}
|
||||
|
||||
export const InfoSection: React.FC<InfoSectionProps> = ({
|
||||
netData,
|
||||
isCompleted,
|
||||
fishingLog,
|
||||
stt,
|
||||
}) => {
|
||||
if (!netData) {
|
||||
if (!fishingLog) {
|
||||
return null;
|
||||
}
|
||||
const infoItems = [
|
||||
{ label: "Số thứ tự", value: `Mẻ ${stt}` },
|
||||
{
|
||||
label: "Trạng thái",
|
||||
value: netData.status === 1 ? "Đã hoàn thành" : "Chưa hoàn thành",
|
||||
value: fishingLog.status === 1 ? "Đã hoàn thành" : "Chưa hoàn thành",
|
||||
isStatus: true,
|
||||
},
|
||||
{
|
||||
label: "Thời gian bắt đầu",
|
||||
value: netData.start_at
|
||||
? new Date(netData.start_at).toLocaleString()
|
||||
value: fishingLog.start_at
|
||||
? new Date(fishingLog.start_at).toLocaleString()
|
||||
: "Chưa cập nhật",
|
||||
},
|
||||
{
|
||||
label: "Thời gian kết thúc",
|
||||
value: netData.start_at
|
||||
? new Date(netData.end_at).toLocaleString()
|
||||
: "Chưa cập nhật",
|
||||
value:
|
||||
fishingLog.end_at !== "0001-01-01T00:00:00Z"
|
||||
? new Date(fishingLog.end_at).toLocaleString()
|
||||
: "-",
|
||||
},
|
||||
// {
|
||||
// label: "Vị trí hạ thu",
|
||||
// value: netData.viTriHaThu || "Chưa cập nhật",
|
||||
// value: fishingLog.viTriHaThu || "Chưa cập nhật",
|
||||
// },
|
||||
// {
|
||||
// label: "Vị trí thu lưới",
|
||||
// value: netData.viTriThuLuoi || "Chưa cập nhật",
|
||||
// value: fishingLog.viTriThuLuoi || "Chưa cập nhật",
|
||||
// },
|
||||
// {
|
||||
// label: "Độ sâu hạ thu",
|
||||
// value: netData.doSauHaThu || "Chưa cập nhật",
|
||||
// value: fishingLog.doSauHaThu || "Chưa cập nhật",
|
||||
// },
|
||||
// {
|
||||
// label: "Độ sâu thu lưới",
|
||||
// value: netData.doSauThuLuoi || "Chưa cập nhật",
|
||||
// value: fishingLog.doSauThuLuoi || "Chưa cập nhật",
|
||||
// },
|
||||
];
|
||||
|
||||
|
||||
4
controller/typings.d.ts
vendored
4
controller/typings.d.ts
vendored
@@ -152,8 +152,8 @@ declare namespace Model {
|
||||
interface FishingLog {
|
||||
fishing_log_id: string;
|
||||
trip_id: string;
|
||||
start_at: Date; // ISO datetime
|
||||
end_at: Date; // ISO datetime
|
||||
start_at: string; // ISO datetime
|
||||
end_at: string; // ISO datetime
|
||||
start_lat: number;
|
||||
start_lon: number;
|
||||
haul_lat: number;
|
||||
|
||||
@@ -162,3 +162,11 @@ export function stopEvents() {
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export function startEvents() {
|
||||
getGpsEventBus();
|
||||
getAlarmEventBus();
|
||||
getEntitiesEventBus();
|
||||
getTrackPointsEventBus();
|
||||
getBanzonesEventBus();
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user