529 lines
20 KiB
Dart
529 lines
20 KiB
Dart
import 'package:bloc/bloc.dart';
|
|
import 'package:dio_cache_interceptor_hive_store/dio_cache_interceptor_hive_store.dart';
|
|
import 'package:fast_immutable_collections/fast_immutable_collections.dart';
|
|
import 'package:flutter/cupertino.dart';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:flutter/widgets.dart';
|
|
import 'package:flutter_bloc/flutter_bloc.dart';
|
|
import 'package:flutter_map/flutter_map.dart';
|
|
import 'package:flutter_map_cache/flutter_map_cache.dart';
|
|
import 'package:flutter_map_compass/flutter_map_compass.dart';
|
|
import 'package:flutter_map_math/flutter_geo_math.dart';
|
|
import 'package:get_it/get_it.dart';
|
|
import 'package:intl/intl.dart';
|
|
import 'package:latlong2/latlong.dart';
|
|
import 'package:ot_viewer_app/global_location_store.dart';
|
|
import 'package:ot_viewer_app/refresh_cubit.dart';
|
|
import 'package:ot_viewer_app/settings_page.dart';
|
|
import 'package:ot_viewer_app/user_path_bloc.dart';
|
|
import 'package:ot_viewer_app/util.dart';
|
|
import 'package:ot_viewer_app/web_socket_cubit.dart';
|
|
import 'package:path_provider/path_provider.dart';
|
|
import 'owntracks_api.dart';
|
|
import 'dart:math' as math;
|
|
|
|
Future<String> getPath() async {
|
|
final cacheDirectory = await getTemporaryDirectory();
|
|
return cacheDirectory.path;
|
|
}
|
|
|
|
class MapPage extends StatefulWidget {
|
|
const MapPage({super.key});
|
|
|
|
@override
|
|
createState() => _MapPageState();
|
|
}
|
|
|
|
class _MapPageState extends State<MapPage> {
|
|
final MapController _mapController = MapController();
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
// _fetchPoints();
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return BlocProvider(
|
|
create: (context) {
|
|
final cubit = LocationSubscribeCubit();
|
|
final settingsCubit = context.read<SettingsCubit>();
|
|
cubit.subscribe(settingsCubit.state);
|
|
settingsCubit.stream.listen((settings) => cubit.subscribe(settings));
|
|
final refreshCubit = context.read<RefreshCubit>();
|
|
refreshCubit.stream.listen((_) => cubit.reconnect());
|
|
return cubit;
|
|
},
|
|
child: FutureBuilder<String>(
|
|
future: getPath(),
|
|
builder: (something, tempPath) =>
|
|
BlocBuilder<SettingsCubit, SettingsState>(
|
|
builder: (context, state) {
|
|
if (tempPath.data == null) {
|
|
return const Center(child: Text('Loading Map...'));
|
|
}
|
|
return Stack(children: [
|
|
FlutterMap(
|
|
mapController: _mapController,
|
|
options: const MapOptions(
|
|
initialCenter: LatLng(48.3285, 9.8942),
|
|
initialZoom: 13.0,
|
|
),
|
|
children: [
|
|
TileLayer(
|
|
urlTemplate:
|
|
'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
|
|
tileProvider: CachedTileProvider(
|
|
maxStale: const Duration(days: 30),
|
|
store: HiveCacheStore(tempPath.data!,
|
|
hiveBoxName: 'HiveCacheStore')),
|
|
),
|
|
...state.activeDevices.map((id) =>
|
|
UserPath(key: ValueKey(id), device: id, settings: state)),
|
|
const MapCompass.cupertino(
|
|
rotationDuration: Duration(milliseconds: 600)),
|
|
// CurrentLocationLayer(), TODO: add permission
|
|
RichAttributionWidget(
|
|
attributions: [
|
|
TextSourceAttribution(
|
|
'OpenStreetMap contributors',
|
|
onTap: () =>
|
|
(Uri.parse('https://openstreetmap.org/copyright')),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
Positioned(
|
|
bottom: 16,
|
|
left: 16,
|
|
child: TrackerSelector(
|
|
mapController: _mapController,
|
|
),
|
|
),
|
|
]);
|
|
},
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class UserPath extends StatefulWidget {
|
|
UserPath({super.key, required this.device, required this.settings});
|
|
|
|
(String, String) device;
|
|
SettingsState settings;
|
|
|
|
@override
|
|
createState() => _UserPathState();
|
|
}
|
|
|
|
class _UserPathState extends State<UserPath> {
|
|
@override
|
|
Widget build(BuildContext ctx) {
|
|
print('rebuilding widget for ${widget.device}');
|
|
return BlocProvider(
|
|
create: (context) {
|
|
final bloc = UserPathBloc(widget.device, widget.settings);
|
|
bloc.add(UserPathFullUpdate());
|
|
// ONLY WORKS because gets rebuilt every time with settings update
|
|
return bloc;
|
|
},
|
|
child: MultiBlocListener(
|
|
listeners: [
|
|
BlocListener<LocationSubscribeCubit, LocationUpdateState>(
|
|
listenWhen: (prevState, state) => state is LocationUpdateReceived,
|
|
listener: (context, state) {
|
|
UserPathBloc userPathBloc = context.read<UserPathBloc>();
|
|
if (state
|
|
case LocationUpdateReceived(
|
|
:final position,
|
|
:final deviceId
|
|
)) {
|
|
if (userPathBloc.deviceId == state.deviceId) {
|
|
userPathBloc.add(UserPathLiveSubscriptionUpdate(position));
|
|
}
|
|
}
|
|
}),
|
|
BlocListener<RefreshCubit, DateTime>(
|
|
listener: (context, state) {
|
|
context.read<UserPathBloc>().add(UserPathFullUpdate());
|
|
},
|
|
)
|
|
],
|
|
child: BlocBuilder<UserPathBloc, UserPathState>(
|
|
builder: (context, state) {
|
|
// TODO: change once smarter rebuilds are ready
|
|
context
|
|
.read<UserPathBloc>()
|
|
.add(UserPathLoginDataChanged(widget.settings));
|
|
|
|
print("rebuild");
|
|
final _istate = state as MainUserPathState;
|
|
// make markers
|
|
final List<Marker> markers = [];
|
|
|
|
if (state.livePoints.isNotEmpty) {
|
|
markers.add(Marker(
|
|
width: 500,
|
|
height: 100,
|
|
point: state.livePoints.last.asLatLng,
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.end,
|
|
children: [
|
|
GestureDetector(
|
|
onTap: () => showUserLocationModalBottomSheet(
|
|
context, widget.device),
|
|
child: Container(
|
|
decoration: BoxDecoration(
|
|
color: Colors.black.withOpacity(0.85),
|
|
// border: Border.all(color: Colors.lightBlue, width: 2), TODO: add border
|
|
borderRadius: BorderRadius.circular(10),
|
|
boxShadow: const [
|
|
// BoxShadow(color: Colors.black, blurRadius: 4)
|
|
]),
|
|
padding: const EdgeInsets.all(8),
|
|
child: Text(
|
|
"${widget.device.$1}:${widget.device.$2}",
|
|
softWrap: false,
|
|
),
|
|
),
|
|
),
|
|
const Icon(
|
|
Icons.location_history,
|
|
size: 32,
|
|
)
|
|
],
|
|
),
|
|
alignment: Alignment.topCenter,
|
|
rotate: true,
|
|
));
|
|
}
|
|
|
|
// Create fancy fade-out and blended line (TODO: make distance based. use flutter_map_math)
|
|
List<List<LatLng>> segments = [];
|
|
List<Color> colors = [];
|
|
if (state.initialPoints.isNotEmpty) {
|
|
final allPoints =
|
|
state.initialPoints.map((e) => LatLng(e.lat, e.lon)).toList();
|
|
final segmentCount = math.min(100, allPoints.length);
|
|
final pointsPerSegment = (allPoints.length / segmentCount).ceil();
|
|
|
|
// Split the points into segments and generate colors
|
|
for (int i = 0; i < allPoints.length; i += pointsPerSegment) {
|
|
int end = math.min(i + pointsPerSegment + 1, allPoints.length);
|
|
segments.add(allPoints.sublist(i, end));
|
|
|
|
// Calculate the color for the segment
|
|
double ratio = i / allPoints.length;
|
|
Color color = Color.lerp(Colors.purple, Colors.blue, ratio)!;
|
|
colors.add(color);
|
|
}
|
|
}
|
|
|
|
// Create polylines for each segment with the corresponding color
|
|
List<Polyline> polylines = [];
|
|
for (int i = 0; i < segments.length; i++) {
|
|
polylines.add(
|
|
Polyline(
|
|
points: segments[i],
|
|
strokeWidth: 4.0,
|
|
color: colors[i].withOpacity(
|
|
(math.pow(i, 2) / math.pow(segments.length, 2)) * 0.7 +
|
|
0.3), // Fading effect
|
|
),
|
|
);
|
|
}
|
|
|
|
return Stack(
|
|
children: [
|
|
PolylineLayer(
|
|
key: ValueKey('${widget.device}_historyLines'),
|
|
polylines: [
|
|
/*
|
|
Polyline(
|
|
points: state.initialPoints
|
|
.map((e) => LatLng(e.lat, e.lon))
|
|
.toList(),
|
|
strokeWidth: 4.0,
|
|
color: Colors.blue,
|
|
),
|
|
|
|
*/
|
|
...polylines
|
|
],
|
|
),
|
|
PolylineLayer(
|
|
key: ValueKey('${widget.device}_liveLines'),
|
|
polylines: [
|
|
Polyline(
|
|
points: state.livePoints
|
|
.map((e) => LatLng(e.lat, e.lon))
|
|
.toList(),
|
|
strokeWidth: 4.0,
|
|
color: Colors.blue.shade200,
|
|
),
|
|
]),
|
|
MarkerLayer(markers: markers)
|
|
],
|
|
);
|
|
},
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
showUserLocationModalBottomSheet(BuildContext context, (String, String) user) {
|
|
showModalBottomSheet(
|
|
context: context,
|
|
builder: (bsContext) {
|
|
return Container(
|
|
// height: MediaQuery.of(bsContext).size.height * 0.5,
|
|
width: MediaQuery.of(bsContext).size.width,
|
|
height: 500,
|
|
decoration: const BoxDecoration(
|
|
color: Colors.black,
|
|
borderRadius: BorderRadius.only(
|
|
topLeft: Radius.circular(30), topRight: Radius.circular(30)),
|
|
),
|
|
padding: const EdgeInsets.all(32),
|
|
child: StreamBuilder<UserPathState>(
|
|
stream: context.read<UserPathBloc>().stream,
|
|
builder: (sheetContext, state) {
|
|
final istate = state.data as MainUserPathState? ??
|
|
context.read<UserPathBloc>().state as MainUserPathState;
|
|
if (istate.livePoints.isEmpty) {
|
|
return Text("Couldn't find ${user.$1}:${user.$2}'s Location");
|
|
}
|
|
final curLocation = istate.livePoints.last;
|
|
return Column(
|
|
// mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Text(
|
|
'${user.$1}:${user.$2}',
|
|
style: const TextStyle(
|
|
fontSize: 24,
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
),
|
|
Container(
|
|
decoration: BoxDecoration(
|
|
color: Colors.black,
|
|
border: Border.all(color: Colors.orange, width: 2),
|
|
borderRadius: BorderRadius.circular(10),
|
|
),
|
|
padding: const EdgeInsets.all(16),
|
|
width: double.infinity,
|
|
child: Column(
|
|
children: [
|
|
Text(
|
|
"(${curLocation.lat.toStringAsFixed(4)}, ${curLocation.lon.toStringAsFixed(4)})"),
|
|
Text(DateFormat('dd.MM.yyyy - kk:mm:ss')
|
|
.format(curLocation.timestamp)),
|
|
StreamBuilder(
|
|
stream: Stream.periodic(const Duration(seconds: 1)),
|
|
builder: (context, _) {
|
|
return Text(
|
|
"${formatDuration(DateTime.now().difference(curLocation.timestamp))} ago");
|
|
},
|
|
),
|
|
],
|
|
),
|
|
),
|
|
const SizedBox(
|
|
height: 16,
|
|
),
|
|
Expanded(
|
|
// Ensure GridView.builder is within an Expanded widget
|
|
child: BlocBuilder<GlobalLocationStoreCubit,
|
|
GlobalLocationStoreState>(
|
|
bloc: GetIt.I.get<GlobalLocationStoreCubit>(),
|
|
builder: (sheetContext, state) {
|
|
// get map camera
|
|
final mapController = MapController.of(context);
|
|
|
|
final mapRotation = mapController.camera.rotation;
|
|
|
|
List<MapEntry<(String, String), Point>> locations = state
|
|
.locations
|
|
.remove(user) // remove this
|
|
.entries // get entries into a list, and sort alphabetically
|
|
.toList()
|
|
..sort((a, b) => "${a.key.$1}:${a.key.$2}"
|
|
.compareTo("${b.key.$1}:${b.key.$2}"));
|
|
if (locations.isEmpty) {
|
|
return const SizedBox();
|
|
}
|
|
return GridView.builder(
|
|
gridDelegate:
|
|
const SliverGridDelegateWithFixedCrossAxisCount(
|
|
crossAxisCount: 1,
|
|
crossAxisSpacing: 4.0,
|
|
mainAxisSpacing: 4.0,
|
|
mainAxisExtent: 100),
|
|
itemCount: locations.length,
|
|
itemBuilder: (BuildContext context, int index) {
|
|
// calculate distance and bearing
|
|
double distance = distanceBetween(
|
|
curLocation.lat,
|
|
curLocation.lon,
|
|
locations[index].value.lat,
|
|
locations[index].value.lon,
|
|
"meters");
|
|
|
|
double bearing = (bearingBetween(
|
|
curLocation.lat,
|
|
curLocation.lon,
|
|
locations[index].value.lat,
|
|
locations[index].value.lon,
|
|
) +
|
|
mapRotation) %
|
|
360;
|
|
|
|
print(distance);
|
|
print(bearing);
|
|
|
|
return Center(
|
|
child: Container(
|
|
margin: const EdgeInsets.all(8),
|
|
decoration: BoxDecoration(
|
|
color: Colors.black,
|
|
border:
|
|
Border.all(color: Colors.pink, width: 2),
|
|
borderRadius: BorderRadius.circular(10),
|
|
),
|
|
padding: const EdgeInsets.all(16),
|
|
child: Column(
|
|
children: [
|
|
Row(
|
|
children: [
|
|
Text(
|
|
"${locations[index].key.$1}:${locations[index].key.$2}",
|
|
style: const TextStyle(
|
|
fontWeight: FontWeight.bold),
|
|
),
|
|
const Spacer(),
|
|
Text(formatDistance(distance ~/ 1)),
|
|
Transform.rotate(
|
|
angle: bearing * (math.pi / 180),
|
|
child: const Icon(
|
|
Icons.arrow_upward,
|
|
color: Colors.blue,
|
|
),
|
|
)
|
|
],
|
|
),
|
|
Row(
|
|
children: [
|
|
StreamBuilder(
|
|
stream: Stream.periodic(
|
|
const Duration(seconds: 1)),
|
|
builder: (context, _) {
|
|
return Text(
|
|
"${formatDuration(DateTime.now().difference(locations[index].value.timestamp))} ago",
|
|
style: const TextStyle(
|
|
fontSize: 12));
|
|
},
|
|
),
|
|
const Spacer(),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
},
|
|
);
|
|
},
|
|
),
|
|
),
|
|
],
|
|
);
|
|
},
|
|
),
|
|
);
|
|
},
|
|
);
|
|
}
|
|
|
|
class TrackerSelector extends StatefulWidget {
|
|
final MapController mapController;
|
|
|
|
const TrackerSelector({super.key, required this.mapController});
|
|
|
|
@override
|
|
State<TrackerSelector> createState() => _TrackerSelectorState();
|
|
}
|
|
|
|
class _TrackerSelectorState extends State<TrackerSelector> {
|
|
bool _isExpanded = false;
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return AnimatedContainer(
|
|
duration: const Duration(milliseconds: 200),
|
|
width: _isExpanded ? MediaQuery.of(context).size.width - 32 : 48,
|
|
height: 48,
|
|
decoration: BoxDecoration(
|
|
color: Colors.black87,
|
|
borderRadius: BorderRadius.circular(24),
|
|
),
|
|
child: Row(
|
|
children: [
|
|
IconButton(
|
|
icon: Icon(_isExpanded ? Icons.close : Icons.people),
|
|
onPressed: () {
|
|
setState(() {
|
|
_isExpanded = !_isExpanded;
|
|
});
|
|
},
|
|
),
|
|
if (_isExpanded)
|
|
Expanded(
|
|
child: BlocBuilder<GlobalLocationStoreCubit,
|
|
GlobalLocationStoreState>(
|
|
bloc: GetIt.I.get<GlobalLocationStoreCubit>(),
|
|
builder: (context, state) {
|
|
return ListView.builder(
|
|
scrollDirection: Axis.horizontal,
|
|
itemCount: state.locations.length,
|
|
itemBuilder: (context, index) {
|
|
final entry = state.locations.entries.elementAt(index);
|
|
return GestureDetector(
|
|
onTap: () => widget.mapController
|
|
.moveAndRotate(entry.value.asLatLng, 15, 0),
|
|
child: Container(
|
|
padding: const EdgeInsets.symmetric(horizontal: 8),
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
const Icon(
|
|
Icons.location_history,
|
|
color: Colors.white,
|
|
size: 24,
|
|
),
|
|
Text(
|
|
"${entry.key.$1}:${entry.key.$2}",
|
|
style: const TextStyle(
|
|
color: Colors.white,
|
|
fontSize: 12,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
},
|
|
);
|
|
},
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|