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:
Oleksandr Hutsul
2026-04-17 00:31:24 +03:00
parent 567092188d
commit 274800e508
21 changed files with 1489 additions and 131 deletions
+32
View File
@@ -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>
)
}