유희정 / 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 @@
"lint": "eslint ."
},
"dependencies": {
"express": "^4.17.1",
"react": "16.9.0",
"react-native": "0.61.4",
"react-native-gesture-handler": "^1.5.0",
"react-native-reanimated": "^1.4.0",
"react-native-screens": "^2.0.0-alpha.8",
"react-native-table-component": "^1.2.1",
"react-native-vector-icons": "^6.6.0",
"react-navigation": "^4.0.10",
"react-navigation-drawer": "^2.3.3",
......
import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { View, Text, StyleSheet, SafeAreaView, ScrollView, Image } from 'react-native';
import WasteDetail from '../WasteDetail'
import Circle from '../component/circle_component'
import {Table, TableWrapper, Row,Rows} from 'react-native-table-component'
var date = new Date();
date.setHours(date.getHours()+9);
export default class HomeTab extends Component {
constructor(props){
super(props);
this.state = {
today : date.getFullYear() + "." + date.getMonth() + "." + date.getDate(),
current_weight : 0,
table_contents : [['오후','6:12:15', '+0.25kg', 'Total : 1.5 kg'],['오후','4:27:52', '+0.12kg', 'Total : 1.38kg'],
['오후','6:12:15', '+0.25kg', 'Total : 1.5 kg'],['오후','6:12:15', '+0.25kg', 'Total : 1.5 kg'],
['오후','6:12:15', '+0.25kg', 'Total : 1.5 kg'],['오후','6:12:15', '+0.25kg', 'Total : 1.5 kg'],
['오후','6:12:15', '+0.25kg', 'Total : 1.5 kg'],['오후','6:12:15', '+0.25kg', 'Total : 1.5 kg'],
['오후','6:12:15', '+0.25kg', 'Total : 1.5 kg'],['오후','6:12:15', '+0.25kg', 'Total : 1.5 kg']
]
}
}
render() {
return (
<View style={style.container}>
<Text>HomeTab</Text>
<WasteDetail></WasteDetail>
<View style={style.header}>
<Text style={style.tabName}>Home</Text>
</View>
<View style={{flexDirection:'row',flex:0.8,backgroundColor: "rgba(230,230,230,0.5)"}}>
<View style={{flex:1,justifyContent:'center'}}>
<Image style={style.img}
source={require("../assets/calendar.jpg")}/>
</View>
<View style={{flex : 8, justifyContent:'center'}}>
<Text style ={style.date_text}>{this.state.today}</Text>
</View>
</View>
<View style={style.current_state}>
<Circle
title={"3.6"}>
</Circle>
</View>
<View style={style.waste_detail}>
<SafeAreaView style={style.scroll_container}>
<ScrollView style={style.scroll_page}>
<Text style={style.history}>Today's History</Text>
<Table>
<TableWrapper>
<Row data={['시간', '증감량', '총량']} flexArr={[2.5, 1.5, 1.5]} textStyle={style.row_style1}/>
<Rows data={this.state.table_contents} flexArr={[1, 1.5, 1.5, 1.5]} textStyle={style.row_style2}/>
</TableWrapper>
</Table>
</ScrollView>
</SafeAreaView>
</View>
</View>
);
}
......@@ -16,5 +64,65 @@ export default class HomeTab extends Component {
const style = StyleSheet.create({
container: {
flex: 1,
}
});
},
header: {
flex :1,
justifyContent : 'center',
},
tabName:{
marginStart : 10,
textAlignVertical : 'center',
fontSize : 20,
color : "#0066cc",
fontWeight: 'bold',
},
current_state:{
flex: 5,
backgroundColor: "rgba(230,230,230,0.5)"
},
waste_detail:{
flex :5,
backgroundColor: "rgba(230,230,230,0.5)",
},
date_text:{
fontSize :20,
marginStart:5,
textAlignVertical:'center'
},
scroll_container : {
flex:1,
},
scroll_page:{
margin:20,
borderWidth : 1,
},
history : {
fontSize : 22,
marginBottom : 5,
marginStart : 5
},
content:{
fontSize : 15,
},
wrapper: {
flexDirection: 'row'
},
row_style1:{
textAlign : 'center',
fontSize : 18,
marginBottom : 5,
borderBottomWidth:1,
},
row_style2:{
borderBottomWidth:1,
marginVertical : 2,
fontSize : 15,
textAlign : 'center',
},
img:{
width :20,
resizeMode : 'contain',
alignSelf:'baseline',
marginStart:10,
},
});
\ No newline at end of file
......
import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { View, Text, StyleSheet, TextInput, TouchableOpacity, Image } from 'react-native';
import AddButton from '../component/AddButton'
export default class HomeTab extends Component {
var date = new Date();
date.setHours(date.getHours()+9);
export default class SettingTab extends Component {
constructor(props){
super(props);
this.state = {
ID : 'abcdefg1234'
}
}
delete_id(){
this.setState({ID: ''})
//기기연결 해제, 디비비우기
}
render() {
return (
<View style={style.container}>
<Text>SettingTab</Text>
<View style={style.header}>
<Text style={style.tabName}>Setting</Text>
</View>
<View style={style.content}>
<View style={style.id}>
<Text style={{marginStart:5, marginBottom: 10, fontSize : 15}}>Lasberry PI ID</Text>
<View style={{backgroundColor:'white', height:40,width:'100%',flexDirection:'row', justifyContent:'center', alignItems:'center'}}>
<View style={{flex:8}}>
<Text style={{marginStart:10, fontSize : 15}}>{this.state.ID}</Text>
</View>
<View style={{flex:1}}>
<Image style={style.img}
source={require('../assets/check.jpg')}/>
</View>
</View>
<TouchableOpacity
onPress={()=>this.delete_id()}>
<View style={{backgroundColor:"#0066cc", height:40,width:'100%',flexDirection:'row', justifyContent:'center', alignItems:'center', marginTop:5,}}>
<View style={{flex:8}}>
<Text style={{marginStart:10, fontSize : 15, textAlign:'center'}}>Delete</Text>
</View>
</View>
</TouchableOpacity>
</View>
<View style={style.device}>
<View style={{backgroundColor:'white', height:40,width:'100%',flexDirection:'row', justifyContent:'center', alignItems:'center'}}>
<Text style={{marginStart:10, fontSize : 15}}>Connect New Device</Text>
</View>
<View style={{backgroundColor:'white', height:40,width:'100%', alignItems:'center', marginTop:5}}>
<TextInput style={{marginStart:10}}
placeholder="New Rasberry ID"
value={this.state.text}
onChangeText={(text)=>this.setState({ID:text})}/>
<AddButton></AddButton>
</View>
</View>
</View>
</View>
);
}
......@@ -14,7 +66,41 @@ export default class HomeTab extends Component {
const style = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
header: {
flex :1,
justifyContent : 'center',
},
tabName:{
marginStart : 10,
textAlignVertical : 'center',
fontSize : 20,
color : "#0066cc",
fontWeight: 'bold',
},
content:{
flex : 8.8,
backgroundColor:"rgba(230,230,230,0.5)",
justifyContent : 'center',
padding : 20,
},
blank :{
flex:3,
},
id:{
alignSelf:'center',
width:'100%',
justifyContent:'center',
flex:1,
},
device:{
flex : 1,
},
blank :{
flex:3,
},
img:{
width : 30,
resizeMode : 'contain',
}
});
});
\ No newline at end of file
......
import React, { Component } from 'react';
import { StyleSheet, Text, View, TextInput, Image, } from 'react-native';
import { StyleSheet, Text, View, TextInput, Image} from 'react-native';
import LoginButton from './component/LoginButton';
export default class Login extends Component {
......@@ -14,6 +14,25 @@ export default class Login extends Component {
title: 'Login',
};
/*handlePress = async () => {
fetch('http://localhost:3000/app/get_data/'+this.state.ID, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
})
.then((response) => response.json())
.then((responseJson) => {
Alert.alert("Author name at 0th index: " + responseJson[0].name);
})
.catch((error) => {
console.error(error);
});
}
*/
render() {
return (
<View style={styles.container}>
......@@ -38,10 +57,10 @@ export default class Login extends Component {
placeholder="ID"
placeholderTextColor="#66b3ff"
value={this.state.text}
onChangeText={(text) => this.setState({ ID: text })}
onChangeText={(text) => {this.setState({ID:text})}}
/>
<LoginButton
onPress={() => { this.props.navigation.navigate('MainScreen', { ID: this.state.ID }) }}
onPress={() =>{ this.props.navigation.navigate('MainScreen', { ID: this.state.ID }) }}
/>
</View>
</View>
......@@ -53,6 +72,7 @@ export default class Login extends Component {
}
}
const styles = StyleSheet.create({
input: {
height: 50,
......@@ -85,7 +105,7 @@ const styles = StyleSheet.create({
},
input_div :{
flex: 4,
backgroundColor: '#0149ff',
backgroundColor: "rgba(230,230,230,0.5)",
borderRadius : 20,
margin:20,
......
......@@ -42,7 +42,7 @@ export default class MainScreen extends Component {
ID: this.props.navigation.getParam('ID'),
};
}
static navigationOptions = {
title: 'FW IOT' }
......@@ -58,3 +58,4 @@ const styles = StyleSheet.create({
justifyContent: 'center',
},
});
......
import React, { Component } from 'react';
import {
TouchableOpacity,
Text,
StyleSheet,
} from 'react-native';
export default class AddButton extends Component {
constructor(props) {
super(props);
}
static defaultProps = {
onPress: () => null,
}
render() {
return (
<TouchableOpacity
style={styles.button}
onPress={this.props.onPress}
>
<Text style={styles.title}>Register</Text>
</TouchableOpacity>
)
}
}
const styles = StyleSheet.create({
button: {
alignSelf: 'center',
padding: 10,
backgroundColor: "#0066cc",
width: 100,
height: 30,
marginTop: 10,
borderRadius : 20,
justifyContent : 'center',
},
title: {
fontSize: 15,
color: 'white',
textAlign: 'center',
textAlignVertical : 'center',
},
});
\ No newline at end of file
import React, { Component } from 'react';
import {
TouchableOpacity,
Text,
StyleSheet,
} from 'react-native';
export default class LoginButton extends Component {
constructor(props) {
super(props);
this.state={
title : '',
}
}
static defaultProps = {
title : '',
onPress: () => null,
}
render() {
return (
<TouchableOpacity
style={styles.button}
onPress={this.props.onPress}
>
<Text style={styles.title}>{this.props.title}kg</Text>
</TouchableOpacity>
)
}
}
const styles = StyleSheet.create({
button: {
alignSelf: 'center',
padding: 10,
width: 200,
height: 200,
borderRadius : 100,
marginTop : 30,
justifyContent : "center",
alignItems : "center",
borderWidth : 10,
borderColor:"#0066cc"
},
title: {
fontSize: 30,
textAlign: 'center',
textAlignVertical : 'center',
},
});
\ No newline at end of file