From d54bea75b4d8a4514f08abe5e7ab83062a96ee5c Mon Sep 17 00:00:00 2001 From: Yazan Armoush Date: Fri, 24 Nov 2023 13:38:39 -0500 Subject: [PATCH] Fixed Conflict --- frontend/src/components/appNavigation.tsx | 2 + .../src/screens/transportationEntryEdit.tsx | 282 +++++++++ frontend/src/screens/transportationForum.tsx | 599 ++++++++++-------- .../src/screens/transportationHistory.tsx | 2 +- 4 files changed, 614 insertions(+), 271 deletions(-) create mode 100644 frontend/src/screens/transportationEntryEdit.tsx diff --git a/frontend/src/components/appNavigation.tsx b/frontend/src/components/appNavigation.tsx index 74ac18f..bb8afc8 100644 --- a/frontend/src/components/appNavigation.tsx +++ b/frontend/src/components/appNavigation.tsx @@ -10,6 +10,7 @@ import Forum from '../screens/forum'; import FoodForum from '../screens/foodForum'; import EnergyForum from '../screens/energyForum'; import TransportationForum from '../screens/transportationForum'; +import TransportationEntryEdit from '../screens/transportationEntryEdit'; import FoodHistory from '../screens/foodHistory'; import TransportationHistory from '../screens/transportationHistory'; @@ -27,6 +28,7 @@ const AppNavigation = (): JSX.Element => { + diff --git a/frontend/src/screens/transportationEntryEdit.tsx b/frontend/src/screens/transportationEntryEdit.tsx new file mode 100644 index 0000000..795cb00 --- /dev/null +++ b/frontend/src/screens/transportationEntryEdit.tsx @@ -0,0 +1,282 @@ +import { + StyleSheet, + Text, + View, + TouchableOpacity, + ScrollView, + Modal, + Linking, +} from 'react-native'; +import * as React from 'react'; +import Icon from 'react-native-vector-icons/FontAwesome'; +import { useEffect, useState } from 'react'; +import { type StackNavigationProp } from '@react-navigation/stack'; +import { type RootStackParamList } from '../components/types'; +import { useNavigation } from '@react-navigation/native'; +import { useFonts } from 'expo-font'; +import Colors from '../../assets/colorConstants'; +import { SafeAreaView } from 'react-native-safe-area-context'; +import Slider from '@react-native-community/slider'; +import { TransportationAPI } from '../APIs/TransportationAPI'; +import { type TransportationEntry } from '../models/Transportation'; + +export type StackNavigation = StackNavigationProp; + +export default function TransportationEntryEdit(): JSX.Element { + interface SliderData { + id: number; + label: string; + minValue: number; + maxValue: number; + initialValue: number; + } + + const [transportationEntry, setTransportationEntry] = useState(); + + const [slidersData, setSliderData] = useState([]); + + const [electricCarTravel, setElectricCarTravel] = useState(0); + const [gasolineCarTravel, setGasolineCarTravel] = useState(0); + const [busTravel, setBusTravel] = useState(0); + const [trainTravel, setTrainTravel] = useState(0); + const [bikeTravel, setBikeTravel] = useState(0); + + const onSliderValueChange = (value: number, index: number): void => { + slidersData[index].initialValue = value + switch (index) { + case 0: + setElectricCarTravel(value); + break; + case 1: + setGasolineCarTravel(value); + break; + case 2: + setTrainTravel(value); + break; + case 3: + setBusTravel(value); + break; + case 4: + setBikeTravel(value); + break; + default: + break; + } + }; + + const openLink = async (url: string): Promise => { + const supported = await Linking.canOpenURL(url); + + if (supported) { + await Linking.openURL(url); + } else { + console.error('Cannot open the URL'); + } + }; + + const handleLinkPress = (): void => { + const url = 'https://fcr-ccc.nrcan-rncan.gc.ca/en'; + openLink(url).catch((error) => { + console.error('Error opening link:', error); + }); + }; + + const [loaded] = useFonts({ + Montserrat: require('../../assets/fonts/MontserratThinRegular.ttf'), + Josefin: require('../../assets/fonts/JosefinSansThinRegular.ttf'), + }); + + const navigation = useNavigation(); + + const [modalVisible, setModalVisible] = useState(false); + + const handleSurveySubmit = (): void => { + // Process survey responses, e.g., send them to a server + if (transportationEntry != null) { + const newEntry: TransportationEntry = { + _id: transportationEntry._id, + user_id: transportationEntry.user_id, + bus: busTravel, + train: trainTravel, + motorbike: bikeTravel, + electric_car: electricCarTravel, + gasoline_car: gasolineCarTravel, + carbon_emissions: transportationEntry.carbon_emissions, + date: transportationEntry.date + } + void TransportationAPI.updateTransportation(newEntry).then() + } + navigation.navigate('TransportationHistory'); + }; + + useEffect(() => { + if (transportationEntry != null) { + setSliderData([ + { id: 1, label: 'Electric Car', minValue: 0, maxValue: 800, initialValue: transportationEntry.electric_car }, + { id: 2, label: 'Gasoline Car', minValue: 0, maxValue: 800, initialValue: transportationEntry.gasoline_car }, + { id: 3, label: 'Train', minValue: 0, maxValue: 800, initialValue: transportationEntry.train }, + { id: 4, label: 'Bus', minValue: 0, maxValue: 800, initialValue: transportationEntry.bus }, + { id: 5, label: 'Motobike', minValue: 0, maxValue: 800, initialValue: transportationEntry.motorbike }, + ]) + setElectricCarTravel(transportationEntry.electric_car); + setGasolineCarTravel(transportationEntry.gasoline_car); + setBusTravel(transportationEntry.bus); + setTrainTravel(transportationEntry.train); + setBikeTravel(transportationEntry.motorbike); + } + }, [transportationEntry]) + + useEffect(() => { + void TransportationAPI.getTransportationMetricForToday().then((res) => { + if (res != null) { + setTransportationEntry(res) + } + }) + }, [loaded]) + + if (!loaded || slidersData.length === 0) { + return <>; + } + + return ( + + + Calculate your emissions from transportation: + + + + + + If you don't know your vehicle's fuel efficiency, it's available + online{' '} + + here + + . Select the "combination" value under Comsumption in L/100km. The average + fuel consumption of non-plug-in hybrid personal vehicles in Canada is 8.9 L / 100 + km. + + setModalVisible(!modalVisible)} + > + + + + + + + + On average, how much distance do you travel using the following methods per week: + + + {slidersData.map((slider, index) => ( + + + {slider.label}: {slidersData[index].initialValue} km + + onSliderValueChange(value, index)} + /> + + {slider.minValue} + {slider.maxValue} + + {/* You can include additional components related to this slider here */} + + ))} + + + Save + + + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: 'center', + backgroundColor: Colors.LIGHTFGREEN, + }, + labelContainer: { + flexDirection: 'row', + justifyContent: 'space-between', + width: '100%', + paddingHorizontal: 12, + }, + modalBackground: { + backgroundColor: Colors.BLACKTRANS, + flex: 1, + }, + modalContainer: { + backgroundColor: Colors.WHITE, + marginHorizontal: 50, + marginVertical: 180, + padding: 20, + borderRadius: 10, + flex: 1, + flexDirection: 'row', + }, + scrollContainer: { + paddingTop: 30, + flex: 1, + paddingHorizontal: 30, + backgroundColor: Colors.LIGHTFGREEN, + }, + label: { + fontSize: 15, + }, + header: { + color: Colors.DARKGREEN, + fontFamily: 'Montserrat', + fontSize: 25, + fontWeight: '700', + marginBottom: 50, + }, + question: { + fontFamily: 'Montserrat', + fontSize: 20, + fontWeight: '700', + color: Colors.DARKGREEN, + marginBottom: 20, + }, + buttoning: { + backgroundColor: Colors.DARKGREEN, + borderRadius: 10, + marginBottom: 70, + padding: 18, + }, + buttoningText: { + color: Colors.WHITE, + fontSize: 16, + fontWeight: '700', + textAlign: 'center', + }, + questionContainer: { + paddingBottom: 30, + }, + infoText: { + fontSize: 20, + color: Colors.DARKGREEN, + }, + linkText: { + color: Colors.BLUE, + }, + closeIcon: { + marginLeft: 'auto', + }, + silder: { + height: 50, + width: '100%', + }, +}); diff --git a/frontend/src/screens/transportationForum.tsx b/frontend/src/screens/transportationForum.tsx index e51b32a..7201ba2 100644 --- a/frontend/src/screens/transportationForum.tsx +++ b/frontend/src/screens/transportationForum.tsx @@ -1,282 +1,341 @@ import { - StyleSheet, - Text, - View, - TouchableOpacity, - ScrollView, - Modal, - Linking, -} from 'react-native'; -import * as React from 'react'; -import Icon from 'react-native-vector-icons/FontAwesome'; -import { useEffect, useState } from 'react'; -import { type StackNavigationProp } from '@react-navigation/stack'; -import { type RootStackParamList } from '../components/types'; -import { useNavigation } from '@react-navigation/native'; -import { useFonts } from 'expo-font'; -import Colors from '../../assets/colorConstants'; -import { SafeAreaView } from 'react-native-safe-area-context'; -import Slider from '@react-native-community/slider'; -import { TransportationAPI } from '../APIs/TransportationAPI'; -import { type TransportationEntry } from '../models/Transportation'; - -export type StackNavigation = StackNavigationProp; - -export default function TransportationForum(): JSX.Element { - interface SliderData { - id: number; - label: string; - minValue: number; - maxValue: number; - initialValue: number; - } - - const [transportationEntry, setTransportationEntry] = useState(); - - const [slidersData, setSliderData] = useState([]); - - const [electricCarTravel, setElectricCarTravel] = useState(0); - const [gasolineCarTravel, setGasolineCarTravel] = useState(0); - const [busTravel, setBusTravel] = useState(0); - const [trainTravel, setTrainTravel] = useState(0); - const [bikeTravel, setBikeTravel] = useState(0); - - const onSliderValueChange = (value: number, index: number): void => { - slidersData[index].initialValue = value - switch (index) { - case 0: - setElectricCarTravel(value); - break; - case 1: - setGasolineCarTravel(value); - break; - case 2: - setTrainTravel(value); - break; - case 3: - setBusTravel(value); - break; - case 4: - setBikeTravel(value); - break; - default: - break; - } - }; - - const openLink = async (url: string): Promise => { - const supported = await Linking.canOpenURL(url); - - if (supported) { - await Linking.openURL(url); - } else { - console.error('Cannot open the URL'); + StyleSheet, + Text, + View, + TouchableOpacity, + ScrollView, + TextInput, + Modal, + Linking, + } from 'react-native'; + import { CheckBox } from 'react-native-elements'; + import * as React from 'react'; + import Icon from 'react-native-vector-icons/FontAwesome'; + import { useState } from 'react'; + import { type StackNavigationProp } from '@react-navigation/stack'; + import { type RootStackParamList } from '../components/types'; + import { useNavigation } from '@react-navigation/native'; + import { useFonts } from 'expo-font'; + import Colors from '../../assets/colorConstants'; + import transportationQuestions from '../../assets/questions'; + import { SafeAreaView } from 'react-native-safe-area-context'; + import Slider from '@react-native-community/slider'; + + export type StackNavigation = StackNavigationProp; + + export default function TransportationForum(): JSX.Element { + interface SliderData { + id: number; + label: string; + minValue: number; + maxValue: number; + initialValue: number; } - }; - - const handleLinkPress = (): void => { - const url = 'https://fcr-ccc.nrcan-rncan.gc.ca/en'; - openLink(url).catch((error) => { - console.error('Error opening link:', error); - }); - }; - - const [loaded] = useFonts({ - Montserrat: require('../../assets/fonts/MontserratThinRegular.ttf'), - Josefin: require('../../assets/fonts/JosefinSansThinRegular.ttf'), - }); - - const navigation = useNavigation(); - - const [modalVisible, setModalVisible] = useState(false); - - const handleSurveySubmit = (): void => { - // Process survey responses, e.g., send them to a server - if (transportationEntry != null) { - const newEntry: TransportationEntry = { - _id: transportationEntry._id, - user_id: transportationEntry.user_id, - bus: busTravel, - train: trainTravel, - motorbike: bikeTravel, - electric_car: electricCarTravel, - gasoline_car: gasolineCarTravel, - carbon_emissions: transportationEntry.carbon_emissions, - date: transportationEntry.date + + const slidersData: SliderData[] = [ + { id: 1, label: 'Car', minValue: 0, maxValue: 800, initialValue: 0 }, + { id: 2, label: 'Bus', minValue: 0, maxValue: 800, initialValue: 0 }, + { id: 3, label: 'Train', minValue: 0, maxValue: 800, initialValue: 0 }, + { id: 4, label: 'Motobike', minValue: 0, maxValue: 800, initialValue: 0 }, + // Add more slider data as needed + ]; + + const [sliderValues, setSliderValues] = useState( + slidersData.map((data) => data.initialValue) + ); + + const onSliderValueChange = (value: number, index: number): void => { + const updatedValues = [...sliderValues]; + updatedValues[index] = value; + setSliderValues(updatedValues); + switch (index) { + case 0: + setCarTravel(value); + break; + case 1: + setBusTravel(value); + break; + case 2: + setTrainTravel(value); + break; + case 3: + setBikeTravel(value); + break; + default: + break; } - void TransportationAPI.updateTransportation(newEntry).then() - } - navigation.navigate('TransportationHistory'); - }; - - useEffect(() => { - if (transportationEntry != null) { - setSliderData([ - { id: 1, label: 'Electric Car', minValue: 0, maxValue: 800, initialValue: transportationEntry.electric_car }, - { id: 2, label: 'Gasoline Car', minValue: 0, maxValue: 800, initialValue: transportationEntry.gasoline_car }, - { id: 3, label: 'Train', minValue: 0, maxValue: 800, initialValue: transportationEntry.train }, - { id: 4, label: 'Bus', minValue: 0, maxValue: 800, initialValue: transportationEntry.bus }, - { id: 5, label: 'Motobike', minValue: 0, maxValue: 800, initialValue: transportationEntry.motorbike }, - ]) - setElectricCarTravel(transportationEntry.electric_car); - setGasolineCarTravel(transportationEntry.gasoline_car); - setBusTravel(transportationEntry.bus); - setTrainTravel(transportationEntry.train); - setBikeTravel(transportationEntry.motorbike); - } - }, [transportationEntry]) - - useEffect(() => { - void TransportationAPI.getTransportationMetricForToday().then((res) => { - if (res != null) { - setTransportationEntry(res) + }; + + const openLink = async (url: string): Promise => { + const supported = await Linking.canOpenURL(url); + + if (supported) { + await Linking.openURL(url); + } else { + console.error('Cannot open the URL'); } - }) - }, [loaded]) - - if (!loaded || slidersData.length === 0) { - return <>; - } - - return ( - - - Calculate your emissions from transportation: - - - - - - If you don't know your vehicle's fuel efficiency, it's available - online{' '} - - here - - . Select the "combination" value under Comsumption in L/100km. The average - fuel consumption of non-plug-in hybrid personal vehicles in Canada is 8.9 L / 100 - km. + }; + + const handleLinkPress = (): void => { + const url = 'https://fcr-ccc.nrcan-rncan.gc.ca/en'; + openLink(url).catch((error) => { + console.error('Error opening link:', error); + }); + }; + + const [loaded] = useFonts({ + Montserrat: require('../../assets/fonts/MontserratThinRegular.ttf'), + Josefin: require('../../assets/fonts/JosefinSansThinRegular.ttf'), + }); + + const navigation = useNavigation(); + + const data = transportationQuestions; + + const [responses, setResponses] = useState(new Array(data.length).fill('')); + + const [fuelType, setFuelType] = useState(''); + const [fuelEfficiency, setFuelEfficiency] = useState(0); + const [carTravel, setCarTravel] = useState(0); + const [busTravel, setBusTravel] = useState(0); + const [trainTravel, setTrainTravel] = useState(0); + const [bikeTravel, setBikeTravel] = useState(0); + + const [modalVisible, setModalVisible] = useState(false); + + const handleSurveySubmit = (): void => { + // Process survey responses, e.g., send them to a server + console.log('Survey Responses:', { + fuelType, + fuelEfficiency, + carTravel, + busTravel, + trainTravel, + bikeTravel, + }); + + navigation.navigate('FoodForum'); + }; + + const handleOptionSelect = (questionId: number, optionIndex: number): void => { + const updatedResponses = [...responses]; + updatedResponses[questionId] = data[questionId].options[optionIndex]; + setResponses(updatedResponses); + }; + + if (!loaded) { + return <>; + } + + return ( + + + Calculate your emissions from transportation: + + + {data[0].question} + {data[0].options.map((option, index) => ( + { + handleOptionSelect(data[0].id, index); + setFuelType(data[0].options[index]); + }} + /> + ))} + + + + + + Please enter your vehicle's fuel efficiency. If you don't have a vehicle, + enter 0. setModalVisible(!modalVisible)} > - + - - - - - On average, how much distance do you travel using the following methods per week: - - - {slidersData.map((slider, index) => ( - - - {slider.label}: {slidersData[index].initialValue} km - - onSliderValueChange(value, index)} + { + setFuelEfficiency(Number(text)); + }} /> - - {slider.minValue} - {slider.maxValue} - - {/* You can include additional components related to this slider here */} - ))} - - - Save - - - - ); -} - -const styles = StyleSheet.create({ - container: { - flex: 1, - justifyContent: 'center', - backgroundColor: Colors.LIGHTFGREEN, - }, - labelContainer: { - flexDirection: 'row', - justifyContent: 'space-between', - width: '100%', - paddingHorizontal: 12, - }, - modalBackground: { - backgroundColor: Colors.BLACKTRANS, - flex: 1, - }, - modalContainer: { - backgroundColor: Colors.WHITE, - marginHorizontal: 50, - marginVertical: 180, - padding: 20, - borderRadius: 10, - flex: 1, - flexDirection: 'row', - }, - scrollContainer: { - paddingTop: 30, - flex: 1, - paddingHorizontal: 30, - backgroundColor: Colors.LIGHTFGREEN, - }, - label: { - fontSize: 15, - }, - header: { - color: Colors.DARKGREEN, - fontFamily: 'Montserrat', - fontSize: 25, - fontWeight: '700', - marginBottom: 50, - }, - question: { - fontFamily: 'Montserrat', - fontSize: 20, - fontWeight: '700', - color: Colors.DARKGREEN, - marginBottom: 20, - }, - buttoning: { - backgroundColor: Colors.DARKGREEN, - borderRadius: 10, - marginBottom: 70, - padding: 18, - }, - buttoningText: { - color: Colors.WHITE, - fontSize: 16, - fontWeight: '700', - textAlign: 'center', - }, - questionContainer: { - paddingBottom: 30, - }, - infoText: { - fontSize: 20, - color: Colors.DARKGREEN, - }, - linkText: { - color: Colors.BLUE, - }, - closeIcon: { - marginLeft: 'auto', - }, - silder: { - height: 50, - width: '100%', - }, -}); + + + + + + If you don't know your vehicle's fuel efficiency, it's available + online{' '} + + here + + . Select the "combination" value under Comsumption in L/100km. The average + fuel consumption of non-plug-in hybrid personal vehicles in Canada is 8.9 L / 100 + km. + + setModalVisible(!modalVisible)} + > + + + + + + + + On average, how much distance do you travel using the following methods per week: + + + {slidersData.map((slider, index) => ( + + + {slider.label}: {sliderValues[index]} km + + onSliderValueChange(value, index)} + /> + + {slider.minValue} + {slider.maxValue} + + {/* You can include additional components related to this slider here */} + + ))} + + + Next + + + + ); + } + + const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: 'center', + backgroundColor: Colors.LIGHTFGREEN, + }, + labelContainer: { + flexDirection: 'row', + justifyContent: 'space-between', + width: '100%', + paddingHorizontal: 12, + }, + modalBackground: { + backgroundColor: Colors.BLACKTRANS, + flex: 1, + }, + modalContainer: { + backgroundColor: Colors.WHITE, + marginHorizontal: 50, + marginVertical: 180, + padding: 20, + borderRadius: 10, + flex: 1, + flexDirection: 'row', + }, + scrollContainer: { + paddingTop: 30, + flex: 1, + paddingHorizontal: 30, + backgroundColor: Colors.LIGHTFGREEN, + }, + label: { + fontSize: 15, + }, + header: { + color: Colors.DARKGREEN, + fontFamily: 'Montserrat', + fontSize: 25, + fontWeight: '700', + marginBottom: 50, + }, + question: { + fontFamily: 'Montserrat', + fontSize: 20, + fontWeight: '700', + color: Colors.DARKGREEN, + marginBottom: 20, + }, + answer: { + fontFamily: 'Montserrat', + fontSize: 17, + fontWeight: '700', + color: Colors.DARKGREEN, + }, + input: { + borderWidth: 1, + borderColor: Colors.GREY, + padding: 8, + margin: 10, + width: 200, + backgroundColor: Colors.WHITE, + }, + buttoning: { + backgroundColor: Colors.DARKGREEN, + borderRadius: 10, + marginBottom: 70, + padding: 18, + }, + buttoningText: { + color: Colors.WHITE, + fontSize: 16, + fontWeight: '700', + textAlign: 'center', + }, + selectedOption: { + backgroundColor: Colors.FILLGREEN, + }, + unSelectedOption: { + backgroundColor: Colors.LIGHTFGREEN, + }, + questionContainer: { + paddingBottom: 30, + }, + questionWithIcon: { + flexDirection: 'row', + }, + infoText: { + fontSize: 20, + color: Colors.DARKGREEN, + }, + linkText: { + color: Colors.BLUE, + }, + closeIcon: { + marginLeft: 'auto', + }, + questionIcon: { + marginLeft: 15, + paddingTop: 5, + }, + silder: { + height: 50, + width: '100%', + }, + }); \ No newline at end of file diff --git a/frontend/src/screens/transportationHistory.tsx b/frontend/src/screens/transportationHistory.tsx index 419624a..873dac3 100644 --- a/frontend/src/screens/transportationHistory.tsx +++ b/frontend/src/screens/transportationHistory.tsx @@ -114,7 +114,7 @@ export default function TransportationHistory(): JSX.Element { { - navigation.navigate('TransportationForum'); + navigation.navigate('TransportationEntryEdit'); }} >