diff --git a/frontend/src/screens/Energy/energyForum.tsx b/frontend/src/screens/Energy/energyForum.tsx index ae0467b..3e5ffaf 100644 --- a/frontend/src/screens/Energy/energyForum.tsx +++ b/frontend/src/screens/Energy/energyForum.tsx @@ -30,7 +30,7 @@ export default function EnergyForum(): JSX.Element { naturalGas, }); - navigation.navigate('DashBoard'); + navigation.navigate('MainApp'); }; if (!loaded) { diff --git a/frontend/src/screens/Transportation/transportationForum.tsx b/frontend/src/screens/Transportation/transportationForum.tsx index 2ca7ea8..45f1a87 100644 --- a/frontend/src/screens/Transportation/transportationForum.tsx +++ b/frontend/src/screens/Transportation/transportationForum.tsx @@ -1,341 +1,180 @@ -import { - 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; +import { StyleSheet, Text, View, TouchableOpacity, ScrollView } from 'react-native'; +import * as React from 'react'; +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 { 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 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; } - - 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; - } - }; - - 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 [loaded] = useFonts({ + Montserrat: require('../../../assets/fonts/MontserratThinRegular.ttf'), + Josefin: require('../../../assets/fonts/JosefinSansThinRegular.ttf'), + }); + + const navigation = useNavigation(); + + const [carTravel, setCarTravel] = useState(0); + const [busTravel, setBusTravel] = useState(0); + const [trainTravel, setTrainTravel] = useState(0); + const [bikeTravel, setBikeTravel] = useState(0); + + const handleSurveySubmit = (): void => { + // Process survey responses, e.g., send them to a server + console.log('Survey Responses:', { + carTravel, + busTravel, + trainTravel, + bikeTravel, }); - - 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)} - > - - - - { - setFuelEfficiency(Number(text)); - }} + + navigation.navigate('FoodForum'); + }; + + if (!loaded) { + return <>; + } + + return ( + + + Calculate your emissions from transportation: + + + 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)} /> - - - - - - - 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 */} + + {slider.minValue} + {slider.maxValue} - ))} - - - 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 + {/* 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, + }, + 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, + }, + silder: { + height: 50, + width: '100%', + }, +}); diff --git a/frontend/src/screens/signUpQuestions.tsx b/frontend/src/screens/signUpQuestions.tsx index 30de375..7bdc2a0 100644 --- a/frontend/src/screens/signUpQuestions.tsx +++ b/frontend/src/screens/signUpQuestions.tsx @@ -55,7 +55,7 @@ export default function SignUpQuestions(): JSX.Element { fuelType, }); - navigation.navigate('TransportationQuestions'); + navigation.navigate('TransportationForum'); }; const openLink = async (url: string): Promise => {