Merge pull request #88 from RealTeamRocket/65-map-display

65 map display

Author: Pazl27

mobile_app/lib/main.dart

@@ -10,7 +10,7 @@ import 'utils/backend_api/backend_api.dart' as api;
 import 'package:flutter_secure_storage/flutter_secure_storage.dart';
 import 'package:jwt_decoder/jwt_decoder.dart';
 import 'package:flutter_dotenv/flutter_dotenv.dart';
-import 'pages/pages.dart';
+import 'pages/pages.dart' as pages;
 import 'package:permission_handler/permission_handler.dart';
 
 void main() async {
@@ -92,8 +92,8 @@ class MyAppState extends State<MyApp> {
       ),
       home:
           isAuthenticated!
-              ? const HomePage(title: 'Rocket App')
-              : const WelcomePage(),
+              ? const pages.AppNavigator(title: 'Rocket App')
+              : const pages.WelcomePage(),
       routes: {'/settings': (context) => SettingsPage()},
     );
   }

mobile_app/lib/pages/leaderboard.dart

@@ -4,17 +4,22 @@ import '/widgets/widgets.dart';
 import 'leaderboard.dart';
 import 'pages.dart';
 
-class HomePage extends StatefulWidget {
-  const HomePage({super.key, required this.title});
+class AppNavigator extends StatefulWidget {
+  const AppNavigator({
+    super.key,
+    required this.title,
+    this.initialIndex = 2, // Default to "Run" tab in the middle
+  });
 
   final String title;
+  final int initialIndex;
 
   @override
-  State<HomePage> createState() => _HomePageState();
+  State<AppNavigator> createState() => _AppNavigatorState();
 }
 
-class _HomePageState extends State<HomePage> {
-  int _selectedIndex = 2; /// set position of starting page to homepage in the middle
+class _AppNavigatorState extends State<AppNavigator> {
+  late int _selectedIndex;
 
   final List<Widget> _pages = <Widget>[
     const ChallengePage(title: 'Challenges'),
@@ -24,6 +29,12 @@ class _HomePageState extends State<HomePage> {
     const ProfilePage(),
   ];
 
+  @override
+  void initState() {
+    super.initState();
+    _selectedIndex = widget.initialIndex;
+  }
+
   void _onItemTapped(int index) {
     setState(() {
       _selectedIndex = index;

mobile_app/lib/pages/home_page.dart mobile_app/lib/pages/navigator.dartmobile_app/lib/pages/home_page.dart renamed to mobile_app/lib/pages/navigator.dart

@@ -1,6 +1,7 @@
-export 'home_page.dart';
+export 'navigator.dart';
 export 'profile_page.dart';
 export 'run_page.dart';
 export 'start_pages/start_pages.dart';
 export 'challenges_page.dart';
 export 'friendlist_page.dart';
+export 'leaderboard.dart';

mobile_app/lib/pages/pages.dart

@@ -1,73 +1,69 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_osm_plugin/flutter_osm_plugin.dart';
-import 'package:geolocator/geolocator.dart';
+import 'dart:math';
+
+import 'package:mobile_app/pages/pages.dart';
 
 class RoutePage extends StatefulWidget {
-  const RoutePage({super.key, required this.title});
+  const RoutePage({
+    super.key,
+    required this.title,
+    required this.routePoints,
+    required this.elapsedTime,
+  });
 
   final String title;
+  final List<GeoPoint> routePoints;
+  final String elapsedTime;
 
   @override
   State<RoutePage> createState() => _RoutePageState();
 }
 
-Future<Position> _determinePosition() async {
-  bool serviceEnabled;
-  LocationPermission locationPermission;
-  serviceEnabled = await Geolocator.isLocationServiceEnabled();
-  if (!serviceEnabled) {
-    return Future.error('Location services are disabled.');
-  }
-  locationPermission = await Geolocator.checkPermission();
-  if (locationPermission == LocationPermission.denied) {
-    locationPermission = await Geolocator.requestPermission();
-    if (locationPermission == LocationPermission.denied) {
-      return Future.error('Location permissions are denied');
-    }
-  }
-  if (locationPermission == LocationPermission.deniedForever) {
-    return Future.error(
-      'Location permissions are permanently denied, we cannot request permissions.',
-    );
-  }
-  return await Geolocator.getCurrentPosition();
-}
-
 class _RoutePageState extends State<RoutePage> {
   GeoPoint? _initPosition;
-  List<GeoPoint> _routePoints = [];
+  late List<GeoPoint> _routePoints;
   late MapController _mapController;
-  var distance = 0.0;
-  var numOfGeoPoints = 0;
-  var rocketPoints = 0;
+  double distance = 0.0;
 
   @override
   void initState() {
     super.initState();
-    _setInitialPosition();
+    _routePoints = widget.routePoints;
+    _initPosition = _routePoints.isNotEmpty
+        ? _routePoints.first
+        : GeoPoint(latitude: 48.61313, longitude: 9.45881);
     _mapController = MapController(
-      initPosition: GeoPoint(latitude: 48.61313, longitude: 9.45881),
+      initPosition: _initPosition!,
     );
+    distance = _calculateTotalDistance(_routePoints);
   }
 
-  /// Here: Instead of the hardcoded points use the points from the list _routePoints
-  Future<void> _setInitialPosition() async {
-    try {
-      setState(() {
-        _initPosition = GeoPoint(latitude: 48.61313, longitude: 9.45881);
-        _routePoints = [
-          _initPosition!,
-          GeoPoint(latitude: 48.6156, longitude: 9.45984),
-          GeoPoint(latitude: 48.61651, longitude: 9.4549),
-        ];
-      });
-    } catch (e) {
-      // Handle the error accordingly
-      ///Instead of print maybe don't show map and just show earned points and so on
-      print(e);
+  double _calculateTotalDistance(List<GeoPoint> points) {
+    if (points.length < 2) return 0.0;
+    double total = 0.0;
+    for (int i = 0; i < points.length - 1; i++) {
+      total += _calculateDistanceBetween(points[i], points[i + 1]);
     }
+    return total;
+  }
+
+  // Haversine formula for distance in km
+  double _calculateDistanceBetween(GeoPoint a, GeoPoint b) {
+    const double R = 6371; // Earth's radius in km
+    double dLat = _deg2rad(b.latitude - a.latitude);
+    double dLon = _deg2rad(b.longitude - a.longitude);
+    double lat1 = _deg2rad(a.latitude);
+    double lat2 = _deg2rad(b.latitude);
+
+    double hav = sin(dLat / 2) * sin(dLat / 2) +
+        sin(dLon / 2) * sin(dLon / 2) * cos(lat1) * cos(lat2);
+    double c = 2 * atan2(sqrt(hav), sqrt(1 - hav));
+    return R * c;
   }
 
+  double _deg2rad(double deg) => deg * (pi / 180);
+
   @override
   Widget build(BuildContext context) {
     return Scaffold(
@@ -76,88 +72,51 @@ class _RoutePageState extends State<RoutePage> {
         children: [
           SizedBox(
             height: 500,
-            child:
-                _initPosition == null
-                    ? Center(child: CircularProgressIndicator())
-                    : OSMFlutter(
-                      controller: _mapController,
-                      osmOption: OSMOption(
-                        zoomOption: ZoomOption(
-                          minZoomLevel: 5,
-                          maxZoomLevel: 18,
-                          initZoom: 16,
-                        ),
-                        userLocationMarker: UserLocationMaker(
-                          personMarker: MarkerIcon(
-                            icon: Icon(
-                              Icons.location_on,
-                              color: Colors.red,
-                              size: 48,
-                            ),
+            child: _initPosition == null || _routePoints.isEmpty
+                ? Center(child: Text("Keine Route verfügbar"))
+                : OSMFlutter(
+                    controller: _mapController,
+                    osmOption: OSMOption(
+                      zoomOption: ZoomOption(
+                        minZoomLevel: 5,
+                        maxZoomLevel: 18,
+                        initZoom: 16,
+                      ),
+                      userLocationMarker: UserLocationMaker(
+                        personMarker: MarkerIcon(
+                          icon: Icon(
+                            Icons.location_on,
+                            color: Colors.red,
+                            size: 48,
                           ),
-                          directionArrowMarker: MarkerIcon(
-                            icon: Icon(
-                              Icons.arrow_forward,
-                              color: Colors.blue,
-                              size: 48,
-                            ),
+                        ),
+                        directionArrowMarker: MarkerIcon(
+                          icon: Icon(
+                            Icons.arrow_forward,
+                            color: Colors.blue,
+                            size: 48,
                           ),
                         ),
                       ),
-                      mapIsLoading: Center(child: CircularProgressIndicator()),
-                      onMapIsReady: (isReady) async {
-                        RoadInfo roadInfo;
-                        ///Here draw the map and get the distance from point to point
-                        for(var point in _routePoints){
-                          /**
-                           * Checks if all points have been already used
-                           */
-                          if(numOfGeoPoints == _routePoints.length){
-                            break;
-                          }
-                          numOfGeoPoints++;
-                          /**
-                           * Draws the road between the last and first point
-                           */
-                          if(_routePoints.indexOf(point) == _routePoints.length-1){
-                            roadInfo = await _mapController.drawRoad(
-                              point,
-                              _routePoints[0],
-                              roadType: RoadType.foot,
-                              roadOption: RoadOption(
-                                roadColor: Colors.yellow,
-                                roadWidth: 8,
-                              ),
-                            );
-                            distance += roadInfo.distance ?? 0;
-                            /**
-                             * Draws road between each other point 0->1, 1->2, ...
-                             */
-                          }else{
-                            roadInfo = await _mapController.drawRoad(
-                              point,
-                              _routePoints[_routePoints.indexOf(point) + 1],
-                              roadType: RoadType.foot,
-                              roadOption: RoadOption(
-                                roadColor: Colors.yellow,
-                                roadWidth: 8,
-                              ),
-                            );
-                            /**
-                             * Adds the distance of the road to the total distance
-                             */
-                            distance += roadInfo.distance ?? 0;
-                            setState(() {
-                              distance = double.parse(distance.toStringAsFixed(2));
-                            });
-                          }
-                        }
-                        // Logik für die Karte
-                      },
-                      onGeoPointClicked: (geoPoint) {
-                        // Behandlung des Klicks auf einen Geopunkt
-                      },
                     ),
+                    mapIsLoading: Center(child: CircularProgressIndicator()),
+                    onMapIsReady: (isReady) async {
+                      if (_routePoints.length > 1) {
+                        for (int i = 0; i < _routePoints.length - 1; i++) {
+                          await _mapController.drawRoad(
+                            _routePoints[i],
+                            _routePoints[i + 1],
+                            roadType: RoadType.foot,
+                            roadOption: RoadOption(
+                              roadColor: Colors.yellow,
+                              roadWidth: 8,
+                            ),
+                          );
+                        }
+                      }
+                    },
+                    onGeoPointClicked: (geoPoint) {},
+                  ),
           ),
           Container(
             padding: const EdgeInsets.all(16.0),
@@ -169,39 +128,33 @@ class _RoutePageState extends State<RoutePage> {
                   mainAxisAlignment: MainAxisAlignment.spaceBetween,
                   children: [
                     Text(
-                      "Distanz: ${distance.toStringAsFixed(2)} km",
+                      "Distance: ${distance.toStringAsFixed(2)} km",
                       style: TextStyle(
                         fontSize: 16,
                         fontWeight: FontWeight.bold,
                       ),
                     ),
                     Text(
-                      "Dauer: 00:45:30",
+                      "Time: ${widget.elapsedTime}",
                       style: TextStyle(
                         fontSize: 16,
                         fontWeight: FontWeight.bold,
                       ),
                     ),
                   ],
                 ),
-                SizedBox(height: 8),
-                Center(
-                  child: Text(
-                    "Punkte: ${distance.floor()}",
-                    style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
-                  ),
-                ),
-                /**
-                 * Here: Possible to add the challenges that are completed
-                 */
                 SizedBox(height: 16),
                 Center(
                   child: ElevatedButton(
                     onPressed: () {
-                      /**
-                       * Here: Navigate back to the main app screen
-                       */
-                  },
+                      Navigator.pushAndRemoveUntil(
+                        context,
+                        MaterialPageRoute(
+                          builder: (context) => AppNavigator(title: 'Rocket App', initialIndex: 2),
+                        ),
+                        (route) => false,
+                      );
+                    },
                     child: Text("Back To App"),
                   ),
                 ),
@@ -213,13 +166,3 @@ class _RoutePageState extends State<RoutePage> {
     );
   }
 }
-
-void main() {
-  runApp(
-    MaterialApp(
-      title: 'Route Page',
-      theme: ThemeData(primarySwatch: Colors.blue),
-      home: RoutePage(title: 'Completed Run'),
-    ),
-  );
-}