xóa task
This commit is contained in:
Tran Anh Tuan
@@ -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
|
|
||||||
@@ -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
|
|
||||||
87
Task.md
87
Task.md
@@ -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
|
|
||||||
Reference in New Issue
Block a user