291 lines
11 KiB
JavaScript
291 lines
11 KiB
JavaScript
import React, {Component} from 'react'
|
|
import {Alert, ScrollView, StyleSheet, TextInput, View, TouchableOpacity, KeyboardAvoidingView, Platform} from 'react-native'
|
|
import Image from 'react-native-fast-image'
|
|
import Icon from "../../components/Icon";
|
|
import {Button} from "native-base";
|
|
import {BackgroundImage} from '../../components/BackgroundImage'
|
|
import Text from '../../components/Text';
|
|
import LinearGradient from 'react-native-linear-gradient';
|
|
import GetWidthHeightDevice from '../../components/GetWidthHeightDevice'
|
|
import ActionSheet from "react-native-action-sheet";
|
|
import ImagePicker from 'react-native-image-crop-picker'
|
|
import {postSuggestion, postSuggestionLogin} from '../../api/UserApi';
|
|
import { connect } from "react-redux";
|
|
import { t } from 'src/utils/i18n'
|
|
import IndicatorLoading from '../../components/IndicatorLoading';
|
|
let ACTIONSHEET_BUTTONS = [
|
|
'ถ่ายรูป',
|
|
'รูปจากแกลอรี่',
|
|
t('cancel')
|
|
]
|
|
|
|
let CANCEL_INDEX = 2
|
|
|
|
class SuggestionScreen extends Component {
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
suggestionText: null,
|
|
image_list: [],
|
|
isShowAddBtn: true,
|
|
image_selected: {},
|
|
isLoading: false,
|
|
suggestionTitle: null
|
|
};
|
|
this.onImagePick = this.onImagePick.bind(this)
|
|
this.onTakeCamera = this.onTakeCamera.bind(this)
|
|
this.sendDataSuggestion = this.sendDataSuggestion.bind(this)
|
|
}
|
|
|
|
sendDataSuggestion() {
|
|
this.setState({
|
|
isLoading: true
|
|
}, () => {
|
|
let param = {
|
|
message: this.state.suggestionText,
|
|
image: this.state.image_selected,
|
|
title: this.state.suggestionTitle
|
|
}
|
|
console.log("param",param);
|
|
if(this.props.user == null && param.message != null && param.title != null && param.title.trim() !== ""){
|
|
postSuggestion(param)
|
|
.then(res => {
|
|
console.log('check response suggestion -----------> ',res)
|
|
|
|
Alert.alert('รับข้อเสนอแนะเรียบร้อย', 'ทางเราได้รับคำแนะนำและเรื่องไว้พิจารณาแล้ว ขอบคุณสำหรับความร่วมมือค่ะ',[{text: t('ok'), onPress:() => {
|
|
this.setState({
|
|
isLoading: false
|
|
}, () => {
|
|
this.props.navigation.goBack()
|
|
})
|
|
}}])
|
|
})
|
|
}else if(this.props.user != null && param.message != null && param.title != null && param.title.trim() !== ""){
|
|
postSuggestionLogin(param)
|
|
.then(res => {
|
|
console.log('check response suggestion -----------> ',res)
|
|
Alert.alert('รับข้อเสนอแนะเรียบร้อย', 'ทางเราได้รับคำแนะนำและเรื่องไว้พิจารณาแล้ว ขอบคุณสำหรับความร่วมมือค่ะ',[{text: t('ok'), onPress:() => {
|
|
this.setState({
|
|
isLoading: false
|
|
}, () => {
|
|
this.props.navigation.goBack()
|
|
})
|
|
}}])
|
|
})
|
|
}else{
|
|
console.log('suggestion fails')
|
|
this.setState({
|
|
isLoading: false
|
|
}, () => {
|
|
Alert.alert('ส่งข้อเสนอแนะไม่สำเร็จ', 'กรุณากรอกข้อมูลให้ครบถ้วน',[{text: t('ok')}])
|
|
})
|
|
}
|
|
})
|
|
|
|
}
|
|
|
|
onImagePick() {
|
|
ImagePicker.openPicker({
|
|
// width: 300,
|
|
// height: 300,
|
|
// cropping: true,
|
|
includeBase64: true
|
|
}).then(image => {
|
|
console.log('received base64 image', image)
|
|
let image_profile = {
|
|
uri: image.path,
|
|
type: image.mime,
|
|
name: 'image_profile.jpg',
|
|
}
|
|
this.setState({
|
|
image_url: {uri: `data:${image.mime};base64,` + image.data, width: image.width, height: image.height},
|
|
images: null,
|
|
}, () => {
|
|
this.setState({
|
|
image_list: this.state.image_list.concat(this.state.image_url),
|
|
image_selected: image_profile,
|
|
isShowAddBtn: false
|
|
})
|
|
})
|
|
}).catch(e => {
|
|
// alert(e)
|
|
})
|
|
}
|
|
|
|
onTakeCamera() {
|
|
ImagePicker.openCamera({
|
|
// cropping: true,
|
|
// width: 300,
|
|
// height: 300,
|
|
includeExif: true
|
|
}).then(image => {
|
|
console.log('received image', image)
|
|
let image_profile = {
|
|
uri: image.path,
|
|
type: image.mime,
|
|
name: 'image_profile.jpg',
|
|
}
|
|
this.setState({
|
|
image_url: {uri: image.path, width: image.width, height: image.height, mime: image.mime},
|
|
images: null,
|
|
}, () => {
|
|
this.setState({
|
|
image_list: this.state.image_list.concat(this.state.image_url),
|
|
image_selected: image_profile,
|
|
isShowAddBtn: false
|
|
})
|
|
})
|
|
}).catch(e => {
|
|
// alert(e)
|
|
})
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<LinearGradient colors={['#3AA40C', '#2C7C0B']} style={{
|
|
flex: 1,
|
|
width: null,
|
|
height: null,
|
|
resizeMode: 'cover'
|
|
}}>
|
|
<BackgroundImage>
|
|
<KeyboardAvoidingView style={{flex:1}} keyboardVerticalOffset={Platform.OS == 'ios' ? 75 : 0} behavior={Platform.OS == 'ios' ? "padding" : ""} enabled>
|
|
<ScrollView contentContainerStyle={{flex:1}}>
|
|
<View style={{backgroundColor: 'white'}}>
|
|
<View>
|
|
<Text style={{color: '#00420A', padding: 16, paddingBottom: 5}}>{t('title')}</Text>
|
|
<TextInput
|
|
placeholder={'เขียนหัวข้อ'}
|
|
style={styles.textInput}
|
|
onChangeText={(text) => this.setState({suggestionTitle: text})}
|
|
value={this.state.suggestionTitle}/>
|
|
</View>
|
|
<View>
|
|
<Text style={{color: '#00420A', padding: 16, paddingBottom: 5}}>{t('suggestion')}</Text>
|
|
<TextInput
|
|
placeholder={t('write_suggest')}
|
|
style={[styles.textArea, {color: 'rgba(0,0,0,0.5)'}]}
|
|
value={this.state.suggestionText}
|
|
multiline={true}
|
|
numberOfLines={4}
|
|
onChangeText={(text) => this.setState({suggestionText: text})}/>
|
|
</View>
|
|
<View>
|
|
<Text style={{color: '#00420A', padding: 16}}>{t('photo')}</Text>
|
|
<View style={{flexDirection: 'row'}}>
|
|
{
|
|
this.state.isShowAddBtn &&
|
|
<TouchableOpacity style={[styles.squareShapeView, {marginTop: 0}]}
|
|
onPress={() => {
|
|
ActionSheet.showActionSheetWithOptions({
|
|
options: ACTIONSHEET_BUTTONS,
|
|
cancelButtonIndex: CANCEL_INDEX,
|
|
},
|
|
(buttonIndex) => {
|
|
console.log('button clicked :', buttonIndex)
|
|
if (buttonIndex == 0) {
|
|
this.onTakeCamera()
|
|
} else if (buttonIndex == 1) {
|
|
this.onImagePick()
|
|
}
|
|
})
|
|
}}>
|
|
<Icon active name="ic_add" size={35} color="white"/>
|
|
</TouchableOpacity>
|
|
}
|
|
{
|
|
this.state.image_list.map((item, index) => {
|
|
return <View style={{padding:10}} key={'image_suggest_' + index}>
|
|
<Image style={{width: 64, height: 64, borderRadius: 5}} source={{uri: item.uri}}/>
|
|
<TouchableOpacity style={{height: 20, width: 20, backgroundColor: '#00000080', position: 'absolute', right: 2, top: 2, justifyContent: 'center', alignItems: 'center', borderRadius: 10}}
|
|
onPress={() => {
|
|
this.setState({
|
|
image_list: [
|
|
...this.state.image_list.slice(0, index),
|
|
...this.state.image_list.slice(index + 1)
|
|
],
|
|
isShowAddBtn: true
|
|
})
|
|
}}>
|
|
<Icon active name="ic_add" size={15} color="white" style={{transform: [{rotate: '45deg'}]}}/>
|
|
</TouchableOpacity>
|
|
</View>
|
|
})
|
|
}
|
|
</View>
|
|
</View>
|
|
</View>
|
|
<View style={{flex:1,justifyContent: 'flex-end'}}>
|
|
<Button block style={{backgroundColor: '#145EB3', marginHorizontal: 10, marginVertical: 15}}
|
|
onPress={() => {
|
|
this.sendDataSuggestion()
|
|
}}>
|
|
<Text style={{color: '#ffffff', fontSize: 14}}>{t('submit_data')}</Text>
|
|
</Button>
|
|
</View>
|
|
</ScrollView>
|
|
</KeyboardAvoidingView>
|
|
</BackgroundImage>
|
|
<IndicatorLoading loadingVisible={this.state.isLoading}/>
|
|
</LinearGradient>
|
|
)
|
|
|
|
}
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
flexDirection: 'column',
|
|
height: GetWidthHeightDevice.HeightContainer,
|
|
//backgroundColor: '#FAFAFA'
|
|
},
|
|
formGroup: {
|
|
marginHorizontal: 15,
|
|
marginVertical: 5,
|
|
backgroundColor: '#ffffff',
|
|
width: '93%',
|
|
height: 40,
|
|
borderRadius: 5,
|
|
display: 'flex',
|
|
flexDirection: 'row'
|
|
},
|
|
textInput: {
|
|
backgroundColor: 'white',
|
|
paddingVertical: 15,
|
|
borderRadius: 5,
|
|
borderWidth: 1,
|
|
borderColor: 'rgba(0, 0, 0, 0.25)',
|
|
paddingHorizontal: 10,
|
|
marginHorizontal: 10,
|
|
},
|
|
textArea: {
|
|
backgroundColor: 'white',
|
|
marginHorizontal: 10,
|
|
paddingHorizontal: 10,
|
|
marginVertical: 10,
|
|
paddingVertical: 15,
|
|
height: 100,
|
|
textAlignVertical: 'top',
|
|
borderRadius: 5,
|
|
borderWidth: 1,
|
|
borderColor: 'rgba(0, 0, 0, 0.25)'
|
|
},
|
|
squareShapeView: {
|
|
width: 64,
|
|
height: 64,
|
|
borderRadius: 5,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
backgroundColor: 'rgba(0, 0, 0, 0.25)',
|
|
margin: 10
|
|
}
|
|
});
|
|
|
|
const mapDisPatchToProps = state => ({
|
|
user: state.app.user
|
|
})
|
|
|
|
export default connect(mapDisPatchToProps)(SuggestionScreen)
|