116 lines
3.6 KiB
JavaScript
116 lines
3.6 KiB
JavaScript
import React from 'react';
|
|
import {View, StyleSheet} from 'react-native';
|
|
import { AppLoading } from 'expo';
|
|
import { Container, Text, Header, Content, Left, Body, Right, Button, Icon, Title, Card, CardItem } from 'native-base';
|
|
import * as Font from 'expo-font';
|
|
import { Ionicons } from '@expo/vector-icons';
|
|
import { LinearGradient } from 'expo-linear-gradient';
|
|
import IconCard from './components/IconCard';
|
|
/*import Graph from './components/Graph';*/
|
|
import DeviceHttpDataSource from './components/DeviceHttpDataSource';
|
|
|
|
|
|
export default class App extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
isReady: false,
|
|
themeNumber: 0,
|
|
};
|
|
}
|
|
|
|
async componentDidMount() {
|
|
await Font.loadAsync({
|
|
Roboto: require('native-base/Fonts/Roboto.ttf'),
|
|
Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'),
|
|
...Ionicons.font,
|
|
});
|
|
this.setState({ isReady: true });
|
|
}
|
|
|
|
handleThemeChange = () => {
|
|
this.setState( (state, props) => {return {themeNumber: ((state.themeNumber + 1) % themeArray.length) }})
|
|
};
|
|
|
|
render() {
|
|
if (!this.state.isReady) {
|
|
return <AppLoading />;
|
|
}
|
|
|
|
const handleNewData = data => {
|
|
console.log("new data callback", data);
|
|
};
|
|
|
|
return (
|
|
<Container>
|
|
<DeviceHttpDataSource deviceUrl="http://smartswim" onNewData={handleNewData}></DeviceHttpDataSource>
|
|
<LinearGradient
|
|
colors={backgroundColors[themeArray[this.state.themeNumber]]}
|
|
start={[0, 0]}
|
|
end={[0.5, 1]}
|
|
style={{flex: 1}}
|
|
>
|
|
<Header transparent>
|
|
<Body>
|
|
<Title style={{color: 'white'}}>TRAINING LÄUFT</Title>
|
|
</Body>
|
|
<Right>
|
|
<Button transparent>
|
|
<Text style={{color: 'white'}}>STOP</Text>
|
|
</Button>
|
|
|
|
<Button transparent onPress={this.handleThemeChange.bind(this)}>
|
|
<Icon style={{color: 'white'}} name="paint-brush" type="FontAwesome5"/>
|
|
</Button>
|
|
|
|
</Right>
|
|
</Header>
|
|
|
|
<Content padder contentContainerStyle={{justifyContent: 'space-around', flex: 1}}>
|
|
<IconCard label="ZÜGE" value="1234" iconName="dashboard" iconType="AntDesign" />
|
|
<IconCard label="BAHNEN" value="42" iconName="retweet" iconType="AntDesign" />
|
|
<IconCard label="KRAFT" value="120" iconName="ruler" iconType="Entypo" />
|
|
<IconCard label="ZEIT" value="20:12" iconName="clock" iconType="Feather" fontSize={55} />
|
|
{/*<Graph></Graph> */}
|
|
</Content>
|
|
|
|
</LinearGradient>
|
|
|
|
|
|
</Container>
|
|
);
|
|
}
|
|
}
|
|
|
|
const backgroundColors = {
|
|
'hot': ['#830e5f', '#fd5139'],
|
|
'darkBlue': ['#4265a3', '#cfada7'],
|
|
'lightBlue': ['#50a4db', '#74bbe2'],
|
|
'foggy': ['#bc8db8', '#5d5e90'],
|
|
};
|
|
|
|
const themeArray = [
|
|
'hot', 'darkBlue', 'lightBlue', 'foggy'
|
|
];
|
|
|
|
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,*/
|
|
}
|
|
});
|