Hiển thị tọa độ và khu vực khi tàu vi phạm
This commit is contained in:
Tran Anh Tuan
@@ -1,76 +0,0 @@
|
||||
import dayjs from "dayjs";
|
||||
import { FlatList, Text, TouchableOpacity, View } from "react-native";
|
||||
|
||||
type AlarmItem = {
|
||||
name: string;
|
||||
t: number;
|
||||
level: number;
|
||||
id: string;
|
||||
};
|
||||
|
||||
type AlarmProp = {
|
||||
alarmsData: AlarmItem[];
|
||||
onPress?: (alarm: AlarmItem) => void;
|
||||
};
|
||||
|
||||
const AlarmList = ({ alarmsData, onPress }: AlarmProp) => {
|
||||
const sortedAlarmsData = [...alarmsData].sort((a, b) => b.level - a.level);
|
||||
return (
|
||||
<FlatList
|
||||
data={sortedAlarmsData}
|
||||
renderItem={({ item }) => (
|
||||
<TouchableOpacity
|
||||
onPress={() => onPress?.(item)}
|
||||
className="flex flex-row gap-5 p-3 justify-start items-baseline w-full"
|
||||
>
|
||||
<View
|
||||
className={`flex-none h-3 w-3 rounded-full ${getBackgroundColorByLevel(
|
||||
item.level
|
||||
)}`}
|
||||
></View>
|
||||
<View className="flex">
|
||||
<Text className={`grow text-lg ${getTextColorByLevel(item.level)}`}>
|
||||
{item.name}
|
||||
</Text>
|
||||
<Text className="grow text-md text-gray-400">
|
||||
{formatTimestamp(item.t)}
|
||||
</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
keyExtractor={(item) => item.id}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const getBackgroundColorByLevel = (level: number) => {
|
||||
switch (level) {
|
||||
case 1:
|
||||
return "bg-yellow-500";
|
||||
case 2:
|
||||
return "bg-orange-500";
|
||||
case 3:
|
||||
return "bg-red-500";
|
||||
default:
|
||||
return "bg-gray-500";
|
||||
}
|
||||
};
|
||||
|
||||
const getTextColorByLevel = (level: number) => {
|
||||
switch (level) {
|
||||
case 1:
|
||||
return "text-yellow-600";
|
||||
case 2:
|
||||
return "text-orange-600";
|
||||
case 3:
|
||||
return "text-red-600";
|
||||
default:
|
||||
return "text-gray-600";
|
||||
}
|
||||
};
|
||||
|
||||
const formatTimestamp = (timestamp: number) => {
|
||||
return dayjs.unix(timestamp).format("DD/MM/YYYY HH:mm:ss");
|
||||
};
|
||||
|
||||
export default AlarmList;
|
||||
197
components/alarm/WarningCard.tsx
Normal file
197
components/alarm/WarningCard.tsx
Normal file
@@ -0,0 +1,197 @@
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import dayjs from "dayjs";
|
||||
import { FlatList, Text, TouchableOpacity, View } from "react-native";
|
||||
|
||||
export type AlarmStatus = "confirmed" | "pending";
|
||||
|
||||
export interface AlarmListItem {
|
||||
id: string;
|
||||
code: string;
|
||||
title: string;
|
||||
station: string;
|
||||
timestamp: number;
|
||||
level: 1 | 2 | 3; // 1: warning (yellow), 2: caution (orange/yellow), 3: danger (red)
|
||||
status: AlarmStatus;
|
||||
}
|
||||
|
||||
type AlarmProp = {
|
||||
alarmsData: AlarmListItem[];
|
||||
onPress?: (alarm: AlarmListItem) => void;
|
||||
};
|
||||
|
||||
const AlarmList = ({ alarmsData, onPress }: AlarmProp) => {
|
||||
return (
|
||||
<FlatList
|
||||
data={alarmsData}
|
||||
contentContainerStyle={{ paddingHorizontal: 16, paddingVertical: 8 }}
|
||||
ItemSeparatorComponent={() => <View className="h-3" />}
|
||||
renderItem={({ item }) => (
|
||||
<AlarmCard alarm={item} onPress={() => onPress?.(item)} />
|
||||
)}
|
||||
keyExtractor={(item) => item.id}
|
||||
showsVerticalScrollIndicator={false}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
type AlarmCardProps = {
|
||||
alarm: AlarmListItem;
|
||||
onPress?: () => void;
|
||||
};
|
||||
|
||||
const AlarmCard = ({ alarm, onPress }: AlarmCardProps) => {
|
||||
const { bgColor, borderColor, iconColor, iconBgColor } = getColorsByLevel(
|
||||
alarm.level
|
||||
);
|
||||
const statusConfig = getStatusConfig(alarm.status);
|
||||
|
||||
return (
|
||||
<TouchableOpacity
|
||||
onPress={onPress}
|
||||
activeOpacity={0.7}
|
||||
className={`rounded-xl p-4 ${bgColor} ${borderColor} border`}
|
||||
>
|
||||
<View className="flex-row justify-between items-start">
|
||||
{/* Left content */}
|
||||
<View className="flex-row flex-1">
|
||||
{/* Icon */}
|
||||
<View
|
||||
className={`w-10 h-10 rounded-full items-center justify-center mr-3 ${iconBgColor}`}
|
||||
>
|
||||
<Ionicons
|
||||
name={getIconByLevel(alarm.level)}
|
||||
size={20}
|
||||
color={iconColor}
|
||||
/>
|
||||
</View>
|
||||
|
||||
{/* Info */}
|
||||
<View className="flex-1">
|
||||
{/* Code */}
|
||||
<Text
|
||||
className={`text-xs font-medium mb-1 ${getCodeTextColor(
|
||||
alarm.level
|
||||
)}`}
|
||||
>
|
||||
{alarm.code}
|
||||
</Text>
|
||||
|
||||
{/* Title */}
|
||||
<Text className="text-base font-semibold text-gray-800 mb-2">
|
||||
{alarm.title}
|
||||
</Text>
|
||||
|
||||
{/* Station and Time */}
|
||||
<View className="flex-row">
|
||||
<View className="mr-6">
|
||||
<Text className="text-xs text-gray-400 mb-0.5">Trạm</Text>
|
||||
<Text className="text-sm text-gray-600">{alarm.station}</Text>
|
||||
</View>
|
||||
<View>
|
||||
<Text className="text-xs text-gray-400 mb-0.5">Thời gian</Text>
|
||||
<Text className="text-sm text-gray-600">
|
||||
{formatTimestamp(alarm.timestamp)}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Status Badge */}
|
||||
{/* <View className="mt-3">
|
||||
<View
|
||||
className={`self-start px-3 py-1.5 rounded-full ${statusConfig.bgColor}`}
|
||||
>
|
||||
<Text
|
||||
className={`text-xs font-medium ${statusConfig.textColor}`}
|
||||
>
|
||||
{statusConfig.label}
|
||||
</Text>
|
||||
</View>
|
||||
</View> */}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Checkmark for confirmed */}
|
||||
{/* {alarm.status === "confirmed" && (
|
||||
<View className="w-6 h-6 rounded-full bg-green-500 items-center justify-center">
|
||||
<Ionicons name="checkmark" size={16} color="white" />
|
||||
</View>
|
||||
)} */}
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
};
|
||||
|
||||
const getColorsByLevel = (level: number) => {
|
||||
switch (level) {
|
||||
case 3: // Danger - Red
|
||||
return {
|
||||
bgColor: "bg-red-50",
|
||||
borderColor: "border-red-200",
|
||||
iconColor: "#DC2626",
|
||||
iconBgColor: "bg-red-100",
|
||||
};
|
||||
case 2: // Caution - Yellow/Orange
|
||||
return {
|
||||
bgColor: "bg-yellow-50",
|
||||
borderColor: "border-yellow-200",
|
||||
iconColor: "#CA8A04",
|
||||
iconBgColor: "bg-yellow-100",
|
||||
};
|
||||
case 1: // Info - Green
|
||||
default:
|
||||
return {
|
||||
bgColor: "bg-green-50",
|
||||
borderColor: "border-green-200",
|
||||
iconColor: "#16A34A",
|
||||
iconBgColor: "bg-green-100",
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const getIconByLevel = (level: number): keyof typeof Ionicons.glyphMap => {
|
||||
switch (level) {
|
||||
case 3:
|
||||
return "warning";
|
||||
case 2:
|
||||
return "alert-circle";
|
||||
case 1:
|
||||
default:
|
||||
return "checkmark-circle";
|
||||
}
|
||||
};
|
||||
|
||||
const getCodeTextColor = (level: number) => {
|
||||
switch (level) {
|
||||
case 3:
|
||||
return "text-red-600";
|
||||
case 2:
|
||||
return "text-yellow-600";
|
||||
case 1:
|
||||
default:
|
||||
return "text-green-600";
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusConfig = (status: AlarmStatus) => {
|
||||
switch (status) {
|
||||
case "confirmed":
|
||||
return {
|
||||
label: "Đã xác nhận",
|
||||
bgColor: "bg-green-100",
|
||||
textColor: "text-green-700",
|
||||
};
|
||||
case "pending":
|
||||
default:
|
||||
return {
|
||||
label: "Chờ xác nhận",
|
||||
bgColor: "bg-yellow-100",
|
||||
textColor: "text-yellow-700",
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const formatTimestamp = (timestamp: number) => {
|
||||
return dayjs.unix(timestamp).format("YYYY-MM-DD HH:mm");
|
||||
};
|
||||
|
||||
export default AlarmList;
|
||||
143
components/map/AlarmList.tsx
Normal file
143
components/map/AlarmList.tsx
Normal file
@@ -0,0 +1,143 @@
|
||||
import { AlarmData } from "@/app/(tabs)";
|
||||
import { ThemedText } from "@/components/themed-text";
|
||||
import { formatTimestamp } from "@/services/time_service";
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import { useCallback } from "react";
|
||||
import { FlatList, TouchableOpacity, View } from "react-native";
|
||||
|
||||
// ============ Types ============
|
||||
type AlarmType = "approaching" | "entered" | "fishing";
|
||||
|
||||
interface AlarmCardProps {
|
||||
alarm: AlarmData;
|
||||
onPress?: () => void;
|
||||
}
|
||||
|
||||
// ============ Config ============
|
||||
const ALARM_CONFIG: Record<
|
||||
AlarmType,
|
||||
{
|
||||
icon: keyof typeof Ionicons.glyphMap;
|
||||
label: string;
|
||||
bgColor: string;
|
||||
borderColor: string;
|
||||
iconBgColor: string;
|
||||
iconColor: string;
|
||||
labelColor: string;
|
||||
}
|
||||
> = {
|
||||
entered: {
|
||||
icon: "warning",
|
||||
label: "Xâm nhập",
|
||||
bgColor: "bg-red-50",
|
||||
borderColor: "border-red-200",
|
||||
iconBgColor: "bg-red-100",
|
||||
iconColor: "#DC2626",
|
||||
labelColor: "text-red-600",
|
||||
},
|
||||
approaching: {
|
||||
icon: "alert-circle",
|
||||
label: "Tiếp cận",
|
||||
bgColor: "bg-amber-50",
|
||||
borderColor: "border-amber-200",
|
||||
iconBgColor: "bg-amber-100",
|
||||
iconColor: "#D97706",
|
||||
labelColor: "text-amber-600",
|
||||
},
|
||||
fishing: {
|
||||
icon: "fish",
|
||||
label: "Đánh bắt",
|
||||
bgColor: "bg-orange-50",
|
||||
borderColor: "border-orange-200",
|
||||
iconBgColor: "bg-orange-100",
|
||||
iconColor: "#EA580C",
|
||||
labelColor: "text-orange-600",
|
||||
},
|
||||
};
|
||||
|
||||
// ============ AlarmCard Component ============
|
||||
const AlarmCard = ({ alarm, onPress }: AlarmCardProps) => {
|
||||
const config = ALARM_CONFIG[alarm.type];
|
||||
|
||||
return (
|
||||
<TouchableOpacity
|
||||
onPress={onPress}
|
||||
activeOpacity={0.7}
|
||||
className={`rounded-2xl p-4 ${config.bgColor} ${config.borderColor} border shadow-sm`}
|
||||
>
|
||||
<View className="flex-row items-start gap-3">
|
||||
{/* Icon Container */}
|
||||
<View
|
||||
className={`w-12 h-12 rounded-xl items-center justify-center ${config.iconBgColor}`}
|
||||
>
|
||||
<Ionicons name={config.icon} size={24} color={config.iconColor} />
|
||||
</View>
|
||||
|
||||
{/* Content */}
|
||||
<View className="flex-1">
|
||||
{/* Header: Ship name + Badge */}
|
||||
<View className="flex-row items-center justify-between mb-1">
|
||||
<ThemedText className="text-base font-bold text-gray-800 flex-1 mr-2">
|
||||
{alarm.ship_name || alarm.thing_id}
|
||||
</ThemedText>
|
||||
<View className={`px-2 py-1 rounded-full ${config.iconBgColor}`}>
|
||||
<ThemedText
|
||||
className={`text-xs font-semibold ${config.labelColor}`}
|
||||
>
|
||||
{config.label}
|
||||
</ThemedText>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Zone Info */}
|
||||
<ThemedText className="text-xs text-gray-600 mb-2" numberOfLines={2}>
|
||||
{alarm.zone.message || alarm.zone.zone_name}
|
||||
</ThemedText>
|
||||
|
||||
{/* Footer: Zone ID + Time */}
|
||||
<View className="flex-row items-center justify-between">
|
||||
<View className="flex-row items-center gap-1">
|
||||
<Ionicons name="time-outline" size={20} color="#6B7280" />
|
||||
<ThemedText className="text-xs text-gray-500">
|
||||
{formatTimestamp(alarm.zone.gps_time)}
|
||||
</ThemedText>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
};
|
||||
|
||||
// ============ Main Component ============
|
||||
interface AlarmListProps {
|
||||
data: AlarmData[];
|
||||
onPress?: (alarm: AlarmData) => void;
|
||||
}
|
||||
|
||||
export default function AlarmList({ data, onPress }: AlarmListProps) {
|
||||
const renderItem = useCallback(
|
||||
({ item }: { item: AlarmData }) => (
|
||||
<AlarmCard alarm={item} onPress={() => onPress?.(item)} />
|
||||
),
|
||||
[onPress]
|
||||
);
|
||||
|
||||
const keyExtractor = useCallback(
|
||||
(item: AlarmData, index: number) => `${item.thing_id}-${index}`,
|
||||
[]
|
||||
);
|
||||
|
||||
const ItemSeparator = useCallback(() => <View className="h-3" />, []);
|
||||
|
||||
return (
|
||||
<FlatList
|
||||
data={data}
|
||||
renderItem={renderItem}
|
||||
keyExtractor={keyExtractor}
|
||||
ItemSeparatorComponent={ItemSeparator}
|
||||
contentContainerStyle={{ padding: 16 }}
|
||||
showsVerticalScrollIndicator={false}
|
||||
/>
|
||||
);
|
||||
}
|
||||
133
components/map/CircleWithLabel.tsx
Normal file
133
components/map/CircleWithLabel.tsx
Normal file
@@ -0,0 +1,133 @@
|
||||
import { ANDROID_PLATFORM } from "@/constants";
|
||||
import { usePlatform } from "@/hooks/use-platform";
|
||||
import React, { useRef } from "react";
|
||||
import { StyleSheet, Text, View } from "react-native";
|
||||
import { Circle, MapMarker, Marker } from "react-native-maps";
|
||||
|
||||
export interface CircleWithLabelProps {
|
||||
center: {
|
||||
latitude: number;
|
||||
longitude: number;
|
||||
};
|
||||
radius: number;
|
||||
label?: string;
|
||||
content?: string;
|
||||
fillColor?: string;
|
||||
strokeColor?: string;
|
||||
strokeWidth?: number;
|
||||
zIndex?: number;
|
||||
zoomLevel?: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Component render Circle kèm Label/Text ở giữa
|
||||
*/
|
||||
export const CircleWithLabel: React.FC<CircleWithLabelProps> = ({
|
||||
center,
|
||||
radius,
|
||||
label,
|
||||
content,
|
||||
fillColor = "rgba(220, 20, 60, 0.6)",
|
||||
strokeColor = "rgba(220, 20, 60, 0.8)",
|
||||
strokeWidth = 2,
|
||||
zIndex = 50,
|
||||
zoomLevel = 10,
|
||||
}) => {
|
||||
if (!center) {
|
||||
return null;
|
||||
}
|
||||
const platform = usePlatform();
|
||||
const markerRef = useRef<MapMarker>(null);
|
||||
|
||||
// Tính font size dựa trên zoom level
|
||||
// Zoom càng thấp (xa ra) thì font size càng nhỏ
|
||||
const calculateFontSize = (baseSize: number) => {
|
||||
const baseZoom = 10;
|
||||
// Giảm scale factor để text không quá to khi zoom out
|
||||
const scaleFactor = Math.pow(2, (zoomLevel - baseZoom) * 0.3);
|
||||
return Math.max(baseSize * scaleFactor, 5); // Tối thiểu 5px
|
||||
};
|
||||
|
||||
const labelFontSize = calculateFontSize(12);
|
||||
const contentFontSize = calculateFontSize(10);
|
||||
|
||||
const paddingScale = Math.max(Math.pow(2, (zoomLevel - 10) * 0.2), 0.5);
|
||||
const minWidthScale = Math.max(Math.pow(2, (zoomLevel - 10) * 0.25), 0.9);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Circle
|
||||
center={center}
|
||||
radius={radius}
|
||||
fillColor={fillColor}
|
||||
strokeColor={strokeColor}
|
||||
strokeWidth={strokeWidth}
|
||||
zIndex={zIndex}
|
||||
/>
|
||||
{label && (
|
||||
<Marker
|
||||
ref={markerRef}
|
||||
coordinate={center}
|
||||
zIndex={50}
|
||||
tracksViewChanges={platform === ANDROID_PLATFORM ? false : true}
|
||||
anchor={{ x: 0.5, y: 0.5 }}
|
||||
title={platform === ANDROID_PLATFORM ? label : undefined}
|
||||
description={platform === ANDROID_PLATFORM ? content : undefined}
|
||||
>
|
||||
<View style={styles.markerContainer}>
|
||||
<View
|
||||
style={[
|
||||
{
|
||||
paddingHorizontal: 5 * paddingScale,
|
||||
paddingVertical: 5 * paddingScale,
|
||||
minWidth: 80,
|
||||
maxWidth: 150 * minWidthScale,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Text
|
||||
style={[styles.labelText, { fontSize: labelFontSize }]}
|
||||
numberOfLines={2}
|
||||
>
|
||||
{label}
|
||||
</Text>
|
||||
{content && (
|
||||
<Text
|
||||
style={[
|
||||
styles.contentText,
|
||||
{ fontSize: contentFontSize, marginTop: 2 * paddingScale },
|
||||
]}
|
||||
numberOfLines={2}
|
||||
>
|
||||
{content}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
</Marker>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
markerContainer: {
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
},
|
||||
labelText: {
|
||||
color: "#fff",
|
||||
fontSize: 14,
|
||||
fontWeight: "bold",
|
||||
letterSpacing: 0.3,
|
||||
textAlign: "center",
|
||||
},
|
||||
contentText: {
|
||||
color: "#fff",
|
||||
fontSize: 11,
|
||||
fontWeight: "600",
|
||||
letterSpacing: 0.2,
|
||||
textAlign: "center",
|
||||
opacity: 0.95,
|
||||
},
|
||||
});
|
||||
110
components/map/MarkerCustom.tsx
Normal file
110
components/map/MarkerCustom.tsx
Normal file
@@ -0,0 +1,110 @@
|
||||
import { getShipIcon } from "@/services/map_service";
|
||||
import React from "react";
|
||||
import { Animated, Image, StyleSheet, View } from "react-native";
|
||||
import { Marker } from "react-native-maps";
|
||||
|
||||
interface MarkerCustomProps {
|
||||
id: string;
|
||||
latitude: number;
|
||||
longitude: number;
|
||||
shipName?: string;
|
||||
description?: string;
|
||||
stateLevel?: number;
|
||||
isFishing?: boolean;
|
||||
heading?: number;
|
||||
zIndex?: number;
|
||||
anchor?: { x: number; y: number };
|
||||
tracksViewChanges?: boolean;
|
||||
identifier?: string;
|
||||
animated?: {
|
||||
scale: Animated.Value;
|
||||
opacity: Animated.Value;
|
||||
};
|
||||
}
|
||||
|
||||
export const MarkerCustom: React.FC<MarkerCustomProps> = ({
|
||||
id,
|
||||
latitude,
|
||||
longitude,
|
||||
shipName,
|
||||
description,
|
||||
stateLevel = 0,
|
||||
isFishing = false,
|
||||
heading = 0,
|
||||
zIndex = 50,
|
||||
anchor = { x: 0.5, y: 0.5 },
|
||||
tracksViewChanges = false,
|
||||
identifier,
|
||||
animated,
|
||||
}) => {
|
||||
const uniqueKey =
|
||||
id || `marker-${latitude.toFixed(6)}-${longitude.toFixed(6)}`;
|
||||
|
||||
return (
|
||||
<Marker
|
||||
key={uniqueKey}
|
||||
coordinate={{
|
||||
latitude,
|
||||
longitude,
|
||||
}}
|
||||
zIndex={zIndex}
|
||||
anchor={anchor}
|
||||
title={shipName}
|
||||
description={description}
|
||||
tracksViewChanges={tracksViewChanges}
|
||||
identifier={identifier || uniqueKey}
|
||||
>
|
||||
<View className="w-8 h-8 items-center justify-center">
|
||||
<View style={styles.pingContainer}>
|
||||
{animated && stateLevel === 3 && (
|
||||
<Animated.View
|
||||
style={[
|
||||
styles.pingCircle,
|
||||
{
|
||||
transform: [{ scale: animated.scale }],
|
||||
opacity: animated.opacity,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
)}
|
||||
<Image
|
||||
source={(() => {
|
||||
const icon = getShipIcon(stateLevel, isFishing);
|
||||
return typeof icon === "string" ? { uri: icon } : icon;
|
||||
})()}
|
||||
style={{
|
||||
width: 32,
|
||||
height: 32,
|
||||
transform: [
|
||||
{
|
||||
rotate: `${
|
||||
typeof heading === "number" && !isNaN(heading) ? heading : 0
|
||||
}deg`,
|
||||
},
|
||||
],
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</Marker>
|
||||
);
|
||||
};
|
||||
|
||||
export default MarkerCustom;
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
pingContainer: {
|
||||
width: 32,
|
||||
height: 32,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
overflow: "visible",
|
||||
},
|
||||
pingCircle: {
|
||||
position: "absolute",
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 20,
|
||||
backgroundColor: "#ED3F27",
|
||||
},
|
||||
});
|
||||
230
components/map/ZoneInMap.tsx
Normal file
230
components/map/ZoneInMap.tsx
Normal file
@@ -0,0 +1,230 @@
|
||||
import { BanzoneWithAlarm } from "@/app/(tabs)";
|
||||
import {
|
||||
convertWKTLineStringToLatLngArray,
|
||||
convertWKTPointToLatLng,
|
||||
convertWKTtoLatLngString,
|
||||
} from "@/utils/geom";
|
||||
import React, { useEffect, useMemo } from "react";
|
||||
import { CircleWithLabel } from "./CircleWithLabel";
|
||||
import { MarkerCustom } from "./MarkerCustom";
|
||||
import { PolygonWithLabel } from "./PolygonWithLabel";
|
||||
import { PolylineWithLabel } from "./PolylineWithLabel";
|
||||
|
||||
import MapView from "react-native-maps";
|
||||
|
||||
interface ZoneInMapProps {
|
||||
banzones: BanzoneWithAlarm[];
|
||||
mapRef?: React.RefObject<MapView | null>;
|
||||
}
|
||||
|
||||
// Helper function to parse zone geometry
|
||||
const parseZoneGeometry = (geometryString: string | undefined) => {
|
||||
if (!geometryString) {
|
||||
return null;
|
||||
}
|
||||
|
||||
try {
|
||||
const geometry: Model.Geom = JSON.parse(geometryString);
|
||||
return geometry;
|
||||
} catch (error) {
|
||||
console.warn("Failed to parse geometry:", error);
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
const ZoneInMap = (data: ZoneInMapProps) => {
|
||||
const { banzones, mapRef } = data;
|
||||
|
||||
// Auto-focus camera to first alarm location when banzones change
|
||||
useEffect(() => {
|
||||
if (mapRef?.current && banzones.length > 0) {
|
||||
const firstAlarm = banzones[0].alarms;
|
||||
if (
|
||||
firstAlarm.zone.lat !== undefined &&
|
||||
firstAlarm.zone.lon !== undefined
|
||||
) {
|
||||
setTimeout(() => {
|
||||
mapRef.current?.animateToRegion(
|
||||
{
|
||||
latitude: firstAlarm.zone.lat as number,
|
||||
longitude: firstAlarm.zone.lon as number,
|
||||
latitudeDelta: 0.05,
|
||||
longitudeDelta: 0.05,
|
||||
},
|
||||
1000
|
||||
);
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
}, [banzones, mapRef]);
|
||||
|
||||
// Parse and render all banzones with their ship markers
|
||||
const allElements = useMemo(() => {
|
||||
const elements: React.ReactNode[] = [];
|
||||
|
||||
console.log("ZoneInMap - banzones received:", banzones);
|
||||
|
||||
banzones.forEach((banzone, banzoneIndex) => {
|
||||
const { zone, alarms } = banzone;
|
||||
|
||||
console.log(`Processing banzone ${banzoneIndex}:`, {
|
||||
zone: zone,
|
||||
alarms: alarms,
|
||||
geometry: zone?.geometry,
|
||||
});
|
||||
|
||||
// Parse geometry with error handling
|
||||
const geometry = parseZoneGeometry(zone?.geometry);
|
||||
if (!geometry) {
|
||||
console.warn(`No geometry for zone ${banzoneIndex}`);
|
||||
return;
|
||||
}
|
||||
|
||||
const { geom_type, geom_lines, geom_poly, geom_point, geom_radius } =
|
||||
geometry;
|
||||
|
||||
console.log(`Parsed geometry for zone ${banzoneIndex}:`, {
|
||||
geom_type,
|
||||
geom_lines: geom_lines?.substring(0, 100) + "...",
|
||||
geom_poly: geom_poly?.substring(0, 100) + "...",
|
||||
geom_point,
|
||||
geom_radius,
|
||||
});
|
||||
|
||||
try {
|
||||
if (geom_type === 2) {
|
||||
// LINESTRING - use PolylineWithLabel
|
||||
// console.log(`Processing LINESTRING for zone ${banzoneIndex}`);
|
||||
const coordinates = convertWKTLineStringToLatLngArray(
|
||||
geom_lines || ""
|
||||
);
|
||||
// console.log(`Converted coordinates:`, coordinates);
|
||||
if (coordinates.length > 0) {
|
||||
elements.push(
|
||||
<PolylineWithLabel
|
||||
key={`line-${zone?.id || banzoneIndex}`}
|
||||
coordinates={coordinates.map((coord) => ({
|
||||
latitude: coord[0],
|
||||
longitude: coord[1],
|
||||
}))}
|
||||
label={zone?.name || alarms.zone.zone_name || ""}
|
||||
content={alarms.zone.message || ""}
|
||||
/>
|
||||
);
|
||||
// console.log(`Added PolylineWithLabel for zone ${banzoneIndex}`);
|
||||
}
|
||||
} else if (geom_type === 1) {
|
||||
// MULTIPOLYGON - check both geom_poly and geom_lines
|
||||
// console.log(`Processing MULTIPOLYGON for zone ${banzoneIndex}`);
|
||||
``;
|
||||
// First check if we have actual polygon data
|
||||
if (geom_poly && geom_poly.trim() !== "") {
|
||||
const polygons = convertWKTtoLatLngString(geom_poly);
|
||||
// console.log(`Converted polygons from geom_poly:`, polygons);
|
||||
polygons.forEach((polygon, polygonIndex) => {
|
||||
if (polygon.length > 0) {
|
||||
elements.push(
|
||||
<PolygonWithLabel
|
||||
key={`polygon-${zone?.id || banzoneIndex}-${polygonIndex}`}
|
||||
coordinates={polygon.map((coord) => ({
|
||||
latitude: coord[0],
|
||||
longitude: coord[1],
|
||||
}))}
|
||||
label={zone?.name || alarms.zone.zone_name || ""}
|
||||
content={alarms.zone.message || ""}
|
||||
/>
|
||||
);
|
||||
// console.log(
|
||||
// `Added PolygonWithLabel for zone ${banzoneIndex}-${polygonIndex}`
|
||||
// );
|
||||
}
|
||||
});
|
||||
} else if (geom_lines && geom_lines.trim() !== "") {
|
||||
// If no polygon data, treat geom_lines as a line (data inconsistency fix)
|
||||
// console.log(
|
||||
// `No polygon data, processing as LINESTRING from geom_lines`
|
||||
// );
|
||||
const coordinates = convertWKTLineStringToLatLngArray(geom_lines);
|
||||
console.log(`Converted coordinates from geom_lines:`, coordinates);
|
||||
if (coordinates.length > 0) {
|
||||
elements.push(
|
||||
<PolylineWithLabel
|
||||
key={`line-${zone?.id || banzoneIndex}`}
|
||||
coordinates={coordinates.map((coord) => ({
|
||||
latitude: coord[0],
|
||||
longitude: coord[1],
|
||||
}))}
|
||||
label={zone?.name || alarms.zone.zone_name || ""}
|
||||
content={alarms.zone.message || ""}
|
||||
/>
|
||||
);
|
||||
// console.log(
|
||||
// `Added PolylineWithLabel for zone ${banzoneIndex} (from geom_lines)`
|
||||
// );
|
||||
}
|
||||
} else {
|
||||
// console.warn(`No valid geometry data for zone ${banzoneIndex}`);
|
||||
}
|
||||
} else if (geom_type === 3) {
|
||||
// POINT/CIRCLE - use Circle
|
||||
// console.log(`Processing POINT/CIRCLE for zone ${banzoneIndex}`);
|
||||
const point = convertWKTPointToLatLng(geom_point || "");
|
||||
// console.log(`Converted point:`, point, `radius:`, geom_radius);
|
||||
if (point && geom_radius) {
|
||||
elements.push(
|
||||
<CircleWithLabel
|
||||
key={`circle-${zone?.id || banzoneIndex}`}
|
||||
center={{
|
||||
latitude: point[1], // Note: convertWKTPointToLatLng returns [lng, lat]
|
||||
longitude: point[0],
|
||||
}}
|
||||
radius={geom_radius}
|
||||
label={zone?.name || alarms.zone.zone_name || ""}
|
||||
content={alarms.zone.message || ""}
|
||||
/>
|
||||
);
|
||||
// console.log(`Added Circle for zone ${banzoneIndex}`);
|
||||
}
|
||||
} else {
|
||||
console.warn(
|
||||
`Unknown geom_type ${geom_type} for zone ${banzoneIndex}`
|
||||
);
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn(
|
||||
"Error processing zone geometry for zone",
|
||||
zone?.id,
|
||||
":",
|
||||
error
|
||||
);
|
||||
}
|
||||
|
||||
// Ship marker for the alarm location
|
||||
if (alarms.zone.lat && alarms.zone.lon) {
|
||||
elements.push(
|
||||
<MarkerCustom
|
||||
key={`ship-${alarms.thing_id || banzoneIndex}`}
|
||||
id={`ship-${alarms.thing_id || banzoneIndex}`}
|
||||
latitude={alarms.zone.lat}
|
||||
longitude={alarms.zone.lon}
|
||||
shipName={alarms.ship_name || "Tàu không xác định"}
|
||||
description={
|
||||
alarms.zone.gps_time
|
||||
? new Date(alarms.zone.gps_time * 1000).toLocaleString()
|
||||
: ""
|
||||
}
|
||||
heading={alarms.zone.h}
|
||||
zIndex={100}
|
||||
/>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
// console.log(`Total elements rendered: ${elements.length}`);
|
||||
return elements;
|
||||
}, [banzones]);
|
||||
|
||||
return <>{allElements}</>;
|
||||
};
|
||||
|
||||
export default ZoneInMap;
|
||||
Reference in New Issue
Block a user