123 lines
3.5 KiB
JavaScript
123 lines
3.5 KiB
JavaScript
import React from "react";
|
|
import {
|
|
StyleSheet,
|
|
View,
|
|
StatusBar,
|
|
Text,
|
|
TouchableOpacity
|
|
} from "react-native";
|
|
import themeColors from '../components/themeColors';
|
|
import EntypoIcon from "react-native-vector-icons/Entypo";
|
|
|
|
import { connect } from 'react-redux';
|
|
import { useKeepAwake } from 'expo-keep-awake';
|
|
import { stopSession } from '../state/DeviceReduxCoupling';
|
|
import CycleView from '../components/CycleView';
|
|
import IconCard from '../components/IconCard';
|
|
import Graph from '../components/Graph';
|
|
import {toTimeStr} from '../utility/TimeUtils';
|
|
|
|
|
|
function SmallHeaderView(props) {
|
|
return (
|
|
<View style={smallHeaderStyles.container}>
|
|
<View style={smallHeaderStyles.row}>
|
|
<TouchableOpacity onPress={() => props.navigation.goBack()}>
|
|
<EntypoIcon name="chevron-left" style={smallHeaderStyles.backIcon}></EntypoIcon>
|
|
</TouchableOpacity>
|
|
<Text style={smallHeaderStyles.text}>{props.text}</Text>
|
|
<TouchableOpacity onPress={props.onStopPressed}>
|
|
<EntypoIcon name="controller-stop" style={smallHeaderStyles.stopIcon}></EntypoIcon>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View >
|
|
)
|
|
}
|
|
|
|
const smallHeaderStyles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
minHeight: 80,
|
|
maxHeight: 80,
|
|
height: 80,
|
|
width: "100%",
|
|
backgroundColor: themeColors["WET ASPHALT"],
|
|
},
|
|
row: {
|
|
paddingTop: 30,
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
},
|
|
backIcon: {
|
|
color: "white",
|
|
fontSize: 40,
|
|
},
|
|
stopIcon: {
|
|
color: themeColors["ALIZARIN"],
|
|
fontSize: 40,
|
|
paddingRight: 10,
|
|
paddingLeft: 10,
|
|
},
|
|
text: {
|
|
color: "white",
|
|
fontSize: 30,
|
|
},
|
|
});
|
|
|
|
// ---------------------------------------------------------------------------------------------
|
|
|
|
function TrainingView(props) {
|
|
useKeepAwake();
|
|
|
|
const analysis = props.session.analysis;
|
|
const laps = (analysis.peaks.size / props.peaksPerLap).toFixed(1);
|
|
const totalMomentum = Math.trunc(analysis.totalMomentum * props.kgFactor / 10 / 60);
|
|
|
|
const onStopPressed = () => {
|
|
props.dispatch(stopSession());
|
|
props.navigation.navigate('Home');
|
|
};
|
|
|
|
return (
|
|
<View style={{ flex: 1 }}>
|
|
<StatusBar hidden={true} />
|
|
<View style={{ flex: 1 }}>
|
|
<SmallHeaderView text="TRAINING" navigation={props.navigation} onStopPressed={onStopPressed} />
|
|
<View style={trainingViewStyles.container}>
|
|
<CycleView>
|
|
<IconCard label="BAHNEN" value={laps} iconName="retweet" iconType="AntDesign" />
|
|
<IconCard label="ZÜGE" value={analysis.peaks.size} iconName="dashboard" iconType="AntDesign" />
|
|
</CycleView>
|
|
|
|
<CycleView>
|
|
<IconCard label="DAUER" value={toTimeStr(analysis.totalTime)} iconName="clock" iconType="FontAwesome5" />
|
|
<IconCard label="AKTIVE DAUER" value={toTimeStr(analysis.activeTime)} iconName="stopwatch" iconType="FontAwesome5" />
|
|
</CycleView>
|
|
<IconCard label="KRAFT" value={totalMomentum} iconName="ruler" iconType="Entypo" />
|
|
|
|
<Graph></Graph>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const trainingViewStyles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: themeColors["BELIZE HOLE"],
|
|
padding: 20,
|
|
justifyContent: "space-around",
|
|
}
|
|
});
|
|
|
|
const mapStateToProps = (state) => {
|
|
return {
|
|
session: state.deviceState,
|
|
peaksPerLap: state.settings.analysis.peaksPerLap,
|
|
theme: state.settings.theme,
|
|
kgFactor: state.settings.analysis.kgFactor,
|
|
};
|
|
};
|
|
export default connect(mapStateToProps)(TrainingView);
|