Skip to content

T
TMP-23-068
Commit a0ab8409 authored by Yasara19's avatar Yasara19
Browse files
Options

Nutrition Plan UI

parent b2d70950
Hide whitespace changes
Inline Side-by-side
Showing with 174 additions and 34 deletions
screens/BmiCalculator.js
View file @ a0ab8409
......@@ -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 @ a0ab8409
......@@ -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/Nutrition.js
View file @ a0ab8409
import React, { useState } from 'react';
import { Button, Image, Text, View, TextInput, ScrollView,StyleSheet,TouchableOpacity } from 'react-native';
import { Button, Image, Text, View, TextInput, ScrollView,StyleSheet,TouchableOpacity,ImageBackground } from 'react-native';
import * as ImagePicker from 'expo-image-picker';
import axios from 'axios';
import { useNavigation } from "@react-navigation/native";
......@@ -15,6 +13,9 @@ export default function Nutrition({ route }) {
const [otherModelResult, setOtherModelResult] = useState('');
const navigation = useNavigation();
const { bmi } = route.params;
const [isPlanButtonVisible, setIsPlanButtonVisible] = useState(false);
const [isDataReady, setIsDataReady] = useState(false);
const pickImage = async (reportType) => {
const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
......@@ -68,11 +69,22 @@ export default function Nutrition({ route }) {
}
};
const sendToOtherModel = () => {
/* const sendToOtherModel = () => {
if (!resultCBC || !resultOGTT || !bmi) {
alert('Please provide Hemoglobin, Glucose, and BMI values.');
return;
}
*/
const sendToOtherModel = () => {
// Check if at least one of the required data is available
if (resultCBC || resultOGTT || bmi) {
setIsDataReady(true);
} else {
alert('Please provide Hemoglobin, Glucose, or BMI values.');
}
console.log(parseFloat(resultCBC));
console.log(parseFloat(resultOGTT));
......@@ -109,10 +121,13 @@ export default function Nutrition({ route }) {
const formattedMealPlan = customText.replace(/;/g, '\n');
setOtherModelResult(formattedMealPlan);
// setOtherModelResult(customText);
console.log(response.data.prediction);
// Set the state variable to make the "Get Nutrition Plan" button visible
setIsPlanButtonVisible(true);
})
.catch(error => {
console.error('Error sending data to other model:', error);
alert('Error occurred while sending data to other model.');
});
};
......@@ -125,6 +140,7 @@ export default function Nutrition({ route }) {
return (
<ScrollView contentContainerStyle={styles.scrollViewContent}>
<ImageBackground source={require("../assets/nutrition.png")} resizeMode="cover" style={styles.image}>
<View style={{ flex: 1 }}>
<View style={styles.container}>
<View style={styles.subContainer}>
......@@ -160,13 +176,18 @@ export default function Nutrition({ route }) {
<Text style={styles.buttonText}>Save</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.navibutton} onPress={navigateToPlan}>
<Text style={styles.buttonText}>Get Nutrition Plan</Text>
</TouchableOpacity>
{/* Conditionally render the "Get Nutrition Plan" button */}
{isPlanButtonVisible && (
<TouchableOpacity style={styles.navibutton} onPress={navigateToPlan}>
<Text style={styles.buttonText}>Get Nutrition Plan</Text>
</TouchableOpacity>
)}
</View>
</View>
</View>
</ImageBackground>
</ScrollView>
);
}
......@@ -208,12 +229,13 @@ const styles = StyleSheet.create({
},
labelText:{
fontWeight: "bold",
fontSize: 12,
color: "black",
fontSize: 15,
},
bmiText:{
fontWeight: "bold",
fontSize: 15,
fontSize: 20,
},
navibutton:{
......
screens/Plan.js
View file @ a0ab8409
import React, { useEffect } from 'react';
import { View, Text, Image, ScrollView, TouchableOpacity, StyleSheet } from 'react-native';
import { View, Text, Image, ScrollView, TouchableOpacity, StyleSheet, ImageBackground} from 'react-native';
import { firebase } from '../config'; // Make sure to import 'firestore' and 'firebase' correctly.
export default function Plan({ route }) {
// Extract nutritionPlan from route.params
const { nutritionPlan } = route.params;
// Function to save the nutritionPlan to Firestore
// Function to save the nutritionPlan to Firestor
const savePlanToDatabase = async (nutritionPlan) => {
try {
const timestamp = firebase.firestore.FieldValue.serverTimestamp();
......@@ -25,11 +26,11 @@ export default function Plan({ route }) {
return (
<ScrollView contentContainerStyle={styles.container}>
{/* Image at the top */}
<Image
source={require('../assets/bmi.jpg')}
style={styles.image}
/>
<ImageBackground source={require("../assets/plan1.png")} resizeMode="cover" style={styles.image}>
<View style={styles.overlay}>
{/* Nutrition Plan */}
<Text style={styles.title}>Nutrition Plan:</Text>
......@@ -39,6 +40,8 @@ export default function Plan({ route }) {
<TouchableOpacity style={styles.button} onPress={savePlanToDatabase}>
<Text>Save Plan</Text>
</TouchableOpacity>
</View>
</ImageBackground>
</ScrollView>
);
}
......@@ -47,9 +50,17 @@ const styles = StyleSheet.create({
container: {
padding: 16,
},
image: {
width: '100%',
height: 200, // Adjust the height as needed
flex: 1,
justifyContent: 'center',
},
overlay: {
flex: 1,
backgroundColor: 'rgba(0, 0, 0, 0.3)',
padding: 20,
justifyContent: 'center',
},
title: {
fontSize: 20,
......
screens/PreviousPlan.js 0 → 100644
View file @ a0ab8409
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',
},
});
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