feat: implement refresh button and jump-to-person plus better ws reconnect

This commit is contained in:
Yandrik 2024-11-05 22:24:03 +01:00
parent 61f9eab0a5
commit b84e9d307d
4 changed files with 353 additions and 143 deletions

View File

@ -3,6 +3,7 @@ import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:hydrated_bloc/hydrated_bloc.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:path_provider/path_provider.dart';
import 'map_page.dart';
@ -20,8 +21,22 @@ Future<void> main() async {
GetIt.I
.registerSingleton<GlobalLocationStoreCubit>(GlobalLocationStoreCubit());
GetIt.I.registerSingleton<RefreshCubit>(RefreshCubit());
runApp(MyApp());
runApp(
MultiBlocProvider(
providers: [
BlocProvider(
lazy: false,
create: (BuildContext context) => SettingsCubit(),
),
BlocProvider(
create: (BuildContext context) => GetIt.I.get<RefreshCubit>(),
),
],
child: MyApp(),
),
);
}
class MyApp extends StatelessWidget {
@ -31,7 +46,17 @@ class MyApp extends StatelessWidget {
title: 'OwnTracks Data Viewer',
theme: ThemeData.dark(),
home: Scaffold(
appBar: AppBar(title: const Text('OwnTrakcs Data Viewer')),
appBar: AppBar(
title: const Text('OwnTrakcs Data Viewer'),
actions: [
IconButton(
icon: const Icon(Icons.refresh),
onPressed: () async {
context.read<RefreshCubit>().triggerRefresh();
},
),
],
),
body: const MainPage(),
),
);
@ -60,28 +85,24 @@ class _MainPageState extends State<MainPage> {
@override
Widget build(BuildContext context) {
return BlocProvider(
lazy: false,
create: (BuildContext context) => SettingsCubit(),
child: Scaffold(
body: IndexedStack(
index: _currentIndex,
children: _pages,
),
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.map),
label: 'Map',
),
BottomNavigationBarItem(
icon: Icon(Icons.settings),
label: 'Settings',
),
],
currentIndex: _currentIndex,
onTap: _onItemTapped,
),
return Scaffold(
body: IndexedStack(
index: _currentIndex,
children: _pages,
),
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.map),
label: 'Map',
),
BottomNavigationBarItem(
icon: Icon(Icons.settings),
label: 'Settings',
),
],
currentIndex: _currentIndex,
onTap: _onItemTapped,
),
);
}

View File

