home screen added

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

@@ -5,6 +5,7 @@ import TestWithButton from './components/recomendationComponentsBySoil/TestWithB
 import SoilDataOptions from './components/recomendationComponentsBySoil/SoilDataOptions';
 import ManualSoilData from './components/recomendationComponentsBySoil/ManualSoilData';
 import MostSutaibleCrops from './components/recomendationComponentsBySoil/MostSutaibleCrops';
+import HomePage from './components/common/Home';
 
 
 
@@ -13,8 +14,9 @@ export default function App() {
   return (
     <NavigationContainer>
     <Stack.Navigator>
+    <Stack.Screen name="Home" component={HomePage}/>
     <Stack.Screen name="Soil Data Options" component={SoilDataOptions}/>
-    <Stack.Screen name="Most Sutaible Crops" component={MostSutaibleCrops}/>
+    <Stack.Screen name="Most Suitable Crops" component={MostSutaibleCrops}/>
     <Stack.Screen name="Add Soil Data Manually " component={ManualSoilData}/>
     <Stack.Screen name="TestWithButton" component={TestWithButton}/>
     </Stack.Navigator>

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

+import React from 'react';
+import { View, Text, TouchableOpacity, StyleSheet, ImageBackground } from 'react-native';
+
+const HomePage = ({ navigation }) => {
+  const handleOptionSelect = (option) => {
+    // Handle navigation to the selected option
+    if (option === 'pestDisease') {
+      navigation.navigate('PestDiseasePage');
+    } else if (option === 'soilData') {
+      navigation.navigate('Soil Data Options');
+    } else if (option === 'weatherData') {
+      navigation.navigate('Weather Data Options');
+    } else if (option === 'cropRotationPlan') {
+      navigation.navigate('CropRotationPlanPage');
+    }
+  };
+
+  return (
+    <ImageBackground source={require('../../assets/homepage.png')} style={styles.backgroundImage}>
+      <View style={styles.container}>
+        <TouchableOpacity style={styles.optionButton} onPress={() => handleOptionSelect('pestDisease')}>
+          <Text style={styles.optionText}>Pest and Disease</Text>
+        </TouchableOpacity>
+        <TouchableOpacity style={styles.optionButton} onPress={() => handleOptionSelect('soilData')}>
+          <Text style={styles.optionText}>Soil Data</Text>
+        </TouchableOpacity>
+        <TouchableOpacity style={styles.optionButton} onPress={() => handleOptionSelect('weatherData')}>
+          <Text style={styles.optionText}>Weather Data</Text>
+        </TouchableOpacity>
+        <TouchableOpacity style={styles.optionButton} onPress={() => handleOptionSelect('cropRotationPlan')}>
+          <Text style={styles.optionText}>Crop Rotation Plan</Text>
+        </TouchableOpacity>
+      </View>
+    </ImageBackground>
+  );
+};
+
+const styles = StyleSheet.create({
+  backgroundImage: {
+    flex: 1,
+    resizeMode: 'cover',
+    justifyContent: 'center',
+  },
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 20,
+  },
+  optionButton: {
+    backgroundColor: '#fff',
+    borderRadius: 8,
+    paddingVertical: 20,
+    marginBottom: 20,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5,
+    width: '100%', // Set the width to occupy the entire container
+  },
+  optionText: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    color: '#000',
+    textAlign: 'center',
+  },
+});
+
+export default HomePage;

Soil Analyzer and Optimized Crop Finder - IT20233808/RP-MobileAPP-FE/components/recomendationComponentsBySoil/ManualSoilData.js

@@ -18,7 +18,7 @@ const ManualSoilData = ({navigation}) => {
         Potassium:parsedPotassiumLevel
     }
     console.log(userNpkData);
-    navigation.navigate("Most Sutaible Crops",{userNpkData})
+    navigation.navigate("Most Suitable Crops",{userNpkData})
   };
 
   return (

Soil Analyzer and Optimized Crop Finder - IT20233808/RP-MobileAPP-FE/components/recomendationComponentsBySoil/MostSutaibleCrops.js

@@ -26,42 +26,31 @@ const cropImages = {
 
 const MostSuitableCrops = () => {
   const [cropData, setCropData] = useState(null);
-  const [isLoading, setIsLoading] = useState(false);
-  const [mapObject,setMapObject]=useState({});
+  const [isLoading, setIsLoading] = useState(true); // Set initial loading state to true
+  const [mapObject, setMapObject] = useState({});
   const route = useRoute();
   const { userNpkData } = route.params;
-  console.log("inside sutaible",userNpkData);
-  // setMapObject(data)
-  // const { userNpkData } = route.params;
 
-  // if(data && Object.keys(data).length === 0){
-  //   setMapObject(userNpkData)
-  // }else{
-  //   setMapObject(data)
-  // }
+  // const handleArduinoClick = async () => {
+  //   await axios.get('http://192.168.89.241')
+  //     .then(res => {
+  //       setCropData(res.data);
+  //     })
+  //     .catch(err => {
+  //       console.log(err);
+  //     });
+  // };
 
-  const handleArduinoClick = async () => {
-
-    await axios.get('http://192.168.89.241').then(res=>{
-      setCropData(res.data)
-    }).catch(err=>{
-      console.log(err);
-    })
-    // try {
-    //   const response = await axios.get('http://192.168.89.241');
-    //   const data = response.data;
-    //   setCropData(data);
-    //   console.log(data);
-    // } catch (error) {
-    //   console.error('Error fetching crop data:', error);
-    // } finally {
-    //   setIsLoading(false);
-    // }
-  };
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setIsLoading(false); 
+    }, 3000);
 
+    return () => clearTimeout(timer);
+  }, []);
+  
   useEffect(() => {
     const fetchCropData = async () => {
-      setIsLoading(true);
       try {
         const response = await axios.post('http://127.0.0.1:5000/npk-data', {
           N: userNpkData['Nitrogen'],
@@ -78,7 +67,9 @@ const MostSuitableCrops = () => {
     };
 
     fetchCropData();
-  }, []); // Empty dependency array to run effect only once on component mount
+  }, []);
+
+
 
   return (
     <ImageBackground source={BackgroundImage} style={styles.backgroundImage}>

Soil Analyzer and Optimized Crop Finder - IT20233808/RP-MobileAPP-FE/components/recomendationComponentsBySoil/SoilDataOptions.js

-import {React,useState} from 'react';
-import { View, TouchableOpacity, Text, StyleSheet, Image } from 'react-native';
+import React, { useState } from 'react';
+import { View, TouchableOpacity, Text, StyleSheet, Image, ActivityIndicator } from 'react-native';
 import axios from 'axios';
 
-const SoilDataOptions = ({navigation}) => {
-  const [cropData, setCropData] =useState (null);
+const SoilDataOptions = ({ navigation }) => {
+  const [cropData, setCropData] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
 
-  const handleArduinoRequest =async()=>{
+  const handleArduinoRequest = async () => {
     console.log("arduino hit");
-    const response = await axios.get('http://192.168.89.241');
+    setIsLoading(true);
+
+    try {
+      const response = await axios.get('http://192.168.227.241');
       const userNpkData = response.data;
       setCropData(userNpkData);
       console.log(userNpkData);
 
-      navigation.navigate("Most Sutaible Crops",{userNpkData})
+      navigation.navigate("Most Suitable Crops", { userNpkData });
+    } catch (error) {
+      console.log(error);
+    } finally {
+      setIsLoading(false);
+    }
   }
 
   return (
     <View style={styles.container}>
-      <Image source={require('../../assets/backgroundSoilData.jpg')} style={styles.backgroundImage} />
+      <Image source={require('../../assets/backgroudManualData.jpg')} style={styles.backgroundImage} />
+      {isLoading && (
+        <View style={styles.loader}>
+          <ActivityIndicator size="large" color="#3498db" />
+          <Text style={styles.loaderText}>Getting data from your sensor. Please wait...</Text>
+        </View>
+      )}
       <View style={styles.buttonContainer}>
-        <TouchableOpacity style={styles.button} onPress={() => {navigation.navigate("Add Soil Data Manually ")}}>
+        <TouchableOpacity style={styles.button} onPress={() => { navigation.navigate("Add Soil Data Manually ") }}>
           <Text style={styles.buttonText}>Add soil data manually</Text>
         </TouchableOpacity>
-        <TouchableOpacity style={styles.button} onPress={() => {handleArduinoRequest()}}>
+        <TouchableOpacity style={styles.button} onPress={() => { handleArduinoRequest() }}>
           <Text style={styles.buttonText}>Get soil data from sensor</Text>
         </TouchableOpacity>
       </View>
@@ -43,7 +58,6 @@ const styles = StyleSheet.create({
     left: 0,
     width: '100%',
     height: '100%',
-    opacity: 0.8,
   },
   buttonContainer: {
     backgroundColor: 'rgba(255, 255, 255, 0.8)',
@@ -69,6 +83,23 @@ const styles = StyleSheet.create({
     fontSize: 16,
     fontWeight: 'bold',
   },
+  loader: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgba(0, 0, 0, 0.9)',
+    zIndex: 999,
+  },
+  loaderText: {
+    color: '#fff',
+    fontSize: 16,
+    marginTop: 10,
+    textAlign: 'center',
+  },
 });
 
 export default SoilDataOptions;