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
Hide whitespace changes
Inline Side-by-side
Showing with 191 additions and 83 deletions
screen/gamification.js
View file @ 1ba2ca37
......@@ -2,98 +2,190 @@
// https://aboutreact.com/react-native-login-and-signup/
// Import React and Component
import React from 'react';
import {StyleSheet, View, 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 React, { useState } from "react";
import {
StyleSheet,
View,
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 { Entypo } from "@expo/vector-icons";
import axios from "axios";
export function gamification({ navigation }) {
// const [title, setTitle] = useState();
export function gamification ({navigation}) {
return (
<SafeAreaView style={{flex: 1, color: 'yellow'}}>
<ImageBackground source={require('../assets/gamification.jpg')} style={styles.images}>
// const handlecarrot = () => {
// setTitle({title: "carrot"});
// console.log(title)
// return title
// };
<Formik
initialValues={{ name: ''}}
onSubmit={(values) => {
console.log(values);
}}
return (
<SafeAreaView style={{ flex: 1, color: "yellow" }}>
<ImageBackground
source={require("../assets/gamification.jpg")}
style={styles.images}
>
{props => (
<View style={styles.container}>
<View style={styles.iconView}>
<Formik
initialValues={{ name: "", title: "" }}
onSubmit={(values, actions) => {
console.log(values);
// console.log(title)
// console.log(title);
// console.log(values.name);
// console.log(values.title);
<MaterialCommunityIcons name="map-marker-distance" size={50} color="black" />
</View>
<Text style={styles.heading}> Enter Area </Text>
<TextInput
style={styles.input}
placeholder='Area'
onChangeText={props.handleChange('name')}
value={props.values.title}
/>
<View>
const form = new FormData();
<TouchableOpacity style = {styles.buttonSub} title="Sign Up" onPress={props.handleSubmit} >
<Text style={styles.buttonText}>Best Crop 1</Text>
</TouchableOpacity>
<TouchableOpacity style = {styles.buttonSub} title="Sign Up" onPress={props.handleSubmit} >
<Text style={styles.buttonText}>Best Crop 2</Text>
</TouchableOpacity>
<TouchableOpacity style = {styles.buttonSub} title="Sign Up" onPress={props.handleSubmit} >
<Text style={styles.buttonText}>Best Crop 3</Text>
</TouchableOpacity>
<TouchableOpacity style = {styles.buttonSub} title="Sign Up" onPress={props.handleSubmit} >
<Text style={styles.buttonText}>Best Crop 4</Text>
</TouchableOpacity>
</View>
<View style={{
alignSelf: 'center',
marginTop:10
}}>
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) => (
<View style={styles.container}>
<View
style={{
alignSelf: "center",
marginTop: 10,
}}
>
<MaterialCommunityIcons
name="map-marker-distance"
size={50}
color="black"
/>
</View>
<View style={styles.iconView}>
<Text style={styles.heading}> Earn value calculation </Text>
<View style={styles.containerinside}>
<View style={styles.iconViewinside}>
<Entypo name="location" size={24} color="white" />
<TextInput
style={styles.input}
placeholder="Area in square meter"
onChangeText={props.handleChange("name")}
value={props.values.name}
/>
</View>
</View>
<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
style={styles.buttonSub}
title="tomato"
onPress={(title) =>{
props.setFieldValue('title', "tomato")
props.handleSubmit(title)
}}
>
<Text style={styles.buttonText}>Tomato</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.buttonSub}
title="chilli"
onPress={(title) =>{
props.setFieldValue('title', "chilli")
props.handleSubmit(title)
}}
>
<Text style={styles.buttonText}>chilli</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.buttonSub}
title="beans"
onPress={(title) =>{
props.setFieldValue('title', "beans")
props.handleSubmit(title)
}}
>
<Text style={styles.buttonText}>Beans</Text>
</TouchableOpacity>
</View>
<FontAwesome name="money" size={50} color="black" />
<View
style={{
alignSelf: "center",
marginTop: 10,
}}
>
<FontAwesome name="money" size={50} color="black" />
</View>
<Text style={styles.textdata}>TOTAL EARNED $: 1000</Text>
</View>
<Text
style={styles.textdata}>
TOTAL EARNED $: 1000
</Text>
</View>
)}
</Formik>
<BottomTab/>
</ImageBackground>
)}
</Formik>
<BottomTab />
</ImageBackground>
</SafeAreaView>
);
};
}
const styles = StyleSheet.create({
container: {
flex: 1,
color: '#333',
color: "#333",
padding: 10,
marginTop: 20,
marginBottom: 10,
width: "100%",
// flexDirection: "column",
alignContent: "center",
alignSelf: "center",
},
activityIndicator: {
alignItems: 'center',
alignItems: "center",
height: 80,
},
Button:{
Button: {
alignItems: "center",
backgroundColor: "#DDDDDD",
padding: 10
padding: 10,
},
input: {
borderWidth: 1,
borderColor: '#ddd',
borderColor: "#ddd",
padding: 10,
paddingTop: 10,
fontSize: 18,
......@@ -101,19 +193,21 @@ const styles = StyleSheet.create({
marginTop: 20,
marginBottom: 10,
marginLeft: 10,
marginRight: 10
marginRight: 10,
borderRadius: 25,
backgroundColor: "white",
width: "75%",
height: 40,
},
heading: {
textAlign: 'center',
color: '#333',
fontWeight: 'bold',
textAlign: "center",
color: "#333",
fontWeight: "bold",
padding: 10,
fontSize: 18,
},
buttonSub: {
width: "90%",
width: "85%",
padding: 10,
marginTop: 20,
marginLeft: 20,
......@@ -122,21 +216,35 @@ const styles = StyleSheet.create({
flexDirection: "row",
marginBottom: 10,
justifyContent: "center",
borderRadius:10
borderRadius: 10,
},
textdata:{
textdata: {
fontSize: 18,
textAlign: 'center',
color: 'black',
textAlign: "center",
color: "black",
marginTop: 20,
marginBottom: 5,
},
iconView:{
alignSelf: 'center',
iconView: {
// 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'
}
});
\ No newline at end of file
});
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