|
|
|
@ -1,7 +1,7 @@
|
|
|
|
|
import { BackgroundImage } from '@rneui/base';
|
|
|
|
|
import { StyleSheet, Text, View, TouchableOpacity, ScrollView } from 'react-native';
|
|
|
|
|
import { SafeAreaView } from 'react-native-safe-area-context';
|
|
|
|
|
import MapView, { Marker } from 'react-native-maps';
|
|
|
|
|
import MapView, { MapCallout, Marker } from 'react-native-maps';
|
|
|
|
|
import React from 'react';
|
|
|
|
|
import TopBar from '../components/TopBar';
|
|
|
|
|
import { Point } from '../core/Point';
|
|
|
|
@ -20,6 +20,7 @@ export default function Lap(props: { navigation: any, route : any}) {
|
|
|
|
|
const goToPreviousPoint = () => {
|
|
|
|
|
if (currentPointIndex > 0) {
|
|
|
|
|
setCurrentPointIndex(currentPointIndex - 1);
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
@ -29,11 +30,24 @@ export default function Lap(props: { navigation: any, route : any}) {
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const markers: { id: number; name: string; coordinate: { latitude: number; longitude: number } }[] = points.map((pt, index) => {
|
|
|
|
|
const markers: { id: number; name: string; coordinate: { latitude: number; longitude: number }, image: HTMLImageElement }[] = points.map((pt, index) => {
|
|
|
|
|
var img;
|
|
|
|
|
const brake = pt.getPBreakF();
|
|
|
|
|
if(brake <= 0)
|
|
|
|
|
{
|
|
|
|
|
img = require("../assets/images/noBrake.png");
|
|
|
|
|
}else if(brake > 0 && brake <= 30){
|
|
|
|
|
img = require("../assets/images/startBrake.png");
|
|
|
|
|
}else if(brake > 0 && brake <= 100){
|
|
|
|
|
img = require("../assets/images/midBrake.png");
|
|
|
|
|
}else{
|
|
|
|
|
img = require("../assets/images/fullBrake.png");
|
|
|
|
|
}
|
|
|
|
|
return {
|
|
|
|
|
id: index,
|
|
|
|
|
name: pt.getDistance() + 'm',
|
|
|
|
|
coordinate: { latitude: pt.getGeo().getGpsLat(), longitude: pt.getGeo().getGpsLong() },
|
|
|
|
|
image: img,
|
|
|
|
|
};
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
@ -63,7 +77,7 @@ export default function Lap(props: { navigation: any, route : any}) {
|
|
|
|
|
</View>
|
|
|
|
|
</TouchableOpacity>
|
|
|
|
|
|
|
|
|
|
<Text style={styles.text_title}>Point {currentPointIndex + 1 } / { points.length } </Text>
|
|
|
|
|
<Text style={styles.text_title}>Point {currentPointIndex + 1 } </Text>
|
|
|
|
|
|
|
|
|
|
<TouchableOpacity style={[styles.LapBrowserButton, currentPointIndex === points.length - 1 ? styles.disabled : null]} onPress={goToNextPoint}>
|
|
|
|
|
<View>
|
|
|
|
@ -84,8 +98,8 @@ export default function Lap(props: { navigation: any, route : any}) {
|
|
|
|
|
longitudeDelta: 0.015,
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
{markers.map(({ id, name, coordinate }) => (
|
|
|
|
|
<Marker key={id} title={name} coordinate={coordinate} onPress={() => handleMarker(id)} />
|
|
|
|
|
{markers.map(({ id, name, coordinate,image }) => (
|
|
|
|
|
<Marker key={id} title={name} coordinate={coordinate} onPress={() => handleMarker(id)} icon={image} style={{ width: 1, height: 1 }} />
|
|
|
|
|
))}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@ -116,7 +130,7 @@ export default function Lap(props: { navigation: any, route : any}) {
|
|
|
|
|
|
|
|
|
|
<View style={styles.infoContainer}>
|
|
|
|
|
<Text style={styles.infoItem}>nGear:</Text>
|
|
|
|
|
<Text style={styles.infoValue}>{currentPoint.getVCar()} gear</Text>
|
|
|
|
|
<Text style={styles.infoValue}>{currentPoint.getNGear()} gear</Text>
|
|
|
|
|
</View>
|
|
|
|
|
|
|
|
|
|
<View style={styles.infoContainer}>
|
|
|
|
@ -137,7 +151,7 @@ export default function Lap(props: { navigation: any, route : any}) {
|
|
|
|
|
</View>
|
|
|
|
|
<View style={styles.infoContainer}>
|
|
|
|
|
<Text style={styles.infoItem}>gLat:</Text>
|
|
|
|
|
<Text style={styles.infoValue}>{currentPoint.getGLong()} g</Text>
|
|
|
|
|
<Text style={styles.infoValue}>{currentPoint.getGLat()} g</Text>
|
|
|
|
|
</View>
|
|
|
|
|
</View>
|
|
|
|
|
</BackgroundImage>
|
|
|
|
|