1736 lines
63 KiB
Dart
1736 lines
63 KiB
Dart
import 'dart:async';
|
||
import 'package:flutter/material.dart';
|
||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||
import 'package:drift/drift.dart' as drift;
|
||
import 'package:geolocator/geolocator.dart';
|
||
import 'package:intl/intl.dart';
|
||
import '../../database/database.dart';
|
||
import '../../core/responsive/responsive_layout.dart';
|
||
import '../../core/theme/theme_extensions.dart';
|
||
import '../../services/location_service.dart';
|
||
import '../../services/map/map_provider_interface.dart';
|
||
import '../../services/map/map_providers.dart';
|
||
import '../../services/map/unified_map_view.dart';
|
||
import '../../services/alerts/road_alert_models.dart';
|
||
import '../../services/alerts/road_alert_service.dart';
|
||
import '../../services/alerts/widgets/quick_swarm_report_modal.dart';
|
||
import '../../services/map/map_layer_settings.dart';
|
||
import '../../services/routes/route_models.dart';
|
||
import '../../services/routes/route_provider.dart';
|
||
import '../../services/routes/route_providers.dart';
|
||
import '../../services/routes/navigation_handoff.dart';
|
||
import '../../services/navigation/navigation_session_service.dart';
|
||
import '../dashboard/widgets/navigation_maneuver_card.dart';
|
||
import 'widgets/tactical_layers_bottom_sheet.dart';
|
||
import '../replay/replay_screen.dart';
|
||
|
||
class MapScreen extends ConsumerStatefulWidget {
|
||
final int? rideId;
|
||
const MapScreen({super.key, this.rideId});
|
||
|
||
@override
|
||
ConsumerState<MapScreen> createState() => _MapScreenState();
|
||
}
|
||
|
||
class _MapScreenState extends ConsumerState<MapScreen> {
|
||
bool _isLoadingHistory = true;
|
||
List<TelemetrySample> _telemetrySamples = [];
|
||
List<AppLatLng> _routePoints = [];
|
||
List<AppMapMarker> _eventMarkers = [];
|
||
AppLatLng? _initialCenter;
|
||
AppLatLng _fallbackLocation = const AppLatLng(37.7749, -122.4194);
|
||
|
||
bool _showRoute = true;
|
||
bool _showSpeedHeatmap = false;
|
||
bool _showHardAccel = true;
|
||
bool _showHardBraking = true;
|
||
bool _showCornering = true;
|
||
|
||
double _currentZoom = 17.0;
|
||
bool _isNorthUp = true;
|
||
String _destinationQuery = '';
|
||
late final TextEditingController _searchController;
|
||
Timer? _searchDebounce;
|
||
bool _isSearching = false;
|
||
List<PlaceSearchResult> _searchResults = [];
|
||
ResolvedPlace? _selectedDestination;
|
||
RouteCalculationResult? _previewRouteResult;
|
||
bool _isCalculatingRoute = false;
|
||
RoutingOptions _routingOptions = const RoutingOptions();
|
||
|
||
static const double _hardAccelThresholdG = 0.35;
|
||
static const double _hardBrakingThresholdG = -0.35;
|
||
static const double _corneringLeanThresholdDeg = 20.0;
|
||
static const double _corneringLateralGThreshold = 0.35;
|
||
static const Duration _eventMergeWindow = Duration(milliseconds: 1500);
|
||
|
||
@override
|
||
void initState() {
|
||
super.initState();
|
||
_searchController = TextEditingController();
|
||
if (widget.rideId != null) {
|
||
_loadRideHistory();
|
||
} else {
|
||
_isLoadingHistory = false;
|
||
_initLiveLocation();
|
||
}
|
||
}
|
||
|
||
@override
|
||
void dispose() {
|
||
_searchDebounce?.cancel();
|
||
_searchController.dispose();
|
||
super.dispose();
|
||
}
|
||
|
||
void _onSearchQueryChanged(String query, AppLatLng currentPos) {
|
||
setState(() => _destinationQuery = query);
|
||
_searchDebounce?.cancel();
|
||
final clean = query.trim();
|
||
if (clean.length < 2) {
|
||
setState(() {
|
||
_searchResults = [];
|
||
_isSearching = false;
|
||
});
|
||
return;
|
||
}
|
||
|
||
setState(() => _isSearching = true);
|
||
_searchDebounce = Timer(const Duration(milliseconds: 350), () async {
|
||
try {
|
||
final results = await ref
|
||
.read(activeRouteCalculationProvider)
|
||
.searchPlaces(clean, nearLocation: currentPos);
|
||
if (mounted && _destinationQuery.trim() == clean) {
|
||
setState(() {
|
||
_searchResults = results;
|
||
_isSearching = false;
|
||
});
|
||
}
|
||
} catch (_) {
|
||
if (mounted) setState(() => _isSearching = false);
|
||
}
|
||
});
|
||
}
|
||
|
||
Future<void> _onSelectPlace(
|
||
PlaceSearchResult place,
|
||
AppLatLng currentPos,
|
||
) async {
|
||
_searchDebounce?.cancel();
|
||
setState(() {
|
||
_searchResults = [];
|
||
_searchController.text = place.primaryText;
|
||
_destinationQuery = place.primaryText;
|
||
});
|
||
|
||
try {
|
||
final resolved = place.hasCoordinates
|
||
? place.toResolvedPlace()!
|
||
: await ref
|
||
.read(activeRouteCalculationProvider)
|
||
.resolvePlace(place.providerId);
|
||
|
||
if (!mounted) return;
|
||
setState(() => _selectedDestination = resolved);
|
||
await _calculateRouteToDestination(resolved, currentPos);
|
||
} catch (e) {
|
||
if (mounted) {
|
||
ScaffoldMessenger.of(context).showSnackBar(
|
||
SnackBar(content: Text('Failed to resolve place: $e')),
|
||
);
|
||
}
|
||
}
|
||
}
|
||
|
||
Future<void> _calculateRouteToDestination(
|
||
ResolvedPlace dest,
|
||
AppLatLng currentPos,
|
||
) async {
|
||
setState(() => _isCalculatingRoute = true);
|
||
|
||
try {
|
||
final origin = RouteStop(
|
||
id: 'origin',
|
||
order: 0,
|
||
displayName: 'Current Location',
|
||
latitude: currentPos.latitude,
|
||
longitude: currentPos.longitude,
|
||
);
|
||
final destinationStop = RouteStop(
|
||
id: 'dest',
|
||
order: 1,
|
||
displayName: dest.displayName,
|
||
latitude: dest.latitude,
|
||
longitude: dest.longitude,
|
||
);
|
||
|
||
final result = await ref
|
||
.read(activeRouteCalculationProvider)
|
||
.calculateRoute([origin, destinationStop], options: _routingOptions);
|
||
|
||
if (mounted) {
|
||
setState(() {
|
||
_previewRouteResult = result;
|
||
_isCalculatingRoute = false;
|
||
});
|
||
}
|
||
} catch (e) {
|
||
if (mounted) {
|
||
setState(() => _isCalculatingRoute = false);
|
||
ScaffoldMessenger.of(context).showSnackBar(
|
||
SnackBar(content: Text('Route calculation error: $e')),
|
||
);
|
||
}
|
||
}
|
||
}
|
||
|
||
void _clearDestination() {
|
||
_searchDebounce?.cancel();
|
||
_searchController.clear();
|
||
setState(() {
|
||
_destinationQuery = '';
|
||
_searchResults = [];
|
||
_selectedDestination = null;
|
||
_previewRouteResult = null;
|
||
});
|
||
}
|
||
|
||
void _startTurnByTurnNavigation() {
|
||
if (_previewRouteResult == null || _selectedDestination == null) return;
|
||
ref.read(navigationSessionProvider.notifier).startNavigation(
|
||
calculationResult: _previewRouteResult!,
|
||
destination: _selectedDestination,
|
||
options: _routingOptions,
|
||
);
|
||
ScaffoldMessenger.of(context).showSnackBar(
|
||
SnackBar(
|
||
content: Text('Navigation started to ${_selectedDestination!.displayName}'),
|
||
backgroundColor: const Color(0xFF00E5FF),
|
||
),
|
||
);
|
||
}
|
||
|
||
Future<void> _initLiveLocation() async {
|
||
final locationService = ref.read(locationServiceProvider);
|
||
await locationService.requestPermissions();
|
||
try {
|
||
final lastPos = await Geolocator.getLastKnownPosition();
|
||
if (lastPos != null && mounted) {
|
||
setState(() => _fallbackLocation = AppLatLng(lastPos.latitude, lastPos.longitude));
|
||
} else {
|
||
final currentPos = await Geolocator.getCurrentPosition(
|
||
locationSettings: const LocationSettings(timeLimit: Duration(seconds: 3)),
|
||
).catchError((_) => Position(
|
||
longitude: -122.4194,
|
||
latitude: 37.7749,
|
||
timestamp: DateTime.now(),
|
||
accuracy: 0,
|
||
altitude: 0,
|
||
heading: 0,
|
||
speed: 0,
|
||
speedAccuracy: 0,
|
||
altitudeAccuracy: 0,
|
||
headingAccuracy: 0,
|
||
));
|
||
if (mounted) setState(() => _fallbackLocation = AppLatLng(currentPos.latitude, currentPos.longitude));
|
||
}
|
||
} catch (_) {}
|
||
}
|
||
|
||
Future<void> _loadRideHistory() async {
|
||
final db = ref.read(databaseProvider);
|
||
final telemetry = await (db.select(db.telemetrySamples)
|
||
..where((t) => t.rideId.equals(widget.rideId!))
|
||
..orderBy([(t) => drift.OrderingTerm(expression: t.timestamp)]))
|
||
.get();
|
||
final events = await (db.select(db.rideEvents)
|
||
..where((e) => e.rideId.equals(widget.rideId!)))
|
||
.get();
|
||
|
||
_telemetrySamples = telemetry;
|
||
_routePoints = telemetry
|
||
.where((t) => t.latitude != null && t.longitude != null)
|
||
.map((t) => AppLatLng(t.latitude!, t.longitude!))
|
||
.toList();
|
||
if (_routePoints.isNotEmpty) _initialCenter = _routePoints.first;
|
||
|
||
_eventMarkers = _buildStoredEventMarkers(events);
|
||
_eventMarkers.addAll(_buildTelemetryEventMarkers(telemetry));
|
||
|
||
if (mounted) setState(() => _isLoadingHistory = false);
|
||
}
|
||
|
||
List<AppMapMarker> _buildStoredEventMarkers(List<RideEvent> events) {
|
||
final markers = <AppMapMarker>[];
|
||
for (final event in events) {
|
||
if (event.latitude == null || event.longitude == null) continue;
|
||
final typeLower = event.eventType.toLowerCase();
|
||
Color markerColor = Colors.redAccent;
|
||
IconData markerIcon = Icons.warning_amber_rounded;
|
||
if (typeLower.contains('corner') || typeLower.contains('lean')) {
|
||
markerColor = const Color(0xFF00E5FF);
|
||
markerIcon = Icons.cached;
|
||
} else if (typeLower.contains('accel')) {
|
||
markerColor = const Color(0xFF76FF03);
|
||
markerIcon = Icons.arrow_upward;
|
||
} else if (typeLower.contains('brak')) {
|
||
markerColor = const Color(0xFFFF5252);
|
||
markerIcon = Icons.arrow_downward;
|
||
} else if (typeLower.contains('speed')) {
|
||
markerColor = const Color(0xFFE040FB);
|
||
markerIcon = Icons.speed;
|
||
}
|
||
markers.add(_eventMarker(
|
||
id: 'event_${event.id}',
|
||
position: AppLatLng(event.latitude!, event.longitude!),
|
||
label: event.eventType,
|
||
value: event.value,
|
||
timestamp: event.timestamp,
|
||
markerColor: markerColor,
|
||
markerIcon: markerIcon,
|
||
));
|
||
}
|
||
return markers;
|
||
}
|
||
|
||
List<AppMapMarker> _buildTelemetryEventMarkers(List<TelemetrySample> samples) {
|
||
final gps = samples.where((s) =>
|
||
s.latitude != null && s.longitude != null &&
|
||
(s.longitudinalG != null || s.accelX != null || s.lateralG != null || s.leanAngle != null)).toList();
|
||
if (gps.isEmpty) return [];
|
||
|
||
final markers = <AppMapMarker>[];
|
||
DateTime? lastAccel;
|
||
DateTime? lastBrake;
|
||
DateTime? lastCorner;
|
||
|
||
for (final sample in gps) {
|
||
final longitudinalG = sample.longitudinalG ?? sample.accelX;
|
||
final lateralG = sample.lateralG;
|
||
final leanAngle = sample.leanAngle;
|
||
|
||
if (longitudinalG != null && longitudinalG.isFinite) {
|
||
if (longitudinalG >= _hardAccelThresholdG &&
|
||
(lastAccel == null || sample.timestamp.difference(lastAccel).abs() > _eventMergeWindow)) {
|
||
markers.add(_eventMarker(
|
||
id: 'telemetry_accel_${sample.id}',
|
||
position: AppLatLng(sample.latitude!, sample.longitude!),
|
||
label: 'Hard Acceleration',
|
||
value: longitudinalG,
|
||
timestamp: sample.timestamp,
|
||
markerColor: const Color(0xFF76FF03),
|
||
markerIcon: Icons.arrow_upward,
|
||
));
|
||
lastAccel = sample.timestamp;
|
||
} else if (longitudinalG <= _hardBrakingThresholdG &&
|
||
(lastBrake == null || sample.timestamp.difference(lastBrake).abs() > _eventMergeWindow)) {
|
||
markers.add(_eventMarker(
|
||
id: 'telemetry_braking_${sample.id}',
|
||
position: AppLatLng(sample.latitude!, sample.longitude!),
|
||
label: 'Hard Braking',
|
||
value: longitudinalG,
|
||
timestamp: sample.timestamp,
|
||
markerColor: const Color(0xFFFF5252),
|
||
markerIcon: Icons.arrow_downward,
|
||
));
|
||
lastBrake = sample.timestamp;
|
||
}
|
||
}
|
||
|
||
final isCornering = (leanAngle != null && leanAngle.isFinite && leanAngle.abs() >= _corneringLeanThresholdDeg) ||
|
||
(lateralG != null && lateralG.isFinite && lateralG.abs() >= _corneringLateralGThreshold);
|
||
if (isCornering &&
|
||
(lastCorner == null || sample.timestamp.difference(lastCorner).abs() > _eventMergeWindow)) {
|
||
final cornerValue = leanAngle != null && leanAngle.isFinite
|
||
? leanAngle
|
||
: lateralG!.abs();
|
||
markers.add(_eventMarker(
|
||
id: 'telemetry_corner_${sample.id}',
|
||
position: AppLatLng(sample.latitude!, sample.longitude!),
|
||
label: 'Cornering',
|
||
value: cornerValue,
|
||
timestamp: sample.timestamp,
|
||
markerColor: const Color(0xFF00E5FF),
|
||
markerIcon: Icons.turn_right,
|
||
));
|
||
lastCorner = sample.timestamp;
|
||
}
|
||
}
|
||
return markers;
|
||
}
|
||
|
||
AppMapMarker _eventMarker({
|
||
required String id,
|
||
required AppLatLng position,
|
||
required String label,
|
||
required double value,
|
||
required DateTime timestamp,
|
||
required Color markerColor,
|
||
required IconData markerIcon,
|
||
}) {
|
||
return AppMapMarker(
|
||
id: id,
|
||
position: position,
|
||
label: label,
|
||
iconWidget: Container(
|
||
padding: const EdgeInsets.all(4),
|
||
decoration: BoxDecoration(
|
||
color: markerColor.withValues(alpha: 0.9),
|
||
shape: BoxShape.circle,
|
||
boxShadow: const [BoxShadow(color: Colors.black54, blurRadius: 4)],
|
||
),
|
||
child: Icon(markerIcon, color: Colors.black, size: 18),
|
||
),
|
||
onTap: () {
|
||
if (!mounted) return;
|
||
final timeStr = DateFormat('HH:mm:ss.SSS').format(timestamp.toLocal());
|
||
showDialog(
|
||
context: context,
|
||
builder: (ctx) => AlertDialog(
|
||
backgroundColor: const Color(0xFF111111),
|
||
shape: RoundedRectangleBorder(
|
||
borderRadius: BorderRadius.circular(16),
|
||
side: BorderSide(color: markerColor.withValues(alpha: 0.6), width: 1.2),
|
||
),
|
||
title: Row(
|
||
children: [
|
||
Icon(markerIcon, color: markerColor, size: 20),
|
||
const SizedBox(width: 8),
|
||
Expanded(child: Text(label.toUpperCase(), style: const TextStyle(fontSize: 14, fontWeight: FontWeight.w900, color: Colors.white))),
|
||
],
|
||
),
|
||
content: Column(
|
||
mainAxisSize: MainAxisSize.min,
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
_buildDialogRow('Timestamp:', timeStr),
|
||
_buildDialogRow('Value:', value.toStringAsFixed(2)),
|
||
_buildDialogRow('GPS Location:', '${position.latitude.toStringAsFixed(5)}, ${position.longitude.toStringAsFixed(5)}'),
|
||
],
|
||
),
|
||
actions: [
|
||
TextButton(onPressed: () => Navigator.pop(ctx), child: const Text('CLOSE', style: TextStyle(color: Colors.white70))),
|
||
],
|
||
),
|
||
);
|
||
},
|
||
);
|
||
}
|
||
|
||
Widget _buildDialogRow(String label, String value) => Padding(
|
||
padding: const EdgeInsets.symmetric(vertical: 4),
|
||
child: Row(
|
||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||
children: [
|
||
Text(label, style: const TextStyle(fontSize: 11, color: Colors.white54)),
|
||
Flexible(child: Text(value, style: const TextStyle(fontSize: 11, fontWeight: FontWeight.bold, color: Colors.white), textAlign: TextAlign.right)),
|
||
],
|
||
),
|
||
);
|
||
|
||
List<AppPolyline> _buildPolylines({bool showTwistyHighlights = true}) {
|
||
if (_routePoints.isEmpty) return [];
|
||
|
||
final polylines = <AppPolyline>[];
|
||
if (_showRoute) {
|
||
polylines.add(AppPolyline(
|
||
id: 'history_route',
|
||
points: _routePoints,
|
||
color: const Color(0xFF00E5FF),
|
||
width: 4.5,
|
||
));
|
||
}
|
||
|
||
final validSamples = _telemetrySamples
|
||
.where((t) => t.latitude != null && t.longitude != null)
|
||
.toList();
|
||
if (validSamples.isEmpty) return polylines;
|
||
|
||
if (_showSpeedHeatmap) {
|
||
final step = (validSamples.length / 1500).ceil().clamp(1, 10);
|
||
List<AppLatLng> currentSegment = [];
|
||
Color currentColor = _getSpeedColor(validSamples.first.speed ?? 0.0);
|
||
for (int i = 0; i < validSamples.length; i += step) {
|
||
final s = validSamples[i];
|
||
final pt = AppLatLng(s.latitude!, s.longitude!);
|
||
final segColor = _getSpeedColor(s.speed ?? 0.0);
|
||
if (segColor != currentColor && currentSegment.isNotEmpty) {
|
||
currentSegment.add(pt);
|
||
polylines.add(AppPolyline(id: 'speed_seg_${polylines.length}', points: List.from(currentSegment), color: currentColor, width: 5.0));
|
||
currentSegment = [pt];
|
||
currentColor = segColor;
|
||
} else {
|
||
currentSegment.add(pt);
|
||
}
|
||
}
|
||
if (currentSegment.length > 1) {
|
||
polylines.add(AppPolyline(id: 'speed_seg_${polylines.length}', points: currentSegment, color: currentColor, width: 5.0));
|
||
}
|
||
}
|
||
|
||
if (_showHardAccel) {
|
||
polylines.addAll(_buildLongitudinalEventPolylines(
|
||
validSamples,
|
||
predicate: (g) => g >= _hardAccelThresholdG,
|
||
idPrefix: 'accel_layer',
|
||
color: const Color(0xFF76FF03),
|
||
));
|
||
}
|
||
if (_showHardBraking) {
|
||
polylines.addAll(_buildLongitudinalEventPolylines(
|
||
validSamples,
|
||
predicate: (g) => g <= _hardBrakingThresholdG,
|
||
idPrefix: 'braking_layer',
|
||
color: const Color(0xFFFF5252),
|
||
));
|
||
}
|
||
if (_showCornering && showTwistyHighlights) {
|
||
polylines.addAll(_buildCorneringEventPolylines(validSamples));
|
||
}
|
||
|
||
return polylines;
|
||
}
|
||
|
||
List<AppPolyline> _buildLongitudinalEventPolylines(
|
||
List<TelemetrySample> samples, {
|
||
required bool Function(double g) predicate,
|
||
required String idPrefix,
|
||
required Color color,
|
||
}) {
|
||
if (samples.isEmpty) return [];
|
||
|
||
final polylines = <AppPolyline>[];
|
||
final eventIndices = <int>[];
|
||
|
||
for (var i = 0; i < samples.length; i++) {
|
||
final g = samples[i].longitudinalG ?? samples[i].accelX;
|
||
if (g != null && g.isFinite && predicate(g)) {
|
||
eventIndices.add(i);
|
||
}
|
||
}
|
||
if (eventIndices.isEmpty) return polylines;
|
||
|
||
var runStart = eventIndices.first;
|
||
var runEnd = eventIndices.first;
|
||
var segmentIndex = 0;
|
||
|
||
void emitRun(int start, int end) {
|
||
final expandedStart = start > 0 ? start - 1 : start;
|
||
final expandedEnd = end < samples.length - 1 ? end + 1 : end;
|
||
final points = <AppLatLng>[];
|
||
for (var i = expandedStart; i <= expandedEnd; i++) {
|
||
final sample = samples[i];
|
||
points.add(AppLatLng(sample.latitude!, sample.longitude!));
|
||
}
|
||
if (points.length >= 2) {
|
||
polylines.add(AppPolyline(
|
||
id: '${idPrefix}_$segmentIndex',
|
||
points: points,
|
||
color: color,
|
||
width: 7.0,
|
||
));
|
||
segmentIndex++;
|
||
}
|
||
}
|
||
|
||
for (var i = 1; i < eventIndices.length; i++) {
|
||
final index = eventIndices[i];
|
||
if (index - runEnd <= 2) {
|
||
runEnd = index;
|
||
} else {
|
||
emitRun(runStart, runEnd);
|
||
runStart = runEnd = index;
|
||
}
|
||
}
|
||
emitRun(runStart, runEnd);
|
||
return polylines;
|
||
}
|
||
|
||
List<AppPolyline> _buildCorneringEventPolylines(List<TelemetrySample> samples) {
|
||
if (samples.isEmpty) return [];
|
||
|
||
final eventIndices = <int>[];
|
||
for (var i = 0; i < samples.length; i++) {
|
||
final sample = samples[i];
|
||
final lean = sample.leanAngle;
|
||
final lateral = sample.lateralG;
|
||
final isCornering = (lean != null && lean.isFinite && lean.abs() >= _corneringLeanThresholdDeg) ||
|
||
(lateral != null && lateral.isFinite && lateral.abs() >= _corneringLateralGThreshold);
|
||
if (isCornering) eventIndices.add(i);
|
||
}
|
||
if (eventIndices.isEmpty) return [];
|
||
|
||
final polylines = <AppPolyline>[];
|
||
var runStart = eventIndices.first;
|
||
var runEnd = eventIndices.first;
|
||
var segmentIndex = 0;
|
||
|
||
void emitRun(int start, int end) {
|
||
// Include a GPS breadcrumb before and after the detected cornering
|
||
// samples. This makes a short threshold crossing visible as a route
|
||
// segment rather than a point hidden beneath a marker.
|
||
final expandedStart = start > 0 ? start - 1 : start;
|
||
final expandedEnd = end < samples.length - 1 ? end + 1 : end;
|
||
final points = <AppLatLng>[];
|
||
for (var i = expandedStart; i <= expandedEnd; i++) {
|
||
final sample = samples[i];
|
||
if (sample.latitude != null && sample.longitude != null) {
|
||
points.add(AppLatLng(sample.latitude!, sample.longitude!));
|
||
}
|
||
}
|
||
if (points.length >= 2) {
|
||
polylines.add(AppPolyline(
|
||
id: 'cornering_layer_$segmentIndex',
|
||
points: points,
|
||
color: const Color(0xFF00E5FF),
|
||
width: 7.0,
|
||
));
|
||
segmentIndex++;
|
||
}
|
||
}
|
||
|
||
for (var i = 1; i < eventIndices.length; i++) {
|
||
final index = eventIndices[i];
|
||
if (index - runEnd <= 2) {
|
||
runEnd = index;
|
||
} else {
|
||
emitRun(runStart, runEnd);
|
||
runStart = runEnd = index;
|
||
}
|
||
}
|
||
emitRun(runStart, runEnd);
|
||
return polylines;
|
||
}
|
||
|
||
Color _getSpeedColor(double speedMph) {
|
||
if (speedMph < 25) return const Color(0xFF00E5FF);
|
||
if (speedMph < 50) return const Color(0xFF2979FF);
|
||
if (speedMph < 75) return const Color(0xFFFFD600);
|
||
if (speedMph < 100) return const Color(0xFFFF6D00);
|
||
return const Color(0xFFE040FB);
|
||
}
|
||
|
||
List<AppMapMarker> _getFilteredMarkers() {
|
||
final markers = <AppMapMarker>[];
|
||
if (_routePoints.isNotEmpty) {
|
||
markers.add(AppMapMarker(
|
||
id: 'route_start', position: _routePoints.first, label: 'START',
|
||
iconWidget: Container(padding: const EdgeInsets.all(5), decoration: const BoxDecoration(color: Colors.greenAccent, shape: BoxShape.circle, boxShadow: [BoxShadow(color: Colors.black54, blurRadius: 4)]), child: const Icon(Icons.flag, color: Colors.black, size: 18)),
|
||
));
|
||
if (_routePoints.length > 1) {
|
||
markers.add(AppMapMarker(
|
||
id: 'route_end', position: _routePoints.last, label: 'FINISH',
|
||
iconWidget: Container(padding: const EdgeInsets.all(5), decoration: const BoxDecoration(color: Colors.amberAccent, shape: BoxShape.circle, boxShadow: [BoxShadow(color: Colors.black54, blurRadius: 4)]), child: const Icon(Icons.sports_score, color: Colors.black, size: 18)),
|
||
));
|
||
}
|
||
}
|
||
markers.addAll(_eventMarkers.where((m) {
|
||
final label = (m.label ?? '').toLowerCase();
|
||
if (label.contains('accel') && !_showHardAccel) return false;
|
||
if (label.contains('brak') && !_showHardBraking) return false;
|
||
if ((label.contains('corner') || label.contains('lean')) && !_showCornering) return false;
|
||
return true;
|
||
}));
|
||
return markers;
|
||
}
|
||
|
||
void _showRoadAlertDetails(RoadAlert alert) {
|
||
showModalBottomSheet(
|
||
context: context, backgroundColor: Colors.grey[900],
|
||
shape: const RoundedRectangleBorder(borderRadius: BorderRadius.vertical(top: Radius.circular(20))),
|
||
builder: (ctx) => Padding(
|
||
padding: const EdgeInsets.all(20),
|
||
child: Column(mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.start, children: [
|
||
Row(children: [
|
||
Container(padding: const EdgeInsets.all(8), decoration: BoxDecoration(color: alert.category.color.withValues(alpha: 0.2), shape: BoxShape.circle), child: Icon(alert.category.icon, color: alert.category.color, size: 28)),
|
||
const SizedBox(width: 12),
|
||
Expanded(child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
|
||
Text(alert.category.displayName.toUpperCase(), style: TextStyle(color: alert.category.color, fontWeight: FontWeight.bold, fontSize: 12, letterSpacing: 1.1)),
|
||
if (alert.roadName != null && alert.roadName!.isNotEmpty) Text(alert.roadName!, style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 16)),
|
||
])),
|
||
Container(padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4), decoration: BoxDecoration(color: Colors.white10, borderRadius: BorderRadius.circular(12)), child: Text(alert.sourceType == RoadAlertSourceType.userReported ? 'User Reported' : 'Verified Provider', style: const TextStyle(fontSize: 10, color: Colors.white70))),
|
||
]),
|
||
const SizedBox(height: 16),
|
||
Text(alert.description, style: const TextStyle(fontSize: 15, height: 1.3)),
|
||
const SizedBox(height: 16),
|
||
const Divider(color: Colors.white24),
|
||
Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
|
||
if (alert.distanceFromUser != null) Text('Distance: ${(alert.distanceFromUser! * 0.000621371).toStringAsFixed(2)} mi', style: const TextStyle(color: Colors.cyanAccent, fontWeight: FontWeight.bold)),
|
||
Text('Source: ${alert.source}', style: const TextStyle(color: Colors.white54, fontSize: 12)),
|
||
]),
|
||
]),
|
||
),
|
||
);
|
||
}
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
if (_isLoadingHistory) {
|
||
return const Scaffold(body: Center(child: CircularProgressIndicator()));
|
||
}
|
||
final isFollowMode = ref.watch(mapFollowStateProvider);
|
||
final layerSettings = ref.watch(mapLayerSettingsProvider);
|
||
final colors = context.motorColors;
|
||
final theme = Theme.of(context);
|
||
|
||
return ResponsiveLayout(
|
||
builder: (context, responsive) {
|
||
final isShortLandscape = responsive.isLandscape && responsive.height < 450;
|
||
|
||
if (widget.rideId != null) {
|
||
final polylines = _buildPolylines(showTwistyHighlights: layerSettings.showTwistyHighlights);
|
||
return Scaffold(
|
||
appBar: AppBar(
|
||
title: Text('Ride #${widget.rideId} Multi-Layer Map'),
|
||
actions: [
|
||
IconButton(
|
||
key: const ValueKey('preview_layers_button'),
|
||
tooltip: 'Tactical Layers (MAP-02)',
|
||
icon: Icon(Icons.layers_outlined, color: colors.cyberCyan),
|
||
onPressed: () => TacticalLayersBottomSheet.show(context),
|
||
),
|
||
IconButton(
|
||
key: const ValueKey('play_replay_appbar_button'),
|
||
tooltip: 'Fire Off Replay',
|
||
icon: Icon(Icons.play_circle_fill, color: colors.cyberCyan),
|
||
onPressed: () {
|
||
Navigator.of(context).push(
|
||
MaterialPageRoute(
|
||
builder: (_) => ReplayScreen(rideId: widget.rideId!, autoPlay: true),
|
||
),
|
||
);
|
||
},
|
||
),
|
||
],
|
||
),
|
||
|
||
body: Stack(
|
||
fit: StackFit.expand,
|
||
children: [
|
||
Positioned.fill(
|
||
child: UnifiedMapView(
|
||
key: ValueKey('preview_map_${widget.rideId}'),
|
||
center: _initialCenter ?? _fallbackLocation,
|
||
zoom: _currentZoom,
|
||
polylines: polylines,
|
||
markers: _getFilteredMarkers(),
|
||
),
|
||
),
|
||
if (_routePoints.isNotEmpty) _buildMultiLayerFilterOverlay(colors),
|
||
if (_showSpeedHeatmap) _buildSpeedLegend(colors),
|
||
if (_routePoints.isEmpty)
|
||
Positioned(
|
||
top: 16,
|
||
left: 20,
|
||
right: 20,
|
||
child: Container(
|
||
padding: const EdgeInsets.symmetric(
|
||
horizontal: 16,
|
||
vertical: 12,
|
||
),
|
||
decoration: BoxDecoration(
|
||
color: colors.surfaceContainer.withValues(alpha: 0.95),
|
||
borderRadius: BorderRadius.circular(12),
|
||
border: Border.all(
|
||
color: colors.cyberCyan.withValues(alpha: 0.4),
|
||
),
|
||
),
|
||
child: Row(
|
||
children: [
|
||
Icon(
|
||
Icons.info_outline,
|
||
color: colors.cyberCyan,
|
||
size: 20,
|
||
),
|
||
const SizedBox(width: 10),
|
||
Expanded(
|
||
child: Text(
|
||
'No GPS breadcrumbs were recorded during this test session.',
|
||
style: TextStyle(
|
||
color: theme.colorScheme.onSurface.withValues(alpha: 0.7),
|
||
fontSize: 12,
|
||
fontFamily: 'Inter',
|
||
),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
),
|
||
|
||
// Bottom Center: FIRE OFF REPLAY floating button
|
||
if (_routePoints.isNotEmpty)
|
||
Positioned(
|
||
bottom: 24,
|
||
left: 20,
|
||
right: 80,
|
||
child: Center(
|
||
child: FilledButton.icon(
|
||
key: const ValueKey('fire_off_ride_preview_button'),
|
||
onPressed: () {
|
||
Navigator.of(context).push(
|
||
MaterialPageRoute(
|
||
builder: (_) => ReplayScreen(
|
||
rideId: widget.rideId!,
|
||
autoPlay: true,
|
||
),
|
||
),
|
||
);
|
||
},
|
||
icon: const Icon(Icons.play_arrow_rounded, size: 22),
|
||
label: const Text(
|
||
'FIRE OFF REPLAY',
|
||
style: TextStyle(
|
||
fontFamily: 'JetBrains Mono',
|
||
fontSize: 12.5,
|
||
fontWeight: FontWeight.w800,
|
||
letterSpacing: 0.6,
|
||
),
|
||
),
|
||
style: FilledButton.styleFrom(
|
||
backgroundColor: colors.cyberCyan,
|
||
foregroundColor: Colors.black,
|
||
padding: const EdgeInsets.symmetric(horizontal: 18, vertical: 12),
|
||
elevation: 4,
|
||
shape: RoundedRectangleBorder(
|
||
borderRadius: BorderRadius.circular(24),
|
||
),
|
||
),
|
||
),
|
||
),
|
||
),
|
||
|
||
// Right HUD zoom controls on history preview
|
||
Positioned(
|
||
right: 14,
|
||
bottom: 30,
|
||
child: Column(
|
||
mainAxisSize: MainAxisSize.min,
|
||
children: [
|
||
_HudIconButton(
|
||
key: const ValueKey('zoom_in_button'),
|
||
icon: Icons.add,
|
||
tooltip: 'Zoom In',
|
||
onTap: () {
|
||
setState(() => _currentZoom = (_currentZoom + 1.0).clamp(3.0, 19.0));
|
||
},
|
||
),
|
||
const SizedBox(height: 8),
|
||
_HudIconButton(
|
||
key: const ValueKey('zoom_out_button'),
|
||
icon: Icons.remove,
|
||
tooltip: 'Zoom Out',
|
||
onTap: () {
|
||
setState(() => _currentZoom = (_currentZoom - 1.0).clamp(3.0, 19.0));
|
||
},
|
||
),
|
||
],
|
||
),
|
||
),
|
||
],
|
||
),
|
||
);
|
||
}
|
||
|
||
final locationAsync = ref.watch(locationStreamProvider);
|
||
final liveAlertsAsync = ref.watch(activeAlertsStreamProvider);
|
||
final currentPos = locationAsync.when(
|
||
data: (pos) => AppLatLng(pos.latitude, pos.longitude),
|
||
error: (_, _) => _fallbackLocation,
|
||
loading: () => _fallbackLocation,
|
||
);
|
||
final currentHeading = locationAsync.when(
|
||
data: (pos) => pos.heading,
|
||
error: (_, _) => 0.0,
|
||
loading: () => 0.0,
|
||
);
|
||
final motorcycleMarker = AppMapMarker(
|
||
id: 'motorcycle_live',
|
||
position: currentPos,
|
||
heading: _isNorthUp ? currentHeading : 0.0,
|
||
iconWidget: Icon(
|
||
Icons.navigation,
|
||
color: colors.cyberCyan,
|
||
size: 40,
|
||
),
|
||
);
|
||
final List<AppMapMarker> mapMarkers = [motorcycleMarker];
|
||
final liveAlerts = layerSettings.showPoliceTraps
|
||
? (liveAlertsAsync.value ?? [])
|
||
: <RoadAlert>[];
|
||
for (var alert in liveAlerts) {
|
||
mapMarkers.add(
|
||
AppMapMarker(
|
||
id: 'alert_${alert.providerId}_${alert.id}',
|
||
position: AppLatLng(alert.latitude, alert.longitude),
|
||
heading: alert.heading ?? 0.0,
|
||
label: alert.category.displayName,
|
||
iconWidget: Container(
|
||
padding: const EdgeInsets.all(6),
|
||
decoration: BoxDecoration(
|
||
color: alert.category.color.withValues(alpha: 0.9),
|
||
shape: BoxShape.circle,
|
||
boxShadow: const [
|
||
BoxShadow(color: Colors.black54, blurRadius: 4),
|
||
],
|
||
),
|
||
child: Icon(
|
||
alert.category.icon,
|
||
color: Colors.black,
|
||
size: 22,
|
||
),
|
||
),
|
||
onTap: () => _showRoadAlertDetails(alert),
|
||
),
|
||
);
|
||
}
|
||
|
||
final navSession = ref.watch(navigationSessionProvider);
|
||
|
||
if (_selectedDestination != null) {
|
||
mapMarkers.add(
|
||
AppMapMarker(
|
||
id: 'destination_marker',
|
||
position: _selectedDestination!.latLng,
|
||
label: _selectedDestination!.displayName,
|
||
iconWidget: Container(
|
||
padding: const EdgeInsets.all(6),
|
||
decoration: const BoxDecoration(
|
||
color: Color(0xFFFF0055),
|
||
shape: BoxShape.circle,
|
||
boxShadow: [BoxShadow(color: Colors.black54, blurRadius: 4)],
|
||
),
|
||
child: const Icon(Icons.flag, color: Colors.white, size: 20),
|
||
),
|
||
),
|
||
);
|
||
}
|
||
|
||
final livePolylines = <AppPolyline>[];
|
||
if (_previewRouteResult != null &&
|
||
_previewRouteResult!.geometry.isNotEmpty) {
|
||
livePolylines.add(
|
||
AppPolyline(
|
||
id: 'route_preview_polyline',
|
||
points: _previewRouteResult!.geometry,
|
||
color: colors.cyberCyan,
|
||
width: 5.5,
|
||
),
|
||
);
|
||
} else if (navSession.isNavigating &&
|
||
navSession.calculationResult?.geometry.isNotEmpty == true) {
|
||
livePolylines.add(
|
||
AppPolyline(
|
||
id: 'nav_active_polyline',
|
||
points: navSession.calculationResult!.geometry,
|
||
color: colors.cyberCyan,
|
||
width: 5.5,
|
||
),
|
||
);
|
||
}
|
||
|
||
return Scaffold(
|
||
extendBodyBehindAppBar: isShortLandscape,
|
||
appBar: AppBar(
|
||
title: const Text('Live Map'),
|
||
backgroundColor: isShortLandscape
|
||
? colors.surfaceContainer.withValues(alpha: 0.75)
|
||
: null,
|
||
elevation: isShortLandscape ? 0 : null,
|
||
),
|
||
body: Stack(
|
||
fit: StackFit.expand,
|
||
children: [
|
||
Positioned.fill(
|
||
child: UnifiedMapView(
|
||
key: const ValueKey('live_map_view'),
|
||
center: currentPos,
|
||
zoom: _currentZoom,
|
||
markers: mapMarkers,
|
||
polylines: livePolylines,
|
||
),
|
||
),
|
||
|
||
// Active Navigation Maneuver HUD or Top Search & Preview Cards
|
||
if (navSession.isNavigating)
|
||
const Positioned(
|
||
top: 10,
|
||
left: 14,
|
||
right: 14,
|
||
child: NavigationManeuverCard(),
|
||
)
|
||
else if (!isShortLandscape) ...[
|
||
Positioned(
|
||
top: 10,
|
||
left: 14,
|
||
right: 14,
|
||
child: _buildTopSearchCard(colors, currentPos),
|
||
),
|
||
if (_searchResults.isNotEmpty)
|
||
Positioned(
|
||
top: 106,
|
||
left: 14,
|
||
right: 14,
|
||
child: _buildSearchResultsOverlay(colors, currentPos),
|
||
),
|
||
if (_previewRouteResult != null)
|
||
Positioned(
|
||
bottom: 24,
|
||
left: 14,
|
||
right: 14,
|
||
child: _buildRoutePreviewCard(colors, currentPos),
|
||
),
|
||
],
|
||
|
||
// Offline Cached Only Warning Pill
|
||
if (layerSettings.offlineOnly)
|
||
Positioned(
|
||
top: isShortLandscape ? 8 : 106,
|
||
left: 14,
|
||
child: Container(
|
||
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
|
||
decoration: BoxDecoration(
|
||
color: const Color(0xFF1E1708),
|
||
borderRadius: BorderRadius.circular(6),
|
||
border: Border.all(
|
||
color: colors.warningAmber.withValues(alpha: 0.6),
|
||
width: 0.8,
|
||
),
|
||
boxShadow: const [
|
||
BoxShadow(color: Colors.black45, blurRadius: 4),
|
||
],
|
||
),
|
||
child: Row(
|
||
mainAxisSize: MainAxisSize.min,
|
||
children: [
|
||
Icon(Icons.wifi_off, size: 12, color: colors.warningAmber),
|
||
const SizedBox(width: 5),
|
||
Text(
|
||
'OFFLINE TILES ONLY',
|
||
style: TextStyle(
|
||
fontFamily: 'JetBrains Mono',
|
||
fontSize: 9.5,
|
||
fontWeight: FontWeight.bold,
|
||
color: colors.warningAmber,
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
),
|
||
|
||
// Right Vertical HUD Dock (Layers, Compass Orient, Zoom In, Zoom Out, Recenter)
|
||
Positioned(
|
||
right: 14,
|
||
top: isShortLandscape ? 58 : 124,
|
||
child: Column(
|
||
mainAxisSize: MainAxisSize.min,
|
||
children: [
|
||
_HudIconButton(
|
||
key: const ValueKey('tactical_layers_button'),
|
||
icon: Icons.layers_outlined,
|
||
tooltip: 'Tactical Layers (MAP-02)',
|
||
color: colors.cyberCyan,
|
||
onTap: () => TacticalLayersBottomSheet.show(context),
|
||
),
|
||
const SizedBox(height: 8),
|
||
_HudIconButton(
|
||
key: const ValueKey('compass_orient_button'),
|
||
icon: _isNorthUp ? Icons.explore : Icons.navigation,
|
||
tooltip: _isNorthUp ? 'North Up' : 'Heading Up',
|
||
color: _isNorthUp ? Colors.white70 : colors.cyberCyan,
|
||
onTap: () => setState(() => _isNorthUp = !_isNorthUp),
|
||
),
|
||
const SizedBox(height: 8),
|
||
_HudIconButton(
|
||
key: const ValueKey('zoom_in_button'),
|
||
icon: Icons.add,
|
||
tooltip: 'Zoom In',
|
||
onTap: () {
|
||
ref.read(mapFollowStateProvider.notifier).userInteracted();
|
||
setState(() => _currentZoom = (_currentZoom + 1.0).clamp(3.0, 19.0));
|
||
},
|
||
),
|
||
const SizedBox(height: 8),
|
||
_HudIconButton(
|
||
key: const ValueKey('zoom_out_button'),
|
||
icon: Icons.remove,
|
||
tooltip: 'Zoom Out',
|
||
onTap: () {
|
||
ref.read(mapFollowStateProvider.notifier).userInteracted();
|
||
setState(() => _currentZoom = (_currentZoom - 1.0).clamp(3.0, 19.0));
|
||
},
|
||
),
|
||
if (!isFollowMode) ...[
|
||
const SizedBox(height: 8),
|
||
_HudIconButton(
|
||
key: const ValueKey('recenter_rider_button'),
|
||
icon: Icons.my_location,
|
||
tooltip: 'Recenter on Rider',
|
||
color: colors.cyberCyan,
|
||
backgroundColor: colors.cyberCyan.withValues(alpha: 0.25),
|
||
onTap: () => ref.read(mapFollowStateProvider.notifier).recenter(),
|
||
),
|
||
],
|
||
],
|
||
),
|
||
),
|
||
|
||
// Bottom-left Quick Swarm Report Button
|
||
if (_previewRouteResult == null && !navSession.isNavigating)
|
||
Positioned(
|
||
bottom: 24,
|
||
left: 20,
|
||
child: FloatingActionButton.extended(
|
||
key: const ValueKey('quick_swarm_report_button'),
|
||
backgroundColor: const Color(0xFFFF9100),
|
||
foregroundColor: Colors.black,
|
||
icon: const Icon(Icons.campaign, size: 22),
|
||
label: const Text(
|
||
'REPORT',
|
||
style: TextStyle(
|
||
fontWeight: FontWeight.bold,
|
||
letterSpacing: 0.6,
|
||
),
|
||
),
|
||
onPressed: () => QuickSwarmReportModal.show(context),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
);
|
||
},
|
||
);
|
||
}
|
||
|
||
Widget _buildMultiLayerFilterOverlay(MotorSignalThemeColors colors) {
|
||
return Positioned(
|
||
top: 10,
|
||
left: 10,
|
||
right: 10,
|
||
child: Card(
|
||
color: colors.surfaceContainer.withValues(alpha: 0.85),
|
||
shape: RoundedRectangleBorder(
|
||
borderRadius: BorderRadius.circular(12),
|
||
side: BorderSide(color: colors.outlineVariant),
|
||
),
|
||
child: Padding(
|
||
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
|
||
child: SingleChildScrollView(
|
||
scrollDirection: Axis.horizontal,
|
||
child: Row(
|
||
children: [
|
||
FilterChip(
|
||
label: const Text('Route'),
|
||
selected: _showRoute,
|
||
onSelected: (v) => setState(() => _showRoute = v),
|
||
selectedColor: colors.cyberCyan.withValues(alpha: 0.35),
|
||
),
|
||
const SizedBox(width: 6),
|
||
FilterChip(
|
||
label: const Text('Speed'),
|
||
selected: _showSpeedHeatmap,
|
||
onSelected: (v) => setState(() => _showSpeedHeatmap = v),
|
||
selectedColor: const Color(0xFFE040FB).withValues(alpha: 0.35),
|
||
),
|
||
const SizedBox(width: 6),
|
||
FilterChip(
|
||
label: const Text('Accel'),
|
||
selected: _showHardAccel,
|
||
onSelected: (v) => setState(() => _showHardAccel = v),
|
||
selectedColor: colors.launchGreen.withValues(alpha: 0.35),
|
||
),
|
||
const SizedBox(width: 6),
|
||
FilterChip(
|
||
label: const Text('Braking'),
|
||
selected: _showHardBraking,
|
||
onSelected: (v) => setState(() => _showHardBraking = v),
|
||
selectedColor: colors.raceRed.withValues(alpha: 0.35),
|
||
),
|
||
const SizedBox(width: 6),
|
||
FilterChip(
|
||
label: const Text('Cornering'),
|
||
selected: _showCornering,
|
||
onSelected: (v) => setState(() => _showCornering = v),
|
||
selectedColor: colors.cyberCyan.withValues(alpha: 0.35),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
),
|
||
),
|
||
);
|
||
}
|
||
|
||
Widget _buildSpeedLegend(MotorSignalThemeColors colors) => Positioned(
|
||
bottom: 20,
|
||
left: 14,
|
||
child: Container(
|
||
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 6),
|
||
decoration: BoxDecoration(
|
||
color: colors.surfaceContainer.withValues(alpha: 0.9),
|
||
borderRadius: BorderRadius.circular(8),
|
||
border: Border.all(color: colors.outlineVariant),
|
||
),
|
||
child: Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
mainAxisSize: MainAxisSize.min,
|
||
children: [
|
||
Text(
|
||
'SPEED RANGES (MPH)',
|
||
style: TextStyle(
|
||
fontFamily: 'JetBrains Mono',
|
||
fontSize: 8.5,
|
||
fontWeight: FontWeight.bold,
|
||
color: colors.cyberCyan,
|
||
),
|
||
),
|
||
const SizedBox(height: 4),
|
||
_buildLegendItem('0–25', const Color(0xFF00E5FF)),
|
||
_buildLegendItem('25–50', const Color(0xFF2979FF)),
|
||
_buildLegendItem('50–75', const Color(0xFFFFD600)),
|
||
_buildLegendItem('75–100', const Color(0xFFFF6D00)),
|
||
_buildLegendItem('100+', const Color(0xFFE040FB)),
|
||
],
|
||
),
|
||
),
|
||
);
|
||
|
||
Widget _buildLegendItem(String label, Color color) => Padding(
|
||
padding: const EdgeInsets.symmetric(vertical: 1.5),
|
||
child: Row(
|
||
mainAxisSize: MainAxisSize.min,
|
||
children: [
|
||
Container(
|
||
width: 10,
|
||
height: 10,
|
||
decoration: BoxDecoration(color: color, shape: BoxShape.circle),
|
||
),
|
||
const SizedBox(width: 6),
|
||
Text(
|
||
label,
|
||
style: const TextStyle(
|
||
fontFamily: 'JetBrains Mono',
|
||
fontSize: 9,
|
||
fontWeight: FontWeight.w600,
|
||
),
|
||
),
|
||
],
|
||
),
|
||
);
|
||
|
||
Widget _buildTopSearchCard(MotorSignalThemeColors colors, AppLatLng currentPos) {
|
||
final theme = Theme.of(context);
|
||
return Card(
|
||
elevation: 6,
|
||
shadowColor: Colors.black54,
|
||
color: colors.surfaceContainer.withValues(alpha: 0.95),
|
||
shape: RoundedRectangleBorder(
|
||
borderRadius: BorderRadius.circular(16),
|
||
side: BorderSide(
|
||
color: colors.cyberCyan.withValues(alpha: 0.25),
|
||
width: 0.8,
|
||
),
|
||
),
|
||
child: Padding(
|
||
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
|
||
child: Column(
|
||
mainAxisSize: MainAxisSize.min,
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
Row(
|
||
children: [
|
||
if (_isSearching || _isCalculatingRoute)
|
||
const SizedBox(
|
||
width: 20,
|
||
height: 20,
|
||
child: CircularProgressIndicator(strokeWidth: 2),
|
||
)
|
||
else
|
||
Icon(Icons.search, size: 20, color: colors.cyberCyan),
|
||
const SizedBox(width: 8),
|
||
Expanded(
|
||
child: TextField(
|
||
controller: _searchController,
|
||
style: TextStyle(
|
||
fontFamily: 'Inter',
|
||
fontSize: 13,
|
||
color: theme.colorScheme.onSurface,
|
||
),
|
||
decoration: InputDecoration(
|
||
hintText: 'Search destinations, twisty passes...',
|
||
hintStyle: TextStyle(
|
||
fontFamily: 'Inter',
|
||
fontSize: 12.5,
|
||
color: theme.colorScheme.onSurface.withValues(alpha: 0.45),
|
||
),
|
||
border: InputBorder.none,
|
||
isDense: true,
|
||
contentPadding: const EdgeInsets.symmetric(vertical: 6),
|
||
),
|
||
onChanged: (val) => _onSearchQueryChanged(val, currentPos),
|
||
onSubmitted: (val) => _onSearchQueryChanged(val, currentPos),
|
||
),
|
||
),
|
||
if (_destinationQuery.isNotEmpty)
|
||
GestureDetector(
|
||
key: const ValueKey('clear_search_button'),
|
||
onTap: _clearDestination,
|
||
child: Icon(
|
||
Icons.close,
|
||
size: 18,
|
||
color: theme.colorScheme.onSurface.withValues(alpha: 0.5),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
const SizedBox(height: 6),
|
||
SingleChildScrollView(
|
||
scrollDirection: Axis.horizontal,
|
||
child: Row(
|
||
children: [
|
||
_buildQuickDestinationChip(
|
||
label: 'Gas & Fuel',
|
||
icon: Icons.local_gas_station,
|
||
colors: colors,
|
||
currentPos: currentPos,
|
||
),
|
||
const SizedBox(width: 6),
|
||
_buildQuickDestinationChip(
|
||
label: 'Twisty Passes',
|
||
icon: Icons.alt_route,
|
||
colors: colors,
|
||
currentPos: currentPos,
|
||
),
|
||
const SizedBox(width: 6),
|
||
_buildQuickDestinationChip(
|
||
label: 'Scenic Rest',
|
||
icon: Icons.photo_camera,
|
||
colors: colors,
|
||
currentPos: currentPos,
|
||
),
|
||
const SizedBox(width: 6),
|
||
_buildQuickDestinationChip(
|
||
label: 'Repair/Moto',
|
||
icon: Icons.build,
|
||
colors: colors,
|
||
currentPos: currentPos,
|
||
),
|
||
],
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
);
|
||
}
|
||
|
||
Widget _buildQuickDestinationChip({
|
||
required String label,
|
||
required IconData icon,
|
||
required MotorSignalThemeColors colors,
|
||
required AppLatLng currentPos,
|
||
}) {
|
||
final isSelected = _destinationQuery.toLowerCase() == label.toLowerCase();
|
||
return InkWell(
|
||
key: ValueKey('chip_${label.toLowerCase().replaceAll(' ', '_').replaceAll('/', '_').replaceAll('&', 'and')}'),
|
||
borderRadius: BorderRadius.circular(20),
|
||
onTap: () {
|
||
if (isSelected) {
|
||
_clearDestination();
|
||
} else {
|
||
_searchController.text = label;
|
||
_onSearchQueryChanged(label, currentPos);
|
||
}
|
||
},
|
||
child: Container(
|
||
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
|
||
decoration: BoxDecoration(
|
||
color: isSelected
|
||
? colors.cyberCyan.withValues(alpha: 0.25)
|
||
: colors.surfaceContainerHigh.withValues(alpha: 0.8),
|
||
borderRadius: BorderRadius.circular(20),
|
||
border: Border.all(
|
||
color: isSelected
|
||
? colors.cyberCyan
|
||
: colors.outlineVariant.withValues(alpha: 0.6),
|
||
width: isSelected ? 1.2 : 0.8,
|
||
),
|
||
),
|
||
child: Row(
|
||
mainAxisSize: MainAxisSize.min,
|
||
children: [
|
||
Icon(
|
||
icon,
|
||
size: 13,
|
||
color: isSelected ? colors.cyberCyan : Colors.white70,
|
||
),
|
||
const SizedBox(width: 4),
|
||
Text(
|
||
label,
|
||
style: TextStyle(
|
||
fontFamily: 'Inter',
|
||
fontSize: 11,
|
||
fontWeight: isSelected ? FontWeight.bold : FontWeight.normal,
|
||
color: isSelected ? colors.cyberCyan : Colors.white70,
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
);
|
||
}
|
||
|
||
Widget _buildSearchResultsOverlay(
|
||
MotorSignalThemeColors colors,
|
||
AppLatLng currentPos,
|
||
) {
|
||
return Card(
|
||
key: const ValueKey('search_results_overlay'),
|
||
elevation: 8,
|
||
shadowColor: Colors.black87,
|
||
color: colors.surfaceContainer.withValues(alpha: 0.98),
|
||
shape: RoundedRectangleBorder(
|
||
borderRadius: BorderRadius.circular(16),
|
||
side: BorderSide(
|
||
color: colors.cyberCyan.withValues(alpha: 0.4),
|
||
width: 1.0,
|
||
),
|
||
),
|
||
child: ConstrainedBox(
|
||
constraints: const BoxConstraints(maxHeight: 280),
|
||
child: ListView.separated(
|
||
shrinkWrap: true,
|
||
padding: const EdgeInsets.symmetric(vertical: 6),
|
||
itemCount: _searchResults.length,
|
||
separatorBuilder: (_, _) => Divider(
|
||
height: 1,
|
||
color: colors.outlineVariant.withValues(alpha: 0.3),
|
||
),
|
||
itemBuilder: (context, index) {
|
||
final item = _searchResults[index];
|
||
return ListTile(
|
||
dense: true,
|
||
leading: Container(
|
||
padding: const EdgeInsets.all(6),
|
||
decoration: BoxDecoration(
|
||
color: colors.cyberCyan.withValues(alpha: 0.15),
|
||
shape: BoxShape.circle,
|
||
),
|
||
child: Icon(
|
||
item.hasCoordinates ? Icons.pin_drop : Icons.place_outlined,
|
||
size: 18,
|
||
color: colors.cyberCyan,
|
||
),
|
||
),
|
||
title: Text(
|
||
item.primaryText,
|
||
style: const TextStyle(
|
||
fontFamily: 'Inter',
|
||
fontSize: 13,
|
||
fontWeight: FontWeight.bold,
|
||
color: Colors.white,
|
||
),
|
||
),
|
||
subtitle: item.secondaryText.isNotEmpty
|
||
? Text(
|
||
item.secondaryText,
|
||
maxLines: 1,
|
||
overflow: TextOverflow.ellipsis,
|
||
style: const TextStyle(
|
||
fontFamily: 'Inter',
|
||
fontSize: 11,
|
||
color: Colors.white70,
|
||
),
|
||
)
|
||
: null,
|
||
onTap: () => _onSelectPlace(item, currentPos),
|
||
);
|
||
},
|
||
),
|
||
),
|
||
);
|
||
}
|
||
|
||
Widget _buildRoutePreviewCard(
|
||
MotorSignalThemeColors colors,
|
||
AppLatLng currentPos,
|
||
) {
|
||
final preview = _previewRouteResult!;
|
||
final dest = _selectedDestination;
|
||
|
||
return Card(
|
||
key: const ValueKey('route_preview_card'),
|
||
elevation: 8,
|
||
color: colors.surfaceContainer.withValues(alpha: 0.95),
|
||
shape: RoundedRectangleBorder(
|
||
borderRadius: BorderRadius.circular(16),
|
||
side: BorderSide(
|
||
color: colors.cyberCyan.withValues(alpha: 0.6),
|
||
width: 1.2,
|
||
),
|
||
),
|
||
child: Padding(
|
||
padding: const EdgeInsets.all(14),
|
||
child: Column(
|
||
mainAxisSize: MainAxisSize.min,
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
Row(
|
||
children: [
|
||
Expanded(
|
||
child: Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
Text(
|
||
dest?.displayName ?? 'Destination Route',
|
||
maxLines: 1,
|
||
overflow: TextOverflow.ellipsis,
|
||
style: const TextStyle(
|
||
fontFamily: 'Inter',
|
||
fontSize: 15,
|
||
fontWeight: FontWeight.bold,
|
||
color: Colors.white,
|
||
),
|
||
),
|
||
const SizedBox(height: 2),
|
||
Wrap(
|
||
spacing: 8,
|
||
runSpacing: 4,
|
||
crossAxisAlignment: WrapCrossAlignment.center,
|
||
children: [
|
||
Text(
|
||
'${preview.distanceMiles.toStringAsFixed(1)} mi • ${preview.formattedDuration}',
|
||
style: TextStyle(
|
||
fontFamily: 'JetBrains Mono',
|
||
fontSize: 12,
|
||
fontWeight: FontWeight.w700,
|
||
color: colors.cyberCyan,
|
||
),
|
||
),
|
||
Container(
|
||
padding: const EdgeInsets.symmetric(
|
||
horizontal: 6,
|
||
vertical: 2,
|
||
),
|
||
decoration: BoxDecoration(
|
||
color: const Color(0xFF10B981).withValues(alpha: 0.2),
|
||
borderRadius: BorderRadius.circular(4),
|
||
border: Border.all(
|
||
color: const Color(0xFF10B981),
|
||
width: 0.8,
|
||
),
|
||
),
|
||
child: Text(
|
||
preview.twistinessRating,
|
||
style: const TextStyle(
|
||
fontFamily: 'JetBrains Mono',
|
||
fontSize: 9.5,
|
||
fontWeight: FontWeight.bold,
|
||
color: Color(0xFF10B981),
|
||
),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
],
|
||
),
|
||
),
|
||
IconButton(
|
||
key: const ValueKey('clear_route_button'),
|
||
icon: const Icon(Icons.close, color: Colors.white70),
|
||
onPressed: _clearDestination,
|
||
tooltip: 'Cancel Destination',
|
||
),
|
||
],
|
||
),
|
||
const SizedBox(height: 10),
|
||
|
||
// Routing Preferences Selector Row
|
||
SingleChildScrollView(
|
||
scrollDirection: Axis.horizontal,
|
||
child: Row(
|
||
children: [
|
||
_buildPreferenceChip(
|
||
preference: RoutingPreference.fastest,
|
||
label: 'Fastest',
|
||
colors: colors,
|
||
currentPos: currentPos,
|
||
),
|
||
const SizedBox(width: 6),
|
||
_buildPreferenceChip(
|
||
preference: RoutingPreference.shortest,
|
||
label: 'Shortest',
|
||
colors: colors,
|
||
currentPos: currentPos,
|
||
),
|
||
const SizedBox(width: 6),
|
||
_buildPreferenceChip(
|
||
preference: RoutingPreference.twisty,
|
||
label: 'Twisty (Curves)',
|
||
colors: colors,
|
||
currentPos: currentPos,
|
||
),
|
||
const SizedBox(width: 6),
|
||
_buildPreferenceChip(
|
||
preference: RoutingPreference.scenic,
|
||
label: 'Scenic (No Hwy)',
|
||
colors: colors,
|
||
currentPos: currentPos,
|
||
),
|
||
],
|
||
),
|
||
),
|
||
const SizedBox(height: 12),
|
||
|
||
// Navigation Actions: Start Turn-by-Turn & External Handoff
|
||
Row(
|
||
children: [
|
||
Expanded(
|
||
child: FilledButton.icon(
|
||
key: const ValueKey('start_navigation_button'),
|
||
icon: const Icon(Icons.navigation, size: 18),
|
||
label: const Text(
|
||
'START NAVIGATION',
|
||
style: TextStyle(
|
||
fontFamily: 'JetBrains Mono',
|
||
fontSize: 12,
|
||
fontWeight: FontWeight.w800,
|
||
letterSpacing: 0.5,
|
||
),
|
||
),
|
||
style: FilledButton.styleFrom(
|
||
backgroundColor: colors.cyberCyan,
|
||
foregroundColor: Colors.black,
|
||
padding: const EdgeInsets.symmetric(vertical: 12),
|
||
shape: RoundedRectangleBorder(
|
||
borderRadius: BorderRadius.circular(10),
|
||
),
|
||
),
|
||
onPressed: _startTurnByTurnNavigation,
|
||
),
|
||
),
|
||
const SizedBox(width: 8),
|
||
OutlinedButton(
|
||
key: const ValueKey('handoff_navigation_button'),
|
||
style: OutlinedButton.styleFrom(
|
||
foregroundColor: colors.cyberCyan,
|
||
side: BorderSide(color: colors.cyberCyan),
|
||
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 12),
|
||
shape: RoundedRectangleBorder(
|
||
borderRadius: BorderRadius.circular(10),
|
||
),
|
||
),
|
||
onPressed: () {
|
||
if (dest != null) {
|
||
NavigationHandoffService.showHandoffSheet(
|
||
context: context,
|
||
latitude: dest.latitude,
|
||
longitude: dest.longitude,
|
||
displayName: dest.displayName,
|
||
);
|
||
}
|
||
},
|
||
child: const Icon(Icons.open_in_new, size: 18),
|
||
),
|
||
],
|
||
),
|
||
],
|
||
),
|
||
),
|
||
);
|
||
}
|
||
|
||
Widget _buildPreferenceChip({
|
||
required RoutingPreference preference,
|
||
required String label,
|
||
required MotorSignalThemeColors colors,
|
||
required AppLatLng currentPos,
|
||
}) {
|
||
final isSelected = _routingOptions.preference == preference;
|
||
return ChoiceChip(
|
||
label: Text(label),
|
||
selected: isSelected,
|
||
labelStyle: TextStyle(
|
||
fontFamily: 'Inter',
|
||
fontSize: 11,
|
||
fontWeight: isSelected ? FontWeight.bold : FontWeight.normal,
|
||
color: isSelected ? Colors.black : Colors.white70,
|
||
),
|
||
selectedColor: colors.cyberCyan,
|
||
backgroundColor: colors.surfaceContainerHigh,
|
||
onSelected: (selected) {
|
||
if (selected) {
|
||
setState(() {
|
||
_routingOptions = _routingOptions.copyWith(
|
||
preference: preference,
|
||
avoidHighways: preference == RoutingPreference.twisty ||
|
||
preference == RoutingPreference.scenic,
|
||
);
|
||
});
|
||
if (_selectedDestination != null) {
|
||
_calculateRouteToDestination(_selectedDestination!, currentPos);
|
||
}
|
||
}
|
||
},
|
||
);
|
||
}
|
||
}
|
||
|
||
class _HudIconButton extends StatelessWidget {
|
||
final IconData icon;
|
||
final String? tooltip;
|
||
final VoidCallback onTap;
|
||
final Color? color;
|
||
final Color? backgroundColor;
|
||
|
||
const _HudIconButton({
|
||
super.key,
|
||
required this.icon,
|
||
this.tooltip,
|
||
required this.onTap,
|
||
this.color,
|
||
this.backgroundColor,
|
||
});
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
final colors = context.motorColors;
|
||
final button = Material(
|
||
color: backgroundColor ?? colors.surfaceContainer.withValues(alpha: 0.9),
|
||
shape: RoundedRectangleBorder(
|
||
borderRadius: BorderRadius.circular(10),
|
||
side: BorderSide(
|
||
color: colors.outlineVariant.withValues(alpha: 0.6),
|
||
width: 0.8,
|
||
),
|
||
),
|
||
elevation: 4,
|
||
shadowColor: Colors.black54,
|
||
child: InkWell(
|
||
borderRadius: BorderRadius.circular(10),
|
||
onTap: onTap,
|
||
child: Container(
|
||
width: 40,
|
||
height: 40,
|
||
alignment: Alignment.center,
|
||
child: Icon(
|
||
icon,
|
||
size: 20,
|
||
color: color ?? Colors.white,
|
||
),
|
||
),
|
||
),
|
||
);
|
||
|
||
if (tooltip != null) {
|
||
return Tooltip(
|
||
message: tooltip!,
|
||
child: button,
|
||
);
|
||
}
|
||
return button;
|
||
}
|
||
}
|