thêm chức năng Sos và thêm glustack-ui

2025-11-04 16:24:54 +07:00
parent e535aaa1e8
commit 2137925ba9
33 changed files with 5533 additions and 171 deletions
--- a/components/map/GPSInfoPanel.tsx
+++ b/components/map/GPSInfoPanel.tsx
@@ -0,0 +1,113 @@
+import { convertToDMS, kmhToKnot } from "@/utils/geom";
+import { MaterialIcons } from "@expo/vector-icons";
+import { useEffect, useRef, useState } from "react";
+import { Animated, TouchableOpacity, View } from "react-native";
+import { Description } from "./Description";
+
+type GPSInfoPanelProps = {
+  gpsData: Model.GPSResonse | undefined;
+};
+
+const GPSInfoPanel = ({ gpsData }: GPSInfoPanelProps) => {
+  const [isExpanded, setIsExpanded] = useState(true);
+  const [panelHeight, setPanelHeight] = useState(0);
+  const translateY = useRef(new Animated.Value(0)).current;
+  const blockBottom = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    Animated.timing(translateY, {
+      toValue: isExpanded ? 0 : 200, // Dịch chuyển xuống 200px khi thu gọn
+      duration: 500,
+      useNativeDriver: true,
+    }).start();
+  }, [isExpanded]);
+
+  useEffect(() => {
+    const targetBottom = isExpanded ? panelHeight + 12 : 10;
+    Animated.timing(blockBottom, {
+      toValue: targetBottom,
+      duration: 500,
+      useNativeDriver: false,
+    }).start();
+  }, [isExpanded, panelHeight, blockBottom]);
+
+  const togglePanel = () => {
+    setIsExpanded(!isExpanded);
+  };
+
+  return (
+    <>
+      {/* Khối hình vuông */}
+      <Animated.View
+        style={{
+          position: "absolute",
+          bottom: blockBottom,
+          left: 5,
+          width: 48,
+          height: 48,
+          backgroundColor: "blue",
+          borderRadius: 4,
+          zIndex: 30,
+        }}
+      />
+
+      <Animated.View
+        style={{
+          transform: [{ translateY }],
+        }}
+        className="absolute bottom-0 gap-3 right-0 p-3 left-0 h-auto w-full rounded-t-xl bg-white shadow-md"
+        onLayout={(event) => setPanelHeight(event.nativeEvent.layout.height)}
+      >
+        {/* Nút toggle ở top-right */}
+        <TouchableOpacity
+          onPress={togglePanel}
+          className="absolute top-2 right-2 z-10 bg-white rounded-full p-1 shadow-sm"
+        >
+          <MaterialIcons
+            name={isExpanded ? "expand-more" : "expand-less"}
+            size={20}
+            color="#666"
+          />
+        </TouchableOpacity>
+
+        <View className="flex-row justify-between">
+          <View className="flex-1">
+            <Description
+              title="Kinh độ"
+              description={convertToDMS(gpsData?.lat ?? 0, true)}
+            />
+          </View>
+          <View className="flex-1">
+            <Description
+              title="Vĩ độ"
+              description={convertToDMS(gpsData?.lon ?? 0, false)}
+            />
+          </View>
+        </View>
+        <View className="flex-row justify-between">
+          <View className="flex-1">
+            <Description
+              title="Tốc độ"
+              description={`${kmhToKnot(gpsData?.s ?? 0).toString()} knot`}
+            />
+          </View>
+          <View className="flex-1">
+            <Description title="Hướng" description={`${gpsData?.h ?? 0}°`} />
+          </View>
+        </View>
+      </Animated.View>
+
+      {/* Nút floating để mở lại panel khi thu gọn */}
+      {!isExpanded && (
+        <TouchableOpacity
+          onPress={togglePanel}
+          className="absolute bottom-5 right-2 z-20 bg-white rounded-full p-2 shadow-lg"
+        >
+          <MaterialIcons name="info-outline" size={24} />
+        </TouchableOpacity>
+      )}
+    </>
+  );
+};
+
+export default GPSInfoPanel;