Skip to content

Commit a53d2b3

Browse files
Eileenchen02Eileenchen02
authored
Merge pull request #31 from utmgdsc/feature/61/energy-forum
[61] energy forum
2 parents 69b0081 + 410bae7 commit a53d2b3

File tree

2 files changed

+165
-6
lines changed

2 files changed

+165
-6
lines changed

‎frontend/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
"@react-native-community/slider": "^4.4.2",
1717
"@react-native-firebase/auth": "^18.6.0",
1818
"@react-native-firebase/firestore": "^18.6.0",
19+
"@react-native-picker/picker": "^2.5.1",
1920
"@react-navigation/native": "^6.1.9",
2021
"@react-navigation/native-stack": "^6.9.15",
2122
"@react-navigation/stack": "^6.3.19",

‎frontend/src/screens/energyForum.tsx

Lines changed: 164 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
1-
import { StyleSheet, Text, View } from 'react-native';
1+
import { StyleSheet, Text, View, ScrollView, TouchableOpacity, TextInput } from 'react-native';
2+
import { Picker } from '@react-native-picker/picker';
23
import * as React from 'react';
34
import { type StackNavigationProp } from '@react-navigation/stack';
45
import { type RootStackParamList } from '../components/types';
56
import { useFonts } from 'expo-font';
67
import Colors from '../../assets/colorConstants';
8+
import { useState } from 'react';
9+
import { useNavigation } from '@react-navigation/native';
10+
import { SafeAreaView } from 'react-native-safe-area-context';
711

812
export type StackNavigation = StackNavigationProp<RootStackParamList>;
913

@@ -13,23 +17,130 @@ export default function EnergyForum(): JSX.Element {
1317
Josefin: require('../../assets/fonts/JosefinSansThinRegular.ttf'),
1418
});
1519

20+
const navigation = useNavigation<StackNavigation>();
21+
22+
const [province, setProvince] = useState<string>('');
23+
const [numOfPpl, setNumOfPpl] = useState(0);
24+
const [electricalConsumption, setElectricalConsumption] = useState(0);
25+
const [heatingOil, setHeatingOil] = useState(0);
26+
const [naturalGas, setNaturalGas] = useState(0);
27+
28+
const handleValueChange = (itemValue: string): void => {
29+
setProvince(itemValue);
30+
};
31+
32+
const handleSurveySubmit = (): void => {
33+
// Process survey responses, e.g., send them to a server
34+
console.log('Survey Responses:', {
35+
province,
36+
numOfPpl,
37+
electricalConsumption,
38+
heatingOil,
39+
naturalGas,
40+
});
41+
42+
navigation.navigate('DashBoard');
43+
};
44+
1645
if (!loaded) {
1746
return <></>;
1847
}
1948

