thêm FormSearch trong map

app/(tabs)/index.tsx

@@ -1,14 +1,19 @@
 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 ShipInfo from "@/components/map/ShipInfo";
 import { TagState, TagStateCallbackPayload } from "@/components/map/TagState";
+import ShipSearchForm, {
+  SearchShipResponse,
+} from "@/components/ShipSearchForm";
 import { EVENT_SEARCH_THINGS, IOS_PLATFORM, LIGHT_THEME } from "@/constants";
 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 { useEffect, useRef, useState } from "react";
 import {
   Animated,
@@ -36,15 +41,34 @@ export default function HomeScreen() {
   const [polygonCoordinates, setPolygonCoordinates] = useState<
     PolygonWithLabelProps[]
   >([]);
+  const [shipSearchFormOpen, setShipSearchFormOpen] = useState(false);
+  const [isPanelExpanded, setIsPanelExpanded] = useState(false);
   const [things, setThings] = useState<Model.ThingsResponse | null>(null);
   const platform = usePlatform();
   const theme = useThemeContext().colorScheme;
   const scale = useRef(new Animated.Value(0)).current;
   const opacity = useRef(new Animated.Value(1)).current;
+  const [shipSearchFormData, setShipSearchFormData] = useState<
+    SearchShipResponse | undefined
+  >(undefined);
+  const [tagStatePayload, setTagStatePayload] =
+    useState<TagStateCallbackPayload | null>(null);
 
   // Thêm state để quản lý tracksViewChanges
   const [tracksViewChanges, setTracksViewChanges] = useState(true);
 
+  useEffect(() => {
+    if (tagStatePayload) {
+      searchThings();
+    }
+  }, [tagStatePayload]);
+
+  useEffect(() => {
+    if (shipSearchFormData) {
+      searchThings();
+    }
+  }, [shipSearchFormData]);
+
   const bodySearchThings: Model.SearchThingBody = {
     offset: 0,
     limit: 50,
@@ -176,6 +200,7 @@ export default function HomeScreen() {
   // }, [banzoneData, entityData]);
 
   // Hàm tính radius cố định khi zoom change
+
   const calculateRadiusFromZoom = (zoom: number) => {
     const baseZoom = 10;
     const baseRadius = 100;
@@ -231,7 +256,8 @@ export default function HomeScreen() {
   };
 
   useEffect(() => {
-    if (alarmData?.level === 3) {
+    for (var thing of things?.things || []) {
+      if (thing.metadata?.state_level === 3) {
         const loop = Animated.loop(
           Animated.sequence([
             Animated.parallel([
@@ -263,6 +289,7 @@ export default function HomeScreen() {
         loop.start();
         return () => loop.stop();
       }
+    }
   }, [things, scale, opacity]);
 
   // Tắt tracksViewChanges sau khi map đã load xong
@@ -276,26 +303,78 @@ export default function HomeScreen() {
     }
   }, [isFirstLoad]);
 
-  const handleOnPressState = (state: TagStateCallbackPayload) => {
+  const searchThings = async () => {
+    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 = state.isNormal ? "normal" : "";
+    const stateNormalQuery = tagStatePayload?.isNormal ? "normal" : "";
-    const stateSosQuery = state.isSos ? "sos" : "";
+    const stateSosQuery = tagStatePayload?.isSos ? "sos" : "";
-    const stateWarningQuery = state.isWarning
+    const stateWarningQuery = tagStatePayload?.isWarning
       ? stateNormalQuery + ",warning"
       : stateNormalQuery;
-    const stateCriticalQuery = state.isDangerous
+    const stateCriticalQuery = tagStatePayload?.isDangerous
       ? stateWarningQuery + ",critical"
       : stateWarningQuery;
 
     // Nếu bật tất cả filter thì không cần truyền stateQuery
     const stateQuery =
-      state.isNormal && state.isWarning && state.isDangerous && state.isSos
+      tagStatePayload?.isNormal &&
+      tagStatePayload?.isWarning &&
+      tagStatePayload?.isDangerous &&
+      tagStatePayload?.isSos
         ? ""
         : [stateCriticalQuery, stateSosQuery].filter(Boolean).join(",");
     let metaFormQuery = {};
-    if (state.isDisconected)
+    if (tagStatePayload?.isDisconected)
       metaFormQuery = { ...metaFormQuery, connected: false };
-
+    if (shipSearchFormData?.ship_name) {
+      metaFormQuery = {
+        ...metaFormQuery,
+        ship_name: shipSearchFormData?.ship_name,
+      };
+    }
+    if (shipSearchFormData?.reg_number) {
+      metaFormQuery = {
+        ...metaFormQuery,
+        reg_number: shipSearchFormData?.reg_number,
+      };
+    }
+    if (
+      shipSearchFormData?.ship_length[0] !== 0 ||
+      shipSearchFormData?.ship_length[1] !== 100
+    ) {
+      metaFormQuery = {
+        ...metaFormQuery,
+        ship_length: shipSearchFormData?.ship_length,
+      };
+    }
+    if (
+      shipSearchFormData?.ship_power[0] !== 0 ||
+      shipSearchFormData?.ship_power[1] !== 100000
+    ) {
+      metaFormQuery = {
+        ...metaFormQuery,
+        ship_power: shipSearchFormData?.ship_power,
+      };
+    }
+    if (shipSearchFormData?.alarm_list) {
+      metaFormQuery = {
+        ...metaFormQuery,
+        alarm_list: shipSearchFormData?.alarm_list,
+      };
+    }
+    if (shipSearchFormData?.ship_type) {
+      metaFormQuery = {
+        ...metaFormQuery,
+        ship_type: shipSearchFormData?.ship_type,
+      };
+    }
+    if (shipSearchFormData?.ship_group_id) {
+      metaFormQuery = {
+        ...metaFormQuery,
+        ship_group_id: shipSearchFormData?.ship_group_id,
+      };
+    }
     // Tạo metadata query
     const metaStateQuery =
       stateQuery !== "" ? { state_level: stateQuery } : null;
@@ -312,10 +391,28 @@ export default function HomeScreen() {
         not_empty: "ship_id",
       },
     };
+    console.log("Search Params: ", searchParams);
 
     // Gọi API tìm kiếm
     searchThingEventBus(searchParams);
   };
+  const handleOnSubmitSearchForm = async (data: SearchShipResponse) => {
+    setShipSearchFormData(data);
+    setShipSearchFormOpen(false);
+  };
+
+  const hasActiveFilters = shipSearchFormData
+    ? shipSearchFormData.ship_name !== "" ||
+      shipSearchFormData.reg_number !== "" ||
+      shipSearchFormData.ship_length[0] !== 0 ||
+      shipSearchFormData.ship_length[1] !== 100 ||
+      shipSearchFormData.ship_power[0] !== 0 ||
+      shipSearchFormData.ship_power[1] !== 100000 ||
+      shipSearchFormData.ship_type !== "" ||
+      shipSearchFormData.alarm_list !== "" ||
+      shipSearchFormData.ship_group_id !== "" ||
+      shipSearchFormData.group_id !== ""
+    : false;
 
   return (
     <GestureHandlerRootView style={styles.container}>
@@ -411,7 +508,20 @@ export default function HomeScreen() {
             </>
           )}
         </MapView>
-
+        <View className="absolute top-20 left-5">
+          {!isPanelExpanded && (
+            <IconButton
+              icon={<AntDesign name="filter" size={16} />}
+              type="primary"
+              size="large"
+              style={{
+                borderRadius: 10,
+                backgroundColor: hasActiveFilters ? "#B8D576" : "#fff",
+              }}
+              onPress={() => setShipSearchFormOpen(true)}
+            ></IconButton>
+          )}
+        </View>
         {/* <View className="absolute top-14 right-2 shadow-md">
           <SosButton />
         </View>
@@ -420,10 +530,11 @@ export default function HomeScreen() {
         {/* Draggable Panel */}
         <DraggablePanel
           minHeightPct={0.1}
-          maxHeightPct={0.5}
+          maxHeightPct={0.6}
           initialState="min"
           onExpandedChange={(expanded) => {
             console.log("Panel expanded:", expanded);
+            setIsPanelExpanded(expanded);
           }}
         >
           <>
@@ -437,22 +548,44 @@ export default function HomeScreen() {
                   (things?.metadata?.total_thing ?? 0) -
                     (things?.metadata?.total_connected ?? 0) || 0
                 }
-                onTagPress={handleOnPressState}
+                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" }}
+                    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,
-                  // backgroundColor: "green",
                 }}
                 showsVerticalScrollIndicator={false}
               >
@@ -485,6 +618,12 @@ export default function HomeScreen() {
             </View>
           </>
         </DraggablePanel>
+        <ShipSearchForm
+          initialValues={shipSearchFormData}
+          isOpen={shipSearchFormOpen}
+          onClose={() => setShipSearchFormOpen(false)}
+          onSubmit={handleOnSubmitSearchForm}
+        />
       </View>
     </GestureHandlerRootView>
   );

components/DraggablePanel.tsx

@@ -1,4 +1,5 @@
 import { Ionicons } from "@expo/vector-icons";
+import { useBottomTabBarHeight } from "@react-navigation/bottom-tabs";
 import React, { useEffect, useState } from "react";
 import {
   Pressable,
@@ -34,14 +35,10 @@ export default function DraggablePanel({
   children,
 }: DraggablePanelProps) {
   const { height: screenHeight } = useWindowDimensions();
-
+  const bottomOffset = useBottomTabBarHeight();
-  // Thêm chiều cao của bottom tab bar vào tính toán
-  const bottomOffset = 80; // 50 là chiều cao mặc định của tab bar
 
   const minHeight = screenHeight * minHeightPct;
   const maxHeight = screenHeight * maxHeightPct;
-
-  // State để quản lý icon
   const [iconName, setIconName] = useState<"chevron-down" | "chevron-up">(
     initialState === "max" ? "chevron-down" : "chevron-up"
   );
@@ -115,17 +112,13 @@ export default function DraggablePanel({
         ? screenHeight - maxHeight - bottomOffset + 40
         : screenHeight - minHeight - bottomOffset;
 
-      translateY.value = withSpring(
-        targetY,
-        {
-          damping: 20,
-          stiffness: 200,
-        },
-        () => {
-          "worklet";
       isExpanded.value = snapToMax;
-        }
+      runOnJS(notifyExpandedChange)(snapToMax);
-      );
+
+      translateY.value = withSpring(targetY, {
+        damping: 20,
+        stiffness: 50,
+      });
     });
 
   const animatedStyle = useAnimatedStyle(() => {
@@ -138,7 +131,7 @@ export default function DraggablePanel({
   useAnimatedReaction(
     () => {
       const currentHeight = screenHeight - translateY.value - bottomOffset;
-      return currentHeight > minHeight + 10;
+      return currentHeight > minHeight;
     },
     (isCurrentlyExpanded) => {
       const newIcon = isCurrentlyExpanded ? "chevron-down" : "chevron-up";
@@ -210,7 +203,7 @@ const styles = StyleSheet.create({
     elevation: 10,
   },
   header: {
-    paddingTop: 12,
+    paddingTop: 8,
     paddingBottom: 8,
     paddingHorizontal: 16,
     alignItems: "center",

components/Select.tsx

@@ -20,16 +20,16 @@ export interface SelectOption {
 }
 
 export interface SelectProps {
-  value?: string | number;
+  value?: string | number | (string | number)[];
-  defaultValue?: string | number;
+  defaultValue?: string | number | (string | number)[];
   options: SelectOption[];
-  onChange?: (value: string | number | undefined) => void;
+  onChange?: (value: string | number | (string | number)[] | undefined) => void;
   placeholder?: string;
   disabled?: boolean;
   loading?: boolean;
   allowClear?: boolean;
   showSearch?: boolean;
-  mode?: "single" | "multiple"; // multiple not implemented yet
+  mode?: "single" | "multiple";
   style?: StyleProp<ViewStyle>;
   size?: "small" | "middle" | "large";
   listStyle?: StyleProp<ViewStyle>;
@@ -38,7 +38,7 @@ export interface SelectProps {
 /**
  * Select
  * A Select component inspired by Ant Design, adapted for React Native.
- * Supports single selection, search, clear, loading, disabled states.
+ * Supports single and multiple selection, search, clear, loading, disabled states.
  */
 const Select: React.FC<SelectProps> = ({
   value,
@@ -55,16 +55,23 @@ const Select: React.FC<SelectProps> = ({
   listStyle,
   size = "middle",
 }) => {
-  const [selectedValue, setSelectedValue] = useState<
+  const initialValue = value ?? defaultValue;
-    string | number | undefined
+  const [selectedValues, setSelectedValues] = useState<(string | number)[]>(
-  >(value ?? defaultValue);
+    Array.isArray(initialValue)
+      ? initialValue
+      : initialValue
+      ? [initialValue]
+      : []
+  );
   const [isOpen, setIsOpen] = useState(false);
   const [searchText, setSearchText] = useState("");
   const [containerHeight, setContainerHeight] = useState(0);
+  const [textHeight, setTextHeight] = useState(0);
 
   useEffect(() => {
-    setSelectedValue(value);
+    const newVal = value ?? defaultValue;
-  }, [value]);
+    setSelectedValues(Array.isArray(newVal) ? newVal : newVal ? [newVal] : []);
+  }, [value, defaultValue]);
 
   const filteredOptions = showSearch
     ? options.filter((opt) =>
@@ -72,17 +79,31 @@ const Select: React.FC<SelectProps> = ({
       )
     : options;
 
-  const selectedOption = options.find((opt) => opt.value === selectedValue);
-
   const handleSelect = (val: string | number) => {
-    setSelectedValue(val);
+    let newSelected: (string | number)[];
-    onChange?.(val);
+    if (mode === "single") {
+      newSelected = [val];
+    } else {
+      newSelected = selectedValues.includes(val)
+        ? selectedValues.filter((v) => v !== val)
+        : [...selectedValues, val];
+    }
+    setSelectedValues(newSelected);
+    onChange?.(
+      mode === "single"
+        ? newSelected.length > 0
+          ? newSelected[0]
+          : undefined
+        : newSelected
+    );
+    if (mode === "single") {
       setIsOpen(false);
       setSearchText("");
+    }
   };
 
   const handleClear = () => {
-    setSelectedValue(undefined);
+    setSelectedValues([]);
     onChange?.(undefined);
   };
 
@@ -100,13 +121,26 @@ const Select: React.FC<SelectProps> = ({
     ? colors.backgroundSecondary
     : colors.surface;
 
+  let displayText = placeholder;
+  if (selectedValues.length > 0) {
+    if (mode === "single") {
+      const opt = options.find((o) => o.value === selectedValues[0]);
+      displayText = opt?.label || placeholder;
+    } else {
+      const labels = selectedValues
+        .map((v) => options.find((o) => o.value === v)?.label)
+        .filter(Boolean);
+      displayText = labels.join(", ");
+    }
+  }
+
   return (
     <View style={styles.wrapper}>
       <TouchableOpacity
         style={[
           styles.container,
           {
-            height: sz.height,
+            height: Math.max(sz.height, textHeight + 16), // Add padding
             paddingHorizontal: sz.paddingHorizontal,
             backgroundColor: selectBackgroundColor,
             borderColor: disabled ? colors.border : colors.primary,
@@ -129,19 +163,19 @@ const Select: React.FC<SelectProps> = ({
                   fontSize: sz.fontSize,
                   color: disabled
                     ? colors.textSecondary
-                    : selectedValue
+                    : selectedValues.length > 0
                     ? colors.text
                     : colors.textSecondary,
                 },
               ]}
-              numberOfLines={1}
+              onLayout={(e) => setTextHeight(e.nativeEvent.layout.height)}
             >
-              {selectedOption?.label || placeholder}
+              {displayText}
             </Text>
           )}
         </View>
         <View style={styles.suffix}>
-          {allowClear && selectedValue && !loading ? (
+          {allowClear && selectedValues.length > 0 && !loading ? (
             <TouchableOpacity onPress={handleClear} style={styles.icon}>
               <AntDesign name="close" size={16} color={colors.textSecondary} />
             </TouchableOpacity>
@@ -193,7 +227,7 @@ const Select: React.FC<SelectProps> = ({
                     borderBottomColor: colors.separator,
                   },
                   item.disabled && styles.optionDisabled,
-                  selectedValue === item.value && {
+                  selectedValues.includes(item.value) && {
                     backgroundColor: colors.primary + "20", // Add transparency to primary color
                   },
                 ]}
@@ -209,7 +243,7 @@ const Select: React.FC<SelectProps> = ({
                     item.disabled && {
                       color: colors.textSecondary,
                     },
-                    selectedValue === item.value && {
+                    selectedValues.includes(item.value) && {
                       color: colors.primary,
                       fontWeight: "600",
                     },
@@ -217,7 +251,7 @@ const Select: React.FC<SelectProps> = ({
                 >
                   {item.label}
                 </Text>
-                {selectedValue === item.value && (
+                {selectedValues.includes(item.value) && (
                   <AntDesign name="check" size={16} color={colors.primary} />
                 )}
               </TouchableOpacity>

components/ShipSearchForm.tsx

@@ -91,8 +91,14 @@ const ShipSearchForm = (props: ShipSearchFormProps) => {
       reset({
         ship_name: props.initialValues.ship_name || "",
         reg_number: props.initialValues.reg_number || "",
-        ship_length: [0, 100],
+        ship_length: [
-        ship_power: [0, 100000],
+          props.initialValues.ship_length?.[0] || 0,
+          props.initialValues.ship_length?.[1] || 100,
+        ],
+        ship_power: [
+          props.initialValues.ship_power?.[0] || 0,
+          props.initialValues.ship_power?.[1] || 100000,
+        ],
         ship_type: props.initialValues.ship_type || "",
         alarm_list: props.initialValues.alarm_list || "",
         ship_group_id: props.initialValues.ship_group_id || "",
@@ -129,7 +135,9 @@ const ShipSearchForm = (props: ShipSearchFormProps) => {
 
   const onSubmitForm = (data: SearchShipResponse) => {
     props.onSubmit?.(data);
-    props.onClose();
+    console.log("Data: ", data);
+
+    // props.onClose();
   };
 
   const onReset = () => {
@@ -317,6 +325,7 @@ const ShipSearchForm = (props: ShipSearchFormProps) => {
                           value: type.id || 0,
                         }))}
                         placeholder="Chọn loại tàu"
+                        mode="multiple"
                         value={value}
                         onChange={onChange}
                       />
@@ -339,6 +348,7 @@ const ShipSearchForm = (props: ShipSearchFormProps) => {
                           value: type.value || "",
                         }))}
                         placeholder="Chọn loại cảnh báo"
+                        mode="multiple"
                         value={value}
                         onChange={onChange}
                       />
@@ -361,12 +371,14 @@ const ShipSearchForm = (props: ShipSearchFormProps) => {
                           value: group.id || "",
                         }))}
                         placeholder="Chọn đội tàu"
+                        mode="multiple"
                         value={value}
                         onChange={onChange}
                       />
                     )}
                   />
                 </View>
+                <View className="h-12"></View>
               </View>
             </ScrollView>
 

components/Slider.tsx

@@ -290,12 +290,13 @@ export default function Slider({
           {Object.entries(marks).map(([key, label]) => {
             const val = Number(key);
             const pos = getPositionFromValue(val);
+            const leftPos = Math.max(0, Math.min(pos - 10, width - 40));
             return (
               <Text
                 key={key}
                 style={{
                   position: "absolute",
-                  left: pos - 10,
+                  left: leftPos,
                   fontSize: 12,
                   color: "#666",
                   textAlign: "center",

components/map/TagState.tsx

@@ -11,7 +11,7 @@ export type TagStateCallbackPayload = {
   isDisconected: boolean; // giữ đúng theo yêu cầu (1 'n')
 };
 
-export type TagStateProps = {
+type TagStateProps = {
   normalCount?: number;
   warningCount?: number;
   dangerousCount?: number;