merged files

EdwardHaoranLee · Nov 8, 2020 · 4c7a4e0 · 4c7a4e0
2 parents 822dc6b + 76b2883
commit 4c7a4e0
Show file tree

Hide file tree

Showing 10 changed files with 433 additions and 153 deletions.
diff --git a/.idea/misc.xml b/.idea/misc.xml
diff --git a/Flourish/App.js b/Flourish/App.js
@@ -11,19 +11,49 @@ import PlantpediaTabScreen from './Tabs/PlantpediaTabScreen'
 import SettingsTabScreen from './Tabs/SettingsTabScreen'
 import PhotoTabScreen from './Tabs/PhotoTabScreen'
 
-// const
 const ActiveTintColor = "#ef5e85"
 const InactiveTintColor = "#cacaca"
+let myPlants = [
+    {
+        'id': '0',
+        'name': 'The Green Ball',
+        'task': 'Watering',
+        'freq': 7,
+        'date': new Date('November 1, 2020 03:24:00')
+    },
+    {
+        'id': '1',
+        'name': 'The Red Ball',
+        'task': 'Watering',
+        'freq': 7,
+        'date': new Date('May 4, 2020 17:29:03')
+    },
+    {
+        'id': '2',
+        'name': 'The Blue Ball',
+        'task': 'Watering',
+        'freq': 7,
+        'date': new Date(Date.now())
+    },
+    {
+        'id': '3',
+        'name': 'The Orange Ball',
+        'task': 'Watering',
+        'freq': 7,
+        'date': new Date('November 3, 2018 22:44:53')
+    },
+
+]
 
 const FlourishingTabScreenGenerator = () => {
     return (
-        <FlourishingTabScreen />
+        <FlourishingTabScreen plants={myPlants}/>
     );
 }
 
 const GardenTabScreenGenerator = () => {
     return (
-        <GardenTabScreen />
+        <GardenTabScreen plants={myPlants}/>
     );
 }
 
