From 2f91957532916776d88cc72d3a1bf13c0eb88f0f Mon Sep 17 00:00:00 2001 From: mohamed Date: Wed, 22 Mar 2023 22:02:32 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=91=8C=20screen=20Lap=20pr=C3=AAte=20pour?= =?UTF-8?q?=20recevoir=20des=20donn=C3=A9es.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- R-Dash/components/SessionCmp.tsx | 4 +- R-Dash/core/Lap.ts | 33 ++++++ R-Dash/core/Point.ts | 1 + R-Dash/screens/Lap.tsx | 167 ++++++++++++++++++++----------- 4 files changed, 147 insertions(+), 58 deletions(-) diff --git a/R-Dash/components/SessionCmp.tsx b/R-Dash/components/SessionCmp.tsx index 2f23f6f..f8d8b98 100644 --- a/R-Dash/components/SessionCmp.tsx +++ b/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 ( props.onPress(props.session)}> diff --git a/R-Dash/core/Lap.ts b/R-Dash/core/Lap.ts index c262912..3bdb122 100644 --- a/R-Dash/core/Lap.ts +++ b/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; + } } \ No newline at end of file diff --git a/R-Dash/core/Point.ts b/R-Dash/core/Point.ts index 85bfde5..1e24526 100644 --- a/R-Dash/core/Point.ts +++ b/R-Dash/core/Point.ts @@ -24,6 +24,7 @@ export class Point { this.gLat = gLat; this.vCar = vCar; } + getGeo() { return this.geo; } diff --git a/R-Dash/screens/Lap.tsx b/R-Dash/screens/Lap.tsx index 5bd12aa..50728b8 100644 --- a/R-Dash/screens/Lap.tsx +++ b/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 ( @@ -22,7 +42,7 @@ export default function Lap({route}) { {/* Header */} - + @@ -33,7 +53,7 @@ export default function Lap({route}) { - + @@ -43,18 +63,17 @@ export default function Lap({route}) { {/* Body */} - - + Previous lap - Lap {currentLap.getNumber()} + Lap {currentLap?.getNumber()} - + Next lap @@ -62,54 +81,63 @@ export default function Lap({route}) { - + - - - + {/* - + onPress={() => console.log('pressed')} + /> */} - Time: 1 30,62 seconds + + + - - Average Speed: {"\n"} 102 km/h - G: {"\n"} 0.001 G + Lap Information + + + Lap Time: + {currentLap.getFormattedTime()} + + + Average Speed: + {currentLap.getAverageSpeed()} km/h + - - + + Max Speed: + {} km/h + + + + X: + {} X + + + X: + {} X + + + - @@ -135,19 +163,53 @@ const styles = StyleSheet.create({ shadowOpacity: 0.5, shadowRadius: 5, }, - infoContainer: { - margin: 3, + 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-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,