Merge pull request #28 from utmgdsc/feature/47/Food-forum

[47] Implemented survey for food

frontend/assets/foodQuestions.tsx

@@ -0,0 +1,16 @@
+interface SliderData {
+  id: number;
+  label: string;
+  minValue: number;
+  maxValue: number;
+  initialValue: number;
+}
+
+const foodSlidersData: SliderData[] = [
+  { id: 1, label: 'Beef', minValue: 0, maxValue: 8, initialValue: 0 },
+  { id: 2, label: 'Lamb', minValue: 0, maxValue: 8, initialValue: 0 },
+  { id: 3, label: 'Pork', minValue: 0, maxValue: 8, initialValue: 0 },
+  { id: 4, label: 'Chicken/Fish', minValue: 0, maxValue: 8, initialValue: 0 },
+];
+
+export default foodSlidersData;

frontend/src/screens/foodForum.tsx

@@ -1,9 +1,14 @@
-import { StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, Text, View, ScrollView, TouchableOpacity, TextInput } from 'react-native';
 import * as React from 'react';
 import { type StackNavigationProp } from '@react-navigation/stack';
 import { type RootStackParamList } from '../components/types';
 import { useFonts } from 'expo-font';
 import Colors from '../../assets/colorConstants';
+import { useState } from 'react';
+import { useNavigation } from '@react-navigation/native';
+import foodSliderData from '../../assets/foodQuestions';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import Slider from '@react-native-community/slider';
 
 export type StackNavigation = StackNavigationProp<RootStackParamList>;
 
@@ -13,29 +18,194 @@ export default function FoodForum(): JSX.Element {
     Josefin: require('../../assets/fonts/JosefinSansThinRegular.ttf'),
   });
 
+  const navigation = useNavigation<StackNavigation>();
+
+  const slidersData = foodSliderData;
+
+  const [sliderValues, setSliderValues] = useState<number[]>(
+    slidersData.map((data) => data.initialValue)
+  );
+
+  const onSliderValueChange = (value: number, index: number): void => {
+    const updatedValues = [...sliderValues];
+    updatedValues[index] = value;
+    setSliderValues(updatedValues);
+    switch (index) {
+      case 0:
+        setBeefServing(value);
+        break;
+      case 1:
+        setLambServing(value);
+        break;
+      case 2:
+        setPorkServing(value);
+        break;
+      case 3:
+        setChickenServing(value);
+        break;
+      case 4:
+        setCheeseServing(value);
+        break;
+      default:
+        break;
+    }
+  };
+
+  const [beefServing, setBeefServing] = useState(0);
+  const [lambServing, setLambServing] = useState(0);
+  const [porkServing, setPorkServing] = useState(0);
+  const [chickenServing, setChickenServing] = useState(0);
+  const [cheeseServing, setCheeseServing] = useState(0);
+  const [milkServing, setMilkServing] = useState(0);
+  const [foodWaste, setFoodWaste] = useState(0);
+
+  const handleSurveySubmit = (): void => {
+    // Process survey responses, e.g., send them to a server
+    console.log('Survey Responses:', {
+      beefServing,
+      lambServing,
+      porkServing,
+      chickenServing,
+      cheeseServing,
+      milkServing,
+      foodWaste,
+    });
+
+    navigation.navigate('EnergyForum');
+  };
+
   if (!loaded) {
     return <></>;
   }
 
   return (
-    <View style={styles.container}>
-      <Text style={styles.header}>Calculate your food intake:</Text>
-    </View>
+    <SafeAreaView style={styles.container}>
+      <ScrollView style={styles.scrollContainer}>
+        <Text style={styles.header}>Calculate your emissions from food:</Text>
+
+        <Text style={styles.header}>
+          On average, how many servings of the following food do you consume per week (Each serving
+          is 100g):
+        </Text>
+
+        {slidersData.map((slider, index) => (
+          <View style={styles.questionContainer} key={slider.id}>
+            <Text style={styles.question}>
+              {slider.label}: {sliderValues[index]} Servings
+            </Text>
+            <Slider
+              style={styles.silder}
+              minimumValue={slider.minValue}
+              maximumValue={slider.maxValue}
+              step={1}
+              minimumTrackTintColor={Colors.DARKGREEN}
+              maximumTrackTintColor={Colors.FILLGREEN}
+              thumbTintColor={Colors.WHITE}
+              value={sliderValues[index]}
+              onValueChange={(value) => onSliderValueChange(value, index)}
+            />
+            <View style={styles.labelContainer}>
+              <Text style={styles.label}>{slider.minValue}</Text>
+              <Text style={styles.label}>{slider.maxValue}</Text>
+            </View>
+            {/* You can include additional components related to this slider here */}
+          </View>
+        ))}
+
+        <View style={styles.questionContainer}>
+          <Text style={styles.question}>How many cups of milk do you drink per week:</Text>
+          <TextInput
+            style={styles.input}
+            keyboardType="numeric"
+            placeholder="Input"
+            onChangeText={(text) => {
+              setMilkServing(Number(text));
+            }}
+          />
+        </View>
+
+        <View style={styles.questionContainer}>
+          <Text style={styles.question}>
+            On average, how much food waste do you produce, in grams:
+          </Text>
+          <TextInput
+            style={styles.input}
+            keyboardType="numeric"
+            placeholder="Input"
+            onChangeText={(text) => {
+              setFoodWaste(Number(text) / 100);
+            }}
+          />
+        </View>
+
+        <TouchableOpacity style={styles.buttoning} onPress={handleSurveySubmit}>
+          <Text style={styles.buttoningText}>Next</Text>
+        </TouchableOpacity>
+      </ScrollView>
+    </SafeAreaView>
   );
 }
 
 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: 30,
+    fontSize: 25,
+    fontWeight: '700',
+    marginBottom: 50,
+  },
+  question: {
+    fontFamily: 'Montserrat',
+    fontSize: 20,
     fontWeight: '700',
-    marginBottom: 30,
+    color: Colors.DARKGREEN,
+    marginBottom: 20,
+  },
+  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',
+  },
+  questionContainer: {
+    paddingBottom: 30,
+  },
+  silder: {
+    height: 50,
+    width: '100%',
   },
 });