247 lines
10 KiB
JavaScript
247 lines
10 KiB
JavaScript
import React,{Component} from 'react'
|
|
import {
|
|
TouchableOpacity,
|
|
TextInput,
|
|
StyleSheet,
|
|
View,
|
|
ScrollView,
|
|
Alert,
|
|
Image,
|
|
ImageBackground,
|
|
FlatList
|
|
} from 'react-native'
|
|
import Icon from "../../components/Icon";
|
|
import { CustomButton } from '../../components/CustomButton';
|
|
import { Button, Card, Body, Badge, ListItem, Left, Right,CheckBox, } from 'native-base'
|
|
import { BackgroundImage } from '../../components/BackgroundImage'
|
|
import Text from '../../components/Text';
|
|
import LinearGradient from 'react-native-linear-gradient';
|
|
import Color from '../../color';
|
|
import GetWidthHeightDevice from '../../components/GetWidthHeightDevice'
|
|
import { t } from '../../utils/i18n'
|
|
import moment from 'moment';
|
|
|
|
export default class RepairSuccess extends Component {
|
|
constructor(props) {
|
|
super(props)
|
|
this.state = {
|
|
repair:{},
|
|
room:'',
|
|
project:'',
|
|
order_list:[
|
|
{
|
|
title: 'น้ำรั่ว',
|
|
price: '200'
|
|
},
|
|
{
|
|
title: 'เปลี่ยนก๊อกน้ำ',
|
|
price: '150'
|
|
},
|
|
{
|
|
title: 'ไฟฟ้าช๊อต',
|
|
price: '500'
|
|
},
|
|
]
|
|
}
|
|
this.convertStatus = this.convertStatus.bind(this)
|
|
this.convertColorStatus = this.convertColorStatus.bind(this)
|
|
}
|
|
|
|
componentDidMount = () => {
|
|
|
|
const { navigation } = this.props
|
|
const repair_state = navigation.getParam('repair', 'NO-DATA')
|
|
|
|
this.setState({
|
|
repair: repair_state,
|
|
})
|
|
|
|
|
|
|
|
|
|
};
|
|
|
|
renderItem = ({item}) => {
|
|
return <View style={{ flexDirection: 'row', marginVertical:3, justifyContent:'space-between'}}>
|
|
<Text style={{ fontSize: 14, color: '#000000' }}>{item.name}</Text>
|
|
<Text style={{ textAlign: 'right', fontSize: 14, color: '#7CBB33' }}>{item.service_fee} {t('baht')}</Text>
|
|
</View>
|
|
}
|
|
|
|
_keyExtractor = (item, index) => 'order_'+index
|
|
|
|
convertStatus(statusName){
|
|
switch(statusName){
|
|
case 'Pending':
|
|
return t('request_repair')
|
|
case 'InProgress':
|
|
return 'ซ่อมแซม'
|
|
case 'NewAppointment':
|
|
return 'นัดหมายใหม่'
|
|
case 'Cancel':
|
|
return t('cancel')
|
|
case 'Success':
|
|
return 'สำเร็จ'
|
|
default:
|
|
return t('pending')
|
|
}
|
|
}
|
|
|
|
convertColorStatus(statusName){
|
|
switch(statusName){
|
|
case 'Pending':
|
|
return '#FF9500'
|
|
case 'InProgress':
|
|
return '#FFCC00'
|
|
case 'NewAppointment':
|
|
return '#145EB3'
|
|
case 'Cancel':
|
|
return '#FF2D55'
|
|
case 'Success':
|
|
return '#2C7C0B'
|
|
default:
|
|
return '#C4C4C4'
|
|
}
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<ImageBackground source={require('../../../assets/images/tree2.png')} style={{width: '100%', flex: 1, backgroundColor:'#EEFFD7'}}>
|
|
<View style={{alignItems:'center', paddingHorizontal: 16, marginTop: 16}}>
|
|
<View style={{flexDirection: 'row',justifyContent: 'center',}}>
|
|
<Image style={{height: 64, width: 64,}} source={require('../../../assets/images/GroupCheck.png')} defaultSource={require('../../../assets/images/GroupCheck.png')} />
|
|
</View>
|
|
<Text style={{ fontSize: 18, color: Color.green_title,marginVertical: 16,}}>{t('request_sent')}</Text>
|
|
</View>
|
|
|
|
<View style={{ paddingHorizontal: 16, flex: 1 }}>
|
|
<LinearGradient colors={['#4BAF3B', '#0E5E29']} style={{borderRadius:5, padding:16}}>
|
|
<View style={{flexDirection:'row',justifyContent:'space-between'}}>
|
|
<Text style={{ fontSize: 18, color: '#FFFFFF'}} >{t('room')} {this.state.repair.room_no}</Text>
|
|
<Text style={{ textAlign:'right', fontSize: 18, color: '#FFFFFF', }} >#{this.state.repair.id}</Text>
|
|
</View>
|
|
<Text style={{ fontSize: 14, color: '#FFFFFF', }}>{this.state.repair.project_name}</Text>
|
|
</LinearGradient>
|
|
|
|
<View style={{backgroundColor: '#FFFFFF',borderRadius:5,padding:16, flex: 1}}>
|
|
<View>
|
|
<Text style={styles.textTitle}>{t('make_appoint')}</Text>
|
|
<View style={{ flexDirection: 'row',}}>
|
|
<Text style={{ fontSize: 14, color: 'rgba(0, 0, 0, 0.5)', }}>{t('date')}</Text>
|
|
<Text style={{ fontSize: 14, color: '#000000', paddingHorizontal: 10,}}>{ moment(this.state.repair.date).format('DD-MM-YYYY') }</Text>
|
|
<Text style={{ fontSize: 14, color: 'rgba(0, 0, 0, 0.5)', }}>เวลา</Text>
|
|
<Text style={{ fontSize: 14, color: '#000000', paddingHorizontal: 10,}}>{this.state.repair.time == null ? '' : this.state.repair.time.slice(0,-3) + ' น.' }</Text>
|
|
</View>
|
|
|
|
<View style={{ flexDirection: 'row',alignItems:'center',marginVertical:3}}>
|
|
<Text style={{ fontSize: 14, color: 'rgba(0, 0, 0, 0.5)'}}>{t('status')}</Text>
|
|
<View style={{backgroundColor: this.convertColorStatus(this.state.repair.status),height: 10,width: 10,borderRadius:5, marginHorizontal:10}}/>
|
|
<Text style={{ fontSize: 14, color: this.convertColorStatus(this.state.repair.status)}}>{this.convertStatus(this.state.repair.status)}</Text>
|
|
</View>
|
|
</View>
|
|
|
|
<View style={{borderWidth:1,marginVertical:16,borderColor:'silver'}}></View>
|
|
|
|
<View style={{flex: 1}}>
|
|
<Text style={styles.textTitle} >{t('information')}</Text>
|
|
<ScrollView>
|
|
<FlatList
|
|
data={this.state.repair.services}
|
|
renderItem={this.renderItem}
|
|
pagingEnabled={true}
|
|
extraData={this.state}
|
|
keyExtractor={this._keyExtractor}
|
|
/>
|
|
</ScrollView>
|
|
</View>
|
|
|
|
<View style={{borderWidth:1,marginVertical:16,borderColor:'silver'}}></View>
|
|
|
|
<View style={{ flexDirection:'row',justifyContent:'space-between'}}>
|
|
<Text style={{ fontSize: 14, color: Color.green_title }}>{t('estimate_charge')}</Text>
|
|
<Text style={{ textAlign: 'right', fontSize: 14, color: '#7CBB33'}}>{this.state.repair.total} {t('baht')}</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
|
|
<View style={{margin: 16}}>
|
|
<CustomButton style={[styles.button_style]}
|
|
onPress={() => {this.props.navigation.popToTop()}}
|
|
title={t('back_home')} />
|
|
</View>
|
|
|
|
{/*<View style={{padding:16}}>
|
|
<View style={{alignItems:'center'}}>
|
|
<View style={{flexDirection: 'row',justifyContent: 'center',}}>
|
|
<Image style={{height: 64, width: 64,}} source={require('../../../assets/images/GroupCheck.png')} defaultSource={require('../../../assets/images/GroupCheck.png')} />
|
|
</View>
|
|
<Text style={{ fontSize: 18, color: Color.green_title,marginVertical: 16,}}>{t('request_sent')}</Text>
|
|
</View>
|
|
<View>
|
|
<LinearGradient colors={['#4BAF3B', '#0E5E29']} style={{borderRadius:5, padding:16}}>
|
|
<View style={{flexDirection:'row',justifyContent:'space-between'}}>
|
|
<Text style={{ fontSize: 18, color: '#FFFFFF'}} >{t('room')} {this.state.repair.room_no}</Text>
|
|
<Text style={{ textAlign:'right', fontSize: 18, color: '#FFFFFF', }} >#{this.state.repair.id}</Text>
|
|
</View>
|
|
<Text style={{ fontSize: 14, color: '#FFFFFF', }}>{this.state.repair.project_name}</Text>
|
|
</LinearGradient>
|
|
<View style={{backgroundColor: '#FFFFFF',borderRadius:5,padding:16}}>
|
|
<Text style={styles.textTitle}>{t('make_appoint')}</Text>
|
|
<View style={{ flexDirection: 'row',}}>
|
|
<Text style={{ fontSize: 14, color: 'rgba(0, 0, 0, 0.5)', }}>{t('date')}</Text>
|
|
<Text style={{ fontSize: 14, color: '#000000', paddingHorizontal: 10,}}>{ moment(this.state.repair.date).format('DD-MM-YYYY') }</Text>
|
|
<Text style={{ fontSize: 14, color: 'rgba(0, 0, 0, 0.5)', }}>เวลา</Text>
|
|
|
|
|
|
<Text style={{ fontSize: 14, color: '#000000', paddingHorizontal: 10,}}>{this.state.repair.time == null ? '' : this.state.repair.time.slice(0,-3) + ' น.' }</Text>
|
|
|
|
|
|
|
|
|
|
</View>
|
|
<View style={{ flexDirection: 'row',alignItems:'center',marginVertical:3}}>
|
|
<Text style={{ fontSize: 14, color: 'rgba(0, 0, 0, 0.5)'}}>{t('status')}</Text>
|
|
<View style={{backgroundColor: this.convertColorStatus(this.state.repair.status),height: 10,width: 10,borderRadius:5, marginHorizontal:10}}/>
|
|
<Text style={{ fontSize: 14, color: this.convertColorStatus(this.state.repair.status)}}>{this.convertStatus(this.state.repair.status)}</Text>
|
|
</View>
|
|
<View style={{borderWidth:1,marginVertical:16,borderColor:'silver'}}></View>
|
|
<Text style={styles.textTitle} >{t('information')}</Text>
|
|
<FlatList
|
|
data={this.state.repair.services}
|
|
renderItem={this.renderItem}
|
|
pagingEnabled={true}
|
|
extraData={this.state}
|
|
keyExtractor={this._keyExtractor}
|
|
/>
|
|
<View style={{borderWidth:1,marginVertical:16,borderColor:'silver'}}></View>
|
|
<View style={{ flexDirection:'row',justifyContent:'space-between'}}>
|
|
<Text style={{ fontSize: 14, color: Color.green_title }}>{t('estimate_charge')}</Text>
|
|
<Text style={{ textAlign: 'right', fontSize: 14, color: '#7CBB33'}}>{this.state.repair.total} {t('baht')}</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
<View style={{marginTop:16}}>
|
|
<CustomButton style={[styles.button_style]}
|
|
onPress={() => {this.props.navigation.popToTop()}}
|
|
title={t('back_home')} />
|
|
</View>
|
|
</View>*/}
|
|
</ImageBackground>
|
|
)
|
|
}
|
|
}
|
|
|
|
const styles = {
|
|
textTitle:{
|
|
fontSize: 14,
|
|
color: Color.green_title,
|
|
marginBottom: 10
|
|
},
|
|
button_style: {
|
|
backgroundColor: '#269A21',
|
|
height: 40,
|
|
borderRadius: 5,
|
|
justifyContent:'center',
|
|
}
|
|
}
|