mirror of
https://github.com/azaion/ui.git
synced 2026-04-23 05:06:36 +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,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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user