11 changed files with 926 additions and 120 deletions
@ -0,0 +1,806 @@ |
|||||||
|
import { useEffect, useRef, useState } from 'react'; |
||||||
|
import {View,Text, StyleSheet, ScrollView, TouchableOpacity, Image, Animated, TextInput, Button, Alert, Pressable, StatusBar, FlatList} from 'react-native'; |
||||||
|
import {useNavigation,NavigationContainer,useIsFocused} from '@react-navigation/native'; |
||||||
|
import MapLibreGL from '@maplibre/maplibre-react-native'; |
||||||
|
import { MapView,ShapeSource,Camera,UserLocation,PointAnnotation,FillLayer,LineLayer,VectorSource } from "@maplibre/maplibre-react-native"; |
||||||
|
import { SelectList } from 'react-native-dropdown-select-list'; |
||||||
|
import { RadioButton } from 'react-native-paper'; |
||||||
|
import DatePicker from 'react-native-date-picker'; |
||||||
|
import Moment from 'moment'; |
||||||
|
import { launchCamera, launchImageLibrary } from 'react-native-image-picker'; |
||||||
|
import NetInfo from "@react-native-community/netinfo"; |
||||||
|
import AwesomeAlert from 'react-native-awesome-alerts'; |
||||||
|
import AsyncStorage from '@react-native-async-storage/async-storage'; |
||||||
|
import turfcenter from '@turf/center'; |
||||||
|
const {points,polygon,lineString} = require('@turf/helpers'); |
||||||
|
import DocumentPicker from "react-native-document-picker"; |
||||||
|
import RNFS from 'react-native-fs'; |
||||||
|
import RNFetchBlob from 'rn-fetch-blob'; |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
import { PERMIT_API_URL } from "../../urlConfig"; |
||||||
|
import React from 'react'; |
||||||
|
type EditPolygonScreenProps = {route: any,navigation: any}; |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
export default function ResendLandPermit({route,navigation}:EditPolygonScreenProps) { |
||||||
|
// console.log("route",route.params);
|
||||||
|
const {data,coors} = route.params; |
||||||
|
// console.log("params",route.params);
|
||||||
|
|
||||||
|
|
||||||
|
const apiKey = "JoJs2pcDv5o0yQlQLMfI"; |
||||||
|
const [basemap, setBasemap] = useState("streets-v2"); |
||||||
|
const styleURL = `https://api.maptiler.com/maps/${basemap}/style.json?key=${apiKey}`; |
||||||
|
const [centerCoords,setCenterCoords] = useState<number[]>([]); |
||||||
|
|
||||||
|
|
||||||
|
const ref = useRef(); |
||||||
|
const [connected, setConnected] = useState(true); |
||||||
|
const [currentIndex, setCurrentIndex] = useState(0); |
||||||
|
const [imgUrl, setImgUrl] = useState([]); |
||||||
|
const [files, setFiles] = useState([]); |
||||||
|
const [fileDocument, setFileDocument] = useState([]); |
||||||
|
const [companyName, setCompanyName] = useState(data.company_name); |
||||||
|
const [checkedStatus, setCheckedStatus] = useState(data.permit_status); |
||||||
|
const [approvedBy,setApprovedBy] = useState(''); |
||||||
|
const [location, setLocation] = useState(data.location); |
||||||
|
const [open, setOpen] = useState(false); |
||||||
|
const [install_date, setInstallDate] = useState(new Date()); |
||||||
|
const momentDate = Moment(install_date).format('YYYY-MM-DD'); |
||||||
|
const [alertOnline, setAlertOnline] = useState(false); |
||||||
|
const [alertOffline, setAlertOffline] = useState(false); |
||||||
|
const [companyNameError, setCompanyNameError] = useState(false); |
||||||
|
const [permitStatusError, setPermitStatusError] = useState(false); |
||||||
|
const [locationError, setLocationError] = useState(false); |
||||||
|
|
||||||
|
const [coordinates,setCoordinates] = useState([]); |
||||||
|
const [loadGeom,setLoadGeom] = useState(true); |
||||||
|
const [delay,setDelay] = useState(false); |
||||||
|
const [secondPress,setSecondPress] = useState(false); |
||||||
|
const isFocused = useIsFocused(); |
||||||
|
const [userID,setUserID] = useState(); |
||||||
|
useEffect(()=>{ |
||||||
|
if (isFocused) { |
||||||
|
const getKey = async () =>{ |
||||||
|
const jsonValue = await AsyncStorage.getItem('USER_DATA') |
||||||
|
console.log(JSON.parse(jsonValue!)); |
||||||
|
const data = JSON.parse(jsonValue!); |
||||||
|
console.log("user_data",data.id); |
||||||
|
setUserID(data.id) |
||||||
|
}; |
||||||
|
getKey(); |
||||||
|
if (coors === undefined) { |
||||||
|
console.log("awal"); |
||||||
|
getData() |
||||||
|
} |
||||||
|
else{ |
||||||
|
console.log("kedua",coors); |
||||||
|
let centCord = turfcenter(points(coors)); |
||||||
|
console.log("center kedua",centCord); |
||||||
|
setCenterCoords(centCord.geometry.coordinates); |
||||||
|
setLoadGeom(false); |
||||||
|
setCoordinates(coors) |
||||||
|
setSecondPress(true) |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
const unmount = navigation.addListener('beforeRemove', (e:any)=> { |
||||||
|
console.log("Event",e); |
||||||
|
if (e.data.action.type !== "NAVIGATE"){ |
||||||
|
e.preventDefault(); |
||||||
|
Alert.alert( |
||||||
|
'Unsave Case', |
||||||
|
'There are unsave case. Please chose what you want.', |
||||||
|
[ |
||||||
|
{ |
||||||
|
text: 'Ok', |
||||||
|
onPress: () => navigation.dispatch(e.data.action) |
||||||
|
}, |
||||||
|
{ |
||||||
|
text: 'Continue', |
||||||
|
style: 'cancel' |
||||||
|
} |
||||||
|
] |
||||||
|
) |
||||||
|
} |
||||||
|
}) |
||||||
|
const unsubscribe = NetInfo.addEventListener((state) => { |
||||||
|
setConnected(state.isConnected!) |
||||||
|
}); |
||||||
|
return () => { |
||||||
|
unmount(); |
||||||
|
unsubscribe(); |
||||||
|
}; |
||||||
|
},[isFocused]) |
||||||
|
const openCameraLib = async () => { |
||||||
|
const result = await launchCamera({ |
||||||
|
mediaType: 'photo', |
||||||
|
quality: 1, |
||||||
|
includeBase64: true, |
||||||
|
saveToPhotos: true |
||||||
|
}); |
||||||
|
const newObj = { |
||||||
|
file_type: result?.assets![0]?.type, |
||||||
|
file: result?.assets![0]?.base64, |
||||||
|
fileSize: result?.assets![0]?.fileSize, |
||||||
|
} |
||||||
|
setFiles([...files,newObj]); |
||||||
|
setImgUrl([...imgUrl,result?.assets![0]?.base64]); |
||||||
|
}; |
||||||
|
const openLib = async () => { |
||||||
|
const result = await launchImageLibrary({ |
||||||
|
quality: 1, |
||||||
|
mediaType: 'photo', |
||||||
|
selectionLimit: 0, |
||||||
|
includeExtra: true, |
||||||
|
includeBase64: true |
||||||
|
}); |
||||||
|
result?.assets?.forEach(asset => { |
||||||
|
const newObj = { |
||||||
|
file_type: asset.type, |
||||||
|
file: asset.base64, |
||||||
|
fileSize: asset.fileSize |
||||||
|
} |
||||||
|
setFiles(oldArray => [...oldArray,newObj]); |
||||||
|
setImgUrl(oldArray => [...oldArray,asset.base64]); |
||||||
|
}); |
||||||
|
}; |
||||||
|
const PrevImg = ({isIndex}) => { |
||||||
|
if(isIndex===0){ |
||||||
|
return ( |
||||||
|
<TouchableOpacity disabled style={{width:'10%',alignSelf:'center'}}> |
||||||
|
<Image source={require('../../assets/icon/left-arrow.png')} /> |
||||||
|
</TouchableOpacity> |
||||||
|
) |
||||||
|
} |
||||||
|
return ( |
||||||
|
<TouchableOpacity style={{width:'10%',alignSelf:'center'}} onPress={()=> { |
||||||
|
setCurrentIndex(currentIndex-1) |
||||||
|
ref.current.scrollToIndex({ |
||||||
|
animated: true, |
||||||
|
index: currentIndex-1 |
||||||
|
}); |
||||||
|
}}> |
||||||
|
<Image source={require('../../assets/icon/left-arrow.png')} /> |
||||||
|
</TouchableOpacity> |
||||||
|
) |
||||||
|
}; |
||||||
|
const NextImg = ({isIndex}) => { |
||||||
|
if(imgUrl.length<=1){ |
||||||
|
return ( |
||||||
|
<TouchableOpacity disabled style={{width:'10%',alignSelf:'center'}}> |
||||||
|
<Image style={{alignSelf:'flex-end'}} source={require('../../assets/icon/right-arrow.png')} /> |
||||||
|
</TouchableOpacity> |
||||||
|
) |
||||||
|
} |
||||||
|
else{ |
||||||
|
if (isIndex === (imgUrl.length-1)) { |
||||||
|
return ( |
||||||
|
<TouchableOpacity disabled style={{width:'10%',alignSelf:'center'}}> |
||||||
|
<Image style={{alignSelf:'flex-end'}} source={require('../../assets/icon/right-arrow.png')} /> |
||||||
|
</TouchableOpacity> |
||||||
|
) |
||||||
|
} |
||||||
|
else{ |
||||||
|
return ( |
||||||
|
<TouchableOpacity style={{width:'10%',alignSelf:'center'}} onPress={()=> { |
||||||
|
setCurrentIndex(currentIndex+1) |
||||||
|
ref.current.scrollToIndex({ |
||||||
|
animated: true, |
||||||
|
index: currentIndex+1 |
||||||
|
}); |
||||||
|
}}> |
||||||
|
<Image style={{alignSelf:'flex-end'}} source={require('../../assets/icon/right-arrow.png')} /> |
||||||
|
</TouchableOpacity> |
||||||
|
) |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
const showDialog = () => { |
||||||
|
if(!companyName){ |
||||||
|
setCompanyNameError(true) |
||||||
|
}else{ |
||||||
|
setCompanyNameError(false) |
||||||
|
} |
||||||
|
if(!checkedStatus){ |
||||||
|
setPermitStatusError(true) |
||||||
|
}else{ |
||||||
|
setPermitStatusError(false) |
||||||
|
} |
||||||
|
if(!location){ |
||||||
|
setLocationError(true) |
||||||
|
}else{ |
||||||
|
setLocationError(false) |
||||||
|
} |
||||||
|
if(!companyName || !checkedStatus || !location) { |
||||||
|
return false |
||||||
|
} |
||||||
|
|
||||||
|
if(connected){ |
||||||
|
setAlertOnline(true); |
||||||
|
} |
||||||
|
else{ |
||||||
|
setAlertOffline(true) |
||||||
|
} |
||||||
|
}; |
||||||
|
const handleCancelAlertOnline = () => { |
||||||
|
setAlertOnline(false); |
||||||
|
}; |
||||||
|
const handleCancelAlertOffline = () => { |
||||||
|
setAlertOffline(false); |
||||||
|
}; |
||||||
|
const removeValue = async (key:string) => { |
||||||
|
try { |
||||||
|
// console.log("keyDelete",key);
|
||||||
|
await AsyncStorage.removeItem(key) |
||||||
|
// await getCount();
|
||||||
|
} catch(e) { |
||||||
|
} |
||||||
|
}; |
||||||
|
const collectDataOnline = async () => { |
||||||
|
try { |
||||||
|
let date = new Date(); |
||||||
|
const milliseconds = Date.UTC( |
||||||
|
date.getFullYear(), |
||||||
|
date.getMonth(), |
||||||
|
date.getDate(), |
||||||
|
date.getHours(), |
||||||
|
date.getMinutes(), |
||||||
|
date.getSeconds(), |
||||||
|
); |
||||||
|
const localTime = new Date(milliseconds); |
||||||
|
const geom = coordinates.map((item:any)=>{ |
||||||
|
return String(item).replace(',',' ') |
||||||
|
}) |
||||||
|
const obj = { |
||||||
|
company_name: companyName, |
||||||
|
location: location, |
||||||
|
permit_status: checkedStatus, |
||||||
|
geom: "", |
||||||
|
created_by:userID, |
||||||
|
created_at:localTime |
||||||
|
} |
||||||
|
if(!secondPress){ |
||||||
|
obj.geom = `MULTIPOLYGON (((${geom},${String(geom[0]).replace(","," ")})))` |
||||||
|
} |
||||||
|
else{ |
||||||
|
obj.geom = `MULTIPOLYGON (((${geom},${String(coordinates[0]).replace(","," ")})))` |
||||||
|
} |
||||||
|
|
||||||
|
await RNFetchBlob.config({ |
||||||
|
trusty : true |
||||||
|
}).fetch('POST',`${PERMIT_API_URL}/addData`, |
||||||
|
{ |
||||||
|
"Content-Type": "application/json", |
||||||
|
}, |
||||||
|
JSON.stringify(obj) |
||||||
|
).then(async (resp) => { |
||||||
|
const json = resp.json() |
||||||
|
const status = resp.respInfo.status |
||||||
|
if (status == 201) { |
||||||
|
insertAttachment(json,files) |
||||||
|
removeValue(data.company_name+" / "+data.permit_status+" / "+data.location+" / "+data.geom+" / draftPermit"); |
||||||
|
Alert.alert("Success") |
||||||
|
setAlertOnline(false); |
||||||
|
navigation.navigate('Draft Land Permit', { screen: 'Draft Land Permit'}) |
||||||
|
} |
||||||
|
else { |
||||||
|
Alert.alert("Internal Server Error") |
||||||
|
} |
||||||
|
}) |
||||||
|
} catch (error) { |
||||||
|
Alert.alert('Internal Server Error') |
||||||
|
} |
||||||
|
}; |
||||||
|
const collectDataOffline = () => { |
||||||
|
const geom = route.params.coordinates.map((item:any)=>{ |
||||||
|
return String(item).replace(',',' ') |
||||||
|
}) |
||||||
|
const storeData = async () => { |
||||||
|
try { |
||||||
|
await AsyncStorage.setItem(companyName+" / "+checkedStatus+" / "+location+" / "+geom+" / draftPermit","Value"); |
||||||
|
} catch (e) { |
||||||
|
} |
||||||
|
}; |
||||||
|
storeData() |
||||||
|
setAlertOffline(false); |
||||||
|
navigation.navigate('Property Survey', { screen: 'Property Survey'}) |
||||||
|
}; |
||||||
|
const insertAttachment = async (json:any,files: any) => { |
||||||
|
try { |
||||||
|
files.forEach(async function(file:any){ |
||||||
|
const url = `${PERMIT_API_URL}/addAttachment`; |
||||||
|
await RNFetchBlob.config({ |
||||||
|
trusty : true |
||||||
|
}).fetch('POST',url,{ |
||||||
|
"Content-Type": "application/json", |
||||||
|
}, |
||||||
|
JSON.stringify({permit_id:json[0].id, file:file.file, mimetype:file.file_type, size:file.fileSize}) |
||||||
|
).then(async(resp) => { |
||||||
|
const status = resp.respInfo.status |
||||||
|
}) |
||||||
|
}); |
||||||
|
} catch (error) { |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
const deleteByIndex = (index:number) => { |
||||||
|
setFileDocument(oldValues => { |
||||||
|
return oldValues.filter((_: any, i: number) => i !== index) |
||||||
|
}) |
||||||
|
} |
||||||
|
const uploadFileOnHandler = async () => { |
||||||
|
try { |
||||||
|
const pickedFile = await DocumentPicker.pickSingle({ |
||||||
|
type: [DocumentPicker.types.pdf,DocumentPicker.types.doc,DocumentPicker.types.docx], |
||||||
|
// allowMultiSelection:true
|
||||||
|
}) |
||||||
|
await RNFS.readFile(pickedFile.uri, 'base64').then(data => { |
||||||
|
const newObj = { |
||||||
|
file_type: pickedFile.type, |
||||||
|
file: data, |
||||||
|
fileSize: pickedFile.size |
||||||
|
|
||||||
|
} |
||||||
|
setFiles([...files,newObj]); |
||||||
|
setFileDocument([...fileDocument,pickedFile]); |
||||||
|
}); |
||||||
|
} catch (error) { |
||||||
|
console.error(error) |
||||||
|
} |
||||||
|
}; |
||||||
|
const cek = () => { |
||||||
|
console.log(coordinates); |
||||||
|
}; |
||||||
|
const getData = async () => { |
||||||
|
try { |
||||||
|
const arr = data.geom.map((item:any)=> { |
||||||
|
const str = item.split(" "); |
||||||
|
setCoordinates(oldArray => [...oldArray,[Number(str[0]),Number(str[1])]]) |
||||||
|
return [Number(str[0]),Number(str[1])] |
||||||
|
}) |
||||||
|
let centCord = turfcenter(points(arr)); |
||||||
|
console.log("center pertama",centCord.geometry.coordinates); |
||||||
|
setCenterCoords(centCord.geometry.coordinates); |
||||||
|
setLoadGeom(false); |
||||||
|
} catch (e) { |
||||||
|
console.log("error",e); |
||||||
|
|
||||||
|
// error reading value
|
||||||
|
} |
||||||
|
}; |
||||||
|
const renderItem = ({item,index}:any) => { |
||||||
|
return ( |
||||||
|
<View style={{width:352,height:70,borderRadius:10,borderStyle:'dashed',borderWidth:2,borderCurve:'continuous',borderColor:'#434343',alignItems:'center',justifyContent:'center',flexDirection:'row',columnGap:5}}> |
||||||
|
<Text style={{fontSize:20,color:'blue',fontWeight:'bold'}}>{item.name}</Text> |
||||||
|
</View> |
||||||
|
); |
||||||
|
}; |
||||||
|
return ( |
||||||
|
<View style={styles.mainContainer}> |
||||||
|
<StatusBar backgroundColor="#34A6F8" barStyle={'light-content'} /> |
||||||
|
<View key={"mainBackground"} style={{backgroundColor:'#34A6F8',width:'100%',height:'93%'}} /> |
||||||
|
<View key={"background"} style={{backgroundColor:'#FFFFFF',width:'100%',height:'100%',position:'absolute',borderTopRightRadius:50,borderTopLeftRadius:35,paddingTop:25}}> |
||||||
|
<ScrollView |
||||||
|
horizontal={false} |
||||||
|
showsHorizontalScrollIndicator={false} |
||||||
|
nestedScrollEnabled={true} |
||||||
|
style={styles.container}> |
||||||
|
<View style={{flexDirection:'column'}}> |
||||||
|
<MapView |
||||||
|
style={{width:352,height:200,borderWidth:1,borderColor:'#A6A6A6',overflow:'hidden',alignSelf:'center',borderTopRightRadius:10,borderTopLeftRadius:10}} |
||||||
|
mapStyle={styleURL} |
||||||
|
rotateEnabled={false} |
||||||
|
zoomEnabled={false} |
||||||
|
pitchEnabled={false} |
||||||
|
scrollEnabled={false} |
||||||
|
> |
||||||
|
<Camera
|
||||||
|
centerCoordinate={centerCoords.length === 0 ? coordinates[0] : centerCoords} |
||||||
|
zoomLevel={17} |
||||||
|
minZoomLevel={5} |
||||||
|
maxZoomLevel={20} |
||||||
|
/> |
||||||
|
|
||||||
|
{ |
||||||
|
!loadGeom ? |
||||||
|
<> |
||||||
|
<ShapeSource |
||||||
|
id="polygon2" |
||||||
|
shape={{ |
||||||
|
"type": "FeatureCollection", |
||||||
|
"features": [ |
||||||
|
{ |
||||||
|
"type": "Feature", |
||||||
|
"properties": {}, |
||||||
|
"geometry": { |
||||||
|
"type": "Polygon", |
||||||
|
"coordinates": [ |
||||||
|
coordinates |
||||||
|
] |
||||||
|
} |
||||||
|
} |
||||||
|
] |
||||||
|
}} |
||||||
|
> |
||||||
|
<LineLayer
|
||||||
|
id="linelayer2" |
||||||
|
style={{lineColor:'red',lineWidth:3}} |
||||||
|
/> |
||||||
|
<FillLayer
|
||||||
|
id="some-fill-feature2" |
||||||
|
style={{ |
||||||
|
fillColor: ['interpolate', ['linear'], ['zoom'], 0, '#eeddbb', 2, '#0daa00', 3, '#bbbbee'], |
||||||
|
fillOpacity:0.5 |
||||||
|
}} |
||||||
|
/> |
||||||
|
</ShapeSource> |
||||||
|
</> |
||||||
|
: |
||||||
|
null |
||||||
|
} |
||||||
|
|
||||||
|
{ |
||||||
|
coordinates.map((item:any,index:number)=>( |
||||||
|
<PointAnnotation |
||||||
|
key={index} |
||||||
|
id={String(index)} |
||||||
|
coordinate={item} |
||||||
|
draggable={false} |
||||||
|
> |
||||||
|
<View style={{ height: 75, width: 75 }}> |
||||||
|
<View style={{width:15,height:15,backgroundColor:'red',borderColor:'black',borderRadius:50}} /> |
||||||
|
</View> |
||||||
|
</PointAnnotation> |
||||||
|
)) |
||||||
|
} |
||||||
|
</MapView> |
||||||
|
{!secondPress ? |
||||||
|
<TouchableOpacity style={{alignSelf:'center',backgroundColor:'#F9F9F9',width:352,height:50,borderBottomLeftRadius:10,borderBottomRightRadius:10,justifyContent:'center',borderWidth:1,borderColor:'#A6A6A6'}}
|
||||||
|
onPress={()=>{ |
||||||
|
navigation.navigate('Map View Polygon', {
|
||||||
|
screen: 'Map View Polygon', |
||||||
|
data: { |
||||||
|
id:data.id, |
||||||
|
company_name:companyName, |
||||||
|
permit_status:checkedStatus, |
||||||
|
location:location, |
||||||
|
geom:coordinates |
||||||
|
} |
||||||
|
}); |
||||||
|
}} |
||||||
|
> |
||||||
|
<Text style={{alignSelf:'center',fontWeight:'semibold',fontSize:16,color:'#434343'}}>Change Location</Text> |
||||||
|
</TouchableOpacity> |
||||||
|
: |
||||||
|
<TouchableOpacity style={{alignSelf:'center',backgroundColor:'#F9F9F9',width:352,height:50,borderBottomLeftRadius:10,borderBottomRightRadius:10,justifyContent:'center',borderWidth:1,borderColor:'#A6A6A6'}} |
||||||
|
onPress={()=>{ |
||||||
|
navigation.navigate('Map View Polygon', {
|
||||||
|
screen: 'Map View Polygon', |
||||||
|
data: { |
||||||
|
id:data.id, |
||||||
|
company_name:companyName, |
||||||
|
permit_status:checkedStatus, |
||||||
|
location:location, |
||||||
|
geom:[...coordinates,coordinates[0]] |
||||||
|
} |
||||||
|
}); |
||||||
|
}} |
||||||
|
> |
||||||
|
<Text style={{alignSelf:'center',fontWeight:'semibold',fontSize:16,color:'#434343'}}>Change Location</Text> |
||||||
|
</TouchableOpacity> |
||||||
|
} |
||||||
|
</View> |
||||||
|
<View |
||||||
|
style={{ |
||||||
|
marginTop: 15 |
||||||
|
}} |
||||||
|
/> |
||||||
|
<View style={{alignSelf:'center'}}> |
||||||
|
{/* <Text style={styles.label}>Name<Text style={{color:'red',fontWeight:'bold'}}>*</Text></Text> */} |
||||||
|
<Text style={styles.label}>Company Name</Text> |
||||||
|
<TextInput |
||||||
|
style={styles.input} |
||||||
|
onChangeText={(text) => { |
||||||
|
setCompanyName(text) |
||||||
|
}} |
||||||
|
onChange={()=> { |
||||||
|
setCompanyNameError(false) |
||||||
|
}} |
||||||
|
defaultValue={companyName} |
||||||
|
/> |
||||||
|
{companyNameError ? <Text style={styles.errorInput}>Company Name is Required!</Text>:null} |
||||||
|
</View> |
||||||
|
<View |
||||||
|
style={{ |
||||||
|
marginTop: 15 |
||||||
|
}} |
||||||
|
/> |
||||||
|
<View style={{alignSelf:'center',width:352,height:45}}> |
||||||
|
{/* <Text style={styles.label}>Status<Text style={{color:'red',fontWeight:'bold'}}>*</Text></Text> */} |
||||||
|
<Text style={styles.label}>Permit Status</Text> |
||||||
|
<View style={{flexDirection:'row',alignItems:'center'}}> |
||||||
|
<RadioButton |
||||||
|
color='#434343' |
||||||
|
value="Approved" |
||||||
|
status={ checkedStatus === 'Approved' ? 'checked' : 'unchecked' } |
||||||
|
onPress={() => {setCheckedStatus('Approved'); setPermitStatusError(false)}} |
||||||
|
/> |
||||||
|
<Text style={{color:"#434343",fontWeight:'semibold',fontSize:16}}>Approved</Text> |
||||||
|
</View> |
||||||
|
<View style={{flexDirection:'row',alignItems:'center'}}> |
||||||
|
<RadioButton |
||||||
|
color='#434343' |
||||||
|
value="Under Review" |
||||||
|
status={ checkedStatus === 'Under Review' ? 'checked' : 'unchecked' } |
||||||
|
onPress={() => {setCheckedStatus('Under Review'); setPermitStatusError(false); }} |
||||||
|
/> |
||||||
|
<Text style={{color:"#434343",fontWeight:'semibold',fontSize:16}}>Under Review</Text> |
||||||
|
</View> |
||||||
|
{permitStatusError ? <Text style={styles.errorInput}>Status is Required!</Text>:null} |
||||||
|
</View> |
||||||
|
<View |
||||||
|
style={{ |
||||||
|
marginTop: 60 |
||||||
|
}} |
||||||
|
/> |
||||||
|
{ |
||||||
|
checkedStatus === 'Approved' ?
|
||||||
|
<Animated.View> |
||||||
|
<View style={{alignSelf:'center'}}> |
||||||
|
<Text style={styles.label}>Approved By<Text style={{ color: 'red', fontWeight: 'bold' }}>*</Text></Text> |
||||||
|
<TextInput |
||||||
|
style={styles.input} |
||||||
|
onChangeText={(text) => { |
||||||
|
setApprovedBy(text); |
||||||
|
} } |
||||||
|
/> |
||||||
|
</View> |
||||||
|
<View |
||||||
|
style={{ |
||||||
|
marginTop: 15 |
||||||
|
}} /> |
||||||
|
</Animated.View> |
||||||
|
: |
||||||
|
null |
||||||
|
} |
||||||
|
<View style={{alignSelf:'center'}}> |
||||||
|
<Text style={styles.label}>Location Detail</Text> |
||||||
|
<TextInput style={{borderWidth:1,borderRadius:20,padding: 10,color:'#6B5E5E',borderColor:'#A6A6A6',textAlignVertical:'top',width:352,height:135}} |
||||||
|
multiline |
||||||
|
numberOfLines={5} |
||||||
|
maxLength={255} |
||||||
|
onChangeText={(text) => { |
||||||
|
setLocation(text) |
||||||
|
}} |
||||||
|
onChange={()=> { |
||||||
|
setLocationError(false) |
||||||
|
}} |
||||||
|
defaultValue={location} |
||||||
|
/> |
||||||
|
{locationError ? <Text style={styles.errorInput}>Information is Required!</Text>:null} |
||||||
|
</View> |
||||||
|
<View |
||||||
|
style={{ |
||||||
|
marginTop: 15 |
||||||
|
}} |
||||||
|
/> |
||||||
|
<View style={{alignSelf:'center'}}> |
||||||
|
<Text style={styles.label}>Survey Date</Text> |
||||||
|
<TextInput |
||||||
|
style={styles.input} |
||||||
|
onPress={() => setOpen(true)} |
||||||
|
value={String(momentDate)} |
||||||
|
/> |
||||||
|
<DatePicker |
||||||
|
locale='en' |
||||||
|
theme='light' |
||||||
|
mode='date' |
||||||
|
modal |
||||||
|
open={open} |
||||||
|
date={install_date} |
||||||
|
onConfirm={(survey_date) => { |
||||||
|
setOpen(false) |
||||||
|
setInstallDate(survey_date) |
||||||
|
}} |
||||||
|
onCancel={() => { |
||||||
|
setOpen(false) |
||||||
|
}} |
||||||
|
/> |
||||||
|
</View> |
||||||
|
<View |
||||||
|
style={{ |
||||||
|
marginTop: 15 |
||||||
|
}} |
||||||
|
/> |
||||||
|
<View style={{alignSelf:'center',width:352}}> |
||||||
|
<Text style={styles.label}>Attachment</Text> |
||||||
|
<Text style={{fontStyle:'italic',color:'#434343',fontSize:14}}>Lampirkan dokumen</Text> |
||||||
|
{
|
||||||
|
fileDocument.length === 0 ? |
||||||
|
<Pressable onPress={uploadFileOnHandler}> |
||||||
|
<View style={{width:352,height:70,borderRadius:10,borderStyle:'dashed',borderWidth:2,borderCurve:'continuous',borderColor:'#434343',alignItems:'center',justifyContent:'center',flexDirection:'row',columnGap:5}}> |
||||||
|
<Image |
||||||
|
source={require('../../assets/icon/folder.png')} |
||||||
|
/> |
||||||
|
<Text style={{fontStyle:'italic',color:'#434343'}}>Klik untuk menambahkan dokumen</Text> |
||||||
|
</View> |
||||||
|
</Pressable> |
||||||
|
: |
||||||
|
<FlatList |
||||||
|
horizontal={true} |
||||||
|
showsHorizontalScrollIndicator={false} |
||||||
|
scrollEnabled={false} |
||||||
|
ListFooterComponent={()=> |
||||||
|
<Pressable onPress={uploadFileOnHandler}> |
||||||
|
<View style={{width:352,height:70,borderRadius:10,borderStyle:'dashed',borderWidth:2,borderCurve:'continuous',borderColor:'#434343',alignItems:'center',justifyContent:'center'}}> |
||||||
|
<Image |
||||||
|
source={require('../../assets/icon/folder.png')} |
||||||
|
/> |
||||||
|
<Text style={{fontStyle:'italic',color:'#434343'}}>Klik untuk menambahkan dokumen</Text> |
||||||
|
</View> |
||||||
|
</Pressable> |
||||||
|
} |
||||||
|
contentContainerStyle={{flexDirection:'column',columnGap:25,rowGap:10}} |
||||||
|
data={fileDocument} |
||||||
|
renderItem={({item,index})=>renderItem({item,index})} |
||||||
|
/> |
||||||
|
} |
||||||
|
</View> |
||||||
|
<View |
||||||
|
style={{ |
||||||
|
marginTop: 30 |
||||||
|
}} |
||||||
|
/> |
||||||
|
</ScrollView> |
||||||
|
<TouchableOpacity style={{width:'100%',height:50,backgroundColor:'#34A6F8',alignItems:'center',justifyContent:'center'}} onPress={showDialog}> |
||||||
|
<Text style={{fontSize:18,fontWeight:'bold',color:'#FFFFFF'}}>RESEND</Text> |
||||||
|
</TouchableOpacity> |
||||||
|
</View> |
||||||
|
|
||||||
|
<AwesomeAlert |
||||||
|
show={alertOnline} |
||||||
|
showProgress={false} |
||||||
|
title="Resend Data" |
||||||
|
message="Are you sure for Add New Permit data?" |
||||||
|
closeOnTouchOutside={false} |
||||||
|
closeOnHardwareBackPress={false} |
||||||
|
showCancelButton={true} |
||||||
|
showConfirmButton={true} |
||||||
|
cancelText="No, cancel" |
||||||
|
confirmText="Yes, Add it" |
||||||
|
confirmButtonColor="#137997" |
||||||
|
onCancelPressed={() => { |
||||||
|
handleCancelAlertOnline(); |
||||||
|
}} |
||||||
|
onConfirmPressed={() => { |
||||||
|
collectDataOnline(); |
||||||
|
// cek()
|
||||||
|
}} |
||||||
|
overlayStyle={{width:'100%'}} |
||||||
|
contentContainerStyle={{width:'70%',borderRadius:10}} |
||||||
|
titleStyle={{fontSize:20}} |
||||||
|
messageStyle={{fontSize:16}} |
||||||
|
/> |
||||||
|
|
||||||
|
{/* Offline Mode Alert */} |
||||||
|
<AwesomeAlert |
||||||
|
show={alertOffline} |
||||||
|
showProgress={false} |
||||||
|
title="You are offline" |
||||||
|
message="You want to add data to the draft?" |
||||||
|
closeOnTouchOutside={false} |
||||||
|
closeOnHardwareBackPress={false} |
||||||
|
showCancelButton={true} |
||||||
|
showConfirmButton={true} |
||||||
|
cancelText="No, cancel" |
||||||
|
confirmText="Yes, Add it" |
||||||
|
confirmButtonColor="#DD6B55" |
||||||
|
onCancelPressed={() => { |
||||||
|
handleCancelAlertOffline(); |
||||||
|
}} |
||||||
|
onConfirmPressed={() => { |
||||||
|
collectDataOffline(); |
||||||
|
}} |
||||||
|
overlayStyle={{width:'100%'}} |
||||||
|
contentContainerStyle={{width:'70%',borderRadius:10}} |
||||||
|
titleStyle={{fontSize:20}} |
||||||
|
messageStyle={{fontSize:16}} |
||||||
|
/> |
||||||
|
</View> |
||||||
|
) |
||||||
|
}; |
||||||
|
|
||||||
|
const styles = StyleSheet.create({ |
||||||
|
errorInput: { |
||||||
|
color: 'red', |
||||||
|
marginLeft: 20 |
||||||
|
}, |
||||||
|
inputLong: { |
||||||
|
height: 40, |
||||||
|
borderWidth: 1, |
||||||
|
padding: 10, |
||||||
|
width: 180, |
||||||
|
marginRight: 20 |
||||||
|
}, |
||||||
|
inputLat: { |
||||||
|
height: 40, |
||||||
|
borderWidth: 1, |
||||||
|
padding: 10, |
||||||
|
borderRadius: 50, |
||||||
|
width: 180, |
||||||
|
color: 'black' |
||||||
|
}, |
||||||
|
input: { |
||||||
|
width:352, |
||||||
|
height: 45, |
||||||
|
borderWidth: 1, |
||||||
|
padding: 10, |
||||||
|
borderRadius: 10, |
||||||
|
color: '#6B5E5E', |
||||||
|
borderColor:'#A6A6A6' |
||||||
|
}, |
||||||
|
container: { |
||||||
|
padding: 10, |
||||||
|
flexGrow: 1 |
||||||
|
}, |
||||||
|
mainContainer: { |
||||||
|
flex: 1, |
||||||
|
}, |
||||||
|
label: { |
||||||
|
fontSize: 16, |
||||||
|
fontWeight:'semibold', |
||||||
|
color: '#434343', |
||||||
|
// marginBottom: 20
|
||||||
|
}, |
||||||
|
title: { |
||||||
|
alignItems: 'center', |
||||||
|
justifyContent: 'center', |
||||||
|
alignSelf: 'center', |
||||||
|
fontWeight: 'bold', |
||||||
|
fontSize: 22, |
||||||
|
color: 'black', |
||||||
|
marginBottom: 10 |
||||||
|
}, |
||||||
|
borderImg: { |
||||||
|
borderColor: 'black', |
||||||
|
borderWidth: 1, |
||||||
|
borderRadius: 20, |
||||||
|
}, |
||||||
|
img: { |
||||||
|
width: 295, |
||||||
|
height: 500, |
||||||
|
borderRadius: 6, |
||||||
|
}, |
||||||
|
btnCameraContainer: { |
||||||
|
flexDirection: 'row', |
||||||
|
justifyContent: 'space-around', |
||||||
|
top:10, |
||||||
|
|
||||||
|
}, |
||||||
|
btnCamera: { |
||||||
|
alignItems: 'center', |
||||||
|
justifyContent: 'center', |
||||||
|
alignSelf: 'center', |
||||||
|
width: 100, |
||||||
|
height: 40, |
||||||
|
bottom:20, |
||||||
|
borderRadius: 6, |
||||||
|
backgroundColor: '#80CBD3' |
||||||
|
}, |
||||||
|
textBtn: { |
||||||
|
color: '#fff' |
||||||
|
}, |
||||||
|
buttonImageIconStyle: { |
||||||
|
padding: 10, |
||||||
|
margin: 5, |
||||||
|
height: 25, |
||||||
|
width: 25, |
||||||
|
resizeMode: 'stretch', |
||||||
|
}, |
||||||
|
}); |
||||||
|
|
||||||
Loading…
Reference in new issue