11 changed files with 926 additions and 120 deletions
@ -0,0 +1,806 @@
@@ -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