유희정 / fwiot

Go to a project
Toggle navigation Toggle navigation pinning
유희정
56be40aa 1 parent 30609434

Home and Setting

Inline Side-by-side
Showing 10 changed files with 332 additions and 16 deletions
This diff could not be displayed because it is too large.
...@@ -10,11 +10,13 @@ ...@@ -10,11 +10,13 @@
10 "lint": "eslint ." 10 "lint": "eslint ."
11 }, 11 },
12 "dependencies": { 12 "dependencies": {
13 + "express": "^4.17.1",
13 "react": "16.9.0", 14 "react": "16.9.0",
14 "react-native": "0.61.4", 15 "react-native": "0.61.4",
15 "react-native-gesture-handler": "^1.5.0", 16 "react-native-gesture-handler": "^1.5.0",
16 "react-native-reanimated": "^1.4.0", 17 "react-native-reanimated": "^1.4.0",
17 "react-native-screens": "^2.0.0-alpha.8", 18 "react-native-screens": "^2.0.0-alpha.8",
19 + "react-native-table-component": "^1.2.1",
18 "react-native-vector-icons": "^6.6.0", 20 "react-native-vector-icons": "^6.6.0",
19 "react-navigation": "^4.0.10", 21 "react-navigation": "^4.0.10",
20 "react-navigation-drawer": "^2.3.3", 22 "react-navigation-drawer": "^2.3.3",
......
1 import React, { Component } from 'react'; 1 import React, { Component } from 'react';
2 -import { View, Text, StyleSheet } from 'react-native'; 2 +import { View, Text, StyleSheet, SafeAreaView, ScrollView, Image } from 'react-native';
3 import WasteDetail from '../WasteDetail' 3 import WasteDetail from '../WasteDetail'
4 +import Circle from '../component/circle_component'
5 +import {Table, TableWrapper, Row,Rows} from 'react-native-table-component'
6 +var date = new Date();
7 +date.setHours(date.getHours()+9);
4 8
5 export default class HomeTab extends Component { 9 export default class HomeTab extends Component {
10 +
11 + constructor(props){
12 + super(props);
13 + this.state = {
14 + today : date.getFullYear() + "." + date.getMonth() + "." + date.getDate(),
15 + current_weight : 0,
16 + table_contents : [['오후','6:12:15', '+0.25kg', 'Total : 1.5 kg'],['오후','4:27:52', '+0.12kg', 'Total : 1.38kg'],
17 + ['오후','6:12:15', '+0.25kg', 'Total : 1.5 kg'],['오후','6:12:15', '+0.25kg', 'Total : 1.5 kg'],
18 + ['오후','6:12:15', '+0.25kg', 'Total : 1.5 kg'],['오후','6:12:15', '+0.25kg', 'Total : 1.5 kg'],
19 + ['오후','6:12:15', '+0.25kg', 'Total : 1.5 kg'],['오후','6:12:15', '+0.25kg', 'Total : 1.5 kg'],
20 + ['오후','6:12:15', '+0.25kg', 'Total : 1.5 kg'],['오후','6:12:15', '+0.25kg', 'Total : 1.5 kg']
21 + ]
22 + }
23 + }
6 render() { 24 render() {
7 return ( 25 return (
8 <View style={style.container}> 26 <View style={style.container}>
9 - <Text>HomeTab</Text> 27 + <View style={style.header}>
10 - <WasteDetail></WasteDetail> 28 + <Text style={style.tabName}>Home</Text>
29 + </View>
30 + <View style={{flexDirection:'row',flex:0.8,backgroundColor: "rgba(230,230,230,0.5)"}}>
31 + <View style={{flex:1,justifyContent:'center'}}>
32 + <Image style={style.img}
33 + source={require("../assets/calendar.jpg")}/>
34 + </View>
35 + <View style={{flex : 8, justifyContent:'center'}}>
36 + <Text style ={style.date_text}>{this.state.today}</Text>
37 + </View>
38 + </View>
39 + <View style={style.current_state}>
40 + <Circle
41 + title={"3.6"}>
42 + </Circle>
43 + </View>
44 + <View style={style.waste_detail}>
45 + <SafeAreaView style={style.scroll_container}>
46 + <ScrollView style={style.scroll_page}>
47 + <Text style={style.history}>Today's History</Text>
48 + <Table>
49 + <TableWrapper>
50 + <Row data={['시간', '증감량', '총량']} flexArr={[2.5, 1.5, 1.5]} textStyle={style.row_style1}/>
51 + <Rows data={this.state.table_contents} flexArr={[1, 1.5, 1.5, 1.5]} textStyle={style.row_style2}/>
52 + </TableWrapper>
53 +
54 + </Table>
55 + </ScrollView>
56 + </SafeAreaView>
57 + </View>
58 +
11 </View> 59 </View>
12 ); 60 );
13 } 61 }
...@@ -16,5 +64,65 @@ export default class HomeTab extends Component { ...@@ -16,5 +64,65 @@ export default class HomeTab extends Component {
16 const style = StyleSheet.create({ 64 const style = StyleSheet.create({
17 container: { 65 container: {
18 flex: 1, 66 flex: 1,
19 - } 67 + },
20 -}); 68 + header: {
69 + flex :1,
70 + justifyContent : 'center',
71 + },
72 + tabName:{
73 + marginStart : 10,
74 + textAlignVertical : 'center',
75 + fontSize : 20,
76 + color : "#0066cc",
77 + fontWeight: 'bold',
78 + },
79 + current_state:{
80 + flex: 5,
81 + backgroundColor: "rgba(230,230,230,0.5)"
82 + },
83 + waste_detail:{
84 + flex :5,
85 + backgroundColor: "rgba(230,230,230,0.5)",
86 + },
87 + date_text:{
88 + fontSize :20,
89 + marginStart:5,
90 + textAlignVertical:'center'
91 + },
92 + scroll_container : {
93 + flex:1,
94 + },
95 + scroll_page:{
96 + margin:20,
97 + borderWidth : 1,
98 + },
99 + history : {
100 + fontSize : 22,
101 + marginBottom : 5,
102 + marginStart : 5
103 + },
104 + content:{
105 + fontSize : 15,
106 + },
107 + wrapper: {
108 + flexDirection: 'row'
109 + },
110 + row_style1:{
111 + textAlign : 'center',
112 + fontSize : 18,
113 + marginBottom : 5,
114 + borderBottomWidth:1,
115 + },
116 + row_style2:{
117 + borderBottomWidth:1,
118 + marginVertical : 2,
119 + fontSize : 15,
120 + textAlign : 'center',
121 + },
122 + img:{
123 + width :20,
124 + resizeMode : 'contain',
125 + alignSelf:'baseline',
126 + marginStart:10,
127 + },
128 +});
...\ No newline at end of file ...\ No newline at end of file
......
1 import React, { Component } from 'react'; 1 import React, { Component } from 'react';
2 -import { View, Text, StyleSheet } from 'react-native'; 2 +import { View, Text, StyleSheet, TextInput, TouchableOpacity, Image } from 'react-native';
3 +import AddButton from '../component/AddButton'
3 4
4 -export default class HomeTab extends Component { 5 +var date = new Date();
6 +date.setHours(date.getHours()+9);
7 +
8 +export default class SettingTab extends Component {
9 +
10 + constructor(props){
11 + super(props);
12 + this.state = {
13 + ID : 'abcdefg1234'
14 + }
15 + }
16 +
17 + delete_id(){
18 + this.setState({ID: ''})
19 + //기기연결 해제, 디비비우기
20 + }
5 render() { 21 render() {
6 return ( 22 return (
7 <View style={style.container}> 23 <View style={style.container}>
8 - <Text>SettingTab</Text> 24 + <View style={style.header}>
25 + <Text style={style.tabName}>Setting</Text>
26 + </View>
27 + <View style={style.content}>
28 + <View style={style.id}>
29 + <Text style={{marginStart:5, marginBottom: 10, fontSize : 15}}>Lasberry PI ID</Text>
30 + <View style={{backgroundColor:'white', height:40,width:'100%',flexDirection:'row', justifyContent:'center', alignItems:'center'}}>
31 + <View style={{flex:8}}>
32 + <Text style={{marginStart:10, fontSize : 15}}>{this.state.ID}</Text>
33 + </View>
34 + <View style={{flex:1}}>
35 + <Image style={style.img}
36 + source={require('../assets/check.jpg')}/>
37 + </View>
38 + </View>
39 + <TouchableOpacity
40 + onPress={()=>this.delete_id()}>
41 + <View style={{backgroundColor:"#0066cc", height:40,width:'100%',flexDirection:'row', justifyContent:'center', alignItems:'center', marginTop:5,}}>
42 + <View style={{flex:8}}>
43 + <Text style={{marginStart:10, fontSize : 15, textAlign:'center'}}>Delete</Text>
44 + </View>
45 + </View>
46 + </TouchableOpacity>
47 + </View>
48 + <View style={style.device}>
49 + <View style={{backgroundColor:'white', height:40,width:'100%',flexDirection:'row', justifyContent:'center', alignItems:'center'}}>
50 + <Text style={{marginStart:10, fontSize : 15}}>Connect New Device</Text>
51 + </View>
52 + <View style={{backgroundColor:'white', height:40,width:'100%', alignItems:'center', marginTop:5}}>
53 + <TextInput style={{marginStart:10}}
54 + placeholder="New Rasberry ID"
55 + value={this.state.text}
56 + onChangeText={(text)=>this.setState({ID:text})}/>
57 + <AddButton></AddButton>
58 + </View>
59 + </View>
60 + </View>
9 </View> 61 </View>
10 ); 62 );
11 } 63 }
...@@ -14,7 +66,41 @@ export default class HomeTab extends Component { ...@@ -14,7 +66,41 @@ export default class HomeTab extends Component {
14 const style = StyleSheet.create({ 66 const style = StyleSheet.create({
15 container: { 67 container: {
16 flex: 1, 68 flex: 1,
17 - alignItems: 'center', 69 + },
18 - justifyContent: 'center', 70 + header: {
71 + flex :1,
72 + justifyContent : 'center',
73 + },
74 + tabName:{
75 + marginStart : 10,
76 + textAlignVertical : 'center',
77 + fontSize : 20,
78 + color : "#0066cc",
79 + fontWeight: 'bold',
80 + },
81 + content:{
82 + flex : 8.8,
83 + backgroundColor:"rgba(230,230,230,0.5)",
84 + justifyContent : 'center',
85 + padding : 20,
86 + },
87 + blank :{
88 + flex:3,
89 + },
90 + id:{
91 + alignSelf:'center',
92 + width:'100%',
93 + justifyContent:'center',
94 + flex:1,
95 + },
96 + device:{
97 + flex : 1,
98 + },
99 + blank :{
100 + flex:3,
101 + },
102 + img:{
103 + width : 30,
104 + resizeMode : 'contain',
19 } 105 }
20 -}); 106 +});
...\ No newline at end of file ...\ No newline at end of file
......
1 import React, { Component } from 'react'; 1 import React, { Component } from 'react';
2 -import { StyleSheet, Text, View, TextInput, Image, } from 'react-native'; 2 +import { StyleSheet, Text, View, TextInput, Image} from 'react-native';
3 import LoginButton from './component/LoginButton'; 3 import LoginButton from './component/LoginButton';
4 4
5 export default class Login extends Component { 5 export default class Login extends Component {
...@@ -14,6 +14,25 @@ export default class Login extends Component { ...@@ -14,6 +14,25 @@ export default class Login extends Component {
14 title: 'Login', 14 title: 'Login',
15 }; 15 };
16 16
17 + /*handlePress = async () => {
18 + fetch('http://localhost:3000/app/get_data/'+this.state.ID, {
19 + method: 'GET',
20 + headers: {
21 + 'Content-Type': 'application/json',
22 + },
23 + })
24 + .then((response) => response.json())
25 + .then((responseJson) => {
26 + Alert.alert("Author name at 0th index: " + responseJson[0].name);
27 + })
28 + .catch((error) => {
29 + console.error(error);
30 + });
31 + }
32 + */
33 +
34 +
35 +
17 render() { 36 render() {
18 return ( 37 return (
19 <View style={styles.container}> 38 <View style={styles.container}>
...@@ -38,10 +57,10 @@ export default class Login extends Component { ...@@ -38,10 +57,10 @@ export default class Login extends Component {
38 placeholder="ID" 57 placeholder="ID"
39 placeholderTextColor="#66b3ff" 58 placeholderTextColor="#66b3ff"
40 value={this.state.text} 59 value={this.state.text}
41 - onChangeText={(text) => this.setState({ ID: text })} 60 + onChangeText={(text) => {this.setState({ID:text})}}
42 /> 61 />
43 <LoginButton 62 <LoginButton
44 - onPress={() => { this.props.navigation.navigate('MainScreen', { ID: this.state.ID }) }} 63 + onPress={() =>{ this.props.navigation.navigate('MainScreen', { ID: this.state.ID }) }}
45 /> 64 />
46 </View> 65 </View>
47 </View> 66 </View>
...@@ -53,6 +72,7 @@ export default class Login extends Component { ...@@ -53,6 +72,7 @@ export default class Login extends Component {
53 } 72 }
54 } 73 }
55 74
75 +
56 const styles = StyleSheet.create({ 76 const styles = StyleSheet.create({
57 input: { 77 input: {
58 height: 50, 78 height: 50,
...@@ -85,7 +105,7 @@ const styles = StyleSheet.create({ ...@@ -85,7 +105,7 @@ const styles = StyleSheet.create({
85 }, 105 },
86 input_div :{ 106 input_div :{
87 flex: 4, 107 flex: 4,
88 - backgroundColor: '#0149ff', 108 + backgroundColor: "rgba(230,230,230,0.5)",
89 borderRadius : 20, 109 borderRadius : 20,
90 margin:20, 110 margin:20,
91 111
......
...@@ -42,7 +42,7 @@ export default class MainScreen extends Component { ...@@ -42,7 +42,7 @@ export default class MainScreen extends Component {
42 ID: this.props.navigation.getParam('ID'), 42 ID: this.props.navigation.getParam('ID'),
43 }; 43 };
44 } 44 }
45 - 45 +
46 static navigationOptions = { 46 static navigationOptions = {
47 title: 'FW IOT' } 47 title: 'FW IOT' }
48 48
...@@ -58,3 +58,4 @@ const styles = StyleSheet.create({ ...@@ -58,3 +58,4 @@ const styles = StyleSheet.create({
58 justifyContent: 'center', 58 justifyContent: 'center',
59 }, 59 },
60 }); 60 });
61 +
......
1 +import React, { Component } from 'react';
2 +import {
3 + TouchableOpacity,
4 + Text,
5 + StyleSheet,
6 +} from 'react-native';
7 +
8 +export default class AddButton extends Component {
9 + constructor(props) {
10 + super(props);
11 + }
12 +
13 + static defaultProps = {
14 + onPress: () => null,
15 + }
16 +
17 + render() {
18 + return (
19 + <TouchableOpacity
20 + style={styles.button}
21 + onPress={this.props.onPress}
22 + >
23 + <Text style={styles.title}>Register</Text>
24 + </TouchableOpacity>
25 + )
26 + }
27 +}
28 +
29 +const styles = StyleSheet.create({
30 + button: {
31 + alignSelf: 'center',
32 + padding: 10,
33 + backgroundColor: "#0066cc",
34 + width: 100,
35 + height: 30,
36 + marginTop: 10,
37 + borderRadius : 20,
38 + justifyContent : 'center',
39 +
40 + },
41 + title: {
42 + fontSize: 15,
43 + color: 'white',
44 + textAlign: 'center',
45 + textAlignVertical : 'center',
46 + },
47 +});
...\ No newline at end of file ...\ No newline at end of file
1 +import React, { Component } from 'react';
2 +import {
3 + TouchableOpacity,
4 + Text,
5 + StyleSheet,
6 +} from 'react-native';
7 +
8 +export default class LoginButton extends Component {
9 + constructor(props) {
10 + super(props);
11 + this.state={
12 + title : '',
13 + }
14 + }
15 +
16 + static defaultProps = {
17 + title : '',
18 + onPress: () => null,
19 + }
20 +
21 + render() {
22 + return (
23 + <TouchableOpacity
24 + style={styles.button}
25 + onPress={this.props.onPress}
26 + >
27 + <Text style={styles.title}>{this.props.title}kg</Text>
28 + </TouchableOpacity>
29 + )
30 + }
31 +}
32 +
33 +const styles = StyleSheet.create({
34 + button: {
35 + alignSelf: 'center',
36 + padding: 10,
37 + width: 200,
38 + height: 200,
39 + borderRadius : 100,
40 + marginTop : 30,
41 + justifyContent : "center",
42 + alignItems : "center",
43 + borderWidth : 10,
44 + borderColor:"#0066cc"
45 +
46 + },
47 + title: {
48 + fontSize: 30,
49 + textAlign: 'center',
50 + textAlignVertical : 'center',
51 + },
52 +});
...\ No newline at end of file ...\ No newline at end of file