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

lib/main.dart

@@ -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,10 +85,7 @@ class _MainPageState extends State<MainPage> {
 
   @override
   Widget build(BuildContext context) {
-    return BlocProvider(
+    return Scaffold(
-      lazy: false,
-      create: (BuildContext context) => SettingsCubit(),
-      child: Scaffold(
       body: IndexedStack(
         index: _currentIndex,
         children: _pages,
@@ -82,7 +104,6 @@ class _MainPageState extends State<MainPage> {
         currentIndex: _currentIndex,
         onTap: _onItemTapped,
       ),
-      ),
     );
   }
 }

lib/map_page.dart

@@ -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(
+            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',
+                    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(key: ValueKey(id), device: id, settings: state)),
+                  ...state.activeDevices.map((id) =>
-                const MapCompass.cupertino(rotationDuration: Duration(milliseconds: 600)),
+                      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')),
+                        onTap: () =>
+                            (Uri.parse('https://openstreetmap.org/copyright')),
                       ),
                     ],
                   ),
                 ],
-            );
+              ),
+              Positioned(
+                bottom: 16,
+                left: 16,
+                child: TrackerSelector(
+                  mapController: _mapController,
+                ),
+              ),
+            ]);
           },
         ),
       ),
@@ -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>(
+      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 (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]
+                  color: colors[i].withOpacity(
-                      .withOpacity((math.pow(i, 2) / math.pow(segments.length, 2)) * 0.7 + 0.3), // Fading effect
+                      (math.pow(i, 2) / math.pow(segments.length, 2)) * 0.7 +
+                          0.3), // Fading effect
                 ),
               );
             }
@@ -217,9 +255,13 @@ class _UserPathState extends State<UserPath> {
                     ...polylines
                   ],
                 ),
-                PolylineLayer(key: ValueKey('${widget.device}_liveLines'), polylines: [
+                PolylineLayer(
+                    key: ValueKey('${widget.device}_liveLines'),
+                    polylines: [
                       Polyline(
-                    points: state.livePoints.map((e) => LatLng(e.lat, e.lon)).toList(),
+                        points: state.livePoints
+                            .map((e) => LatLng(e.lat, e.lon))
+                            .toList(),
                         strokeWidth: 4.0,
                         color: Colors.blue.shade200,
                       ),
@@ -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(
-                      Text(DateFormat('dd.MM.yyyy - kk:mm:ss').format(curLocation.timestamp)),
+                          "(${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(
+                        gridDelegate:
-                            crossAxisCount: 1, crossAxisSpacing: 4.0, mainAxisSpacing: 4.0, mainAxisExtent: 100),
+                            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,
+                          double distance = distanceBetween(
-                              locations[index].value.lat, locations[index].value.lon, "meters");
+                              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,
+                                ),
+                              ),
+                            ],
+                          ),
+                        ),
+                      );
+                    },
+                  );
+                },
+              ),
+            ),
+        ],
+      ),
+    );
+  }
+}

lib/refresh_cubit.dart

@@ -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());
+  }
+}

lib/web_socket_cubit.dart

@@ -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,13 +47,38 @@ 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)
+    Result<WebSocketClient> ws = bail('Not done yet');
+
+    while (!ws.isOk()) {
+      ws = await OwntracksApi(baseUrl: url, username: username, pass: pass)
           .createWebSocketConnection(
         wsPath: 'last',
         onMessage: (msg) {
@@ -78,7 +106,8 @@ class LocationSubscribeCubit extends Cubit<LocationUpdateState> {
                 final p = Point(
                     lat: map['lat'] as double,
                     lon: map['lon'] as double,
-                  timestamp: DateTime.fromMillisecondsSinceEpoch((map['tst'] as int) * 1000));
+                    timestamp: DateTime.fromMillisecondsSinceEpoch(
+                        (map['tst'] as int) * 1000));
 
                 print(p);
 
@@ -103,7 +132,18 @@ class LocationSubscribeCubit extends Cubit<LocationUpdateState> {
         },
       );
 
-    _wsClient = ws.expect("Estabilshing Websocket Conenction failed").toOption();
+      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

pubspec.lock

@@ -73,6 +73,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.0.6"
+  dart_earcut:
+    dependency: transitive
+    description:
+      name: dart_earcut
+      sha256: "41b493147e30a051efb2da1e3acb7f38fe0db60afba24ac1ea5684cee272721e"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.1.0"
   dio:
     dependency: transitive
     description:
@@ -178,26 +186,26 @@ packages:
     dependency: "direct main"
     description:
       name: flutter_map
-      sha256: cda8d72135b697f519287258b5294a57ce2f2a5ebf234f0e406aad4dc14c9399
+      sha256: "2ecb34619a4be19df6f40c2f8dce1591675b4eff7a6857bd8f533706977385da"
       url: "https://pub.dev"
     source: hosted
-    version: "6.1.0"
+    version: "7.0.2"
   flutter_map_cache:
     dependency: "direct main"
     description:
       name: flutter_map_cache
-      sha256: "5539033bbfbc0a663f3a038f223a36b472974d6613ce8f84fe7762eeff38aa5a"
+      sha256: "47607b8d95ca791f0367d18955035d098faf80990e5e3bb0dbfa26271a6c2f43"
       url: "https://pub.dev"
     source: hosted
-    version: "1.5.0"
+    version: "1.5.1"
   flutter_map_compass:
     dependency: "direct main"
     description:
       name: flutter_map_compass
-      sha256: f904bdfa3f0aa008ed57abb1154197318ab4524a2cc6fda6888133aa70f2415f
+      sha256: "1dffdc4f562a63f17751d9eea20d99771955e7dd0fbcdcc3b83195672e7abf54"
       url: "https://pub.dev"
     source: hosted
-    version: "1.0.1"
+    version: "1.1.0"
   flutter_map_math:
     dependency: "direct main"
     description:
@@ -268,10 +276,10 @@ packages:
     dependency: "direct main"
     description:
       name: latlong2
-      sha256: "18712164760cee655bc790122b0fd8f3d5b3c36da2cb7bf94b68a197fbb0811b"
+      sha256: "98227922caf49e6056f91b6c56945ea1c7b166f28ffcd5fb8e72fc0b453cc8fe"
       url: "https://pub.dev"
     source: hosted
-    version: "0.9.0"
+    version: "0.9.1"
   leak_tracker:
     dependency: transitive
     description:

pubspec.yaml

@@ -35,7 +35,7 @@ dependencies:
   # The following adds the Cupertino Icons font to your application.
   # Use with the CupertinoIcons class for iOS style icons.
   cupertino_icons: ^1.0.6
-  flutter_map: ^6.1.0
+  flutter_map: ^7.0.2
   http: ^1.2.1
   flutter_dotenv: ^5.1.0
   shared_preferences: ^2.2.2