App
This commit is contained in:
Martin Bauer
commit
648d26f69f
|
|
@ -0,0 +1,11 @@
|
||||||
|
node_modules/**/*
|
||||||
|
.expo/*
|
||||||
|
npm-debug.*
|
||||||
|
*.jks
|
||||||
|
*.p8
|
||||||
|
*.p12
|
||||||
|
*.key
|
||||||
|
*.mobileprovision
|
||||||
|
*.orig.*
|
||||||
|
web-build/
|
||||||
|
web-report/
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
{}
|
||||||
|
|
@ -0,0 +1,109 @@
|
||||||
|
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';
|
||||||
|
|
||||||
|
|
||||||
|
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 />;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Container>
|
||||||
|
<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,*/
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,135 @@
|
||||||
|
import React, {useState} from 'react';
|
||||||
|
import {StyleSheet, Text, View, Button, TextInput, Dimensions, StatusBar} from 'react-native';
|
||||||
|
import { LineChart} from 'react-native-chart-kit';
|
||||||
|
import { LinearGradient } from 'expo-linear-gradient';
|
||||||
|
import PropValueCard from './components/PropValueCard'
|
||||||
|
|
||||||
|
|
||||||
|
export default function App() {
|
||||||
|
const [outputText, setOutputText] = useState('This is the first text');
|
||||||
|
|
||||||
|
const [flag, setFlag] = useState(false);
|
||||||
|
|
||||||
|
const initialState = [];
|
||||||
|
for(let i=0; i < 100; ++i) {
|
||||||
|
initialState.push( Math.random() * 100);
|
||||||
|
}
|
||||||
|
|
||||||
|
const [graphData, setGraphData] = useState(initialState);
|
||||||
|
|
||||||
|
const makeNewGraphData = () => {
|
||||||
|
setGraphData( oldGraphData => {
|
||||||
|
console.log("Before", oldGraphData)
|
||||||
|
oldGraphData.pop();
|
||||||
|
oldGraphData.unshift(Math.random() * 100);
|
||||||
|
console.log("After", oldGraphData);
|
||||||
|
return oldGraphData.slice();
|
||||||
|
})
|
||||||
|
};
|
||||||
|
const makeNewGraphData2 = () => {
|
||||||
|
graphData.pop();
|
||||||
|
graphData.unshift(Math.random() * 100);
|
||||||
|
setGraphData(graphData);
|
||||||
|
};
|
||||||
|
|
||||||
|
let tutorial = (
|
||||||
|
<View style={{padding: 50}}>
|
||||||
|
<View style={{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'}}>
|
||||||
|
<TextInput
|
||||||
|
style={{width: '70%', borderColor: 'black', borderWidth: 1, padding: 5}}
|
||||||
|
placeholder="Course goal"
|
||||||
|
/>
|
||||||
|
<Button title="ADD"/>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<Text style={{fontSize: 50}}>Text1
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
|
||||||
|
let mine = (
|
||||||
|
<View style={styles.container}>
|
||||||
|
<View style={styles.view1}><Text>View1</Text></View>
|
||||||
|
<View style={styles.view2}><Text>View2</Text></View>
|
||||||
|
<View style={styles.view3}><Text>View3 </Text><TextInput/></View>
|
||||||
|
|
||||||
|
<View>
|
||||||
|
<Text>{flag ? "Text1" : "Text2"}</Text>
|
||||||
|
<Button title="Subba app is dat" onPress={() => setFlag(!flag)}/>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
|
||||||
|
let graph = (
|
||||||
|
<View>
|
||||||
|
<StatusBar hidden={true} />
|
||||||
|
|
||||||
|
<View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
|
||||||
|
<PropValueCard label="Züge" value="1234"/>
|
||||||
|
<PropValueCard label="Bahnen" value="30"/>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View style={{justifyContent: 'center', alignItems: 'center', flexDirection:'row'}}>
|
||||||
|
<LineChart
|
||||||
|
data={{
|
||||||
|
datasets: [{
|
||||||
|
data: graphData
|
||||||
|
}]
|
||||||
|
}}
|
||||||
|
width={Dimensions.get('window').width - 30} // from react-native
|
||||||
|
height={180}
|
||||||
|
chartConfig={{
|
||||||
|
backgroundColor: '#e26a00',
|
||||||
|
backgroundGradientFrom: '#fb8c00',
|
||||||
|
backgroundGradientTo: '#ffa726',
|
||||||
|
decimalPlaces: 0, // optional, defaults to 2dp
|
||||||
|
color: (opacity = 1) => `rgba(255, 255, 255, 0.8)`,
|
||||||
|
style: {
|
||||||
|
borderRadius: 16
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
style={{
|
||||||
|
borderRadius: 16,
|
||||||
|
}}
|
||||||
|
bezier
|
||||||
|
withDots={false}
|
||||||
|
withInnerLines={false}
|
||||||
|
withOuterLines={false}
|
||||||
|
withVerticalLabel={false}
|
||||||
|
withHorizontalLabels={true}
|
||||||
|
fromZero={true}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
<View>
|
||||||
|
<Button title="UUUND nochmal" onPress={makeNewGraphData}/>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
|
||||||
|
|
||||||
|
return graph;
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
container: {
|
||||||
|
flex: 1,
|
||||||
|
padding: 50,
|
||||||
|
backgroundColor: '#7573ee',
|
||||||
|
//alignItems: 'center',
|
||||||
|
//justifyContent: 'center',
|
||||||
|
justifyContent: 'space-between'
|
||||||
|
},
|
||||||
|
view1: {
|
||||||
|
backgroundColor: 'green',
|
||||||
|
height: 300
|
||||||
|
},
|
||||||
|
view2: {
|
||||||
|
backgroundColor: 'blue',
|
||||||
|
height: 100,
|
||||||
|
},
|
||||||
|
view3: {
|
||||||
|
backgroundColor: 'white',
|
||||||
|
height: 25
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
{
|
||||||
|
"expo": {
|
||||||
|
"name": "swimtrainer-app",
|
||||||
|
"slug": "swimtrainer-app",
|
||||||
|
"privacy": "public",
|
||||||
|
"sdkVersion": "34.0.0",
|
||||||
|
"platforms": [
|
||||||
|
"ios",
|
||||||
|
"android",
|
||||||
|
"web"
|
||||||
|
],
|
||||||
|
"version": "1.0.0",
|
||||||
|
"orientation": "portrait",
|
||||||
|
"icon": "./assets/icon.png",
|
||||||
|
"splash": {
|
||||||
|
"image": "./assets/splash.png",
|
||||||
|
"resizeMode": "contain",
|
||||||
|
"backgroundColor": "#ffffff"
|
||||||
|
},
|
||||||
|
"updates": {
|
||||||
|
"fallbackToCacheTimeout": 0
|
||||||
|
},
|
||||||
|
"assetBundlePatterns": [
|
||||||
|
"**/*"
|
||||||
|
],
|
||||||
|
"ios": {
|
||||||
|
"supportsTablet": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.0 KiB |
|
|
@ -0,0 +1,6 @@
|
||||||
|
module.exports = function(api) {
|
||||||
|
api.cache(true);
|
||||||
|
return {
|
||||||
|
presets: ['babel-preset-expo'],
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,37 @@
|
||||||
|
import React from 'react';
|
||||||
|
import {View, StyleSheet, Text} from 'react-native';
|
||||||
|
|
||||||
|
import Svg, {Polyline, Polygon, Rect, G} from 'react-native-svg';
|
||||||
|
|
||||||
|
|
||||||
|
const Graph = props => {
|
||||||
|
const graphHeight = 100;
|
||||||
|
|
||||||
|
const data = [];
|
||||||
|
for(let i=0; i < 300; ++i) {
|
||||||
|
data.push( Math.random() * 100);
|
||||||
|
}
|
||||||
|
|
||||||
|
const coordStr = data.map((element, i) => `${i*2}, ${element}`);
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View style={{justifyContent: 'center', alignItems: 'center'}}>
|
||||||
|
<Svg height={graphHeight} width="80%" viewbox="0 0 100 100">
|
||||||
|
<G transform={"translate(0," + graphHeight.toString() + ") scale(1, -1)"}>
|
||||||
|
<Polyline
|
||||||
|
points={coordStr.join(" ")}
|
||||||
|
stroke="black"
|
||||||
|
strokeWidth="3"
|
||||||
|
strokeOpacity="0.5"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
fill="none"
|
||||||
|
/>
|
||||||
|
</G>
|
||||||
|
</Svg>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
export default Graph;
|
||||||
|
|
@ -0,0 +1,35 @@
|
||||||
|
import React from 'react';
|
||||||
|
import {View, StyleSheet, Text} from 'react-native';
|
||||||
|
import {Icon} from "native-base";
|
||||||
|
|
||||||
|
const IconCard = props => {
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View style={styles.card}>
|
||||||
|
<View style={{alignItems: 'center', justifyContent: 'center', paddingLeft: 20}}>
|
||||||
|
<Icon style={{color: 'white', fontSize: 40}} name={props.iconName} type={props.iconType}/>
|
||||||
|
<Text style={{color: 'white', marginTop: 5}}> {props.label}</Text>
|
||||||
|
</View>
|
||||||
|
<View style={{paddingRight: 20}}>
|
||||||
|
<Text style={{color: 'white', fontSize: props.fontSize}}> {props.value}</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
card : {
|
||||||
|
flexDirection: 'row',
|
||||||
|
backgroundColor: 'rgba(0, 0, 0, 0.2)',
|
||||||
|
margin: 5,
|
||||||
|
padding: 5,
|
||||||
|
borderRadius: 3,
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
IconCard.defaultProps = {
|
||||||
|
fontSize: 85
|
||||||
|
};
|
||||||
|
|
||||||
|
export default IconCard;
|
||||||
|
|
@ -0,0 +1,39 @@
|
||||||
|
import React from 'react';
|
||||||
|
import {View, StyleSheet, Text} from 'react-native';
|
||||||
|
import { LinearGradient } from 'expo-linear-gradient';
|
||||||
|
|
||||||
|
|
||||||
|
const PropValueCard = props => {
|
||||||
|
|
||||||
|
return (
|
||||||
|
<LinearGradient
|
||||||
|
colors={['#0075c4', '#1A8FDE']}
|
||||||
|
start={[0, 0]}
|
||||||
|
end={[1, 0]}
|
||||||
|
style={styles.gradient}>
|
||||||
|
|
||||||
|
<Text style={{color:'white', fontSize: 16}}>
|
||||||
|
{props.label}
|
||||||
|
</Text>
|
||||||
|
<Text style={{color:'white', fontSize: 55}}>
|
||||||
|
{props.value}
|
||||||
|
</Text>
|
||||||
|
</LinearGradient>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
gradient : {
|
||||||
|
flex: 1,
|
||||||
|
padding: 15,
|
||||||
|
alignItems: 'center',
|
||||||
|
borderRadius: 16,
|
||||||
|
margin:15,
|
||||||
|
marginRight: 4,
|
||||||
|
height:120,
|
||||||
|
justifyContent:'center',
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
export default PropValueCard;
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,26 @@
|
||||||
|
{
|
||||||
|
"main": "node_modules/expo/AppEntry.js",
|
||||||
|
"scripts": {
|
||||||
|
"start": "expo start",
|
||||||
|
"android": "expo start --android",
|
||||||
|
"ios": "expo start --ios",
|
||||||
|
"web": "expo start --web",
|
||||||
|
"eject": "expo eject"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"expo": "^34.0.1",
|
||||||
|
"expo-linear-gradient": "^6.0.0",
|
||||||
|
"native-base": "^2.13.8",
|
||||||
|
"react": "16.8.3",
|
||||||
|
"react-dom": "^16.8.6",
|
||||||
|
"react-native": "https://github.com/expo/react-native/archive/sdk-34.0.0.tar.gz",
|
||||||
|
"react-native-chart-kit": "^3.3.1",
|
||||||
|
"react-native-svg": "^9.9.3",
|
||||||
|
"react-native-unimodules": "^0.5.4",
|
||||||
|
"react-native-web": "^0.11.4"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"babel-preset-expo": "^6.0.0"
|
||||||
|
},
|
||||||
|
"private": true
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue