From 72056b172b7795063857719528b885b5e0630a18 Mon Sep 17 00:00:00 2001
From: mohamed <zinn1@DESKTOP-ASBQTB7>
Date: Thu, 23 Mar 2023 00:03:33 +0100
Subject: [PATCH] =?UTF-8?q?=20=F0=9F=A4=93=20Nouvelle=20screen=20(point=5F?=
 =?UTF-8?q?viewer)=20cr=C3=A9e=20et=20presque=20fini?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 R-Dash/core/Point.ts            |  11 ++
 R-Dash/navigation/MainStack.tsx |   2 +
 R-Dash/screens/Lap.tsx          | 128 ++++-------------
 R-Dash/screens/Point_Viewer.tsx | 237 ++++++++++++++++++++++++++++++++
 4 files changed, 280 insertions(+), 98 deletions(-)
 create mode 100644 R-Dash/screens/Point_Viewer.tsx

diff --git a/R-Dash/core/Point.ts b/R-Dash/core/Point.ts
index 1e24526..e82ae38 100644
--- a/R-Dash/core/Point.ts
+++ b/R-Dash/core/Point.ts
@@ -41,6 +41,17 @@ export class Point {
         return this.timer;
     }
 
+    getFormattedTime(){
+        const timeInSeconds = this.timer;
+        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;
+    }
+
     getDistance() {
         return this.distance;
     }
diff --git a/R-Dash/navigation/MainStack.tsx b/R-Dash/navigation/MainStack.tsx
index 8e24100..f106386 100644
--- a/R-Dash/navigation/MainStack.tsx
+++ b/R-Dash/navigation/MainStack.tsx
@@ -1,6 +1,7 @@
 import { createStackNavigator } from "@react-navigation/stack";
 import Lap from "../screens/Lap";
 import NewTrack from "../screens/NewTrack";
+import Point_Viewer from "../screens/Point_Viewer";
 import Session_browser from "../screens/Session_browser";
 import SettingsStack from "./SettingsStack";
 
@@ -11,6 +12,7 @@ export default function MainStack() {
             <Stack.Screen name="Home" component={Session_browser} />
             <Stack.Screen name="Add" component={NewTrack} />
             <Stack.Screen name="Lap" component={Lap} />
+            <Stack.Screen name="PointInfo" component={Point_Viewer} />
             <Stack.Screen name="Settings" component={SettingsStack} />
         </Stack.Navigator>
     )
diff --git a/R-Dash/screens/Lap.tsx b/R-Dash/screens/Lap.tsx
index 50728b8..ed3d52f 100644
--- a/R-Dash/screens/Lap.tsx
+++ b/R-Dash/screens/Lap.tsx
@@ -1,14 +1,14 @@
 import { BackgroundImage } from '@rneui/base';
-import { FlatList, StyleSheet, Text, View, Image, TouchableOpacity } from 'react-native';
+import { StyleSheet, Text, View, TouchableOpacity, ScrollView } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
-import MapView, { Circle, Polygon, Polyline } from 'react-native-maps';
-import PROVIDER_OPENSTREETMAP, { Marker } from 'react-native-maps';
+import MapView, { Point, Polyline } from 'react-native-maps';
 import React from 'react';
-import { Session } from '../core/Session';
 import { Lap as LapModel}   from '../core/Lap';
+import TopBar from '../components/TopBar';
 
-export default function Lap({route}) {
-    const { session } = route.params;
+export default function Lap(props: { navigation: any, route }) {
+    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());
@@ -40,26 +40,7 @@ export default function Lap({route}) {
         <SafeAreaView style={styles.container}>
             <View style={styles.container}>
                 {/* Header */}
-                <View style={styles.topbar}>
-                    <View>
-                        <TouchableOpacity style={styles.accountContainerButton}  disabled={currentLapIndex === 0}>
-                            <View style={styles.ImageContainer}>
-                                <Image source={require('../assets/images/pfp.png')} style={styles.accountImage} />
-                            </View>
-                            <Text style={styles.accountName}>Mr X</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} disabled={currentLapIndex === laps.length - 1}>
-                            <View style={styles.ImageContainer}>
-                                <Image source={require('../assets/images/rdash.png')} style={styles.accountImage} />
-                            </View>
-                        </TouchableOpacity>
-                    </View>
-                </View>
+                <TopBar navigation={navigation} />
                 
                 {/* Body */}
                 <View style={styles.container}>
@@ -71,7 +52,7 @@ export default function Lap({route}) {
                                 </View>
                             </TouchableOpacity>
 
-                            <Text style={styles.text_title}>Lap {currentLap?.getNumber()} </Text>
+                            <Text style={styles.text_title}>Lap {currentLap?.getNumber()} / { laps.length}</Text>
 
                             <TouchableOpacity style={[styles.LapBrowserButton, currentLapIndex === laps.length - 1 ? styles.disabled : null]} onPress={goToNextLap}>
                                 <View>
@@ -82,6 +63,14 @@ export default function Lap({route}) {
                         </View>
 
                         <View style={styles.containerBody}>
+                            <TouchableOpacity
+                                style={styles.addContainerButton}
+                                onPress={() => navigation.navigate("PointInfo",{"currentLap": currentLap})}
+                                >
+                                <View>
+                                    <Text style={styles.button_text}>Point Viewer Mode</Text>
+                                </View>
+                            </TouchableOpacity>
                             <MapView
                                 style={styles.map}
                                 mapType="satellite"
@@ -106,7 +95,7 @@ export default function Lap({route}) {
                                 /> */}
 
                             </MapView>
-                            <BackgroundImage source={require('../assets/images/rdash.png')} resizeMode="contain" >   
+                            <BackgroundImage source={require('../assets/images/rdash.png')} resizeMode="contain" >
                                 <View style={styles.container2}>
 
                                 <Text style={styles.header}>Lap Information</Text>
@@ -150,19 +139,18 @@ export default function Lap({route}) {
 //borderWidth:3,
 
 const styles = StyleSheet.create({
-    card: {
-        flexDirection: 'column',
-        height: "80%",
-        width: "80%",
-        backgroundColor: "#fff",
-        borderRadius: 15,
-        padding: 10,
-        elevation: 10,
-        shadowColor: '#000',
-        shadowOffset: { width: 0, height: 3 },
-        shadowOpacity: 0.5,
-        shadowRadius: 5,
-    },
+    disabled: {
+        opacity: 0.5,
+        },
+    addContainerButton: {
+        margin:5,
+        alignItems: "center",
+        justifyContent: "center",
+        height: "8%",
+        borderRadius: 10,
+        elevation: 3,
+        backgroundColor: "#BF181F",
+      },
     containerBody:{
         flex: 1,
         justifyContent: 'space-between',
@@ -201,7 +189,6 @@ const styles = StyleSheet.create({
     infoValue: {
         fontSize: 18,
     },
-    
     map: {
         flex:1,
     },
@@ -209,27 +196,14 @@ const styles = StyleSheet.create({
         height: "8%",
         flexDirection: 'row',
         justifyContent: 'space-between',
-        margin:10,
     },
     backgroundImage: {
         flex: 1,
         width: '100%',
     },
-
     container: {
         flex: 1,
     },
-
-    accountSettings: {
-        width: '100%',
-        height: '100%',
-    },
-
-    accountContainerButton: {
-        flexDirection: 'row',
-        alignItems: 'center',
-    },
-
     LapBrowserButton: {
         width: "30%",
         margin: 5,
@@ -243,51 +217,9 @@ const styles = StyleSheet.create({
         color: '#fff',
         fontSize: 20,
     },
-
-    ImageContainer: {
-        backgroundColor: '#fff',
-        borderRadius: 50,
-        width: 40,
-        height: 40,
-        overflow: 'hidden',
-        marginRight: 10,
-
-    },
-    accountImage: {
-        width: '100%',
-        height: '100%',
-    },
-    topbar: {
-        backgroundColor: '#BF181D',
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        paddingHorizontal: 20,
-        height: "8%",
-    },
-    accountName: {
-        color: '#fff',
-        fontSize: 20,
-    },
-    topbarRight: {
-        flex: 1,
-        alignItems: 'flex-end',
-    },
-    
     text_title: {
-        fontWeight: 'bold',
         fontSize: 30,
         textAlign: 'center',
-        textShadowColor: '#fff',
-        textShadowOffset: { width: 0, height: 0 },
-        textShadowRadius: 10,
-    },
-    iconContainer: {
-        position: 'absolute',
-        bottom: 0,
-        right: 0,
-        backgroundColor: 'transparent',
-        width: 24,
-        height: 24,
     },
+
 });
\ No newline at end of file
diff --git a/R-Dash/screens/Point_Viewer.tsx b/R-Dash/screens/Point_Viewer.tsx
new file mode 100644
index 0000000..8817758
--- /dev/null
+++ b/R-Dash/screens/Point_Viewer.tsx
@@ -0,0 +1,237 @@
+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 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 }) {
+    const { currentLap } = props.route.params;
+    const { navigation } = props;
+
+    const points: Point[] =  currentLap.getPoints();
+    points.sort((pt1, pt2) => pt1.getTimer() - pt2.getTimer());
+
+
+    const [currentPointIndex, setCurrentPointIndex] = React.useState(0);
+    const currentPoint: Point | undefined = points[currentPointIndex];
+
+    const goToPreviousPoint = () => {
+        if (currentPointIndex > 0) {
+            setCurrentPointIndex(currentPointIndex - 1);
+        }
+    };
+
+    const goToNextPoint = () => {
+        if (currentPointIndex < points.length - 1) {
+            setCurrentPointIndex(currentPointIndex + 1);
+        }
+    };
+
+    // 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}>
+            <View style={styles.container}>
+                {/* Header */}
+                <TopBar navigation={navigation} />
+                
+                {/* Body */}
+                <View style={styles.container}>
+
+                        <View style={styles.top_lap}>
+                            <TouchableOpacity style={[styles.LapBrowserButton, currentPointIndex === 0 ? styles.disabled : null]} onPress={goToPreviousPoint}>
+                                <View>
+                                    <Text style={styles.button_text} >Previous Point</Text>
+                                </View>
+                            </TouchableOpacity>
+
+                            <Text style={styles.text_title}>Point {currentPointIndex + 1 } / { points.length } </Text>
+
+                            <TouchableOpacity style={[styles.LapBrowserButton, currentPointIndex === points.length - 1 ? styles.disabled : null]} onPress={goToNextPoint}>
+                                <View>
+                                    <Text style={styles.button_text} >Next Point</Text>
+                                </View>
+                            </TouchableOpacity>
+
+                        </View>
+
+                        <View style={styles.containerBody}>
+                            <MapView
+                                style={styles.map}
+                                mapType="satellite"
+                                region={{
+                                    latitude:  currentLap.getLocationLat(),
+                                    longitude: currentLap.getLocationLong(),
+                                    latitudeDelta: 0.001,
+                                    longitudeDelta: 0.015,
+                                }}
+                            >
+                                {/* <Marker
+                                    coordinate={{
+                                        latitude: 45.76013484856403,
+                                        longitude: 3.112214188782891,
+                                    }}
+                                    onPress={() => console.log('pressed')}
+                                /> */}
+
+                            </MapView>
+                            <ScrollView style={ styles.scrollView}>
+                            <BackgroundImage source={require('../assets/images/rdash.png')} resizeMode="contain" >   
+                                
+                                <View style={styles.container2}>
+
+                                    <Text style={styles.header}>Point { currentPointIndex + 1} / { points.length} of Lap {currentLap.getNumber()}</Text>
+                                    
+                                    <View style={styles.infoContainer}>
+                                        <Text style={styles.infoItem}>Time:</Text>
+                                        <Text style={styles.infoValue}>{currentPoint.getFormattedTime()}</Text>
+                                    </View>
+                                    
+                                    <View style={styles.infoContainer}>
+                                        <Text style={styles.infoItem}>Distance:</Text>
+                                        <Text style={styles.infoValue}>{currentPoint.getDistance()} m</Text>
+                                    </View>
+
+                                    <View style={styles.infoContainer}>
+                                        <Text style={styles.infoItem}>Speed (vCar):</Text>
+                                        <Text style={styles.infoValue}>{currentPoint.getVCar()} km/h</Text>
+                                    </View>
+
+                                    
+                                    
+                                    <View style={styles.infoContainer}>
+                                        <Text style={styles.infoItem}>nGear:</Text>
+                                        <Text style={styles.infoValue}>{currentPoint.getVCar()} gear</Text>
+                                    </View>
+
+                                    <View style={styles.infoContainer}>
+                                        <Text style={styles.infoItem}>pBreakF:</Text>
+                                        <Text style={styles.infoValue}>{currentPoint.getPBreakF()} bar</Text>
+                                    </View>
+                                    <View style={styles.infoContainer}>
+                                        <Text style={styles.infoItem}>aSteer:</Text>
+                                        <Text style={styles.infoValue}>{currentPoint.getASteer()} deg</Text>
+                                    </View>
+                                    <View style={styles.infoContainer}>
+                                        <Text style={styles.infoItem}>rPedal:</Text>
+                                        <Text style={styles.infoValue}>{currentPoint.getRPedal()} %</Text>
+                                    </View>
+                                    <View style={styles.infoContainer}>
+                                        <Text style={styles.infoItem}>gLong:</Text>
+                                        <Text style={styles.infoValue}>{currentPoint.getGLong()} g</Text>
+                                    </View>
+                                    <View style={styles.infoContainer}>
+                                        <Text style={styles.infoItem}>gLat:</Text>
+                                        <Text style={styles.infoValue}>{currentPoint.getGLong()} g</Text>
+                                    </View>
+                                </View>
+                            </BackgroundImage>
+                            </ScrollView>
+                        </View>
+                </View>
+
+            </View>
+        </SafeAreaView>
+    );
+}
+
+// TROUBLE SHOOTING BORDER :
+//borderColor:'red',
+//borderWidth:3,
+
+const styles = StyleSheet.create({
+    scrollView: {
+        flex:1,
+    },
+    disabled: {
+        opacity: 0.5,
+        },
+    addContainerButton: {
+        margin:5,
+        alignItems: "center",
+        justifyContent: "center",
+        height: "8%",
+        borderRadius: 10,
+        elevation: 3,
+        backgroundColor: "#BF181F",
+      },
+    containerBody:{
+        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-between',
+        marginBottom: 5,
+    },
+    infoItem: {
+        fontSize: 18,
+        fontWeight: 'bold',
+    },
+    infoValue: {
+        fontSize: 18,
+    },
+    map: {
+        flex:1,
+    },
+    top_lap: {
+        height: "8%",
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+    },
+    backgroundImage: {
+        flex: 1,
+        width: '100%',
+    },
+    container: {
+        flex: 1,
+    },
+    LapBrowserButton: {
+        width: "30%",
+        marginTop:5,
+        marginBottom:5,
+        alignContent: 'center',
+        justifyContent: 'center',
+        borderRadius: 10,
+        backgroundColor: '#BF181F',
+    },
+    button_text: {
+        textAlign: 'center',
+        color: '#fff',
+        fontSize: 20,
+    },
+    text_title: {
+        fontSize: 30,
+        textAlign: 'center',
+    },
+
+});
\ No newline at end of file