@ -13,6 +13,7 @@ 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';
@ -34,6 +35,8 @@ class MapPage extends StatefulWidget {
}
class _MapPageState extends State<MapPage> {
final MapController _mapController = MapController();
@override
void initState() {
super.initState();
@ -48,40 +51,58 @@ class _MapPageState extends State<MapPage> {
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: (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),
initialZoom: 13.0,
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')),
),
],
),
],
),
children: [
TileLayer(
urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
tileProvider: CachedTileProvider(
maxStale: const Duration(days: 30),
store: HiveCacheStore(tempPath.data!, hiveBoxName: 'HiveCacheStore')),
Positioned(
bottom: 16,
left: 16,
child: TrackerSelector(
mapController: _mapController,
),
...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')),
),
],
),
],
);
),
]);
},
),
),
@ -110,20 +131,34 @@ class _UserPathState extends State<UserPath> {
// ONLY WORKS because gets rebuilt every time with settings update
return bloc;
},
child: 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));
}
}
},
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));
context
.read<UserPathBloc>()
.add(UserPathLoginDataChanged(widget.settings));
print("rebuild");
final _istate = state as MainUserPathState;
@ -139,7 +174,8 @@ class _UserPathState extends State<UserPath> {
mainAxisAlignment: MainAxisAlignment.end,
children: [
GestureDetector(
onTap: () => showUserLocationModalBottomSheet(context, widget.device),
onTap: () => showUserLocationModalBottomSheet(
context, widget.device),
child: Container(
decoration: BoxDecoration(
color: Colors.black.withOpacity(0.85),
@ -170,7 +206,8 @@ class _UserPathState extends State<UserPath> {
List<List<LatLng>> segments = [];
List<Color> colors = [];
if (state.initialPoints.isNotEmpty) {
final allPoints = state.initialPoints.map((e) => LatLng(e.lat, e.lon)).toList();
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();
@ -193,8 +230,9 @@ class _UserPathState extends State<UserPath> {
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
color: colors[i].withOpacity(
(math.pow(i, 2) / math.pow(segments.length, 2)) * 0.7 +
0.3), // Fading effect
),
);
}
@ -217,13 +255,17 @@ class _UserPathState extends State<UserPath> {
...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,
),
]),
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)
],
);
@ -244,13 +286,15 @@ showUserLocationModalBottomSheet(BuildContext context, (String, String) user) {
height: 500,
decoration: const BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.only(topLeft: Radius.circular(30), topRight: Radius.circular(30)),
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;
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");
}
@ -275,12 +319,15 @@ showUserLocationModalBottomSheet(BuildContext context, (String, String) user) {
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)),
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");
return Text(
"${formatDuration(DateTime.now().difference(curLocation.timestamp))} ago");
},
),
],
@ -291,7 +338,8 @@ showUserLocationModalBottomSheet(BuildContext context, (String, String) user) {
),
Expanded(
// Ensure GridView.builder is within an Expanded widget
child: BlocBuilder<GlobalLocationStoreCubit, GlobalLocationStoreState>(
child: BlocBuilder<GlobalLocationStoreCubit,
GlobalLocationStoreState>(
bloc: GetIt.I.get<GlobalLocationStoreCubit>(),
builder: (sheetContext, state) {
// get map camera
@ -299,22 +347,32 @@ showUserLocationModalBottomSheet(BuildContext context, (String, String) user) {
final mapRotation = mapController.camera.rotation;
List<MapEntry<(String, String), Point>> locations = state.locations
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}"));
..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),
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 distance = distanceBetween(
curLocation.lat,
curLocation.lon,
locations[index].value.lat,
locations[index].value.lon,
"meters");
double bearing = (bearingBetween(
curLocation.lat,
@ -333,7 +391,8 @@ showUserLocationModalBottomSheet(BuildContext context, (String, String) user) {
margin: const EdgeInsets.all(8),
decoration: BoxDecoration(
color: Colors.black,
border: Border.all(color: Colors.pink, width: 2),
border:
Border.all(color: Colors.pink, width: 2),
borderRadius: BorderRadius.circular(10),
),
padding: const EdgeInsets.all(16),
@ -343,7 +402,8 @@ showUserLocationModalBottomSheet(BuildContext context, (String, String) user) {
children: [
Text(
"${locations[index].key.$1}:${locations[index].key.$2}",
style: const TextStyle(fontWeight: FontWeight.bold),
style: const TextStyle(
fontWeight: FontWeight.bold),
),
const Spacer(),
Text(formatDistance(distance ~/ 1)),
@ -359,11 +419,13 @@ showUserLocationModalBottomSheet(BuildContext context, (String, String) user) {
Row(
children: [
StreamBuilder(
stream: Stream.periodic(const Duration(seconds: 1)),
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));
style: const TextStyle(
fontSize: 12));
},
),
const Spacer(),
@ -386,3 +448,81 @@ showUserLocationModalBottomSheet(BuildContext context, (String, String) user) {
},
);
}
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,
),
),
],
),
),
);
},
);
},
),
),
],
),
);
}
}

9
lib/refresh_cubit.dart Normal file
View File

@ -0,0 +1,9 @@
import 'package:flutter_bloc/flutter_bloc.dart';
class RefreshCubit extends Cubit<DateTime> {
RefreshCubit() : super(DateTime.now());
void triggerRefresh() {
emit(DateTime.now());
}
}

View File

