martin
/
swimtracker-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Frontend stuff

This commit is contained in:
Martin Bauer 2020-05-16 12:36:05 +02:00
parent 648d26f69f
commit 2e0baca485
4 changed files with 766 additions and 923 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
App.js
View File

@ -6,7 +6,8 @@ import * as Font from 'expo-font';
import { Ionicons } from '@expo/vector-icons'; import { Ionicons } from '@expo/vector-icons';
import { LinearGradient } from 'expo-linear-gradient'; import { LinearGradient } from 'expo-linear-gradient';
import IconCard from './components/IconCard'; import IconCard from './components/IconCard';
import Graph from './components/Graph'; /*import Graph from './components/Graph';*/
import DeviceHttpDataSource from './components/DeviceHttpDataSource';
export default class App extends React.Component { export default class App extends React.Component {
@ -36,8 +37,13 @@ export default class App extends React.Component {
return <AppLoading />; return <AppLoading />;
} }
const handleNewData = data => {
console.log("new data callback", data);
};
return ( return (
<Container> <Container>
<DeviceHttpDataSource deviceUrl="http://smartswim" onNewData={handleNewData}></DeviceHttpDataSource>
<LinearGradient <LinearGradient
colors={backgroundColors[themeArray[this.state.themeNumber]]} colors={backgroundColors[themeArray[this.state.themeNumber]]}
start={[0, 0]} start={[0, 0]}
@ -63,9 +69,9 @@ export default class App extends React.Component {
<Content padder contentContainerStyle={{justifyContent: 'space-around', flex: 1}}> <Content padder contentContainerStyle={{justifyContent: 'space-around', flex: 1}}>
<IconCard label="ZÜGE" value="1234" iconName="dashboard" iconType="AntDesign" /> <IconCard label="ZÜGE" value="1234" iconName="dashboard" iconType="AntDesign" />
<IconCard label="BAHNEN" value="42" iconName="retweet" iconType="AntDesign" /> <IconCard label="BAHNEN" value="42" iconName="retweet" iconType="AntDesign" />
{/*<IconCard label="KRAFT" value="120" iconName="ruler" iconType="Entypo" /> <IconCard label="KRAFT" value="120" iconName="ruler" iconType="Entypo" />
<IconCard label="ZEIT" value="20:12" iconName="clock" iconType="Feather" fontSize={55} /> */} <IconCard label="ZEIT" value="20:12" iconName="clock" iconType="Feather" fontSize={55} />
<Graph></Graph> {/*<Graph></Graph> */}
</Content> </Content>
</LinearGradient> </LinearGradient>

16
components/IconCard.js
View File

@ -1,24 +1,24 @@
import React from 'react'; import React from 'react';
import {View, StyleSheet, Text} from 'react-native'; import { View, StyleSheet, Text } from 'react-native';
import {Icon} from "native-base"; import { Icon } from "native-base";
const IconCard = props => { const IconCard = props => {
return ( return (
<View style={styles.card}> <View style={styles.card}>
<View style={{alignItems: 'center', justifyContent: 'center', paddingLeft: 20}}> <View style={{ alignItems: 'center', justifyContent: 'center', paddingLeft: 20 }}>
<Icon style={{color: 'white', fontSize: 40}} name={props.iconName} type={props.iconType}/> <Icon style={{ color: 'white', fontSize: 40 }} name={props.iconName} type={props.iconType} />
<Text style={{color: 'white', marginTop: 5}}> {props.label}</Text> <Text style={{ color: 'white', marginTop: 5 }}> {props.label}</Text>
</View> </View>
<View style={{paddingRight: 20}}> <View style={{ paddingRight: 20 }}>
<Text style={{color: 'white', fontSize: props.fontSize}}> {props.value}</Text> <Text style={{ color: 'white', fontSize: props.fontSize }}> {props.value}</Text>
</View> </View>
</View> </View>
); );
}; };
const styles = StyleSheet.create({ const styles = StyleSheet.create({
card : { card: {
flexDirection: 'row', flexDirection: 'row',
backgroundColor: 'rgba(0, 0, 0, 0.2)', backgroundColor: 'rgba(0, 0, 0, 0.2)',
margin: 5, margin: 5,

1645
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

10
package.json
View File

@ -10,12 +10,14 @@
"dependencies": { "dependencies": {
"expo": "^34.0.1", "expo": "^34.0.1",
"expo-linear-gradient": "^6.0.0", "expo-linear-gradient": "^6.0.0",
"native-base": "^2.13.8", "msgpack5": "^4.2.1",
"native-base": "2.13.8",
"prop-types": "^15.7.2",
"react": "16.8.3", "react": "16.8.3",
"react-dom": "^16.8.6", "react-dom": "^16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-34.0.0.tar.gz", "react-native": "https://github.com/expo/react-native/archive/sdk-34.0.0.tar.gz",
"react-native-chart-kit": "^3.3.1", "react-native-chart-kit": "^3.13.0",
"react-native-svg": "^9.9.3", "react-native-svg": "^9.13.6",
"react-native-unimodules": "^0.5.4", "react-native-unimodules": "^0.5.4",
"react-native-web": "^0.11.4" "react-native-web": "^0.11.4"
}, },