Irul24
1 year ago
15 changed files with 2860 additions and 1079 deletions
@ -0,0 +1,801 @@
@@ -0,0 +1,801 @@
|
||||
import { useEffect, useRef, useState } from 'react'; |
||||
import {View,Text, StyleSheet, ScrollView, TouchableOpacity, Image, Animated, TextInput, Button, Alert, Pressable, StatusBar, FlatList} from 'react-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 {useNavigation,NavigationContainer,useIsFocused} from '@react-navigation/native'; |
||||
import turfcenter from '@turf/center'; |
||||
const {points,polygon,lineString} = require('@turf/helpers'); |
||||
import RNFetchBlob from 'rn-fetch-blob'; |
||||
import Modal from "react-native-modal"; |
||||
|
||||
|
||||
|
||||
import { PDAM_API_URL } from "../../urlConfig"; |
||||
import React from 'react'; |
||||
type collectLineScreenProps = {route: any,navigation: any}; |
||||
|
||||
|
||||
|
||||
export default function ResendPDAM({route,navigation}:collectLineScreenProps) { |
||||
// console.log("route",route.params);
|
||||
const {data,coors} = route.params; |
||||
const apiKey = "JoJs2pcDv5o0yQlQLMfI"; |
||||
const [basemap, setBasemap] = useState("streets-v2"); |
||||
const styleURL = `https://api.maptiler.com/maps/${basemap}/style.json?key=${apiKey}`; |
||||
const Pipe_Type = [ |
||||
{key:'Pipa 24"', value:'Pipa 24"'}, |
||||
{key:'Pipa 20"', value:'Pipa 20"'}, |
||||
{key:'Pipa 16"', value:'Pipa 16"'}, |
||||
{key:'Pipa 10"', value:'Pipa 10"'}, |
||||
] |
||||
const ref = useRef(); |
||||
const [connected, setConnected] = useState(true); |
||||
const [currentIndex, setCurrentIndex] = useState(0); |
||||
const [imgUrl, setImgUrl] = useState([]); |
||||
const [files, setFiles] = useState([]); |
||||
const [pipeName, setPipeName] = useState(data.nama); |
||||
const [selectedPipeType, setselectedPipeType] = useState(data.jenis); |
||||
const [checkedStatus, setCheckedStatus] = useState(data.status); |
||||
const [Information, setInformation] = useState(data.keterangan); |
||||
const [open, setOpen] = useState(false); |
||||
const [install_date, setInstallDate] = useState(new Date(data.tanggal_installasi)); |
||||
const momentDate = Moment(install_date).format('YYYY-MM-DD'); |
||||
const [alertOnline, setAlertOnline] = useState(false); |
||||
const [alertOffline, setAlertOffline] = useState(false); |
||||
const [pipeNameError, setPipeNameError] = useState(false); |
||||
const [pipeTyeError, setPipeTypeError] = useState(false); |
||||
const [pipeStatusError, setPipeStatusError] = useState(false); |
||||
const [pipeInfoError, setPipeInfoError] = useState(false); |
||||
const [coordinates,setCoordinates] = useState([]); |
||||
const [loadGeom,setLoadGeom] = useState(true); |
||||
const [secondPress,setSecondPress] = useState(false); |
||||
const isFocused = useIsFocused(); |
||||
const [centerCoords,setCenterCoords] = useState<number[]>([]); |
||||
const [ModalAttachment, setModalAttachment] = useState(false); |
||||
useEffect(()=>{ |
||||
if (isFocused) { |
||||
console.log(data); |
||||
if (coors === undefined) { |
||||
getData() |
||||
fetchData() |
||||
} |
||||
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 getData = async () => { |
||||
try { |
||||
const url = `${PDAM_API_URL}/${route.params.data.id}`; |
||||
await RNFetchBlob.config({ |
||||
trusty : true |
||||
}).fetch('GET', url |
||||
).then(async (resp) => { |
||||
const json = resp.json(); |
||||
const arr = json.map((item:any)=>{ |
||||
// console.log(item.long);
|
||||
|
||||
setCoordinates(oldArray => [...oldArray,[Number(item.long),Number(item.lat)]]) |
||||
return [Number(item.long),Number(item.lat)] |
||||
}) |
||||
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 fetchData = async () => { |
||||
try { |
||||
await RNFetchBlob.config({ |
||||
trusty : true |
||||
}).fetch('POST', `${PDAM_API_URL}/getAttachment`,{ |
||||
"Content-Type": "application/json", |
||||
}, |
||||
JSON.stringify({ |
||||
id:data.id |
||||
}) |
||||
).then(async (resp) => { |
||||
const json = resp.json() |
||||
json?.forEach(asset => { |
||||
setImgUrl(oldArray => [...oldArray,asset.file]); |
||||
}); |
||||
}) |
||||
|
||||
} catch (error) { |
||||
console.error('Error fetching data:', error); |
||||
} |
||||
}; |
||||
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={{justifyContent:'center',alignItems:'center',alignSelf:'center'}} onPress={()=> { |
||||
setCurrentIndex(currentIndex-1) |
||||
ref.current.scrollToIndex({ |
||||
animated: true, |
||||
index: currentIndex-1 |
||||
}); |
||||
}}> |
||||
<Image style={{justifyContent:'center',alignItems:'center',alignSelf:'center'}} source={require('../../assets/icon/left-arrow.png')} /> |
||||
</TouchableOpacity> |
||||
) |
||||
} |
||||
return ( |
||||
<TouchableOpacity style={{justifyContent:'center',alignItems:'center',alignSelf:'center'}} onPress={()=> { |
||||
setCurrentIndex(currentIndex-1) |
||||
ref.current.scrollToIndex({ |
||||
animated: true, |
||||
index: currentIndex-1 |
||||
}); |
||||
}}> |
||||
<Image style={{justifyContent:'center',alignItems:'center',alignSelf:'center'}} source={require('../../assets/icon/left-arrow.png')} /> |
||||
</TouchableOpacity> |
||||
) |
||||
}; |
||||
const NextImg = ({isIndex}) => { |
||||
if(isIndex===imgUrl.length-1){ |
||||
return ( |
||||
<TouchableOpacity disabled style={{justifyContent:'center',alignItems:'center',alignSelf:'center'}} onPress={()=> { |
||||
setCurrentIndex(currentIndex+1) |
||||
ref.current.scrollToIndex({ |
||||
animated: true, |
||||
index: currentIndex+1 |
||||
}); |
||||
}}> |
||||
<Image style={{justifyContent:'center',alignItems:'center',alignSelf:'center'}} source={require('../../assets/icon/right-arrow.png')} /> |
||||
</TouchableOpacity> |
||||
) |
||||
} |
||||
return ( |
||||
<TouchableOpacity style={{justifyContent:'center',alignItems:'center',alignSelf:'center'}} onPress={()=> { |
||||
setCurrentIndex(currentIndex+1) |
||||
ref.current.scrollToIndex({ |
||||
animated: true, |
||||
index: currentIndex+1 |
||||
}); |
||||
}}> |
||||
<Image style={{justifyContent:'center',alignItems:'center',alignSelf:'center'}} source={require('../../assets/icon/right-arrow.png')} /> |
||||
</TouchableOpacity> |
||||
) |
||||
}; |
||||
const showDialog = () => { |
||||
console.log("coor",coordinates); |
||||
if(!pipeName){ |
||||
setPipeNameError(true) |
||||
}else{ |
||||
setPipeNameError(false) |
||||
} |
||||
if(!selectedPipeType){ |
||||
setPipeTypeError(true) |
||||
}else{ |
||||
setPipeTypeError(false) |
||||
} |
||||
if(!checkedStatus){ |
||||
setPipeStatusError(true) |
||||
}else{ |
||||
setPipeStatusError(false) |
||||
} |
||||
if(!Information){ |
||||
setPipeInfoError(true) |
||||
}else{ |
||||
setPipeInfoError(false) |
||||
} |
||||
if(!pipeName || !selectedPipeType || !checkedStatus || !Information) { |
||||
return false |
||||
} |
||||
if(connected){ |
||||
setAlertOnline(true); |
||||
} |
||||
else{ |
||||
setAlertOffline(true) |
||||
} |
||||
}; |
||||
const handleCancelAlertOnline = () => { |
||||
setAlertOnline(false); |
||||
}; |
||||
const handleCancelAlertOffline = () => { |
||||
setAlertOffline(false); |
||||
}; |
||||
const insertAttachment = (files: any) => { |
||||
try { |
||||
files.forEach(async function(file:any) { |
||||
const url = `${PDAM_API_URL}/addAttachment`; |
||||
await RNFetchBlob.config({ |
||||
trusty : true |
||||
}).fetch('POST', url,{ |
||||
"Content-Type": "application/json", |
||||
}, |
||||
JSON.stringify({pdam_id:data.id, file:file.file, mimetype:file.file_type, size:file.fileSize}) |
||||
).then(async (resp) => { |
||||
|
||||
} |
||||
) |
||||
}); |
||||
} catch (error) { |
||||
console.log(error); |
||||
} |
||||
}; |
||||
const collectDataOnline = async () => { |
||||
try { |
||||
const geom = coordinates.map((item:any)=>{ |
||||
return String(item).replace(',',' ') |
||||
}); |
||||
const obj = { |
||||
nama: pipeName, |
||||
jenis: selectedPipeType, |
||||
tanggal_installasi: momentDate, |
||||
status: checkedStatus, |
||||
keterangan: Information, |
||||
geom: `MULTILINESTRING((${geom}))`, |
||||
id:data.id |
||||
}; |
||||
const url = `${PDAM_API_URL}/updateData`; |
||||
await RNFetchBlob.config({ |
||||
trusty : true |
||||
}).fetch('POST', url,{ |
||||
"Content-Type": "application/json", |
||||
}, |
||||
JSON.stringify(obj) |
||||
).then(async (resp) => { |
||||
const status = resp.respInfo.status |
||||
if (status == 201) { |
||||
insertAttachment(files) |
||||
Alert.alert("Success") |
||||
setAlertOnline(false); |
||||
navigation.navigate('Inbox Pipa PDAM', { screen: 'Inbox Pipa PDAM'}) |
||||
} |
||||
else { |
||||
Alert.alert("Internal Server Error") |
||||
} |
||||
} |
||||
|
||||
) |
||||
|
||||
} catch (error) { |
||||
|
||||
} |
||||
// const geom = coordinates.map((item:any)=>{
|
||||
// return String(item).replace(',',' ')
|
||||
// })
|
||||
// // console.log("geom",geom);
|
||||
|
||||
// const obj = {
|
||||
// nama: pipeName,
|
||||
// jenis: selectedPipeType,
|
||||
// tanggal_installasi: momentDate,
|
||||
// status: checkedStatus,
|
||||
// keterangan: Information,
|
||||
// geom: `MULTILINESTRING((${geom}))`,
|
||||
// id:data.id
|
||||
// }
|
||||
// console.log(obj);
|
||||
|
||||
// let result = await fetch(`${PDAM_API_URL}/updateData`, {
|
||||
// method: "POST",
|
||||
// headers: {
|
||||
// "Content-Type": "application/json"
|
||||
// },
|
||||
// body: JSON.stringify(obj)
|
||||
// })
|
||||
|
||||
// // const json = await result.json();
|
||||
// const status = result.status
|
||||
// if (status == 201) {
|
||||
// insertAttachment(files)
|
||||
// }
|
||||
// else {
|
||||
// Alert.alert("Internal Server Error")
|
||||
// }
|
||||
}; |
||||
const collectDataOffline = () => { |
||||
setAlertOnline(false); |
||||
}; |
||||
const renderItem = ({item,index}:any) => { |
||||
return ( |
||||
<View key={index} style={{width:100,height:100,borderRadius:10,borderWidth:1,borderStyle:"dashed",flexDirection:'row'}}> |
||||
<Image style={{width: '100%',height: '100%',borderRadius:10}} |
||||
source={{uri: `data:image/jpeg;base64,${imgUrl[index]}`}} |
||||
/> |
||||
</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 style={styles.container}> |
||||
{ |
||||
!loadGeom ? |
||||
<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} |
||||
zoomLevel={15} |
||||
minZoomLevel={5} |
||||
maxZoomLevel={20} |
||||
/> |
||||
<ShapeSource |
||||
id="line" |
||||
shape={{ |
||||
"type": "FeatureCollection", |
||||
"features": [ |
||||
{ |
||||
"type": "Feature", |
||||
"properties": {}, |
||||
"geometry": { |
||||
"type": "LineString", |
||||
"coordinates": [data.geom] |
||||
} |
||||
} |
||||
] |
||||
}} |
||||
> |
||||
<LineLayer
|
||||
id="linelayer1" |
||||
style={{lineColor:'red',lineWidth:3}} |
||||
/> |
||||
</ShapeSource> |
||||
{ |
||||
coordinates.map((item:any,index:number)=>( |
||||
<PointAnnotation |
||||
children={<></>} |
||||
key={index} |
||||
id={String(index)} |
||||
coordinate={item} |
||||
draggable={false} |
||||
/> |
||||
)) |
||||
} |
||||
</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 Line', { screen: 'Map View Line',data: { |
||||
id:data.id, |
||||
pipe_name:pipeName, |
||||
pipe_type:selectedPipeType, |
||||
tanggal_installasi: momentDate, |
||||
status: checkedStatus, |
||||
keterangan: Information, |
||||
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 Line', { screen: 'Map View Line',data: { |
||||
id:data.id, |
||||
pipe_name:pipeName, |
||||
pipe_type:selectedPipeType, |
||||
tanggal_installasi: momentDate, |
||||
status: checkedStatus, |
||||
keterangan: Information, |
||||
geom:[...coordinates,coordinates[0]] |
||||
}}); |
||||
} |
||||
}> |
||||
<Text style={{alignSelf:'center',fontWeight:'semibold',fontSize:16,color:'#434343'}}>Change Location</Text> |
||||
</TouchableOpacity> |
||||
} |
||||
</View> |
||||
: |
||||
null |
||||
} |
||||
<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}>Pipe Name</Text> |
||||
<TextInput |
||||
style={styles.input} |
||||
onChangeText={(text)=>{ |
||||
setPipeName(text) |
||||
}} |
||||
onChange={()=> { |
||||
setPipeNameError(false) |
||||
}} |
||||
defaultValue={pipeName} |
||||
/> |
||||
{pipeNameError ? <Text style={styles.errorInput}>Pipe Name is Required!</Text>:null} |
||||
</View> |
||||
<View |
||||
style={{ |
||||
marginTop: 15 |
||||
}} |
||||
/> |
||||
<View style={{alignSelf:'center'}}> |
||||
{/* <Text style={styles.label}>PJU Type <Text style={{color:'red',fontWeight:'bold'}}>*</Text></Text> */} |
||||
<Text style={styles.label}>Pipe Type</Text> |
||||
<SelectList |
||||
search={false} |
||||
placeholder="Select Pipe Type" |
||||
boxStyles={{borderRadius:10,borderWidth:1,borderColor:'#A6A6A6',width:352,height:45}} |
||||
inputStyles={{color:'#6B5E5E'}} |
||||
dropdownTextStyles={{color:'#6B5E5E'}} |
||||
data={Pipe_Type} |
||||
setSelected={setselectedPipeType} |
||||
onSelect={()=> ( |
||||
[setPipeTypeError(false)] |
||||
)} |
||||
defaultOption={{key:selectedPipeType, value:selectedPipeType}} |
||||
/> |
||||
{pipeTyeError ? <Text style={styles.errorInput}>Pipe Type 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}>Status</Text> |
||||
<View style={{flexDirection:'row',alignItems:'center'}}> |
||||
<RadioButton |
||||
color='#434343' |
||||
value="Baik" |
||||
status={ checkedStatus === 'Baik' ? 'checked' : 'unchecked' } |
||||
onPress={() => {setCheckedStatus('Baik'); setPipeStatusError(false)}} |
||||
/> |
||||
<Text style={{color:"#434343",fontWeight:'semibold',fontSize:16}}>Baik</Text> |
||||
</View> |
||||
<View style={{flexDirection:'row',alignItems:'center'}}> |
||||
<RadioButton |
||||
color='#434343' |
||||
value="Rusak" |
||||
status={ checkedStatus === 'Rusak' ? 'checked' : 'unchecked' } |
||||
onPress={() => {setCheckedStatus('Rusak'); setPipeStatusError(false); }} |
||||
/> |
||||
<Text style={{color:"#434343",fontWeight:'semibold',fontSize:16}}>Rusak</Text> |
||||
</View> |
||||
{pipeStatusError ? <Text style={styles.errorInput}>Status is Required!</Text>:null} |
||||
</View> |
||||
<View |
||||
style={{ |
||||
marginTop: 60 |
||||
}} |
||||
/> |
||||
<View style={{alignSelf:'center'}}> |
||||
<Text style={styles.label}>Information</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) => { |
||||
setInformation(text) |
||||
}} |
||||
onChange={()=> { |
||||
setPipeInfoError(false) |
||||
}} |
||||
defaultValue={Information} |
||||
/> |
||||
{pipeInfoError ? <Text style={styles.errorInput}>Information is Required!</Text>:null} |
||||
</View> |
||||
<View |
||||
style={{ |
||||
marginTop: 15 |
||||
}} |
||||
/> |
||||
<View style={{alignSelf:'center'}}> |
||||
<Text style={styles.label}>Installation 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 foto / gambar</Text> |
||||
{
|
||||
imgUrl.length === 0 ? |
||||
<Pressable onPress={()=>setModalAttachment(true)}> |
||||
<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/camorlib.png')} |
||||
/> |
||||
<Text style={{fontStyle:'italic',color:'#434343'}}>Klik untuk menambahkan foto / gambar</Text> |
||||
</View> |
||||
</Pressable> |
||||
: |
||||
<FlatList |
||||
horizontal={false} |
||||
showsHorizontalScrollIndicator={false} |
||||
scrollEnabled={false} |
||||
ListFooterComponent={()=> |
||||
<Pressable onPress={()=>setModalAttachment(true)}> |
||||
<View style={{width:100,height:100,borderRadius:10,borderWidth:1,borderStyle:"dashed",flexDirection:'row',alignItems:'center',justifyContent:'center'}}> |
||||
<Image |
||||
source={require('../../assets/icon/camorlib.png')} |
||||
/> |
||||
</View> |
||||
</Pressable> |
||||
} |
||||
contentContainerStyle={{flexDirection:'row',flexWrap:'wrap',columnGap:25,rowGap:10}} |
||||
data={imgUrl} |
||||
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'}}>UPDATE</Text> |
||||
</TouchableOpacity> |
||||
</View> |
||||
{/* Online Mode Alert */} |
||||
<AwesomeAlert |
||||
show={alertOnline} |
||||
showProgress={false} |
||||
title="Updating Data" |
||||
message="Are you sure for Updating PDAM data?" |
||||
closeOnTouchOutside={false} |
||||
closeOnHardwareBackPress={false} |
||||
showCancelButton={true} |
||||
showConfirmButton={true} |
||||
cancelText="No, cancel" |
||||
confirmText="Yes, Update it" |
||||
confirmButtonColor="#137997" |
||||
onCancelPressed={() => { |
||||
handleCancelAlertOnline(); |
||||
}} |
||||
onConfirmPressed={() => { |
||||
collectDataOnline(); |
||||
}} |
||||
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}} |
||||
/> |
||||
<Modal isVisible={ModalAttachment} animationIn={'fadeInUp'} animationOut={'fadeOutDown'} backdropOpacity={0} onBackdropPress={()=>setModalAttachment(false)} style={{top:'18%',alignSelf:'center'}}> |
||||
<View key={"modal container"} style={{width:330,height:220,backgroundColor:'#F9F9F9',borderRadius:25,borderWidth:1,borderColor:'#A6A6A6'}}> |
||||
<View style={{flexDirection:'row',alignItems:'center',justifyContent:'space-between',paddingLeft:30,paddingTop:20,paddingRight:10}}> |
||||
<Text style={{fontSize:20,fontWeight:'semibold',color: '#434343',}}> |
||||
Select Mode |
||||
</Text> |
||||
<Pressable onPress={()=>setModalAttachment(false)} style={{alignSelf:'flex-end',padding:10}}> |
||||
<Image style={{tintColor:'#434343'}} |
||||
source={require('../../assets/icon/x.png')} |
||||
/> |
||||
</Pressable> |
||||
</View> |
||||
<View style={{padding:30}}> |
||||
<TouchableOpacity onPress={()=>{openCameraLib(),setModalAttachment(false)}} style={{height:50,backgroundColor:'#FFFFFF',alignItems:'center',justifyContent:'center',borderTopLeftRadius:10,borderTopRightRadius:10,borderWidth:1,borderColor:'#A6A6A6'}}> |
||||
<Text style={{fontSize:20,fontWeight:'light',color:'#434343'}}>Take photo</Text> |
||||
</TouchableOpacity> |
||||
<TouchableOpacity onPress={()=>{openLib(),setModalAttachment(false)}} style={{height:50,backgroundColor:'#FFFFFF',alignItems:'center',justifyContent:'center',borderBottomLeftRadius:10,borderBottomRightRadius:10,borderWidth:1,borderColor:'#A6A6A6'}}> |
||||
<Text style={{fontSize:20,fontWeight:'light',color:'#434343'}}>Choose photo</Text> |
||||
</TouchableOpacity> |
||||
</View> |
||||
</View> |
||||
</Modal> |
||||
</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', |
||||
}, |
||||
}); |
||||
|
||||
@ -0,0 +1,799 @@
@@ -0,0 +1,799 @@
|
||||
import React, { useEffect, useRef, useState, useCallback } from 'react'; |
||||
|
||||
import { |
||||
TextInput, |
||||
Button, |
||||
PermissionsAndroid, |
||||
StatusBar, |
||||
StyleSheet, |
||||
Text, |
||||
View, |
||||
Image, |
||||
TouchableOpacity, |
||||
ScrollView, |
||||
FlatList, |
||||
Dimensions, |
||||
Animated, |
||||
Alert, |
||||
Pressable |
||||
} from 'react-native'; |
||||
|
||||
import { launchCamera, launchImageLibrary } from 'react-native-image-picker'; |
||||
import { SelectList } from 'react-native-dropdown-select-list'; |
||||
import DatePicker from 'react-native-date-picker'; |
||||
import AsyncStorage from '@react-native-async-storage/async-storage'; |
||||
import DocumentPicker from "react-native-document-picker"; |
||||
import NetInfo from "@react-native-community/netinfo"; |
||||
import RNFS from 'react-native-fs'; |
||||
|
||||
import MapLibreGL from '@maplibre/maplibre-react-native'; |
||||
import { MapView,ShapeSource,Camera,UserLocation,PointAnnotation,FillLayer,LineLayer,VectorSource } from "@maplibre/maplibre-react-native"; |
||||
import Moment from 'moment'; |
||||
import { RadioButton } from 'react-native-paper'; |
||||
import AwesomeAlert from 'react-native-awesome-alerts'; |
||||
import {useNavigation,NavigationContainer,useIsFocused} from '@react-navigation/native'; |
||||
import RNFetchBlob from 'rn-fetch-blob'; |
||||
import Modal from "react-native-modal"; |
||||
|
||||
import { PJU_API_URL } from "../../urlConfig"; |
||||
|
||||
type editScreenProps = {route: any,navigation: any}; |
||||
|
||||
function ResendPJU({route,navigation}: editScreenProps) { |
||||
const apiKey = "JoJs2pcDv5o0yQlQLMfI"; |
||||
const [basemap, setBasemap] = useState("streets-v2"); |
||||
const styleURL = `https://api.maptiler.com/maps/${basemap}/style.json?key=${apiKey}`; |
||||
const {data,fixCoordinate} = route.params; |
||||
const [imgUrl, setImgUrl] = useState([]); |
||||
const [files, setFiles] = useState([]); |
||||
const [fileDocument, setFileDocument] = useState([]); |
||||
const [currentIndex, setCurrentIndex] = useState(0); |
||||
const [connected, setConnected] = useState(true) |
||||
console.log("coor",{"long":data.long,"lat":data.lat}); |
||||
|
||||
|
||||
const openCameraLib = async () => { |
||||
const result = await launchCamera({ |
||||
mediaType: 'photo', |
||||
quality: 1, |
||||
includeBase64: 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={{justifyContent:'center',alignItems:'center',alignSelf:'center'}} onPress={()=> { |
||||
setCurrentIndex(currentIndex-1) |
||||
ref.current.scrollToIndex({ |
||||
animated: true, |
||||
index: currentIndex-1 |
||||
}); |
||||
}}> |
||||
<Image style={{justifyContent:'center',alignItems:'center',alignSelf:'center'}} source={require('../../assets/icon/left-arrow.png')} /> |
||||
</TouchableOpacity> |
||||
) |
||||
} |
||||
return ( |
||||
<TouchableOpacity style={{justifyContent:'center',alignItems:'center',alignSelf:'center'}} onPress={()=> { |
||||
setCurrentIndex(currentIndex-1) |
||||
ref.current.scrollToIndex({ |
||||
animated: true, |
||||
index: currentIndex-1 |
||||
}); |
||||
}}> |
||||
<Image style={{justifyContent:'center',alignItems:'center',alignSelf:'center'}} source={require('../../assets/icon/left-arrow.png')} /> |
||||
</TouchableOpacity> |
||||
) |
||||
}; |
||||
const NextImg = ({isIndex}) => { |
||||
if(isIndex===imgUrl.length-1){ |
||||
return ( |
||||
<TouchableOpacity disabled style={{justifyContent:'center',alignItems:'center',alignSelf:'center'}} onPress={()=> { |
||||
setCurrentIndex(currentIndex+1) |
||||
ref.current.scrollToIndex({ |
||||
animated: true, |
||||
index: currentIndex+1 |
||||
}); |
||||
}}> |
||||
<Image style={{justifyContent:'center',alignItems:'center',alignSelf:'center'}} source={require('../../assets/icon/right-arrow.png')} /> |
||||
</TouchableOpacity> |
||||
) |
||||
} |
||||
return ( |
||||
<TouchableOpacity style={{justifyContent:'center',alignItems:'center',alignSelf:'center'}} onPress={()=> { |
||||
setCurrentIndex(currentIndex+1) |
||||
ref.current.scrollToIndex({ |
||||
animated: true, |
||||
index: currentIndex+1 |
||||
}); |
||||
}}> |
||||
<Image style={{justifyContent:'center',alignItems:'center',alignSelf:'center'}} source={require('../../assets/icon/right-arrow.png')} /> |
||||
</TouchableOpacity> |
||||
) |
||||
}; |
||||
const PJU_Type = [ |
||||
{key:'Lampu 20 W', value:'Lampu 20 W'}, |
||||
{key:'Lampu 15 W', value:'Lampu 15 W'}, |
||||
{key:'Lampu 10 W', value:'Lampu 10 W'}, |
||||
{key:'Lampu 5 W', value:'Lampu 5 W'}, |
||||
] |
||||
const ref = useRef(); |
||||
const [open, setOpen] = useState(false) |
||||
const [pju_name, setPJUname] = useState(data.nama); |
||||
const [selectedPJUType, setselectedPJUType] = useState(data.jenis); |
||||
const [pju_info, setPJUinfo] = useState(data.keterangan); |
||||
const [checkedStatus, setCheckedStatus] = useState(data.status); |
||||
const [install_date, setInstallDate] = useState(new Date(data.tanggal_installasi)); |
||||
const momentDate = Moment(install_date).format('YYYY-MM-DD') |
||||
const [attachmentImgError, setattachmentImgError] = useState(false); |
||||
const [pjuNameError, setPJUNameError] = useState(false); |
||||
const [PJUTypeError, setPJUTypeError] = useState(false); |
||||
const [PJUStatusError, setPJUStatusError] = useState(false); |
||||
const [PJUInfoError, setPJUInfoError] = useState(false); |
||||
const [long,setLong] = useState(); |
||||
const [lat,setLat] = useState(); |
||||
const [attach,setAttach] = useState([]); |
||||
const [load,setLoad] = useState(true); |
||||
const isFocused = useIsFocused(); |
||||
const [ModalAttachment, setModalAttachment] = useState(false); |
||||
const [userID,setUserID] = useState(); |
||||
|
||||
useEffect(()=> { |
||||
if (isFocused) { |
||||
setLong(data.long); |
||||
setLat(data.lat); |
||||
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(); |
||||
fetchData(); |
||||
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 fetchData = async () => { |
||||
try { |
||||
await RNFetchBlob.config({ |
||||
trusty : true |
||||
}).fetch('POST', `${PJU_API_URL}/getAttachment`,{ |
||||
"Content-Type": "application/json", |
||||
}, |
||||
JSON.stringify({ |
||||
id:data.id |
||||
}) |
||||
).then(async (resp) => { |
||||
const json = resp.json() |
||||
json?.forEach(asset => { |
||||
setImgUrl(oldArray => [...oldArray,asset.file]); |
||||
}); |
||||
}) |
||||
|
||||
} catch (error) { |
||||
console.error('Error fetching data:', error); |
||||
} |
||||
}; |
||||
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); |
||||
await RNFetchBlob.config({ |
||||
trusty : true |
||||
}).fetch('POST', `${PJU_API_URL}/addData`,{ |
||||
"Content-Type": "application/json", |
||||
}, |
||||
JSON.stringify({ |
||||
nama: pju_name, |
||||
jenis: selectedPJUType, |
||||
tanggal_installasi: momentDate, |
||||
status: checkedStatus, |
||||
keterangan: pju_info, |
||||
geom: `POINT(${data.long} ${data.lat})`, |
||||
created_by: userID, |
||||
created_at: localTime |
||||
}) |
||||
).then(async (resp) => { |
||||
const status = resp.respInfo.status |
||||
if (status == 201) { |
||||
insertAttachment(files) |
||||
Alert.alert("Success") |
||||
setAlertOnline(false); |
||||
navigation.navigate('Draft Penerangan Jalan Umum', { screen: 'Draft Penerangan Jalan Umum'}) |
||||
} |
||||
else { |
||||
Alert.alert("Internal Server Error") |
||||
} |
||||
}) |
||||
} catch (error) { |
||||
|
||||
} |
||||
} |
||||
const getMyObject = async () => { |
||||
try { |
||||
const jsonValue = await AsyncStorage.getItem('draft') |
||||
console.log(JSON.parse(jsonValue!)); |
||||
|
||||
// return jsonValue != null ? JSON.parse(jsonValue) : null
|
||||
} catch(e) { |
||||
// read error
|
||||
} |
||||
} |
||||
const removeValue = async () => { |
||||
try { |
||||
await AsyncStorage.removeItem('Test by mobile / Lampu 20 W / 2024-11-14 / Baik / draftJPU') |
||||
} catch(e) { |
||||
// remove error
|
||||
} |
||||
} |
||||
const getAllKeys = async () => { |
||||
// let keys = []
|
||||
try { |
||||
const keys = await AsyncStorage.getAllKeys() |
||||
console.log(keys); |
||||
|
||||
} catch(e) { |
||||
// read key error
|
||||
} |
||||
// example console.log result:
|
||||
// ['@MyApp_user', '@MyApp_key']
|
||||
} |
||||
const insertAttachment = (files: any) => { |
||||
try { |
||||
files.forEach(async function(file:any) { |
||||
const url = `${PJU_API_URL}/addAttachment`; |
||||
await RNFetchBlob.config({ |
||||
trusty : true |
||||
}).fetch('POST', url,{ |
||||
"Content-Type": "application/json", |
||||
}, |
||||
JSON.stringify({pju_id:data.id, file:file.file, mimetype:file.file_type, size:file.fileSize}) |
||||
).then(async (resp) => { |
||||
const status = resp.respInfo.status |
||||
} |
||||
) |
||||
}); |
||||
} catch (error) { |
||||
console.log(error); |
||||
} |
||||
// files.forEach(async function(file:any){
|
||||
// const url = `${PJU_API_URL}/addAttachment`;
|
||||
// let result = await fetch(url, {
|
||||
// method: "POST",
|
||||
// headers: {
|
||||
// "Content-Type": "application/json"
|
||||
// },
|
||||
// body: JSON.stringify({pju_id:data.id, file:file.file, mimetype:file.file_type, size:file.fileSize})
|
||||
// })
|
||||
// if (result.status == 201) {
|
||||
// Alert.alert("Success")
|
||||
// setAlertOnline(false);
|
||||
// navigation.navigate('Property Survey', { screen: 'Property Survey'})
|
||||
// }
|
||||
// });
|
||||
} |
||||
const uploadFileOnHandler = async () => { |
||||
try { |
||||
const pickedFile = await DocumentPicker.pickSingle({ |
||||
type: [DocumentPicker.types.allFiles], |
||||
// allowMultiSelection:true
|
||||
}) |
||||
await RNFS.readFile(pickedFile.uri, 'base64').then(data => { |
||||
console.log('base64', data); |
||||
let your_bytes = btoa(data); |
||||
const newObj = { |
||||
file_type: pickedFile.type, |
||||
file: your_bytes |
||||
} |
||||
setFiles([...files,newObj]); |
||||
setFileDocument([...fileDocument,pickedFile]); |
||||
}); |
||||
} catch (error) { |
||||
console.error(error) |
||||
} |
||||
} |
||||
const deleteByIndex = (index:number) => { |
||||
setFileDocument(oldValues => { |
||||
return oldValues.filter((_: any, i: number) => i !== index) |
||||
}) |
||||
} |
||||
const [alertOnline, setAlertOnline] = useState(false); |
||||
const [alertOffline, setAlertOffline] = useState(false); |
||||
const showDialog = () => { |
||||
// if (imgUrl.length === 0) {
|
||||
// setattachmentImgError(true);
|
||||
// }
|
||||
// else{
|
||||
// setattachmentImgError(false);
|
||||
// }
|
||||
if (!pju_name) { |
||||
setPJUNameError(true); |
||||
} |
||||
else{ |
||||
setPJUNameError(false); |
||||
} |
||||
if (!selectedPJUType) { |
||||
setPJUTypeError(true); |
||||
} |
||||
else{ |
||||
setPJUTypeError(false); |
||||
} |
||||
if (!checkedStatus) { |
||||
setPJUStatusError(true); |
||||
} |
||||
else{ |
||||
setPJUStatusError(false); |
||||
} |
||||
if (!pju_info) { |
||||
setPJUInfoError(true); |
||||
} |
||||
else{ |
||||
setPJUInfoError(false); |
||||
} |
||||
if(!pju_name || !pju_info || !selectedPJUType || !checkedStatus) { |
||||
return false |
||||
} |
||||
if(connected){ |
||||
setAlertOnline(true); |
||||
} |
||||
else{ |
||||
setAlertOffline(true) |
||||
} |
||||
}; |
||||
const handleCancelAlertOnline = () => { |
||||
setAlertOnline(false); |
||||
}; |
||||
const handleCancelAlertOffline = () => { |
||||
setAlertOffline(false); |
||||
}; |
||||
const renderItem = ({item,index}:any) => { |
||||
return ( |
||||
<View key={index} style={{width:100,height:100,borderRadius:10,borderWidth:1,borderStyle:"dashed",flexDirection:'row'}}> |
||||
<Image style={{width: '100%',height: '100%',borderRadius:10}} |
||||
source={{uri: `data:image/jpeg;base64,${imgUrl[index]}`}} |
||||
/> |
||||
</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'}}> |
||||
{/* <Pressable onPress={()=>navigation.navigate('PJU Map Collect', { screen: 'PJU Map Collect'})} style={{alignItems:'center'}}> */} |
||||
<View style={{height:40,width:352,borderTopRightRadius:10,borderTopLeftRadius:10,borderWidth:1,borderColor:'#A6A6A6',backgroundColor:'#F9F9F9',justifyContent:'flex-start',flexDirection:'row',alignItems:'center',columnGap:5,alignSelf:'center'}}> |
||||
<Image |
||||
source={require('../../assets/icon/findmyloc.png')} |
||||
/> |
||||
<Text style={{fontSize:14,fontWeight:'semibold',color:'#434343'}}>{lat},</Text> |
||||
<Text style={{fontSize:14,fontWeight:'semibold',color:'#434343'}}>{long}</Text> |
||||
</View> |
||||
<MapView |
||||
style={{width:352,height:200,borderWidth:1,borderColor:'#A6A6A6',overflow:'hidden',alignSelf:'center'}} |
||||
mapStyle={styleURL} |
||||
rotateEnabled={false} |
||||
zoomEnabled={false} |
||||
attributionPosition={{bottom: 8, right: 8}} |
||||
scrollEnabled={false} |
||||
> |
||||
<PointAnnotation |
||||
children={<></>} |
||||
id={"pjuCoordinate"} |
||||
coordinate={[long, lat]} |
||||
/> |
||||
<Camera |
||||
centerCoordinate={[long, lat]} |
||||
allowUpdates={true} |
||||
zoomLevel={15} |
||||
minZoomLevel={5} |
||||
maxZoomLevel={20} |
||||
/> |
||||
</MapView> |
||||
{/* </Pressable> */} |
||||
<TouchableOpacity style={{alignSelf:'center',backgroundColor:'#F9F9F9',width:352,height:50,borderBottomLeftRadius:10,borderBottomRightRadius:10,justifyContent:'center',borderWidth:1,borderColor:'#A6A6A6'}} onPress={()=>navigation.navigate('MapView', { screen: 'MapView',data: { |
||||
id:data.id, |
||||
nama:pju_name, |
||||
jenis:selectedPJUType, |
||||
tanggal_installasi:momentDate, |
||||
status:checkedStatus, |
||||
keterangan:pju_info, |
||||
long:long, |
||||
lat:lat |
||||
}})}> |
||||
<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}>Name</Text> |
||||
<TextInput |
||||
style={styles.input} |
||||
onChangeText={(text) => { |
||||
setPJUname(text) |
||||
}} |
||||
onChange={()=> { |
||||
setPJUNameError(false) |
||||
}} |
||||
defaultValue={pju_name} |
||||
/> |
||||
{pjuNameError ? <Text style={styles.errorInput}>Name is Required!</Text>:null} |
||||
</View> |
||||
<View |
||||
style={{ |
||||
marginTop: 15 |
||||
}} |
||||
/> |
||||
<View style={{alignSelf:'center'}}> |
||||
{/* <Text style={styles.label}>PJU Type <Text style={{color:'red',fontWeight:'bold'}}>*</Text></Text> */} |
||||
<Text style={styles.label}>PJU Type</Text> |
||||
<SelectList |
||||
search={false} |
||||
placeholder="Select PJU Type" |
||||
boxStyles={{borderRadius:10,borderWidth:1,borderColor:'#A6A6A6',width:352,height:45}} |
||||
inputStyles={{color:'#6B5E5E'}} |
||||
dropdownTextStyles={{color:'#6B5E5E'}} |
||||
data={PJU_Type} |
||||
setSelected={setselectedPJUType} |
||||
onSelect={()=> ( |
||||
[setPJUTypeError(false)] |
||||
)} |
||||
defaultOption={{key:selectedPJUType, value:selectedPJUType}} |
||||
/> |
||||
</View> |
||||
{PJUTypeError ? <Text style={styles.errorInput}>PJU Type is Required!</Text>:null} |
||||
<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}>Status</Text> |
||||
<View style={{flexDirection:'row',alignItems:'center'}}> |
||||
<RadioButton |
||||
color='#434343' |
||||
value="Baik" |
||||
status={ checkedStatus === 'Baik' ? 'checked' : 'unchecked' } |
||||
onPress={() => {setCheckedStatus('Baik'); setPJUStatusError(false)}} |
||||
/> |
||||
<Text style={{color:"#434343",fontWeight:'semibold',fontSize:16}}>Baik</Text> |
||||
</View> |
||||
<View style={{flexDirection:'row',alignItems:'center'}}> |
||||
<RadioButton |
||||
color='#434343' |
||||
value="Rusak" |
||||
status={ checkedStatus === 'Rusak' ? 'checked' : 'unchecked' } |
||||
onPress={() => {setCheckedStatus('Rusak'); setPJUStatusError(false); }} |
||||
/> |
||||
<Text style={{color:"#434343",fontWeight:'semibold',fontSize:16}}>Rusak</Text> |
||||
</View> |
||||
{PJUStatusError ? <Text style={styles.errorInput}>Status is Required!</Text>:null} |
||||
</View> |
||||
<View |
||||
style={{ |
||||
marginTop: 60 |
||||
}} |
||||
/> |
||||
<View style={{alignSelf:'center'}}> |
||||
<Text style={styles.label}>Information</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) => { |
||||
setPJUinfo(text) |
||||
}} |
||||
onChange={()=> { |
||||
setPJUInfoError(false) |
||||
}} |
||||
defaultValue={pju_info} |
||||
/> |
||||
{PJUInfoError ? <Text style={styles.errorInput}>Information is Required!</Text>:null} |
||||
</View> |
||||
<View |
||||
style={{ |
||||
marginTop: 15 |
||||
}} |
||||
/> |
||||
<View style={{alignSelf:'center'}}> |
||||
<Text style={styles.label}>Installation 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 foto / gambar</Text> |
||||
{
|
||||
imgUrl.length === 0 ? |
||||
<Pressable onPress={()=>setModalAttachment(true)}> |
||||
<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/camorlib.png')} |
||||
/> |
||||
<Text style={{fontStyle:'italic',color:'#434343'}}>Klik untuk menambahkan foto / gambar</Text> |
||||
</View> |
||||
</Pressable> |
||||
: |
||||
<FlatList |
||||
horizontal={false} |
||||
showsHorizontalScrollIndicator={false} |
||||
scrollEnabled={false} |
||||
ListFooterComponent={()=> |
||||
<Pressable onPress={()=>setModalAttachment(true)}> |
||||
<View style={{width:100,height:100,borderRadius:10,borderWidth:1,borderStyle:"dashed",flexDirection:'row',alignItems:'center',justifyContent:'center'}}> |
||||
<Image |
||||
source={require('../../assets/icon/camorlib.png')} |
||||
/> |
||||
</View> |
||||
</Pressable> |
||||
} |
||||
contentContainerStyle={{flexDirection:'row',flexWrap:'wrap',columnGap:25,rowGap:10}} |
||||
data={imgUrl} |
||||
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> |
||||
{/* Online Mode Alert */} |
||||
<AwesomeAlert |
||||
show={alertOnline} |
||||
showProgress={false} |
||||
title="Collecting Data" |
||||
message="Are you sure for Add New PJU data?" |
||||
closeOnTouchOutside={false} |
||||
closeOnHardwareBackPress={false} |
||||
showCancelButton={true} |
||||
showConfirmButton={true} |
||||
cancelText="No, cancel" |
||||
confirmText="Yes, Add it" |
||||
confirmButtonColor="#137997" |
||||
onCancelPressed={() => { |
||||
handleCancelAlertOnline(); |
||||
}} |
||||
onConfirmPressed={() => { |
||||
collectDataOnline(); |
||||
}} |
||||
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 need connection for editing data." |
||||
closeOnTouchOutside={false} |
||||
closeOnHardwareBackPress={false} |
||||
showConfirmButton={true} |
||||
confirmText="Ok" |
||||
confirmButtonColor="#DD6B55" |
||||
onConfirmPressed={() => { |
||||
setAlertOffline(false); |
||||
}} |
||||
overlayStyle={{width:'100%'}} |
||||
contentContainerStyle={{width:'70%',borderRadius:10}} |
||||
titleStyle={{fontSize:20}} |
||||
messageStyle={{fontSize:16}} |
||||
/> |
||||
<Modal isVisible={ModalAttachment} animationIn={'fadeInUp'} animationOut={'fadeOutDown'} backdropOpacity={0} onBackdropPress={()=>setModalAttachment(false)} style={{top:'18%',alignSelf:'center'}}> |
||||
<View key={"modal container"} style={{width:330,height:220,backgroundColor:'#F9F9F9',borderRadius:25,borderWidth:1,borderColor:'#A6A6A6'}}> |
||||
<View style={{flexDirection:'row',alignItems:'center',justifyContent:'space-between',paddingLeft:30,paddingTop:20,paddingRight:10}}> |
||||
<Text style={{fontSize:20,fontWeight:'semibold',color: '#434343',}}> |
||||
Select Mode |
||||
</Text> |
||||
<Pressable onPress={()=>setModalAttachment(false)} style={{alignSelf:'flex-end',padding:10}}> |
||||
<Image style={{tintColor:'#434343'}} |
||||
source={require('../../assets/icon/x.png')} |
||||
/> |
||||
</Pressable> |
||||
</View> |
||||
<View style={{padding:30}}> |
||||
<TouchableOpacity onPress={()=>{openCameraLib(),setModalAttachment(false)}} style={{height:50,backgroundColor:'#FFFFFF',alignItems:'center',justifyContent:'center',borderTopLeftRadius:10,borderTopRightRadius:10,borderWidth:1,borderColor:'#A6A6A6'}}> |
||||
<Text style={{fontSize:20,fontWeight:'light',color:'#434343'}}>Take photo</Text> |
||||
</TouchableOpacity> |
||||
<TouchableOpacity onPress={()=>{openLib(),setModalAttachment(false)}} style={{height:50,backgroundColor:'#FFFFFF',alignItems:'center',justifyContent:'center',borderBottomLeftRadius:10,borderBottomRightRadius:10,borderWidth:1,borderColor:'#A6A6A6'}}> |
||||
<Text style={{fontSize:20,fontWeight:'light',color:'#434343'}}>Choose photo</Text> |
||||
</TouchableOpacity> |
||||
</View> |
||||
</View> |
||||
</Modal> |
||||
</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: 330, |
||||
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', |
||||
}, |
||||
}); |
||||
|
||||
export default ResendPJU; |
||||
Loading…
Reference in new issue