App
This commit is contained in:
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