R-Dash
/
R-Dash_Application
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
Backend/Page/Lap
mohamed 2 years ago
parent aafed73b1b
commit 2f91957532
4 changed files with 147 additions and 58 deletions
Show Stats Download Patch File Download Diff File

4
R-Dash/components/SessionCmp.tsx
Unescape View File

@ -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)}>

33
R-Dash/core/Lap.ts
Unescape View File

@ -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;
}
}

1
R-Dash/core/Point.ts
Unescape View File

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

163
R-Dash/screens/Lap.tsx
Unescape View File

@ -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,54 +81,63 @@ export default function Lap({route}) {
</View>
<View style={styles.container}>
<View style={styles.containerBody}>
<MapView
style={styles.map}
mapType="satellite"
region={{
latitude: 46.863415273862,
longitude: 3.161789595537,
latitude: currentLap.getLocationLat(),
longitude: currentLap.getLocationLong(),
latitudeDelta: 0.001,
longitudeDelta: 0.01,
longitudeDelta: 0.015,
}}
>
<Marker
<Polyline
coordinates={points}
strokeColor="#000" // set the color of the line
strokeWidth={3} // set the width of the line
/>
{/* <Marker
coordinate={{
latitude: 46.863415273862,
longitude: 3.161789595537
latitude: 45.76013484856403,
longitude: 3.112214188782891,
}}
title="Marker Title"
description="Marker Description"
/>
<Marker
coordinate={{
latitude: 46.861927477535,
longitude: 3.160353322067
}}
title="Marker Title"
description="Marker Description"
/>
<Marker
coordinate={{
latitude: 46.859745172448,
longitude: 3.164897426081
}}
title="Marker Title"
description="Marker Description"
/>
onPress={() => console.log('pressed')}
/> */}
</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.textStyle} >G: {"\n"} 0.001 G</Text>
<View style={styles.infoContainer}>
<Text style={styles.infoItem}>Lap Time:</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>
<Text style={styles.textStyle} ></Text>
<View style={styles.infoContainer}>
<Text style={styles.infoItem}>Max Speed:</Text>
<Text style={styles.infoValue}>{} 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>
</View>
</BackgroundImage>
</View>
</View>
@ -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,

Write Preview
Loading…
Cancel
Save