👌 screen Lap prête pour recevoir des données.

R-Dash/components/SessionCmp.tsx

@@ -9,13 +9,15 @@ type SessionListItemProps = {
   }
   
   export default function SessionListItem(props: SessionListItemProps) {
+
     const timeInSeconds = props.session.getLaps()[props.session.getLaps().length - 1].getTime();
     const timeInMs = timeInSeconds * 1000;
     const date = new Date(timeInMs);
     const minutes = date.getMinutes().toString().padStart(2, "0");
     const seconds = date.getSeconds().toString().padStart(2, "0");
-    const milliseconds = date.getMilliseconds().toString().padStart(3, "0");
+    const milliseconds = date.getMilliseconds().toString().padStart(2, "0");
     const formattedTime = `${minutes}:${seconds}:${milliseconds}`;
+
     return (
       <TouchableOpacity style={styles.container} 
                         onPress={()=> props.onPress(props.session)}>

R-Dash/core/Lap.ts

@@ -29,7 +29,40 @@ export class Lap {
     getTime() {
         return this.time;
     }
+    
+    getFormattedTime(){
+        const timeInSeconds = this.time;
+        const timeInMs = timeInSeconds * 1000;
+        const date = new Date(timeInMs);
+        const minutes = date.getMinutes().toString().padStart(2, "0");
+        const seconds = date.getSeconds().toString().padStart(2, "0");
+        const milliseconds = date.getMilliseconds().toString().padStart(2, "0");
+        const formattedTime = `${minutes}:${seconds}:${milliseconds}`;
+        return formattedTime;
+    }
+
     setTime(time: number) {
         this.time = time;
     }
+    getAverageSpeed(){
+        var sum = 0;
+        this.points.forEach(pt => {
+            sum += pt.getVCar();
+        });
+        return sum/this.points.length;
+    }
+    getLocationLat(){
+        var sum = 0.0;
+        this.points.forEach(pt => {
+            sum += pt.getGeo().getGpsLat();
+        });
+        return sum/this.points.length;
+    }
+    getLocationLong(){
+        var sum = 0.0;
+        this.points.forEach(pt => {
+            sum += pt.getGeo().getGpsLong();
+        });
+        return sum/this.points.length;
+    }
 }

R-Dash/core/Point.ts

@@ -24,6 +24,7 @@ export class Point {
         this.gLat = gLat;
         this.vCar = vCar;
     }
+    
     getGeo() {
         return this.geo;
     }

R-Dash/screens/Lap.tsx

@@ -1,7 +1,7 @@
 import { BackgroundImage } from '@rneui/base';
 import { FlatList, StyleSheet, Text, View, Image, TouchableOpacity } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
-import MapView from 'react-native-maps';
+import MapView, { Circle, Polygon, Polyline } from 'react-native-maps';
 import PROVIDER_OPENSTREETMAP, { Marker } from 'react-native-maps';
 import React from 'react';
 import { Session } from '../core/Session';
@@ -14,7 +14,27 @@ export default function Lap({route}) {
     const laps: LapModel[] = session.getLaps().sort((lap1, lap2) => lap1.getNumber() - lap2.getNumber());
 
 
-    const currentLap: LapModel | undefined = laps[0];
+    const [currentLapIndex, setCurrentLapIndex] = React.useState(0);
+    const currentLap: LapModel | undefined = laps[currentLapIndex];
+
+    const goToPreviousLap = () => {
+        if (currentLapIndex > 0) {
+            setCurrentLapIndex(currentLapIndex - 1);
+        }
+    };
+
+    const goToNextLap = () => {
+        if (currentLapIndex < laps.length - 1) {
+            setCurrentLapIndex(currentLapIndex + 1);
+        }
+    };
+
+    const points : any = [];
+    currentLap.getPoints().forEach(pt => {
+        points.push({ latitude: pt.getGeo().getGpsLat(), longitude: pt.getGeo().getGpsLong() });
+            
+    });
+
     //var currentLap : undefined; // Penser à vérifier si la session ne possède pas de tour !! si c'est le cas afficher une popup d'erreur
     return (
         <SafeAreaView style={styles.container}>
@@ -22,7 +42,7 @@ export default function Lap({route}) {
                 {/* Header */}
                 <View style={styles.topbar}>
                     <View>
-                        <TouchableOpacity style={styles.accountContainerButton}>
+                        <TouchableOpacity style={styles.accountContainerButton}  disabled={currentLapIndex === 0}>
                             <View style={styles.ImageContainer}>
                                 <Image source={require('../assets/images/pfp.png')} style={styles.accountImage} />
                             </View>
@@ -33,7 +53,7 @@ export default function Lap({route}) {
                         <View style={styles.iconContainer}>
                             <Image source={require('../assets/images/settings.png')} style={styles.accountSettings} />
                         </View>
-                        <TouchableOpacity style={styles.accountContainerButton}>
+                        <TouchableOpacity style={styles.accountContainerButton} disabled={currentLapIndex === laps.length - 1}>
                             <View style={styles.ImageContainer}>
                                 <Image source={require('../assets/images/rdash.png')} style={styles.accountImage} />
                             </View>
@@ -43,18 +63,17 @@ export default function Lap({route}) {
                 
                 {/* Body */}
                 <View style={styles.container}>
-                    <BackgroundImage source={require('../assets/images/rdash.png')} resizeMode="contain" style={styles.backgroundImage}>
 
                         <View style={styles.top_lap}>
-                            <TouchableOpacity style={styles.LapBrowserButton} >
+                            <TouchableOpacity style={[styles.LapBrowserButton, currentLapIndex === 0 ? styles.disabled : null]} onPress={goToPreviousLap}>
                                 <View>
                                     <Text style={styles.button_text} >Previous lap</Text>
                                 </View>
                             </TouchableOpacity>
 
-                            <Text style={styles.text_title}>Lap {currentLap.getNumber()} </Text>
+                            <Text style={styles.text_title}>Lap {currentLap?.getNumber()} </Text>
 
-                            <TouchableOpacity style={styles.LapBrowserButton}>
+                            <TouchableOpacity style={[styles.LapBrowserButton, currentLapIndex === laps.length - 1 ? styles.disabled : null]} onPress={goToNextLap}>
                                 <View>
                                     <Text style={styles.button_text} >Next lap</Text>
                                 </View>
@@ -62,55 +81,64 @@ export default function Lap({route}) {
 
                         </View>
 
-                        <View style={styles.container}>
+                        <View style={styles.containerBody}>
                             <MapView
                                 style={styles.map}
+                                mapType="satellite"
                                 region={{
-                                    latitude: 46.863415273862,
+                                    latitude:  currentLap.getLocationLat(),
-                                    longitude: 3.161789595537,
+                                    longitude: currentLap.getLocationLong(),
                                     latitudeDelta: 0.001,
-                                    longitudeDelta: 0.01,
+                                    longitudeDelta: 0.015,
                                 }}
                             >
-                                <Marker
+                                <Polyline
-                                    coordinate={{
+                                    coordinates={points}
-                                        latitude: 46.863415273862,
+                                    strokeColor="#000" // set the color of the line
-                                        longitude: 3.161789595537
+                                    strokeWidth={3} // set the width of the line
-                                    }}
-                                    title="Marker Title"
-                                    description="Marker Description"
-                                />
-                                <Marker
-                                    coordinate={{
-                                        latitude: 46.861927477535,
-                                        longitude: 3.160353322067
-                                    }}
-                                    title="Marker Title"
-                                    description="Marker Description"
                                     />
-                                <Marker
+                                {/* <Marker
                                     coordinate={{
-                                        latitude: 46.859745172448,
+                                        latitude: 45.76013484856403,
-                                        longitude: 3.164897426081
+                                        longitude: 3.112214188782891,
                                     }}
-                                    title="Marker Title"
+                                    onPress={() => console.log('pressed')}
-                                    description="Marker Description"
+                                /> */}
-                                />
+
                             </MapView>
+                            <BackgroundImage source={require('../assets/images/rdash.png')} resizeMode="contain" >   
+                                <View style={styles.container2}>
 
-                            <Text style={styles.textStyle} >Time: 1 30,62 seconds</Text>
+                                <Text style={styles.header}>Lap Information</Text>
                                 
                                 <View style={styles.infoContainer}>
-                                <Text style={styles.textStyle} >Average Speed: {"\n"} 102 km/h</Text>
+                                    <Text style={styles.infoItem}>Lap Time:</Text>
-                                <Text style={styles.textStyle} >G: {"\n"} 0.001 G</Text>
+                                    <Text style={styles.infoValue}>{currentLap.getFormattedTime()}</Text>
+                                </View>
 
+                                <View style={styles.infoContainer}>
+                                    <Text style={styles.infoItem}>Average Speed:</Text>
+                                    <Text style={styles.infoValue}>{currentLap.getAverageSpeed()} km/h</Text>
+                                </View>
 
+                                <View style={styles.infoContainer}>
+                                    <Text style={styles.infoItem}>Max Speed:</Text>
+                                    <Text style={styles.infoValue}>{} km/h</Text>
                                 </View>
-                            <Text style={styles.textStyle} ></Text>
                                 
+                                <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>
                         </View>
+                </View>
 
             </View>
         </SafeAreaView>
@@ -135,19 +163,53 @@ const styles = StyleSheet.create({
         shadowOpacity: 0.5,
         shadowRadius: 5,
     },
-    infoContainer: {
+    containerBody:{
-        margin: 3,
         flex: 1,
+        justifyContent: 'space-between',
+        alignItems: 'stretch',
+    },
+    container2: {
+        backgroundColor: 'rgba(255, 255, 255, 0.9)',
+        borderColor:'black',
+        borderWidth:2,
+        padding: 10,
+        borderRadius: 10,
+        marginBottom: 20,
+        shadowColor: '#000',
+        shadowOffset: {
+            width: 0,
+            height: 2,
+            },
+        shadowOpacity: 0.25,
+        shadowRadius: 3.84,
+        elevation: 5,
+    },
+    header: {
+        fontSize: 24,
+        fontWeight: 'bold',
+        marginBottom: 10,
+    },
+    infoContainer: {
         flexDirection: 'row',
-        justifyContent: 'space-around',
+        justifyContent: 'space-between',
+        marginBottom: 5,
+    },
+    infoItem: {
+        fontSize: 18,
+        fontWeight: 'bold',
+    },
+    infoValue: {
+        fontSize: 18,
     },
+    
     map: {
-        height: "40%",
+        flex:1,
     },
     top_lap: {
         height: "8%",
         flexDirection: 'row',
-        justifyContent: 'space-between'
+        justifyContent: 'space-between',
+        margin:10,
     },
     backgroundImage: {
         flex: 1,
@@ -211,20 +273,11 @@ const styles = StyleSheet.create({
         flex: 1,
         alignItems: 'flex-end',
     },
-    textStyle: {
-        margin: 3,
-        fontSize: 20,
-        backgroundColor: '#BF181D',
-        color: 'white',
-        padding: "2%",
-        borderRadius: 5,
     
-    },
     text_title: {
         fontWeight: 'bold',
         fontSize: 30,
         textAlign: 'center',
-        padding: 10,
         textShadowColor: '#fff',
         textShadowOffset: { width: 0, height: 0 },
         textShadowRadius: 10,