527 lines
19 KiB
Dart
527 lines
19 KiB
Dart
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 '../../database/database.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';
|
|
|
|
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<AppLatLng> _routePoints = [];
|
|
List<AppMapMarker> _eventMarkers = [];
|
|
AppLatLng? _initialCenter;
|
|
AppLatLng _fallbackLocation = const AppLatLng(37.7749, -122.4194); // SF Default
|
|
|
|
// Event category filter states
|
|
bool _showHardAccel = true;
|
|
bool _showHardBraking = true;
|
|
bool _showCornering = true;
|
|
bool _showSpeedMilestones = true;
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
if (widget.rideId != null) {
|
|
_loadRideHistory();
|
|
} else {
|
|
_isLoadingHistory = false;
|
|
_initLiveLocation();
|
|
}
|
|
}
|
|
|
|
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();
|
|
|
|
if (telemetry.isNotEmpty) {
|
|
_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 = [];
|
|
for (final event in events) {
|
|
if (event.latitude != null && event.longitude != null) {
|
|
Color markerColor = Colors.redAccent;
|
|
if (event.eventType.contains('Corner')) markerColor = Colors.orangeAccent;
|
|
if (event.eventType.contains('Acceleration')) markerColor = Colors.greenAccent;
|
|
if (event.eventType.contains('Speed')) markerColor = Colors.purpleAccent;
|
|
|
|
_eventMarkers.add(
|
|
AppMapMarker(
|
|
id: event.id.toString(),
|
|
position: AppLatLng(event.latitude!, event.longitude!),
|
|
label: event.eventType,
|
|
iconWidget: Icon(Icons.location_on, color: markerColor, size: 36),
|
|
onTap: () {
|
|
if (mounted) {
|
|
showDialog(
|
|
context: context,
|
|
builder: (ctx) => AlertDialog(
|
|
title: Text(event.eventType),
|
|
content: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text('Time: ${event.timestamp.toIso8601String().substring(11, 19)}'),
|
|
Text('Value: ${event.value.toStringAsFixed(2)}'),
|
|
if (event.latitude != null && event.longitude != null)
|
|
Text('Lat/Lng: ${event.latitude!.toStringAsFixed(4)}, ${event.longitude!.toStringAsFixed(4)}'),
|
|
],
|
|
),
|
|
actions: [
|
|
TextButton(
|
|
onPressed: () => Navigator.pop(ctx),
|
|
child: const Text('Close'),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
},
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
setState(() {
|
|
_isLoadingHistory = false;
|
|
});
|
|
}
|
|
|
|
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: 20),
|
|
),
|
|
),
|
|
);
|
|
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: 20),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
final filteredEvents = _eventMarkers.where((m) {
|
|
final label = m.label ?? '';
|
|
if (label.contains('Acceleration') && !_showHardAccel) return false;
|
|
if (label.contains('Braking') && !_showHardBraking) return false;
|
|
if (label.contains('Corner') && !_showCornering) return false;
|
|
if (label.contains('Speed') && !_showSpeedMilestones) return false;
|
|
return true;
|
|
});
|
|
|
|
markers.addAll(filteredEvents);
|
|
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.0),
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Row(
|
|
children: [
|
|
Container(
|
|
padding: const EdgeInsets.all(10),
|
|
decoration: BoxDecoration(
|
|
color: alert.category.color.withValues(alpha: 0.2),
|
|
shape: BoxShape.circle,
|
|
border: Border.all(color: alert.category.color),
|
|
),
|
|
child: Icon(alert.category.icon, color: alert.category.color, size: 28),
|
|
),
|
|
const SizedBox(width: 14),
|
|
Expanded(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
alert.category.displayName.toUpperCase(),
|
|
style: TextStyle(
|
|
color: alert.category.color,
|
|
fontWeight: FontWeight.w900,
|
|
fontSize: 16,
|
|
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 activeProviderType = ref.watch(mapProviderTypeNotifierProvider);
|
|
final isFollowMode = ref.watch(mapFollowStateProvider);
|
|
|
|
final isLandscape = MediaQuery.of(context).orientation == Orientation.landscape;
|
|
|
|
if (widget.rideId != null) {
|
|
// Historical Route View
|
|
final polylines = _routePoints.isNotEmpty
|
|
? [AppPolyline(id: 'history_route', points: _routePoints, color: Colors.cyanAccent, width: 5.0)]
|
|
: <AppPolyline>[];
|
|
|
|
return Scaffold(
|
|
appBar: AppBar(
|
|
title: Text('Ride #${widget.rideId} Route Preview'),
|
|
actions: [
|
|
IconButton(
|
|
tooltip: 'Switch Map Provider',
|
|
icon: Icon(activeProviderType == AppMapType.openStreetMap ? Icons.map : Icons.map_outlined),
|
|
onPressed: () {
|
|
final nextType = activeProviderType == AppMapType.openStreetMap
|
|
? AppMapType.googleMaps
|
|
: AppMapType.openStreetMap;
|
|
ref.read(mapProviderTypeNotifierProvider.notifier).setMapProviderType(nextType);
|
|
},
|
|
),
|
|
],
|
|
),
|
|
body: LayoutBuilder(
|
|
builder: (context, constraints) {
|
|
return Stack(
|
|
fit: StackFit.expand,
|
|
children: [
|
|
Positioned.fill(
|
|
child: SizedBox(
|
|
width: constraints.maxWidth,
|
|
height: constraints.maxHeight,
|
|
child: UnifiedMapView(
|
|
key: ValueKey('preview_map_${constraints.maxWidth.toInt()}x${constraints.maxHeight.toInt()}'),
|
|
center: _initialCenter ?? _fallbackLocation,
|
|
zoom: 15.0,
|
|
polylines: polylines,
|
|
markers: _getFilteredMarkers(),
|
|
),
|
|
),
|
|
),
|
|
if (_routePoints.isNotEmpty) _buildEventFilterOverlay(),
|
|
if (_routePoints.isEmpty)
|
|
Positioned(
|
|
top: 16,
|
|
left: 20,
|
|
right: 20,
|
|
child: Container(
|
|
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
|
|
decoration: BoxDecoration(
|
|
color: const Color(0xFF0D0D0D).withValues(alpha: 0.9),
|
|
borderRadius: BorderRadius.circular(12),
|
|
border: Border.all(color: const Color(0xFF00E5FF).withValues(alpha: 0.4)),
|
|
),
|
|
child: const Row(
|
|
children: [
|
|
Icon(Icons.info_outline, color: Color(0xFF00E5FF), size: 20),
|
|
SizedBox(width: 10),
|
|
Expanded(
|
|
child: Text(
|
|
'No GPS breadcrumbs were recorded during this test session.',
|
|
style: TextStyle(color: Colors.white70, fontSize: 12, fontFamily: 'Inter'),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
],
|
|
);
|
|
},
|
|
),
|
|
);
|
|
}
|
|
|
|
// Live Tracking View
|
|
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: currentHeading,
|
|
iconWidget: const Icon(
|
|
Icons.navigation,
|
|
color: Colors.cyanAccent,
|
|
size: 40,
|
|
),
|
|
);
|
|
|
|
final List<AppMapMarker> mapMarkers = [motorcycleMarker];
|
|
|
|
final liveAlerts = liveAlertsAsync.value ?? [];
|
|
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),
|
|
),
|
|
);
|
|
}
|
|
|
|
return Scaffold(
|
|
extendBodyBehindAppBar: isLandscape,
|
|
appBar: AppBar(
|
|
title: const Text('Live Map'),
|
|
backgroundColor: isLandscape ? Colors.black.withValues(alpha: 0.6) : null,
|
|
elevation: isLandscape ? 0 : null,
|
|
actions: [
|
|
PopupMenuButton<AppMapType>(
|
|
icon: const Icon(Icons.layers),
|
|
onSelected: (type) {
|
|
ref.read(mapProviderTypeNotifierProvider.notifier).setMapProviderType(type);
|
|
},
|
|
itemBuilder: (context) => [
|
|
const PopupMenuItem(
|
|
value: AppMapType.openStreetMap,
|
|
child: Text('OpenStreetMap / Tactical (Primary)'),
|
|
),
|
|
const PopupMenuItem(
|
|
value: AppMapType.googleMaps,
|
|
child: Text('Google Maps'),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
body: LayoutBuilder(
|
|
builder: (context, constraints) {
|
|
return Stack(
|
|
fit: StackFit.expand,
|
|
children: [
|
|
Positioned.fill(
|
|
child: SizedBox(
|
|
width: constraints.maxWidth,
|
|
height: constraints.maxHeight,
|
|
child: UnifiedMapView(
|
|
key: ValueKey('live_map_${constraints.maxWidth.toInt()}x${constraints.maxHeight.toInt()}'),
|
|
center: currentPos,
|
|
zoom: 17.0,
|
|
markers: mapMarkers,
|
|
),
|
|
),
|
|
),
|
|
if (!isFollowMode)
|
|
Positioned(
|
|
bottom: 24,
|
|
right: 24,
|
|
child: FloatingActionButton.extended(
|
|
backgroundColor: Colors.cyanAccent,
|
|
foregroundColor: Colors.black,
|
|
icon: const Icon(Icons.my_location),
|
|
label: const Text('RECENTER', style: TextStyle(fontWeight: FontWeight.bold)),
|
|
onPressed: () {
|
|
ref.read(mapFollowStateProvider.notifier).recenter();
|
|
},
|
|
),
|
|
),
|
|
],
|
|
);
|
|
},
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildEventFilterOverlay() {
|
|
return Positioned(
|
|
top: 10,
|
|
left: 10,
|
|
right: 10,
|
|
child: Card(
|
|
color: Colors.black.withValues(alpha: 0.7),
|
|
child: Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 4.0),
|
|
child: SingleChildScrollView(
|
|
scrollDirection: Axis.horizontal,
|
|
child: Row(
|
|
children: [
|
|
FilterChip(
|
|
label: const Text('Accel'),
|
|
selected: _showHardAccel,
|
|
onSelected: (val) => setState(() => _showHardAccel = val),
|
|
selectedColor: Colors.green.withValues(alpha: 0.4),
|
|
),
|
|
const SizedBox(width: 6),
|
|
FilterChip(
|
|
label: const Text('Braking'),
|
|
selected: _showHardBraking,
|
|
onSelected: (val) => setState(() => _showHardBraking = val),
|
|
selectedColor: Colors.red.withValues(alpha: 0.4),
|
|
),
|
|
const SizedBox(width: 6),
|
|
FilterChip(
|
|
label: const Text('Cornering'),
|
|
selected: _showCornering,
|
|
onSelected: (val) => setState(() => _showCornering = val),
|
|
selectedColor: Colors.orange.withValues(alpha: 0.4),
|
|
),
|
|
const SizedBox(width: 6),
|
|
FilterChip(
|
|
label: const Text('Speed'),
|
|
selected: _showSpeedMilestones,
|
|
onSelected: (val) => setState(() => _showSpeedMilestones = val),
|
|
selectedColor: Colors.purple.withValues(alpha: 0.4),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|