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

fill data API NetDetail

Browse Source
This commit is contained in:
MinhNN
2025-11-06 23:38:53 +07:00
parent 04ca091f49
commit b97e4e1097
6 changed files with 66 additions and 273 deletions
Download Patch File Download Diff File Expand all files Collapse all files

218
components/tripInfo/NetListTable.tsx
View File

@@ -1,191 +1,18 @@
import { IconSymbol } from "@/components/ui/icon-symbol";
import { useTrip } from "@/state/use-trip";
import React, { useRef, useState } from "react";
import { Animated, Text, TouchableOpacity, View } from "react-native";
import NetDetailModal from "./modal/NetDetailModal/NetDetailModal";
import styles from "./style/NetListTable.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 NetItem {
id: string;
stt: string;
trangThai: string;
thoiGianBatDau?: string;
thoiGianKetThuc?: string;
viTriHaThu?: string;
viTriThuLuoi?: string;
doSauHaThu?: string;
doSauThuLuoi?: string;
catchList?: FishCatch[];
ghiChu?: string;
}
// ---------------------------
// 🧵 Dữ liệu mẫu
// ---------------------------
const data: NetItem[] = [
{
id: "1",
stt: "Mẻ 3",
trangThai: "Đã hoàn thành",
thoiGianBatDau: "08:00 - 01/11/2025",
thoiGianKetThuc: "12:30 - 01/11/2025",
viTriHaThu: "16°12'34\"N 107°56'12\"E",
viTriThuLuoi: "16°13'45\"N 107°57'23\"E",
doSauHaThu: "45m",
doSauThuLuoi: "48m",
catchList: [
{
fish_species_id: 3,
fish_name: "Cá chim trắng",
catch_number: 978,
catch_unit: "kg",
fish_size: 111,
fish_rarity: 2,
fish_condition: "Chết",
gear_usage: "",
},
{
fish_species_id: 13,
fish_name: "Cá song đỏ",
catch_number: 1061,
catch_unit: "kg",
fish_size: 154,
fish_rarity: 2,
fish_condition: "Còn sống",
gear_usage: "",
},
{
fish_species_id: 15,
fish_name: "Cá hồng",
catch_number: 613,
catch_unit: "kg",
fish_size: 199,
fish_rarity: 2,
fish_condition: "Còn sống",
gear_usage: "",
},
],
ghiChu: "Thời tiết tốt, sản lượng cao",
},
{
id: "2",
stt: "Mẻ 2",
trangThai: "Đã hoàn thành",
thoiGianBatDau: "14:00 - 31/10/2025",
thoiGianKetThuc: "18:45 - 31/10/2025",
viTriHaThu: "16°10'20\"N 107°54'30\"E",
viTriThuLuoi: "16°11'30\"N 107°55'40\"E",
doSauHaThu: "40m",
doSauThuLuoi: "42m",
catchList: [
{
fish_species_id: 2,
fish_name: "Cá nục",
catch_number: 1102,
catch_unit: "kg",
fish_size: 12,
fish_rarity: 1,
fish_condition: "Bị thương",
gear_usage: "",
},
{
fish_species_id: 11,
fish_name: "Cá ngừ đại dương",
catch_number: 828,
catch_unit: "kg",
fish_size: 120,
fish_rarity: 1,
fish_condition: "Chết",
gear_usage: "",
},
],
ghiChu: "Biển động nhẹ",
},
{
id: "3",
stt: "Mẻ 1",
trangThai: "Đã hoàn thành",
thoiGianBatDau: "06:30 - 31/10/2025",
thoiGianKetThuc: "11:00 - 31/10/2025",
viTriHaThu: "16°08'15\"N 107°52'45\"E",
viTriThuLuoi: "16°09'25\"N 107°53'55\"E",
doSauHaThu: "35m",
doSauThuLuoi: "38m",
catchList: [
{
fish_species_id: 6,
fish_name: "Cá mú trắng",
catch_number: 1620,
catch_unit: "kg",
fish_size: 75,
fish_rarity: 2,
fish_condition: "Chết",
gear_usage: "",
},
{
fish_species_id: 8,
fish_name: "Cá hồng phớn",
catch_number: 648,
catch_unit: "kg",
fish_size: 25,
fish_rarity: 3,
fish_condition: "Còn sống",
gear_usage: "Lưới rê",
},
{
fish_species_id: 9,
fish_name: "Cá hổ Napoleon",
catch_number: 1111,
catch_unit: "kg",
fish_size: 86,
fish_rarity: 4,
fish_condition: "Bị thương",
gear_usage: "Lưới rê",
},
{
fish_species_id: 17,
fish_name: "Cá nược",
catch_number: 1081,
catch_unit: "kg",
fish_size: 195,
fish_rarity: 1,
fish_condition: "Chết",
gear_usage: "",
},
{
fish_species_id: 18,
fish_name: "Cá đuối quạt",
catch_number: 1198,
catch_unit: "kg",
fish_size: 21,
fish_rarity: 4,
fish_condition: "Chết",
gear_usage: "Câu tay",
},
],
ghiChu: "Mẻ lưới đầu tiên, sản lượng tốt",
},
];
const NetListTable: React.FC = () => {
const [collapsed, setCollapsed] = useState(true);
const [contentHeight, setContentHeight] = useState<number>(0);
const animatedHeight = useRef(new Animated.Value(0)).current;
const [modalVisible, setModalVisible] = useState(false);
const [selectedNet, setSelectedNet] = useState<NetItem | null>(null);
const [selectedNet, setSelectedNet] = useState<Model.FishingLog | null>(null);
const { trip } = useTrip();
const data: Model.FishingLog[] = trip?.fishing_logs ?? [];
const tongSoMe = data.length;
const handleToggle = () => {
@@ -199,7 +26,7 @@ const NetListTable: React.FC = () => {
};
const handleStatusPress = (id: string) => {
const net = data.find((item) => item.id === id);
const net = data.find((item) => item.fishing_log_id === id);
if (net) {
setSelectedNet(net);
setModalVisible(true);
@@ -240,16 +67,20 @@ const NetListTable: React.FC = () => {
</View>
{/* Body */}
{data.map((item) => (
<View key={item.id} style={styles.row}>
{data.map((item, index) => (
<View key={item.fishing_log_id} style={styles.row}>
{/* Cột STT */}
<Text style={styles.sttCell}>{item.stt}</Text>
<Text style={styles.sttCell}>Mẻ {index + 1}</Text>
{/* Cột Trạng thái */}
<View style={[styles.cell, styles.statusContainer]}>
<View style={styles.statusDot} />
<TouchableOpacity onPress={() => handleStatusPress(item.id)}>
<Text style={styles.statusText}>{item.trangThai}</Text>
<TouchableOpacity
onPress={() => handleStatusPress(item.fishing_log_id)}
>
<Text style={styles.statusText}>
{item.status ? "Đã hoàn thành" : "Chưa hoàn thành"}
</Text>
</TouchableOpacity>
</View>
</View>
@@ -265,16 +96,20 @@ const NetListTable: React.FC = () => {
</View>
{/* Body */}
{data.map((item) => (
<View key={item.id} style={styles.row}>
{data.map((item, index) => (
<View key={item.fishing_log_id} style={styles.row}>
{/* Cột STT */}
<Text style={styles.sttCell}>{item.stt}</Text>
<Text style={styles.sttCell}>Mẻ {index + 1}</Text>
{/* Cột Trạng thái */}
<View style={[styles.cell, styles.statusContainer]}>
<View style={styles.statusDot} />
<TouchableOpacity onPress={() => handleStatusPress(item.id)}>
<Text style={styles.statusText}>{item.trangThai}</Text>
<TouchableOpacity
onPress={() => handleStatusPress(item.fishing_log_id)}
>
<Text style={styles.statusText}>
{item.status ? "Đã hoàn thành" : "Chưa hoàn thành"}
</Text>
</TouchableOpacity>
</View>
</View>
@@ -289,6 +124,13 @@ const NetListTable: React.FC = () => {
setModalVisible(false);
}}
netData={selectedNet}
stt={
selectedNet
? data.findIndex(
(item) => item.fishing_log_id === selectedNet.fishing_log_id
) + 1
: undefined
}
/>
</View>
);

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

@@ -14,38 +14,11 @@ 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;
netData: Model.FishingLog | null;
stt?: number;
}
// ---------------------------
@@ -55,9 +28,12 @@ const NetDetailModal: React.FC<NetDetailModalProps> = ({
visible,
onClose,
netData,
stt,
}) => {
const [isEditing, setIsEditing] = useState(false);
const [editableCatchList, setEditableCatchList] = useState<FishCatch[]>([]);
const [editableCatchList, setEditableCatchList] = useState<
Model.FishingLogInfo[]
>([]);
const [selectedFishIndex, setSelectedFishIndex] = useState<number | null>(
null
);
@@ -74,8 +50,8 @@ const NetDetailModal: React.FC<NetDetailModalProps> = ({
// Khởi tạo dữ liệu khi netData thay đổi
React.useEffect(() => {
if (netData?.catchList) {
setEditableCatchList(netData.catchList);
if (netData?.info) {
setEditableCatchList(netData.info);
}
}, [netData]);
@@ -93,7 +69,7 @@ const NetDetailModal: React.FC<NetDetailModalProps> = ({
// if (!netData) return null;
const isCompleted = netData?.trangThai === "Đã hoàn thành";
const isCompleted = netData?.status === 2; // ví dụ: status=2 là hoàn thành
// Danh sách tên cá có sẵn
const fishNameOptions = [
@@ -210,7 +186,7 @@ const NetDetailModal: React.FC<NetDetailModalProps> = ({
const handleCancel = () => {
setIsEditing(false);
setEditableCatchList(netData?.catchList || []);
setEditableCatchList(netData?.info || []);
};
const handleToggleExpanded = (index: number) => {
@@ -221,7 +197,7 @@ const NetDetailModal: React.FC<NetDetailModalProps> = ({
const updateCatchItem = (
index: number,
field: keyof FishCatch,
field: keyof Model.FishingLogInfo,
value: string | number
) => {
setEditableCatchList((prev) =>
@@ -245,7 +221,7 @@ const NetDetailModal: React.FC<NetDetailModalProps> = ({
};
const handleAddNewFish = () => {
const newFish: FishCatch = {
const newFish: Model.FishingLogInfo = {
fish_species_id: 0,
fish_name: "",
catch_number: 0,
@@ -289,7 +265,8 @@ const NetDetailModal: React.FC<NetDetailModalProps> = ({
// Chỉ tính tổng số lượng cá có đơn vị là 'kg'
const totalCatch = editableCatchList.reduce(
(sum, item) => (item.catch_unit === "kg" ? sum + item.catch_number : sum),
(sum, item) =>
item.catch_unit === "kg" ? sum + (item.catch_number ?? 0) : sum,
0
);
@@ -346,6 +323,7 @@ const NetDetailModal: React.FC<NetDetailModalProps> = ({
<InfoSection
netData={netData ?? undefined}
isCompleted={isCompleted}
stt={stt}
/>
{/* Danh sách cá bắt được */}
@@ -375,7 +353,7 @@ const NetDetailModal: React.FC<NetDetailModalProps> = ({
/>
{/* Ghi chú */}
<NotesSection ghiChu={netData?.ghiChu} />
<NotesSection ghiChu={netData?.weather_description} />
</ScrollView>
</View>
</Modal>

19
components/tripInfo/modal/NetDetailModal/components/FishCardForm.tsx
View File

@@ -3,19 +3,8 @@ 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;
fish: Model.FishingLogInfo;
index: number;
isEditing: boolean;
fishNameOptions: string[];
@@ -32,7 +21,7 @@ interface FishCardFormProps {
// setSelectedGearIndex: (index: number | null) => void;
onUpdateCatchItem: (
index: number,
field: keyof FishCatch,
field: keyof Model.FishingLogInfo,
value: string | number
) => void;
}
@@ -65,7 +54,7 @@ export const FishCardForm: React.FC<FishCardFormProps> = ({
{isEditing ? (
<FishSelectDropdown
options={fishNameOptions}
selectedValue={fish.fish_name}
selectedValue={fish.fish_name ?? ""}
isOpen={selectedFishIndex === index}
onToggle={() =>
setSelectedFishIndex(selectedFishIndex === index ? null : index)
@@ -110,7 +99,7 @@ export const FishCardForm: React.FC<FishCardFormProps> = ({
{isEditing ? (
<FishSelectDropdown
options={unitOptions}
selectedValue={fish.catch_unit}
selectedValue={fish.catch_unit ?? ""}
isOpen={selectedUnitIndex === index}
onToggle={() =>
setSelectedUnitIndex(selectedUnitIndex === index ? null : index)

13
components/tripInfo/modal/NetDetailModal/components/FishCardHeader.tsx
View File

@@ -2,19 +2,8 @@ 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;
fish: Model.FishingLogInfo;
}
export const FishCardHeader: React.FC<FishCardHeaderProps> = ({ fish }) => {

15
components/tripInfo/modal/NetDetailModal/components/FishCardList.tsx
View File

@@ -5,19 +5,8 @@ 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[];
catchList: Model.FishingLogInfo[];
isEditing: boolean;
expandedFishIndex: number[];
selectedFishIndex: number | null;
@@ -31,7 +20,7 @@ interface FishCardListProps {
onToggleExpanded: (index: number) => void;
onUpdateCatchItem: (
index: number,
field: keyof FishCatch,
field: keyof Model.FishingLogInfo,
value: string | number
) => void;
setSelectedFishIndex: (index: number | null) => void;

20
components/tripInfo/modal/NetDetailModal/components/InfoSection.tsx
View File

@@ -17,31 +17,37 @@ interface NetDetail {
}
interface InfoSectionProps {
netData?: NetDetail;
netData?: Model.FishingLog;
isCompleted: boolean;
stt?: number;
}
export const InfoSection: React.FC<InfoSectionProps> = ({
netData,
isCompleted,
stt,
}) => {
if (!netData) {
return null;
}
const infoItems = [
{ label: "Số thứ tự", value: netData.stt },
{ label: "Số thứ tự", value: `Mẻ ${stt}` },
{
label: "Trạng thái",
value: netData.trangThai,
value: netData.status === 1 ? "Đã hoàn thành" : "Chưa hoàn thành",
isStatus: true,
},
{
label: "Thời gian bắt đầu",
value: netData.thoiGianBatDau || "Chưa cập nhật",
value: netData.start_at
? new Date(netData.start_at).toLocaleString()
: "Chưa cập nhật",
},
{
label: "Thời gian kết thúc",
value: netData.thoiGianKetThuc || "Chưa cập nhật",
value: netData.start_at
? new Date(netData.end_at).toLocaleString()
: "Chưa cập nhật",
},
{
label: "Vị trí hạ thu",
@@ -70,7 +76,7 @@ export const InfoSection: React.FC<InfoSectionProps> = ({
<View
style={[
styles.statusBadge,
isCompleted
item.value === "Đã hoàn thành"
? styles.statusBadgeCompleted
: styles.statusBadgeInProgress,
]}
@@ -78,7 +84,7 @@ export const InfoSection: React.FC<InfoSectionProps> = ({
<Text
style={[
styles.statusBadgeText,
isCompleted
item.value === "Đã hoàn thành"
? styles.statusBadgeTextCompleted
: styles.statusBadgeTextInProgress,
]}