create crop roattion plan fianlized

Soil Analyzer and Optimized Crop Finder - IT20233808/RP-MobileAPP-FE/App.js

@@ -20,7 +20,7 @@ export default function App() {
     <Stack.Screen name="Most Suitable Crops" component={MostSutaibleCrops}/>
     <Stack.Screen name="Add Soil Data Manually " component={ManualSoilData}/>
     <Stack.Screen name="TestWithButton" component={TestWithButton}/>
-    <Stack.Screen name="Crop Rotation Plan" component={CreateCropRotaionPlan}/>
+    <Stack.Screen name="Create Crop Rotation Plan" component={CreateCropRotaionPlan}/>
     </Stack.Navigator>
     </NavigationContainer>
   );

Soil Analyzer and Optimized Crop Finder - IT20233808/RP-MobileAPP-FE/components/common/Home.js

@@ -12,7 +12,7 @@ const HomePage = ({ navigation }) => {
     } else if (option === 'weatherData') {
       navigation.navigate('Weather Data Options');
     } else if (option === 'cropRotationPlan') {
-      navigation.navigate('Crop Rotation Plan');
+      navigation.navigate('Create Crop Rotation Plan');
     }
   };
 

Soil Analyzer and Optimized Crop Finder - IT20233808/RP-MobileAPP-FE/components/cropRotationPlanner/CropRotationCreation.js

 import React, { useState } from 'react';
-import { View, TextInput, TouchableOpacity, Text, StyleSheet, ImageBackground } from 'react-native';
+import { View, TextInput, TouchableOpacity, Text, StyleSheet, ImageBackground, Picker, ScrollView } from 'react-native';
+import axios from 'axios';
 
