thêm tab "Xem chi tiết chuyến đi", "Xem chi tiết thành viên chuyến đi", tái sử dụng lại components modal tripForm
This commit is contained in:
356
components/diary/TripDetailSections/FishingLogsSection.tsx
Normal file
356
components/diary/TripDetailSections/FishingLogsSection.tsx
Normal file
@@ -0,0 +1,356 @@
|
||||
import React from "react";
|
||||
import { View, Text, StyleSheet, Platform } from "react-native";
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import { useThemeContext } from "@/hooks/use-theme-context";
|
||||
import { useI18n } from "@/hooks/use-i18n";
|
||||
import SectionCard from "./SectionCard";
|
||||
|
||||
interface FishingLogsSectionProps {
|
||||
fishingLogs?: Model.FishingLog[] | null;
|
||||
}
|
||||
|
||||
export default function FishingLogsSection({ fishingLogs = [] }: FishingLogsSectionProps) {
|
||||
const { t } = useI18n();
|
||||
const { colors } = useThemeContext();
|
||||
|
||||
const logs = fishingLogs || [];
|
||||
|
||||
const formatDateTime = (date?: Date) => {
|
||||
if (!date) return "--";
|
||||
const d = new Date(date);
|
||||
return d.toLocaleString("vi-VN", {
|
||||
day: "2-digit",
|
||||
month: "2-digit",
|
||||
year: "numeric",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
});
|
||||
};
|
||||
|
||||
const formatCoord = (lat?: number, lon?: number) => {
|
||||
if (lat === undefined || lon === undefined) return "--";
|
||||
return `${lat.toFixed(4)}°N, ${lon.toFixed(4)}°E`;
|
||||
};
|
||||
|
||||
const getStatusLabel = (status?: number) => {
|
||||
switch (status) {
|
||||
case 0:
|
||||
return { label: t("diary.tripDetail.logStatusPending"), color: "#FEF3C7", textColor: "#92400E" };
|
||||
case 1:
|
||||
return { label: t("diary.tripDetail.logStatusActive"), color: "#DBEAFE", textColor: "#1E40AF" };
|
||||
case 2:
|
||||
return { label: t("diary.tripDetail.logStatusCompleted"), color: "#D1FAE5", textColor: "#065F46" };
|
||||
default:
|
||||
return { label: t("diary.tripDetail.logStatusUnknown"), color: "#F3F4F6", textColor: "#4B5563" };
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<SectionCard
|
||||
title={t("diary.tripDetail.fishingLogs")}
|
||||
icon="boat-outline"
|
||||
count={logs.length}
|
||||
collapsible
|
||||
defaultExpanded={true}
|
||||
>
|
||||
{logs.length === 0 ? (
|
||||
<View style={styles.emptyContainer}>
|
||||
<Ionicons name="fish-outline" size={40} color={colors.textSecondary} />
|
||||
<Text style={[styles.emptyText, { color: colors.textSecondary }]}>
|
||||
{t("diary.tripDetail.noFishingLogs")}
|
||||
</Text>
|
||||
</View>
|
||||
) : (
|
||||
<View style={styles.list}>
|
||||
{logs.map((log, index) => {
|
||||
const status = getStatusLabel(log.status);
|
||||
const catchCount = log.info?.length || 0;
|
||||
|
||||
return (
|
||||
<View
|
||||
key={log.fishing_log_id || index}
|
||||
style={[styles.logItem, { borderColor: colors.separator }]}
|
||||
>
|
||||
{/* Header */}
|
||||
<View style={styles.logHeader}>
|
||||
<View style={styles.logIndex}>
|
||||
<Text style={[styles.logIndexText, { color: colors.primary }]}>
|
||||
#{index + 1}
|
||||
</Text>
|
||||
</View>
|
||||
<View style={[styles.statusBadge, { backgroundColor: status.color }]}>
|
||||
<Text style={[styles.statusText, { color: status.textColor }]}>
|
||||
{status.label}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Time Info */}
|
||||
<View style={styles.timeRow}>
|
||||
<View style={styles.timeItem}>
|
||||
<Ionicons name="play-circle-outline" size={16} color={colors.success || "#22C55E"} />
|
||||
<Text style={[styles.timeLabel, { color: colors.textSecondary }]}>
|
||||
{t("diary.tripDetail.startTime")}:
|
||||
</Text>
|
||||
<Text style={[styles.timeValue, { color: colors.text }]}>
|
||||
{formatDateTime(log.start_at)}
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.timeItem}>
|
||||
<Ionicons name="stop-circle-outline" size={16} color={colors.error || "#EF4444"} />
|
||||
<Text style={[styles.timeLabel, { color: colors.textSecondary }]}>
|
||||
{t("diary.tripDetail.endTime")}:
|
||||
</Text>
|
||||
<Text style={[styles.timeValue, { color: colors.text }]}>
|
||||
{formatDateTime(log.end_at)}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Location Info */}
|
||||
<View style={[styles.locationContainer, { backgroundColor: colors.backgroundSecondary }]}>
|
||||
<View style={styles.locationItem}>
|
||||
<Ionicons name="location" size={14} color={colors.success || "#22C55E"} />
|
||||
<Text style={[styles.locationLabel, { color: colors.textSecondary }]}>
|
||||
{t("diary.tripDetail.startLocation")}:
|
||||
</Text>
|
||||
<Text style={[styles.locationValue, { color: colors.text }]}>
|
||||
{formatCoord(log.start_lat, log.start_lon)}
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.locationItem}>
|
||||
<Ionicons name="location" size={14} color={colors.error || "#EF4444"} />
|
||||
<Text style={[styles.locationLabel, { color: colors.textSecondary }]}>
|
||||
{t("diary.tripDetail.haulLocation")}:
|
||||
</Text>
|
||||
<Text style={[styles.locationValue, { color: colors.text }]}>
|
||||
{formatCoord(log.haul_lat, log.haul_lon)}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Catch Info */}
|
||||
{catchCount > 0 && (
|
||||
<View style={styles.catchContainer}>
|
||||
<View style={styles.catchHeader}>
|
||||
<Ionicons name="fish" size={16} color={colors.primary} />
|
||||
<Text style={[styles.catchLabel, { color: colors.text }]}>
|
||||
{t("diary.tripDetail.catchInfo")} ({catchCount} {t("diary.tripDetail.species")})
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.catchList}>
|
||||
{log.info?.slice(0, 3).map((fish, fishIndex) => (
|
||||
<View key={fishIndex} style={styles.catchItem}>
|
||||
<Text style={[styles.fishName, { color: colors.text }]}>
|
||||
{fish.fish_name || t("diary.tripDetail.unknownFish")}
|
||||
</Text>
|
||||
<Text style={[styles.fishAmount, { color: colors.textSecondary }]}>
|
||||
{fish.catch_number} {fish.catch_unit}
|
||||
</Text>
|
||||
</View>
|
||||
))}
|
||||
{catchCount > 3 && (
|
||||
<Text style={[styles.moreText, { color: colors.primary }]}>
|
||||
+{catchCount - 3} {t("diary.tripDetail.more")}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* Weather */}
|
||||
{log.weather_description && (
|
||||
<View style={styles.weatherRow}>
|
||||
<Ionicons name="cloudy-outline" size={14} color={colors.textSecondary} />
|
||||
<Text style={[styles.weatherText, { color: colors.textSecondary }]}>
|
||||
{log.weather_description}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
)}
|
||||
</SectionCard>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
emptyContainer: {
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
paddingVertical: 24,
|
||||
gap: 8,
|
||||
},
|
||||
emptyText: {
|
||||
fontSize: 14,
|
||||
fontFamily: Platform.select({
|
||||
ios: "System",
|
||||
android: "Roboto",
|
||||
default: "System",
|
||||
}),
|
||||
},
|
||||
list: {
|
||||
gap: 16,
|
||||
},
|
||||
logItem: {
|
||||
borderWidth: 1,
|
||||
borderRadius: 10,
|
||||
padding: 12,
|
||||
},
|
||||
logHeader: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
marginBottom: 10,
|
||||
},
|
||||
logIndex: {
|
||||
paddingHorizontal: 10,
|
||||
paddingVertical: 4,
|
||||
borderRadius: 4,
|
||||
backgroundColor: "rgba(59, 130, 246, 0.1)",
|
||||
},
|
||||
logIndexText: {
|
||||
fontSize: 14,
|
||||
fontWeight: "700",
|
||||
fontFamily: Platform.select({
|
||||
ios: "System",
|
||||
android: "Roboto",
|
||||
default: "System",
|
||||
}),
|
||||
},
|
||||
statusBadge: {
|
||||
paddingHorizontal: 10,
|
||||
paddingVertical: 4,
|
||||
borderRadius: 4,
|
||||
},
|
||||
statusText: {
|
||||
fontSize: 12,
|
||||
fontWeight: "600",
|
||||
fontFamily: Platform.select({
|
||||
ios: "System",
|
||||
android: "Roboto",
|
||||
default: "System",
|
||||
}),
|
||||
},
|
||||
timeRow: {
|
||||
gap: 6,
|
||||
marginBottom: 10,
|
||||
},
|
||||
timeItem: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: 6,
|
||||
},
|
||||
timeLabel: {
|
||||
fontSize: 12,
|
||||
fontFamily: Platform.select({
|
||||
ios: "System",
|
||||
android: "Roboto",
|
||||
default: "System",
|
||||
}),
|
||||
},
|
||||
timeValue: {
|
||||
fontSize: 12,
|
||||
fontWeight: "500",
|
||||
fontFamily: Platform.select({
|
||||
ios: "System",
|
||||
android: "Roboto",
|
||||
default: "System",
|
||||
}),
|
||||
},
|
||||
locationContainer: {
|
||||
padding: 10,
|
||||
borderRadius: 6,
|
||||
gap: 6,
|
||||
marginBottom: 10,
|
||||
},
|
||||
locationItem: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: 6,
|
||||
},
|
||||
locationLabel: {
|
||||
fontSize: 11,
|
||||
fontFamily: Platform.select({
|
||||
ios: "System",
|
||||
android: "Roboto",
|
||||
default: "System",
|
||||
}),
|
||||
},
|
||||
locationValue: {
|
||||
fontSize: 11,
|
||||
fontWeight: "500",
|
||||
fontFamily: Platform.select({
|
||||
ios: "System",
|
||||
android: "Roboto",
|
||||
default: "System",
|
||||
}),
|
||||
},
|
||||
catchContainer: {
|
||||
marginBottom: 10,
|
||||
},
|
||||
catchHeader: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: 6,
|
||||
marginBottom: 6,
|
||||
},
|
||||
catchLabel: {
|
||||
fontSize: 13,
|
||||
fontWeight: "600",
|
||||
fontFamily: Platform.select({
|
||||
ios: "System",
|
||||
android: "Roboto",
|
||||
default: "System",
|
||||
}),
|
||||
},
|
||||
catchList: {
|
||||
gap: 4,
|
||||
paddingLeft: 22,
|
||||
},
|
||||
catchItem: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
},
|
||||
fishName: {
|
||||
fontSize: 12,
|
||||
fontFamily: Platform.select({
|
||||
ios: "System",
|
||||
android: "Roboto",
|
||||
default: "System",
|
||||
}),
|
||||
},
|
||||
fishAmount: {
|
||||
fontSize: 12,
|
||||
fontFamily: Platform.select({
|
||||
ios: "System",
|
||||
android: "Roboto",
|
||||
default: "System",
|
||||
}),
|
||||
},
|
||||
moreText: {
|
||||
fontSize: 12,
|
||||
fontWeight: "500",
|
||||
fontFamily: Platform.select({
|
||||
ios: "System",
|
||||
android: "Roboto",
|
||||
default: "System",
|
||||
}),
|
||||
},
|
||||
weatherRow: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: 6,
|
||||
},
|
||||
weatherText: {
|
||||
fontSize: 12,
|
||||
fontStyle: "italic",
|
||||
fontFamily: Platform.select({
|
||||
ios: "System",
|
||||
android: "Roboto",
|
||||
default: "System",
|
||||
}),
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user