@@ -91,18 +121,26 @@ function MyTabs() {
                             backgroundColor: '#ffffff',
                             justifyContent: 'center',
                             alignItems: 'center',
-                            shadowOpacity: 0.3,
-                            shadowOffset:{width:0,height:0},
-                            shadowColor: "#000000",
+                            // shadowColor: "#00000050",
+                            // shadowOffset: {
+                            //     width: 0,
+                            //     height: 0,
+                            // },
+                            // shadowOpacity: 0.3,
+                            // shadowRadius: 3.84,
+                            // elevation: 3,
+                            borderWidth: 3,
+                            borderColor: '#ef5e85',
                         }}>
                             <Image
                                 source={require("./assets/camera.png")}
                                 style={{
                                     // width: 40,
                                     // height: 40,
                                     alignContent: 'center',
-                                    position: 'absolute',
-                                    bottom: 11, // space from bottombar
+                                    justifyContent: 'center',
+                                    // position: 'absolute',
+                                    // bottom: 10, // space from bottombar
                                     height: 50,
                                     width: 50,
                                     borderRadius: 58,

diff --git a/Flourish/Components/Flourishing/Todo.js b/Flourish/Components/Flourishing/Todo.js
@@ -1,21 +1,34 @@
 import React from 'react';
 import { View, StyleSheet, Text } from 'react-native';
-// import { CheckBox } from 'native-base';
+import { CheckBox, Icon } from 'react-native-elements';
 
 export default class Todo extends React.Component {
+    constructor(props) {
+        super(props);
+        // console.log(this.props);
+        this.state = {
+            checking: this.props.data.checked ==="true",
+        }
+    }
+
+    toggleCheckBox = () => {
+        this.setState(prevState => ({ checking: !prevState.checking }));
+    }
+
     render() {
         return (
             <View
                 style={{
                     flex: 1,
                     flexDirection: 'row',
                     alignItems: 'center',
-                    height: 70,
+                    // height: 70,
                     borderRadius: 10,
                     backgroundColor: '#ffffff',
-                    marginVertical: 7,
+                    marginVertical: 10,
+                    marginHorizontal: 5,
                     paddingVertical: 10,
-                    paddingHorizontal: 16,
+                    // paddingHorizontal: 8,
 
                     shadowColor: "#000",
                     shadowOffset: {
@@ -26,13 +39,24 @@ export default class Todo extends React.Component {
                     shadowRadius: 3.84,
                     elevation: 5,
                 }}>
-                {/* <CheckBox checked={true}></CheckBox> */}
-                <View style={{ flex: 0.5 }}>
+                <CheckBox
+                        checkedIcon='check-circle-o'
+                        uncheckedIcon='circle-o'
+                        checked={this.state.checking}
+                        onPress={this.toggleCheckBox}
+                        size={23}
+                        containerStyle={{margin: 0, padding:0}}
+                        checkedColor='#ef5e85'
+                    >
+                    </CheckBox>
+                <View style={{ flex: 0.4 }}>
+
                     <Text
                         style={{
                             fontSize: 18,
                             fontWeight: 'bold',
                             color: '#505050',
+                            flexWrap: 'wrap',
                         }}
                     >
                         {this.props.data.name}
@@ -46,13 +70,13 @@ export default class Todo extends React.Component {
                     marginHorizontal: 16,
                 }}></View>
 
-                <View style={{ flex: 0.5, flexDirection: 'row', alignItems:'center', justifyContent:'space-around'}}>
-                    <View style={{ flex: 0.6, height: '100%', flexDirection:'column'}}>
-                        <Text style={{fontSize: 15, }}>{this.props.data.task}</Text>
-                        <Text style={{color: '#cacaca'}}>{this.props.data.freq}</Text>
+                <View style={{ flex: 0.5, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-around' }}>
+                    <View style={{ flex: 0.6, height: '100%', flexDirection: 'column' }}>
+                        <Text style={{ fontSize: 15, }}>{this.props.data.task}</Text>
+                        <Text style={{ color: '#cacaca' }}>{this.props.data.freq}</Text>
                     </View>
-                    <View style={{ flex: 0.4, paddingVertical:0, alignItems:'flex-end'}}>
-                        <Text style={{fontSize: 15, color:'#ef5e85', fontWeight: 'bold',}}>{this.props.data.date}</Text>
+                    <View style={{ flex: 0.4, paddingVertical: 0, alignItems: 'flex-end' }}>
+                        <Text style={{ fontSize: 15, color: '#ef5e85', fontWeight: 'bold', }}>{this.props.data.date}</Text>
                     </View>
                 </View>
             </View>

diff --git a/Flourish/Components/Garden/PlantCard.js b/Flourish/Components/Garden/PlantCard.js
@@ -5,52 +5,59 @@ export default class PlantCard extends React.Component {
     render() {
         return (
             <TouchableOpacity style={{
-                // flex: 0.4,
-                height: 200,
-                width: 150,
-                flexDirection: 'column',
-                alignItems: 'center',
-                marginBottom: 26,
+                flex: 0.8,
+                height: 150,
+                // width: '100%',
+                flexDirection: 'row',
+                alignItems: 'flex-start',
+                marginBottom: 8,
+                marginHorizontal: 10,
 
                 backgroundColor: '#fff',
                 borderRadius: 10,
 
-                shadowColor: "#000",
-                shadowOffset: {
-                    width: 0,
-                    height: 4,
-                },
-                shadowOpacity: 0.32,
-                shadowRadius: 5.46,
+                // shadowColor: "#000",
+                // shadowOffset: {
+                //     width: 0,
+                //     height: 4,
+                // },
+                // shadowOpacity: 0.32,
+                // shadowRadius: 5.46,
 
-                elevation: 9,
+                // elevation: 9,
             }}>
                 <View style={{
-                    width: '100%',
-                    height: '70%',
+                    // width: '50%',
+                    // height: '100%',
                     // flex:0.7,
-                    backgroundColor: '#123123',
+                    flex: 1,
+                    // backgroundColor: '#123123',
                     borderTopLeftRadius: 10,
-                    borderTopRightRadius: 10,
+                    borderBottomLeftRadius:10, 
+                    padding: 8,
                 }}>
                     <Image
                         style={{
-                            width: '100%',
-                            height: '100%',
-                            borderTopLeftRadius: 10,
-                            borderTopRightRadius: 10,
+                            // width: '100%',
+                            // height: '100%',
+                            flex: 1,
+                            // borderTopLeftRadius: 10,
+                            // borderBottomLeftRadius:10, 
+                            borderRadius: 10,
                         }}
                         source={{ uri: this.props.data.img }}
                     />
                 </View>
                 <View style={{
                     flexDirection: 'column',
                     padding: 8,
-                    width: '100%',
-                    height: '30%',
+                    // width: '100%',
+                    // height: '30%',
+                    flex: 1,
+                    // flexWrap: 'wrap'
                 }}>
                     <Text style={{
-                        fontSize: 17,
+                        fontSize: 18,
                         fontWeight: 'bold',
                     }}>
                         {this.props.data.name}