feat: lots of fixes

android/app/src/main/AndroidManifest.xml

@@ -1,4 +1,5 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android">
+    <uses-permission android:name="android.permission.INTERNET" />
     <application
         android:label="ot_viewer_app"
         android:name="${applicationName}"

devtools_options.yaml

@@ -0,0 +1 @@
+extensions:

lib/global_location_store.dart

@@ -0,0 +1,27 @@
+
+
+import 'package:bloc/bloc.dart';
+import 'package:fast_immutable_collections/fast_immutable_collections.dart';
+import 'package:ot_viewer_app/owntracks_api.dart';
+
+class GlobalLocationStoreState {
+  final IMap<(String, String), Point> locations;
+
+  GlobalLocationStoreState({required this.locations});
+
+  @override
+  String toString() => 'GlobalLocationStoreState(locations: $locations)';
+}
+
+// Define the Cubit
+class GlobalLocationStoreCubit extends Cubit<GlobalLocationStoreState> {
+  GlobalLocationStoreCubit() : super(GlobalLocationStoreState(locations: IMap(const {})));
+
+  // Function to update the points
+  void updatePoint(String user, String device, Point point) {
+    // Create a new map with the updated point
+    final updatedLocations = state.locations.add((user, device), point);
+    // Emit the new state
+    emit(GlobalLocationStoreState(locations: updatedLocations));
+  }
+}

lib/main.dart

@@ -2,9 +2,11 @@ import 'package:flutter/foundation.dart';
 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/settings_page.dart';
 import 'package:path_provider/path_provider.dart';
 import 'map_page.dart';
+import 'package:get_it/get_it.dart';
 import 'owntracks_api.dart';
 
 Future<void> main() async {
@@ -16,6 +18,8 @@ Future<void> main() async {
         : await getApplicationDocumentsDirectory(),
   );
 
+  GetIt.I
+      .registerSingleton<GlobalLocationStoreCubit>(GlobalLocationStoreCubit());
 
   runApp(MyApp());
 }
@@ -28,7 +32,7 @@ class MyApp extends StatelessWidget {
       theme: ThemeData.dark(),
       home: Scaffold(
         appBar: AppBar(title: const Text('OwnTrakcs Data Viewer')),
-        body: MainPage(),
+        body: const MainPage(),
       ),
     );
   }
