86 lines
4.2 KiB
Markdown
86 lines
4.2 KiB
Markdown
# KẾ HOẠCH PHÁT TRIỂN TÍNH NĂNG ĐỊNH VỊ LỘ TRÌNH (AGENT SPECIFICATION)
|
|
|
|
## 1. Phân Tích Trạng Thái Giao Diện Hiện Tại (Context Analysis)
|
|
* **Màn hình**: Tour Dashboard (Tên tour người dùng tự đặt khi tạo tour mới).
|
|
* **Tab Active**: Lộ trình (Mặc định).
|
|
* **Sub-view Active**: Bản đồ (Component bản đồ đang hiển thị ở nửa dưới màn hình).
|
|
* **Thành phần cần can thiệp**: Lớp tương tác (Interaction Layer) của thư viện Bản đồ (Mapbox / Google Maps API / Leaflet) đang render phía dưới.
|
|
|
|
## 2. Đặc Tả Kỹ Thuật Đóng Gói (Functional Requirements)
|
|
|
|
### 2.1. Quản lý Trạng thái Thực thể (Data State Management)
|
|
Agent cần ánh xạ sự kiện trên UI vào hai trường dữ liệu trong Database Schema:
|
|
* **Điểm xuất phát (StartLocation)**: Ánh xạ vào Location đầu tiên của Tour với sequence: 0 hoặc cấu hình tọa độ trực tiếp vào cấu trúc metadata của Tour.
|
|
* **Điểm kết thúc (EndLocation)**: Ánh xạ vào Location cuối cùng của Tour hoặc trường đích của Tour.
|
|
|
|
### 2.2. Chi Tiết Bản Ghép Logic Sự Kiện (Event Mapping)
|
|
|
|
| Thao tác Người dùng | Trình kích hoạt (Trigger) | Hành động Hệ thống (System Action) | Phản hồi Giao diện (UI Feedback) |
|
|
| :--- | :--- | :--- | :--- |
|
|
| **Xác định Điểm xuất phát** | - Tìm kiếm trên Map Search Box<br>- Hoặc Right-Click (Desktop)<br>- Hoặc Long-Press (Mobile) | 1. Trích xuất tọa độ (lat, lng).<br>2. Gọi API khởi tạo điểm đầu.<br>3. Cập nhật nhãn "Điểm xuất phát:..." trên Top Banner. | Tạo 1 Ghim (Marker) Màu Xanh Blue tại tọa độ được chọn. |
|
|
| **Xác định Điểm kết thúc** | - Tìm kiếm trên Map Search Box<br>- Hoặc Right-Click (Desktop)<br>- Hoặc Long-Press (Mobile) | 1. Trích xuất tọa độ (lat, lng).<br>2. Gọi API khởi tạo điểm cuối.<br>3. Cập nhật nhãn "Điểm kết thúc:..." trên Top Banner. | Tạo 1 Ghim (Marker) Màu Xanh Green tại tọa độ được chọn. |
|
|
|
|
## 3. Kiến Trúc Mã Nguồn Gợi Ý Cho AI Agent (Pseudocode / Implementation Guide)
|
|
Agent cần triển khai component bản đồ với cấu trúc xử lý sự kiện (Context Menu) như sau:
|
|
|
|
### 3.1. Cấu trúc Menu Ngữ Cảnh (Custom Context Menu Component)
|
|
Khi sự kiện click chuột phải/nhấn giữ xảy ra, lấy ra tọa độ (lat, lng) của điểm chạm và hiển thị menu pop-up tại vị trí con trỏ:
|
|
|
|
```typescript
|
|
interface ContextMenuProps {
|
|
x: number; // Tọa độ pixel trên màn hình
|
|
y: number;
|
|
latLng: { lat: number; lng: number };
|
|
onSelectStart: (latLng: { lat: number; lng: number }) => void;
|
|
onSelectEnd: (latLng: { lat: number; lng: number }) => void;
|
|
}
|
|
```
|
|
|
|
### 3.2. Thuật toán xử lý ghim (Marker Rendering Logic)
|
|
Mô tả logic bằng mã giả để Agent tiến hành sinh code xử lý:
|
|
|
|
```javascript
|
|
// Trạng thái lưu trữ tọa độ trên Frontend
|
|
const [startCoords, setStartCoords] = useState(null);
|
|
const [endCoords, setEndCoords] = useState(null);
|
|
|
|
// Hàm xử lý khi chọn "Bắt đầu từ đây"
|
|
function handleSetStartPoint(latLng) {
|
|
// 1. Cập nhật state để render ghim Blue
|
|
setStartCoords(latLng);
|
|
|
|
// 2. Gọi API cập nhật Database thông qua UUID của Tour hiện tại
|
|
API.updateTourStartPoint(tourId, {
|
|
latitude: latLng.lat,
|
|
longitude: latLng.lng,
|
|
locationType: 'START'
|
|
});
|
|
|
|
// 3. Render Marker Blue lên Bản đồ
|
|
map.renderMarker({
|
|
position: latLng,
|
|
icon: 'blue-pin.png',
|
|
label: 'S'
|
|
});
|
|
}
|
|
|
|
// Hàm xử lý khi chọn "Kết thúc ở đây"
|
|
function handleSetEndPoint(latLng) {
|
|
// 1. Cập nhật state để render ghim Green
|
|
setEndCoords(latLng);
|
|
|
|
// 2. Gọi API cập nhật Database
|
|
API.updateTourEndPoint(tourId, {
|
|
latitude: latLng.lat,
|
|
longitude: latLng.lng,
|
|
locationType: 'END'
|
|
});
|
|
|
|
// 3. Render Marker Green lên Bản đồ
|
|
map.renderMarker({
|
|
position: latLng,
|
|
icon: 'green-pin.png',
|
|
label: 'E'
|
|
});
|
|
}
|
|
``` |