feat: added datepicker, better refresh, and lots of fixes
This commit is contained in:
@ -40,23 +40,6 @@ class _MapPageState extends State<MapPage> {
|
||||
// _fetchPoints();
|
||||
}
|
||||
|
||||
/*
|
||||
Future<void> _fetchPoints() async {
|
||||
final api = OwntracksApi(baseUrl: '', username: '', pass: '');
|
||||
print(await api.getDevices());
|
||||
final points = await api.fetchPointsForDevice(
|
||||
user: 'yxk',
|
||||
device: 'meow',
|
||||
from: DateTime.now().subtract(const Duration(days: 1)));
|
||||
setState(() {
|
||||
_points = points.unwrapOr([])
|
||||
.map((point) => LatLng(point.lat, point.lon))
|
||||
.toList();
|
||||
});
|
||||
}
|
||||
|
||||
*/
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return BlocProvider(
|
||||
@ -71,6 +54,9 @@ class _MapPageState extends State<MapPage> {
|
||||
future: getPath(),
|
||||
builder: (something, tempPath) => BlocBuilder<SettingsCubit, SettingsState>(
|
||||
builder: (context, state) {
|
||||
if (tempPath.data == null) {
|
||||
return const Center(child: Text('Loading Map...'));
|
||||
}
|
||||
return FlutterMap(
|
||||
options: const MapOptions(
|
||||
initialCenter: LatLng(48.3285, 9.8942),
|
||||
@ -81,9 +67,9 @@ class _MapPageState extends State<MapPage> {
|
||||
urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
|
||||
tileProvider: CachedTileProvider(
|
||||
maxStale: const Duration(days: 30),
|
||||
store: HiveCacheStore(tempPath.data, hiveBoxName: 'HiveCacheStore')),
|
||||
store: HiveCacheStore(tempPath.data!, hiveBoxName: 'HiveCacheStore')),
|
||||
),
|
||||
...state.activeDevices.map((id) => UserPath(device: id, settings: state)),
|
||||
...state.activeDevices.map((id) => UserPath(key: ValueKey(id), device: id, settings: state)),
|
||||
const MapCompass.cupertino(rotationDuration: Duration(milliseconds: 600)),
|
||||
// CurrentLocationLayer(), TODO: add permission
|
||||
RichAttributionWidget(
|
||||
@ -104,7 +90,7 @@ class _MapPageState extends State<MapPage> {
|
||||
}
|
||||
|
||||
class UserPath extends StatefulWidget {
|
||||
UserPath({required this.device, required this.settings});
|
||||
UserPath({super.key, required this.device, required this.settings});
|
||||
|
||||
(String, String) device;
|
||||
SettingsState settings;
|
||||
@ -116,10 +102,12 @@ class UserPath extends StatefulWidget {
|
||||
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: BlocListener<LocationSubscribeCubit, LocationUpdateState>(
|
||||
@ -128,12 +116,15 @@ class _UserPathState extends State<UserPath> {
|
||||
UserPathBloc userPathBloc = context.read<UserPathBloc>();
|
||||
if (state case LocationUpdateReceived(:final position, :final deviceId)) {
|
||||
if (userPathBloc.deviceId == state.deviceId) {
|
||||
context.read<UserPathBloc>().add(UserPathLiveSubscriptionUpdate(position));
|
||||
userPathBloc.add(UserPathLiveSubscriptionUpdate(position));
|
||||
}
|
||||
}
|
||||
},
|
||||
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
|
||||
@ -211,6 +202,7 @@ class _UserPathState extends State<UserPath> {
|
||||
return Stack(
|
||||
children: [
|
||||
PolylineLayer(
|
||||
key: ValueKey('${widget.device}_historyLines'),
|
||||
polylines: [
|
||||
/*
|
||||
Polyline(
|
||||
@ -225,7 +217,7 @@ class _UserPathState extends State<UserPath> {
|
||||
...polylines
|
||||
],
|
||||
),
|
||||
PolylineLayer(polylines: [
|
||||
PolylineLayer(key: ValueKey('${widget.device}_liveLines'), polylines: [
|
||||
Polyline(
|
||||
points: state.livePoints.map((e) => LatLng(e.lat, e.lon)).toList(),
|
||||
strokeWidth: 4.0,
|
||||
@ -247,165 +239,148 @@ showUserLocationModalBottomSheet(BuildContext context, (String, String) user) {
|
||||
context: context,
|
||||
builder: (bsContext) {
|
||||
return Container(
|
||||
height: MediaQuery.of(bsContext).size.height * 0.5,
|
||||
// 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: EdgeInsets.all(32),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Flexible(
|
||||
// Wrap non-grid content in Flexible to manage space dynamically
|
||||
child: Text(
|
||||
'${user.$1}:${user.$2}',
|
||||
style: const TextStyle(
|
||||
fontSize: 24,
|
||||
fontWeight: FontWeight.bold,
|
||||
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,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
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 Flexible(
|
||||
// Use Flexible for dynamic content
|
||||
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(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
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: 2,
|
||||
crossAxisSpacing: 4.0,
|
||||
mainAxisSpacing: 4.0,
|
||||
childAspectRatio: 2.8,
|
||||
),
|
||||
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: EdgeInsets.all(16),
|
||||
child: Column(
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
Text(
|
||||
"${locations[index].key.$1}:${locations[index].key.$2}",
|
||||
style: const TextStyle(fontWeight: FontWeight.bold),
|
||||
),
|
||||
Spacer(),
|
||||
Text(formatDistance(distance ~/ 1)),
|
||||
Transform.rotate(
|
||||
angle: bearing * (math.pi / 180),
|
||||
child: 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)
|
||||
);
|
||||
},
|
||||
),
|
||||
Spacer(),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
},
|
||||
),
|
||||
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(),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user