mirror of
https://github.com/azaion/ui.git
synced 2026-06-23 14:11:11 +00:00
feat(flights): integrate mission-planner into Flights page
- Port mission-planner flight planning to main app (Tailwind, react-leaflet v5, react-i18next) - Add FlightMap with click-to-add waypoints, draggable markers, polyline with arrows - Add FlightParamsPanel with action modes, waypoint list (drag-reorder), altitude chart, wind, JSON import/export - Add FlightListSidebar with create/delete and telemetry date - Add collapsible left panel with quick action mode shortcuts - Add work area / no-go zone drawing via manual mouse events (L.rectangle) - Add AltitudeDialog and JsonEditorDialog (Tailwind modals) - Add battery/time/distance calculations per waypoint segment - Add satellite/classic map toggle and mini-map on point drag - Add Camera FOV and Communication Addr fields - Add current position display under location search - Merge mission-planner translations under flights.planner.* - Gitignore .superpowers session data
This commit is contained in:
@@ -0,0 +1,32 @@
|
||||
import { MapContainer, TileLayer, CircleMarker, useMap } from 'react-leaflet'
|
||||
import { useEffect } from 'react'
|
||||
import type L from 'leaflet'
|
||||
import { TILE_URLS } from './types'
|
||||
import type { MovingPointInfo } from './types'
|
||||
|
||||
function UpdateCenter({ latlng }: { latlng: L.LatLng }) {
|
||||
const map = useMap()
|
||||
useEffect(() => { map.setView(latlng) }, [latlng, map])
|
||||
return null
|
||||
}
|
||||
|
||||
interface Props {
|
||||
pointPosition: MovingPointInfo
|
||||
mapType: 'classic' | 'satellite'
|
||||
}
|
||||
|
||||
export default function MiniMap({ pointPosition, mapType }: Props) {
|
||||
return (
|
||||
<div
|
||||
className="absolute w-[240px] h-[180px] border border-az-border rounded shadow-lg z-[1000] overflow-hidden pointer-events-none"
|
||||
style={{ top: pointPosition.y, left: pointPosition.x }}
|
||||
>
|
||||
<MapContainer center={pointPosition.latlng} zoom={18} zoomControl={false}
|
||||
className="w-full h-full" attributionControl={false}>
|
||||
<TileLayer url={mapType === 'classic' ? TILE_URLS.classic : TILE_URLS.satellite} />
|
||||
<CircleMarker center={pointPosition.latlng} radius={3} color="#fa5252" />
|
||||
<UpdateCenter latlng={pointPosition.latlng} />
|
||||
</MapContainer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user