hiển thị thuyền thông tin tàu

2025-12-03 16:22:25 +07:00
parent 47e9bac0f9
commit 22a3b591c6
22 changed files with 2135 additions and 260 deletions
--- a/components/map/ShipInfo.tsx
+++ b/components/map/ShipInfo.tsx
@@ -0,0 +1,141 @@
+import { STATUS_DANGEROUS, STATUS_NORMAL, STATUS_WARNING } from "@/constants";
+import { useAppTheme } from "@/hooks/use-app-theme";
+import { useI18n } from "@/hooks/use-i18n";
+import { formatRelativeTime } from "@/services/time_service";
+import { convertToDMS, kmhToKnot } from "@/utils/geom";
+import { Ionicons } from "@expo/vector-icons";
+import { ScrollView, Text, View } from "react-native";
+import { ThemedText } from "../themed-text";
+
+interface ShipInfoProps {
+  thingMetadata?: Model.ThingMetadata;
+}
+
+const ShipInfo = ({ thingMetadata }: ShipInfoProps) => {
+  const { t } = useI18n();
+  const { colors } = useAppTheme();
+  // Định nghĩa màu sắc theo trạng thái
+  const statusConfig = {
+    normal: {
+      dotColor: "bg-green-500",
+      badgeColor: "bg-green-100",
+      badgeTextColor: "text-green-700",
+      badgeText: "Bình thường",
+    },
+    warning: {
+      dotColor: "bg-yellow-500",
+      badgeColor: "bg-yellow-100",
+      badgeTextColor: "text-yellow-700",
+      badgeText: "Cảnh báo",
+    },
+    danger: {
+      dotColor: "bg-red-500",
+      badgeColor: "bg-red-100",
+      badgeTextColor: "text-red-700",
+      badgeText: "Nguy hiểm",
+    },
+  };
+  const getThingStatus = () => {
+    switch (thingMetadata?.state_level) {
+      case STATUS_NORMAL:
+        return "normal";
+      case STATUS_WARNING:
+        return "warning";
+      case STATUS_DANGEROUS:
+        return "danger";
+      default:
+        return "normal";
+    }
+  };
+
+  const gpsData: Model.GPSResponse = JSON.parse(thingMetadata?.gps || "{}");
+
+  const currentStatus = statusConfig[getThingStatus()];
+
+  // Format tọa độ
+  const formatCoordinate = (lat: number, lon: number) => {
+    const latDir = lat >= 0 ? "N" : "S";
+    const lonDir = lon >= 0 ? "E" : "W";
+    return `${Math.abs(lat).toFixed(4)}°${latDir}, ${Math.abs(lon).toFixed(
+      4
+    )}°${lonDir}`;
+  };
+
+  return (
+    <View className="px-4 py-3">
+      {/* Header: Tên tàu và trạng thái */}
+      <View className="flex-row items-center justify-between mb-3">
+        <View className="flex-row items-center gap-2">
+          {/* Status dot */}
+          <View className={`h-3 w-3 rounded-full ${currentStatus.dotColor}`} />
+
+          {/* Tên tàu */}
+          <Text className="text-lg font-semibold text-gray-900">
+            {thingMetadata?.ship_name}
+          </Text>
+        </View>
+
+        {/* Badge trạng thái */}
+        <View className={`px-3 py-1 rounded-full ${currentStatus.badgeColor}`}>
+          <Text
+            className={`text-md font-medium ${currentStatus.badgeTextColor}`}
+          >
+            {currentStatus.badgeText}
+          </Text>
+        </View>
+      </View>
+
+      {/* Mã tàu */}
+      {/* <Text className="text-base text-gray-600 mb-2">{shipCode}</Text> */}
+      <View className="flex-row items-center justify-between gap-2 mb-3">
+        <View className="flex-row items-center gap-2 w-2/3">
+          <Ionicons name="speedometer-outline" size={16} color="#6B7280" />
+          <Text className="text-md text-gray-600">
+            {kmhToKnot(gpsData.s || 0)} {t("home.speed_units")}
+          </Text>
+        </View>
+        <View className="flex-row items-start gap-2 w-1/3 ">
+          <Ionicons name="compass-outline" size={16} color="#6B7280" />
+          <Text className="text-md text-gray-600">{gpsData.h}°</Text>
+        </View>
+      </View>
+      {/* Tọa độ */}
+      <View className="flex-row items-center justify-between gap-2 mb-2">
+        <View className="flex-row items-center gap-2 w-2/3">
+          <Ionicons name="location-outline" size={16} color="#6B7280" />
+          <Text className="text-md text-gray-600">
+            {convertToDMS(gpsData.lat || 0, true)},
+            {convertToDMS(gpsData.lon || 0, false)}
+          </Text>
+        </View>
+        <View className=" flex-row items-start gap-2 w-1/3 ">
+          <Ionicons name="time-outline" size={16} color="#6B7280" />
+          <Text className="text-md text-gray-600">
+            {formatRelativeTime(gpsData.t)}
+          </Text>
+        </View>
+      </View>
+      {/* <View className="flex">
+        <Description title="Trạng thái" description={thingMetadata?.state} />
+      </View> */}
+      {thingMetadata?.state !== "" && (
+        <View className="flex-row items-center gap-2">
+          <ThemedText style={{ color: colors.textSecondary, fontSize: 15 }}>
+            Trạng thái:
+          </ThemedText>
+          <ScrollView
+            horizontal
+            showsHorizontalScrollIndicator={false}
+            style={{ flex: 1 }}
+          >
+            <ThemedText style={{ color: colors.text, fontSize: 15 }}>
+              {thingMetadata?.state || "-"}
+            </ThemedText>
+          </ScrollView>
+        </View>
+      )}
+    </View>
+  );
+};
+
+export default ShipInfo;