유희정 / fwiot

Go to a project
Toggle navigation Toggle navigation pinning
이윤영
41e840e0 1 parent 27c92619

Modify rendering

Expand all
Inline Side-by-side
Showing 7 changed files with 87 additions and 101 deletions
import React, { Component } from 'react';
import { View, Text, StyleSheet,ScrollView, RefreshControl } from 'react-native';
import { BarChart, Grid } from 'react-native-svg-charts'
import HistoryGraph from '../component/HistoryGraph'
import SegmentedControlTab from "react-native-segmented-control-tab";
import {add_data, get_week_data, get_today_data, get_month_data, get_year_data} from'../component/DBhelper.js';
var list1 = get_week_data();
var list2 = get_month_data();
var list3 = get_year_data();
import {add_data, get_week_data, get_month_data, get_year_data, add_temp_data} from'../component/DBhelper.js';
//var today = new Date();
//today.setHours(today.getHours()+9);
var week = ['SUN','MON','TUE', 'WED', 'THU', 'FRI', 'SAT'];
const data1 = [
{ label: week[list1[1][0]], value: list1[0][0] },
{ label: week[list1[1][1]], value: list1[0][1] },
{ label: week[list1[1][2]], value: list1[0][2] },
{ label: week[list1[1][3]], value: list1[0][3] },
{ label: week[list1[1][4]], value: list1[0][4] },
{ label: week[list1[1][5]], value: list1[0][5] },
{ label: week[list1[1][6]], value: list1[0][6] }
]
const data2 = [
{ label: '1', value: list2[0] },
{ label: '7', value: list2[1] },
{ label: '14', value: list2[2]},
{ label: '21', value: list2[3] },
{ label: '28', value: list2[4] }
]
const data3 = [
{ label: 'Jan', value: list3[0] },
{ label: 'Feb', value: list3[1] },
{ label: 'Mar', value: list3[2] },
{ label: 'Apr', value: list3[3] },
{ label: 'May', value: list3[4] },
{ label: 'Jun', value: list3[5] },
{ label: 'Jul', value: list3[6] },
{ label: 'Aug', value: list3[7] },
{ label: 'Sep', value: list3[8] },
{ label: 'Oct', value: list3[9] },
{ label: 'Nov', value: list3[10] },
{ label: 'Dec', value: list3[11] }
]
const data4 = [
{ label: 'C', value: 500 },
{ label: 'H', value: 312 },
{ label: 'A', value: 424 },
{ label: 'N', value: 745 },
{ label: 'G', value: 89 },
{ label: 'E', value: 434 }
]
function total(list){
var total=0;
sum = 0;
for(var i =0; i< list.length; i++)
total += list[i]
return total
sum += list[i].value;
return sum
}
const kg1 = "총 " + total(list1[0]) + "kg"
const kg2 = "총 " + total(list2) + "kg"
const kg3 = "총 " + total(list3) + "kg"
export default class HomeTab extends Component {
constructor(){
super();
this.state = {
selectedIndex: 0,
data: data1,
title: "총 " + total(list1[0]) + "kg",
data: get_week_data(),
title: "총 " + total(get_week_data())/1000 + "kg",
spane: "",
refreshing: false
}
......@@ -76,22 +28,33 @@ export default class HomeTab extends Component {
_onRefresh = () => {
this.setState({refresing: true});
// this.setState({data: data4})
this.get_diff_data();
this.setState({refreshing: false});
}
componentDidMount() {
const { navigation } = this.props;
this.focusListener = navigation.addListener('didFocus', () => {
this.handleIndexChange(this.state.selectedIndex);
});
}
componentWillUnmount() {
// Remove the event listener
this.focusListener.remove();
}
handleIndexChange = index => {
this.setState({selectedIndex: index});
switch(index){
case 0:
this.setState({data: data1, title: kg1});
this.setState({data: get_week_data(), title: "총 " + total(get_week_data())/1000 + "kg"});
break;
case 1:
this.setState({data: data2, title: kg2});
this.setState({data: get_month_data(), title: "총 " + total(get_month_data())/1000 + "kg"});
break;
case 2:
this.setState({data: data3, title: kg3});
this.setState({data: get_year_data(), title: "총 " + total(get_year_data())/1000 + "kg"});
break;
}
};
......@@ -111,24 +74,17 @@ export default class HomeTab extends Component {
.then((response) => response.json())
.then((responseJson)=> {
console.log(responseJson)
add_data(responseJson)
//add_data(responseJson)
add_temp_data();
},function(){
})
.then(()=>{this.handleIndexChange(this.state.selectedIndex)})
.catch((error) => {
console.error(error);
})
}
render() {
// const fill = 'rgb(134, 65, 244)'
// const data = [50, 10, 40, 95, -4, -24, null, 85, undefined, 0, 35, 53, -53, 24, 50, -20, -80]
// return (
// <BarChart style={{ height: 200 }} data={data} svg={{ fill }} contentInset={{ top: 30, bottom: 30 }}>
// <Grid />
// </BarChart>
// );
return(
<ScrollView style = {style.container}
refreshControl={
......@@ -147,15 +103,18 @@ export default class HomeTab extends Component {
<View style={style.header}>
<Text style={style.tabName}>History </Text>
</View>
<View style={{flex : 8, justifyContent:'center'}}>
<Text style ={style.date_text}>{this.state.title}</Text>
</View>
<SegmentedControlTab
values={["Week", "Month", "Year"]}
selectedIndex={this.state.selectedIndex}
onTabPress={this.handleIndexChange}
/>
<HistoryGraph data={this.state.data} round={100} unit="kg"/>
<View style={{justifyContent:'center', padding: 10}}>
<SegmentedControlTab
values={["Week", "Month", "Year"]}
selectedIndex={this.state.selectedIndex}
onTabPress={this.handleIndexChange}
/>
</View>
<View style={{flex : 8, justifyContent:'center', padding: 10}}>
<Text style ={style.date_text}>{this.state.title}</Text>
</View>
<HistoryGraph data={this.state.data} round={1000} unit="g"/>
</View>
</ScrollView>
)
......
......@@ -2,7 +2,7 @@ import React, { Component } from 'react';
import { View, Text, StyleSheet, SafeAreaView, ScrollView, Image } from 'react-native';
import Circle from '../component/circle_component'
import {Table, TableWrapper, Row,Rows} from 'react-native-table-component'
import {get_now_weight, get_today_data, add_data} from'../component/DBhelper.js';
import {get_now_weight, get_today_data, add_data,add_temp_data} from'../component/DBhelper.js';
var date = new Date();
date.setHours(date.getHours()+9);
......@@ -21,6 +21,21 @@ export default class HomeTab extends Component {
table_contents : get_today_data()
}
}
componentDidMount() {
const { navigation } = this.props;
this.focusListener = navigation.addListener('didFocus', () => {
this.setState({
current_weight : get_now_weight(),
table_contents : get_today_data()
});
});
}
componentWillUnmount() {
// Remove the event listener
this.focusListener.remove();
}
get_diff_data(){
return fetch('http://testloadbalancer-1847561458.ap-northeast-2.elb.amazonaws.com/app/get_diff_data/',{
method:'POST',
......@@ -30,19 +45,25 @@ export default class HomeTab extends Component {
},
body:JSON.stringify({
ras_id : "pi1",
date : "1576339901541",
date : "1576648647000",
}),
})
.then((response) => response.json())
.then((responseJson)=> {
console.log(responseJson)
add_data(responseJson);
//add_data(responseJson);
add_temp_data();
},function(){
})
.then(()=>{this.setState({
current_weight : get_now_weight(),
table_contents : get_today_data()
})})
.catch((error) => {
console.error(error);
})
}
render() {
return (
<View style={style.container}>
......
......@@ -40,8 +40,8 @@ export default class SettingTab extends Component {
delete_id(){
this.setState({ID: ''})
//save_app_data()
//delete_all_data()
deleteId()
delete_all_data()
//deleteId()
this.props.navigation.navigate('Login');
}
render() {
......
......@@ -58,8 +58,8 @@ export default class Login extends Component {
/>
<LoginButton
//onPress={()=>{this.getdata}}
onPress={() =>{ this.props.navigation.navigate('MainScreen', { ID: this.state.ID });}}
//onPress={() =>{ this.getdata().then(()=>{this.props.navigation.navigate('MainScreen', { ID: this.state.ID })}) }}
//onPress={() =>{ this.props.navigation.navigate('MainScreen', { ID: this.state.ID });}}
onPress={() =>{ this.getdata().then(()=>{this.props.navigation.navigate('MainScreen', { ID: this.state.ID })}) }}
/>
</View>
</View>
......
......@@ -33,7 +33,7 @@ const AppTabNavigator = createMaterialTopTabNavigator({
}
});
const AppTabContainet = createAppContainer(AppTabNavigator);
const AppTabContainer = createAppContainer(AppTabNavigator);
export default class MainScreen extends Component {
......@@ -44,11 +44,12 @@ export default class MainScreen extends Component {
};
}
static navigationOptions = {
title: 'FW IOT' }
title: 'FW IOT'
}
render() {
registerID(this.state.ID);
return <AppTabContainet/>; // AppTabContainet 컴포넌트를 리턴한다.
return <AppTabContainer/>; // AppTabContainet 컴포넌트를 리턴한다.
}
}
......
This diff is collapsed. Click to expand it.
......@@ -3,12 +3,11 @@ import { View, Text, StyleSheet } from 'react-native';
import { Svg, G, Line, Rect } from 'react-native-svg'
import { Text as SvgText } from 'react-native-svg'
import * as d3 from 'd3'
// import Showkg from './ShowKg'
const GRAPH_MARGIN = 20
const GRAPH_BAR_WIDTH = 10
const colors = {
axis: '#E4E4E4',
axis: '#CED4DA',
bars: '#0066cc',
bardefult: '#CED4DA'
}
......@@ -19,23 +18,26 @@ export default class HistoryGraph extends PureComponent {
super(props);
this.handleClick = this.handleClick.bind(this);
this.state = {
kg: this.props.data[this.props.data.length - 1].label,
kg: this.props.data[this.props.data.length - 1].value,
span: this.props.data[this.props.data.length -1].label,
index: this.props.data.length-1
}
}
handleClick = inkg => {
this.setState({kg: inkg});
handleClick = item => {
this.setState({span: item.label, kg: item.value});
}
componentDidUpdate(prevProps, prevState){
if (this.props.data !== prevProps.data) {
this.setState({
...this.state,
kg : this.props.data[this.props.data.length - 1].label,
kg : this.props.data[this.props.data.length - 1].value,
span: this.props.data[this.props.data.length -1].label,
index: this.props.data.length-1
})
} }
}
}
render() {
// Dimensions
......@@ -88,7 +90,7 @@ export default class HistoryGraph extends PureComponent {
y2={y(topValue) * -1}
stroke={colors.axis}
strokeDasharray={[3, 3]}
strokeWidth="0.5"
strokeWidth="1"
/>
{/* middle axis */}
......@@ -99,7 +101,7 @@ export default class HistoryGraph extends PureComponent {
y2={y(middleValue) * -1}
stroke={colors.axis}
strokeDasharray={[3, 3]}
strokeWidth="0.5"
strokeWidth="1"
/>
{/* bottom axis */}
......@@ -109,7 +111,7 @@ export default class HistoryGraph extends PureComponent {
x2={graphWidth}
y2="2"
stroke={colors.axis}
strokeWidth="0.5"
strokeWidth="1"
/>
{/* bars */}
......@@ -121,8 +123,8 @@ export default class HistoryGraph extends PureComponent {
rx={2.5}
width={GRAPH_BAR_WIDTH}
height={y(item.value)}
fill = {this.state.kg == item.label ? colors.bars : colors.bardefult}
onPress={()=>this.handleClick(item.label)}
fill = {this.state.span == item.label ? colors.bars : colors.bardefult}
onPress={()=>this.handleClick(item)}
/>
))}
......@@ -138,7 +140,10 @@ export default class HistoryGraph extends PureComponent {
</G>
</Svg>
<View style={style.container}>
<Text>{this.state.kg}</Text>
<Text>{this.state.span}</Text>
<View>
<Text>{this.state.kg/1000}kg</Text>
</View>
</View>
</View>
)
......