Irul24
1 year ago
19 changed files with 2994 additions and 674 deletions
|
After Width: | Height: | Size: 232 B |
|
After Width: | Height: | Size: 383 B |
@ -0,0 +1,646 @@ |
|||||||
|
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,339 @@ |
|||||||
|
import { Alert, Animated, Keyboard, RefreshControl, BackHandler } from 'react-native'; |
||||||
|
import { |
||||||
|
TextInput, |
||||||
|
Button, |
||||||
|
PermissionsAndroid, |
||||||
|
StatusBar, |
||||||
|
StyleSheet, |
||||||
|
Text, |
||||||
|
View, |
||||||
|
Image, |
||||||
|
TouchableOpacity, |
||||||
|
ScrollView, |
||||||
|
FlatList, |
||||||
|
Dimensions |
||||||
|
} from 'react-native'; |
||||||
|
import { useCallback, useEffect, useState } from 'react'; |
||||||
|
|
||||||
|
import {useNavigation,NavigationContainer,useIsFocused } from '@react-navigation/native'; |
||||||
|
import {createNativeStackNavigator} from '@react-navigation/native-stack'; |
||||||
|
import { SelectList } from 'react-native-dropdown-select-list'; |
||||||
|
import { PDAM_API_URL, PJU_API_URL, PERMIT_API_URL } from '../../urlConfig'; |
||||||
|
import React from 'react'; |
||||||
|
import RNFetchBlob from 'rn-fetch-blob'; |
||||||
|
import { MenuProvider } from 'react-native-popup-menu'; |
||||||
|
import { |
||||||
|
Menu, |
||||||
|
MenuOptions, |
||||||
|
MenuOption, |
||||||
|
MenuTrigger, |
||||||
|
} from 'react-native-popup-menu'; |
||||||
|
|
||||||
|
|
||||||
|
type inboxListDataProps = {route: any,navigation: any}; |
||||||
|
function InboxPDAM({route,navigation}: inboxListDataProps) { |
||||||
|
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 [inboxData, setInboxData] = useState([]); |
||||||
|
const [inboxDataPDAM, setInboxDataPDAM] = useState([]); |
||||||
|
const [inboxDataPERMIT, setInboxDataPERMIT] = useState([]); |
||||||
|
const [filterData, setFilterData] = useState([]); |
||||||
|
const [stringFilter,setStingFilter] = useState('') |
||||||
|
const [loading,setLoading] = useState(false); |
||||||
|
const onRefresh = useCallback(() => { |
||||||
|
setRefreshing(true); |
||||||
|
setTimeout(() => { |
||||||
|
setRefreshing(false); |
||||||
|
setStingFilter("") |
||||||
|
setFilterData([]) |
||||||
|
getDataPDAM() |
||||||
|
}, 2000); |
||||||
|
}, []); |
||||||
|
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', |
||||||
|
}, |
||||||
|
}; |
||||||
|
const animation = { |
||||||
|
one: new Animated.Value(0), |
||||||
|
two: new Animated.Value(0), |
||||||
|
three: new Animated.Value(0) |
||||||
|
}; |
||||||
|
const onAnimate = (animation:any,nexAnimation:any) => { |
||||||
|
Animated.sequence([ |
||||||
|
Animated.timing(animation, { |
||||||
|
toValue: -10, |
||||||
|
duration:500, |
||||||
|
useNativeDriver: true |
||||||
|
}), |
||||||
|
Animated.timing(animation, { |
||||||
|
toValue: 0, |
||||||
|
duration:500, |
||||||
|
useNativeDriver: true |
||||||
|
}) |
||||||
|
]).start(); |
||||||
|
setTimeout(nexAnimation,200); |
||||||
|
|
||||||
|
}; |
||||||
|
const onStartAnimate = () => { |
||||||
|
const onThreeAnimation = () => { |
||||||
|
onAnimate(animation.three,()=>{ |
||||||
|
setTimeout(onStartAnimate,800); |
||||||
|
}); |
||||||
|
} |
||||||
|
const onTwoAnimation = () => { |
||||||
|
onAnimate(animation.two,onThreeAnimation); |
||||||
|
} |
||||||
|
onAnimate(animation.one,onTwoAnimation); |
||||||
|
}; |
||||||
|
const getDataPDAM = async () => { |
||||||
|
try { |
||||||
|
const url = `${PDAM_API_URL}/` |
||||||
|
await RNFetchBlob.config({ |
||||||
|
trusty : true |
||||||
|
}) |
||||||
|
.fetch('GET', url) |
||||||
|
.then((resp) => { |
||||||
|
const json = resp.json() |
||||||
|
setInboxDataPDAM(json) |
||||||
|
}) |
||||||
|
} catch (e) { |
||||||
|
console.log("error",e); |
||||||
|
Alert.alert('Internal Server Error', "Network Request Failed",[ |
||||||
|
{ |
||||||
|
text: 'Ok' |
||||||
|
} |
||||||
|
]) |
||||||
|
} |
||||||
|
|
||||||
|
}; |
||||||
|
const isFocused = useIsFocused(); |
||||||
|
useEffect(() => { |
||||||
|
if(isFocused){ |
||||||
|
setFilterData([]); |
||||||
|
setStingFilter(""); |
||||||
|
getDataPDAM() |
||||||
|
} |
||||||
|
},[isFocused]); |
||||||
|
const handleSearch = (text:string) => { |
||||||
|
const formattedQuery = text.toLowerCase(); |
||||||
|
const filteredData = inboxDataPDAM.filter((data:any) => |
||||||
|
data.nama.toLowerCase().includes(formattedQuery) |
||||||
|
) |
||||||
|
setFilterData(filteredData) |
||||||
|
}; |
||||||
|
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={styles.container} |
||||||
|
refreshControl={ |
||||||
|
<RefreshControl refreshing={refreshing} onRefresh={onRefresh} /> |
||||||
|
} |
||||||
|
> |
||||||
|
{ |
||||||
|
filterData.length > 0 ? |
||||||
|
filterData.map((item:any) => ( |
||||||
|
<View key={item.id}> |
||||||
|
<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 Pipa</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.nama}</Text> |
||||||
|
<Text style={{fontSize:14,fontWeight:'400',color:'#000000',padding:5}}>: {item.jenis}</Text> |
||||||
|
<Text style={{fontSize:14,fontWeight:'400',color:'#000000',padding:5}}>: {item.tanggal_installasi}</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('PDAM Editing',{ screen: 'Edit',data: { |
||||||
|
id:item.id, |
||||||
|
nama:item.nama, |
||||||
|
jenis:item.jenis, |
||||||
|
tanggal_installasi:item.tanggal_installasi, |
||||||
|
status:item.status, |
||||||
|
keterangan:item.keterangan, |
||||||
|
}})} |
||||||
|
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'}} |
||||||
|
/> */} |
||||||
|
</MenuOptions> |
||||||
|
</Menu> |
||||||
|
</MenuProvider> |
||||||
|
</View> |
||||||
|
</View> |
||||||
|
<View |
||||||
|
style={{ |
||||||
|
marginTop: 10, |
||||||
|
marginBottom: 10, |
||||||
|
borderBottomColor: 'black', |
||||||
|
borderBottomWidth: 1, |
||||||
|
}} |
||||||
|
/> |
||||||
|
</View>
|
||||||
|
)) |
||||||
|
: |
||||||
|
inboxDataPDAM.length > 0 && stringFilter === "" ? |
||||||
|
inboxDataPDAM.map((item:any) => ( |
||||||
|
<View key={item.id}> |
||||||
|
<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 Pipa</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.nama}</Text> |
||||||
|
<Text style={{fontSize:14,fontWeight:'400',color:'#000000',padding:5}}>: {item.jenis}</Text> |
||||||
|
<Text style={{fontSize:14,fontWeight:'400',color:'#000000',padding:5}}>: {item.tanggal_installasi}</Text> |
||||||
|
<Text style={{fontSize:14,fontWeight:'400',color:'#000000',padding:5}}>: {item.status}</Text> |
||||||
|
</View> |
||||||
|
<View style={{ marginLeft:'55%',marginTop:0,width:150,height:60,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('PDAM Editing',{ screen: 'Edit',data: { |
||||||
|
id:item.id, |
||||||
|
nama:item.nama, |
||||||
|
jenis:item.jenis, |
||||||
|
tanggal_installasi:item.tanggal_installasi, |
||||||
|
status:item.status, |
||||||
|
keterangan:item.keterangan, |
||||||
|
}})} |
||||||
|
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>}
|
||||||
|
/> |
||||||
|
</MenuOptions> |
||||||
|
</Menu> |
||||||
|
</MenuProvider> |
||||||
|
</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> |
||||||
|
</View> |
||||||
|
|
||||||
|
{/* <Button title='getDataPJUByKey'/> */} |
||||||
|
</View> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
const styles = StyleSheet.create({ |
||||||
|
container: { |
||||||
|
padding: 30, |
||||||
|
}, |
||||||
|
mainContainer: { |
||||||
|
flex: 1, |
||||||
|
}, |
||||||
|
title: { |
||||||
|
textAlign:'center', |
||||||
|
fontSize: 20, |
||||||
|
color: 'black', |
||||||
|
}, |
||||||
|
label: { |
||||||
|
color:'black',
|
||||||
|
fontSize:12,
|
||||||
|
fontWeight:'light',
|
||||||
|
textAlign:'center', |
||||||
|
paddingTop:20 |
||||||
|
}, |
||||||
|
input: { |
||||||
|
height: 40, |
||||||
|
borderWidth: 1, |
||||||
|
padding: 10, |
||||||
|
borderRadius: 50, |
||||||
|
color: 'black' |
||||||
|
}, |
||||||
|
}); |
||||||
|
|
||||||
|
export default InboxPDAM; |
||||||
@ -0,0 +1,343 @@ |
|||||||
|
import { Alert, Animated, Keyboard, RefreshControl, BackHandler } from 'react-native'; |
||||||
|
import { |
||||||
|
TextInput, |
||||||
|
Button, |
||||||
|
PermissionsAndroid, |
||||||
|
StatusBar, |
||||||
|
StyleSheet, |
||||||
|
Text, |
||||||
|
View, |
||||||
|
Image, |
||||||
|
TouchableOpacity, |
||||||
|
ScrollView, |
||||||
|
FlatList, |
||||||
|
Dimensions |
||||||
|
} from 'react-native'; |
||||||
|
import { useCallback, useEffect, useState } from 'react'; |
||||||
|
|
||||||
|
import {useNavigation,NavigationContainer,useIsFocused } from '@react-navigation/native'; |
||||||
|
import {createNativeStackNavigator} from '@react-navigation/native-stack'; |
||||||
|
import { SelectList } from 'react-native-dropdown-select-list'; |
||||||
|
import { PDAM_API_URL, PJU_API_URL, PERMIT_API_URL } from '../../urlConfig'; |
||||||
|
import React from 'react'; |
||||||
|
import RNFetchBlob from 'rn-fetch-blob'; |
||||||
|
import { MenuProvider } from 'react-native-popup-menu'; |
||||||
|
import { |
||||||
|
Menu, |
||||||
|
MenuOptions, |
||||||
|
MenuOption, |
||||||
|
MenuTrigger, |
||||||
|
} from 'react-native-popup-menu'; |
||||||
|
|
||||||
|
|
||||||
|
type inboxListDataProps = {route: any,navigation: any}; |
||||||
|
function InboxPJU({route,navigation}: inboxListDataProps) { |
||||||
|
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 [inboxData, setInboxData] = useState([]); |
||||||
|
const [inboxDataPDAM, setInboxDataPDAM] = useState([]); |
||||||
|
const [inboxDataPERMIT, setInboxDataPERMIT] = useState([]); |
||||||
|
const [filterData, setFilterData] = useState([]); |
||||||
|
const [stringFilter,setStingFilter] = useState('') |
||||||
|
const [loading,setLoading] = useState(false); |
||||||
|
const onRefresh = useCallback(() => { |
||||||
|
setRefreshing(true); |
||||||
|
setTimeout(() => { |
||||||
|
setRefreshing(false); |
||||||
|
setStingFilter("") |
||||||
|
setFilterData([]) |
||||||
|
getDataPJU() |
||||||
|
}, 2000); |
||||||
|
}, []); |
||||||
|
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', |
||||||
|
}, |
||||||
|
}; |
||||||
|
const animation = { |
||||||
|
one: new Animated.Value(0), |
||||||
|
two: new Animated.Value(0), |
||||||
|
three: new Animated.Value(0) |
||||||
|
}; |
||||||
|
const onAnimate = (animation:any,nexAnimation:any) => { |
||||||
|
Animated.sequence([ |
||||||
|
Animated.timing(animation, { |
||||||
|
toValue: -10, |
||||||
|
duration:500, |
||||||
|
useNativeDriver: true |
||||||
|
}), |
||||||
|
Animated.timing(animation, { |
||||||
|
toValue: 0, |
||||||
|
duration:500, |
||||||
|
useNativeDriver: true |
||||||
|
}) |
||||||
|
]).start(); |
||||||
|
setTimeout(nexAnimation,200); |
||||||
|
|
||||||
|
}; |
||||||
|
const onStartAnimate = () => { |
||||||
|
const onThreeAnimation = () => { |
||||||
|
onAnimate(animation.three,()=>{ |
||||||
|
setTimeout(onStartAnimate,800); |
||||||
|
}); |
||||||
|
} |
||||||
|
const onTwoAnimation = () => { |
||||||
|
onAnimate(animation.two,onThreeAnimation); |
||||||
|
} |
||||||
|
onAnimate(animation.one,onTwoAnimation); |
||||||
|
}; |
||||||
|
const getDataPJU = async () => { |
||||||
|
try { |
||||||
|
const url = `${PJU_API_URL}/` |
||||||
|
await RNFetchBlob.config({ |
||||||
|
trusty : true |
||||||
|
}) |
||||||
|
.fetch('GET', url) |
||||||
|
.then((resp) => { |
||||||
|
const json = resp.json() |
||||||
|
setInboxData(json) |
||||||
|
}) |
||||||
|
} catch (e) { |
||||||
|
console.log("error",e); |
||||||
|
Alert.alert('Internal Server Error', "Network Request Failed",[ |
||||||
|
{ |
||||||
|
text: 'Ok' |
||||||
|
} |
||||||
|
]) |
||||||
|
} |
||||||
|
|
||||||
|
}; |
||||||
|
const isFocused = useIsFocused(); |
||||||
|
useEffect(() => { |
||||||
|
if(isFocused){ |
||||||
|
setFilterData([]); |
||||||
|
setStingFilter(""); |
||||||
|
getDataPJU() |
||||||
|
} |
||||||
|
},[isFocused]); |
||||||
|
const handleSearch = (text:string) => { |
||||||
|
const formattedQuery = text.toLowerCase(); |
||||||
|
const filteredData = inboxData.filter((data:any) => |
||||||
|
data.nama.toLowerCase().includes(formattedQuery) |
||||||
|
) |
||||||
|
setFilterData(filteredData) |
||||||
|
}; |
||||||
|
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={styles.container} |
||||||
|
refreshControl={ |
||||||
|
<RefreshControl refreshing={refreshing} onRefresh={onRefresh} /> |
||||||
|
} |
||||||
|
> |
||||||
|
{ |
||||||
|
filterData.length > 0 ? |
||||||
|
filterData.map((item:any) => ( |
||||||
|
<View key={item.id}> |
||||||
|
<View style={{flexDirection:'row'}}> |
||||||
|
<View style={{ flexDirection:'column',paddingLeft:0,width:'35%'}}> |
||||||
|
<Text style={{fontSize:14,color:'#000000',fontWeight:'600',padding:5}}>Nama JPU</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.nama}</Text> |
||||||
|
<Text style={{fontSize:14,fontWeight:'400',color:'#000000',padding:5}}>: {item.jenis}</Text> |
||||||
|
<Text style={{fontSize:14,fontWeight:'400',color:'#000000',padding:5}}>: {item.tanggal_installasi}</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.nama, |
||||||
|
jenis:item.jenis, |
||||||
|
tanggal_installasi:item.tanggal_installasi, |
||||||
|
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'}} |
||||||
|
/> */} |
||||||
|
</MenuOptions> |
||||||
|
</Menu> |
||||||
|
</MenuProvider> |
||||||
|
</View> |
||||||
|
</View> |
||||||
|
<View |
||||||
|
style={{ |
||||||
|
marginTop: 10, |
||||||
|
marginBottom: 10, |
||||||
|
borderBottomColor: 'black', |
||||||
|
borderBottomWidth: 1, |
||||||
|
}} |
||||||
|
/> |
||||||
|
</View>
|
||||||
|
)) |
||||||
|
: |
||||||
|
inboxData.length > 0 && stringFilter === "" ? |
||||||
|
inboxData.map((item:any) => ( |
||||||
|
<View key={item.id}> |
||||||
|
<View style={{flexDirection:'row'}}> |
||||||
|
<View style={{ flexDirection:'column',paddingLeft:0,width:'35%'}}> |
||||||
|
<Text style={{fontSize:14,color:'#000000',fontWeight:'600',padding:5}}>Nama JPU</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.nama}</Text> |
||||||
|
<Text style={{fontSize:14,fontWeight:'400',color:'#000000',padding:5}}>: {item.jenis}</Text> |
||||||
|
<Text style={{fontSize:14,fontWeight:'400',color:'#000000',padding:5}}>: {item.tanggal_installasi}</Text> |
||||||
|
<Text style={{fontSize:14,fontWeight:'400',color:'#000000',padding:5}}>: {item.status}</Text> |
||||||
|
</View> |
||||||
|
<View style={{ marginLeft:'55%',marginTop:0,width:150,height:60,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.nama, |
||||||
|
jenis:item.jenis, |
||||||
|
tanggal_installasi:item.tanggal_installasi, |
||||||
|
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>}
|
||||||
|
/> |
||||||
|
</MenuOptions> |
||||||
|
</Menu> |
||||||
|
</MenuProvider> |
||||||
|
</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> |
||||||
|
</View> |
||||||
|
|
||||||
|
{/* <Button title='getDataPJUByKey'/> */} |
||||||
|
</View> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
const styles = StyleSheet.create({ |
||||||
|
container: { |
||||||
|
padding: 30, |
||||||
|
}, |
||||||
|
mainContainer: { |
||||||
|
flex: 1, |
||||||
|
}, |
||||||
|
title: { |
||||||
|
textAlign:'center', |
||||||
|
fontSize: 20, |
||||||
|
color: 'black', |
||||||
|
}, |
||||||
|
label: { |
||||||
|
color:'black',
|
||||||
|
fontSize:12,
|
||||||
|
fontWeight:'light',
|
||||||
|
textAlign:'center', |
||||||
|
paddingTop:20 |
||||||
|
}, |
||||||
|
input: { |
||||||
|
height: 40, |
||||||
|
borderWidth: 1, |
||||||
|
padding: 10, |
||||||
|
borderRadius: 50, |
||||||
|
color: 'black' |
||||||
|
}, |
||||||
|
}); |
||||||
|
|
||||||
|
export default InboxPJU; |
||||||
@ -0,0 +1,328 @@ |
|||||||
|
import { Alert, Animated, Keyboard, RefreshControl, BackHandler } from 'react-native'; |
||||||
|
import { |
||||||
|
TextInput, |
||||||
|
Button, |
||||||
|
PermissionsAndroid, |
||||||
|
StatusBar, |
||||||
|
StyleSheet, |
||||||
|
Text, |
||||||
|
View, |
||||||
|
Image, |
||||||
|
TouchableOpacity, |
||||||
|
ScrollView, |
||||||
|
FlatList, |
||||||
|
Dimensions |
||||||
|
} from 'react-native'; |
||||||
|
import { useCallback, useEffect, useState } from 'react'; |
||||||
|
|
||||||
|
import {useNavigation,NavigationContainer,useIsFocused } from '@react-navigation/native'; |
||||||
|
import {createNativeStackNavigator} from '@react-navigation/native-stack'; |
||||||
|
import { SelectList } from 'react-native-dropdown-select-list'; |
||||||
|
import { PDAM_API_URL, PJU_API_URL, PERMIT_API_URL } from '../../urlConfig'; |
||||||
|
import React from 'react'; |
||||||
|
import RNFetchBlob from 'rn-fetch-blob'; |
||||||
|
import { MenuProvider } from 'react-native-popup-menu'; |
||||||
|
import { |
||||||
|
Menu, |
||||||
|
MenuOptions, |
||||||
|
MenuOption, |
||||||
|
MenuTrigger, |
||||||
|
} from 'react-native-popup-menu'; |
||||||
|
|
||||||
|
|
||||||
|
type inboxListDataProps = {route: any,navigation: any}; |
||||||
|
function InboxPermit({route,navigation}: inboxListDataProps) { |
||||||
|
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 [inboxData, setInboxData] = useState([]); |
||||||
|
const [inboxDataPDAM, setInboxDataPDAM] = useState([]); |
||||||
|
const [inboxDataPERMIT, setInboxDataPERMIT] = useState([]); |
||||||
|
const [filterData, setFilterData] = useState([]); |
||||||
|
const [stringFilter,setStingFilter] = useState('') |
||||||
|
const [loading,setLoading] = useState(false); |
||||||
|
const onRefresh = useCallback(() => { |
||||||
|
setRefreshing(true); |
||||||
|
setTimeout(() => { |
||||||
|
setRefreshing(false); |
||||||
|
setStingFilter("") |
||||||
|
setFilterData([]) |
||||||
|
getDataPERMIT() |
||||||
|
}, 2000); |
||||||
|
}, []); |
||||||
|
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', |
||||||
|
}, |
||||||
|
}; |
||||||
|
const animation = { |
||||||
|
one: new Animated.Value(0), |
||||||
|
two: new Animated.Value(0), |
||||||
|
three: new Animated.Value(0) |
||||||
|
}; |
||||||
|
const onAnimate = (animation:any,nexAnimation:any) => { |
||||||
|
Animated.sequence([ |
||||||
|
Animated.timing(animation, { |
||||||
|
toValue: -10, |
||||||
|
duration:500, |
||||||
|
useNativeDriver: true |
||||||
|
}), |
||||||
|
Animated.timing(animation, { |
||||||
|
toValue: 0, |
||||||
|
duration:500, |
||||||
|
useNativeDriver: true |
||||||
|
}) |
||||||
|
]).start(); |
||||||
|
setTimeout(nexAnimation,200); |
||||||
|
|
||||||
|
}; |
||||||
|
const onStartAnimate = () => { |
||||||
|
const onThreeAnimation = () => { |
||||||
|
onAnimate(animation.three,()=>{ |
||||||
|
setTimeout(onStartAnimate,800); |
||||||
|
}); |
||||||
|
} |
||||||
|
const onTwoAnimation = () => { |
||||||
|
onAnimate(animation.two,onThreeAnimation); |
||||||
|
} |
||||||
|
onAnimate(animation.one,onTwoAnimation); |
||||||
|
}; |
||||||
|
const getDataPERMIT = async () => { |
||||||
|
try { |
||||||
|
const url = `${PERMIT_API_URL}/` |
||||||
|
await RNFetchBlob.config({ |
||||||
|
trusty : true |
||||||
|
}) |
||||||
|
.fetch('GET', url) |
||||||
|
.then((resp) => { |
||||||
|
const json = resp.json() |
||||||
|
setInboxDataPERMIT(json) |
||||||
|
}) |
||||||
|
} catch (e) { |
||||||
|
console.log("error",e); |
||||||
|
Alert.alert('Internal Server Error', "Network Request Failed",[ |
||||||
|
{ |
||||||
|
text: 'Ok' |
||||||
|
} |
||||||
|
]) |
||||||
|
} |
||||||
|
|
||||||
|
}; |
||||||
|
const isFocused = useIsFocused(); |
||||||
|
useEffect(() => { |
||||||
|
if(isFocused){ |
||||||
|
setFilterData([]); |
||||||
|
setStingFilter(""); |
||||||
|
getDataPERMIT() |
||||||
|
} |
||||||
|
},[isFocused]); |
||||||
|
const handleSearch = (text:string) => { |
||||||
|
const formattedQuery = text.toLowerCase(); |
||||||
|
const filteredData = inboxDataPERMIT.filter((data:any) => |
||||||
|
data.company_name.toLowerCase().includes(formattedQuery) |
||||||
|
); |
||||||
|
setFilterData(filteredData) |
||||||
|
}; |
||||||
|
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={styles.container} |
||||||
|
refreshControl={ |
||||||
|
<RefreshControl refreshing={refreshing} onRefresh={onRefresh} /> |
||||||
|
} |
||||||
|
> |
||||||
|
{ |
||||||
|
filterData.length > 0 ? |
||||||
|
filterData.map((item:any) => ( |
||||||
|
<View key={item.id}> |
||||||
|
<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}}>Company Name</Text> |
||||||
|
<Text style={{fontSize:14,color:'#000000',fontWeight:'600',padding:5}}>Permit Status</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> |
||||||
|
</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'}} |
||||||
|
/> */} |
||||||
|
</MenuOptions> |
||||||
|
</Menu> |
||||||
|
</MenuProvider> |
||||||
|
</View> |
||||||
|
</View> |
||||||
|
<View |
||||||
|
style={{ |
||||||
|
marginTop: 10, |
||||||
|
marginBottom: 10, |
||||||
|
borderBottomColor: 'black', |
||||||
|
borderBottomWidth: 1, |
||||||
|
}} |
||||||
|
/> |
||||||
|
</View>
|
||||||
|
)) |
||||||
|
: |
||||||
|
inboxDataPERMIT.length > 0 && stringFilter === "" ? |
||||||
|
inboxDataPERMIT.map((item:any) => ( |
||||||
|
<View key={item.id}> |
||||||
|
<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> |
||||||
|
</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> |
||||||
|
</View> |
||||||
|
<View style={{ marginLeft:'55%',marginTop:0,width:150,height:60,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>}
|
||||||
|
/> |
||||||
|
</MenuOptions> |
||||||
|
</Menu> |
||||||
|
</MenuProvider> |
||||||
|
</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> |
||||||
|
</View> |
||||||
|
|
||||||
|
{/* <Button title='getDataPJUByKey'/> */} |
||||||
|
</View> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
const styles = StyleSheet.create({ |
||||||
|
container: { |
||||||
|
padding: 30, |
||||||
|
}, |
||||||
|
mainContainer: { |
||||||
|
flex: 1, |
||||||
|
}, |
||||||
|
title: { |
||||||
|
textAlign:'center', |
||||||
|
fontSize: 20, |
||||||
|
color: 'black', |
||||||
|
}, |
||||||
|
label: { |
||||||
|
color:'black',
|
||||||
|
fontSize:12,
|
||||||
|
fontWeight:'light',
|
||||||
|
textAlign:'center', |
||||||
|
paddingTop:20 |
||||||
|
}, |
||||||
|
input: { |
||||||
|
height: 40, |
||||||
|
borderWidth: 1, |
||||||
|
padding: 10, |
||||||
|
borderRadius: 50, |
||||||
|
color: 'black' |
||||||
|
}, |
||||||
|
}); |
||||||
|
|
||||||
|
export default InboxPermit; |
||||||
@ -0,0 +1,291 @@ |
|||||||
|
import { RefreshControl } from 'react-native'; |
||||||
|
import { |
||||||
|
TextInput, |
||||||
|
StatusBar, |
||||||
|
StyleSheet, |
||||||
|
Text, |
||||||
|
View, |
||||||
|
Image, |
||||||
|
ScrollView |
||||||
|
} from 'react-native'; |
||||||
|
|
||||||
|
import AsyncStorage from '@react-native-async-storage/async-storage'; |
||||||
|
import {useIsFocused} from '@react-navigation/native'; |
||||||
|
import { useCallback, useEffect, useState } from 'react'; |
||||||
|
import AwesomeAlert from 'react-native-awesome-alerts'; |
||||||
|
import NetInfo from "@react-native-community/netinfo"; |
||||||
|
import { MenuProvider } from 'react-native-popup-menu'; |
||||||
|
import { |
||||||
|
Menu, |
||||||
|
MenuOptions, |
||||||
|
MenuOption, |
||||||
|
MenuTrigger, |
||||||
|
} from 'react-native-popup-menu'; |
||||||
|
type sendListDataProps = {route: any,navigation: any}; |
||||||
|
function SentListPDAM({route,navigation}: sendListDataProps) { |
||||||
|
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 [alertOffline, setAlertOffline] = useState(false); |
||||||
|
const [connected, setConnected] = useState(true) |
||||||
|
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 getDataPDAM = async () => { |
||||||
|
setLocalStorage([]) |
||||||
|
try { |
||||||
|
const jsonValue = await AsyncStorage.getAllKeys() |
||||||
|
if(jsonValue.length != 0) { |
||||||
|
jsonValue.map((item) => { |
||||||
|
if(item != "USER_DATA" && item != "my-jwt"){ |
||||||
|
let splited = item.split(" / "); |
||||||
|
if(splited.length === 8){ |
||||||
|
const objectItem = { |
||||||
|
id:splited[0], |
||||||
|
pipe_name:splited[1], |
||||||
|
pipe_type:splited[2], |
||||||
|
installation_date:splited[3], |
||||||
|
status:splited[4], |
||||||
|
keterangan:splited[5], |
||||||
|
geom:splited[6].split(",") |
||||||
|
} |
||||||
|
console.log(objectItem); |
||||||
|
|
||||||
|
if(splited[7] === 'sentPDAM'){ |
||||||
|
setLocalStorage(oldArray => [...oldArray,objectItem]) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
} catch (error) { |
||||||
|
|
||||||
|
} |
||||||
|
}; |
||||||
|
const isFocused = useIsFocused(); |
||||||
|
useEffect(() => { |
||||||
|
if(isFocused){ |
||||||
|
getDataPDAM() |
||||||
|
// getData()
|
||||||
|
// .catch(console.error);
|
||||||
|
const unsubscribe = NetInfo.addEventListener((state) => { |
||||||
|
setConnected(state.isConnected!) |
||||||
|
}); |
||||||
|
return () => { |
||||||
|
unsubscribe(); |
||||||
|
}; |
||||||
|
}; |
||||||
|
},[isFocused]) |
||||||
|
navigation.addListener('beforeRemove', (e:any)=> { |
||||||
|
}) |
||||||
|
const [stringFilter,setStingFilter] = useState('') |
||||||
|
const handleSearch = (text:string) => { |
||||||
|
const formattedQuery = text.toLowerCase(); |
||||||
|
const filteredData = localStorage.filter((data:any) => |
||||||
|
data.case_name.toLowerCase().includes(formattedQuery) |
||||||
|
) |
||||||
|
setFilterData(filteredData) |
||||||
|
|
||||||
|
}; |
||||||
|
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}}>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('PDAM Editing',{ screen: 'Edit',data: { |
||||||
|
id:item.id, |
||||||
|
nama:item.pipe_name, |
||||||
|
jenis:item.pipe_type, |
||||||
|
tanggal_installasi:item.installation_date, |
||||||
|
status:item.status, |
||||||
|
keterangan:item.keterangan, |
||||||
|
}}); |
||||||
|
}} |
||||||
|
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.id+" / "+item.pipe_name+" / "+item.pipe_type+" / "+item.installation_date+" / "+item.status+" / "+item.keterangan+" / "+item.geom+" / sentPDAM"); |
||||||
|
}} |
||||||
|
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}} |
||||||
|
/> |
||||||
|
</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 SentListPDAM; |
||||||
@ -0,0 +1,287 @@ |
|||||||
|
import { RefreshControl } from 'react-native'; |
||||||
|
import { |
||||||
|
TextInput, |
||||||
|
StatusBar, |
||||||
|
StyleSheet, |
||||||
|
Text, |
||||||
|
View, |
||||||
|
Image, |
||||||
|
ScrollView, |
||||||
|
} from 'react-native'; |
||||||
|
import AsyncStorage from '@react-native-async-storage/async-storage'; |
||||||
|
import {useIsFocused} from '@react-navigation/native'; |
||||||
|
import { useCallback, useEffect, useState } from 'react'; |
||||||
|
import AwesomeAlert from 'react-native-awesome-alerts'; |
||||||
|
import NetInfo from "@react-native-community/netinfo"; |
||||||
|
import { MenuProvider } from 'react-native-popup-menu'; |
||||||
|
import { |
||||||
|
Menu, |
||||||
|
MenuOptions, |
||||||
|
MenuOption, |
||||||
|
MenuTrigger, |
||||||
|
} from 'react-native-popup-menu'; |
||||||
|
type sendListDataProps = {route: any,navigation: any}; |
||||||
|
function SentListPermit({route,navigation}: sendListDataProps) { |
||||||
|
const [refreshing, setRefreshing] = useState(false); |
||||||
|
const onRefresh = useCallback(() => { |
||||||
|
setRefreshing(true); |
||||||
|
setTimeout(() => { |
||||||
|
setRefreshing(false); |
||||||
|
}, 2000); |
||||||
|
}, []); |
||||||
|
const [localStorage, setLocalStorage] = useState([]); |
||||||
|
const [filterData, setFilterData] = useState([]); |
||||||
|
const [alertOffline, setAlertOffline] = useState(false); |
||||||
|
const [connected, setConnected] = useState(true) |
||||||
|
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 getDataPermit = async () => { |
||||||
|
setLocalStorage([]) |
||||||
|
try { |
||||||
|
const jsonValue = await AsyncStorage.getAllKeys() |
||||||
|
if(jsonValue.length != 0) { |
||||||
|
jsonValue.map((item) => { |
||||||
|
if(item != "USER_DATA" && item != "my-jwt"){ |
||||||
|
let splited = item.split(" / "); |
||||||
|
if(splited.length === 6){ |
||||||
|
const objectItem = { |
||||||
|
id:splited[0], |
||||||
|
company_name:splited[1], |
||||||
|
permit_status:splited[2], |
||||||
|
location:splited[3], |
||||||
|
geom:splited[4].split(",") |
||||||
|
} |
||||||
|
console.log("aaa",objectItem); |
||||||
|
|
||||||
|
if(splited[5] === 'sentPermit'){ |
||||||
|
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) => { |
||||||
|
const formattedQuery = text.toLowerCase(); |
||||||
|
const filteredData = localStorage.filter((data:any) => |
||||||
|
data.case_name.toLowerCase().includes(formattedQuery) |
||||||
|
) |
||||||
|
setFilterData(filteredData) |
||||||
|
}; |
||||||
|
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, |
||||||
|
// borderWidth: 1,
|
||||||
|
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.id+" / "+item.company_name+" / "+item.permit_status+" / "+item.location+" / "+item.geom+" / sentPermit"); |
||||||
|
}} |
||||||
|
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}} |
||||||
|
/> |
||||||
|
</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 SentListPermit; |
||||||
Loading…
Reference in new issue