120 lines
3.0 KiB
TypeScript
120 lines
3.0 KiB
TypeScript
import { useI18n } from "@/hooks/use-i18n";
|
|
import { useThemeContext } from "@/hooks/use-theme-context";
|
|
import React from "react";
|
|
import { StyleSheet, Text, View } from "react-native";
|
|
|
|
interface InfoSectionProps {
|
|
fishingLog?: Model.FishingLog;
|
|
stt?: number;
|
|
}
|
|
|
|
export const InfoSection: React.FC<InfoSectionProps> = ({
|
|
fishingLog,
|
|
stt,
|
|
}) => {
|
|
const { t } = useI18n();
|
|
const { colors } = useThemeContext();
|
|
const styles = React.useMemo(() => createStyles(colors), [colors]);
|
|
|
|
if (!fishingLog) {
|
|
return null;
|
|
}
|
|
const infoItems = [
|
|
{
|
|
label: t("trip.infoSection.sttLabel"),
|
|
value: `${t("trip.infoSection.haulPrefix")} ${stt}`,
|
|
},
|
|
{
|
|
label: t("trip.infoSection.statusLabel"),
|
|
value:
|
|
fishingLog.status === 1
|
|
? t("trip.infoSection.statusCompleted")
|
|
: t("trip.infoSection.statusPending"),
|
|
isStatus: true,
|
|
},
|
|
{
|
|
label: t("trip.infoSection.startTimeLabel"),
|
|
value: fishingLog.start_at
|
|
? new Date(fishingLog.start_at).toLocaleString()
|
|
: t("trip.infoSection.notUpdated"),
|
|
},
|
|
{
|
|
label: t("trip.infoSection.endTimeLabel"),
|
|
value:
|
|
fishingLog.end_at.toString() !== "0001-01-01T00:00:00Z"
|
|
? new Date(fishingLog.end_at).toLocaleString()
|
|
: "-",
|
|
},
|
|
];
|
|
|
|
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,
|
|
item.value === t("trip.infoSection.statusCompleted")
|
|
? styles.statusBadgeCompleted
|
|
: styles.statusBadgeInProgress,
|
|
]}
|
|
>
|
|
<Text style={styles.statusBadgeText}>{item.value}</Text>
|
|
</View>
|
|
) : (
|
|
<Text style={styles.infoValue}>{item.value}</Text>
|
|
)}
|
|
</View>
|
|
))}
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const createStyles = (colors: any) =>
|
|
StyleSheet.create({
|
|
infoCard: {
|
|
borderWidth: 1,
|
|
borderColor: colors.border,
|
|
borderRadius: 8,
|
|
padding: 12,
|
|
marginBottom: 12,
|
|
backgroundColor: colors.surfaceSecondary,
|
|
},
|
|
infoRow: {
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
marginBottom: 8,
|
|
},
|
|
infoLabel: {
|
|
fontSize: 14,
|
|
fontWeight: "600",
|
|
color: colors.textSecondary,
|
|
},
|
|
infoValue: {
|
|
fontSize: 16,
|
|
color: colors.text,
|
|
paddingVertical: 8,
|
|
},
|
|
statusBadge: {
|
|
paddingVertical: 4,
|
|
paddingHorizontal: 12,
|
|
borderRadius: 12,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
},
|
|
statusBadgeCompleted: {
|
|
backgroundColor: colors.success,
|
|
},
|
|
statusBadgeInProgress: {
|
|
backgroundColor: colors.warning,
|
|
},
|
|
statusBadgeText: {
|
|
fontSize: 14,
|
|
fontWeight: "600",
|
|
color: "#fff",
|
|
},
|
|
});
|