Irul24
1 year ago
36 changed files with 10865 additions and 1689 deletions
@ -0,0 +1,2 @@
@@ -0,0 +1,2 @@
|
||||
BUNDLE_PATH: "vendor/bundle" |
||||
BUNDLE_FORCE_RUBY_PLATFORM: 1 |
||||
@ -0,0 +1,4 @@
@@ -0,0 +1,4 @@
|
||||
module.exports = { |
||||
root: true, |
||||
extends: '@react-native', |
||||
}; |
||||
@ -0,0 +1,72 @@
@@ -0,0 +1,72 @@
|
||||
# OSX |
||||
# |
||||
.DS_Store |
||||
|
||||
# Xcode |
||||
# |
||||
build/ |
||||
*.pbxuser |
||||
!default.pbxuser |
||||
*.mode1v3 |
||||
!default.mode1v3 |
||||
*.mode2v3 |
||||
!default.mode2v3 |
||||
*.perspectivev3 |
||||
!default.perspectivev3 |
||||
xcuserdata |
||||
*.xccheckout |
||||
*.moved-aside |
||||
DerivedData |
||||
*.hmap |
||||
*.ipa |
||||
*.xcuserstate |
||||
**/.xcode.env.local |
||||
|
||||
# Android/IntelliJ |
||||
# |
||||
build/ |
||||
.idea |
||||
.gradle |
||||
local.properties |
||||
*.iml |
||||
*.hprof |
||||
.cxx/ |
||||
*.keystore |
||||
!debug.keystore |
||||
|
||||
# node.js |
||||
# |
||||
node_modules |
||||
|
||||
# fastlane |
||||
# |
||||
# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the |
||||
# screenshots whenever they are needed. |
||||
# For more information about the recommended setup visit: |
||||
# https://docs.fastlane.tools/best-practices/source-control/ |
||||
|
||||
**/fastlane/report.xml |
||||
**/fastlane/Preview.html |
||||
**/fastlane/screenshots |
||||
**/fastlane/test_output |
||||
|
||||
# Bundle artifact |
||||
*.jsbundle |
||||
|
||||
# Ruby / CocoaPods |
||||
**/Pods/ |
||||
/vendor/bundle/ |
||||
|
||||
# Temporary files created by Metro to check the health of the file watcher |
||||
.metro-health-check* |
||||
|
||||
# testing |
||||
/coverage |
||||
|
||||
# Yarn |
||||
.yarn/* |
||||
!.yarn/patches |
||||
!.yarn/plugins |
||||
!.yarn/releases |
||||
!.yarn/sdks |
||||
!.yarn/versions |
||||
@ -0,0 +1,7 @@
@@ -0,0 +1,7 @@
|
||||
module.exports = { |
||||
arrowParens: 'avoid', |
||||
bracketSameLine: true, |
||||
bracketSpacing: false, |
||||
singleQuote: true, |
||||
trailingComma: 'all', |
||||
}; |
||||
|
After Width: | Height: | Size: 315 B |
|
After Width: | Height: | Size: 981 B |
|
After Width: | Height: | Size: 808 B |
|
After Width: | Height: | Size: 595 B |
|
After Width: | Height: | Size: 464 B |
|
After Width: | Height: | Size: 427 B |
|
Before Width: | Height: | Size: 472 KiB After Width: | Height: | Size: 472 KiB |
@ -0,0 +1,141 @@
@@ -0,0 +1,141 @@
|
||||
import React from "react"; |
||||
import { |
||||
TextInput, |
||||
StatusBar, |
||||
StyleSheet, |
||||
Text, |
||||
View, |
||||
Image, |
||||
ScrollView, |
||||
RefreshControl, |
||||
Pressable, |
||||
TouchableOpacity, |
||||
} from 'react-native'; |
||||
import { useEffect, useState } from 'react'; |
||||
|
||||
import AsyncStorage from '@react-native-async-storage/async-storage'; |
||||
import {useIsFocused} from '@react-navigation/native'; |
||||
import AwesomeAlert from "react-native-awesome-alerts"; |
||||
import LinearGradient from 'react-native-linear-gradient'; |
||||
import { Button } from "react-native-paper"; |
||||
|
||||
export default function ChangePass() { |
||||
const [showCurrPass,setShowCurrPass] = useState(true); |
||||
const [showNewPass,setShowNewPass] = useState(true); |
||||
const [showRepeatPass,setShowRepeatPass] = useState(true); |
||||
return( |
||||
<View style={{flex:1}}> |
||||
<StatusBar backgroundColor="#34A6F8" barStyle={'light-content'} /> |
||||
<View key={"mainBackground"} style={{backgroundColor:'#34A6F8',width:'100%',height:'100%'}} /> |
||||
<View key={"background"} style={{backgroundColor:'#FFFFFF',width:'100%',height:'100%',position:'absolute',borderTopRightRadius:50,borderTopLeftRadius:35,marginTop:10}}> |
||||
<View key={"detail section"} style={{paddingLeft: 20,paddingRight:20,marginTop:'10%',height:'80%'}}> |
||||
|
||||
|
||||
|
||||
<View key={"currentPass"} style={{marginBottom:20}}> |
||||
<Text style={{color:'#3E434E',fontWeight:600,fontSize:14,marginBottom:10}}>Current Password :</Text> |
||||
|
||||
<View style={{flexDirection:'row',width:'100%'}}> |
||||
<TextInput inlineImageLeft="lock" inlineImagePadding={20}
|
||||
style={{ |
||||
color:'black', |
||||
height : 50, |
||||
paddingHorizontal : 20, |
||||
borderWidth: 4, |
||||
borderColor: "#d7d7d7", |
||||
borderRadius: 7, |
||||
width:'100%' |
||||
}} |
||||
placeholderTextColor={'grey'}
|
||||
placeholder='Password'
|
||||
secureTextEntry={showCurrPass} |
||||
autoCorrect={false}
|
||||
autoCapitalize='none' |
||||
/> |
||||
<Pressable style={{position:'absolute',alignSelf:'center',left:'90%'}} onTouchStart={()=>setShowCurrPass(false)} onTouchEnd={()=>setShowCurrPass(true)}> |
||||
<Image |
||||
source={require('../../assets/icon/view.png')} |
||||
style={{tintColor:'#C4C4C4'}} |
||||
/> |
||||
</Pressable> |
||||
</View> |
||||
</View> |
||||
<View key={"newPass"} style={{marginBottom:20}}> |
||||
<Text style={{color:'#3E434E',fontWeight:600,fontSize:14,marginBottom:10}}>New Password :</Text> |
||||
|
||||
<View style={{flexDirection:'row',width:'100%'}}> |
||||
<TextInput inlineImageLeft="lock" inlineImagePadding={20}
|
||||
style={{ |
||||
color:'black', |
||||
height : 50, |
||||
paddingHorizontal : 20, |
||||
borderWidth: 4, |
||||
borderColor: "#d7d7d7", |
||||
borderRadius: 7, |
||||
width:'100%' |
||||
}} |
||||
placeholderTextColor={'grey'}
|
||||
placeholder='Password'
|
||||
secureTextEntry={showNewPass} |
||||
autoCorrect={false}
|
||||
autoCapitalize='none' |
||||
/> |
||||
<Pressable style={{position:'absolute',alignSelf:'center',left:'90%'}} onTouchStart={()=>setShowNewPass(false)} onTouchEnd={()=>setShowNewPass(true)}> |
||||
<Image |
||||
source={require('../../assets/icon/view.png')} |
||||
style={{tintColor:'#C4C4C4'}} |
||||
/> |
||||
</Pressable> |
||||
</View> |
||||
</View> |
||||
<View key={"repeatPass"} style={{marginBottom:20}}> |
||||
<Text style={{color:'#3E434E',fontWeight:600,fontSize:14,marginBottom:10}}>Repeat Password :</Text> |
||||
|
||||
<View style={{flexDirection:'row',width:'100%'}}> |
||||
<TextInput inlineImageLeft="lock" inlineImagePadding={20}
|
||||
style={{ |
||||
color:'black', |
||||
height : 50, |
||||
paddingHorizontal : 20, |
||||
borderWidth: 4, |
||||
borderColor: "#d7d7d7", |
||||
borderRadius: 7, |
||||
width:'100%' |
||||
}} |
||||
placeholderTextColor={'grey'}
|
||||
placeholder='Password'
|
||||
secureTextEntry={showRepeatPass} |
||||
autoCorrect={false}
|
||||
autoCapitalize='none' |
||||
/> |
||||
<Pressable style={{position:'absolute',alignSelf:'center',left:'90%'}} onTouchStart={()=>setShowRepeatPass(false)} onTouchEnd={()=>setShowRepeatPass(true)}> |
||||
<Image |
||||
source={require('../../assets/icon/view.png')} |
||||
style={{tintColor:'#C4C4C4'}} |
||||
/> |
||||
</Pressable> |
||||
</View> |
||||
</View> |
||||
|
||||
|
||||
|
||||
<View key={"Button"}> |
||||
<TouchableOpacity> |
||||
<View style={{ |
||||
paddingHorizontal : 20, |
||||
backgroundColor:'#0386D0', |
||||
// borderWidth : 1.5,
|
||||
borderRadius: 7, |
||||
height : 50, |
||||
alignItems:'center', |
||||
justifyContent:'center' |
||||
}}> |
||||
<Text style={{color:'#F5F5F5',fontSize:16,fontWeight:600}}>Save</Text> |
||||
</View> |
||||
</TouchableOpacity> |
||||
</View> |
||||
</View> |
||||
</View> |
||||
</View> |
||||
) |
||||
} |
||||
@ -0,0 +1,511 @@
@@ -0,0 +1,511 @@
|
||||
import { Alert, Animated, Keyboard, RefreshControl } from 'react-native'; |
||||
import { |
||||
TextInput, |
||||
Button, |
||||
PermissionsAndroid, |
||||
StatusBar, |
||||
StyleSheet, |
||||
Text, |
||||
View, |
||||
Image, |
||||
TouchableOpacity, |
||||
ScrollView, |
||||
FlatList, |
||||
Dimensions |
||||
} from 'react-native'; |
||||
|
||||
import {useNavigation,NavigationContainer,useIsFocused} from '@react-navigation/native'; |
||||
import {createNativeStackNavigator} from '@react-navigation/native-stack'; |
||||
|
||||
import AsyncStorage from '@react-native-async-storage/async-storage'; |
||||
import { useCallback, useEffect, useState } from 'react'; |
||||
import { width } from '@fortawesome/free-solid-svg-icons/faMugSaucer'; |
||||
import { SelectList } from 'react-native-dropdown-select-list'; |
||||
import { PDAM_API_URL, PERMIT_API_URL, PJU_API_URL } from '../../urlConfig'; |
||||
import AwesomeAlert from 'react-native-awesome-alerts'; |
||||
import NetInfo from "@react-native-community/netinfo"; |
||||
import Moment from 'moment'; |
||||
import RNFetchBlob from 'rn-fetch-blob'; |
||||
import { MenuProvider } from 'react-native-popup-menu'; |
||||
import { |
||||
Menu, |
||||
MenuOptions, |
||||
MenuOption, |
||||
MenuTrigger, |
||||
} from 'react-native-popup-menu'; |
||||
import React from 'react'; |
||||
type sendListDataProps = {route: any,navigation: any}; |
||||
function DraftPDAM({route,navigation}: sendListDataProps) { |
||||
const [selectedSurveyType, setselectedSurveyType] = useState(""); |
||||
const [refreshing, setRefreshing] = useState(false); |
||||
const onRefresh = useCallback(() => { |
||||
setLocalStorage([]) |
||||
getDataPDAM() |
||||
setRefreshing(true); |
||||
setTimeout(() => { |
||||
setRefreshing(false); |
||||
}, 2000); |
||||
}, []); |
||||
const [localStorage, setLocalStorage] = useState([]); |
||||
const [filterData, setFilterData] = useState([]); |
||||
const [surveyType, setSurveyType] = useState(""); |
||||
const [alertOffline, setAlertOffline] = useState(false); |
||||
const [connected, setConnected] = useState(true) |
||||
const storeData = async (value:any) => { |
||||
// console.log("key",value.case_name)
|
||||
|
||||
try { |
||||
const jsonValue = JSON.stringify(value); |
||||
await AsyncStorage.setItem(String(value.case_id)+" / "+String(value.case_name)+" / "+String(value.case_category)+" / "+"3PA-01"+" / "+String(value.case_risk),jsonValue); |
||||
} catch (e) { |
||||
// saving error
|
||||
} |
||||
}; |
||||
const multiSet = async () => { |
||||
const firstPair = [1, "value_1"] |
||||
const secondPair = [2, "value_2"] |
||||
try { |
||||
const objCase1 = JSON.stringify({id:1,case_name:"test1"}) |
||||
const objCase2 = JSON.stringify({id:2,case_name:"test2"}) |
||||
await AsyncStorage.multiSet([["case_1",objCase1],["case_2",objCase2]]) |
||||
} catch(e) { |
||||
//save error
|
||||
} |
||||
|
||||
// console.log("Done.")
|
||||
}; |
||||
const deleteById = (name:string) => { |
||||
setLocalStorage(oldValues => { |
||||
return oldValues.filter((local_data:any) => local_data.pipe_name !== name) |
||||
}) |
||||
}; |
||||
const removeValue = async (key:string) => { |
||||
try { |
||||
// console.log("keyDelete",key);
|
||||
await AsyncStorage.removeItem(key) |
||||
// await getCount();
|
||||
} catch(e) { |
||||
} |
||||
}; |
||||
const selectSurveyType = () => { |
||||
// console.log(selectedSurveyType);
|
||||
if(selectedSurveyType==='PJU'){ |
||||
getDataPJU() |
||||
} |
||||
if(selectedSurveyType==='PDAM'){ |
||||
getDataPDAM() |
||||
} |
||||
if(selectedSurveyType==='PERMIT'){ |
||||
getDataPermit() |
||||
} |
||||
}; |
||||
const getDataPJU = async () => { |
||||
setLocalStorage([]) |
||||
try { |
||||
const jsonValue = await AsyncStorage.getAllKeys() |
||||
// console.log("All Key",jsonValue)
|
||||
if(jsonValue.length != 0) { |
||||
jsonValue.map((item) => { |
||||
if(item != "USER_DATA" && item != "my-jwt"){ |
||||
let splited = item.split(" / "); |
||||
const objectItem = { |
||||
pju_name:splited[0], |
||||
pju_type:splited[1], |
||||
installation_date:splited[2], |
||||
status:splited[3], |
||||
keterangan:splited[4], |
||||
long:splited[5], |
||||
lat:splited[6] |
||||
} |
||||
// console.log(objectItem);
|
||||
|
||||
if(splited[7] === 'draftPJU'){ |
||||
setLocalStorage(oldArray => [...oldArray,objectItem]) |
||||
} |
||||
} |
||||
}) |
||||
} |
||||
} catch (e) { |
||||
// error reading value
|
||||
} |
||||
}; |
||||
const getDataPDAM = async () => { |
||||
setLocalStorage([]) |
||||
try { |
||||
const jsonValue = await AsyncStorage.getAllKeys() |
||||
// console.log("All Key",jsonValue.length)
|
||||
if(jsonValue.length != 0) { |
||||
jsonValue.map((item) => { |
||||
if(item != "USER_DATA" && item != "my-jwt"){ |
||||
let splited = item.split(" / "); |
||||
if(splited.length === 7){ |
||||
const objectItem = { |
||||
pipe_name:splited[0], |
||||
pipe_type:splited[1], |
||||
installation_date:splited[2], |
||||
status:splited[3], |
||||
keterangan:splited[4], |
||||
geom:splited[5].split(",") |
||||
} |
||||
// console.log(objectItem);
|
||||
|
||||
if(splited[6] === 'draftPDAM'){ |
||||
setLocalStorage(oldArray => [...oldArray,objectItem]) |
||||
} |
||||
} |
||||
|
||||
} |
||||
}) |
||||
} |
||||
} catch (error) { |
||||
|
||||
} |
||||
}; |
||||
const getDataPermit = async () => { |
||||
setLocalStorage([]) |
||||
try { |
||||
const jsonValue = await AsyncStorage.getAllKeys() |
||||
console.log("All Key",jsonValue) |
||||
if(jsonValue.length != 0) { |
||||
jsonValue.map((item) => { |
||||
if(item != "USER_DATA" && item != "my-jwt"){ |
||||
let splited = item.split(" / "); |
||||
console.log(splited.length); |
||||
|
||||
if(splited.length === 5){ |
||||
const objectItem = { |
||||
company_name:splited[0], |
||||
permit_status:splited[1], |
||||
location:splited[2], |
||||
geom:splited[3].split(",") |
||||
} |
||||
// console.log(objectItem);
|
||||
|
||||
if(splited[4] === 'draftPermit'){ |
||||
setLocalStorage(oldArray => [...oldArray,objectItem]) |
||||
} |
||||
} |
||||
|
||||
} |
||||
}) |
||||
} |
||||
} catch (error) { |
||||
|
||||
} |
||||
}; |
||||
const isFocused = useIsFocused(); |
||||
useEffect(() => { |
||||
if(isFocused){ |
||||
getDataPDAM(); |
||||
const unsubscribe = NetInfo.addEventListener((state) => { |
||||
setConnected(state.isConnected!) |
||||
}); |
||||
return () => { |
||||
unsubscribe(); |
||||
}; |
||||
}; |
||||
},[isFocused]) |
||||
const [draftData, setDraftData] = useState(0); |
||||
navigation.addListener('beforeRemove', (e:any)=> { |
||||
}); |
||||
const [stringFilter,setStingFilter] = useState('') |
||||
const handleSearch = (text:string) => { |
||||
// console.log(text);
|
||||
|
||||
const formattedQuery = text.toLowerCase(); |
||||
const filteredData = localStorage.filter(data => |
||||
data.case_name.toLowerCase().includes(formattedQuery) |
||||
) |
||||
setFilterData(filteredData) |
||||
|
||||
}; |
||||
const reSend = async (data:any) => { |
||||
if(connected){ |
||||
if(selectedSurveyType==="PJU"){ |
||||
try { |
||||
const result = { |
||||
status: 0, |
||||
body: {}, |
||||
} |
||||
await RNFetchBlob.config({ |
||||
trusty : true |
||||
}).fetch('POST', `${PJU_API_URL}/addData`,{ |
||||
"Accept": 'application/json', |
||||
"Content-Type": "application/json", |
||||
}, |
||||
JSON.stringify({ |
||||
nama: data.nama, |
||||
jenis: data.jenis, |
||||
tanggal_installasi: data.date, |
||||
status: data.status, |
||||
keterangan: data.keterangan, |
||||
geom: `POINT(${data.long} ${data.lat})` |
||||
}) |
||||
).then(async (resp) => { |
||||
const status = resp.respInfo.status |
||||
if (status == 201) { |
||||
deleteById(data.nama); |
||||
removeValue(data.nama+" / "+data.jenis+" / "+data.date+" / "+data.status+" / "+data.keterangan+" / "+data.long+" / "+data.lat+" / draftPJU"); |
||||
} |
||||
else { |
||||
Alert.alert("Internal Server Error") |
||||
} |
||||
}) |
||||
} catch (error) { |
||||
Alert.alert("Internal Server Error") |
||||
} |
||||
} |
||||
if(selectedSurveyType==="PDAM"){ |
||||
try { |
||||
const obj = { |
||||
nama: data.nama, |
||||
jenis: data.jenis, |
||||
tanggal_installasi: data.date, |
||||
status: data.status, |
||||
keterangan: data.keterangan, |
||||
geom: `MULTILINESTRING((${data.geom}))` |
||||
}; |
||||
await RNFetchBlob.config({ |
||||
trusty : true |
||||
}).fetch('POST', `${PDAM_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) { |
||||
deleteById(data.nama); |
||||
removeValue(data.nama+" / "+data.jenis+" / "+data.date+" / "+data.status+" / "+data.keterangan+" / "+data.geom+" / draftPDAM"); |
||||
} |
||||
else { |
||||
Alert.alert("Internal Server Error") |
||||
} |
||||
}) |
||||
} catch (error) { |
||||
Alert.alert("Internal Server Error"); |
||||
} |
||||
|
||||
} |
||||
if(selectedSurveyType==="PERMIT"){ |
||||
try { |
||||
const obj = { |
||||
company_name: data.company_name, |
||||
location: data.location, |
||||
permit_status: data.permit_status, |
||||
geom: `MULTIPOLYGON (((${data.geom},${String(data.geom).split(",")[0]})))` |
||||
} |
||||
await RNFetchBlob.config({ |
||||
trusty : true |
||||
}).fetch('POST', `${PERMIT_API_URL}/addData`,{ |
||||
"Content-Type": "application/json", |
||||
}, |
||||
JSON.stringify(obj) |
||||
).then(async(resp) => { |
||||
const json = await resp.json(); |
||||
const status = resp.respInfo.status; |
||||
if (status == 201) { |
||||
deleteById(data.company_name); |
||||
removeValue(data.company_name+" / "+data.permit_status+" / "+data.location+" / "+data.geom+" / draftPermit"); |
||||
} |
||||
else { |
||||
Alert.alert("Internal Server Error") |
||||
} |
||||
})
|
||||
} catch (error) { |
||||
Alert.alert("Internal Server Error") |
||||
} |
||||
|
||||
} |
||||
} |
||||
else{ |
||||
setAlertOffline(true) |
||||
} |
||||
}; |
||||
const optionsStyles = { |
||||
optionsContainer: { |
||||
alignItems: 'flex-start', |
||||
justifyContent: 'center', |
||||
width:100, |
||||
marginVertical:-10, |
||||
marginLeft:-10, |
||||
backgroundColor: '#FFFFFF', |
||||
borderRadius: 5, |
||||
shadowColor: '#00000040', |
||||
shadowOffset: { |
||||
width: 0, |
||||
height: 2, |
||||
}, |
||||
borderColor:'#6B5E5E4D', |
||||
borderWidth:1, |
||||
shadowOpacity: 0.2, |
||||
shadowRadius: 6, |
||||
elevation: 5, |
||||
}, |
||||
optionText: { |
||||
color: 'brown', |
||||
}, |
||||
}; |
||||
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,marginTop:10}}> |
||||
<View key={"Filter"} style={{paddingLeft:30,paddingTop:30,paddingRight:30,marginTop:10}}> |
||||
<TextInput |
||||
style={{ |
||||
height: 40, |
||||
padding: 10, |
||||
borderRadius: 50, |
||||
color: 'black', |
||||
backgroundColor:'#e6e3e3' |
||||
}} |
||||
inlineImageLeft="search" |
||||
inlineImagePadding={20} |
||||
placeholderTextColor={'#6B5E5E'} |
||||
placeholder='Search' |
||||
onChangeText={queryText => {handleSearch(queryText),setStingFilter(queryText)}} |
||||
defaultValue={stringFilter} |
||||
/> |
||||
</View> |
||||
<ScrollView style={{padding: 30}} |
||||
refreshControl={ |
||||
<RefreshControl refreshing={refreshing} onRefresh={onRefresh} /> |
||||
}> |
||||
{
|
||||
localStorage.length != 0 ?
|
||||
localStorage.map((item:any,index:number) => ( |
||||
<View key={index}> |
||||
<View style={{flexDirection:'row'}}> |
||||
<View style={{ flexDirection:'column',paddingLeft:0,width:'35%'}}> |
||||
<Text style={{fontSize:14,color:'#000000',fontWeight:'600',padding:5}}>Nama Pipa</Text> |
||||
<Text style={{fontSize:14,color:'#000000',fontWeight:'600',padding:5}}>Jenis</Text> |
||||
<Text style={{fontSize:14,color:'#000000',fontWeight:'600',padding:5}}>Tanggal Installasi</Text> |
||||
<Text style={{fontSize:14,color:'#000000',fontWeight:'600',padding:5}}>Status</Text> |
||||
</View> |
||||
<View style={{ flexDirection:'column',paddingLeft:0,width:'65%'}}> |
||||
<Text style={{fontSize:14,fontWeight:'400',color:'#000000',padding:5}}>: {item.pipe_name}</Text> |
||||
<Text style={{fontSize:14,fontWeight:'400',color:'#000000',padding:5}}>: {item.pipe_type}</Text> |
||||
<Text style={{fontSize:14,fontWeight:'400',color:'#000000',padding:5}}>: {item.installation_date}</Text> |
||||
<Text style={{fontSize:14,fontWeight:'400',color:'#000000',padding:5}}>: {item.status}</Text> |
||||
</View> |
||||
<View style={{ marginLeft:'55%',marginTop:0,width:150,height:100,position:'absolute'}}> |
||||
<MenuProvider skipInstanceCheck={true} style={{flexDirection:'column'}}> |
||||
<Menu> |
||||
<MenuTrigger> |
||||
<Image |
||||
style={{justifyContent:'center',alignSelf:'flex-end'}} |
||||
source={require('../../assets/icon/Actions.png')} |
||||
resizeMode='cover' |
||||
/> |
||||
</MenuTrigger> |
||||
<MenuOptions customStyles={optionsStyles}> |
||||
<MenuOption |
||||
onSelect={()=>{ |
||||
navigation.navigate('Edit',{ screen: 'Edit',data: { |
||||
id:item.id, |
||||
nama:item.pju_name, |
||||
jenis:item.pju_type, |
||||
tanggal_installasi:item.installation_date, |
||||
status:item.status, |
||||
keterangan:item.keterangan, |
||||
long:item.long, |
||||
lat:item.lat |
||||
}}); |
||||
}} |
||||
children={ |
||||
<View style={{flexDirection:'row',alignItems:'center',justifyContent:'center'}}> |
||||
<Image source={require('../../assets/icon/edit.png')} /> |
||||
<Text style={{marginLeft:10,color:'#6B5E5EB2',fontSize:14,fontWeight:400}}>Edit</Text> |
||||
</View>}
|
||||
/> |
||||
<View style={{marginVertical: 5, width:85, |
||||
marginHorizontal: 2, |
||||
borderBottomWidth: 1, |
||||
borderColor: '#ccc'}} |
||||
/> |
||||
<MenuOption |
||||
onSelect={()=> { |
||||
deleteById(item.pipe_name); |
||||
removeValue(item.pipe_name+" / "+item.pipe_type+" / "+item.installation_date+" / "+item.status+" / "+item.keterangan+" / "+item.geom+" / draftPDAM"); |
||||
}} |
||||
children={ |
||||
<View style={{flexDirection:'row',alignItems:'center',justifyContent:'center'}}> |
||||
<Image source={require('../../assets/icon/dell.png')} /> |
||||
<Text style={{marginLeft:10,color:'#6B5E5EB2',fontSize:14,fontWeight:400}}>Delete</Text> |
||||
</View> |
||||
} |
||||
/> |
||||
</MenuOptions> |
||||
</Menu> |
||||
</MenuProvider> |
||||
</View> |
||||
</View> |
||||
<View |
||||
style={{ |
||||
marginTop: 10, |
||||
marginBottom: 10, |
||||
borderBottomColor: '#E2E2E2', |
||||
borderBottomWidth: 2, |
||||
}} |
||||
/> |
||||
</View>
|
||||
)) |
||||
: |
||||
<View style={{alignItems:'center',padding:20}}> |
||||
<Text style={{fontSize:16,color:'grey'}}>Data Kosong</Text> |
||||
</View> |
||||
} |
||||
</ScrollView> |
||||
</View> |
||||
<AwesomeAlert |
||||
show={alertOffline} |
||||
showProgress={false} |
||||
title="You are offline" |
||||
message="You need connection for Resend 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}} |
||||
/> |
||||
{/* <Button onPress={getDataAll} title='GetDataByKey'/> */} |
||||
</View> |
||||
); |
||||
} |
||||
|
||||
const styles = StyleSheet.create({ |
||||
container: { |
||||
flex: 1, |
||||
backgroundColor: '#ecf0f1', |
||||
padding: 10, |
||||
}, |
||||
mainContainer: { |
||||
flex: 1, |
||||
}, |
||||
title: { |
||||
alignItems: 'center', |
||||
justifyContent: 'center', |
||||
alignSelf: 'center', |
||||
fontWeight: 'bold', |
||||
fontSize: 22, |
||||
color: 'black', |
||||
marginBottom: 10 |
||||
}, |
||||
input: { |
||||
height: 40, |
||||
borderWidth: 1, |
||||
padding: 10, |
||||
borderRadius: 50, |
||||
color: 'black' |
||||
}, |
||||
}); |
||||
|
||||
export default DraftPDAM; |
||||
@ -0,0 +1,515 @@
@@ -0,0 +1,515 @@
|
||||
import { Alert, Animated, Keyboard, RefreshControl } from 'react-native'; |
||||
import { |
||||
TextInput, |
||||
Button, |
||||
PermissionsAndroid, |
||||
StatusBar, |
||||
StyleSheet, |
||||
Text, |
||||
View, |
||||
Image, |
||||
TouchableOpacity, |
||||
ScrollView, |
||||
FlatList, |
||||
Dimensions |
||||
} from 'react-native'; |
||||
|
||||
import {useNavigation,NavigationContainer,useIsFocused} from '@react-navigation/native'; |
||||
import {createNativeStackNavigator} from '@react-navigation/native-stack'; |
||||
|
||||
import AsyncStorage from '@react-native-async-storage/async-storage'; |
||||
import { useCallback, useEffect, useState } from 'react'; |
||||
import { width } from '@fortawesome/free-solid-svg-icons/faMugSaucer'; |
||||
import { SelectList } from 'react-native-dropdown-select-list'; |
||||
import { PDAM_API_URL, PERMIT_API_URL, PJU_API_URL } from '../../urlConfig'; |
||||
import AwesomeAlert from 'react-native-awesome-alerts'; |
||||
import NetInfo from "@react-native-community/netinfo"; |
||||
import Moment from 'moment'; |
||||
import RNFetchBlob from 'rn-fetch-blob'; |
||||
import { MenuProvider } from 'react-native-popup-menu'; |
||||
import { |
||||
Menu, |
||||
MenuOptions, |
||||
MenuOption, |
||||
MenuTrigger, |
||||
} from 'react-native-popup-menu'; |
||||
import React from 'react'; |
||||
type sendListDataProps = {route: any,navigation: any}; |
||||
function DraftPermit({route,navigation}: sendListDataProps) { |
||||
const survey_Type = [ |
||||
{key:'PJU', value:'PJU'}, |
||||
{key:'PERMIT', value:'PERMIT'}, |
||||
{key:'PDAM', value:'PDAM'}, |
||||
] |
||||
const [selectedSurveyType, setselectedSurveyType] = useState(""); |
||||
const [refreshing, setRefreshing] = useState(false); |
||||
const onRefresh = useCallback(() => { |
||||
setLocalStorage([]); |
||||
getDataPermit(); |
||||
setRefreshing(true); |
||||
setTimeout(() => { |
||||
setRefreshing(false); |
||||
}, 2000); |
||||
}, []); |
||||
const [localStorage, setLocalStorage] = useState([]); |
||||
const [filterData, setFilterData] = useState([]); |
||||
const [surveyType, setSurveyType] = useState(""); |
||||
const [alertOffline, setAlertOffline] = useState(false); |
||||
const [connected, setConnected] = useState(true) |
||||
const storeData = async (value:any) => { |
||||
// console.log("key",value.case_name)
|
||||
|
||||
try { |
||||
const jsonValue = JSON.stringify(value); |
||||
await AsyncStorage.setItem(String(value.case_id)+" / "+String(value.case_name)+" / "+String(value.case_category)+" / "+"3PA-01"+" / "+String(value.case_risk),jsonValue); |
||||
} catch (e) { |
||||
// saving error
|
||||
} |
||||
}; |
||||
const multiSet = async () => { |
||||
const firstPair = [1, "value_1"] |
||||
const secondPair = [2, "value_2"] |
||||
try { |
||||
const objCase1 = JSON.stringify({id:1,case_name:"test1"}) |
||||
const objCase2 = JSON.stringify({id:2,case_name:"test2"}) |
||||
await AsyncStorage.multiSet([["case_1",objCase1],["case_2",objCase2]]) |
||||
} catch(e) { |
||||
//save error
|
||||
} |
||||
|
||||
// console.log("Done.")
|
||||
}; |
||||
const deleteById = (name:string) => { |
||||
setLocalStorage(oldValues => { |
||||
return oldValues.filter((local_data:any) => local_data.company_name !== name) |
||||
}) |
||||
}; |
||||
const removeValue = async (key:string) => { |
||||
try { |
||||
// console.log("keyDelete",key);
|
||||
await AsyncStorage.removeItem(key) |
||||
// await getCount();
|
||||
} catch(e) { |
||||
} |
||||
}; |
||||
const selectSurveyType = () => { |
||||
// console.log(selectedSurveyType);
|
||||
if(selectedSurveyType==='PJU'){ |
||||
getDataPJU() |
||||
} |
||||
if(selectedSurveyType==='PDAM'){ |
||||
getDataPDAM() |
||||
} |
||||
if(selectedSurveyType==='PERMIT'){ |
||||
getDataPermit() |
||||
} |
||||
}; |
||||
const getDataPJU = async () => { |
||||
setLocalStorage([]) |
||||
try { |
||||
const jsonValue = await AsyncStorage.getAllKeys() |
||||
// console.log("All Key",jsonValue)
|
||||
if(jsonValue.length != 0) { |
||||
jsonValue.map((item) => { |
||||
if(item != "USER_DATA" && item != "my-jwt"){ |
||||
let splited = item.split(" / "); |
||||
const objectItem = { |
||||
pju_name:splited[0], |
||||
pju_type:splited[1], |
||||
installation_date:splited[2], |
||||
status:splited[3], |
||||
keterangan:splited[4], |
||||
long:splited[5], |
||||
lat:splited[6] |
||||
} |
||||
// console.log(objectItem);
|
||||
|
||||
if(splited[7] === 'draftPJU'){ |
||||
setLocalStorage(oldArray => [...oldArray,objectItem]) |
||||
} |
||||
} |
||||
}) |
||||
} |
||||
} catch (e) { |
||||
// error reading value
|
||||
} |
||||
}; |
||||
const getDataPDAM = async () => { |
||||
setLocalStorage([]) |
||||
try { |
||||
const jsonValue = await AsyncStorage.getAllKeys() |
||||
// console.log("All Key",jsonValue.length)
|
||||
if(jsonValue.length != 0) { |
||||
jsonValue.map((item) => { |
||||
if(item != "USER_DATA" && item != "my-jwt"){ |
||||
let splited = item.split(" / "); |
||||
if(splited.length === 7){ |
||||
const objectItem = { |
||||
pipe_name:splited[0], |
||||
pipe_type:splited[1], |
||||
installation_date:splited[2], |
||||
status:splited[3], |
||||
keterangan:splited[4], |
||||
geom:splited[5].split(",") |
||||
} |
||||
// console.log(objectItem);
|
||||
|
||||
if(splited[6] === 'draftPDAM'){ |
||||
setLocalStorage(oldArray => [...oldArray,objectItem]) |
||||
} |
||||
} |
||||
|
||||
} |
||||
}) |
||||
} |
||||
} catch (error) { |
||||
|
||||
} |
||||
}; |
||||
const getDataPermit = async () => { |
||||
setLocalStorage([]) |
||||
try { |
||||
const jsonValue = await AsyncStorage.getAllKeys() |
||||
console.log("All Key",jsonValue) |
||||
if(jsonValue.length != 0) { |
||||
jsonValue.map((item) => { |
||||
if(item != "USER_DATA" && item != "my-jwt"){ |
||||
let splited = item.split(" / "); |
||||
console.log(splited.length); |
||||
|
||||
if(splited.length === 5){ |
||||
const objectItem = { |
||||
company_name:splited[0], |
||||
permit_status:splited[1], |
||||
location:splited[2], |
||||
geom:splited[3].split(",") |
||||
} |
||||
// console.log(objectItem);
|
||||
|
||||
if(splited[4] === 'draftPermit'){ |
||||
setLocalStorage(oldArray => [...oldArray,objectItem]) |
||||
} |
||||
} |
||||
|
||||
} |
||||
}) |
||||
} |
||||
} catch (error) { |
||||
|
||||
} |
||||
}; |
||||
const isFocused = useIsFocused(); |
||||
useEffect(() => { |
||||
if(isFocused){ |
||||
getDataPermit(); |
||||
const unsubscribe = NetInfo.addEventListener((state) => { |
||||
setConnected(state.isConnected!) |
||||
}); |
||||
return () => { |
||||
unsubscribe(); |
||||
}; |
||||
}; |
||||
},[isFocused]) |
||||
const [draftData, setDraftData] = useState(0); |
||||
navigation.addListener('beforeRemove', (e:any)=> { |
||||
}); |
||||
const [stringFilter,setStingFilter] = useState('') |
||||
const handleSearch = (text:string) => { |
||||
// console.log(text);
|
||||
|
||||
const formattedQuery = text.toLowerCase(); |
||||
const filteredData = localStorage.filter(data => |
||||
data.case_name.toLowerCase().includes(formattedQuery) |
||||
) |
||||
setFilterData(filteredData) |
||||
|
||||
}; |
||||
const reSend = async (data:any) => { |
||||
if(connected){ |
||||
if(selectedSurveyType==="PJU"){ |
||||
try { |
||||
const result = { |
||||
status: 0, |
||||
body: {}, |
||||
} |
||||
await RNFetchBlob.config({ |
||||
trusty : true |
||||
}).fetch('POST', `${PJU_API_URL}/addData`,{ |
||||
"Accept": 'application/json', |
||||
"Content-Type": "application/json", |
||||
}, |
||||
JSON.stringify({ |
||||
nama: data.nama, |
||||
jenis: data.jenis, |
||||
tanggal_installasi: data.date, |
||||
status: data.status, |
||||
keterangan: data.keterangan, |
||||
geom: `POINT(${data.long} ${data.lat})` |
||||
}) |
||||
).then(async (resp) => { |
||||
const status = resp.respInfo.status |
||||
if (status == 201) { |
||||
deleteById(data.nama); |
||||
removeValue(data.nama+" / "+data.jenis+" / "+data.date+" / "+data.status+" / "+data.keterangan+" / "+data.long+" / "+data.lat+" / draftPJU"); |
||||
} |
||||
else { |
||||
Alert.alert("Internal Server Error") |
||||
} |
||||
}) |
||||
} catch (error) { |
||||
Alert.alert("Internal Server Error") |
||||
} |
||||
} |
||||
if(selectedSurveyType==="PDAM"){ |
||||
try { |
||||
const obj = { |
||||
nama: data.nama, |
||||
jenis: data.jenis, |
||||
tanggal_installasi: data.date, |
||||
status: data.status, |
||||
keterangan: data.keterangan, |
||||
geom: `MULTILINESTRING((${data.geom}))` |
||||
}; |
||||
await RNFetchBlob.config({ |
||||
trusty : true |
||||
}).fetch('POST', `${PDAM_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) { |
||||
deleteById(data.nama); |
||||
removeValue(data.nama+" / "+data.jenis+" / "+data.date+" / "+data.status+" / "+data.keterangan+" / "+data.geom+" / draftPDAM"); |
||||
} |
||||
else { |
||||
Alert.alert("Internal Server Error") |
||||
} |
||||
}) |
||||
} catch (error) { |
||||
Alert.alert("Internal Server Error"); |
||||
} |
||||
|
||||
} |
||||
if(selectedSurveyType==="PERMIT"){ |
||||
try { |
||||
const obj = { |
||||
company_name: data.company_name, |
||||
location: data.location, |
||||
permit_status: data.permit_status, |
||||
geom: `MULTIPOLYGON (((${data.geom},${String(data.geom).split(",")[0]})))` |
||||
} |
||||
await RNFetchBlob.config({ |
||||
trusty : true |
||||
}).fetch('POST', `${PERMIT_API_URL}/addData`,{ |
||||
"Content-Type": "application/json", |
||||
}, |
||||
JSON.stringify(obj) |
||||
).then(async(resp) => { |
||||
const json = await resp.json(); |
||||
const status = resp.respInfo.status; |
||||
if (status == 201) { |
||||
deleteById(data.company_name); |
||||
removeValue(data.company_name+" / "+data.permit_status+" / "+data.location+" / "+data.geom+" / draftPermit"); |
||||
} |
||||
else { |
||||
Alert.alert("Internal Server Error") |
||||
} |
||||
})
|
||||
} catch (error) { |
||||
Alert.alert("Internal Server Error") |
||||
} |
||||
|
||||
} |
||||
} |
||||
else{ |
||||
setAlertOffline(true) |
||||
} |
||||
}; |
||||
const optionsStyles = { |
||||
optionsContainer: { |
||||
alignItems: 'flex-start', |
||||
justifyContent: 'center', |
||||
width:100, |
||||
marginVertical:-10, |
||||
marginLeft:-10, |
||||
backgroundColor: '#FFFFFF', |
||||
borderRadius: 5, |
||||
shadowColor: '#00000040', |
||||
shadowOffset: { |
||||
width: 0, |
||||
height: 2, |
||||
}, |
||||
borderColor:'#6B5E5E4D', |
||||
borderWidth:1, |
||||
shadowOpacity: 0.2, |
||||
shadowRadius: 6, |
||||
elevation: 5, |
||||
}, |
||||
optionText: { |
||||
color: 'brown', |
||||
}, |
||||
}; |
||||
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,marginTop:10}}> |
||||
<View key={"Filter"} style={{paddingLeft:30,paddingTop:30,paddingRight:30,marginTop:10}}> |
||||
<TextInput |
||||
style={{ |
||||
height: 40, |
||||
padding: 10, |
||||
borderRadius: 50, |
||||
color: 'black', |
||||
backgroundColor:'#e6e3e3' |
||||
}} |
||||
inlineImageLeft="search" |
||||
inlineImagePadding={20} |
||||
placeholderTextColor={'#6B5E5E'} |
||||
placeholder='Search' |
||||
onChangeText={queryText => {handleSearch(queryText),setStingFilter(queryText)}} |
||||
defaultValue={stringFilter} |
||||
/> |
||||
</View> |
||||
<ScrollView
|
||||
style={{ |
||||
padding: 30 |
||||
}} |
||||
refreshControl={ |
||||
<RefreshControl refreshing={refreshing} /> |
||||
} |
||||
> |
||||
{
|
||||
localStorage.length != 0 ?
|
||||
localStorage.map((item:any,index:number) => ( |
||||
<View key={index}> |
||||
<View style={{flexDirection:'row'}}> |
||||
<View style={{ flexDirection:'column',paddingLeft:0,width:'35%'}}> |
||||
<Text style={{fontSize:14,color:'#000000',fontWeight:'600',padding:5}}>Company Name</Text> |
||||
<Text style={{fontSize:14,color:'#000000',fontWeight:'600',padding:5}}>Permit Status</Text> |
||||
<Text style={{fontSize:14,color:'#000000',fontWeight:'600',padding:5}}>Location</Text> |
||||
</View> |
||||
<View style={{ flexDirection:'column',paddingLeft:0,width:'65%'}}> |
||||
<Text style={{fontSize:14,fontWeight:'400',color:'#000000',padding:5}}>: {item.company_name}</Text> |
||||
<Text style={{fontSize:14,fontWeight:'400',color:'#000000',padding:5}}>: {item.permit_status}</Text> |
||||
<Text style={{fontSize:14,fontWeight:'400',color:'#000000',padding:5}}>: {item.location}</Text> |
||||
</View> |
||||
<View style={{ marginLeft:'55%',marginTop:0,width:150,height:100,position:'absolute'}}> |
||||
<MenuProvider skipInstanceCheck={true} style={{flexDirection:'column'}}> |
||||
<Menu> |
||||
<MenuTrigger> |
||||
<Image |
||||
style={{justifyContent:'center',alignSelf:'flex-end'}} |
||||
source={require('../../assets/icon/Actions.png')} |
||||
resizeMode='cover' |
||||
/> |
||||
</MenuTrigger> |
||||
<MenuOptions customStyles={optionsStyles}> |
||||
<MenuOption |
||||
onSelect={()=>{ |
||||
navigation.navigate('Permit Editing',{ screen: 'Edit',data: { |
||||
id:item.id, |
||||
company_name:item.company_name, |
||||
permit_status:item.permit_status, |
||||
location:item.location, |
||||
}}); |
||||
}} |
||||
children={ |
||||
<View style={{flexDirection:'row',alignItems:'center',justifyContent:'center'}}> |
||||
<Image source={require('../../assets/icon/edit.png')} /> |
||||
<Text style={{marginLeft:10,color:'#6B5E5EB2',fontSize:14,fontWeight:400}}>Edit</Text> |
||||
</View>}
|
||||
/> |
||||
<View style={{marginVertical: 5, width:85, |
||||
marginHorizontal: 2, |
||||
borderBottomWidth: 1, |
||||
borderColor: '#ccc'}} |
||||
/> |
||||
<MenuOption |
||||
onSelect={()=> { |
||||
deleteById(item.company_name); |
||||
removeValue(item.company_name+" / "+item.permit_status+" / "+item.location+" / "+item.geom+" / draftPermit"); |
||||
}} |
||||
children={ |
||||
<View style={{flexDirection:'row',alignItems:'center',justifyContent:'center'}}> |
||||
<Image source={require('../../assets/icon/dell.png')} /> |
||||
<Text style={{marginLeft:10,color:'#6B5E5EB2',fontSize:14,fontWeight:400}}>Delete</Text> |
||||
</View> |
||||
} |
||||
/> |
||||
</MenuOptions> |
||||
</Menu> |
||||
</MenuProvider> |
||||
</View> |
||||
</View> |
||||
<View |
||||
style={{ |
||||
marginTop: 10, |
||||
marginBottom: 10, |
||||
borderBottomColor: '#E2E2E2', |
||||
borderBottomWidth: 2, |
||||
}} |
||||
/> |
||||
</View>
|
||||
)) |
||||
: |
||||
<View style={{alignItems:'center',padding:20}}> |
||||
<Text style={{fontSize:16,color:'grey'}}>Data Kosong</Text> |
||||
</View> |
||||
} |
||||
|
||||
</ScrollView> |
||||
</View> |
||||
<AwesomeAlert |
||||
show={alertOffline} |
||||
showProgress={false} |
||||
title="You are offline" |
||||
message="You need connection for Resend 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}} |
||||
/> |
||||
{/* <Button onPress={getDataAll} title='GetDataByKey'/> */} |
||||
</View> |
||||
); |
||||
} |
||||
|
||||
const styles = StyleSheet.create({ |
||||
container: { |
||||
flex: 1, |
||||
backgroundColor: '#ecf0f1', |
||||
padding: 10, |
||||
}, |
||||
mainContainer: { |
||||
flex: 1, |
||||
}, |
||||
title: { |
||||
alignItems: 'center', |
||||
justifyContent: 'center', |
||||
alignSelf: 'center', |
||||
fontWeight: 'bold', |
||||
fontSize: 22, |
||||
color: 'black', |
||||
marginBottom: 10 |
||||
}, |
||||
input: { |
||||
height: 40, |
||||
borderWidth: 1, |
||||
padding: 10, |
||||
borderRadius: 50, |
||||
color: 'black' |
||||
}, |
||||
}); |
||||
|
||||
export default DraftPermit; |
||||
@ -1,646 +0,0 @@
@@ -1,646 +0,0 @@
|
||||
import { Alert, Animated, Keyboard, RefreshControl } from 'react-native'; |
||||
import { |
||||
TextInput, |
||||
Button, |
||||
PermissionsAndroid, |
||||
StatusBar, |
||||
StyleSheet, |
||||
Text, |
||||
View, |
||||
Image, |
||||
TouchableOpacity, |
||||
ScrollView, |
||||
FlatList, |
||||
Dimensions |
||||
} from 'react-native'; |
||||
|
||||
import {useNavigation,NavigationContainer,useIsFocused} from '@react-navigation/native'; |
||||
import {createNativeStackNavigator} from '@react-navigation/native-stack'; |
||||
|
||||
import AsyncStorage from '@react-native-async-storage/async-storage'; |
||||
import { useCallback, useEffect, useState } from 'react'; |
||||
import { width } from '@fortawesome/free-solid-svg-icons/faMugSaucer'; |
||||
import { SelectList } from 'react-native-dropdown-select-list'; |
||||
import { PDAM_API_URL, PERMIT_API_URL, PJU_API_URL } from '../../urlConfig'; |
||||
import AwesomeAlert from 'react-native-awesome-alerts'; |
||||
import NetInfo from "@react-native-community/netinfo"; |
||||
import Moment from 'moment'; |
||||
import RNFetchBlob from 'rn-fetch-blob'; |
||||
|
||||
type sendListDataProps = {route: any,navigation: any}; |
||||
function DraftListScreen({route,navigation}: sendListDataProps) { |
||||
const survey_Type = [ |
||||
{key:'PJU', value:'PJU'}, |
||||
{key:'PERMIT', value:'PERMIT'}, |
||||
{key:'PDAM', value:'PDAM'}, |
||||
] |
||||
const [selectedSurveyType, setselectedSurveyType] = useState(""); |
||||
const [refreshing, setRefreshing] = useState(false); |
||||
const onRefresh = useCallback(() => { |
||||
setRefreshing(true); |
||||
setTimeout(() => { |
||||
setRefreshing(false); |
||||
}, 2000); |
||||
}, []); |
||||
const [localStorage, setLocalStorage] = useState([]); |
||||
const [filterData, setFilterData] = useState([]); |
||||
const [surveyType, setSurveyType] = useState(""); |
||||
const [alertOffline, setAlertOffline] = useState(false); |
||||
const [connected, setConnected] = useState(true) |
||||
const storeData = async (value:any) => { |
||||
// console.log("key",value.case_name)
|
||||
|
||||
try { |
||||
const jsonValue = JSON.stringify(value); |
||||
await AsyncStorage.setItem(String(value.case_id)+" / "+String(value.case_name)+" / "+String(value.case_category)+" / "+"3PA-01"+" / "+String(value.case_risk),jsonValue); |
||||
} catch (e) { |
||||
// saving error
|
||||
} |
||||
}; |
||||
const multiSet = async () => { |
||||
const firstPair = [1, "value_1"] |
||||
const secondPair = [2, "value_2"] |
||||
try { |
||||
const objCase1 = JSON.stringify({id:1,case_name:"test1"}) |
||||
const objCase2 = JSON.stringify({id:2,case_name:"test2"}) |
||||
await AsyncStorage.multiSet([["case_1",objCase1],["case_2",objCase2]]) |
||||
} catch(e) { |
||||
//save error
|
||||
} |
||||
|
||||
// console.log("Done.")
|
||||
} |
||||
const deleteById = (name:string) => { |
||||
if(selectedSurveyType==="PJU"){ |
||||
setLocalStorage(oldValues => { |
||||
return oldValues.filter((local_data:any) => local_data.pju_name !== name) |
||||
}) |
||||
} |
||||
if(selectedSurveyType==="PDAM"){ |
||||
setLocalStorage(oldValues => { |
||||
return oldValues.filter((local_data:any) => local_data.pipe_name !== name) |
||||
}) |
||||
} |
||||
if(selectedSurveyType==="PERMIT"){ |
||||
setLocalStorage(oldValues => { |
||||
return oldValues.filter((local_data:any) => local_data.company_name !== name) |
||||
}) |
||||
} |
||||
} |
||||
const removeValue = async (key:string) => { |
||||
try { |
||||
// console.log("keyDelete",key);
|
||||
await AsyncStorage.removeItem(key) |
||||
// await getCount();
|
||||
} catch(e) { |
||||
} |
||||
} |
||||
const selectSurveyType = () => { |
||||
// console.log(selectedSurveyType);
|
||||
if(selectedSurveyType==='PJU'){ |
||||
getDataPJU() |
||||
} |
||||
if(selectedSurveyType==='PDAM'){ |
||||
getDataPDAM() |
||||
} |
||||
if(selectedSurveyType==='PERMIT'){ |
||||
getDataPermit() |
||||
} |
||||
} |
||||
const getDataPJU = async () => { |
||||
setLocalStorage([]) |
||||
try { |
||||
const jsonValue = await AsyncStorage.getAllKeys() |
||||
// console.log("All Key",jsonValue)
|
||||
if(jsonValue.length != 0) { |
||||
jsonValue.map((item) => { |
||||
if(item != "USER_DATA" && item != "my-jwt"){ |
||||
let splited = item.split(" / "); |
||||
const objectItem = { |
||||
pju_name:splited[0], |
||||
pju_type:splited[1], |
||||
installation_date:splited[2], |
||||
status:splited[3], |
||||
keterangan:splited[4], |
||||
long:splited[5], |
||||
lat:splited[6] |
||||
} |
||||
// console.log(objectItem);
|
||||
|
||||
if(splited[7] === 'draftPJU'){ |
||||
setLocalStorage(oldArray => [...oldArray,objectItem]) |
||||
} |
||||
} |
||||
}) |
||||
} |
||||
} catch (e) { |
||||
// error reading value
|
||||
} |
||||
}; |
||||
const getDataPDAM = async () => { |
||||
setLocalStorage([]) |
||||
try { |
||||
const jsonValue = await AsyncStorage.getAllKeys() |
||||
// console.log("All Key",jsonValue.length)
|
||||
if(jsonValue.length != 0) { |
||||
jsonValue.map((item) => { |
||||
if(item != "USER_DATA" && item != "my-jwt"){ |
||||
let splited = item.split(" / "); |
||||
if(splited.length === 7){ |
||||
const objectItem = { |
||||
pipe_name:splited[0], |
||||
pipe_type:splited[1], |
||||
installation_date:splited[2], |
||||
status:splited[3], |
||||
keterangan:splited[4], |
||||
geom:splited[5].split(",") |
||||
} |
||||
// console.log(objectItem);
|
||||
|
||||
if(splited[6] === 'draftPDAM'){ |
||||
setLocalStorage(oldArray => [...oldArray,objectItem]) |
||||
} |
||||
} |
||||
|
||||
} |
||||
}) |
||||
} |
||||
} catch (error) { |
||||
|
||||
} |
||||
} |
||||
const getDataPermit = async () => { |
||||
setLocalStorage([]) |
||||
try { |
||||
const jsonValue = await AsyncStorage.getAllKeys() |
||||
console.log("All Key",jsonValue) |
||||
if(jsonValue.length != 0) { |
||||
jsonValue.map((item) => { |
||||
if(item != "USER_DATA" && item != "my-jwt"){ |
||||
let splited = item.split(" / "); |
||||
console.log(splited.length); |
||||
|
||||
if(splited.length === 5){ |
||||
const objectItem = { |
||||
company_name:splited[0], |
||||
permit_status:splited[1], |
||||
location:splited[2], |
||||
geom:splited[3].split(",") |
||||
} |
||||
// console.log(objectItem);
|
||||
|
||||
if(splited[4] === 'draftPermit'){ |
||||
setLocalStorage(oldArray => [...oldArray,objectItem]) |
||||
} |
||||
} |
||||
|
||||
} |
||||
}) |
||||
} |
||||
} catch (error) { |
||||
|
||||
} |
||||
} |
||||
const isFocused = useIsFocused(); |
||||
useEffect(() => { |
||||
if(isFocused){ |
||||
const unsubscribe = NetInfo.addEventListener((state) => { |
||||
setConnected(state.isConnected!) |
||||
}); |
||||
return () => { |
||||
unsubscribe(); |
||||
}; |
||||
}; |
||||
},[isFocused]) |
||||
const [draftData, setDraftData] = useState(0); |
||||
navigation.addListener('beforeRemove', (e:any)=> { |
||||
// Alert.alert(String(draftData))
|
||||
|
||||
// route.params.onGoBack(draftData);
|
||||
}) |
||||
const getCount = async () => { |
||||
try { |
||||
const jsonValue = await AsyncStorage.getAllKeys() |
||||
let index = 0; |
||||
jsonValue.map((item) => { |
||||
if(item != "USER_DATA" && item != "my-jwt"){ |
||||
let splited = item.split(" / "); |
||||
if(splited[4] === 'draftPJU'){ |
||||
index+=1 |
||||
} |
||||
} |
||||
setDraftData(index) |
||||
}) |
||||
} catch (e) { |
||||
} |
||||
}; |
||||
const [stringFilter,setStingFilter] = useState('') |
||||
const handleSearch = (text:string) => { |
||||
// console.log(text);
|
||||
|
||||
const formattedQuery = text.toLowerCase(); |
||||
const filteredData = localStorage.filter(data => |
||||
data.case_name.toLowerCase().includes(formattedQuery) |
||||
) |
||||
setFilterData(filteredData) |
||||
|
||||
}; |
||||
const getDataAll = async () => { |
||||
try { |
||||
const jsonValue = await AsyncStorage.getAllKeys() |
||||
// console.log("All",jsonValue)
|
||||
// return jsonValue != null ? JSON.parse(jsonValue) : null;
|
||||
} catch (e) { |
||||
// error reading value
|
||||
} |
||||
}; |
||||
const getDataItem = async () => { |
||||
try { |
||||
const jsonValue = await AsyncStorage.getItem("120 / test1 / Structure Damage Missing / SDM-1 / 1. High") |
||||
// console.log("pure",jsonValue)
|
||||
return jsonValue != null ? JSON.parse(jsonValue) : null; |
||||
} catch (e) { |
||||
// error reading value
|
||||
} |
||||
}; |
||||
const getMultiple = async () => { |
||||
try { |
||||
await AsyncStorage.removeItem("141 / Case 1 / Structure Damage Missing / SDM-01 / 2. Medium / draft") |
||||
} catch(e) { |
||||
} |
||||
} |
||||
const reSend = async (data:any) => { |
||||
if(connected){ |
||||
if(selectedSurveyType==="PJU"){ |
||||
try { |
||||
const result = { |
||||
status: 0, |
||||
body: {}, |
||||
} |
||||
await RNFetchBlob.config({ |
||||
trusty : true |
||||
}).fetch('POST', `${PJU_API_URL}/addData`,{ |
||||
"Accept": 'application/json', |
||||
"Content-Type": "application/json", |
||||
}, |
||||
JSON.stringify({ |
||||
nama: data.nama, |
||||
jenis: data.jenis, |
||||
tanggal_installasi: data.date, |
||||
status: data.status, |
||||
keterangan: data.keterangan, |
||||
geom: `POINT(${data.long} ${data.lat})` |
||||
}) |
||||
).then(async (resp) => { |
||||
const status = resp.respInfo.status |
||||
if (status == 201) { |
||||
deleteById(data.nama); |
||||
removeValue(data.nama+" / "+data.jenis+" / "+data.date+" / "+data.status+" / "+data.keterangan+" / "+data.long+" / "+data.lat+" / draftPJU"); |
||||
} |
||||
else { |
||||
Alert.alert("Internal Server Error") |
||||
} |
||||
}) |
||||
} catch (error) { |
||||
Alert.alert("Internal Server Error") |
||||
} |
||||
} |
||||
if(selectedSurveyType==="PDAM"){ |
||||
try { |
||||
const obj = { |
||||
nama: data.nama, |
||||
jenis: data.jenis, |
||||
tanggal_installasi: data.date, |
||||
status: data.status, |
||||
keterangan: data.keterangan, |
||||
geom: `MULTILINESTRING((${data.geom}))` |
||||
}; |
||||
await RNFetchBlob.config({ |
||||
trusty : true |
||||
}).fetch('POST', `${PDAM_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) { |
||||
deleteById(data.nama); |
||||
removeValue(data.nama+" / "+data.jenis+" / "+data.date+" / "+data.status+" / "+data.keterangan+" / "+data.geom+" / draftPDAM"); |
||||
} |
||||
else { |
||||
Alert.alert("Internal Server Error") |
||||
} |
||||
}) |
||||
} catch (error) { |
||||
Alert.alert("Internal Server Error"); |
||||
} |
||||
|
||||
} |
||||
if(selectedSurveyType==="PERMIT"){ |
||||
try { |
||||
const obj = { |
||||
company_name: data.company_name, |
||||
location: data.location, |
||||
permit_status: data.permit_status, |
||||
geom: `MULTIPOLYGON (((${data.geom},${String(data.geom).split(",")[0]})))` |
||||
} |
||||
await RNFetchBlob.config({ |
||||
trusty : true |
||||
}).fetch('POST', `${PERMIT_API_URL}/addData`,{ |
||||
"Content-Type": "application/json", |
||||
}, |
||||
JSON.stringify(obj) |
||||
).then(async(resp) => { |
||||
const json = await resp.json(); |
||||
const status = resp.respInfo.status; |
||||
if (status == 201) { |
||||
deleteById(data.company_name); |
||||
removeValue(data.company_name+" / "+data.permit_status+" / "+data.location+" / "+data.geom+" / draftPermit"); |
||||
} |
||||
else { |
||||
Alert.alert("Internal Server Error") |
||||
} |
||||
})
|
||||
} catch (error) { |
||||
Alert.alert("Internal Server Error") |
||||
} |
||||
|
||||
} |
||||
} |
||||
else{ |
||||
setAlertOffline(true) |
||||
} |
||||
} |
||||
return( |
||||
<View style={styles.mainContainer}> |
||||
{/* <RefreshControl refreshing={refreshing} onRefresh={onRefresh} /> */} |
||||
{/* <TextInput |
||||
style={styles.input} |
||||
placeholder='Search' |
||||
onChangeText={queryText => {handleSearch(queryText),setStingFilter(queryText)}} |
||||
/> */} |
||||
<SelectList |
||||
search={false} |
||||
placeholder="Select Survey Type" |
||||
boxStyles={{borderRadius:50,borderWidth:2,borderColor:'black'}} |
||||
inputStyles={{color:'black'}} |
||||
dropdownTextStyles={{color:'black'}} |
||||
data={survey_Type} |
||||
setSelected={setselectedSurveyType} |
||||
onSelect={selectSurveyType} |
||||
/> |
||||
<ScrollView style={styles.container} |
||||
refreshControl={ |
||||
<RefreshControl refreshing={refreshing} onRefresh={onRefresh} /> |
||||
}> |
||||
{selectedSurveyType=="PJU" && localStorage.length != 0?
|
||||
localStorage.map((item:any,index:number) => ( |
||||
<View key={index}> |
||||
<View style={{flexDirection:'row'}}> |
||||
<View style={{ flexDirection:'column',paddingLeft:0,width:'35%'}}> |
||||
<Text style={{fontSize:16,color:'black'}}>Nama JPU</Text> |
||||
<Text style={{fontSize:16,color:'black'}}>Jenis</Text> |
||||
<Text style={{fontSize:16,color:'black'}}>Tanggal Installasi</Text> |
||||
<Text style={{fontSize:16,color:'black'}}>Status</Text> |
||||
</View> |
||||
<View style={{ flexDirection:'column',paddingLeft:0,width:'45%'}}> |
||||
<Text style={{fontSize:16,fontWeight:'bold',color:'black'}}>: {item.pju_name}</Text> |
||||
<Text style={{fontSize:16,fontWeight:'bold',color:'black'}}>: {item.pju_type}</Text> |
||||
<Text style={{fontSize:16,fontWeight:'bold',color:'black'}}>: {item.installation_date}</Text> |
||||
<Text style={{fontSize:16,fontWeight:'bold',color:'black'}}>: {item.status}</Text> |
||||
</View> |
||||
<View style={{flexDirection:'column',width:'20%'}}> |
||||
<View style={{}}> |
||||
<View> |
||||
<TouchableOpacity onPress={()=> { |
||||
deleteById(item.pju_name); |
||||
removeValue(item.pju_name+" / "+item.pju_type+" / "+item.installation_date+" / "+item.status+" / "+item.keterangan+" / "+item.long+" / "+item.lat+" / draftPJU"); |
||||
}}> |
||||
<View style={{flexDirection:'row',justifyContent:'flex-end',padding:6}}> |
||||
<Image |
||||
source={require('../../assets/icon/delete.png')} |
||||
style={{width:25,height:25}} |
||||
/> |
||||
{/* <Text style={{fontSize:18,fontWeight:'bold'}}>View</Text> */} |
||||
</View> |
||||
</TouchableOpacity> |
||||
</View> |
||||
</View> |
||||
<View style={{}}> |
||||
<View> |
||||
<TouchableOpacity onPress={()=> {reSend({ |
||||
nama:item.pju_name, |
||||
jenis:item.pju_type, |
||||
date:Moment(new Date(item.installation_date)).format('YYYY-MM-DD'), |
||||
status:item.status, |
||||
keterangan:item.keterangan, |
||||
long:item.long, |
||||
lat:item.lat |
||||
})}}> |
||||
<View style={{flexDirection:'row',justifyContent:'flex-end',padding:6}}> |
||||
<Image |
||||
source={require('../../assets/icon/send.png')} |
||||
style={{width:25,height:25}} |
||||
/> |
||||
{/* <Text style={{fontSize:18,fontWeight:'bold'}}>View</Text> */} |
||||
</View> |
||||
</TouchableOpacity> |
||||
</View> |
||||
</View> |
||||
</View> |
||||
</View> |
||||
<View |
||||
style={{ |
||||
marginTop: 10, |
||||
marginBottom: 10, |
||||
borderBottomColor: 'black', |
||||
borderBottomWidth: 1, |
||||
}} |
||||
/> |
||||
</View>
|
||||
)) |
||||
: |
||||
selectedSurveyType=="PDAM" && localStorage.length != 0 ?
|
||||
localStorage.map((item:any,index:number) => ( |
||||
<View key={index}> |
||||
<View style={{flexDirection:'row'}}> |
||||
<View style={{ flexDirection:'column',paddingLeft:0,width:'35%'}}> |
||||
<Text style={{fontSize:16,color:'black'}}>Nama Pipa</Text> |
||||
<Text style={{fontSize:16,color:'black'}}>Jenis</Text> |
||||
<Text style={{fontSize:16,color:'black'}}>Tanggal Installasi</Text> |
||||
<Text style={{fontSize:16,color:'black'}}>Status</Text> |
||||
</View> |
||||
<View style={{ flexDirection:'column',paddingLeft:0,width:'45%'}}> |
||||
<Text style={{fontSize:16,fontWeight:'bold',color:'black'}}>: {item.pipe_name}</Text> |
||||
<Text style={{fontSize:16,fontWeight:'bold',color:'black'}}>: {item.pipe_type}</Text> |
||||
<Text style={{fontSize:16,fontWeight:'bold',color:'black'}}>: {item.installation_date}</Text> |
||||
<Text style={{fontSize:16,fontWeight:'bold',color:'black'}}>: {item.status}</Text> |
||||
</View> |
||||
<View style={{flexDirection:'column',width:'20%'}}> |
||||
<View style={{}}> |
||||
<View> |
||||
<TouchableOpacity onPress={()=> { |
||||
deleteById(item.pipe_name); |
||||
removeValue(item.pipe_name+" / "+item.pipe_type+" / "+item.installation_date+" / "+item.status+" / "+item.keterangan+" / "+item.geom+" / draftPDAM"); |
||||
}}> |
||||
<View style={{flexDirection:'row',justifyContent:'flex-end',padding:6}}> |
||||
<Image |
||||
source={require('../../assets/icon/delete.png')} |
||||
style={{width:25,height:25}} |
||||
/> |
||||
</View> |
||||
</TouchableOpacity> |
||||
</View> |
||||
</View> |
||||
<View style={{}}> |
||||
<View> |
||||
<TouchableOpacity onPress={()=> {reSend({ |
||||
nama:item.pipe_name, |
||||
jenis:item.pipe_type, |
||||
date:Moment(new Date(item.installation_date)).format('YYYY-MM-DD'), |
||||
status:item.status, |
||||
keterangan:item.keterangan, |
||||
geom:item.geom |
||||
})}}> |
||||
<View style={{flexDirection:'row',justifyContent:'flex-end',padding:6}}> |
||||
<Image |
||||
source={require('../../assets/icon/send.png')} |
||||
style={{width:25,height:25}} |
||||
/> |
||||
{/* <Text style={{fontSize:18,fontWeight:'bold'}}>View</Text> */} |
||||
</View> |
||||
</TouchableOpacity> |
||||
</View> |
||||
</View> |
||||
</View> |
||||
</View> |
||||
<View |
||||
style={{ |
||||
marginTop: 10, |
||||
marginBottom: 10, |
||||
borderBottomColor: 'black', |
||||
borderBottomWidth: 1, |
||||
}} |
||||
/> |
||||
</View>
|
||||
)) |
||||
: |
||||
selectedSurveyType=="PERMIT" && localStorage.length != 0 ? |
||||
localStorage.map((item:any,index:number) => ( |
||||
<View key={index}> |
||||
<View style={{flexDirection:'row'}}> |
||||
<View style={{ flexDirection:'column',paddingLeft:0,width:'35%'}}> |
||||
<Text style={{fontSize:16,color:'black'}}>Company Name</Text> |
||||
<Text style={{fontSize:16,color:'black'}}>Permit Status</Text> |
||||
<Text style={{fontSize:16,color:'black'}}>Location</Text> |
||||
</View> |
||||
<View style={{ flexDirection:'column',paddingLeft:0,width:'45%'}}> |
||||
<Text style={{fontSize:16,fontWeight:'bold',color:'black'}}>: {item.company_name}</Text> |
||||
<Text style={{fontSize:16,fontWeight:'bold',color:'black'}}>: {item.permit_status}</Text> |
||||
<Text style={{fontSize:16,fontWeight:'bold',color:'black'}}>: {item.location}</Text> |
||||
</View> |
||||
<View style={{flexDirection:'column',width:'20%'}}> |
||||
<View style={{}}> |
||||
<View> |
||||
<TouchableOpacity onPress={()=> { |
||||
deleteById(item.company_name); |
||||
removeValue(item.company_name+" / "+item.permit_status+" / "+item.location+" / "+item.geom+" / draftPermit"); |
||||
}}> |
||||
<View style={{flexDirection:'row',justifyContent:'flex-end',padding:6}}> |
||||
<Image |
||||
source={require('../../assets/icon/delete.png')} |
||||
style={{width:25,height:25}} |
||||
/> |
||||
</View> |
||||
</TouchableOpacity> |
||||
</View> |
||||
</View> |
||||
<View style={{}}> |
||||
<View> |
||||
<TouchableOpacity onPress={()=> {reSend({ |
||||
company_name:item.company_name, |
||||
permit_status:item.permit_status, |
||||
location:item.location, |
||||
geom:item.geom |
||||
})}}> |
||||
<View style={{flexDirection:'row',justifyContent:'flex-end',padding:6}}> |
||||
<Image |
||||
source={require('../../assets/icon/send.png')} |
||||
style={{width:25,height:25}} |
||||
/> |
||||
{/* <Text style={{fontSize:18,fontWeight:'bold'}}>View</Text> */} |
||||
</View> |
||||
</TouchableOpacity> |
||||
</View> |
||||
</View> |
||||
</View> |
||||
</View> |
||||
<View |
||||
style={{ |
||||
marginTop: 10, |
||||
marginBottom: 10, |
||||
borderBottomColor: 'black', |
||||
borderBottomWidth: 1, |
||||
}} |
||||
/> |
||||
</View>
|
||||
)) |
||||
: |
||||
<View style={{alignItems:'center',padding:20}}> |
||||
<Text style={{fontSize:16,color:'grey'}}>Data Kosong</Text> |
||||
</View> |
||||
} |
||||
</ScrollView> |
||||
<AwesomeAlert |
||||
show={alertOffline} |
||||
showProgress={false} |
||||
title="You are offline" |
||||
message="You need connection for Resend 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}} |
||||
/> |
||||
{/* <Button onPress={getDataAll} title='GetDataByKey'/> */} |
||||
</View> |
||||
); |
||||
} |
||||
|
||||
const styles = StyleSheet.create({ |
||||
container: { |
||||
flex: 1, |
||||
backgroundColor: '#ecf0f1', |
||||
padding: 10, |
||||
}, |
||||
mainContainer: { |
||||
flex: 1, |
||||
padding: 10, |
||||
}, |
||||
title: { |
||||
alignItems: 'center', |
||||
justifyContent: 'center', |
||||
alignSelf: 'center', |
||||
fontWeight: 'bold', |
||||
fontSize: 22, |
||||
color: 'black', |
||||
marginBottom: 10 |
||||
}, |
||||
input: { |
||||
height: 40, |
||||
borderWidth: 1, |
||||
padding: 10, |
||||
borderRadius: 50, |
||||
color: 'black' |
||||
}, |
||||
}); |
||||
|
||||
export default DraftListScreen; |
||||
@ -1,646 +0,0 @@
@@ -1,646 +0,0 @@
|
||||
import { Alert, Animated, Keyboard, RefreshControl } from 'react-native'; |
||||
import { |
||||
TextInput, |
||||
Button, |
||||
PermissionsAndroid, |
||||
StatusBar, |
||||
StyleSheet, |
||||
Text, |
||||
View, |
||||
Image, |
||||
TouchableOpacity, |
||||
ScrollView, |
||||
FlatList, |
||||
Dimensions |
||||
} from 'react-native'; |
||||
|
||||
import {useNavigation,NavigationContainer,useIsFocused} from '@react-navigation/native'; |
||||
import {createNativeStackNavigator} from '@react-navigation/native-stack'; |
||||
|
||||
import AsyncStorage from '@react-native-async-storage/async-storage'; |
||||
import { useCallback, useEffect, useState } from 'react'; |
||||
import { width } from '@fortawesome/free-solid-svg-icons/faMugSaucer'; |
||||
import { SelectList } from 'react-native-dropdown-select-list'; |
||||
import { PDAM_API_URL, PERMIT_API_URL, PJU_API_URL } from '../../urlConfig'; |
||||
import AwesomeAlert from 'react-native-awesome-alerts'; |
||||
import NetInfo from "@react-native-community/netinfo"; |
||||
import Moment from 'moment'; |
||||
import RNFetchBlob from 'rn-fetch-blob'; |
||||
|
||||
type sendListDataProps = {route: any,navigation: any}; |
||||
function DraftListScreen({route,navigation}: sendListDataProps) { |
||||
const survey_Type = [ |
||||
{key:'PJU', value:'PJU'}, |
||||
{key:'PERMIT', value:'PERMIT'}, |
||||
{key:'PDAM', value:'PDAM'}, |
||||
] |
||||
const [selectedSurveyType, setselectedSurveyType] = useState(""); |
||||
const [refreshing, setRefreshing] = useState(false); |
||||
const onRefresh = useCallback(() => { |
||||
setRefreshing(true); |
||||
setTimeout(() => { |
||||
setRefreshing(false); |
||||
}, 2000); |
||||
}, []); |
||||
const [localStorage, setLocalStorage] = useState([]); |
||||
const [filterData, setFilterData] = useState([]); |
||||
const [surveyType, setSurveyType] = useState(""); |
||||
const [alertOffline, setAlertOffline] = useState(false); |
||||
const [connected, setConnected] = useState(true) |
||||
const storeData = async (value:any) => { |
||||
// console.log("key",value.case_name)
|
||||
|
||||
try { |
||||
const jsonValue = JSON.stringify(value); |
||||
await AsyncStorage.setItem(String(value.case_id)+" / "+String(value.case_name)+" / "+String(value.case_category)+" / "+"3PA-01"+" / "+String(value.case_risk),jsonValue); |
||||
} catch (e) { |
||||
// saving error
|
||||
} |
||||
}; |
||||
const multiSet = async () => { |
||||
const firstPair = [1, "value_1"] |
||||
const secondPair = [2, "value_2"] |
||||
try { |
||||
const objCase1 = JSON.stringify({id:1,case_name:"test1"}) |
||||
const objCase2 = JSON.stringify({id:2,case_name:"test2"}) |
||||
await AsyncStorage.multiSet([["case_1",objCase1],["case_2",objCase2]]) |
||||
} catch(e) { |
||||
//save error
|
||||
} |
||||
|
||||
// console.log("Done.")
|
||||
} |
||||
const deleteById = (name:string) => { |
||||
if(selectedSurveyType==="PJU"){ |
||||
setLocalStorage(oldValues => { |
||||
return oldValues.filter((local_data:any) => local_data.pju_name !== name) |
||||
}) |
||||
} |
||||
if(selectedSurveyType==="PDAM"){ |
||||
setLocalStorage(oldValues => { |
||||
return oldValues.filter((local_data:any) => local_data.pipe_name !== name) |
||||
}) |
||||
} |
||||
if(selectedSurveyType==="PERMIT"){ |
||||
setLocalStorage(oldValues => { |
||||
return oldValues.filter((local_data:any) => local_data.company_name !== name) |
||||
}) |
||||
} |
||||
} |
||||
const removeValue = async (key:string) => { |
||||
try { |
||||
// console.log("keyDelete",key);
|
||||
await AsyncStorage.removeItem(key) |
||||
// await getCount();
|
||||
} catch(e) { |
||||
} |
||||
} |
||||
const selectSurveyType = () => { |
||||
// console.log(selectedSurveyType);
|
||||
if(selectedSurveyType==='PJU'){ |
||||
getDataPJU() |
||||
} |
||||
if(selectedSurveyType==='PDAM'){ |
||||
getDataPDAM() |
||||
} |
||||
if(selectedSurveyType==='PERMIT'){ |
||||
getDataPermit() |
||||
} |
||||
} |
||||
const getDataPJU = async () => { |
||||
setLocalStorage([]) |
||||
try { |
||||
const jsonValue = await AsyncStorage.getAllKeys() |
||||
// console.log("All Key",jsonValue)
|
||||
if(jsonValue.length != 0) { |
||||
jsonValue.map((item) => { |
||||
if(item != "USER_DATA" && item != "my-jwt"){ |
||||
let splited = item.split(" / "); |
||||
const objectItem = { |
||||
pju_name:splited[0], |
||||
pju_type:splited[1], |
||||
installation_date:splited[2], |
||||
status:splited[3], |
||||
keterangan:splited[4], |
||||
long:splited[5], |
||||
lat:splited[6] |
||||
} |
||||
// console.log(objectItem);
|
||||
|
||||
if(splited[7] === 'draftPJU'){ |
||||
setLocalStorage(oldArray => [...oldArray,objectItem]) |
||||
} |
||||
} |
||||
}) |
||||
} |
||||
} catch (e) { |
||||
// error reading value
|
||||
} |
||||
}; |
||||
const getDataPDAM = async () => { |
||||
setLocalStorage([]) |
||||
try { |
||||
const jsonValue = await AsyncStorage.getAllKeys() |
||||
// console.log("All Key",jsonValue.length)
|
||||
if(jsonValue.length != 0) { |
||||
jsonValue.map((item) => { |
||||
if(item != "USER_DATA" && item != "my-jwt"){ |
||||
let splited = item.split(" / "); |
||||
if(splited.length === 7){ |
||||
const objectItem = { |
||||
pipe_name:splited[0], |
||||
pipe_type:splited[1], |
||||
installation_date:splited[2], |
||||
status:splited[3], |
||||
keterangan:splited[4], |
||||
geom:splited[5].split(",") |
||||
} |
||||
// console.log(objectItem);
|
||||
|
||||
if(splited[6] === 'draftPDAM'){ |
||||
setLocalStorage(oldArray => [...oldArray,objectItem]) |
||||
} |
||||
} |
||||
|
||||
} |
||||
}) |
||||
} |
||||
} catch (error) { |
||||
|
||||
} |
||||
} |
||||
const getDataPermit = async () => { |
||||
setLocalStorage([]) |
||||
try { |
||||
const jsonValue = await AsyncStorage.getAllKeys() |
||||
console.log("All Key",jsonValue) |
||||
if(jsonValue.length != 0) { |
||||
jsonValue.map((item) => { |
||||
if(item != "USER_DATA" && item != "my-jwt"){ |
||||
let splited = item.split(" / "); |
||||
console.log(splited.length); |
||||
|
||||
if(splited.length === 5){ |
||||
const objectItem = { |
||||
company_name:splited[0], |
||||
permit_status:splited[1], |
||||
location:splited[2], |
||||
geom:splited[3].split(",") |
||||
} |
||||
// console.log(objectItem);
|
||||
|
||||
if(splited[4] === 'draftPermit'){ |
||||
setLocalStorage(oldArray => [...oldArray,objectItem]) |
||||
} |
||||
} |
||||
|
||||
} |
||||
}) |
||||
} |
||||
} catch (error) { |
||||
|
||||
} |
||||
} |
||||
const isFocused = useIsFocused(); |
||||
useEffect(() => { |
||||
if(isFocused){ |
||||
const unsubscribe = NetInfo.addEventListener((state) => { |
||||
setConnected(state.isConnected!) |
||||
}); |
||||
return () => { |
||||
unsubscribe(); |
||||
}; |
||||
}; |
||||
},[isFocused]) |
||||
const [draftData, setDraftData] = useState(0); |
||||
navigation.addListener('beforeRemove', (e:any)=> { |
||||
// Alert.alert(String(draftData))
|
||||
|
||||
// route.params.onGoBack(draftData);
|
||||
}) |
||||
const getCount = async () => { |
||||
try { |
||||
const jsonValue = await AsyncStorage.getAllKeys() |
||||
let index = 0; |
||||
jsonValue.map((item) => { |
||||
if(item != "USER_DATA" && item != "my-jwt"){ |
||||
let splited = item.split(" / "); |
||||
if(splited[4] === 'draftPJU'){ |
||||
index+=1 |
||||
} |
||||
} |
||||
setDraftData(index) |
||||
}) |
||||
} catch (e) { |
||||
} |
||||
}; |
||||
const [stringFilter,setStingFilter] = useState('') |
||||
const handleSearch = (text:string) => { |
||||
// console.log(text);
|
||||
|
||||
const formattedQuery = text.toLowerCase(); |
||||
const filteredData = localStorage.filter(data => |
||||
data.case_name.toLowerCase().includes(formattedQuery) |
||||
) |
||||
setFilterData(filteredData) |
||||
|
||||
}; |
||||
const getDataAll = async () => { |
||||
try { |
||||
const jsonValue = await AsyncStorage.getAllKeys() |
||||
// console.log("All",jsonValue)
|
||||
// return jsonValue != null ? JSON.parse(jsonValue) : null;
|
||||
} catch (e) { |
||||
// error reading value
|
||||
} |
||||
}; |
||||
const getDataItem = async () => { |
||||
try { |
||||
const jsonValue = await AsyncStorage.getItem("120 / test1 / Structure Damage Missing / SDM-1 / 1. High") |
||||
// console.log("pure",jsonValue)
|
||||
return jsonValue != null ? JSON.parse(jsonValue) : null; |
||||
} catch (e) { |
||||
// error reading value
|
||||
} |
||||
}; |
||||
const getMultiple = async () => { |
||||
try { |
||||
await AsyncStorage.removeItem("141 / Case 1 / Structure Damage Missing / SDM-01 / 2. Medium / draft") |
||||
} catch(e) { |
||||
} |
||||
} |
||||
const reSend = async (data:any) => { |
||||
if(connected){ |
||||
if(selectedSurveyType==="PJU"){ |
||||
try { |
||||
const result = { |
||||
status: 0, |
||||
body: {}, |
||||
} |
||||
await RNFetchBlob.config({ |
||||
trusty : true |
||||
}).fetch('POST', `${PJU_API_URL}/addData`,{ |
||||
"Accept": 'application/json', |
||||
"Content-Type": "application/json", |
||||
}, |
||||
JSON.stringify({ |
||||
nama: data.nama, |
||||
jenis: data.jenis, |
||||
tanggal_installasi: data.date, |
||||
status: data.status, |
||||
keterangan: data.keterangan, |
||||
geom: `POINT(${data.long} ${data.lat})` |
||||
}) |
||||
).then(async (resp) => { |
||||
const status = resp.respInfo.status |
||||
if (status == 201) { |
||||
deleteById(data.nama); |
||||
removeValue(data.nama+" / "+data.jenis+" / "+data.date+" / "+data.status+" / "+data.keterangan+" / "+data.long+" / "+data.lat+" / draftPJU"); |
||||
} |
||||
else { |
||||
Alert.alert("Internal Server Error") |
||||
} |
||||
}) |
||||
} catch (error) { |
||||
Alert.alert("Internal Server Error") |
||||
} |
||||
} |
||||
if(selectedSurveyType==="PDAM"){ |
||||
try { |
||||
const obj = { |
||||
nama: data.nama, |
||||
jenis: data.jenis, |
||||
tanggal_installasi: data.date, |
||||
status: data.status, |
||||
keterangan: data.keterangan, |
||||
geom: `MULTILINESTRING((${data.geom}))` |
||||
}; |
||||
await RNFetchBlob.config({ |
||||
trusty : true |
||||
}).fetch('POST', `${PDAM_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) { |
||||
deleteById(data.nama); |
||||
removeValue(data.nama+" / "+data.jenis+" / "+data.date+" / "+data.status+" / "+data.keterangan+" / "+data.geom+" / draftPDAM"); |
||||
} |
||||
else { |
||||
Alert.alert("Internal Server Error") |
||||
} |
||||
}) |
||||
} catch (error) { |
||||
Alert.alert("Internal Server Error"); |
||||
} |
||||
|
||||
} |
||||
if(selectedSurveyType==="PERMIT"){ |
||||
try { |
||||
const obj = { |
||||
company_name: data.company_name, |
||||
location: data.location, |
||||
permit_status: data.permit_status, |
||||
geom: `MULTIPOLYGON (((${data.geom},${String(data.geom).split(",")[0]})))` |
||||
} |
||||
await RNFetchBlob.config({ |
||||
trusty : true |
||||
}).fetch('POST', `${PERMIT_API_URL}/addData`,{ |
||||
"Content-Type": "application/json", |
||||
}, |
||||
JSON.stringify(obj) |
||||
).then(async(resp) => { |
||||
const json = await resp.json(); |
||||
const status = resp.respInfo.status; |
||||
if (status == 201) { |
||||
deleteById(data.company_name); |
||||
removeValue(data.company_name+" / "+data.permit_status+" / "+data.location+" / "+data.geom+" / draftPermit"); |
||||
} |
||||
else { |
||||
Alert.alert("Internal Server Error") |
||||
} |
||||
})
|
||||
} catch (error) { |
||||
Alert.alert("Internal Server Error") |
||||
} |
||||
|
||||
} |
||||
} |
||||
else{ |
||||
setAlertOffline(true) |
||||
} |
||||
} |
||||
return( |
||||
<View style={styles.mainContainer}> |
||||
{/* <RefreshControl refreshing={refreshing} onRefresh={onRefresh} /> */} |
||||
{/* <TextInput |
||||
style={styles.input} |
||||
placeholder='Search' |
||||
onChangeText={queryText => {handleSearch(queryText),setStingFilter(queryText)}} |
||||
/> */} |
||||
<SelectList |
||||
search={false} |
||||
placeholder="Select Survey Type" |
||||
boxStyles={{borderRadius:50,borderWidth:2,borderColor:'black'}} |
||||
inputStyles={{color:'black'}} |
||||
dropdownTextStyles={{color:'black'}} |
||||
data={survey_Type} |
||||
setSelected={setselectedSurveyType} |
||||
onSelect={selectSurveyType} |
||||
/> |
||||
<ScrollView style={styles.container} |
||||
refreshControl={ |
||||
<RefreshControl refreshing={refreshing} onRefresh={onRefresh} /> |
||||
}> |
||||
{selectedSurveyType=="PJU" && localStorage.length != 0?
|
||||
localStorage.map((item:any,index:number) => ( |
||||
<View key={index}> |
||||
<View style={{flexDirection:'row'}}> |
||||
<View style={{ flexDirection:'column',paddingLeft:0,width:'35%'}}> |
||||
<Text style={{fontSize:16,color:'black'}}>Nama JPU</Text> |
||||
<Text style={{fontSize:16,color:'black'}}>Jenis</Text> |
||||
<Text style={{fontSize:16,color:'black'}}>Tanggal Installasi</Text> |
||||
<Text style={{fontSize:16,color:'black'}}>Status</Text> |
||||
</View> |
||||
<View style={{ flexDirection:'column',paddingLeft:0,width:'45%'}}> |
||||
<Text style={{fontSize:16,fontWeight:'bold',color:'black'}}>: {item.pju_name}</Text> |
||||
<Text style={{fontSize:16,fontWeight:'bold',color:'black'}}>: {item.pju_type}</Text> |
||||
<Text style={{fontSize:16,fontWeight:'bold',color:'black'}}>: {item.installation_date}</Text> |
||||
<Text style={{fontSize:16,fontWeight:'bold',color:'black'}}>: {item.status}</Text> |
||||
</View> |
||||
<View style={{flexDirection:'column',width:'20%'}}> |
||||
<View style={{}}> |
||||
<View> |
||||
<TouchableOpacity onPress={()=> { |
||||
deleteById(item.pju_name); |
||||
removeValue(item.pju_name+" / "+item.pju_type+" / "+item.installation_date+" / "+item.status+" / "+item.keterangan+" / "+item.long+" / "+item.lat+" / draftPJU"); |
||||
}}> |
||||
<View style={{flexDirection:'row',justifyContent:'flex-end',padding:6}}> |
||||
<Image |
||||
source={require('../../assets/icon/delete.png')} |
||||
style={{width:25,height:25}} |
||||
/> |
||||
{/* <Text style={{fontSize:18,fontWeight:'bold'}}>View</Text> */} |
||||
</View> |
||||
</TouchableOpacity> |
||||
</View> |
||||
</View> |
||||
<View style={{}}> |
||||
<View> |
||||
<TouchableOpacity onPress={()=> {reSend({ |
||||
nama:item.pju_name, |
||||
jenis:item.pju_type, |
||||
date:Moment(new Date(item.installation_date)).format('YYYY-MM-DD'), |
||||
status:item.status, |
||||
keterangan:item.keterangan, |
||||
long:item.long, |
||||
lat:item.lat |
||||
})}}> |
||||
<View style={{flexDirection:'row',justifyContent:'flex-end',padding:6}}> |
||||
<Image |
||||
source={require('../../assets/icon/send.png')} |
||||
style={{width:25,height:25}} |
||||
/> |
||||
{/* <Text style={{fontSize:18,fontWeight:'bold'}}>View</Text> */} |
||||
</View> |
||||
</TouchableOpacity> |
||||
</View> |
||||
</View> |
||||
</View> |
||||
</View> |
||||
<View |
||||
style={{ |
||||
marginTop: 10, |
||||
marginBottom: 10, |
||||
borderBottomColor: 'black', |
||||
borderBottomWidth: 1, |
||||
}} |
||||
/> |
||||
</View>
|
||||
)) |
||||
: |
||||
selectedSurveyType=="PDAM" && localStorage.length != 0 ?
|
||||
localStorage.map((item:any,index:number) => ( |
||||
<View key={index}> |
||||
<View style={{flexDirection:'row'}}> |
||||
<View style={{ flexDirection:'column',paddingLeft:0,width:'35%'}}> |
||||
<Text style={{fontSize:16,color:'black'}}>Nama Pipa</Text> |
||||
<Text style={{fontSize:16,color:'black'}}>Jenis</Text> |
||||
<Text style={{fontSize:16,color:'black'}}>Tanggal Installasi</Text> |
||||
<Text style={{fontSize:16,color:'black'}}>Status</Text> |
||||
</View> |
||||
<View style={{ flexDirection:'column',paddingLeft:0,width:'45%'}}> |
||||
<Text style={{fontSize:16,fontWeight:'bold',color:'black'}}>: {item.pipe_name}</Text> |
||||
<Text style={{fontSize:16,fontWeight:'bold',color:'black'}}>: {item.pipe_type}</Text> |
||||
<Text style={{fontSize:16,fontWeight:'bold',color:'black'}}>: {item.installation_date}</Text> |
||||
<Text style={{fontSize:16,fontWeight:'bold',color:'black'}}>: {item.status}</Text> |
||||
</View> |
||||
<View style={{flexDirection:'column',width:'20%'}}> |
||||
<View style={{}}> |
||||
<View> |
||||
<TouchableOpacity onPress={()=> { |
||||
deleteById(item.pipe_name); |
||||
removeValue(item.pipe_name+" / "+item.pipe_type+" / "+item.installation_date+" / "+item.status+" / "+item.keterangan+" / "+item.geom+" / draftPDAM"); |
||||
}}> |
||||
<View style={{flexDirection:'row',justifyContent:'flex-end',padding:6}}> |
||||
<Image |
||||
source={require('../../assets/icon/delete.png')} |
||||
style={{width:25,height:25}} |
||||
/> |
||||
</View> |
||||
</TouchableOpacity> |
||||
</View> |
||||
</View> |
||||
<View style={{}}> |
||||
<View> |
||||
<TouchableOpacity onPress={()=> {reSend({ |
||||
nama:item.pipe_name, |
||||
jenis:item.pipe_type, |
||||
date:Moment(new Date(item.installation_date)).format('YYYY-MM-DD'), |
||||
status:item.status, |
||||
keterangan:item.keterangan, |
||||
geom:item.geom |
||||
})}}> |
||||
<View style={{flexDirection:'row',justifyContent:'flex-end',padding:6}}> |
||||
<Image |
||||
source={require('../../assets/icon/send.png')} |
||||
style={{width:25,height:25}} |
||||
/> |
||||
{/* <Text style={{fontSize:18,fontWeight:'bold'}}>View</Text> */} |
||||
</View> |
||||
</TouchableOpacity> |
||||
</View> |
||||
</View> |
||||
</View> |
||||
</View> |
||||
<View |
||||
style={{ |
||||
marginTop: 10, |
||||
marginBottom: 10, |
||||
borderBottomColor: 'black', |
||||
borderBottomWidth: 1, |
||||
}} |
||||
/> |
||||
</View>
|
||||
)) |
||||
: |
||||
selectedSurveyType=="PERMIT" && localStorage.length != 0 ? |
||||
localStorage.map((item:any,index:number) => ( |
||||
<View key={index}> |
||||
<View style={{flexDirection:'row'}}> |
||||
<View style={{ flexDirection:'column',paddingLeft:0,width:'35%'}}> |
||||
<Text style={{fontSize:16,color:'black'}}>Company Name</Text> |
||||
<Text style={{fontSize:16,color:'black'}}>Permit Status</Text> |
||||
<Text style={{fontSize:16,color:'black'}}>Location</Text> |
||||
</View> |
||||
<View style={{ flexDirection:'column',paddingLeft:0,width:'45%'}}> |
||||
<Text style={{fontSize:16,fontWeight:'bold',color:'black'}}>: {item.company_name}</Text> |
||||
<Text style={{fontSize:16,fontWeight:'bold',color:'black'}}>: {item.permit_status}</Text> |
||||
<Text style={{fontSize:16,fontWeight:'bold',color:'black'}}>: {item.location}</Text> |
||||
</View> |
||||
<View style={{flexDirection:'column',width:'20%'}}> |
||||
<View style={{}}> |
||||
<View> |
||||
<TouchableOpacity onPress={()=> { |
||||
deleteById(item.company_name); |
||||
removeValue(item.company_name+" / "+item.permit_status+" / "+item.location+" / "+item.geom+" / draftPermit"); |
||||
}}> |
||||
<View style={{flexDirection:'row',justifyContent:'flex-end',padding:6}}> |
||||
<Image |
||||
source={require('../../assets/icon/delete.png')} |
||||
style={{width:25,height:25}} |
||||
/> |
||||
</View> |
||||
</TouchableOpacity> |
||||
</View> |
||||
</View> |
||||
<View style={{}}> |
||||
<View> |
||||
<TouchableOpacity onPress={()=> {reSend({ |
||||
company_name:item.company_name, |
||||
permit_status:item.permit_status, |
||||
location:item.location, |
||||
geom:item.geom |
||||
})}}> |
||||
<View style={{flexDirection:'row',justifyContent:'flex-end',padding:6}}> |
||||
<Image |
||||
source={require('../../assets/icon/send.png')} |
||||
style={{width:25,height:25}} |
||||
/> |
||||
{/* <Text style={{fontSize:18,fontWeight:'bold'}}>View</Text> */} |
||||
</View> |
||||
</TouchableOpacity> |
||||
</View> |
||||
</View> |
||||
</View> |
||||
</View> |
||||
<View |
||||
style={{ |
||||
marginTop: 10, |
||||
marginBottom: 10, |
||||
borderBottomColor: 'black', |
||||
borderBottomWidth: 1, |
||||
}} |
||||
/> |
||||
</View>
|
||||
)) |
||||
: |
||||
<View style={{alignItems:'center',padding:20}}> |
||||
<Text style={{fontSize:16,color:'grey'}}>Data Kosong</Text> |
||||
</View> |
||||
} |
||||
</ScrollView> |
||||
<AwesomeAlert |
||||
show={alertOffline} |
||||
showProgress={false} |
||||
title="You are offline" |
||||
message="You need connection for Resend 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}} |
||||
/> |
||||
{/* <Button onPress={getDataAll} title='GetDataByKey'/> */} |
||||
</View> |
||||
); |
||||
} |
||||
|
||||
const styles = StyleSheet.create({ |
||||
container: { |
||||
flex: 1, |
||||
backgroundColor: '#ecf0f1', |
||||
padding: 10, |
||||
}, |
||||
mainContainer: { |
||||
flex: 1, |
||||
padding: 10, |
||||
}, |
||||
title: { |
||||
alignItems: 'center', |
||||
justifyContent: 'center', |
||||
alignSelf: 'center', |
||||
fontWeight: 'bold', |
||||
fontSize: 22, |
||||
color: 'black', |
||||
marginBottom: 10 |
||||
}, |
||||
input: { |
||||
height: 40, |
||||
borderWidth: 1, |
||||
padding: 10, |
||||
borderRadius: 50, |
||||
color: 'black' |
||||
}, |
||||
}); |
||||
|
||||
export default DraftListScreen; |
||||
@ -0,0 +1,109 @@
@@ -0,0 +1,109 @@
|
||||
import React from "react"; |
||||
import { |
||||
TextInput, |
||||
StatusBar, |
||||
StyleSheet, |
||||
Text, |
||||
View, |
||||
Image, |
||||
ScrollView, |
||||
RefreshControl, |
||||
Pressable, |
||||
TouchableOpacity, |
||||
} from 'react-native'; |
||||
import { useEffect, useState } from 'react'; |
||||
|
||||
import AsyncStorage from '@react-native-async-storage/async-storage'; |
||||
import {useIsFocused} from '@react-navigation/native'; |
||||
import AwesomeAlert from "react-native-awesome-alerts"; |
||||
import LinearGradient from 'react-native-linear-gradient'; |
||||
|
||||
export default function MyAccount() { |
||||
return( |
||||
<View style={{flex:1}}> |
||||
<StatusBar backgroundColor="#34A6F8" barStyle={'light-content'} /> |
||||
<View key={"mainBackground"} style={{backgroundColor:'#34A6F8',width:'100%',height:'100%'}} /> |
||||
<View key={"background"} style={{backgroundColor:'#FFFFFF',width:'100%',height:'100%',position:'absolute',borderTopRightRadius:50,borderTopLeftRadius:35,marginTop:10}}> |
||||
<View key={"image section"} style={{alignItems:'center',justifyContent:'center',paddingLeft: 10,paddingRight:10,marginTop:'10%',height:'20%'}}> |
||||
<View key={"image container"} style={[{width:150,height:150,borderRadius:100,borderWidth:12,borderColor:'#EDEDED',alignItems:'center',justifyContent:'center',shadowColor:'black'}]}> |
||||
<Image |
||||
source={require('../../assets/img/mcf.jpg')} |
||||
style={[{width:131,height:131,borderRadius:100}]} |
||||
/> |
||||
</View> |
||||
</View> |
||||
<View key={"detail section"} style={{paddingLeft: 20,paddingRight:20,marginTop:'10%',height:'80%'}}> |
||||
<View key={"name"} style={{marginBottom:20}}> |
||||
<Text style={{color:'#3E434E',fontWeight:600,fontSize:14,marginBottom:10}}>Name :</Text> |
||||
<TextInput style={{ |
||||
backgroundColor:'#F9F9F9', |
||||
color:'#6B5E5E', |
||||
height : 50, |
||||
paddingHorizontal : 20, |
||||
borderColor : "#A6A6A6", |
||||
borderWidth : 1.5, |
||||
borderRadius: 7, |
||||
}} placeholderTextColor={'grey'} value={"Muhammad Choirul Fajri"} autoCorrect={false} autoCapitalize='none' /> |
||||
</View> |
||||
<View key={"email"} style={{marginBottom:20}}> |
||||
<Text style={{color:'#3E434E',fontWeight:600,fontSize:14,marginBottom:10}}>Email :</Text> |
||||
<TextInput style={{ |
||||
backgroundColor:'#F9F9F9', |
||||
color:'#6B5E5E', |
||||
height : 50, |
||||
paddingHorizontal : 20, |
||||
borderColor : "#A6A6A6", |
||||
borderWidth : 1.5, |
||||
borderRadius: 7, |
||||
}} placeholderTextColor={'grey'} autoComplete='email' value={"mfajri@geonet.co.id"} autoCorrect={false} autoCapitalize='none' /> |
||||
</View> |
||||
<View key={"phone"} style={{marginBottom:20}}> |
||||
<Text style={{color:'#3E434E',fontWeight:600,fontSize:14,marginBottom:10}}>Phone :</Text> |
||||
<TextInput style={{ |
||||
backgroundColor:'#F9F9F9', |
||||
color:'#6B5E5E', |
||||
height : 50, |
||||
paddingHorizontal : 20, |
||||
borderColor : "#A6A6A6", |
||||
borderWidth : 1.5, |
||||
borderRadius: 7, |
||||
}} placeholderTextColor={'grey'} value={"6281295807554"} autoCorrect={false} autoCapitalize='none' /> |
||||
</View> |
||||
<View key={"address"} style={{marginBottom:20}}> |
||||
<Text style={{color:'#3E434E',fontWeight:600,fontSize:14,marginBottom:10}}>Address :</Text> |
||||
<TextInput |
||||
multiline |
||||
numberOfLines={5} |
||||
maxLength={255} |
||||
style={{ |
||||
backgroundColor:'#F9F9F9', |
||||
color:'#6B5E5E', |
||||
// height : 50,
|
||||
paddingHorizontal : 20, |
||||
borderColor : "#A6A6A6", |
||||
borderWidth : 1.5, |
||||
borderRadius: 7, |
||||
textAlignVertical:'top' |
||||
}} placeholderTextColor={'grey'} value={"Bekasi, West Java"} autoCorrect={false} autoCapitalize='none' |
||||
/> |
||||
</View> |
||||
<View key={"Button"}> |
||||
<TouchableOpacity> |
||||
<View style={{ |
||||
paddingHorizontal : 20, |
||||
backgroundColor:'#0386D0', |
||||
// borderWidth : 1.5,
|
||||
borderRadius: 7, |
||||
height : 50, |
||||
alignItems:'center', |
||||
justifyContent:'center' |
||||
}}> |
||||
<Text style={{color:'#F5F5F5',fontSize:16,fontWeight:600}}>Save</Text> |
||||
</View> |
||||
</TouchableOpacity> |
||||
</View> |
||||
</View> |
||||
</View> |
||||
</View> |
||||
); |
||||
} |
||||
@ -0,0 +1,194 @@
@@ -0,0 +1,194 @@
|
||||
import React from "react"; |
||||
import { |
||||
TextInput, |
||||
StatusBar, |
||||
StyleSheet, |
||||
Text, |
||||
View, |
||||
Image, |
||||
ScrollView, |
||||
RefreshControl, |
||||
Pressable, |
||||
TouchableOpacity, |
||||
} from 'react-native'; |
||||
import { useEffect, useState } from 'react'; |
||||
|
||||
import AsyncStorage from '@react-native-async-storage/async-storage'; |
||||
import {useIsFocused} from '@react-navigation/native'; |
||||
import AwesomeAlert from "react-native-awesome-alerts"; |
||||
import LinearGradient from 'react-native-linear-gradient'; |
||||
import { useAuth } from "./authContext"; |
||||
|
||||
export default function SettingScreen({navigation}:any){ |
||||
const { authState, onLogout} = useAuth(); |
||||
const [iconActive,setIconActive] = useState('#0386D0') |
||||
|
||||
// const logout = () => {
|
||||
// onLogout();
|
||||
// }
|
||||
return( |
||||
<View style={{flex:1}}> |
||||
<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,marginTop:10}}> |
||||
<View style={{paddingLeft: 10,paddingRight:10,marginTop:'15%'}}> |
||||
<LinearGradient |
||||
colors={['#0386D0', '#02446A']} |
||||
start={{x: 0, y: 0}} |
||||
end={{x: 1, y: 1}} |
||||
style={{ |
||||
width:'100%', |
||||
height:90, |
||||
borderRadius:10, |
||||
paddingLeft:20, |
||||
paddingRight:20, |
||||
flexDirection:'row', |
||||
alignItems:'center', |
||||
columnGap:20 |
||||
}} |
||||
> |
||||
<View key={"image container"} style={[{width:70,height:70,borderRadius:100,borderWidth:4,borderColor:'white',alignItems:'center',justifyContent:'center'}]}> |
||||
<Image |
||||
source={require('../../assets/img/mcf.jpg')} |
||||
style={[{width:65,height:65,borderRadius:100}]} |
||||
/> |
||||
</View> |
||||
<View> |
||||
<Text style={{color:'#FFFFFF',fontSize:15,fontWeight:600}}>Muhammad Choirul Fajri</Text> |
||||
<Text style={{color:'#FFFFFF',fontSize:13,fontWeight:400}}>mfajri@geonet.co.id</Text> |
||||
</View> |
||||
</LinearGradient> |
||||
<View style={{marginTop:'5%'}}> |
||||
<Text style={{fontWeight:600,fontSize:18,color:'#000000',padding:20}}> |
||||
Account Setting |
||||
</Text> |
||||
<TouchableOpacity onPress={()=>{ |
||||
navigation.navigate('My Account') |
||||
}} style={{flexDirection:"row",padding:30,alignItems:'center'}}> |
||||
<View style={{width:'15%'}}> |
||||
<Image |
||||
source={require('../../assets/icon/Profile_Icon.png')} |
||||
style={{}} |
||||
/> |
||||
</View> |
||||
<View style={{flexDirection:'column',width:'75%'}}> |
||||
<Text style={{fontWeight:600,fontSize:14,color:'#181D27'}}>My Account</Text> |
||||
<Text style={{fontWeight:400,fontSize:12,color:'#ABABAB'}}>Make changes to your account</Text> |
||||
</View> |
||||
<View style={{width:'10%'}}> |
||||
<Image |
||||
source={require('../../assets/icon/Month_Chevron.png')} |
||||
style={{}} |
||||
/> |
||||
</View> |
||||
</TouchableOpacity> |
||||
<View style={{alignSelf:'center',width:'85%',borderBottomWidth:1,borderBottomColor:"#D2D2D2"}} /> |
||||
<TouchableOpacity onPress={()=>{ |
||||
navigation.navigate('Change Password') |
||||
}} style={{flexDirection:"row",padding:30,alignItems:'center'}}> |
||||
<View style={{width:'15%'}}> |
||||
<Image |
||||
source={require('../../assets/icon/change_pass.png')} |
||||
style={{}} |
||||
/> |
||||
</View> |
||||
<View style={{flexDirection:'column',width:'75%'}}> |
||||
<Text style={{fontWeight:600,fontSize:14,color:'#181D27'}}>Change Password</Text> |
||||
<Text style={{fontWeight:400,fontSize:12,color:'#ABABAB'}}>Change your account password</Text> |
||||
</View> |
||||
<View style={{width:'10%'}}> |
||||
<Image |
||||
source={require('../../assets/icon/Month_Chevron.png')} |
||||
style={{}} |
||||
/> |
||||
</View> |
||||
</TouchableOpacity> |
||||
<View style={{alignSelf:'center',width:'85%',borderBottomWidth:1,borderBottomColor:"#D2D2D2"}} /> |
||||
<TouchableOpacity
|
||||
onPress={()=> { |
||||
onLogout() |
||||
navigation.navigate('Home'); |
||||
}} |
||||
style={{flexDirection:"row",padding:30,alignItems:'center'}}> |
||||
<View style={{width:'15%'}}> |
||||
<Image |
||||
source={require('../../assets/icon/logout.png')} |
||||
style={{}} |
||||
/> |
||||
</View> |
||||
<View style={{flexDirection:'column',width:'75%'}}> |
||||
<Text style={{fontWeight:600,fontSize:14,color:'#181D27'}}>Logout</Text> |
||||
<Text style={{fontWeight:400,fontSize:12,color:'#ABABAB'}}>Further secure your account for safety</Text> |
||||
</View> |
||||
<View style={{width:'10%'}}> |
||||
<Image |
||||
source={require('../../assets/icon/Month_Chevron.png')} |
||||
style={{}} |
||||
/> |
||||
</View> |
||||
</TouchableOpacity> |
||||
|
||||
</View> |
||||
</View> |
||||
</View> |
||||
<View key={"background2"} style={{backgroundColor:'#FFFFFF',width:'100%',height:'7%',borderTopColor:'#A6A6A6B2',borderTopWidth:2, flexDirection:'row',justifyContent:'space-around',alignItems:'center'}}> |
||||
<Pressable> |
||||
<Image |
||||
source={require('../../assets/icon/home.png')} |
||||
style={[styles.buttonImageIconStyle]} |
||||
/> |
||||
</Pressable> |
||||
<Pressable onPress={()=>{ |
||||
navigation.navigate('Survey', { screen: 'Survey', }) |
||||
}}> |
||||
<Image |
||||
source={require('../../assets/icon/Survey_Icon.png')} |
||||
style={styles.buttonImageIconStyle} |
||||
/> |
||||
</Pressable> |
||||
<Pressable onPress={()=>{ |
||||
navigation.navigate('Setting', { screen: 'Setting', }) |
||||
}}> |
||||
<Image |
||||
source={require('../../assets/icon/Setting.png')} |
||||
style={[styles.buttonImageIconStyle,{tintColor:iconActive}]} |
||||
/> |
||||
</Pressable> |
||||
</View> |
||||
|
||||
</View> |
||||
) |
||||
} |
||||
const styles = StyleSheet.create({ |
||||
container: { |
||||
flex: 1, |
||||
backgroundColor: '#ecf0f1', |
||||
padding: 10, |
||||
}, |
||||
mainContainer: { |
||||
flex: 1, |
||||
}, |
||||
title: { |
||||
alignItems: 'center', |
||||
justifyContent: 'center', |
||||
alignSelf: 'center', |
||||
fontWeight: 'bold', |
||||
fontSize: 22, |
||||
color: 'black', |
||||
marginBottom: 10 |
||||
}, |
||||
input: { |
||||
height: 40, |
||||
borderWidth: 1, |
||||
padding: 10, |
||||
borderRadius: 50, |
||||
color: 'black' |
||||
}, |
||||
buttonImageIconStyle: { |
||||
padding: 10, |
||||
margin: 5, |
||||
height: 25, |
||||
width: 25, |
||||
resizeMode: 'stretch', |
||||
}, |
||||
}); |
||||
Loading…
Reference in new issue