diff --git a/frontend/assets/butterfly.png b/frontend/assets/butterfly.png new file mode 100644 index 0000000..5bac970 Binary files /dev/null and b/frontend/assets/butterfly.png differ diff --git a/frontend/assets/colorConstants.tsx b/frontend/assets/colorConstants.tsx index ea7c9e5..3fddb95 100644 --- a/frontend/assets/colorConstants.tsx +++ b/frontend/assets/colorConstants.tsx @@ -12,6 +12,7 @@ const Colors = { TRANSGREEN: '#366959', BLACKTRANS: '#000000aa', BLUE: 'blue', + GREYGREEN: '#B4C792', }; -export default Colors; \ No newline at end of file +export default Colors; diff --git a/frontend/src/screens/Energy/energyHistory.tsx b/frontend/src/screens/Energy/energyHistory.tsx index d1787ba..63510b9 100644 --- a/frontend/src/screens/Energy/energyHistory.tsx +++ b/frontend/src/screens/Energy/energyHistory.tsx @@ -1,5 +1,14 @@ import React, { useEffect, useState } from 'react'; -import { View, Text, TouchableOpacity, StyleSheet, SafeAreaView, ScrollView } from 'react-native'; +import { + View, + Text, + TouchableOpacity, + StyleSheet, + SafeAreaView, + ScrollView, + FlatList, + ImageBackground, +} from 'react-native'; import Colors from '../../../assets/colorConstants'; import { useFonts } from 'expo-font'; import { BarChart } from 'react-native-chart-kit'; @@ -8,12 +17,15 @@ import { type EnergyEntry, type MonthlyEntry } from '../../models/Energy'; import { useNavigation } from '@react-navigation/native'; import { type StackNavigationProp } from '@react-navigation/stack'; import { type RootStackParamList } from '../../components/types'; -import WidgetBox from '../../widgets/widgetBox'; export type StackNavigation = StackNavigationProp; +interface Recommendation { + id: number; + name: string; + description: string; +} export default function EnergyHistory(): JSX.Element { - const [expandedStates, setExpandedStates] = useState(Array(100).fill(false)); const [monthlyData, setMonthlyData] = useState(); const [startDate] = useState(new Date(2023, 8, 1)); @@ -37,20 +49,63 @@ export default function EnergyHistory(): JSX.Element { }); useEffect(() => { - void EnergyAPI.getEnergyEntriesForUserUsingDataRange( - startDate, endDate).then((res) => { + void EnergyAPI.getEnergyEntriesForUserUsingDataRange(startDate, endDate).then((res) => { if (res != null) { if (res.monthlyData != null) { - setMonthlyData(res.monthlyData) + setMonthlyData(res.monthlyData); } } }); void EnergyAPI.getEnergyMetricForToday().then((res) => { if (res != null) { - setEnergyEntry(res) + setEnergyEntry(res); } }); - }, [endDate, loaded, startDate, navigation]) + }, [endDate, loaded, startDate, navigation]); + const [expandedItem, setExpandedItem] = useState(null); + + const data: Recommendation[] = [ + { + id: 1, + name: 'Electricity', + description: + 'Your electricity usage is above the threshold, consider keeping your lights turned off when not needed.', + }, + { + id: 2, + name: 'Natural gas', + description: + 'Your natural gas usage is above the threshold, consider switching to a fuel efficient furnance to heat your home instead.', + }, + { + id: 3, + name: 'Natural gas', + description: + 'Your natural gas usage is above the threshold, consider installing a smart thermostat to heat your household more efficiently.', + }, + // Add more items here + ]; + + const toggleExpand = (itemId: number): void => { + setExpandedItem(expandedItem === itemId ? null : itemId); + }; + + const renderListItem = ({ item }: { item: Recommendation }): JSX.Element => { + const isExpanded = expandedItem === item.id; + + return ( + + toggleExpand(item.id)}> + {item.name} + + {isExpanded && ( + + Description: {item.description} + + )} + + ); + }; if (!loaded || monthlyData === undefined || energyEntry === undefined) { return <>; @@ -59,68 +114,107 @@ export default function EnergyHistory(): JSX.Element { return ( - {monthlyData.map((chart, index) => ( - - toggleExpanded(index)} style={styles.tab}> - {chart.month} - - {Boolean(expandedStates[index]) && ( - - Emissions from energy in {chart.month} - - Colors.DARKLIMEGREEN, - labelColor: (opacity = 1) => Colors.DARKLIMEGREEN, - style: { - borderRadius: 16, - }, - propsForDots: { - r: '6', - strokeWidth: '2', - stroke: '#ffa726', - }, - }} - verticalLabelRotation={0} - showValuesOnTopOfBars - withInnerLines={false} - withHorizontalLabels={false} - /> - + + + + + Energy Footprint + + Your energy footprint is calculated based on your monthly utilities bill and you + province. + + + Fun Fact! Canada is the forth largest suppliers of oil. + - )} + + + + + + History + + index.toString()} + renderItem={({ item, index }) => ( + + toggleExpanded(index)} style={styles.tab}> + {item.month} + + {Boolean(expandedStates[index]) && ( + + Emissions from energy in {item.month} + + Colors.DARKLIMEGREEN, + labelColor: (opacity = 1) => Colors.DARKLIMEGREEN, + style: { + borderRadius: 16, + }, + propsForDots: { + r: '6', + strokeWidth: '2', + stroke: '#ffa726', + }, + }} + verticalLabelRotation={0} + showValuesOnTopOfBars + withInnerLines={false} + withHorizontalLabels={false} + /> + + {/* Add more content here */} + + )} + + )} + nestedScrollEnabled + style={styles.flatListContainer} + /> + + + + + + + Recommendations: + + item.id.toString()} + nestedScrollEnabled + style={styles.flatListContainer} + /> + - ))} + - - - { - navigation.navigate('EnergyEntryEdit'); - }} - > - - - - ); } @@ -132,35 +226,119 @@ const styles = StyleSheet.create({ backgroundColor: Colors.LIGHTFGREEN, }, scrollContainer: { - paddingTop: 60, flex: 1, - paddingHorizontal: 30, backgroundColor: Colors.LIGHTFGREEN, }, - tab: { - backgroundColor: Colors.DARKGREEN, - padding: 25, - borderRadius: 10, - marginBottom: 20, + halfScreen: { + flex: 1, + height: 400, }, - tabTitle: { - fontSize: 18, - fontWeight: 'bold', + imageBackground: { + flex: 1, + resizeMode: 'cover', + justifyContent: 'center', + }, + header: { + fontSize: 30, + color: Colors.WHITE, + fontFamily: 'Montserrat', + fontWeight: '700', + }, + headerGreen: { + fontSize: 30, + color: Colors.DARKGREEN, fontFamily: 'Montserrat', + fontWeight: '700', + }, + discription: { + paddingTop: 15, + fontSize: 16, color: Colors.WHITE, - textAlign: 'center', + fontFamily: 'Montserrat', + fontWeight: '700', }, - tabText: { - fontSize: 13, + headerBox: { + backgroundColor: Colors.BLACKTRANS, + margin: 15, + borderRadius: 10, + }, + headerContainer: { + marginHorizontal: 15, + marginVertical: 20, + }, + leaderBoardWidgetContainer: { + backgroundColor: Colors.DARKGREEN, + margin: 15, + borderRadius: 10, + height: 400, + marginTop: 25, + }, + recommendationContainer: { + backgroundColor: Colors.GREYGREEN, + margin: 15, + borderRadius: 10, + height: 350, + marginTop: 25, + }, + scrollChallengesContainer: { + maxHeight: 250, + maxWidth: 350, + marginTop: 15, + }, + scrollHistoryContainer: { + maxHeight: 300, + maxWidth: 350, + marginTop: 15, + }, + itemContainer: { + padding: 15, + borderRadius: 10, + backgroundColor: Colors.DARKGREEN2, + marginBottom: 10, + }, + itemName: { fontWeight: '700', + fontSize: 16, fontFamily: 'Montserrat', - color: Colors.DARKLIMEGREEN, + color: Colors.WHITE, }, expandedContent: { - marginBottom: 20, + marginTop: 10, + padding: 10, + backgroundColor: Colors.DARKGREEN3, + borderRadius: 10, + width: 320, + }, + historyExpandedContent: { + marginTop: 10, padding: 10, - backgroundColor: Colors.WHITE, + backgroundColor: Colors.DARKGREEN3, + borderRadius: 10, + width: 350, + }, + descriptionText: { + color: Colors.WHITE, + fontFamily: 'Montserrat', + fontSize: 16, + fontWeight: '700', + }, + flatListContainer: { + width: 350, + }, + tab: { + height: 50, + paddingVertical: 8, + paddingHorizontal: 20, borderRadius: 5, + borderWidth: 1, + borderColor: Colors.DARKGREEN2, + backgroundColor: Colors.DARKGREEN2, + marginTop: 15, + }, + tabText: { + fontWeight: '700', + fontFamily: 'Montserrat', + color: Colors.WHITE, }, chartContainer: { overflow: 'hidden', @@ -171,11 +349,11 @@ const styles = StyleSheet.create({ alignSelf: 'center', marginLeft: -50, }, - widgetContainer: { - padding: 10, - flexDirection: 'row', + tabTitle: { + fontSize: 18, + fontWeight: 'bold', + fontFamily: 'Montserrat', + color: Colors.WHITE, + textAlign: 'center', }, - widgetBoarder: { - padding: 10, - } }); diff --git a/frontend/src/screens/Food/foodHistory.tsx b/frontend/src/screens/Food/foodHistory.tsx index b13e306..6aa5e1b 100644 --- a/frontend/src/screens/Food/foodHistory.tsx +++ b/frontend/src/screens/Food/foodHistory.tsx @@ -1,5 +1,14 @@ import React, { useEffect, useState } from 'react'; -import { View, Text, TouchableOpacity, StyleSheet, SafeAreaView, ScrollView } from 'react-native'; +import { + View, + Text, + TouchableOpacity, + StyleSheet, + SafeAreaView, + ScrollView, + FlatList, + ImageBackground, +} from 'react-native'; import Colors from '../../../assets/colorConstants'; import { useFonts } from 'expo-font'; import { BarChart } from 'react-native-chart-kit'; @@ -8,12 +17,15 @@ import { type FoodEntry, type MonthlyEntry } from '../../models/Food'; import { useNavigation } from '@react-navigation/native'; import { type StackNavigationProp } from '@react-navigation/stack'; import { type RootStackParamList } from '../../components/types'; -import WidgetBox from '../../widgets/widgetBox'; export type StackNavigation = StackNavigationProp; +interface Recommendation { + id: number; + name: string; + description: string; +} export default function FoodHistory(): JSX.Element { - const [expandedStates, setExpandedStates] = useState(Array(100).fill(false)); const [monthlyData, setMonthlyData] = useState(); const [startDate] = useState(new Date(2023, 8, 1)); @@ -37,20 +49,58 @@ export default function FoodHistory(): JSX.Element { }); useEffect(() => { - void FoodAPI.getFoodEntriesForUserUsingDataRange( - startDate, endDate).then((res) => { + void FoodAPI.getFoodEntriesForUserUsingDataRange(startDate, endDate).then((res) => { if (res != null) { if (res.monthlyData != null) { - setMonthlyData(res.monthlyData) + setMonthlyData(res.monthlyData); } } }); void FoodAPI.getFoodMetricForToday().then((res) => { if (res != null) { - setFoodEntry(res) + setFoodEntry(res); } }); - }, [endDate, loaded, startDate, navigation]) + }, [endDate, loaded, startDate, navigation]); + + const [expandedItem, setExpandedItem] = useState(null); + + const data: Recommendation[] = [ + { + id: 1, + name: 'Beef', + description: + 'Your beef intake is above the threshold, consider switching to a more carbon efficient type of meat.', + }, + { + id: 2, + name: 'Food waste', + description: + 'Your food waste is above the threshold, consider buying less at the grocery store and checking your fridge for expired food.', + }, + // Add more items here + ]; + + const toggleExpand = (itemId: number): void => { + setExpandedItem(expandedItem === itemId ? null : itemId); + }; + + const renderListItem = ({ item }: { item: Recommendation }): JSX.Element => { + const isExpanded = expandedItem === item.id; + + return ( + + toggleExpand(item.id)}> + {item.name} + + {isExpanded && ( + + Description: {item.description} + + )} + + ); + }; if (!loaded || monthlyData === undefined || foodEntry === undefined) { return <>; @@ -59,68 +109,107 @@ export default function FoodHistory(): JSX.Element { return ( - {monthlyData.map((chart, index) => ( - - toggleExpanded(index)} style={styles.tab}> - {chart.month} - - {Boolean(expandedStates[index]) && ( - - Emissions from food in {chart.month} - - Colors.DARKLIMEGREEN, - labelColor: (opacity = 1) => Colors.DARKLIMEGREEN, - style: { - borderRadius: 16, - }, - propsForDots: { - r: '6', - strokeWidth: '2', - stroke: '#ffa726', - }, - }} - verticalLabelRotation={0} - showValuesOnTopOfBars - withInnerLines={false} - withHorizontalLabels={false} - /> - + + + + + Food Footprint + + Your food footprint is calculated considering the types and quantities of foods + you eat. + + + Fun Fact! Of all foods, beef produces the most carbon emissions due to upkeep. + - )} + + + + + + History + + index.toString()} + renderItem={({ item, index }) => ( + + toggleExpanded(index)} style={styles.tab}> + {item.month} + + {Boolean(expandedStates[index]) && ( + + Emissions from food in {item.month} + + Colors.DARKLIMEGREEN, + labelColor: (opacity = 1) => Colors.DARKLIMEGREEN, + style: { + borderRadius: 16, + }, + propsForDots: { + r: '6', + strokeWidth: '2', + stroke: '#ffa726', + }, + }} + verticalLabelRotation={0} + showValuesOnTopOfBars + withInnerLines={false} + withHorizontalLabels={false} + /> + + {/* Add more content here */} + + )} + + )} + nestedScrollEnabled + style={styles.flatListContainer} + /> + - ))} + + + + + Recommendations: + + item.id.toString()} + nestedScrollEnabled + style={styles.flatListContainer} + /> + + + - - - { - navigation.navigate('FoodEntryEdit'); - }} - > - - - - ); } @@ -132,35 +221,119 @@ const styles = StyleSheet.create({ backgroundColor: Colors.LIGHTFGREEN, }, scrollContainer: { - paddingTop: 60, flex: 1, - paddingHorizontal: 30, backgroundColor: Colors.LIGHTFGREEN, }, - tab: { - backgroundColor: Colors.DARKGREEN, - padding: 25, - borderRadius: 10, - marginBottom: 20, + halfScreen: { + flex: 1, + height: 400, }, - tabTitle: { - fontSize: 18, - fontWeight: 'bold', + imageBackground: { + flex: 1, + resizeMode: 'cover', + justifyContent: 'center', + }, + header: { + fontSize: 30, + color: Colors.WHITE, fontFamily: 'Montserrat', + fontWeight: '700', + }, + headerGreen: { + fontSize: 30, + color: Colors.DARKGREEN, + fontFamily: 'Montserrat', + fontWeight: '700', + }, + discription: { + paddingTop: 15, + fontSize: 16, color: Colors.WHITE, - textAlign: 'center', + fontFamily: 'Montserrat', + fontWeight: '700', }, - tabText: { - fontSize: 13, + headerBox: { + backgroundColor: Colors.BLACKTRANS, + margin: 15, + borderRadius: 10, + }, + headerContainer: { + marginHorizontal: 15, + marginVertical: 20, + }, + leaderBoardWidgetContainer: { + backgroundColor: Colors.DARKGREEN, + margin: 15, + borderRadius: 10, + height: 400, + marginTop: 25, + }, + recommendationContainer: { + backgroundColor: Colors.GREYGREEN, + margin: 15, + borderRadius: 10, + height: 350, + marginTop: 25, + }, + scrollChallengesContainer: { + maxHeight: 250, + maxWidth: 350, + marginTop: 15, + }, + scrollHistoryContainer: { + maxHeight: 300, + maxWidth: 350, + marginTop: 15, + }, + itemContainer: { + padding: 15, + borderRadius: 10, + backgroundColor: Colors.DARKGREEN2, + marginBottom: 10, + }, + itemName: { fontWeight: '700', + fontSize: 16, fontFamily: 'Montserrat', - color: Colors.DARKLIMEGREEN, + color: Colors.WHITE, }, expandedContent: { - marginBottom: 20, + marginTop: 10, + padding: 10, + backgroundColor: Colors.DARKGREEN3, + borderRadius: 10, + width: 320, + }, + historyExpandedContent: { + marginTop: 10, padding: 10, - backgroundColor: Colors.WHITE, + backgroundColor: Colors.DARKGREEN3, + borderRadius: 10, + width: 350, + }, + descriptionText: { + color: Colors.WHITE, + fontFamily: 'Montserrat', + fontSize: 16, + fontWeight: '700', + }, + flatListContainer: { + width: 350, + }, + tab: { + height: 50, + paddingVertical: 8, + paddingHorizontal: 20, borderRadius: 5, + borderWidth: 1, + borderColor: Colors.DARKGREEN2, + backgroundColor: Colors.DARKGREEN2, + marginTop: 15, + }, + tabText: { + fontWeight: '700', + fontFamily: 'Montserrat', + color: Colors.WHITE, }, chartContainer: { overflow: 'hidden', @@ -171,11 +344,11 @@ const styles = StyleSheet.create({ alignSelf: 'center', marginLeft: -50, }, - widgetContainer: { - padding: 10, - flexDirection: 'row', + tabTitle: { + fontSize: 18, + fontWeight: 'bold', + fontFamily: 'Montserrat', + color: Colors.WHITE, + textAlign: 'center', }, - widgetBoarder: { - padding: 10, - } }); diff --git a/frontend/src/screens/Transportation/transportationHistory.tsx b/frontend/src/screens/Transportation/transportationHistory.tsx index 45ea689..3857d74 100644 --- a/frontend/src/screens/Transportation/transportationHistory.tsx +++ b/frontend/src/screens/Transportation/transportationHistory.tsx @@ -1,5 +1,14 @@ import React, { useEffect, useState } from 'react'; -import { View, Text, TouchableOpacity, StyleSheet, SafeAreaView, ScrollView } from 'react-native'; +import { + View, + Text, + TouchableOpacity, + StyleSheet, + SafeAreaView, + ScrollView, + ImageBackground, + FlatList, +} from 'react-native'; import Colors from '../../../assets/colorConstants'; import { useFonts } from 'expo-font'; import { BarChart } from 'react-native-chart-kit'; @@ -8,12 +17,15 @@ import { type TransportationEntry, type MonthlyEntry } from '../../models/Transp import { useNavigation } from '@react-navigation/native'; import { type StackNavigationProp } from '@react-navigation/stack'; import { type RootStackParamList } from '../../components/types'; -import WidgetBox from '../../widgets/widgetBox'; -export type StackNavigation = StackNavigationProp; +export type StackNavigation = StackNavigationProp; +interface Recommendation { + id: number; + name: string; + description: string; +} export default function TransportationHistory(): JSX.Element { - const [expandedStates, setExpandedStates] = useState(Array(100).fill(false)); const [monthlyData, setMonthlyData] = useState(); const [startDate] = useState(new Date(2023, 8, 1)); @@ -37,20 +49,63 @@ export default function TransportationHistory(): JSX.Element { }); useEffect(() => { - void TransportationAPI.getTransportationEntriesForUserUsingDataRange( - startDate, endDate).then((res) => { - if (res != null) { - if (res.monthlyData != null) { - setMonthlyData(res.monthlyData) + void TransportationAPI.getTransportationEntriesForUserUsingDataRange(startDate, endDate).then( + (res) => { + if (res != null) { + if (res.monthlyData != null) { + setMonthlyData(res.monthlyData); + } } } - }); + ); void TransportationAPI.getTransportationMetricForToday().then((res) => { if (res != null) { - setTransportationEntry(res) + setTransportationEntry(res); } }); - }, [endDate, loaded, startDate, navigation]) + }, [endDate, loaded, startDate, navigation]); + + const data: Recommendation[] = [ + { + id: 1, + name: 'Vehicle', + description: + 'The emissions from your vehicle is above the threshold, consider switching to an electrical vehicle.', + }, + { + id: 2, + name: 'Car travel', + description: 'Your car travel is above the treshold, try taking public transit instead.', + }, + { + id: 3, + name: 'Motorbike', + description: 'Your motorike travel is above the threshold, consider biking instead.', + }, + // Add more items here + ]; + + const [expandedItem, setExpandedItem] = useState(null); + const toggleExpand = (itemId: number): void => { + setExpandedItem(expandedItem === itemId ? null : itemId); + }; + + const renderListItem = ({ item }: { item: Recommendation }): JSX.Element => { + const isExpanded = expandedItem === item.id; + + return ( + + toggleExpand(item.id)}> + {item.name} + + {isExpanded && ( + + Description: {item.description} + + )} + + ); + }; if (!loaded || monthlyData === undefined || transportationEntry === undefined) { return <>; @@ -59,68 +114,110 @@ export default function TransportationHistory(): JSX.Element { return ( - {monthlyData.map((chart, index) => ( - - toggleExpanded(index)} style={styles.tab}> - {chart.month} - - {Boolean(expandedStates[index]) && ( - - Emissions from transportation in {chart.month} - - Colors.DARKLIMEGREEN, - labelColor: (opacity = 1) => Colors.DARKLIMEGREEN, - style: { - borderRadius: 16, - }, - propsForDots: { - r: '6', - strokeWidth: '2', - stroke: '#ffa726', - }, - }} - verticalLabelRotation={0} - showValuesOnTopOfBars - withInnerLines={false} - withHorizontalLabels={false} - /> - + + + + + Transportation Footprint + + Your transportation footprint is calculated based on your travel habits and your + vehicle type. + + + Fun Fact! The transportation sector is responsible for 27 percent of greenhouse + gas (GHG) emissions in Canada. + - )} + + + + + + History + + index.toString()} + renderItem={({ item, index }) => ( + + toggleExpanded(index)} style={styles.tab}> + {item.month} + + {Boolean(expandedStates[index]) && ( + + + Emissions from transportation in {item.month} + + + Colors.DARKLIMEGREEN, + labelColor: (opacity = 1) => Colors.DARKLIMEGREEN, + style: { + borderRadius: 16, + }, + propsForDots: { + r: '6', + strokeWidth: '2', + stroke: '#ffa726', + }, + }} + verticalLabelRotation={0} + showValuesOnTopOfBars + withInnerLines={false} + withHorizontalLabels={false} + /> + + {/* Add more content here */} + + )} + + )} + nestedScrollEnabled + style={styles.flatListContainer} + /> + - ))} + + + + + Recommendations: + + item.id.toString()} + nestedScrollEnabled + style={styles.flatListContainer} + /> + + + - - - { - navigation.navigate('TransportationEntryEdit'); - }} - > - - - - ); } @@ -132,35 +229,119 @@ const styles = StyleSheet.create({ backgroundColor: Colors.LIGHTFGREEN, }, scrollContainer: { - paddingTop: 60, flex: 1, - paddingHorizontal: 30, backgroundColor: Colors.LIGHTFGREEN, }, - tab: { - backgroundColor: Colors.DARKGREEN, - padding: 25, - borderRadius: 10, - marginBottom: 20, + halfScreen: { + flex: 1, + height: 400, }, - tabTitle: { - fontSize: 18, - fontWeight: 'bold', + imageBackground: { + flex: 1, + resizeMode: 'cover', + justifyContent: 'center', + }, + header: { + fontSize: 30, + color: Colors.WHITE, fontFamily: 'Montserrat', + fontWeight: '700', + }, + headerGreen: { + fontSize: 30, + color: Colors.DARKGREEN, + fontFamily: 'Montserrat', + fontWeight: '700', + }, + discription: { + paddingTop: 15, + fontSize: 16, color: Colors.WHITE, - textAlign: 'center', + fontFamily: 'Montserrat', + fontWeight: '700', }, - tabText: { - fontSize: 13, + headerBox: { + backgroundColor: Colors.BLACKTRANS, + margin: 15, + borderRadius: 10, + }, + headerContainer: { + marginHorizontal: 15, + marginVertical: 20, + }, + leaderBoardWidgetContainer: { + backgroundColor: Colors.DARKGREEN, + margin: 15, + borderRadius: 10, + height: 400, + marginTop: 25, + }, + recommendationContainer: { + backgroundColor: Colors.GREYGREEN, + margin: 15, + borderRadius: 10, + height: 350, + marginTop: 25, + }, + scrollChallengesContainer: { + maxHeight: 250, + maxWidth: 350, + marginTop: 15, + }, + scrollHistoryContainer: { + maxHeight: 300, + maxWidth: 350, + marginTop: 15, + }, + itemContainer: { + padding: 15, + borderRadius: 10, + backgroundColor: Colors.DARKGREEN2, + marginBottom: 10, + }, + itemName: { fontWeight: '700', + fontSize: 16, fontFamily: 'Montserrat', - color: Colors.DARKLIMEGREEN, + color: Colors.WHITE, }, expandedContent: { - marginBottom: 20, + marginTop: 10, + padding: 10, + backgroundColor: Colors.DARKGREEN3, + borderRadius: 10, + width: 320, + }, + historyExpandedContent: { + marginTop: 10, padding: 10, - backgroundColor: Colors.WHITE, + backgroundColor: Colors.DARKGREEN3, + borderRadius: 10, + width: 350, + }, + descriptionText: { + color: Colors.WHITE, + fontFamily: 'Montserrat', + fontSize: 16, + fontWeight: '700', + }, + flatListContainer: { + width: 350, + }, + tab: { + height: 50, + paddingVertical: 8, + paddingHorizontal: 20, borderRadius: 5, + borderWidth: 1, + borderColor: Colors.DARKGREEN2, + backgroundColor: Colors.DARKGREEN2, + marginTop: 15, + }, + tabText: { + fontWeight: '700', + fontFamily: 'Montserrat', + color: Colors.WHITE, }, chartContainer: { overflow: 'hidden', @@ -171,11 +352,11 @@ const styles = StyleSheet.create({ alignSelf: 'center', marginLeft: -50, }, - widgetContainer: { - padding: 10, - flexDirection: 'row', + tabTitle: { + fontSize: 18, + fontWeight: 'bold', + fontFamily: 'Montserrat', + color: Colors.WHITE, + textAlign: 'center', }, - widgetBoarder: { - padding: 10, - } }); diff --git a/frontend/src/screens/yourForms.tsx b/frontend/src/screens/yourForms.tsx index 707ad61..ee52a29 100644 --- a/frontend/src/screens/yourForms.tsx +++ b/frontend/src/screens/yourForms.tsx @@ -1,32 +1,161 @@ -import React from 'react'; -import { Text, StyleSheet, ScrollView } from 'react-native'; +import React, { useEffect, useState } from 'react'; +import { Text, StyleSheet, ScrollView, View, TouchableOpacity, Image } from 'react-native'; import { useFonts } from 'expo-font'; import Colors from '../../assets/colorConstants'; +import { useNavigation } from '@react-navigation/native'; +import { type StackNavigationProp } from '@react-navigation/stack'; +import { type RootStackParamList } from '../components/types'; +import { TransportationAPI } from '../APIs/TransportationAPI'; +import { type TransportationEntry, type MonthlyEntry } from '../models/Transportation'; +import { FoodAPI } from '../APIs/FoodAPI'; +import { type FoodEntry } from '../models/Food'; +import { EnergyAPI } from '../APIs/EnergyAPI'; +import { type EnergyEntry } from '../models/Energy'; + +export type StackNavigation = StackNavigationProp; export default function YourForms(): JSX.Element { const [loaded] = useFonts({ Montserrat: require('../../assets/fonts/MontserratThinRegular.ttf'), Josefin: require('../../assets/fonts/JosefinSansThinRegular.ttf'), }); + const navigation = useNavigation(); + + const [monthlyData, setMonthlyData] = useState(); + const [startDate] = useState(new Date(2023, 8, 1)); + const [endDate] = useState(new Date(2023, 11, 1)); + const [transportationEntry, setTransportationEntry] = useState(); + const [foodEntry, setFoodEntry] = useState(); + const [energyEntry, setEnergyEntry] = useState(); - if (!loaded) { + useEffect(() => { + void TransportationAPI.getTransportationEntriesForUserUsingDataRange(startDate, endDate).then( + (res) => { + if (res != null) { + if (res.monthlyData != null) { + setMonthlyData(res.monthlyData); + } + } + } + ); + void TransportationAPI.getTransportationMetricForToday().then((res) => { + if (res != null) { + setTransportationEntry(res); + } + }); + void FoodAPI.getFoodEntriesForUserUsingDataRange(startDate, endDate).then((res) => { + if (res != null) { + if (res.monthlyData != null) { + setMonthlyData(res.monthlyData); + } + } + }); + void FoodAPI.getFoodMetricForToday().then((res) => { + if (res != null) { + setFoodEntry(res); + } + }); + void EnergyAPI.getEnergyEntriesForUserUsingDataRange(startDate, endDate).then((res) => { + if (res != null) { + if (res.monthlyData != null) { + setMonthlyData(res.monthlyData); + } + } + }); + void EnergyAPI.getEnergyMetricForToday().then((res) => { + if (res != null) { + setEnergyEntry(res); + } + }); + }, [endDate, loaded, startDate, navigation]); + + if ( + !loaded || + monthlyData === undefined || + transportationEntry === undefined || + foodEntry === undefined || + energyEntry === undefined + ) { return <>; } return ( - Complete your Food 🍉 Quiz! - Complete your Energy 💡 Quiz! - Complete your Transportation 🚗 Quiz! - + + { + navigation.navigate('FoodEntryEdit'); + }} + > + + {' '} + This Week's Food Entry: {foodEntry.carbon_emissions.toString()} + + + { + navigation.navigate('TransportationEntryEdit'); + }} + > + + This Week's Transportation Entry: {transportationEntry.carbon_emissions.toString()} + + + { + navigation.navigate('EnergyEntryEdit'); + }} + > + + {' '} + This Week's Energy Entry: {energyEntry.carbon_emissions.toString()} + + + + + ); } const styles = StyleSheet.create({ container: { - alignItems: 'center', - flexGrow: 1, + flex: 1, + justifyContent: 'space-between', backgroundColor: Colors.LIGHTFGREEN, }, - + tabContainer: { + marginTop: 40, + marginHorizontal: 20, + }, + tab: { + height: 60, + paddingVertical: 8, + paddingHorizontal: 20, + borderRadius: 15, + borderWidth: 1, + borderColor: Colors.GREYGREEN, + backgroundColor: Colors.GREYGREEN, + marginTop: 20, + justifyContent: 'center', + }, + tabText: { + fontWeight: '700', + fontFamily: 'Montserrat', + color: Colors.DARKGREEN, + textAlign: 'left', + fontSize: 16, + }, + bottomImage: { + position: 'absolute', + bottom: 0, // Position at the bottom + width: '100%', // Take full width + height: 400, // Define height as needed or use a fixed value + }, });