unit testing

README.md

@@ -1 +1 @@
-# StemDevops_INFIX
+

frontend/infix/components/InputTextField.js

@@ -0,0 +1,60 @@
+import {
+    Text,
+    StyleSheet,
+    TextInput,
+    View,
+    TouchableOpacity,
+} from "react-native";
+import {useEffect, useState} from "react";
+import Ionicons from "@expo/vector-icons/Ionicons";
+
+const InputTextField = ({placeholder, icon, action, value, secureTextEntry,style}) => {
+
+    return (
+        <View style={[styles.inputContainer, style? style: null]}>
+            <TextInput
+                style={styles.input}
+                placeholder={placeholder}
+                onChangeText={action}
+                value={value}
+                placeholderTextColor="#FFFFFFD3"
+            />
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    inputContainer: {
+        width: '100%',
+        flexDirection: "row",
+        alignItems: "center",
+        marginHorizontal: 10,
+        paddingLeft: 20,
+        marginVertical: 5,
+        elevation: 3,
+        shadowColor: "#000",
+        shadowOffset: {width: 0, height: 2},
+        shadowOpacity: 0.4,
+        shadowRadius: 2,
+        backgroundColor: "rgb(131,163,190)",
+        borderRadius: 50,
+        height: 50,
+        borderColor: "#2C5D87",
+        borderWidth: 1,
+    },
+    input: {
+        flex: 8,
+        width: "100%",
+        height: "100%",
+        fontSize: 16,
+        fontWeight: "bold",
+        paddingHorizontal: 10,
+        color: "rgb(255,255,255)",
+    },
+    toggleIcon: {
+        flex: 1,
+        marginRight: 10,
+    },
+});
+
+export default InputTextField;

frontend/infix/components/MultiTrip.js

@@ -0,0 +1,129 @@
+import {ScrollView, StyleSheet, Text, TouchableOpacity, View} from "react-native";
+import InputTextField from "./InputTextField";
+import React, {useState} from "react";
+import Ionicons from "@expo/vector-icons/Ionicons";
+
+const MultiTrip = () => {
+
+    const [count, setCount] = useState(1)
+
+    const returnTopField = () => {
+        return Array.from({ length: count }, (_, i) => (
+            <View style={styles.dateContainer} key={i}>
+                <InputTextField value="To" style={styles.dateInput}/>
+                <InputTextField value="From" style={styles.dateInput}/>
+                <InputTextField value="Date" style={styles.dateInput}/>
+            </View>
+        ));
+    }
+
+    const addTrip =()=>{
+        setCount(count+1);
+    }
+
+    return (
+        <ScrollView style={styles.container} contentContainerStyle={{alignItems: 'center', paddingBottom: 200,}}>
+            <View style={styles.inputContainer}>
+                {returnTopField()}
+                <TouchableOpacity style={styles.addTripContainer} onPress={addTrip}>
+                    <Ionicons name="add-circle-outline" size={32} color="#FFFFFFD3"/>
+                    <Text style={styles.addTripText}>Add trip</Text>
+                </TouchableOpacity>
+                <InputTextField value="Travel mode"/>
+                <InputTextField value="Ticket count"/>
+            </View>
+            <TouchableOpacity style={styles.checkoutContainer}>
+                <Text style={styles.checkoutText}>
+                    Checkout
+                </Text>
+            </TouchableOpacity>
+            <View style={styles.divider}></View>
+            <View style={styles.detailsContainer}>
+                <Text style={styles.detailsText}>
+                    Lunar days can be scorching hot, while nights are freezing cold. Radiation from the Sun and cosmic
+                    rays is a constant concern.
+
+                    To combat these challenges, colony habitats would be equipped with advanced climate control systems,
+                    insulation, and radiation shielding. Renewable energy sources such as solar panels and possibly even
+                    harnessing lunar resources for energy generation would be crucial. The thin lunar atmosphere might
+                    be harnessed for limited agricultural purposes, using controlled hydroponic or aeroponic systems.
+                </Text>
+            </View>
+        </ScrollView>
+    )
+}
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        width: '100%',
+        height: '100%',
+    },
+    inputContainer: {
+        width: '90%',
+        alignItems: 'center',
+        marginTop: 20,
+
+    },
+    divider: {
+        width: '100%',
+        height: 1,
+        backgroundColor: 'rgba(219,233,245,0.7)',
+        marginTop: 30
+    },
+    detailsContainer: {
+        width: '90%',
+        alignItems: 'center',
+        marginTop: 20,
+        backgroundColor: 'rgba(137,169,192,0.7)',
+        borderRadius: 10,
+        padding: 20,
+        borderWidth: 2,
+        borderColor: 'rgba(0,43,72,0.7)',
+        minHeight: 200,
+        overflow: 'scroll'
+    },
+    detailsText: {
+        color: '#fff',
+        fontSize: 15,
+    },
+    dateContainer: {
+        flexDirection: 'row',
+        width: '100%',
+        alignItems:'center',
+        justifyContent: 'space-between',
+
+    },
+    dateInput:{
+        width: '32%',
+        marginHorizontal: 0,
+    },
+    checkoutContainer: {
+        width: '60%',
+        borderRadius: 20,
+        marginTop: 20,
+        paddingVertical: 10,
+        backgroundColor: '#003A6B',
+        alignItems: "center",
+        justifyContent: "center"
+    },
+    checkoutText: {
+        color: '#fff',
+        fontSize: 20,
+        fontWeight: "bold",
+    },
+    addTripContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        alignSelf: 'flex-start',
+        marginTop: 10,
+        marginBottom: 10,
+        marginLeft: 10
+    },
+    addTripText:{
+        fontSize: 16,
+        color: '#fff',
+        marginLeft: 10
+    }
+
+});
+export default MultiTrip;

