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
+44
View File
@@ -0,0 +1,44 @@
import { Line } from 'react-chartjs-2'
import 'chart.js/auto'
import { useTranslation } from 'react-i18next'
import type { FlightPoint } from './types'
interface Props {
points: FlightPoint[]
}
export default function AltitudeChart({ points }: Props) {
const { t } = useTranslation()
if (points.length === 0) return null
const data = {
labels: points.map((_, i) => i + 1),
datasets: [{
label: t('flights.planner.altitude'),
data: points.map(p => p.altitude),
borderColor: '#228be6',
backgroundColor: 'rgba(34,139,230,0.2)',
pointBackgroundColor: '#fd7e14',
pointBorderColor: '#1e1e1e',
pointBorderWidth: 1,
tension: 0.1,
}],
}
const options = {
responsive: true,
maintainAspectRatio: false,
plugins: { legend: { display: false } },
scales: {
x: { ticks: { font: { size: 10 }, color: '#6c757d' }, grid: { color: '#495057' } },
y: { ticks: { font: { size: 10 }, color: '#6c757d' }, grid: { color: '#495057' } },
},
}
return (
<div className="h-16">
<Line data={data} options={options} />
</div>
)
}