😎 screen Point_Viewer fini

R-Dash/core/Lap.ts

@@ -51,6 +51,17 @@ export class Lap {
         });
         return sum/this.points.length;
     }
+
+    getMaxSpeed(){
+        var max = 0.0;
+        this.points.forEach(pt => {
+            if(max < pt.getVCar()){
+                max = pt.getVCar();
+            }
+        });
+        return max;
+    }
+
     getLocationLat(){
         var sum = 0.0;
         this.points.forEach(pt => {
@@ -58,6 +69,7 @@ export class Lap {
         });
         return sum/this.points.length;
     }
+
     getLocationLong(){
         var sum = 0.0;
         this.points.forEach(pt => {
@@ -65,4 +77,5 @@ export class Lap {
         });
         return sum/this.points.length;
     }
+
 }

R-Dash/screens/Lap.tsx

@@ -6,12 +6,12 @@ import React from 'react';
 import { Lap as LapModel}   from '../core/Lap';
 import TopBar from '../components/TopBar';
 
-export default function Lap(props: { navigation: any, route }) {
+export default function Lap(props: { navigation: any, route : any}) {
     const { session } = props.route.params;
     const { navigation } = props;
 
     // const laps: LapModel[] = session.getLaps();
-    const laps: LapModel[] = session.getLaps().sort((lap1, lap2) => lap1.getNumber() - lap2.getNumber());
+    const laps: LapModel[] = session.getLaps().sort((lap1 : LapModel, lap2 : LapModel) => lap1.getNumber() - lap2.getNumber());
 
 
     const [currentLapIndex, setCurrentLapIndex] = React.useState(0);
@@ -112,17 +112,7 @@ export default function Lap(props: { navigation: any, route }) {
 
                                 <View style={styles.infoContainer}>
                                     <Text style={styles.infoItem}>Max Speed:</Text>
-                                    <Text style={styles.infoValue}>{} km/h</Text>
+                                    <Text style={styles.infoValue}>{currentLap.getMaxSpeed()} km/h</Text>
-                                </View>
-                                
-                                <View style={styles.infoContainer}>
-                                    <Text style={styles.infoItem}>X:</Text>
-                                    <Text style={styles.infoValue}>{} X</Text>
-                                </View>
-
-                                <View style={styles.infoContainer}>
-                                    <Text style={styles.infoItem}>X:</Text>
-                                    <Text style={styles.infoValue}>{} X</Text>
                                 </View>
                                 </View>
                             </BackgroundImage>

R-Dash/screens/NewTrack.tsx

@@ -3,6 +3,7 @@ import React, { useState } from 'react';
 import { Button, Pressable, StyleSheet, Text, View, Image, TouchableOpacity, TextInput } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import * as DocumentPicker from 'expo-document-picker';
+import TopBar from '../components/TopBar';
 
 export default function NewTrack(props: { navigation: any }) {
     const { navigation } = props;
@@ -23,25 +24,8 @@ export default function NewTrack(props: { navigation: any }) {
     return (
         <SafeAreaView>
             <View style={styles.container}>
-                <View style={styles.topbar}>
+                {/* Header */}
-                    <View>
+                <TopBar navigation={navigation} />
-                        <TouchableOpacity style={styles.accountContainerButton}>
-                            <View style={styles.ImageContainer}>
-                            </View>
-                            <Text style={styles.accountName}>Name</Text>
-                        </TouchableOpacity>
-                    </View>
-                    <View style={styles.topbarRight}>
-                        <View style={styles.iconContainer}>
-                            <Image source={require('../assets/images/settings.png')} style={styles.accountSettings} />
-                        </View>
-                        <TouchableOpacity style={styles.accountContainerButton}>
-                            <View style={styles.ImageContainer}>
-                                <Image source={require('../assets/images/image.png')} style={styles.accountImage} />
-                            </View>
-                        </TouchableOpacity>
-                    </View>
-                </View>
 
                 {/* Page */}
                 <View style={{ alignItems: 'center', width: "100%", height: "80%", justifyContent: 'space-around' }}>

R-Dash/screens/Point_Viewer.tsx

@@ -1,13 +1,13 @@
 import { BackgroundImage } from '@rneui/base';
 import { StyleSheet, Text, View, TouchableOpacity, ScrollView } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
-import MapView, { Polyline } from 'react-native-maps';
+import MapView, { Marker, Polyline } from 'react-native-maps';
 import React from 'react';
 import { Lap as LapModel}   from '../core/Lap';
 import TopBar from '../components/TopBar';
 import { Point } from '../core/Point';
 
-export default function Lap(props: { navigation: any, route }) {
+export default function Lap(props: { navigation: any, route : any}) {
     const { currentLap } = props.route.params;
     const { navigation } = props;
 
@@ -30,6 +30,18 @@ export default function Lap(props: { navigation: any, route }) {
         }
     };
 
+    const markers: { id: number; name: string; coordinate: { latitude: number; longitude: number } }[] = points.map((pt, index) => {
+        return {
+          id: index,
+          name: pt.getDistance() + 'm',
+          coordinate: { latitude: pt.getGeo().getGpsLat(), longitude: pt.getGeo().getGpsLong() },
+        };
+      });
+
+    const handleMarker = (index : number) => {
+        setCurrentPointIndex(index);
+    }
+
     // currentLap.getPoints().forEach(pt => {
     //     points.push({ latitude: pt.getGeo().getGpsLat(), longitude: pt.getGeo().getGpsLong() });
             
@@ -73,13 +85,10 @@ export default function Lap(props: { navigation: any, route }) {
                                     longitudeDelta: 0.015,
                                 }}
                             >
-                                {/* <Marker
+                                {markers.map(({ id, name, coordinate }) => (
-                                    coordinate={{
+                                    <Marker key={id} title={name} coordinate={coordinate} onPress={() => handleMarker(id)} />
-                                        latitude: 45.76013484856403,
+                                ))}
-                                        longitude: 3.112214188782891,
+                                 
-                                    }}
-                                    onPress={() => console.log('pressed')}
-                                /> */}
 
                             </MapView>
                             <ScrollView style={ styles.scrollView}>