HistoryTab.js 4.43 KB
import React, { Component } from 'react';
import { View, Text, StyleSheet,ScrollView, RefreshControl } from 'react-native';
import HistoryGraph from '../component/HistoryGraph'
import SegmentedControlTab from "react-native-segmented-control-tab";
import  {get_id, add_data, get_week_data, get_month_data, get_year_data, get_recent_date} from'../component/DBhelper.js';

//var today = new Date();
//today.setHours(today.getHours()+9);

function total(list){
    sum = 0;
    for(var i =0; i< list.length; i++)
        sum += list[i].value;
    return sum
}

export default class HomeTab extends Component {
    constructor(){
        super();
        this.state = {
            selectedIndex: 0,
            data: get_week_data(),
            title: "총 " + total(get_week_data())/1000 + "kg",
            spane: "",
            refreshing: false,
            ID: get_id(),
        }
    }

    _onRefresh = () => {
        this.setState({refresing: true});
        this.get_diff_data();
        this.setState({refreshing: false});
    }

    componentDidMount() {
        const { navigation } = this.props;
        this.focusListener = navigation.addListener('didFocus', () => {
            this.handleIndexChange(this.state.selectedIndex);
        });
      }
    
    componentWillUnmount() {
        this.focusListener.remove();
    }

    handleIndexChange = index => {
        this.setState({selectedIndex: index});
        switch(index){
            case 0:
                this.setState({data: get_week_data(), title: "총 " + total(get_week_data())/1000 + "kg"});
                break;
            case 1:
                this.setState({data: get_month_data(), title: "총 " + total(get_month_data())/1000 + "kg"});
                break;
            case 2:
                this.setState({data: get_year_data(), title: "총 " + total(get_year_data())/1000 + "kg"});
                break;
        }
      };

    get_diff_data(){
        return fetch('http://testloadbalancer-1847561458.ap-northeast-2.elb.amazonaws.com/app/get_diff_data/',{
            method:'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
              },
            body:JSON.stringify({
                ras_id : this.state.ID,
                date : String(get_recent_date()),
            }),
        })
        .then((response) => response.json())
        .then((responseJson)=> {
            console.log(responseJson)
            add_data(responseJson)
        },function(){
        })
        .then(()=>{this.handleIndexChange(this.state.selectedIndex)})
        .catch((error) =>  {
            console.error(error);
        })
    }
    
    render() {
        return(
            <ScrollView style = {style.container}
                refreshControl={
                    <RefreshControl
                    refreshing={this.state.refreshing}
                    onRefresh={this._onRefresh}
                    tintColor="#000000"
                    title="Loading..."
                    titleColor="#0066cc"
                    colors={["#ffffff",'#0066cc','#ffffff']}
                    progressBackgroundColor="#0066cc"
                    />
                }
            >
            <View style = {style.container}>
                <View style={style.header}>
                    <Text style={style.tabName}>History </Text>
                </View>

                <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>
        )
    }
}

const style = StyleSheet.create({
    container: {
        flex: 1,
    },
    header: {
        flex :2,
        justifyContent : 'center',
        padding : 10,
    },
    tabName:{
        marginStart : 10,
        textAlignVertical : 'center',
        fontSize : 20,
        color : "#0066cc",
        fontWeight: 'bold',
    },
    date_text:{
        fontSize :20,
        marginStart:5,
        textAlignVertical:'center'
    }
})