frontend/infix/components/Notification.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import {View, Text, StyleSheet, Image, Platform} from 'react-native';
+
+const Notification = ({profile, notiHeader, notiContent}) => {
+
+    return (
+        <View style={styles.notificationContainer}>
+            <Image source={profile} style={styles.profileImg}/>
+            <View style={styles.notificationContainer2} >
+                <Text style={styles.notiHeader}>{notiHeader}</Text>
+                <Text style={styles.noti}>{notiContent}</Text>
+            </View>
+        </View>
+    );
+};
+export default Notification;
+
+const styles = StyleSheet.create({
+    profileImg: {
+        width: 50,
+        height: 50,
+        borderRadius: 25,
+        marginRight: 10,
+    },
+
+    notificationContainer: {
+          width: '90%',
+          margin: 12,
+          padding: 10,
+          backgroundColor: 'rgba(44, 93, 135, 0.6)',
+          borderRadius: 25,
+          flexDirection: 'row',
+          justifyContent: 'flex-start',
+          ...Platform.select({
+              ios: {
+                shadowColor: '#000',
+                shadowOffset: { width: 0, height: 1 },
+                shadowOpacity: 0.25,
+                shadowRadius: 4,
+              },
+              android: {
+                elevation: 10,
+              },
+          })
+      },
+      notificationContainer2: {
+          padding: 5,
+          justifyContent: 'flex-start',
+      },
+      notiHeader:{
+        color: '#ffffff',
+        fontSize: 18,
+        fontWeight: 'bold',
+      },
+      noti:{
+          color: '#ffffff',
+          fontSize: 12,
+      },
+      notiCategory:{
+        color: '#ffffff',
+        fontSize: 18,
+        fontWeight: 'bold',
+        alignSelf: 'flex-start',
+        marginLeft: '15%',
+        marginTop: 20,
+      },
+}
+)

frontend/infix/components/RoundTrip.js

@@ -0,0 +1,108 @@
+import {ScrollView, StyleSheet, Text, TouchableOpacity, View} from "react-native";
+import InputTextField from "./InputTextField";
+import React, {useState} from "react";
+
+const RoundTrip = () => {
+
+    const [departure, setDeparture] = useState("");
+    const [destination, setDestination] = useState("");
+    const [departureDate, setDepartureDate] = useState("");
+    const [arrivalDate, setArrivalDate] =useState("")
+    const [travelMode, setTravelMode] = useState("Spaceship");
+    const [ticketCount, setTicketCount] = useState(1);
+
+    return (
+        <ScrollView style={styles.container} contentContainerStyle={{alignItems: 'center', paddingBottom: 200,}}>
+            <View style={styles.inputContainer}>
+                <InputTextField value="Departure"/>
+                <InputTextField value="Destination"/>
+                <View style={styles.dateContainer}>
+                        <InputTextField value="Departure date" style={styles.dateInput}/>
+                        <InputTextField value="Arrival date" style={styles.dateInput}/>
+                </View>
+                <InputTextField value="Travel mode"/>
+                <InputTextField value="Ticket count"/>
+            </View>
+            <TouchableOpacity style={styles.checkoutContainer}>
+                <Text style={styles.checkoutText}>
+                    Checkout
+                </Text>
+            </TouchableOpacity>
+            <View style={styles.divider}></View>
+            <View style={styles.detailsContainer}>
+                <Text style={styles.detailsText}>
+                    Lunar days can be scorching hot, while nights are freezing cold. Radiation from the Sun and cosmic
+                    rays is a constant concern.
+
+                    To combat these challenges, colony habitats would be equipped with advanced climate control systems,
+                    insulation, and radiation shielding. Renewable energy sources such as solar panels and possibly even
+                    harnessing lunar resources for energy generation would be crucial. The thin lunar atmosphere might
+                    be harnessed for limited agricultural purposes, using controlled hydroponic or aeroponic systems.
+                </Text>
+            </View>
+        </ScrollView>
+    )
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        width: '100%',
+        height: '100%',
+    },
+    inputContainer: {
+        width: '90%',
+        alignItems: 'center',
+        marginTop: 20,
+
+    },
+    divider: {
+        width: '100%',
+        height: 1,
+        backgroundColor: 'rgba(219,233,245,0.7)',
+        marginTop: 30
+    },
+    detailsContainer: {
+        width: '90%',
+        alignItems: 'center',
+        marginTop: 20,
+        backgroundColor: 'rgba(137,169,192,0.7)',
+        borderRadius: 10,
+        padding: 20,
+        borderWidth: 2,
+        borderColor: 'rgba(0,43,72,0.7)',
+        minHeight: 200,
+        overflow: 'scroll'
+    },
+    detailsText: {
+        color: '#fff',
+        fontSize: 15,
+    },
+    dateContainer: {
+        flexDirection: 'row',
+        width: '100%',
+        alignItems:'center',
+        justifyContent: 'space-between',
+
+    },
+    dateInput:{
+        width: '48%',
+        marginHorizontal: 0,
+    },
+    checkoutContainer: {
+        width: '60%',
+        borderRadius: 20,
+        marginTop: 20,
+        paddingVertical: 10,
+        backgroundColor: '#003A6B',
+        alignItems: "center",
+        justifyContent: "center"
+    },
+    checkoutText: {
+        color: '#fff',
+        fontSize: 20,
+        fontWeight: "bold",
+    }
+
+});
+export default RoundTrip;