From 42028eafc3a0edeae360ee93998e767c0fcc5337 Mon Sep 17 00:00:00 2001 From: Tran Anh Tuan Date: Wed, 3 Dec 2025 16:22:46 +0700 Subject: [PATCH] =?UTF-8?q?x=C3=B3a=20task?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- TAG_SEARCH_SHIP.md | 25 ------------- TAG_STATE_TASK.md | 25 ------------- Task.md | 87 ---------------------------------------------- 3 files changed, 137 deletions(-) delete mode 100644 TAG_SEARCH_SHIP.md delete mode 100644 TAG_STATE_TASK.md delete mode 100644 Task.md diff --git a/TAG_SEARCH_SHIP.md b/TAG_SEARCH_SHIP.md deleted file mode 100644 index 6056c62..0000000 --- a/TAG_SEARCH_SHIP.md +++ /dev/null @@ -1,25 +0,0 @@ -# Prompt: Tạo một component tags ở `components/ui/ShipSearchForm` - -## Mục tiêu - -- Tạo một component ShipSearchForm để: - - Cho người dùng nhập vào các trường Tên tàu, Số đăng ký, Chiều dài, Công suất, Loại tàu, Cảnh báo, Đội tàu - - Tên tàu và Số đăng ký là input cho người dùng nhập vào - - Nếu số lượng truyền vào bằng 0 thì sẽ không hiển thị - - Có callback khi nhấn vào tag - - Quy định màu: - - Bình thường: - - Chưa nhấn: nền trắng, chữ xanh, màu viền xanh lá - - Khi nhấn: nền xanh lá cây, chữ trắng, màu viền xanh lá - - Cảnh báo - - Chưa nhấn: nền trắng, chữ vàng, màu viền vàng - - Khi nhấn: nền vàng, chữ trắng, màu viền vàng - - Nguy hiểm - - Chưa nhấn: nền trắng, chữ cam, màu viền cam - - Khi nhấn: nền cam, chữ trắng, màu viền cam - - SOS - - Chưa nhấn: nền trắng, chữ đỏ, màu viền đỏ - - Khi nhấn: nền đỏ, chữ trắng, màu viền đỏ - - Mất kết nối - - Chưa nhấn: nền trắng, chữ xám đậm, màu viền xám đậm - - Khi nhấn: nền xám đậm, chữ trắng, màu viền xám đậm diff --git a/TAG_STATE_TASK.md b/TAG_STATE_TASK.md deleted file mode 100644 index b0c8b47..0000000 --- a/TAG_STATE_TASK.md +++ /dev/null @@ -1,25 +0,0 @@ -# Prompt: Tạo một component tags ở `components/map` - -## Mục tiêu - -- Tạo một component TagState để: - - Mình có thể hiển thị số lượng thiết bị Bình thường, Cảnh báo, Nguy hiểm, SOS, Mất kết nối - - Mình sẽ truyền vào số lượng các thiết bị ở các trạng thái - - Nếu số lượng truyền vào bằng 0 thì sẽ không hiển thị - - Có callback khi nhấn vào tag - - Quy định màu: - - Bình thường: - - Chưa nhấn: nền trắng, chữ xanh, màu viền xanh lá - - Khi nhấn: nền xanh lá cây, chữ trắng, màu viền xanh lá - - Cảnh báo - - Chưa nhấn: nền trắng, chữ vàng, màu viền vàng - - Khi nhấn: nền vàng, chữ trắng, màu viền vàng - - Nguy hiểm - - Chưa nhấn: nền trắng, chữ cam, màu viền cam - - Khi nhấn: nền cam, chữ trắng, màu viền cam - - SOS - - Chưa nhấn: nền trắng, chữ đỏ, màu viền đỏ - - Khi nhấn: nền đỏ, chữ trắng, màu viền đỏ - - Mất kết nối - - Chưa nhấn: nền trắng, chữ xám đậm, màu viền xám đậm - - Khi nhấn: nền xám đậm, chữ trắng, màu viền xám đậm diff --git a/Task.md b/Task.md deleted file mode 100644 index 9c9e56d..0000000 --- a/Task.md +++ /dev/null @@ -1,87 +0,0 @@ -# Prompt: Tạo bottom sheet kéo/thả trên Map ở `app/(tabs)/index.tsx` - -## Mục tiêu - -- Thêm một component dạng bottom sheet nổi trên `MapView`, có thể nhấn (click) để mở nhanh và kéo (swipe) để thay đổi chiều cao mượt mà. - -## Ngữ cảnh - -- Dự án Expo React Native (TypeScript) với màn hình map tại: `app/(tabs)/index.tsx`. -- Cần chèn một panel nổi (overlay) bám đáy màn hình, hiển thị trên MapView. - -## Yêu cầu chức năng - -- Chiều cao ban đầu: 10% chiều cao màn hình. -- Chiều cao tối đa: 50% chiều cao màn hình. -- Có một nút ở góc trên bên phải của panel để “mở/thu” (move up/down). -- Khi người dùng click vào panel hoặc click nút: panel mở ngay lập tức lên 50%. -- Khi người dùng vuốt (kéo) panel lên/xuống: chiều cao thay đổi dần, bị chặn trong khoảng [10%, 50%]. -- Hiệu ứng chuyển đổi chiều cao phải mượt mà, không gây khó chịu (ease-in-out, 180–300ms). -- Panel chỉ nhận touch trong vùng của nó, không chặn thao tác trên map ở các vùng khác. - -## Yêu cầu UI/UX - -- Panel bám đáy màn hình, bo tròn góc trên (ví dụ: borderTopLeftRadius/borderTopRightRadius = 16–20). -- Có bóng đổ nhẹ để nổi trên map. -- Có “khu vực kéo” (drag handle) ở header panel (có thể là dải ngang mảnh) + nút toggle ở góc trên bên phải. -- Nội dung bên trong panel có thể là placeholder đơn giản (ví dụ một vài dòng text) để kiểm chứng hành vi. - -## Ràng buộc kỹ thuật - -- Ưu tiên dùng `react-native-gesture-handler` + `react-native-reanimated` để có tương tác kéo mượt (UI thread). Nếu không khả dụng, fallback sang `Animated` + `PanResponder` vẫn được. -- Không thêm UI library bên thứ ba cho bottom sheet (ví dụ `@gorhom/bottom-sheet`) — tự triển khai component nhẹ. -- TypeScript, functional components, tuân thủ style hiện có (không thay đổi kiến trúc không cần thiết). - -## Hướng triển khai (gợi ý) - -1. Tạo component `components/DraggablePanel.tsx` với các props: - - `minHeightPct?: number` (mặc định 0.1) - - `maxHeightPct?: number` (mặc định 0.5) - - `initialState?: 'min' | 'max'` (mặc định 'min') - - `onExpandedChange?: (expanded: boolean) => void` -2. Trong `DraggablePanel`, tính chiều cao theo phần trăm màn hình bằng `useWindowDimensions` hoặc `Dimensions.get('window').height`. -3. Nếu dùng Reanimated: dùng `useSharedValue` cho height hoặc translateY, `withTiming` khi click, và `withSpring`/`withTiming` khi kéo. Clamp giá trị vào [min, max]. -4. Nếu dùng Animated: dùng `Animated.Value` + `Animated.timing` và `PanResponder` để cập nhật height theo cử chỉ, clamp trong [min, max]. -5. Thêm header có drag handle và nút toggle ở góc trên phải: - - Click header hoặc click nút: toggle giữa min (10%) và max (50%). - - Vuốt: cập nhật theo delta cử chỉ; khi thả tay nếu vượt ngưỡng giữa thì snap về 50%, ngược lại về 10%. -6. Đặt panel overlay lên Map ở `app/(tabs)/index.tsx` bằng `position: 'absolute'`, `left: 0`, `right: 0`, `bottom: 0`, `height` do animation điều khiển. Đảm bảo `pointerEvents` phù hợp để không chặn thao tác trên map bên ngoài panel. - -## Tiêu chí chấp nhận (Acceptance Criteria) - -- Panel xuất hiện trên Map, bám đáy, bo góc trên, có bóng đổ nhẹ. -- Chiều cao ban đầu là ~10% màn hình; click mở hoặc click nút toggle lập tức chuyển lên ~50% (animation ~200ms, mượt). -- Vuốt kéo panel thay đổi chiều cao theo ngón tay, bị chặn trong khoảng [10%, 50%]. Thả tay, panel snap về 10% hoặc 50% theo vị trí/độ nhanh. -- Nút ở góc trên phải hoạt động đúng: chuyển qua lại giữa 10% và 50%. -- Tương tác map vẫn bình thường ở vùng ngoài panel; trong panel, vuốt không làm map pan. -- Không crash, không warning/ lỗi TypeScript mới do thay đổi này. - -## Bàn giao - -- File mới: `components/DraggablePanel.tsx`. -- Sửa file: `app/(tabs)/index.tsx` để chèn panel overlay. -- Không thay đổi các phần không liên quan. -- Nếu cần cài đặt `react-native-reanimated`/`react-native-gesture-handler`, cung cấp hướng dẫn và chỉnh cấu hình cần thiết cho Expo (nhưng chỉ thực hiện nếu bắt buộc). - -## Gợi ý kiểm thử thủ công - -- iOS và Android (nếu có): - - Mở app, xác nhận panel đang ở 10%. - - Click vào panel hoặc nút: panel mở lên 50% với animation mượt. - - Kéo lên/xuống nhiều lần: độ cao thay đổi mượt, không vượt quá 50% hoặc thấp hơn 10%. - - Pan/zoom Map ở vùng ngoài panel: vẫn hoạt động bình thường. - - Xoay màn hình (nếu hỗ trợ): panel tính lại theo chiều cao mới. - -## Lưu ý - -- Giữ code gọn, tách logic cử chỉ/animation khỏi phần trình bày nếu hợp lý. -- Đặt tên biến/props rõ ràng, không dùng one-letter variable. -- Không thêm license header hoặc thay đổi cấu trúc dự án nếu không cần thiết. - -- Mục tiêu: Tạo một component có thể di chuyển lên xuống -- Bài toán: Ở giao diện index.tsx, đã có component MapView - - Giờ mình muốn thêm một component nổi lên trên map, ban đầu sẽ có chiều cao 10% chiều cao màn hình, giống như modal của Expo - - Trên giao diện cho một nút di chuyển lên/ xuống ở góc trên bên phải - - Khi người dùng click vào hoặc vuốt component lên thì chiều cao của thẻ cũng thay đổi, max là 50% chiều cao màn hình - - Khi click thì chiều cao sẽ đổi thành 50% luôn, còn vuốt thì chiều cao sẽ tăng dần - - Hiệu ứng thay đổi chiều cao mượt mà, không gây khó chịu cho người dùng