tuanta/sgw-owner-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Hiển thị tọa độ và khu vực khi tàu vi phạm

Browse Source
This commit is contained in:
Tran Anh Tuan
2025-12-08 09:31:28 +07:00
parent c47d9ad14c
commit 695066a5e7
11 changed files with 1517 additions and 301 deletions
Download Patch File Download Diff File Expand all files Collapse all files

585
app/(tabs)/index.tsx
View File

@@ -1,46 +1,69 @@
import DraggablePanel from "@/components/DraggablePanel";
import IconButton from "@/components/IconButton";
import type { PolygonWithLabelProps } from "@/components/map/PolygonWithLabel";
import type { PolylineWithLabelProps } from "@/components/map/PolylineWithLabel";
import AlarmList from "@/components/map/AlarmList";
import ShipInfo from "@/components/map/ShipInfo";
import { TagState, TagStateCallbackPayload } from "@/components/map/TagState";
import ZoneInMap from "@/components/map/ZoneInMap";
import ShipSearchForm, {
SearchShipResponse,
} from "@/components/ShipSearchForm";
import { ThemedText } from "@/components/themed-text";
import { EVENT_SEARCH_THINGS, IOS_PLATFORM, LIGHT_THEME } from "@/constants";
import { queryBanzoneById } from "@/controller/MapController";
import { usePlatform } from "@/hooks/use-platform";
import { useThemeContext } from "@/hooks/use-theme-context";
import { searchThingEventBus } from "@/services/device_events";
import { getShipIcon } from "@/services/map_service";
import eventBus from "@/utils/eventBus";
import { AntDesign } from "@expo/vector-icons";
import { AntDesign, Ionicons } from "@expo/vector-icons";
import { useEffect, useRef, useState } from "react";
import {
Animated,
Dimensions,
Image,
ScrollView,
StyleSheet,
Text,
TouchableOpacity,
View,
} from "react-native";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import MapView, { Marker } from "react-native-maps";
interface ZoneDataParsed {
zone_type?: number;
zone_name?: string;
zone_id?: string;
message?: string;
alarm_type?: number;
lat?: number;
lon?: number;
s?: number;
h?: number;
fishing?: boolean;
gps_time?: number;
}
export interface AlarmData {
thing_id: string;
ship_name?: string;
zone: ZoneDataParsed;
type: "approaching" | "entered" | "fishing";
}
export interface BanzoneWithAlarm {
alarms: AlarmData;
zone?: Model.Zone;
}
export default function HomeScreen() {
const [alarmData, setAlarmData] = useState<Model.AlarmResponse | null>(null);
const [banzoneData, setBanzoneData] = useState<Model.Zone[] | null>(null);
const [trackPointsData, setTrackPointsData] = useState<
Model.ShipTrackPoint[] | null
>(null);
const [circleRadius, setCircleRadius] = useState(100);
const [zoomLevel, setZoomLevel] = useState(10);
const mapRef = useRef<MapView>(null);
const [alarms, setAlarms] = useState<AlarmData[]>([]);
const [banzoneWithAlarm, setBanzoneWithAlarm] =
useState<BanzoneWithAlarm | null>(null);
const [allBanZones, setAllBanZones] = useState<BanzoneWithAlarm[]>([]);
const [showAllAlarmsOnMap, setShowAllAlarmsOnMap] = useState(false);
const [isFirstLoad, setIsFirstLoad] = useState(true);
const [polylineCoordinates, setPolylineCoordinates] = useState<
PolylineWithLabelProps[]
>([]);
const [polygonCoordinates, setPolygonCoordinates] = useState<
PolygonWithLabelProps[]
>([]);
const [shipSearchFormOpen, setShipSearchFormOpen] = useState(false);
const [isPanelExpanded, setIsPanelExpanded] = useState(false);
const [things, setThings] = useState<Model.ThingsResponse | null>(null);
@@ -54,15 +77,36 @@ export default function HomeScreen() {
const [tagStatePayload, setTagStatePayload] =
useState<TagStateCallbackPayload | null>(null);
const [isShowAlarmList, setIsShowAlarmList] = useState(false);
// Control mount so we can animate close before unmounting
const [isAlarmListMounted, setIsAlarmListMounted] = useState(false);
// Thêm state để quản lý tracksViewChanges
const [tracksViewChanges, setTracksViewChanges] = useState(true);
// Alarm list animation
const screenHeight = Dimensions.get("window").height;
const alarmListHeight = Math.round(screenHeight * 0.3);
const alarmTranslateY = useRef(new Animated.Value(alarmListHeight)).current;
const alarmOpacity = useRef(new Animated.Value(0)).current;
const uiAnim = useRef(new Animated.Value(1)).current; // 1 visible, 0 hidden
useEffect(() => {
if (tagStatePayload) {
searchThings();
}
}, [tagStatePayload]);
const openAlarmList = () => {
setIsAlarmListMounted(true);
setIsShowAlarmList(true);
};
const closeAlarmList = () => {
// Trigger the animation; the effect will unmount when complete
setIsShowAlarmList(false);
setBanzoneWithAlarm(null);
};
useEffect(() => {
if (shipSearchFormData) {
searchThings();
@@ -93,7 +137,7 @@ export default function HomeScreen() {
...thingsData,
things: sortedThings,
};
console.log("Things Updated: ", sortedThingsResponse.things?.length);
// console.log("Things Updated: ", sortedThingsResponse.things?.length);
setThings(sortedThingsResponse);
};
@@ -105,101 +149,85 @@ export default function HomeScreen() {
}, []);
useEffect(() => {
if (things) {
// console.log("Things Updated: ", things.things?.length);
// const gpsDatas: Model.GPSResponse[] = [];
// for (const thing of things.things || []) {
// if (thing.metadata?.gps) {
// const gps: Model.GPSResponse = JSON.parse(thing.metadata.gps);
// gpsDatas.push(gps);
// }
// }
// console.log("GPS Lenght: ", gpsDatas.length);
// setGpsData(gpsDatas);
if (things?.things) {
const alarmTypes = [
{
key: "zone_approaching_alarm_list",
type: "approaching" as const,
},
{ key: "zone_entered_alarm_list", type: "entered" as const },
{ key: "zone_fishing_alarm_list", type: "fishing" as const },
];
const newAlarms: AlarmData[] = [];
for (const thing of things.things) {
for (const { key, type } of alarmTypes) {
if ((thing.metadata as any)?.[key] != "[]") {
const zoneList: ZoneDataParsed[] = JSON.parse(
(thing?.metadata as any)?.[key] || "[]"
);
for (const zone of zoneList) {
const alarmData: AlarmData = {
thing_id: thing.id || "",
ship_name: thing.metadata?.ship_name,
zone: zone,
type: type,
};
newAlarms.push(alarmData);
}
}
}
}
// Update alarms, removing old ones not in newAlarms
setAlarms((prev) => {
const toKeep = prev.filter((a) =>
newAlarms.some(
(na) =>
na.thing_id === a.thing_id && na.zone.zone_id === a.zone.zone_id
)
);
const toAdd = newAlarms.filter(
(na) =>
!prev.some(
(a) =>
a.thing_id === na.thing_id && a.zone.zone_id === a.zone.zone_id
)
);
return [...toKeep, ...toAdd];
});
}
}, [things]);
// useEffect(() => {
// setPolylineCoordinates([]);
// setPolygonCoordinates([]);
// if (!entityData) return;
// if (!banzoneData) return;
// for (const entity of entityData) {
// if (entity.id !== ENTITY.ZONE_ALARM_LIST) {
// continue;
// }
useEffect(() => {
const approaching = alarms.filter((a) => a.type === "approaching");
const entered = alarms.filter((a) => a.type === "entered");
const fishing = alarms.filter((a) => a.type === "fishing");
// let zones: any[] = [];
// try {
// zones = entity.valueString ? JSON.parse(entity.valueString) : [];
// } catch (parseError) {
// console.error("Error parsing zone list:", parseError);
// continue;
// }
// // Nếu danh sách zone rỗng, clear tất cả
// if (zones.length === 0) {
// setPolylineCoordinates([]);
// setPolygonCoordinates([]);
// return;
// }
if (approaching.length > 0) {
console.log("ZoneApproachingAlarm: ", approaching);
} else {
// console.log("No ZoneApproachingAlarm");
}
if (entered.length > 0) {
console.log("ZoneEnteredAlarm: ", entered);
} else {
// console.log("No ZoneEnteredAlarm");
}
if (fishing.length > 0) {
console.log("ZoneFishingAlarm: ", fishing);
} else {
// console.log("No ZoneFishingAlarm");
}
}, [alarms]);
// let polylines: PolylineWithLabelProps[] = [];
// let polygons: PolygonWithLabelProps[] = [];
// for (const zone of zones) {
// // console.log("Zone Data: ", zone);
// const geom = banzoneData.find((b) => b.id === zone.zone_id);
// if (!geom) {
// continue;
// }
// const { geom_type, geom_lines, geom_poly } = geom.geom || {};
// if (typeof geom_type !== "number") {
// continue;
// }
// if (geom_type === 2) {
// // if(oldEntityData.find(e => e.id === ))
// // foundPolyline = true;
// const coordinates = convertWKTLineStringToLatLngArray(
// geom_lines || ""
// );
// if (coordinates.length > 0) {
// polylines.push({
// coordinates: coordinates.map((coord) => ({
// latitude: coord[0],
// longitude: coord[1],
// })),
// label: zone?.zone_name ?? "",
// content: zone?.message ?? "",
// });
// } else {
// console.log("Không tìm thấy polyline trong alarm");
// }
// } else if (geom_type === 1) {
// // foundPolygon = true;
// const coordinates = convertWKTtoLatLngString(geom_poly || "");
// if (coordinates.length > 0) {
// // console.log("Polygon Coordinate: ", coordinates);
// const zonePolygons = coordinates.map((polygon) => ({
// coordinates: polygon.map((coord) => ({
// latitude: coord[0],
// longitude: coord[1],
// })),
// label: zone?.zone_name ?? "",
// content: zone?.message ?? "",
// }));
// polygons.push(...zonePolygons);
// } else {
// console.log("Không tìm thấy polygon trong alarm");
// }
// }
// }
// setPolylineCoordinates(polylines);
// setPolygonCoordinates(polygons);
// }
// }, [banzoneData, entityData]);
// Hàm tính radius cố định khi zoom change
// Load all banzones when alarms change (for showing all alarms on map)
useEffect(() => {
if (alarms.length > 0 && showAllAlarmsOnMap) {
loadAllBanZones();
}
}, [alarms, showAllAlarmsOnMap]);
const calculateRadiusFromZoom = (zoom: number) => {
const baseZoom = 10;
@@ -217,8 +245,8 @@ export default function HomeScreen() {
// zoom = log2(360 / (latitudeDelta * 2)) + 8
const zoom = Math.round(Math.log2(360 / (newRegion.latitudeDelta * 2)) + 8);
const newRadius = calculateRadiusFromZoom(zoom);
setCircleRadius(newRadius);
setZoomLevel(zoom);
// setCircleRadius(newRadius);
// setZoomLevel(zoom);
// console.log("Zoom level:", zoom, "Circle radius:", newRadius);
};
@@ -303,8 +331,53 @@ export default function HomeScreen() {
}
}, [isFirstLoad]);
// Animate alarm panel when isShowAlarmList changes
// Keep the overlay mounted while animating it in/out.
useEffect(() => {
if (isShowAlarmList) {
// Ensure mounted then animate to visible
setIsAlarmListMounted(true);
Animated.parallel([
Animated.timing(alarmTranslateY, {
toValue: 0,
duration: 300,
useNativeDriver: true,
}),
Animated.timing(alarmOpacity, {
toValue: 1,
duration: 300,
useNativeDriver: true,
}),
]).start();
} else {
// Animate out, then unmount
Animated.parallel([
Animated.timing(alarmTranslateY, {
toValue: alarmListHeight,
duration: 300,
useNativeDriver: true,
}),
Animated.timing(alarmOpacity, {
toValue: 0,
duration: 300,
useNativeDriver: true,
}),
]).start(() => {
setIsAlarmListMounted(false);
});
}
}, [alarmTranslateY, alarmListHeight, alarmOpacity, isShowAlarmList]);
useEffect(() => {
Animated.timing(uiAnim, {
toValue: isAlarmListMounted ? 0 : 1,
duration: 200,
useNativeDriver: true,
}).start();
}, [uiAnim, isAlarmListMounted]);
const searchThings = async () => {
console.log("FormSearch Playload in Search Thing: ", shipSearchFormData);
// console.log("FormSearch Playload in Search Thing: ", shipSearchFormData);
// Xây dựng query state dựa trên logic bạn cung cấp
const stateNormalQuery = tagStatePayload?.isNormal ? "normal" : "";
@@ -391,7 +464,7 @@ export default function HomeScreen() {
not_empty: "ship_id",
},
};
console.log("Search Params: ", searchParams);
// console.log("Search Params: ", searchParams);
// Gọi API tìm kiếm
searchThingEventBus(searchParams);
@@ -401,6 +474,50 @@ export default function HomeScreen() {
setShipSearchFormOpen(false);
};
const loadAllBanZones = async () => {
try {
const banzonePromises = alarms.map(async (alarm) => {
try {
const banzone = await queryBanzoneById(alarm.zone.zone_id || "");
return {
alarms: alarm,
zone: banzone.data,
};
} catch (error) {
console.warn(`Cannot get banzone for zone_id: ${alarm.zone.zone_id}`);
return null;
}
});
const banzoneResults = await Promise.all(banzonePromises);
const validBanZones = banzoneResults.filter(
(banzone): banzone is NonNullable<typeof banzone> => banzone !== null
);
setAllBanZones(validBanZones);
} catch (error) {
console.error("Error loading all banzones:", error);
}
};
const handleAlarmPress = async (alarm: AlarmData) => {
console.log("Alarm pressed from list:", alarm);
try {
const banzone = await queryBanzoneById(alarm.zone.zone_id || "");
// console.log("Banzone API response:", banzone);
// console.log("Banzone data:", banzone.data);
// console.log("Zone geometry:", banzone.data?.geometry);
const banzoneWithAlarm: BanzoneWithAlarm = {
alarms: alarm,
zone: banzone.data,
};
setBanzoneWithAlarm(banzoneWithAlarm);
setShowAllAlarmsOnMap(false);
} catch (error) {
console.error("Cannot get Banzone:", error);
}
};
const hasActiveFilters = shipSearchFormData
? shipSearchFormData.ship_name !== "" ||
shipSearchFormData.reg_number !== "" ||
@@ -418,6 +535,7 @@ export default function HomeScreen() {
<GestureHandlerRootView style={styles.container}>
<View style={styles.container}>
<MapView
ref={mapRef}
onMapReady={handleMapReady}
onRegionChangeComplete={handleRegionChangeComplete}
style={styles.map}
@@ -428,8 +546,9 @@ export default function HomeScreen() {
loadingEnabled={true}
mapType={platform === IOS_PLATFORM ? "mutedStandard" : "standard"}
rotateEnabled={false}
// onMarkerPress={onMarkerPress}
>
{things?.things && things.things.length > 0 && (
{!banzoneWithAlarm && things?.things && things.things.length > 0 && (
<>
{things.things
.filter((thing) => thing.metadata?.gps) // Filter trước để tránh null check
@@ -454,6 +573,10 @@ export default function HomeScreen() {
}}
zIndex={50}
anchor={{ x: 0.5, y: 0.5 }}
title={thing.metadata?.ship_name}
description={`Trạng thái: ${
gpsData.fishing ? "Đang đánh bắt" : "Không đánh bắt"
}`}
// Chỉ tracks changes khi cần thiết
tracksViewChanges={
platform === IOS_PLATFORM ? tracksViewChanges : true
@@ -461,6 +584,7 @@ export default function HomeScreen() {
// Thêm identifier để iOS optimize
identifier={uniqueKey}
>
{/* <Callout tooltip></Callout> */}
<View className="w-8 h-8 items-center justify-center">
<View style={styles.pingContainer}>
{thing.metadata?.state_level === 3 && (
@@ -507,9 +631,16 @@ export default function HomeScreen() {
})}
</>
)}
{(banzoneWithAlarm ||
(showAllAlarmsOnMap && allBanZones.length > 0)) && (
<ZoneInMap
banzones={banzoneWithAlarm ? [banzoneWithAlarm] : allBanZones}
mapRef={mapRef}
/>
)}
</MapView>
<View className="absolute top-20 left-5">
{!isPanelExpanded && (
<View className="absolute top-12 left-5">
{!isAlarmListMounted && !isPanelExpanded && (
<IconButton
icon={<AntDesign name="filter" size={16} />}
type="primary"
@@ -528,102 +659,158 @@ export default function HomeScreen() {
<GPSInfoPanel gpsData={gpsData!} /> */}
{/* Draggable Panel */}
<DraggablePanel
minHeightPct={0.1}
maxHeightPct={0.6}
initialState="min"
onExpandedChange={(expanded) => {
console.log("Panel expanded:", expanded);
setIsPanelExpanded(expanded);
}}
>
<>
<View className="flex flex-row gap-4 items-center justify-center">
<TagState
normalCount={things?.metadata?.total_state_level_0 || 0}
warningCount={things?.metadata?.total_state_level_1 || 0}
dangerousCount={things?.metadata?.total_state_level_2 || 0}
sosCount={things?.metadata?.total_sos || 0}
disconnectedCount={
(things?.metadata?.total_thing ?? 0) -
(things?.metadata?.total_connected ?? 0) || 0
}
onTagPress={(tagState) => {
setTagStatePayload(tagState);
}}
/>
</View>
<View style={{ width: "100%", paddingVertical: 8, flex: 1 }}>
<View className="flex flex-row items-center">
<View className="flex-1 justify-center">
<Text
style={{
fontSize: 20,
textAlign: "center",
fontWeight: "600",
}}
>
Danh sách tàu thuyền
</Text>
</View>
{isPanelExpanded && (
<IconButton
icon={<AntDesign name="filter" size={16} />}
type="primary"
shape="circle"
size="middle"
style={{
// borderRadius: 10,
backgroundColor: hasActiveFilters ? "#B8D576" : "#fff",
}}
onPress={() => setShipSearchFormOpen(true)}
></IconButton>
)}
{!isAlarmListMounted && (
<DraggablePanel
minHeightPct={0.1}
maxHeightPct={0.6}
initialState="min"
onExpandedChange={(expanded) => {
// console.log("Panel expanded:", expanded);
setIsPanelExpanded(expanded);
}}
>
<>
<View className="flex flex-row gap-4 items-center justify-center">
<TagState
normalCount={things?.metadata?.total_state_level_0 || 0}
warningCount={things?.metadata?.total_state_level_1 || 0}
dangerousCount={things?.metadata?.total_state_level_2 || 0}
sosCount={things?.metadata?.total_sos || 0}
disconnectedCount={
(things?.metadata?.total_thing ?? 0) -
(things?.metadata?.total_connected ?? 0) || 0
}
onTagPress={(tagState) => {
setTagStatePayload(tagState);
}}
/>
</View>
<View style={{ width: "100%", paddingVertical: 8, flex: 1 }}>
<View className="flex flex-row items-center">
<View className="flex-1 justify-center">
<Text
style={{
fontSize: 20,
textAlign: "center",
fontWeight: "600",
}}
>
Danh sách tàu thuyền
</Text>
</View>
{isPanelExpanded && (
<IconButton
icon={<AntDesign name="filter" size={16} />}
type="primary"
shape="circle"
size="middle"
style={{
// borderRadius: 10,
backgroundColor: hasActiveFilters ? "#B8D576" : "#fff",
}}
onPress={() => setShipSearchFormOpen(true)}
></IconButton>
)}
</View>
<ScrollView
style={{ width: "100%", marginTop: 8, flex: 1 }}
contentContainerStyle={{
alignItems: "center",
paddingBottom: 24,
<ScrollView
style={{ width: "100%", marginTop: 8, flex: 1 }}
contentContainerStyle={{
alignItems: "center",
paddingBottom: 24,
}}
showsVerticalScrollIndicator={false}
>
{things && things.things && things.things.length > 0 && (
<>
{things.things.map((thing, index) => {
return (
<View
key={thing.id ?? index}
style={{ width: "100%", alignItems: "center" }}
>
<ShipInfo thingMetadata={thing.metadata} />
{index < (things.things?.length ?? 0) - 1 && (
<View
style={{
width: "50%",
height: 1,
backgroundColor: "#E5E7EB",
marginVertical: 8,
borderRadius: 1,
}}
/>
)}
</View>
);
})}
</>
)}
</ScrollView>
</View>
</>
</DraggablePanel>
)}
{/* Alarm list overlay */}
{isAlarmListMounted && (
<Animated.View
style={{
position: "absolute",
left: 0,
right: 0,
bottom: 0,
height: alarmListHeight,
transform: [{ translateY: alarmTranslateY }],
opacity: alarmOpacity,
elevation: 10,
zIndex: 10,
}}
>
<View className="bg-white rounded-t-3xl shadow-md overflow-hidden h-full z-50">
<View className="flex-row items-center justify-between px-4 py-2">
<Text className="text-lg font-semibold">
Danh sách cảnh báo
</Text>
<TouchableOpacity
onPress={() => closeAlarmList()}
style={{ padding: 6 }}
>
<Ionicons name="close" size={20} color="#374151" />
</TouchableOpacity>
</View>
<View
style={{
flex: 1,
backgroundColor: "#F9FAFB",
zIndex: 50,
}}
showsVerticalScrollIndicator={false}
>
{things && things.things && things.things.length > 0 && (
<>
{things.things.map((thing, index) => {
return (
<View
key={thing.id ?? index}
style={{ width: "100%", alignItems: "center" }}
>
<ShipInfo thingMetadata={thing.metadata} />
{index < (things.things?.length ?? 0) - 1 && (
<View
style={{
width: "50%",
height: 1,
backgroundColor: "#E5E7EB",
marginVertical: 8,
borderRadius: 1,
}}
/>
)}
</View>
);
})}
</>
)}
</ScrollView>
{/* <ThemedText className="text-lg font-semibold">Body</ThemedText> */}
<AlarmList data={alarms} onPress={handleAlarmPress} />
</View>
</View>
</>
</DraggablePanel>
</Animated.View>
)}
<ShipSearchForm
initialValues={shipSearchFormData}
isOpen={shipSearchFormOpen}
onClose={() => setShipSearchFormOpen(false)}
onSubmit={handleOnSubmitSearchForm}
/>
{!isAlarmListMounted && alarms.length > 0 && (
<View className="absolute top-12 right-5 space-y-2">
<IconButton
icon={<Ionicons name="warning" size={16} color="#fff" />}
type="danger"
size="middle"
onPress={() => openAlarmList()}
>
<ThemedText className="text-sm font-semibold">
{alarms.length}
</ThemedText>
</IconButton>
</View>
)}
</View>
</GestureHandlerRootView>
);