radegast

mobile/App.js

 import React from 'react';
-import { StyleSheet, Text, View, TouchableOpacity, AsyncStorage, Alert, StatusBar, ImageBackground, Image } from 'react-native';
+import { Text, View, TouchableOpacity, AsyncStorage, StatusBar, Image } from 'react-native';
+
+import EStyleSheet from 'react-native-extended-stylesheet';
 
 
 const SEND_DATA_TIMER = 60000;
@@ -14,8 +16,7 @@ class App extends React.PureComponent {
         super(props);
         this.state = {
             mode: 'rating',
-            stats: {},
-            statsLoading: false,
+            lastRating: null,
             buffer: []
         };
 
@@ -79,7 +80,7 @@ class App extends React.PureComponent {
             let rating = { rating: r, key };
 
             try {
-                this.setState({ mode: "info" });
+                this.setState({ mode: "info", lastRating: r });
                 await AsyncStorage.setItem(JSON.stringify(key), JSON.stringify(rating));
 
                 //add to buffer
@@ -95,53 +96,29 @@ class App extends React.PureComponent {
     }
 
 
-    renderResults() {
-        return <View></View>
-    }
-
-
-    renderInfo() {
-        return <View style={styles.center}><Text>Děkujeme za hodnocení</Text></View>
-    }
-
+    render() {
+        let { mode, lastRating } = this.state;
+        let showInfo = mode == "info";
 
-    renderRating() {
         const buttons = [];
         for (let i = 1; i <= 10; i++) {
-            buttons.push(<TouchableOpacity key={ i } onPress={ this.onPress(i) }>
-                <Text style={styles.rating}>{ i }</Text>
+            buttons.push(
+                <TouchableOpacity key={ i } onPress={ this.onPress(i) }>
+                    <View style={styles.rating}>
+                        <Text style={styles.ratingNumber}>{ i }</Text>
+                        { showInfo && lastRating && i <= lastRating ? <Image source={ require('./assets/siska.png') } style={ styles.ratingImage } /> : null }
+                    </View>
                 </TouchableOpacity>
             );
         }
 
         return (
+            <View style={styles.container}>
+                <StatusBar hidden />
+                <Image source={ require('./assets/bg.jpg') } style={ styles.bg } imageStyle={{ resizeMode: 'stretch' }}/>
                 <View style={styles.ratingsContainer}>
                     { buttons }
                 </View>
-        );
-    }
-
-
-    render() {
-        let { mode } = this.state;
-
-        let content = null;
-
-        switch (mode) {
-            case 'results':
-                content = this.renderResults();
-                break;
-            case 'info':
-            default:
-                content = this.renderRating();
-
-        }
-
-        return (
-            <View style={styles.container}>
-                <StatusBar hidden />
-                <Image source={ require('./assets/bg.jpg') } style={{width: '100%', height: '100%', position: 'absolute'}} imageStyle={{ resizeMode: 'stretch' }}/>
-                { content }
             </View>
         );
     }
@@ -153,20 +130,35 @@ class App extends React.PureComponent {
 export default App;
 
 
-const styles = StyleSheet.create({
+
+EStyleSheet.build({});
+const styles = EStyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#000000',
+        width: '100%',
+        height: '100%'
+    },
+
     center: {
         flex: 1,
         alignItems: 'center',
         justifyContent: 'center',
     },
 
+    bg: {
+        width: '100%', 
+        height: '100%', 
+        position: 'absolute'
+    },
+
     ratingsContainer: {
         position: 'absolute',
         left: 0,
-        top: '35%',
+        top: '32%',
         width: '100%',
         flexDirection: 'row',
-        alignItems: 'center',
+        alignItems: 'flex-start',
         justifyContent: 'space-around',
         color: '#FFFFFF',
         paddingLeft: '5%',
@@ -174,16 +166,28 @@ const styles = StyleSheet.create({
     },
 
     rating: {
+        flexDirection: 'column',
+        justifyContent: 'flex-start',
+        alignItems: 'center',
+        position: 'relative'
+    },
+
+    ratingNumber: {
         backgroundColor: '#FFFFFF',
-        fontSize: 20,
-        borderRadius: 14,
-        width: 28,
-        height: 28,
+        fontSize: '1.4rem',
+        borderRadius: '1rem',
+        width: '2rem',
+        height: '2rem',
         textAlign: 'center'
     },
 
-    container: {
-        flex: 1,
-        backgroundColor: '#000000'
-    },
+    ratingImage: {
+        resizeMode: 'contain',
+        position: 'absolute',
+        top: '3rem',
+        height: '4.5rem'
+
+    }
+
 });
+

mobile/app.json

@@ -13,9 +13,7 @@
     "orientation": "landscape",
     "icon": "./assets/icon.png",
     "splash": {
-      "image": "./assets/bg.jpg",
-      "resizeMode": "contain",
-      "backgroundColor": "#000000"
+      "backgroundColor": "#BCBCBC"
     },
     "updates": {
       "fallbackToCacheTimeout": 0

mobile/package.json

@@ -12,6 +12,7 @@
     "react": "16.8.3",
     "react-dom": "^16.8.6",
     "react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
+    "react-native-extended-stylesheet": "^0.12.0",
     "react-native-web": "^0.11.4"
   },
   "devDependencies": {

mobile/yarn.lock

@@ -1496,6 +1496,11 @@ css-in-js-utils@^2.0.0:
     hyphenate-style-name "^1.0.2"
     isobject "^3.0.1"
 
+css-mediaquery@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/css-mediaquery/-/css-mediaquery-0.1.2.tgz#6a2c37344928618631c54bd33cedd301da18bea0"
+  integrity sha1-aiw3NEkoYYYxxUvTPO3TAdoYvqA=
+
 debounce@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.0.tgz#44a540abc0ea9943018dc0eaa95cce87f65cd131"
@@ -3485,6 +3490,11 @@ object-keys@^1.0.11, object-keys@^1.0.12:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
 
+object-resolve-path@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/object-resolve-path/-/object-resolve-path-1.1.1.tgz#a7f8f93e8a20af80e44217ba7db54316d9d12232"
+  integrity sha1-p/j5Poogr4DkQhe6fbVDFtnRIjI=
+
 object-visit@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/object-visit/-/object-visit-1.0.1.tgz#f79c4493af0c5377b59fe39d395e41042dd045bb"
@@ -3863,6 +3873,14 @@ react-native-branch@2.2.5:
   version "2.2.5"
   resolved "https://registry.yarnpkg.com/react-native-branch/-/react-native-branch-2.2.5.tgz#4074dd63b4973e6397d9ce50e97b57c77a518e9d"
 
+react-native-extended-stylesheet@^0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/react-native-extended-stylesheet/-/react-native-extended-stylesheet-0.12.0.tgz#ebacf22d78a8e2173bdef2a08cbf1acba4dc051f"
+  integrity sha512-y4MEI+a9F8qtAKEjxKbwqotJg1FqKfl6vaiF25ULZ/VGkWI4GNTnsFunU9x6B3XJ6ly1E8O9fybO63u6UazL/A==
+  dependencies:
+    css-mediaquery "^0.1.2"
+    object-resolve-path "^1.1.0"
+
 react-native-gesture-handler@1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-1.2.1.tgz#9c48fb1ab13d29cece24bbb77b1e847eebf27a2b"