-const CreateCropRotaionPlan = ({navigation}) => {
-  
+const CreateCropRotaionPlan = ({ navigation }) => {
+  const [nitrogen, setNitrogen] = useState('');
+  const [phosphorus, setPhosphorus] = useState('');
+  const [potassium, setPotassium] = useState('');
+  const [district, setDistrict] = useState('');
+  const [previousCropFamily, setPreviousCropFamily] = useState('');
+  const [pestAttack, setPestAttack] = useState('');
+  const [years, setYears] = useState('');
+  const [selectedCrops, setSelectedCrops] = useState('');
+  const [iotData, setIotData] = useState('');
+  const [validationError, setValidationError] = useState('');
+
+  const validateFields = () => {
+    if (!nitrogen || !phosphorus || !potassium || !district || !previousCropFamily || !pestAttack || !years || !selectedCrops) {
+      setValidationError('All fields are mandatory.');
+      return false;
+    }
+    setValidationError('');
+    return true;
+  };
+
+  const handleFetchFromIOT = async () => {
+    try {
+      const response = await axios.get('http://192.168.227.241');
+      setIotData(response.data); // Assuming the API response contains NPK values
+      // Update the state values with the fetched data
+      setNitrogen(iotData.Nitrogen);
+      setPhosphorus(iotData.Phosphorus);
+      setPotassium(iotData.Potassium);
+    } catch (error) {
+      console.error('Error fetching data from IOT sensor:', error);
+    }
+  };
+
+  const handleSubmit = () => {
+    if (validateFields()) {
+      // Create a payload object with the user input data
+      const payload = {
+        nitrogen,
+        phosphorus,
+        potassium,
+        district,
+        previousCropFamily,
+        pestAttack,
+        years,
+        selectedCrops,
+      };
+
+      // Send a POST request to your API with the payload
+      axios.post('YOUR_API_ENDPOINT_HERE', payload)
+        .then((response) => {
+          // Handle success, e.g., navigate to the next screen
+          navigation.navigate('NextScreen', { response });
+        })
+        .catch((error) => {
+          console.error('Error submitting data:', error);
+        });
+    }
+  };
 
   return (
-    null
+    <ImageBackground source={require('../../assets/backgroudManualData.jpg')} style={styles.backgroundImage}>
+      <ScrollView contentContainerStyle={styles.container}>
+        <View style={styles.formContainer}>
+          <Text style={styles.heading}>Crop Rotation Plan</Text>
+          <Text style={styles.validationError}>{validationError}</Text>
+
+          <TextInput
+            style={styles.input}
+            placeholder="Nitrogen Value"
+            value={nitrogen}
+            onChangeText={(text) => setNitrogen(text)}
+          />
+
+          <TextInput
+            style={styles.input}
+            placeholder="Phosphorus Value"
+            value={phosphorus}
+            onChangeText={(text) => setPhosphorus(text)}
+          />
+
+          <TextInput
+            style={styles.input}
+            placeholder="Potassium Value"
+            value={potassium}
+            onChangeText={(text) => setPotassium(text)}
+          />
+
+          <TouchableOpacity onPress={handleFetchFromIOT} style={styles.button}>
+            <Text style={styles.buttonText}>Fetch from IOT Sensor</Text>
+          </TouchableOpacity>
+
+          <Picker
+            style={styles.input}
+            selectedValue={district}
+            onValueChange={(itemValue) => setDistrict(itemValue)}
+          >
+            <Picker.Item label="Select District" value="" />
+            <Picker.Item label="Nuwaraeliya" value="Nuwaraeliya" />
+            <Picker.Item label="New York" value="New York" />
+          </Picker>
+
+          <Picker
+            style={styles.input}
+            selectedValue={previousCropFamily}
+            onValueChange={(itemValue) => setPreviousCropFamily(itemValue)}
+          >
+            <Picker.Item label="Select Previous Crop Family" value="" />
+            <Picker.Item label="Legume" value="Legume" />
+            <Picker.Item label="Vegetables" value="Vegetables" />
+            <Picker.Item label="Fruits" value="Fruits" />
+            <Picker.Item label="Oil Crops" value="Oil Crops" />
+          </Picker>
+
+          <Picker
+            style={styles.input}
+            selectedValue={pestAttack}
+            onValueChange={(itemValue) => setPestAttack(itemValue)}
+          >
+            <Picker.Item label="Pest Attack On Previous Crop?" value="" />
+            <Picker.Item label="Yes" value="Yes" />
+            <Picker.Item label="No" value="No" />
+          </Picker>
+
+          <Picker
+            style={styles.input}
+            selectedValue={years}
+            onValueChange={(itemValue) => setYears(itemValue)}
+          >
+            <Picker.Item label="Select No. of Years" value="" />
+            <Picker.Item label="1 Year" value="1" />
+            <Picker.Item label="2 Years" value="2" />
+          </Picker>
+
+          <Picker
+            style={styles.input}
+            selectedValue={selectedCrops}
+            onValueChange={(itemValue) => setSelectedCrops(itemValue)}
+          >
+            <Picker.Item label="Select Most Preferd Crop Family" value="" />
+            <Picker.Item label="Legumes" value="Legumes" />
+            <Picker.Item label="Vegetables" value="Vegetables" />
+            <Picker.Item label="Fruits" value="Fruits" />
+          </Picker>
+
+          <TouchableOpacity onPress={handleSubmit} style={styles.button}>
+            <Text style={styles.buttonText}>Get Crop Rotation Plan</Text>
+          </TouchableOpacity>
+        </View>
+      </ScrollView>
+    </ImageBackground>
   );
 };
 
-export default CreateCropRotaionPlan;
\ No newline at end of file
+export default CreateCropRotaionPlan;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  backgroundImage: {
+    flex: 1,
+    resizeMode: 'cover',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  formContainer: {
+    backgroundColor: 'rgba(255, 255, 255, 0.8)',
+    borderRadius: 10,
+    padding: 20,
+    width: '80%',
+    maxWidth: 400,
+  },
+  heading: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    marginBottom: 20,
+    textAlign: 'center',
+  },
+  validationError: {
+    color: 'red',
+    marginBottom: 10,
+    textAlign: 'center',
+  },
+  input: {
+    height: 40,
+    borderColor: '#ccc',
+    borderWidth: 1,
+    marginBottom: 20,
+    paddingHorizontal: 10,
+    borderRadius: 5,
+  },
+  button: {
+    backgroundColor: '#3498db',
+    borderRadius: 5,
+    paddingVertical: 10,
+    alignItems: 'center',
+    marginBottom: 10,
+  },
+  buttonText: {
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: 'bold',
+  },
+});