76 lines
2.5 KiB
JavaScript
76 lines
2.5 KiB
JavaScript
import React from 'react';
|
|
import { StyleSheet } from 'react-native';
|
|
import { Button, Content, Text } from 'native-base';
|
|
import { LinearGradient } from 'expo-linear-gradient';
|
|
import IconCard from './IconCard';
|
|
import Graph from './Graph';
|
|
import { connect } from 'react-redux';
|
|
import { stopSession } from '../state/ActionCreators';
|
|
import backgroundColors from './Themes';
|
|
|
|
|
|
function LiveTrainingView(props)
|
|
{
|
|
const analysis = props.session.analysis;
|
|
const onStopClick = () => {
|
|
props.dispatch(stopSession());
|
|
props.navigation.navigate('Home');
|
|
};
|
|
const laps = (analysis.peaks.size / props.peaksPerLap).toFixed(1);
|
|
const totalMomentum = Math.trunc(analysis.totalMomentum / 10000);
|
|
|
|
return (
|
|
<LinearGradient
|
|
colors={backgroundColors[props.theme]}
|
|
start={[0, 0]}
|
|
end={[0.5, 1]}
|
|
style={{ flex: 1 }}
|
|
>
|
|
<Content padder contentContainerStyle={{ justifyContent: 'space-around', flex: 1, paddingTop: 60 }}>
|
|
<IconCard label="BAHNEN" value={laps} iconName="retweet" iconType="AntDesign" />
|
|
<IconCard label="ZÜGE" value={analysis.peaks.size} iconName="dashboard" iconType="AntDesign" />
|
|
<IconCard label="KRAFT" value={totalMomentum} iconName="ruler" iconType="Entypo" />
|
|
{/*
|
|
<IconCard label="ZÜGE" value={this.state.numPeaks} iconName="dashboard" iconType="AntDesign" />
|
|
<IconCard label="BAHNEN" value={this.state.numLaps} iconName="retweet" iconType="AntDesign" />
|
|
|
|
<IconCard label="KRAFT" value="120" iconName="ruler" iconType="Entypo" />
|
|
*/}
|
|
<Button block secondary onPress={onStopClick}><Text>Stop</Text></Button>
|
|
</Content>
|
|
</LinearGradient>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
card: {
|
|
flexDirection: 'row',
|
|
backgroundColor: 'rgba(0, 0, 0, 0.2)',
|
|
margin: 5,
|
|
padding: 5,
|
|
borderRadius: 3,
|
|
justifyContent: 'space-between',
|
|
/*
|
|
shadowColor: "#000",
|
|
shadowOffset: {
|
|
width: 0,
|
|
height: 1,
|
|
},
|
|
shadowOpacity: 0.18,
|
|
shadowRadius: 1.00,
|
|
|
|
elevation: 1,*/
|
|
}
|
|
});
|
|
|
|
const mapStateToProps = (state) => {
|
|
return {
|
|
session: state.session,
|
|
peaksPerLap: state.settings.peaksPerLap,
|
|
theme: state.settings.theme,
|
|
};
|
|
};
|
|
|
|
export default connect(mapStateToProps)(LiveTrainingView);
|
|
|