@ -1,6 +1,6 @@
// web_socket_cubit.dart
import 'dart:async';
import 'dart:convert';
import 'package:anyhow/anyhow.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:ot_viewer_app/owntracks_api.dart';
import 'package:ot_viewer_app/settings_page.dart';
@ -24,16 +24,19 @@ class LocationUpdateReceived extends LocationUpdateState {
class LocationSubscribeCubit extends Cubit<LocationUpdateState> {
Option<WebSocketClient> _wsClient = None;
Option<Completer<void>> _connectionCompleter = None;
String url = '';
String username = '';
String pass = '';
LocationSubscribeCubit() : super(LocationUpdateUnconnected());
// TODO: handle ongoing connection attempt by canceling? the loop? or smth
subscribe(SettingsState settings) async {
// check if resubscribe is necessary (different URL)
if (settings.url == url && settings.username == username && settings.password == pass) {
if (settings.url == url &&
settings.username == username &&
settings.password == pass) {
return;
} else {
url = settings.url;
@ -44,66 +47,103 @@ class LocationSubscribeCubit extends Cubit<LocationUpdateState> {
await _wsConnectionEstablish();
}
reconnect() async {
print("reconnecting...");
if (_wsClient.isSome()) {
await _wsClient.unwrap().close();
_wsClient = None;
} else {
print("not connected, not reconnecting");
return;
}
await _wsConnectionEstablish();
}
Future<void> _wsConnectionEstablish() async {
// If there's an ongoing connection attempt, wait for it
if (_connectionCompleter.isSome()) {
await _connectionCompleter.unwrap().future;
return;
}
// Start new connection attempt
_connectionCompleter = Some(Completer<void>());
if (_wsClient.isSome()) {
await _wsClient.unwrap().close();
_wsClient = None;
}
var ws = await OwntracksApi(baseUrl: url, username: username, pass: pass)
.createWebSocketConnection(
wsPath: 'last',
onMessage: (msg) {
if (msg is String) {
if (msg == 'LAST') {
return;
}
try {
final Map<String, dynamic> map = jsonDecode(msg);
Result<WebSocketClient> ws = bail('Not done yet');
if (map['_type'] == 'location') {
// filter points (only the ones for this device pls!)
final topic = (map['topic'] as String?)?.split('/');
if (topic == null || topic.length < 3) {
// couldn't reconstruct ID, bail
return;
}
// build device_id
final deviceId = (topic[1], topic[2]);
print(map);
// build point
final p = Point(
lat: map['lat'] as double,
lon: map['lon'] as double,
timestamp: DateTime.fromMillisecondsSinceEpoch((map['tst'] as int) * 1000));
print(p);
emit(LocationUpdateReceived(p, deviceId));
while (!ws.isOk()) {
ws = await OwntracksApi(baseUrl: url, username: username, pass: pass)
.createWebSocketConnection(
wsPath: 'last',
onMessage: (msg) {
if (msg is String) {
if (msg == 'LAST') {
return;
}
} catch (e) {
print('BUG: Couldn\'t parse WS message: $msg ($e)');
}
}
},
onStateChange: (sc) {
switch (sc) {
case WebSocketClientState$Open(:final url):
_wsClient.map((wsc) => wsc.add('LAST'));
emit(LocationUpdateConnected());
break;
default:
emit(LocationUpdateUnconnected());
break;
}
print(sc);
},
);
try {
final Map<String, dynamic> map = jsonDecode(msg);
_wsClient = ws.expect("Estabilshing Websocket Conenction failed").toOption();
if (map['_type'] == 'location') {
// filter points (only the ones for this device pls!)
final topic = (map['topic'] as String?)?.split('/');
if (topic == null || topic.length < 3) {
// couldn't reconstruct ID, bail
return;
}
// build device_id
final deviceId = (topic[1], topic[2]);
print(map);
// build point
final p = Point(
lat: map['lat'] as double,
lon: map['lon'] as double,
timestamp: DateTime.fromMillisecondsSinceEpoch(
(map['tst'] as int) * 1000));
print(p);
emit(LocationUpdateReceived(p, deviceId));
}
} catch (e) {
print('BUG: Couldn\'t parse WS message: $msg ($e)');
}
}
},
onStateChange: (sc) {
switch (sc) {
case WebSocketClientState$Open(:final url):
_wsClient.map((wsc) => wsc.add('LAST'));
emit(LocationUpdateConnected());
break;
default:
emit(LocationUpdateUnconnected());
break;
}
print(sc);
},
);
if (!ws.isOk()) {
print(
'Failed to connect to WebSocket: ${ws.unwrapErr()}\n, retrying in 1s');
await Future.delayed(const Duration(seconds: 1));
}
}
_wsClient =
ws.expect("Estabilshing Websocket Conenction failed").toOption();
_connectionCompleter.unwrap().complete();
_connectionCompleter = None;
}
@override