SettingTab.js 4.48 KB
import React, { Component } from 'react';
import { View, Text, StyleSheet, TextInput, TouchableOpacity, Image } from 'react-native';
import AddButton from '../component/AddButton'
import {delete_all_data, deleteId, get_id} from '../component/DBhelper'

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

export default class SettingTab extends Component {

    constructor(props){
        super(props);
        this.state = {
            ID : get_id(),
            user : 'user1'
        }
    }

    save_app_data(){
        return fetch('http://10.0.2.2:3000/app/save_data/',{
            method:'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
              },
            body:JSON.stringify({
                ras_id : this.state.ID,
                user_id : this.state.user,
            }),
        })
        .then((response) => console.log(response.json())) 
        .then((responseJson)=> {
            console.log(responseJson)
        })
        .catch((error) =>  {
            console.error(error);
        })
    }

    delete_id(){
        this.setState({ID: ''})
        //save_app_data()
        delete_all_data()
        deleteId()
        this.props.navigation.navigate('Login');
    }
    render() {
        return (
            <View style={style.container}>
                <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})}/>
                        </View>
                        <AddButton
                            onPress={()=>{this.save_app_data}}/>
                    </View>
                </View>
            </View>
        );
    }
}

const style = StyleSheet.create({
    container: {
        flex: 1,
    },
    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',
    }
});