App

2019-09-17 20:24:01 +02:00 · 2019-09-17 20:24:01 +02:00 · 648d26f69f
commit 648d26f69f
14 changed files with 7694 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,11 @@
+node_modules/**/*
+.expo/*
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+web-report/
--- a/.watchmanconfig
+++ b/.watchmanconfig
@ -0,0 +1 @@
+{}
--- a/App.js
+++ b/App.js
@ -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,*/
+   }
+});
--- a/App_old.js
+++ b/App_old.js
@ -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
+  }
+});
--- a/app.json
+++ b/app.json
@ -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
+    }
+  }
+}
--- a/assets/icon.png
+++ b/assets/icon.png
--- a/assets/splash.png
+++ b/assets/splash.png
--- a/babel.config.js
+++ b/babel.config.js
@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};
--- a/components/Graph.js
+++ b/components/Graph.js
@ -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;
--- a/components/IconCard.js
+++ b/components/IconCard.js
@ -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;
--- a/components/PropValueCard.js
+++ b/components/PropValueCard.js
@ -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;
--- a/icons.txt
+++ b/icons.txt
@ -0,0 +1,7 @@
+lifebuoy
+
+power-plug
+
+ruler
+
+select-arrows
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -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
+}