@@ -45,7 +49,7 @@ class _MainPageState extends State<MainPage> {
   int _currentIndex = 0;
   final List<Widget> _pages = [
     const MapPage(),
-    SettingsPage(), // Assume this is your settings page widget
+    const SettingsPage(), // Assume this is your settings page widget
   ];
 
   void _onItemTapped(int index) {

lib/map_page.dart

@@ -1,5 +1,6 @@
 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';
@@ -7,8 +8,11 @@ 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/settings_page.dart';
 import 'package:ot_viewer_app/user_path_bloc.dart';
 import 'package:ot_viewer_app/util.dart';
@@ -58,15 +62,14 @@ class _MapPageState extends State<MapPage> {
     return BlocProvider(
       create: (context) {
         final cubit = LocationSubscribeCubit();
-        final settings_cubit = context.read<SettingsCubit>();
+        final settingsCubit = context.read<SettingsCubit>();
-        cubit.subscribe(settings_cubit.state);
+        cubit.subscribe(settingsCubit.state);
-        settings_cubit.stream.listen((settings) => cubit.subscribe(settings));
+        settingsCubit.stream.listen((settings) => cubit.subscribe(settings));
         return cubit;
       },
       child: FutureBuilder<String>(
         future: getPath(),
-        builder: (something, temp_path) =>
+        builder: (something, tempPath) => BlocBuilder<SettingsCubit, SettingsState>(
-            BlocBuilder<SettingsCubit, SettingsState>(
           builder: (context, state) {
             return FlutterMap(
               options: const MapOptions(
@@ -78,20 +81,16 @@ class _MapPageState extends State<MapPage> {
                   urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
                   tileProvider: CachedTileProvider(
                       maxStale: const Duration(days: 30),
-                      store: HiveCacheStore(temp_path.data,
+                      store: HiveCacheStore(tempPath.data, hiveBoxName: 'HiveCacheStore')),
-                          hiveBoxName: 'HiveCacheStore')),
                 ),
-                ...state.activeDevices
+                ...state.activeDevices.map((id) => UserPath(device: id, settings: state)),
-                    .map((id) => UserPath(device: id, settings: state)),
+                const MapCompass.cupertino(rotationDuration: Duration(milliseconds: 600)),
-                const MapCompass.cupertino(
-                    rotationDuration: Duration(milliseconds: 600)),
                 // CurrentLocationLayer(),  TODO: add permission
                 RichAttributionWidget(
                   attributions: [
                     TextSourceAttribution(
                       'OpenStreetMap contributors',
-                      onTap: () =>
+                      onTap: () => (Uri.parse('https://openstreetmap.org/copyright')),
-                          (Uri.parse('https://openstreetmap.org/copyright')),
                     ),
                   ],
                 ),
@@ -124,14 +123,12 @@ class _UserPathState extends State<UserPath> {
         return bloc;
       },
       child: BlocListener<LocationSubscribeCubit, LocationUpdateState>(
+        listenWhen: (prevState, state) => state is LocationUpdateReceived,
         listener: (context, state) {
           UserPathBloc userPathBloc = context.read<UserPathBloc>();
-          if (state
+          if (state case LocationUpdateReceived(:final position, :final deviceId)) {
-              case LocationUpdateReceived(:final position, :final deviceId)) {
             if (userPathBloc.deviceId == state.deviceId) {
-              context
+              context.read<UserPathBloc>().add(UserPathLiveSubscriptionUpdate(position));
-                  .read<UserPathBloc>()
-                  .add(UserPathLiveSubscriptionUpdate(position));
             }
           }
         },
@@ -140,10 +137,10 @@ class _UserPathState extends State<UserPath> {
             print("rebuild");
             final _istate = state as MainUserPathState;
             // make markers
-            final List<Marker> _markers = [];
+            final List<Marker> markers = [];
 
             if (state.livePoints.isNotEmpty) {
-              _markers.add(Marker(
+              markers.add(Marker(
                 width: 500,
                 height: 100,
                 point: state.livePoints.last.asLatLng,
@@ -151,25 +148,23 @@ class _UserPathState extends State<UserPath> {
                   mainAxisAlignment: MainAxisAlignment.end,
                   children: [
                     GestureDetector(
-                      onTap: () => showUserLocationModalBottomSheet(
+                      onTap: () => showUserLocationModalBottomSheet(context, widget.device),
-                          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: [
+                            boxShadow: const [
                               // BoxShadow(color: Colors.black, blurRadius: 4)
                             ]),
-                        padding: EdgeInsets.all(8),
+                        padding: const EdgeInsets.all(8),
                         child: Text(
                           "${widget.device.$1}:${widget.device.$2}",
                           softWrap: false,
                         ),
                       ),
                     ),
-                    Icon(
+                    const Icon(
                       Icons.location_history,
                       size: 32,
                     )
@@ -184,8 +179,7 @@ class _UserPathState extends State<UserPath> {
             List<List<LatLng>> segments = [];
             List<Color> colors = [];
             if (state.initialPoints.isNotEmpty) {
-              final allPoints =
+              final allPoints = state.initialPoints.map((e) => LatLng(e.lat, e.lon)).toList();
-                  state.initialPoints.map((e) => LatLng(e.lat, e.lon)).toList();
               final segmentCount = math.min(100, allPoints.length);
               final pointsPerSegment = (allPoints.length / segmentCount).ceil();
 
@@ -208,9 +202,8 @@ class _UserPathState extends State<UserPath> {
                 Polyline(
                   points: segments[i],
                   strokeWidth: 4.0,
-                  color: colors[i].withOpacity(
+                  color: colors[i]
-                      (math.pow(i, 2) / math.pow(segments.length, 2)) * 0.7 +
+                      .withOpacity((math.pow(i, 2) / math.pow(segments.length, 2)) * 0.7 + 0.3), // Fading effect
-                          0.3), // Fading effect
                 ),
               );
             }
@@ -234,14 +227,12 @@ class _UserPathState extends State<UserPath> {
                 ),
                 PolylineLayer(polylines: [
                   Polyline(
-                    points: state.livePoints
+                    points: state.livePoints.map((e) => LatLng(e.lat, e.lon)).toList(),
-                        .map((e) => LatLng(e.lat, e.lon))
-                        .toList(),
                     strokeWidth: 4.0,
                     color: Colors.blue.shade200,
                   ),
                 ]),
-                MarkerLayer(markers: _markers)
+                MarkerLayer(markers: markers)
               ],
             );
           },
@@ -253,83 +244,170 @@ class _UserPathState extends State<UserPath> {
 
 showUserLocationModalBottomSheet(BuildContext context, (String, String) user) {
   showModalBottomSheet(
-      context: context,
+    context: context,
-      builder: (bsContext) {
+    builder: (bsContext) {
-        return Container(
+      return Container(
-            height: MediaQuery.of(bsContext).size.height * 0.26,
+        height: MediaQuery.of(bsContext).size.height * 0.5,
-            width: MediaQuery.of(bsContext).size.width,
+        width: MediaQuery.of(bsContext).size.width,
-            decoration: BoxDecoration(
+        decoration: const BoxDecoration(
-              color: Colors.black,
+          color: Colors.black,
-              // border: Border.all(color: Colors.blueAccent, width: 2),
+          borderRadius: BorderRadius.only(topLeft: Radius.circular(30), topRight: Radius.circular(30)),
-              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: EdgeInsets.all(32),
+            const SizedBox(height: 16),
-            child: Column(
+            StreamBuilder<UserPathState>(
-              children: [
+              stream: context.read<UserPathBloc>().stream,
-                Text(
+              builder: (sheetContext, state) {
-                  '${user.$1}:${user.$2}',
+                final istate =
-                  style: const TextStyle(
+                    state.data as MainUserPathState? ?? context.read<UserPathBloc>().state as MainUserPathState;
-                    fontSize: 24,
+                if (istate.livePoints.isEmpty) {
-                    fontWeight: FontWeight.bold,
+                  return Text("Couldn't find ${user.$1}:${user.$2}'s Location");
+                }
+                final curLocation = istate.livePoints.last;
+                return Flexible(
+                  // Use Flexible for dynamic content
+                  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(),
+                                          ],
+                                        ),
+                                      ],
+                                    ),
+                                  ),
+                                );
+                              },
+                            );
+                          },
+                        ),
+                      ),
+                    ],
                   ),
-                ),
+                );
-                SizedBox(height: 16,),
+              },
-                Builder(
+            ),
-                  builder: (sheetContext) {
+          ],
-                    final state = context.watch<UserPathBloc>().state
+        ),
-                        as MainUserPathState;
+      );
-
+    },
-                    // get user's current location
+  );
-                    // final _istate = state as MainUserPathState;
-
-                    if (state.livePoints.isEmpty) {
-                      return Text(
-                          "Couldn't find ${user.$1}:${user.$2}'s Location");
-                    }
-
-                    final curLocation = state.livePoints.last;
-
-                    // MapController.of(sheetContext).camera.pointToLatLng(
-                        // math.Point(curLocation.lat, curLocation.lon));
-
-                    return Column(
-                      children: [
-                        Container(
-                          decoration: BoxDecoration(
-                            color: Colors.black,
-                            border: Border.all(color: Colors.orange, width: 2),
-                            borderRadius: BorderRadius.circular(10),
-                          ),
-                          padding: 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(
-                                  // rebuild every second for that ticking effect
-                                  // not hyper efficient, but it's only a text
-                                  stream: Stream.periodic(
-                                      const Duration(seconds: 1)),
-                                  builder: (context, _) {
-                                    return Text(
-                                        "${formatDuration(DateTime.now().difference(curLocation.timestamp))} ago");
-                                  }),
-                            ],
-                          ),
-                        )
-                      ],
-                    );
-                  },
-                ),
-              ],
-            ));
-        // title with icon, user name and device id
-
-        // location as a lat, long (truncated to 4 comma spaces)
-        // time since last location update
-        // location to other users in a grid (2 rows)
-      });
 }

lib/owntracks_api.dart

@@ -118,7 +118,7 @@ class OwntracksApi {
   }
 
   // Method to create and return a WebSocket connection
-  Future<WebSocketClient> createWebSocketConnection({
+  Future<Result<WebSocketClient>> createWebSocketConnection({
     required String wsPath,
     required void Function(Object message) onMessage,
     required void Function(WebSocketClientState stateChange) onStateChange,
@@ -149,10 +149,15 @@ class OwntracksApi {
     client.stateChanges.listen(onStateChange);
 
     // Connect to the WebSocket server
-    await client.connect("${baseUrl.replaceFirst('http', 'ws')}/ws/$wsPath");
+    try {
+      await client.connect("${baseUrl.replaceFirst('http', 'ws')}/ws/$wsPath");
+    } catch (e) {
+      await client.disconnect();
+      return bail("WebSocket connection to path $wsPath was unsuccessful: $e");
+    }
 
     // Return the connected client
-    return client;
+    return Ok(client);
   }
 }
 
@@ -163,6 +168,11 @@ class Point {
 
   Point({required this.lat, required this.lon, required this.timestamp});
 
+  @override
+  String toString() {
+    return 'Point{lat: $lat, lon: $lon, timestamp: $timestamp}';
+  }
+
   factory Point.fromJson(Map<String, dynamic> json) {
     return Point(
       lat: json['lat'],

lib/user_path_bloc.dart

@@ -3,6 +3,8 @@ import 'dart:convert';
 
 import 'package:fast_immutable_collections/fast_immutable_collections.dart';
 import 'package:flutter/foundation.dart';
+import 'package:get_it/get_it.dart';
+import 'package:ot_viewer_app/global_location_store.dart';
 import 'package:rust_core/option.dart';
 import 'package:anyhow/anyhow.dart';
 import 'package:bloc/bloc.dart';
@@ -72,6 +74,16 @@ class UserPathBloc extends Bloc<UserPathEvent, UserPathState> {
 
   @override
   void onTransition(Transition<UserPathEvent, UserPathState> transition) {
+    super.onTransition(transition);
+
+    if (transition.nextState is MainUserPathState) {
+      // add current location to global location thingy
+      final pt = (transition.nextState as MainUserPathState).livePoints.lastOrNull;
+      if (pt != null) {
+        GetIt.I.get<GlobalLocationStoreCubit>().updatePoint(deviceId.$1, deviceId.$2, pt);
+      }
+    }
+
     print("upb $deviceId: $transition");
   }
 }

lib/util.dart

@@ -1,3 +1,5 @@
+import 'dart:math';
+
 String formatDuration(Duration duration) {
   final days = duration.inDays;
   final hours = duration.inHours.remainder(24);
@@ -16,3 +18,81 @@ String formatDuration(Duration duration) {
     return '$seconds second${plural(seconds)}';
   }
 }
+
+String formatDistance(int distanceInMeters) {
+  if (distanceInMeters < 1000) {
+    // If the distance is less than 1 kilometer, display it in meters.
+    return '${distanceInMeters}m';
+  } else {
+    // If the distance is 1 kilometer or more, display it in kilometers and meters.
+    final kilometers = distanceInMeters ~/ 1000; // Integer division to get whole kilometers.
+    final meters = distanceInMeters % 1000; // Remainder to get the remaining meters.
+    if (meters == 0) {
+      // If there are no remaining meters, display only kilometers.
+      return '${kilometers}km';
+    } else {
+      // If there are remaining meters, display both kilometers and meters.
+      return '${kilometers}km ${meters}m';
+    }
+  }
+}
+
+
+double degreesToRadians(double degrees) {
+  return degrees * (pi / 180);
+}
+
+double radiansToDegrees(double radians) {
+  return radians * (180 / pi);
+}
+
+double bearingBetween(double lat1, double lon1, double lat2, double lon2) {
+  var dLon = degreesToRadians(lon2 - lon1);
+  var y = sin(dLon) * cos(degreesToRadians(lat2));
+  var x = cos(degreesToRadians(lat1)) * sin(degreesToRadians(lat2)) -
+      sin(degreesToRadians(lat1)) * cos(degreesToRadians(lat2)) * cos(dLon);
+  var angle = atan2(y, x);
+  return (radiansToDegrees(angle) + 360) % 360;
+}
+
+double distanceBetween(
+    double lat1, double lon1, double lat2, double lon2, String unit) {
+  const earthRadius = 6371; // in km
+  // assuming earth is a perfect sphere(it's not)
+
+  // Convert degrees to radians
+  final lat1Rad = degreesToRadians(lat1);
+  final lon1Rad = degreesToRadians(lon1);
+  final lat2Rad = degreesToRadians(lat2);
+  final lon2Rad = degreesToRadians(lon2);
+
+  final dLat = lat2Rad - lat1Rad;
+  final dLon = lon2Rad - lon1Rad;
+
+  // Haversine formula
+  final a = pow(sin(dLat / 2), 2) +
+      cos(lat1Rad) * cos(lat2Rad) * pow(sin(dLon / 2), 2);
+  final c = 2 * atan2(sqrt(a), sqrt(1 - a));
+
+  final distance = earthRadius * c;
+
+  return toRequestedUnit(unit, distance);
+
+  // return distance; // in km
+}
+
+double toRequestedUnit(String unit, double distanceInKm) {
+  switch (unit) {
+    case 'kilometers':
+      return distanceInKm;
+    case 'meters':
+      return distanceInKm * 1000;
+    case 'miles':
+      return (distanceInKm * 1000) / 1609.344;
+    case 'yards':
+      return distanceInKm * 1093.61;
+    case '':
+      return distanceInKm;
+  }
+  return distanceInKm;
+}

lib/web_socket_cubit.dart

@@ -24,20 +24,33 @@ class LocationUpdateReceived extends LocationUpdateState {
 
 class LocationSubscribeCubit extends Cubit<LocationUpdateState> {
   Option<WebSocketClient> _wsClient = None;
+  String url = '';
+  String username = '';
+  String pass = '';
 
   LocationSubscribeCubit() : super(LocationUpdateUnconnected());
 
   subscribe(SettingsState settings) async {
     
-    if(_wsClient.isSome()) {
+    // check if resubscribe is necessary (different URL)
+    if (settings.url == url && settings.username == username && settings.password == pass) {
+      return;
+    } else {
+      url = settings.url;
+      username = settings.username;
+      pass = settings.password;
+    }
+    
+    await _wsConnectionEstablish();
+  }
+
+  Future<void> _wsConnectionEstablish() async {
+    if (_wsClient.isSome()) {
       await _wsClient.unwrap().close();
       _wsClient = None;
     }
     
-    var ws = await OwntracksApi(
+    var ws = await OwntracksApi(baseUrl: url, username: username, pass: pass)
-            baseUrl: settings.url,
-            username: settings.username,
-            pass: settings.password)
         .createWebSocketConnection(
       wsPath: 'last',
       onMessage: (msg) {
@@ -59,12 +72,15 @@ class LocationSubscribeCubit extends Cubit<LocationUpdateState> {
               // 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:
+                  timestamp: DateTime.fromMillisecondsSinceEpoch((map['tst'] as int) * 1000));
-                      DateTime.fromMillisecondsSinceEpoch(map['tst'] as int));
+    
+              print(p);
     
               emit(LocationUpdateReceived(p, deviceId));
             }
@@ -74,22 +90,25 @@ class LocationSubscribeCubit extends Cubit<LocationUpdateState> {
         }
       },
       onStateChange: (sc) {
-        if (sc case WebSocketClientState$Open(:final url)) {
+        switch (sc) {
-          _wsClient.map((wsc) => wsc.add('LAST'));
+          case WebSocketClientState$Open(:final url):
+            _wsClient.map((wsc) => wsc.add('LAST'));
+            emit(LocationUpdateConnected());
+            break;
+          default:
+            emit(LocationUpdateUnconnected());
+            break;
         }
         print(sc);
       },
     );
     
-    _wsClient = Some(ws);
+    _wsClient = ws.expect("Estabilshing Websocket Conenction failed").toOption();
-    emit(LocationUpdateConnected());
   }
 
-
   @override
   void onChange(Change<LocationUpdateState> change) {
     print('loc_sub_cubit change: $change');
-
   }
 
   @override

pubspec.lock

@@ -208,6 +208,14 @@ packages:
     description: flutter
     source: sdk
     version: "0.0.0"
+  get_it:
+    dependency: "direct main"
+    description:
+      name: get_it
+      sha256: e6017ce7fdeaf218dc51a100344d8cb70134b80e28b760f8bb23c242437bafd7
+      url: "https://pub.dev"
+    source: hosted
+    version: "7.6.7"
   hive:
     dependency: transitive
     description:

pubspec.yaml

@@ -54,6 +54,7 @@ dependencies:
   dio_cache_interceptor_hive_store: ^3.2.2
   flutter_map_math: ^0.1.7
   intl: ^0.19.0
+  get_it: ^7.6.7
 
 dev_dependencies:
   flutter_test: