Skip to content

T
TMP-23-068
Commit 7f4c7993 authored by Balasooriya B.M.D.D's avatar Balasooriya B.M.D.D
Browse files
Options

Merge branch 'master' into UI_Changes

parents 092628b5 4e90518a
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1250 additions and 331 deletions
App.js
View file @ 7f4c7993
......@@ -5,7 +5,6 @@ import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import registerNNPushToken from 'native-notify';
import TabNavigator from "./navigation/TabNavigator";
import UsImage from "./screens/CaptureImage";
import Prescription from "./screens/CapturePrescription";
......@@ -19,11 +18,22 @@ import Signup from "./screens/Signup";
import Signin from "./screens/Signin";
import BmiCalculator from "./screens/BmiCalculator";
import BmiRecords from "./screens/BmiRecords";
import BMI from "./screens/BMI";
import BloodReportCapture from "./screens/BloodReportCapture";
import Plan from "./screens/Plan";
import UserProfile from "./screens/UserProfile";
import MedHome from "./screens/MedHome";
import MyMed from "./screens/MyMed";
import MoodDetection from "./screens/MoodDetection";
import NutritionWelcome from "./screens/NutritionWelcome";
import MedicineWelcome from "./screens/MedicineWelcome";
import USWelcome from "./screens/USWelcome";
import MoodWelcome from "./screens/MoodWelcome";
import PreviousPlan from "./screens/PreviousPlan";
import SuggestionComponent from "./screens/SuggestionComponent";
import LineChartComponent from "./screens/LineChartComponent";
const Stack = createStackNavigator()
const Tab = createBottomTabNavigator();
......@@ -52,21 +62,23 @@ export default function App() {
<Stack.Screen name="BmiRecords" component={BmiRecords} />
<Stack.Screen name="BloodReportCapture" component={BloodReportCapture} />
<Stack.Screen name="Plan" component={Plan} />
<Stack.Screen name="bmi" component={BMI} />
<Stack.Screen name="mood" component={MoodDetection} />
<Stack.Screen name="PreviousPlan" component={PreviousPlan} />
<Stack.Screen name="NutritionWelcome" component={NutritionWelcome} />
<Stack.Screen name="MedicineWelcome" component={MedicineWelcome} />
<Stack.Screen name="USWelcome" component={USWelcome} />
<Stack.Screen name="MoodWelcome" component={MoodWelcome} />
<Stack.Screen name="Signup" component={Signup} />
<Stack.Screen name="Signin" component={Signin} />
<Stack.Screen name="UserProfile" component={UserProfile} />
<Stack.Screen name="MedHome" component={MedHome} />
<Stack.Screen name="MyMed" component={MyMed} />
<Stack.Screen name="SuggestionComponent" component={SuggestionComponent} />
<Stack.Screen name="Graph" component={LineChartComponent} />
</Stack.Navigator>
</NavigationContainer>
);
}
screens/BmiCalculator.js
View file @ 7f4c7993
......@@ -45,7 +45,7 @@ export default BmiCalculator;
import React, { useState, useEffect } from "react";
import { View, Text, StyleSheet, Button ,TouchableOpacity} from "react-native";
import { View, Text, StyleSheet, Button ,TouchableOpacity,ImageBackground} from "react-native";
import { firebase } from "../config";
import { useNavigation } from "@react-navigation/native";
......@@ -126,7 +126,8 @@ const BmiCalculator = ({ route }) => {
return (
<View style={styles.container}>
<ImageBackground source={require("../assets/backnew.png")} resizeMode="cover" style={styles.image}>
<View style={styles.overlay}>
<Text style={styles.label}>BMI Value:</Text>
<Text style={styles.result}>{bmi}</Text>
......@@ -139,6 +140,8 @@ const BmiCalculator = ({ route }) => {
<TouchableOpacity style={styles.navibutton} onPress={NavigateToNutrition}>
<Text style={styles.buttonText}>Get Nutrition Plan</Text>
</TouchableOpacity>
</View>
</ImageBackground>
</View>
);
};
......@@ -146,15 +149,26 @@ const BmiCalculator = ({ route }) => {
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
justifyContent: "center",
},
image: {
flex: 1,
justifyContent: 'center',
},
overlay: {
flex: 1,
backgroundColor: 'rgba(0, 0, 0, 0.3)',
padding: 20,
justifyContent: 'center',
alignItems: "center",
},
button: {
backgroundColor: "pink",
borderRadius: 5,
padding: 10,
marginTop: 20,
marginTop: 60,
width: 200,
},
......
screens/BmiRecords.js
View file @ 7f4c7993
......@@ -63,14 +63,14 @@ export default BmiRecords;
import React, { useState, useEffect } from "react";
import { View, Text, FlatList, StyleSheet, ScrollView } from "react-native";
import React, { useState, useEffect } from "react";
import { View, Text, FlatList, StyleSheet,ImageBackground } from "react-native";
import { firebase } from "../config";
const BmiRecords = () => {
const [bmiRecords, setBmiRecords] = useState([]);
useEffect(() => {
/*useEffect(() => {
// Fetch BMI records from the database
firebase
.firestore()
......@@ -89,9 +89,39 @@ const BmiRecords = () => {
setBmiRecords(records);
});
}, []);
*/
useEffect(() => {
// Fetch BMI records from the database
const unsubscribe = firebase
.firestore()
.collection("bmiRecords")
.orderBy("date", "desc")
.onSnapshot((querySnapshot) => {
const records = [];
querySnapshot.forEach((doc) => {
const { bmi, date } = doc.data();
// Check if date is not null or undefined before converting to Date object
if (date) {
records.push({
id: doc.id,
bmi,
date: date.toDate(),
});
} else {
console.warn("Skipping a record with null date:", doc.id);
}
});
setBmiRecords(records);
});
// Unsubscribe from the snapshot listener when the component unmounts
return () => unsubscribe();
}, []);
return (
<ScrollView style={styles.container}>
<View style={styles.container}>
<ImageBackground source={require("../assets/backnew.png")} resizeMode="cover" style={styles.image}>
<Text style={styles.label}>BMI Records:</Text>
<FlatList
data={bmiRecords}
......@@ -103,24 +133,26 @@ const BmiRecords = () => {
</View>
)}
/>
</ScrollView>
</ImageBackground>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
paddingHorizontal: 16, // Add some horizontal padding
paddingHorizontal: 10, // Add some horizontal padding
paddingTop: 10, // Add some top padding
},
label: {
fontSize: 24,
fontWeight: "bold",
paddingTop: 60,
marginBottom: 10,
},
recordItem: {
marginVertical: 10,
backgroundColor: "#FFFFFF", // Add a background color
backgroundColor: "transparent", // Add a background color
padding: 10, // Add some padding to each record
borderRadius: 8, // Add border radius for rounded corners
shadowColor: "#000000", // Add shadow (if desired)
......
screens/ChatbotScreen.js
View file @ 7f4c7993
import React, { useState, useRef, useEffect } from 'react';
import { View, Text, TextInput, TouchableOpacity, FlatList, StyleSheet, Image } from 'react-native';
import { View, Text, TextInput, TouchableOpacity, ScrollView, FlatList, StyleSheet, Image } from 'react-native';
import ChatbotAPI from '../Chatbot/python/ChatbotAPI';
import Icon from 'react-native-vector-icons/FontAwesome';
......@@ -10,6 +10,25 @@ const ChatbotScreen = () => {
const [searchQuery, setSearchQuery] = useState('');
const [searchResults, setSearchResults] = useState([]);
const flatListRef = useRef(null);
const [suggestions, setSuggestions] = useState([]);
const [dataset, setDataset] = useState({ intents: [] });
const [suggestionContainerHeight, setSuggestionContainerHeight] = useState(40); // Default small height
const maxSuggestionContainerHeight = 200; // Maximum height when expanded
useEffect(() => {
// Read the local JSON file
const readLocalJsonFile = () => {
try {
const data = require('../Chatbot/python/q_and_a.json'); // Replace with your file name
setDataset(data); // Set your dataset
} catch (error) {
console.error('Error reading local JSON file:', error);
}
};
readLocalJsonFile();
}, []); // Make sure this runs once when the component is mounted
const handleEditClick = (message) => {
setEditingMessage(message);
......@@ -63,6 +82,11 @@ const ChatbotScreen = () => {
setEditingMessage(null);
};
const onSuggestionPress = (question) => {
setInputText(question);
setSuggestions([]); // Hide suggestions when a suggestion is selected
};
const filterMessages = (query) => {
if (query.trim() === '') {
setSearchResults([]);
......@@ -74,6 +98,28 @@ const ChatbotScreen = () => {
}
};
const filterSuggestions = (input) => {
if (input) {
const filteredQuestions = [];
for (const intent of dataset.intents) {
for (const pattern of intent.patterns) {
if (pattern.toLowerCase().includes(input.toLowerCase())) {
filteredQuestions.push(pattern);
}
}
}
setSuggestions(filteredQuestions);
// Set the height of the suggestion container based on the number of suggestions
const newHeight = Math.min(filteredQuestions.length * 40, maxSuggestionContainerHeight);
setSuggestionContainerHeight(newHeight);
} else {
setSuggestions([]);
setSuggestionContainerHeight(40); // Reset to the default small height
}
};
const renderItem = ({ item, index }) => (
<View style={styles.messageContainer}>
......@@ -149,17 +195,68 @@ const ChatbotScreen = () => {
keyExtractor={(item, index) => `${item.text}-${index}`}
inverted
/>
{/* <Autocomplete
data={suggestions}
defaultValue={inputText}
onChangeText={(text) => {
setInputText(text);
filterSuggestions(text);
}}
renderItem={({ item }) => (
<TouchableOpacity onPress={() => onSuggestionPress(item)}>
<Text style={styles.suggestionItem}>{item}</Text>
</TouchableOpacity>
)}
inputContainerStyle={styles.inputContainer}
/> */}
{/* <View style={styles.inputContainer}>
<TextInput
style={styles.input}
value={inputText}
onChangeText={(text) => {
setInputText(text);
filterSuggestions(text);
}}
placeholder="Ask from Me..."
/>
<TouchableOpacity style={styles.sendButton} onPress={handleUserInput}>
<Icon name="send" size={24} color="white" />
</TouchableOpacity>
</View> */}
<View style={styles.inputContainer}>
<TextInput
style={styles.input}
value={inputText}
onChangeText={setInputText}
onChangeText={(text) => {
setInputText(text);
filterSuggestions(text); // Filter and update suggestions as the user types
}}
placeholder="Ask from Me..."
/>
<TouchableOpacity style={styles.sendButton} onPress={handleUserInput}>
<Icon name="send" size={24} color="white" />
</TouchableOpacity>
</View>
<ScrollView style={{ ...styles.suggestionContainer, height: suggestionContainerHeight }}>
{suggestions.map((suggestion, index) => (
<TouchableOpacity
key={index}
style={styles.suggestionItem}
onPress={() => onSuggestionPress(suggestion)}
>
<Text>{suggestion}</Text>
</TouchableOpacity>
))}
</ScrollView>
</View>
);
};
......@@ -283,6 +380,18 @@ const styles = StyleSheet.create({
searchButton: {
padding: 5, // Adjust padding to your preference
},
suggestionContainer: {
maxHeight: 80, // Adjust the height as needed
backgroundColor: 'white',
borderWidth: 1,
borderColor: 'gray',
borderRadius: 20,
},
suggestionItem: {
padding: 8,
borderBottomWidth: 1,
borderBottomColor: 'gray',
},
});
export default ChatbotScreen;
......
screens/MedicineWelcome.js 0 → 100644
View file @ 7f4c7993
import { ImageBackground, StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import React, { Component } from 'react'
import { useNavigation } from "@react-navigation/native";
const image = {};
export default function MedicineWelcome () {
const navigation = useNavigation();
const navigateToMedicine = () => {
navigation.navigate("Prescription");
};
return (
<View style={styles.container}>
<ImageBackground source={require("../assets/MedicineScreen.png")} resizeMode="cover" style={styles.image}>
<View style={styles.overlay}>
<View style={styles.actionButtons}>
<TouchableOpacity style={styles.actionButton} onPress={navigateToMedicine}>
<Text style={styles.buttonText}>Medicine Tracker</Text>
</TouchableOpacity>
</View>
</View>
</ImageBackground>
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
image: {
flex: 1,
justifyContent: 'center',
},
overlay: {
flex: 1,
backgroundColor: 'rgba(0, 0, 0, 0.3)',
padding: 20,
justifyContent: 'center',
},
actionButtons: {
justifyContent: 'space-around',
marginTop: 500,
},
actionButton: {
backgroundColor: 'transparent',
borderWidth: 2,
borderColor: '#FF9DD2', // Pink border color
paddingVertical: 20, // Increase button size by adjusting padding
paddingHorizontal: 40, // Increase button size by adjusting padding
borderRadius: 10,
justifyContent: 'center',
alignItems: 'center',
},
buttonText: {
color: 'white',
fontWeight: 'bold',
},
});
screens/MoodDetection.js 0 → 100644
View file @ 7f4c7993
/*
import React, { useState, useEffect } from 'react';
import { View, Text, TouchableOpacity, Image, TextInput, Alert, StyleSheet ,ImageBackground,ScrollView} from 'react-native';
import { Camera } from 'expo-camera';
export default function MoodDetection() {
const [capturedImage, setCapturedImage] = useState(null);
const [userAnswer, setUserAnswer] = useState('');
const [cameraPermission, setCameraPermission] = useState(null);
const [camera, setCamera] = useState(null);
const questionBank = [
'How would you rate your overall mood today? (1-10)',
'On a scale of 1 to 10, how well are you managing stress during your pregnancy?',
'How would you rate your happiness level at this moment? (1-10)',
'On a scale of 1 to 10, how confident do you feel about your pregnancy?',
'On a scale of 1 to 10, how well are you sleeping during your pregnancy?',
'How would you rate your excitement about becoming a mother? (1-10)',
'How would you rate your energy level at this moment? (1-10)',
'How excited are you about the upcoming addition to your family? (Rate 1-10)',
'How are you feeling today?',
'What is your mood like right now?',
'Tell me about your emotions at this moment.',
// Add more questions as needed
];
const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
useEffect(() => {
(async () => {
const { status } = await Camera.requestPermissionsAsync();
setCameraPermission(status === 'granted');
})();
}, []);
// Automatically change the question when the component is rendered
useEffect(() => {
// Generate a random question index
const randomIndex = Math.floor(Math.random() * questionBank.length);
setCurrentQuestionIndex(randomIndex);
}, []);
const captureImage = async () => {
if (!cameraPermission) {
Alert.alert('Permission Required', 'Please grant camera permission to capture an image.');
return;
}
try {
if (camera) {
const photo = await camera.takePictureAsync();
setCapturedImage(photo.uri);
} else {
Alert.alert('Error', 'Camera not available.');
}
} catch (error) {
Alert.alert('Error', 'Failed to capture an image. Please try again.');
}
};
return (
<ScrollView contentContainerStyle={styles.scrollViewContent}>
<View style={styles.container}>
<ImageBackground source={require("../assets/Nutritionbackground.png")} resizeMode="cover" style={styles.image}>
<View style={styles.overlay}>
<Text style={styles.title}>Mood Detection</Text>
<Text style={styles.questionText}>{questionBank[currentQuestionIndex]}</Text>
<TextInput
style={styles.answerInput}
placeholder="Type your answer here"
value={userAnswer}
onChangeText={(text) => setUserAnswer(text)}
/>
<Camera
style={styles.camera}
type={Camera.Constants.Type.front}
ref={(ref) => setCamera(ref)}
/>
{capturedImage && (
<Image source={{ uri: capturedImage }} style={styles.resultImage} />
)}
<TouchableOpacity style={styles.button} onPress={captureImage}>
<Text style={styles.buttonText} >Analyze Mood</Text>
</TouchableOpacity>
</View>
</ImageBackground>
</View>
</ScrollView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
scrollViewContent: {
minHeight: '100%', // Set a minimum height to enable scrolling
},
overlay: {
flex: 1,
backgroundColor: 'rgba(0, 0, 0, 0.3)',
alignItems: "center",
},
image: {
flex: 1,
justifyContent: 'center',
},
title: {
fontSize: 24,
fontWeight: 'bold',
marginTop: 95, // Adjusted margin to move the title to the top
},
questionText: {
fontSize: 18,
marginBottom: 20,
paddingRight:10,
paddingLeft:10,
marginTop: 10,
},
camera: {
flex: 1,
marginTop: 150,
width: '80%',
},
answerInput: {
width: '80%',
borderWidth: 1,
borderColor: 'gray',
padding: 10,
},
resultImage: {
width: 200,
height: 200,
marginTop: 170,
},
button: {
borderRadius: 5,
backgroundColor: 'transparent',
borderWidth: 2,
borderColor: '#FF9DD2', // Pink border color
paddingVertical: 20, // Increase button size by adjusting padding
paddingHorizontal: 40, // Increase button size by adjusting padding
borderRadius: 10,
justifyContent: 'center',
alignItems: 'center',
marginTop: 40,
width: '70%',
},
buttonText: {
color: 'black',
fontWeight: 'bold',
},
});
*/
import React, { useState, useEffect } from 'react';
import { View, Text, TouchableOpacity, Image, TextInput, Alert, StyleSheet,ImageBackground } from 'react-native';
import { Camera } from 'expo-camera';
export default function MoodDetection() {
const [capturedImage, setCapturedImage] = useState(null);
const [userAnswer, setUserAnswer] = useState('');
const [cameraPermission, setCameraPermission] = useState(null);
const [camera, setCamera] = useState(null);
const questionBank = [
'How would you rate your overall mood today? (1-10)',
'On a scale of 1 to 10, how well are you managing stress during your pregnancy?',
'How would you rate your happiness level at this moment? (1-10)',
'On a scale of 1 to 10, how confident do you feel about your pregnancy?',
'On a scale of 1 to 10, how well are you sleeping during your pregnancy?',
'How would you rate your excitement about becoming a mother? (1-10)',
'How would you rate your energy level at this moment? (1-10)',
'How excited are you about the upcoming addition to your family? (Rate 1-10)',
'How are you feeling today?',
'What is your mood like right now?',
'Tell me about your emotions at this moment.',
];
const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
useEffect(() => {
(async () => {
const { status } = await Camera.requestPermissionsAsync();
setCameraPermission(status === 'granted');
})();
}, []);
useEffect(() => {
// Generate a random question index
const randomIndex = Math.floor(Math.random() * questionBank.length);
setCurrentQuestionIndex(randomIndex);
}, []);
const captureImage = async () => {
if (!cameraPermission) {
Alert.alert('Permission Required', 'Please grant camera permission to capture an image.');
return;
}
try {
if (camera) {
const photo = await camera.takePictureAsync();
setCapturedImage(photo.uri);
} else {
Alert.alert('Error', 'Camera not available.');
}
} catch (error) {
Alert.alert('Error', 'Failed to capture an image. Please try again.');
}
};
return (
<View style={styles.container}>
<ImageBackground source={require("../assets/Nutritionbackground.png")} resizeMode="cover" style={styles.image}>
<View style={styles.overlay}>
<Text style={styles.title}>Mood Detection</Text>
<Text style={styles.questionText}>{questionBank[currentQuestionIndex]}</Text>
<TextInput
style={styles.answerInput}
placeholder="Type your answer here"
value={userAnswer}
onChangeText={(text) => setUserAnswer(text)}
/>
<Camera
style={{ width: 1, height: 1, position: 'absolute' }}
type={Camera.Constants.Type.front}
ref={(ref) => setCamera(ref)}
/>
{capturedImage && (
<Image source={{ uri: capturedImage }} style={styles.resultImage} />
)}
<TouchableOpacity style={styles.button} onPress={captureImage}>
<Text style={styles.buttonText} >Analyze Mood</Text>
</TouchableOpacity>
</View>
</ImageBackground>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
overlay: {
flex: 1,
backgroundColor: 'rgba(0, 0, 0, 0.3)',
alignItems: "center",
},
image: {
flex: 1,
justifyContent: 'center',
},
title: {
fontSize: 24,
fontWeight: 'bold',
marginTop: 95, // Adjusted margin to move the title to the top
},
questionText: {
fontSize: 18,
marginBottom: 20,
paddingRight:10,
paddingLeft:10,
marginTop: 10,
},
camera: {
flex: 1,
width: '100%',
},
answerInput: {
width: '80%',
borderWidth: 1,
borderColor: 'gray',
padding: 10,
},
resultImage: {
width: 200,
height: 200,
marginTop: 170,
},
button: {
borderRadius: 5,
backgroundColor: 'transparent',
borderWidth: 2,
borderColor: '#FF9DD2', // Pink border color
paddingVertical: 20, // Increase button size by adjusting padding
paddingHorizontal: 40, // Increase button size by adjusting padding
borderRadius: 10,
justifyContent: 'center',
alignItems: 'center',
marginBottom: 150,
marginTop: 90,
width: '70%',
},
buttonText: {
color: 'black',
fontWeight: 'bold',
},
});
screens/MoodWelcome.js 0 → 100644
View file @ 7f4c7993
import { ImageBackground, StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import React, { Component } from 'react'
import { useNavigation } from "@react-navigation/native";
const image = {};
export default function MoodWelcome () {
const navigation = useNavigation();
const navigateToMood = () => {
navigation.navigate("mood");
};
return (
<View style={styles.container}>
<ImageBackground source={require("../assets/MoodScreen.png")} resizeMode="cover" style={styles.image}>
<View style={styles.overlay}>
<View style={styles.actionButtons}>
<TouchableOpacity style={styles.actionButton} onPress={navigateToMood}>
<Text style={styles.buttonText}>Let's Start</Text>
</TouchableOpacity>
</View>
</View>
</ImageBackground>
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
image: {
flex: 1,
justifyContent: 'center',
},
overlay: {
flex: 1,
backgroundColor: 'rgba(0, 0, 0, 0.3)',
padding: 20,
justifyContent: 'center',
},
actionButtons: {
justifyContent: 'space-around',
marginTop: 500,
},
actionButton: {
backgroundColor: 'transparent',
borderWidth: 2,
borderColor: '#FF9DD2', // Pink border color
paddingVertical: 20, // Increase button size by adjusting padding
paddingHorizontal: 40, // Increase button size by adjusting padding
borderRadius: 10,
justifyContent: 'center',
alignItems: 'center',
},
buttonText: {
color: 'black',
fontSize: 20,
fontWeight: 'bold',
},
});
screens/Nutrition.js
View file @ 7f4c7993
This diff is collapsed.
screens/NutritionWelcome.js 0 → 100644
View file @ 7f4c7993
import { ImageBackground, StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import React, { Component } from 'react'
import { useNavigation } from "@react-navigation/native";
export default function NutritionWelcome () {
const navigation = useNavigation();
const navigateToNutrition = () => {
navigation.navigate("bmi");
};
const navigateToPreviousPlan = () => {
navigation.navigate("PreviousPlan");
};
return (
<View style={styles.container}>
<ImageBackground source={require("../assets/nutrition.png")} resizeMode="cover" style={styles.image}>
<View style={styles.overlay}>
<View style={styles.actionButtons}>
<TouchableOpacity style={styles.actionButton} onPress={navigateToNutrition}>
<Text style={styles.buttonText}>Nutrition Tracker</Text>
</TouchableOpacity>
<TouchableOpacity style={[styles.actionButton, { marginTop: 20 }]} onPress={navigateToPreviousPlan} >
<Text style={styles.buttonText}>Current Plan</Text>
</TouchableOpacity>
</View>
</View>
</ImageBackground>
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
image: {
flex: 1,
justifyContent: 'center',
},
overlay: {
flex: 1,
backgroundColor: 'rgba(0, 0, 0, 0.3)',
padding: 20,
justifyContent: 'center',
},
actionButtons: {
justifyContent: 'space-around',
marginTop: 500,
},
actionButton: {
backgroundColor: 'transparent',
borderWidth: 2,
borderColor: '#FF9DD2', // Pink border color
paddingVertical: 20, // Increase button size by adjusting padding
paddingHorizontal: 40, // Increase button size by adjusting padding
borderRadius: 10,
justifyContent: 'center',
alignItems: 'center',
},
buttonText: {
color: 'white',
fontWeight: 'bold',
},
});
screens/Plan.js
View file @ 7f4c7993
import React, { useState, useEffect } from "react";
import { View, Text, StyleSheet } from "react-native";
import { ScrollView } from "react-native-gesture-handler";
import { firebase } from "../config";
import React, { useEffect } from 'react';
import { View, Text, Image, ScrollView, TouchableOpacity, StyleSheet, ImageBackground} from 'react-native';
import { firebase } from '../config'; // Make sure to import 'firestore' and 'firebase' correctly.
const Plan = ({ bmi }) => {
const [mealPlan, setMealPlan] = useState(null);
export default function Plan({ route }) {
// Extract nutritionPlan from route.params
const { nutritionPlan } = route.params;
useEffect(() => {
// Fetch the meal plan based on the BMI value from Firebase
const fetchMealPlan = async () => {
try {
const mealPlanSnapshot = await firebase
.firestore()
.collection("nutrition_plan")
.where("bmiRange", "==", getBmiRange(bmi))
.get();
// Function to save the nutritionPlan to Firestor
const savePlanToDatabase = async (nutritionPlan) => {
try {
const timestamp = firebase.firestore.FieldValue.serverTimestamp();
const data = {
nutritionPlan: nutritionPlan,
date: timestamp,
};
if (!mealPlanSnapshot.empty) {
// Assuming there's only one matching meal plan, but you can handle multiple results if needed
const mealPlanData = mealPlanSnapshot.docs[0].data();
setMealPlan(mealPlanData);
}
} catch (error) {
console.error("Error fetching meal plan:", error);
}
};
if (bmi) {
fetchMealPlan();
}
}, [bmi]);
// Function to determine the BMI range based on value
const getBmiRange = (bmiValue) => {
// Define your BMI ranges and return the appropriate range based on the value
// Example:
if (bmiValue < 18.5) {
return "Underweight";
} else if (bmiValue >= 18.5 && bmiValue < 24.9) {
return "Normal";
} else if (bmiValue >= 24.9 && bmiValue < 29.9) {
return "Overweight";
} else {
return "Obese";
const docRef = await firebase.firestore().collection("mealPlans").add(data);
console.log("Meal plan saved with ID:", docRef.id);
} catch (error) {
console.error('Error saving Nutrition Plan to Firestore: ', error);
}
};
}
return (
<View style={styles.container}>
<Text style={styles.label}>Meal Plan:</Text>
{mealPlan ? (
<View>
<Text>{mealPlan.breakfast}</Text>
<Text>{mealPlan.lunch}</Text>
<Text>{mealPlan.dinner}</Text>
</View>
) : (
<Text>No meal plan available .</Text>
)}
</View>
<ScrollView contentContainerStyle={styles.container}>
<ImageBackground source={require("../assets/plan1.png")} resizeMode="cover" style={styles.image}>
<View style={styles.overlay}>
{/* Nutrition Plan */}
<Text style={styles.title}>Nutrition Plan:</Text>
<Text style={styles.nutritionPlan}>{nutritionPlan}</Text>
{/* Save Plan Button */}
<TouchableOpacity style={styles.button} onPress={savePlanToDatabase}>
<Text>Save Plan</Text>
</TouchableOpacity>
</View>
</ImageBackground>
</ScrollView>
);
};
}
const styles = StyleSheet.create({
container: {
padding: 16,
},
image: {
flex: 1,
alignItems: "center",
justifyContent: "center",
justifyContent: 'center',
},
label: {
fontSize: 24,
fontWeight: "bold",
marginBottom: 10,
overlay: {
flex: 1,
backgroundColor: 'rgba(0, 0, 0, 0.3)',
padding: 20,
justifyContent: 'center',
},
title: {
fontSize: 20,
fontWeight: 'bold',
marginTop: 16,
},
nutritionPlan: {
fontSize: 16,
marginTop: 8,
},
button: {
backgroundColor: "#FF9DD2",
padding: 12,
borderRadius: 8,
alignItems: 'center',
marginTop: 16,
},
buttonText: {
color: 'white',
},
});
export default Plan;
screens/PreviousPlan.js 0 → 100644
View file @ 7f4c7993
import { ImageBackground, StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import React, { Component } from 'react'
export default function PreviousPlan () {
return (
<View style={styles.container}>
<ImageBackground source={require("../assets/plan2.png")} resizeMode="cover" style={styles.image}>
<View style={styles.overlay}>
</View>
</ImageBackground>
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
image: {
flex: 1,
justifyContent: 'center',
},
overlay: {
flex: 1,
backgroundColor: 'rgba(0, 0, 0, 0.3)',
padding: 20,
justifyContent: 'center',
},
actionButtons: {
justifyContent: 'space-around',
marginTop: 500,
},
actionButton: {
backgroundColor: 'transparent',
borderWidth: 2,
borderColor: '#FF9DD2', // Pink border color
paddingVertical: 20, // Increase button size by adjusting padding
paddingHorizontal: 40, // Increase button size by adjusting padding
borderRadius: 10,
justifyContent: 'center',
alignItems: 'center',
},
buttonText: {
color: 'white',
fontWeight: 'bold',
},
});
screens/Sidebar.js
View file @ 7f4c7993
import React, { useState } from "react";
import { View, TouchableOpacity, Text, StyleSheet } from "react-native";
import { View, TouchableOpacity, Text, StyleSheet, ImageBackground } from "react-native";
import { useNavigation } from "@react-navigation/native";
import backgroundImage from '../assets/nav.png';
const Sidebar = () => {
const [activeTab, setActiveTab] = useState(0);
......@@ -9,9 +10,10 @@ const Sidebar = () => {
const handleTabPress = (tabIndex) => {
setActiveTab(tabIndex);
if (tabIndex === 0) {
navigation.navigate("UserProfile");
navigation.navigate("Profile");
}if (tabIndex === 1){
navigation.navigate("MedHome");
navigation.navigate("MedicineWelcome");
}if (tabIndex === 2){
navigation.navigate("WelcomeScreen");
}if (tabIndex === 3){
......@@ -21,51 +23,60 @@ const Sidebar = () => {
}
};
return (
<View style={styles.sidebar}>
<TouchableOpacity
style={[styles.tab, activeTab === 0 && styles.activeTab]}
onPress={() => handleTabPress(0)}
>
<Text style={styles.tabText}>Profile</Text>
</TouchableOpacity>
<TouchableOpacity
style={[styles.tab, activeTab === 1 && styles.activeTab]}
onPress={() => handleTabPress(1)}
>
<Text style={styles.tabText}>My Medicines</Text>
</TouchableOpacity>
<TouchableOpacity
style={[styles.tab, activeTab === 2 && styles.activeTab]}
onPress={() => handleTabPress(2)}
>
<Text style={styles.tabText}>Chat</Text>
</TouchableOpacity>
<TouchableOpacity
style={[styles.tab, activeTab === 3 && styles.activeTab]}
onPress={() => handleTabPress(3)}
>
<Text style={styles.tabText}>Food Plans</Text>
</TouchableOpacity>
<TouchableOpacity
style={[styles.tab, activeTab === 4 && styles.activeTab]}
onPress={() => handleTabPress(4)}
>
<Text style={styles.tabText}>Baby Growth</Text>
</TouchableOpacity>
</View>
<ImageBackground source={backgroundImage} style={styles.backgroundImage}>
<View style={styles.sidebar}>
<TouchableOpacity
style={[styles.tab, activeTab === 0 && styles.activeTab]}
onPress={() => handleTabPress(0)}
>
<Text style={styles.tabText}>Profile</Text>
</TouchableOpacity>
<TouchableOpacity
style={[styles.tab, activeTab === 1 && styles.activeTab]}
onPress={() => handleTabPress(1)}
>
<Text style={styles.tabText}>My Medicines</Text>
</TouchableOpacity>
<TouchableOpacity
style={[styles.tab, activeTab === 2 && styles.activeTab]}
onPress={() => handleTabPress(2)}
>
<Text style={styles.tabText}>Chat</Text>
</TouchableOpacity>
<TouchableOpacity
style={[styles.tab, activeTab === 3 && styles.activeTab]}
onPress={() => handleTabPress(3)}
>
<Text style={styles.tabText}>Food Plans</Text>
</TouchableOpacity>
<TouchableOpacity
style={[styles.tab, activeTab === 4 && styles.activeTab]}
onPress={() => handleTabPress(4)}
>
<Text style={styles.tabText}>Baby Growth</Text>
</TouchableOpacity>
<TouchableOpacity
style={[styles.tab, activeTab === 5 && styles.activeTab]}
onPress={() => handleTabPress(5)}
>
<Text style={styles.tabText}>Mood Detection</Text>
</TouchableOpacity>
</View>
</ImageBackground>
);
};
const styles = StyleSheet.create({
backgroundImage: {
flex: 1,
resizeMode: "cover", // or "contain" for different resizing options
},
sidebar: {
flex: 1,
backgroundColor: "#F5F5F5",
paddingTop: 40,
paddingHorizontal: 20,
},
......@@ -75,10 +86,11 @@ const styles = StyleSheet.create({
borderRadius: 5,
},
activeTab: {
backgroundColor: "#FF9DD2",
backgroundColor: 'transparent',
borderWidth: 2,
borderColor: '#FF9DD2', // Pink border color
},
tabText: {
fontSize: 18,
fontWeight: "bold",
textAlign: "left",
......
screens/Signup.js
View file @ 7f4c7993
import React, { useState, useEffect } from 'react';
import { View, TextInput, Button, StyleSheet, Text, ScrollView } from 'react-native';
import { View, TextInput, Button, StyleSheet, Text, ScrollView ,ImageBackground} from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { firebase } from "../config";
import { Alert } from 'react-native';
......@@ -81,8 +81,12 @@ const Signup = ({ route }) => {
return (
<View style={styles.body}>
<ScrollView>
<Text style={styles.pageTitle}>Sign Up</Text>
<ImageBackground source={require("../assets/signup.png")} resizeMode="cover" style={styles.image}>
<View style={styles.overlay}>
<View style={styles.container}>
<TextInput
placeholder="User Name"
......@@ -122,23 +126,40 @@ const Signup = ({ route }) => {
<Button title="Sign Up" onPress={saveUserData} />
</View>
<View>
<Button title="Sign In" onPress={handleSignIn} />
<Button title="Sign In" style={ styles.signin} onPress={handleSignIn} />
</View>
</ScrollView>
</View>
</ImageBackground>
</View>
);
};
const styles = StyleSheet.create({
container: {
backgroundColor: "#e5e5e5",
padding: 15,
borderRadius: 15,
margin: 5,
marginHorizontal: 10,
flexDirection: "row",
alignItems: "center",
},
image: {
flex: 1,
justifyContent: 'center',
},
signin: {
marginTop: 20
},
overlay: {
flex: 1,
backgroundColor: 'rgba(0, 0, 0, 0.3)',
padding: 20,
justifyContent: 'center',
},
input: {
borderWidth: 1,
borderColor: 'gray',
......
screens/SuggestionComponent.js 0 → 100644
View file @ 7f4c7993
import React from 'react';
import { View, Text, TouchableOpacity, FlatList } from 'react-native';
const SuggestionComponent = ({ suggestions, onSuggestionPress }) => {
return (
<View>
<FlatList
data={suggestions}
keyExtractor={(item) => item}
renderItem={({ item }) => (
<TouchableOpacity onPress={() => onSuggestionPress(item)}>
<Text>{item}</Text>
</TouchableOpacity>
)}
/>
</View>
);
};
export default SuggestionComponent;
screens/USWelcome.js 0 → 100644
View file @ 7f4c7993
import { ImageBackground, StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import React, { Component } from 'react'
import { useNavigation } from "@react-navigation/native";
const image = {};
export default function USWelcome () {
const navigation = useNavigation();
const navigateToUS = () => {
navigation.navigate("UsImage");
};
return (
<View style={styles.container}>
<ImageBackground source={require("../assets/us.png")} resizeMode="cover" style={styles.image}>
<View style={styles.overlay}>
<View style={styles.actionButtons}>
<TouchableOpacity style={styles.actionButton} onPress={navigateToUS}>
<Text style={styles.buttonText}>Baby Growth Predictor</Text>
</TouchableOpacity>
</View>
</View>
</ImageBackground>
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
image: {
flex: 1,
justifyContent: 'center',
},
overlay: {
flex: 1,
backgroundColor: 'rgba(0, 0, 0, 0.3)',
padding: 20,
justifyContent: 'center',
},
actionButtons: {
justifyContent: 'space-around',
marginTop: 500,
},
actionButton: {
backgroundColor: 'transparent',
borderWidth: 2,
borderColor: '#FF9DD2', // Pink border color
paddingVertical: 20, // Increase button size by adjusting padding
paddingHorizontal: 40, // Increase button size by adjusting padding
borderRadius: 10,
justifyContent: 'center',
alignItems: 'center',
},
buttonText: {
color: 'white',
fontWeight: 'bold',
},
});
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