73 lines
2.5 KiB
JavaScript
73 lines
2.5 KiB
JavaScript
import React, { useRef, useState } from 'react';
|
|
import { StyleSheet, Animated } from 'react-native';
|
|
import { Button, Content, Text, View } from 'native-base';
|
|
import { LinearGradient } from 'expo-linear-gradient';
|
|
import IconCard from './IconCard';
|
|
import Graph from './Graph';
|
|
import { connect } from 'react-redux';
|
|
import backgroundColors from './Themes';
|
|
import { useKeepAwake } from 'expo-keep-awake';
|
|
import { stopSession } from '../state/DeviceReduxCoupling';
|
|
import CycleView from './CycleView';
|
|
|
|
|
|
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 * props.kgFactor / 10 / 60);
|
|
|
|
useKeepAwake();
|
|
|
|
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 }}>
|
|
|
|
<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="00:42" iconName="clock" iconType="FontAwesome5" />
|
|
<IconCard label="AKTIVE DAUER" value="42:00" iconName="stopwatch" iconType="FontAwesome5" />
|
|
</CycleView>
|
|
<IconCard label="KRAFT" value={totalMomentum} iconName="ruler" iconType="Entypo" />
|
|
|
|
<Graph></Graph>
|
|
<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',
|
|
}
|
|
});
|
|
|
|
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)(LiveTrainingView);
|