2049
return (
21-
<View style={styles.container}>
22-
<Text style={styles.header}>Calculate your energy usage:</Text>
23-
</View>
50+
<SafeAreaView style={styles.container}>
51+
<ScrollView style={styles.scrollContainer}>
52+
<Text style={styles.header}>Calculate your energy consumption:</Text>
53+
54+
<View style={styles.questionContainer}>
55+
<Text style={styles.question}>Which Province do you live in:</Text>
56+
<View style={styles.pickerContainer}>
57+
<Picker
58+
selectedValue={province}
59+
style={styles.picker}
60+
onValueChange={handleValueChange}
61+
>
62+
<Picker.Item label="Ontario" value="Ontario" />
63+
<Picker.Item label="Saskatchewan" value="Saskatchewan" />
64+
<Picker.Item label="PEI" value="PEI" />
65+
<Picker.Item label="Nunavut" value="Nunavut" />
66+
<Picker.Item label="Alberta" value="Alberta" />
67+
<Picker.Item label="Manitoba" value="Manitoba" />
68+
<Picker.Item label="Quebec" value="Quebec" />
69+
<Picker.Item label="Newfoundland and Labrador" value="Newfoundland and Labrador" />
70+
<Picker.Item label="British Columbia" value="British Columbia" />
71+
<Picker.Item label="Nova Scotia" value="Nova Scotia" />
72+
<Picker.Item label="Northwest Territories" value="Northwest Territories" />
73+
<Picker.Item label="New Brunswick" value="New Brunswick" />
74+
<Picker.Item label="Yukon" value="Yukon" />
75+
{/* Add more Picker.Item components for additional options */}
76+
</Picker>
77+
</View>
78+
</View>
79+
80+
<View style={styles.questionContainer}>
81+
<Text style={styles.question}>How many people live in your household:</Text>
82+
<TextInput
83+
style={styles.input}
84+
keyboardType="numeric"
85+
placeholder="Input"
86+
onChangeText={(text) => {
87+
setNumOfPpl(Number(text));
88+
}}
89+
/>
90+
</View>
91+
92+
<View style={styles.questionContainer}>
93+
<Text style={styles.question}>What is your monthly electricity consumption, in kWh:</Text>
94+
<TextInput
95+
style={styles.input}
96+
keyboardType="numeric"
97+
placeholder="Input"
98+
onChangeText={(text) => {
99+
setElectricalConsumption(Number(text));
100+
}}
101+
/>
102+
</View>
103+
104+
<View style={styles.questionContainer}>
105+
<Text style={styles.question}>
106+
What is your monthly natural gas consumption, in {'m\u00B3'}:
107+
</Text>
108+
<TextInput
109+
style={styles.input}
110+
keyboardType="numeric"
111+
placeholder="Input"
112+
onChangeText={(text) => {
113+
setNaturalGas(Number(text));
114+
}}
115+
/>
116+
</View>
117+
118+
<View style={styles.questionContainer}>
119+
<Text style={styles.question}>
120+
What is your monthly heating oil consumption, in litres:
121+
</Text>
122+
<TextInput
123+
style={styles.input}
124+
keyboardType="numeric"
125+
placeholder="Input"
126+
onChangeText={(text) => {
127+
setHeatingOil(Number(text));
128+
}}
129+
/>
130+
</View>
131+
<TouchableOpacity style={styles.buttoning} onPress={handleSurveySubmit}>
132+
<Text style={styles.buttoningText}>Finish!</Text>
133+
</TouchableOpacity>
134+
</ScrollView>
135+
</SafeAreaView>
24136
);
25137
}
26138

27139
const styles = StyleSheet.create({
28140
container: {
29141
flex: 1,
30142
justifyContent: 'center',
31-
paddingHorizontal: 30,
32-
backgroundColor: Colors.DARKLIMEGREEN,
143+
backgroundColor: Colors.LIGHTFGREEN,
33144
},
34145
header: {
35146
color: Colors.DARKGREEN,
@@ -38,4 +149,51 @@ const styles = StyleSheet.create({
38149
fontWeight: '700',
39150
marginBottom: 30,
40151
},
152+
scrollContainer: {
153+
paddingTop: 30,
154+
flex: 1,
155+
paddingHorizontal: 30,
156+
backgroundColor: Colors.LIGHTFGREEN,
157+
},
158+
questionContainer: {
159+
paddingBottom: 30,
160+
},
161+
pickerContainer: {
162+
height: 50,
163+
width: 250,
164+
backgroundColor: Colors.WHITE,
165+
borderColor: Colors.GREY,
166+
borderRadius: 5,
167+
borderWidth: 1,
168+
},
169+
picker: { height: 50, width: 250 },
170+
question: {
171+
fontFamily: 'Montserrat',
172+
fontSize: 20,
173+
fontWeight: '700',
174+
color: Colors.DARKGREEN,
175+
marginBottom: 20,
176+
},
177+
input: {
178+
borderWidth: 1,
179+
borderRadius: 5,
180+
borderColor: Colors.GREY,
181+
height: 50,
182+
padding: 8,
183+
margin: 0,
184+
width: 200,
185+
backgroundColor: Colors.WHITE,
186+
},
187+
buttoning: {
188+
backgroundColor: Colors.DARKGREEN,
189+
borderRadius: 10,
190+
marginBottom: 70,
191+
padding: 18,
192+
},
193+
buttoningText: {
194+
color: Colors.WHITE,
195+
fontSize: 16,
196+
fontWeight: '700',
197+
textAlign: 'center',
198+
},
41199
});

0 commit comments

Comments
 (0)