Modify rendering

이윤영
Commit 41e840e01c557618d492fc1d7574fd8f123b443d 41e840e0 1 parent 27c92619
Showing 7 changed files with 87 additions and 101 deletions
source/AppTabNavigator/HistoryTab.js
source/AppTabNavigator/HomeTab.js
source/AppTabNavigator/SettingTab.js
source/Login.js
source/MainScreen.js
source/component/DBhelper.js
source/component/HistoryGraph.js
--- a/source/AppTabNavigator/HistoryTab.js
View file @41e840e
+++ b/source/AppTabNavigator/HistoryTab.js
View file @41e840e
 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';
+import  {add_data, get_week_data, get_month_data, get_year_data, add_temp_data} from'../component/DBhelper.js';
-var list1 = get_week_data();
+
-var list2 = get_month_data();
-var list3 = get_year_data();
 //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]
+        sum += list[i].value;
-    return total
+    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,
+            data: get_week_data(),
-            title: "총 " + total(list1[0]) + "kg",
+            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  style={{justifyContent:'center', padding: 10}}>
-                </View>   
+                    <SegmentedControlTab
-                <SegmentedControlTab
+                        values={["Week", "Month", "Year"]}
-                    values={["Week", "Month", "Year"]}
+                        selectedIndex={this.state.selectedIndex}
-                    selectedIndex={this.state.selectedIndex}
+                        onTabPress={this.handleIndexChange}
-                    onTabPress={this.handleIndexChange}
+                    />
-                />
+                </View>
-                <HistoryGraph data={this.state.data} round={100} unit="kg"/>
+                <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>
         )
--- a/source/AppTabNavigator/HomeTab.js
View file @41e840e
+++ b/source/AppTabNavigator/HomeTab.js
View file @41e840e
@@ -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}>
--- a/source/AppTabNavigator/SettingTab.js
View file @41e840e
+++ b/source/AppTabNavigator/SettingTab.js
View file @41e840e
@@ -40,8 +40,8 @@ export default class SettingTab extends Component {
     delete_id(){
         this.setState({ID: ''})
         //save_app_data()
-        //delete_all_data()
+        delete_all_data()
-        deleteId()
+        //deleteId()
         this.props.navigation.navigate('Login');
     }
     render() {
--- a/source/Login.js
View file @41e840e
+++ b/source/Login.js
View file @41e840e
@@ -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.props.navigation.navigate('MainScreen', { ID: this.state.ID });}}
-                            //onPress={() =>{ this.getdata().then(()=>{this.props.navigation.navigate('MainScreen', { ID: this.state.ID })}) }}
+                            onPress={() =>{ this.getdata().then(()=>{this.props.navigation.navigate('MainScreen', { ID: this.state.ID })}) }}
                         />
                     </View>
                 </View>
--- a/source/MainScreen.js
View file @41e840e
+++ b/source/MainScreen.js
View file @41e840e
@@ -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 컴포넌트를 리턴한다.
   }
 }
--- a/source/component/DBhelper.js
View file @41e840e
+++ b/source/component/DBhelper.js
View file @41e840e
--- a/source/component/HistoryGraph.js
View file @41e840e
+++ b/source/component/HistoryGraph.js
View file @41e840e
@@ -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 => {
+    handleClick = item => {
-        this.setState({kg: inkg});
+        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}
+                fill = {this.state.span == item.label ? colors.bars : colors.bardefult}
-                onPress={()=>this.handleClick(item.label)}
+                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>
       )