264 lines
9.7 KiB
JavaScript
264 lines
9.7 KiB
JavaScript
import React, { Component } from 'react';
|
|
import { View, FlatList, TouchableOpacity, StyleSheet } from 'react-native';
|
|
import Image from 'react-native-fast-image'
|
|
import ImageBackground from 'react-native-fast-image'
|
|
import LinearGradient from 'react-native-linear-gradient'
|
|
import Text from '../../components/Text';
|
|
import Carousel from 'react-native-snap-carousel'
|
|
import { itemWidth, sliderWidth } from '../../styles/SliderEntry.style'
|
|
import Icon from '../../components/Icon'
|
|
import {getMeterList,getRoomSlideList} from '../../api/UserApi';
|
|
import moment from 'moment';
|
|
import ImagePicker from 'react-native-image-crop-picker'
|
|
import IndicatorLoading from '../../components/IndicatorLoading';
|
|
import { NavigationEvents } from 'react-navigation';
|
|
import { t } from '../../utils/i18n';
|
|
|
|
|
|
export default class Meter extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
room_snap_index:0,
|
|
room_list:[],
|
|
cost_list:[],
|
|
image_selected: {},
|
|
selected_type: '',
|
|
isLoading: true,
|
|
};
|
|
this.onTakeCamera = this.onTakeCamera.bind(this)
|
|
this.selectedImage = this.selectedImage.bind(this)
|
|
this.getSlideList = this.getSlideList.bind(this)
|
|
this.getMeter = this.getMeter.bind(this)
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
if(this.props && this.props.navigation && this.props.navigation.state && this.props.navigation.state.params && this.props.navigation.state.params.getNotification){
|
|
this.props.navigation.state.params.getNotification()
|
|
}
|
|
}
|
|
|
|
getMeter(){
|
|
this.setState({
|
|
isLoading: true
|
|
})
|
|
getMeterList()
|
|
.then(res => {
|
|
console.log('check response meter list ----------> ',res.data);
|
|
if(res.ok){
|
|
// let room_list = [
|
|
// {id: 87576, name: 'CN1-005', project_name: 'CNK', electric: 1264, water: 0}
|
|
// ]
|
|
this.setState({
|
|
room_list: res.data.rooms,
|
|
// room_list,
|
|
cost_list: res.data.data,
|
|
})
|
|
}
|
|
this.setState({isLoading:false})
|
|
})
|
|
}
|
|
|
|
getSlideList(room_id){
|
|
this.setState({
|
|
isLoading: true
|
|
})
|
|
getRoomSlideList(room_id)
|
|
.then(res => {
|
|
console.log('check response meter list ----------> ',res.data);
|
|
if(res.ok){
|
|
this.setState({
|
|
// room_list: res.data.rooms,
|
|
cost_list: res.data.data,
|
|
})
|
|
}
|
|
this.setState({isLoading:false})
|
|
})
|
|
}
|
|
|
|
onTakeCamera() {
|
|
ImagePicker.openCamera({
|
|
cropping: true,
|
|
width: 300,
|
|
height: 100,
|
|
includeExif: true
|
|
}).then(image => {
|
|
console.log('received image', image)
|
|
let image_meter = {
|
|
uri: image.path,
|
|
type: image.mime,
|
|
name: 'image_meter.jpg',
|
|
}
|
|
this.setState({
|
|
image_url: {uri: image.path, width: image.width, height: image.height, mime: image.mime},
|
|
images: null,
|
|
}, () => {
|
|
this.selectedImage(this.state.image_url)
|
|
})
|
|
}).catch(e => {console.log('e >>>> ', e)})
|
|
}
|
|
|
|
selectedImage(image_meter){
|
|
this.setState({
|
|
image_selected: image_meter,
|
|
},() => {
|
|
console.log('selected image ',this.state.image_selected)
|
|
if(this.state.selected_type == 'pea'){
|
|
this.props.navigation.navigate('PEAMeter',{image: this.state.image_selected,room_id: this.state.room_list[this.state.room_snap_index].id})
|
|
}else{
|
|
this.props.navigation.navigate('WaterMeter',{image: this.state.image_selected,room_id: this.state.room_list[this.state.room_snap_index].id})
|
|
}
|
|
})
|
|
}
|
|
|
|
_keyExtractor = (item, index) => 'meter_room_'+index;
|
|
|
|
_renderItem = ({item}) => (
|
|
<LinearGradient colors={['#4BAF3B', '#0E5E29']} style={{ borderColor: 'white', borderRadius: 5, height: 120,paddingBottom:10, justifyContent:'space-between'}}>
|
|
<View style={{ justifyContent: 'center',padding:16 }}>
|
|
<Text style={{ color: 'white', fontSize: 16 }}>{item.name}</Text>
|
|
<Text style={{ color: 'white', fontSize: 16 }}>{item.project_name}</Text>
|
|
<View style={{flexDirection:'row',alignItems:'center'}}>
|
|
<Icon name={'ic_water'} size={16} color={'#00BCD4'}/>
|
|
<Text style={styles.cardText}>{item.water}</Text>
|
|
<Icon name={'ic_check'} size={16} color={'white'}/>
|
|
</View>
|
|
<View style={{flexDirection:'row',alignItems:'center'}}>
|
|
<Icon name={'ic_thunder'} size={16} color={'#FFCC00'}/>
|
|
<Text style={styles.cardText}>{item.electric}</Text>
|
|
<Icon name={'ic_time'} size={16} color={'white'}/>
|
|
</View>
|
|
</View>
|
|
</LinearGradient>
|
|
);
|
|
|
|
_keyExtractorCost = (item, index) => 'cost_list_'+index
|
|
|
|
_renderItemCost = ({item,index}) => (
|
|
// <TouchableOpacity onPress={() => {}}>
|
|
<View style={{paddingHorizontal:16,height: 96,backgroundColor:'white',borderWidth:1,borderColor:'#EAEAF4'}}>
|
|
<View style={{flex:1,flexDirection:'row'}}>
|
|
<View style={{height: 96,justifyContent:'center',marginRight:16}}>
|
|
<Image source={{uri:item.media.url}} style={{height: 64,width: 64,}} resizeMode={'contain'}/>
|
|
</View>
|
|
<View style={{flex:1,justifyContent:'center'}}>
|
|
<View style={styles.viewTextFlatlist}>
|
|
<View style={{height: 20,width: 20,borderRadius: 10, marginRight:5 ,backgroundColor:item.type == 'ค่าน้ำ' ? '#00BCD4' : '#FFCC00',justifyContent:'center',alignItems:'center'}}>
|
|
<Icon name={item.type == 'ค่าน้ำ' ? 'ic_water' : 'ic_thunder'} size={11} color={'white'}/>
|
|
</View>
|
|
<Text style={styles.textFliatlist}>{item.type == 'ค่าน้ำ' ? t('water_bill') : t('electric_unit')}</Text>
|
|
</View>
|
|
<View style={[styles.viewTextFlatlist,{marginVertical:5}]}>
|
|
<Text style={styles.textFliatlist}>{t('unit')} {item.amount} {t('unit_price')}</Text>
|
|
<Text style={[styles.textFliatlist,{marginLeft: 20}]}>{t('amount')} <Text style={[styles.textFliatlist,{color:'#269A21'}]}>{item.cost}</Text> {t('baht')} </Text>
|
|
</View>
|
|
<View style={styles.viewTextFlatlist}>
|
|
<Icon name='ic_event_note' size={16} style={{marginRight:5}}/>
|
|
<Text style={[styles.textFliatlist,{color:'#00000040'}]}>{moment(item.created_at).format('DD MMMM YYYY')}</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
// </TouchableOpacity>
|
|
);
|
|
|
|
render() {
|
|
return (
|
|
<View style={{flex:1}}>
|
|
<NavigationEvents
|
|
onDidFocus={() => {
|
|
this.getMeter()
|
|
}}
|
|
/>
|
|
{
|
|
this.state.room_list.length > 0 &&
|
|
<ImageBackground source={require('../../../assets/images/tree2.png')} style={{width: '100%',backgroundColor:'#EEFFD7',paddingTop:16}}>
|
|
<Carousel
|
|
ref={(c) => { this._carousel = c }}
|
|
data={this.state.room_list}
|
|
renderItem={this._renderItem}
|
|
sliderWidth={sliderWidth}
|
|
itemWidth={itemWidth}
|
|
containerCustomStyle={{}}
|
|
slideStyle={{ justifyContent: 'center' }}
|
|
onSnapToItem={(item) => {
|
|
this.setState({room_snap_index:item})
|
|
this.getSlideList(this.state.room_list[item].id)
|
|
}}
|
|
/>
|
|
<View style={{ width: '100%', justifyContent: 'center', flexDirection: 'row', marginTop:10 }}>
|
|
{this.state.room_list.map((item, i) => <View key={'room_'+i} style={[{ width: 10, height: 10, borderRadius: 5, backgroundColor: this.state.room_snap_index == i ? '#269A21' : 'rgba(124, 187, 51, 0.3)', marginHorizontal: 4 }]}></View>)}
|
|
</View>
|
|
<View style={{padding:16,flexDirection:'row',alignItems:'center',justifyContent:'space-between'}}>
|
|
<TouchableOpacity style={[styles.viewBtn,{backgroundColor:'#00BCD4',marginRight:8}]} onPress={() => {
|
|
this.setState({
|
|
selected_type: 'water'
|
|
},() => {
|
|
this.onTakeCamera()
|
|
})
|
|
}}>
|
|
<Icon name={'ic_water'} size={22} color={'white'}/>
|
|
<Text style={styles.textBtn}>{t('save_water_meter')}</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity style={[styles.viewBtn,{backgroundColor:'#FFCC00',marginLeft:8}]} onPress={() => {
|
|
this.setState({
|
|
selected_type: 'pea'
|
|
},() => {
|
|
this.onTakeCamera()
|
|
})
|
|
}}>
|
|
<Icon name={'ic_thunder'} size={22} color={'white'}/>
|
|
<Text style={styles.textBtn}>{t('save_electric_meter')}</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</ImageBackground>
|
|
}
|
|
<View style={{flex:1}}>
|
|
<FlatList
|
|
data={this.state.cost_list}
|
|
extraData={this.state}
|
|
keyExtractor={this._keyExtractorCost}
|
|
renderItem={this._renderItemCost}
|
|
style={{flex:1}}
|
|
ListEmptyComponent={() =>
|
|
<View style={{flex: 1, alignItems: 'center', justifyContent: 'center', margin: 16,padding:16,borderRadius:5,backgroundColor:'white'}}>
|
|
<Text style={{fontSize: 16}}> {t('no_water_electric_bill')} </Text>
|
|
</View>
|
|
}
|
|
/>
|
|
</View>
|
|
<IndicatorLoading loadingVisible={this.state.isLoading}/>
|
|
</View>
|
|
);
|
|
}
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
viewBtn:{
|
|
flex:1,
|
|
flexDirection:'row',
|
|
height: 50,
|
|
justifyContent:'center',
|
|
alignItems:'center',
|
|
borderRadius:5
|
|
},
|
|
textBtn:{
|
|
color:'white',
|
|
fontSize:14,
|
|
marginLeft:10,
|
|
},
|
|
cardText:{
|
|
marginHorizontal: 10,
|
|
color: 'white',
|
|
fontSize: 16
|
|
},
|
|
viewTextFlatlist:{
|
|
alignItems:'center',
|
|
flexDirection:'row'
|
|
},
|
|
textFliatlist:{
|
|
fontSize:12,
|
|
color:'#000000'
|
|
}
|
|
})
|