Skip to content

2
2021-090 frontend
Commit 1ba2ca37 authored by IT18111170-Silva S.H.I's avatar IT18111170-Silva S.H.I
Browse files
Options

update:gamification model

parent e8c4f50e
Show whitespace changes
Inline Side-by-side
Showing with 191 additions and 83 deletions
screen/gamification.js
View file @ 1ba2ca37
...@@ -2,98 +2,190 @@ ...@@ -2,98 +2,190 @@
// https://aboutreact.com/react-native-login-and-signup/ // https://aboutreact.com/react-native-login-and-signup/
// Import React and Component // Import React and Component
import React from 'react'; import React, { useState } from "react";
import {StyleSheet, View, Text, SafeAreaView, TouchableOpacity, TextInput, ImageBackground} from 'react-native'; import {
import { Formik } from 'formik'; StyleSheet,
import { FontAwesome } from '@expo/vector-icons'; View,
import { MaterialCommunityIcons } from '@expo/vector-icons'; Text,
SafeAreaView,
TouchableOpacity,
TextInput,
ImageBackground,
} from "react-native";
import { Formik } from "formik";
import { FontAwesome } from "@expo/vector-icons";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import { BottomTab } from "../Navigations/BottomTab"; import { BottomTab } from "../Navigations/BottomTab";
import { Entypo } from "@expo/vector-icons";
import axios from "axios";
export function gamification({ navigation }) {
// const [title, setTitle] = useState();
export function gamification ({navigation}) { // const handlecarrot = () => {
return ( // setTitle({title: "carrot"});
<SafeAreaView style={{flex: 1, color: 'yellow'}}> // console.log(title)
<ImageBackground source={require('../assets/gamification.jpg')} style={styles.images}> // return title
// };
return (
<SafeAreaView style={{ flex: 1, color: "yellow" }}>
<ImageBackground
source={require("../assets/gamification.jpg")}
style={styles.images}
>
<Formik <Formik
initialValues={{ name: ''}} initialValues={{ name: "", title: "" }}
onSubmit={(values) => { onSubmit={(values, actions) => {
console.log(values); console.log(values);
// console.log(title)
// console.log(title);
// console.log(values.name);
// console.log(values.title);
const form = new FormData();
form.append("name", values.name);
form.append("title", values.title);
// console.log(form)
axios({
method: "POST",
url: "http://192.168.8.126:5000/points/<id>",
data: form,
// headers: {
// "Content-Type": "multipart/form-data",
// },
})
.then(function (response) {
console.log("abc" + response);
actions.resetForm();
// return response;
})
.catch(function (error) {
console.log(error);
});
}} }}
> >
{props => ( {(props) => (
<View style={styles.container}> <View style={styles.container}>
<View
style={{
alignSelf: "center",
marginTop: 10,
}}
>
<MaterialCommunityIcons
name="map-marker-distance"
size={50}
color="black"
/>
</View>
<View style={styles.iconView}> <View style={styles.iconView}>
<Text style={styles.heading}> Earn value calculation </Text>
<MaterialCommunityIcons name="map-marker-distance" size={50} color="black" /> <View style={styles.containerinside}>
</View> <View style={styles.iconViewinside}>
<Text style={styles.heading}> Enter Area </Text> <Entypo name="location" size={24} color="white" />
<TextInput <TextInput
style={styles.input} style={styles.input}
placeholder='Area' placeholder="Area in square meter"
onChangeText={props.handleChange('name')} onChangeText={props.handleChange("name")}
value={props.values.title} value={props.values.name}
/> />
<View> </View>
</View>
<TouchableOpacity style = {styles.buttonSub} title="Sign Up" onPress={props.handleSubmit} >
<Text style={styles.buttonText}>Best Crop 1</Text>
<TouchableOpacity
style={styles.buttonSub}
title="carrot"
onPress={(title) =>{
props.setFieldValue('title', "carrot")
props.handleSubmit(title)
}}
// onPress={handlecarrot}
>
<Text style={styles.buttonText}>Carrot</Text>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity style = {styles.buttonSub} title="Sign Up" onPress={props.handleSubmit} >
<Text style={styles.buttonText}>Best Crop 2</Text>
<TouchableOpacity
style={styles.buttonSub}
title="tomato"
onPress={(title) =>{
props.setFieldValue('title', "tomato")
props.handleSubmit(title)
}}
>
<Text style={styles.buttonText}>Tomato</Text>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity style = {styles.buttonSub} title="Sign Up" onPress={props.handleSubmit} >
<Text style={styles.buttonText}>Best Crop 3</Text>
<TouchableOpacity
style={styles.buttonSub}
title="chilli"
onPress={(title) =>{
props.setFieldValue('title', "chilli")
props.handleSubmit(title)
}}
>
<Text style={styles.buttonText}>chilli</Text>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity style = {styles.buttonSub} title="Sign Up" onPress={props.handleSubmit} >
<Text style={styles.buttonText}>Best Crop 4</Text>
<TouchableOpacity
style={styles.buttonSub}
title="beans"
onPress={(title) =>{
props.setFieldValue('title', "beans")
props.handleSubmit(title)
}}
>
<Text style={styles.buttonText}>Beans</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
<View style={{
alignSelf: 'center',
marginTop:10
}}>
<View
style={{
alignSelf: "center",
marginTop: 10,
}}
>
<FontAwesome name="money" size={50} color="black" /> <FontAwesome name="money" size={50} color="black" />
</View> </View>
<Text <Text style={styles.textdata}>TOTAL EARNED $: 1000</Text>
style={styles.textdata}>
TOTAL EARNED $: 1000
</Text>
</View> </View>
)} )}
</Formik> </Formik>
<BottomTab/> <BottomTab />
</ImageBackground> </ImageBackground>
</SafeAreaView> </SafeAreaView>
); );
}; }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
flex: 1, flex: 1,
color: '#333', color: "#333",
padding: 10, padding: 10,
marginTop: 20, marginTop: 20,
marginBottom: 10, marginBottom: 10,
width: "100%", width: "100%",
// flexDirection: "column",
alignContent: "center",
alignSelf: "center",
}, },
activityIndicator: { activityIndicator: {
alignItems: 'center', alignItems: "center",
height: 80, height: 80,
}, },
Button:{ Button: {
alignItems: "center", alignItems: "center",
backgroundColor: "#DDDDDD", backgroundColor: "#DDDDDD",
padding: 10 padding: 10,
}, },
input: { input: {
borderWidth: 1, borderWidth: 1,
borderColor: '#ddd', borderColor: "#ddd",
padding: 10, padding: 10,
paddingTop: 10, paddingTop: 10,
fontSize: 18, fontSize: 18,
...@@ -101,19 +193,21 @@ const styles = StyleSheet.create({ ...@@ -101,19 +193,21 @@ const styles = StyleSheet.create({
marginTop: 20, marginTop: 20,
marginBottom: 10, marginBottom: 10,
marginLeft: 10, marginLeft: 10,
marginRight: 10 marginRight: 10,
borderRadius: 25,
backgroundColor: "white",
width: "75%",
height: 40,
}, },
heading: { heading: {
textAlign: 'center', textAlign: "center",
color: '#333', color: "#333",
fontWeight: 'bold', fontWeight: "bold",
padding: 10, padding: 10,
fontSize: 18, fontSize: 18,
}, },
buttonSub: { buttonSub: {
width: "90%", width: "85%",
padding: 10, padding: 10,
marginTop: 20, marginTop: 20,
marginLeft: 20, marginLeft: 20,
...@@ -122,21 +216,35 @@ const styles = StyleSheet.create({ ...@@ -122,21 +216,35 @@ const styles = StyleSheet.create({
flexDirection: "row", flexDirection: "row",
marginBottom: 10, marginBottom: 10,
justifyContent: "center", justifyContent: "center",
borderRadius:10 borderRadius: 10,
}, },
textdata:{ textdata: {
fontSize: 18, fontSize: 18,
textAlign: 'center', textAlign: "center",
color: 'black', color: "black",
marginTop: 20, marginTop: 20,
marginBottom: 5, marginBottom: 5,
}, },
iconView:{ iconView: {
alignSelf: 'center', // alignSelf: "center",
// flexDirection: "column",
// justifyContent:"center"
},
images: {
height: "100%",
justifyContent: "center",
},
containerinside: {
color: "#333",
width: "100%",
},
iconViewinside: {
// flexDirection: "row",
// justifyContent: "center",
// alignItems: "center",
color: "yellow",
flexDirection: "row",
alignItems: "center",
alignSelf: "center",
}, },
images:{
height: '100%',
justifyContent: 'center'
}
}); });
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment