diff --git a/App.tsx b/App.tsx
index cba21c2..5288687 100644
--- a/App.tsx
+++ b/App.tsx
@@ -46,6 +46,8 @@ import MapViewLineScreen from './src/component/mapViewLineScreen';
import SettingScreen from './src/component/settingScreen';
import MyAccount from './src/component/myAccount';
import ChangePass from './src/component/changePassword';
+import ResendPJU from './src/component/resendPJU';
+import ResendPDAM from './src/component/resendPDAM';
import { USER_API_URL } from "../SurveyApp/urlConfig";
import { PermissionsAndroid } from 'react-native';
@@ -549,6 +551,28 @@ export const Nav = () => {
fontSize:20
}
}}/>
+
+
([]);
+ const isFocused = useIsFocused();
+ const [userID,setUserID] = useState();
useEffect(()=>{
- let centCord = turfcenter(points(route.params.coordinates));
- console.log('center');
- console.log(centCord.geometry.coordinates);
- setCenterCoords(centCord.geometry.coordinates);
- const unsubscribe = NetInfo.addEventListener((state) => {
- setConnected(state.isConnected!)
- });
- return () => {
- unsubscribe();
+ if(isFocused){
+ const getKey = async () =>{
+ const jsonValue = await AsyncStorage.getItem('USER_DATA')
+ console.log(JSON.parse(jsonValue!));
+ const data = JSON.parse(jsonValue!);
+ console.log("user_data",data.id);
+ setUserID(data.id)
+ };
+ getKey()
+ let centCord = turfcenter(points(route.params.coordinates));
+ // console.log('center');
+ // console.log(centCord.geometry.coordinates);
+ setCenterCoords(centCord.geometry.coordinates);
+ const unsubscribe = NetInfo.addEventListener((state) => {
+ setConnected(state.isConnected!)
+ });
+ return () => {
+ unsubscribe();
+ };
};
- },[])
+ },[isFocused])
const ref = useRef();
const [connected, setConnected] = useState(true);
@@ -68,7 +78,7 @@ export default function CollectLineScreen({route,navigation}:collectLineScreenPr
const [pipeTyeError, setPipeTypeError] = useState(false);
const [pipeStatusError, setPipeStatusError] = useState(false);
const [pipeInfoError, setPipeInfoError] = useState(false);
- const [ModalAttachment, setModalAttachment] = useState(false);
+ const [ModalAttachment, setModalAttachment] = useState(false);
const openCameraLib = async () => {
const result = await launchCamera({
@@ -198,6 +208,16 @@ export default function CollectLineScreen({route,navigation}:collectLineScreenPr
status: 0,
body: {},
}
+ let date = new Date();
+ const milliseconds = Date.UTC(
+ date.getFullYear(),
+ date.getMonth(),
+ date.getDate(),
+ date.getHours(),
+ date.getMinutes(),
+ date.getSeconds(),
+ );
+ const localTime = new Date(milliseconds);
const geom = route.params.coordinates.map((item:any)=>{
return String(item).replace(',',' ')
})
@@ -207,7 +227,9 @@ export default function CollectLineScreen({route,navigation}:collectLineScreenPr
tanggal_installasi: momentDate,
status: checkedStatus,
keterangan: Information,
- geom: `MULTILINESTRING((${geom}))`
+ geom: `MULTILINESTRING((${geom}))`,
+ created_by: userID,
+ created_at: localTime
}
await RNFetchBlob.config({
trusty : true
@@ -284,298 +306,298 @@ export default function CollectLineScreen({route,navigation}:collectLineScreenPr
-
-
-
-
+
+
+
+
+
-
-
-
-
- {
- route.params.coordinates.map((item:any,index:number)=>(
- }
- key={index}
- id={String(index)}
- coordinate={item}
- draggable={false}
- />
- ))
- }
-
- {/* */}
- navigation.navigate('PDAM Map Collect', { screen: 'PDAM Map Collect'})}>
- Change Location
-
-
-
-
- {/* Name* */}
- Pipe Name
- {
- setPipeName(text)
- }}
- onChange={()=> {
- setPipeNameError(false)
- }}
- />
- {pipeNameError ? Pipe Name is Required!:null}
-
-
-
- {/* PJU Type * */}
- PJU Type
- (
- [setPipeTypeError(false)]
- )}
- />
- {pipeTyeError ? Pipe Type is Required!:null}
-
-
-
- {/* Status* */}
- Status
-
- {setCheckedStatus('Baik'); setPipeStatusError(false)}}
- />
- Baik
-
-
- {setCheckedStatus('Rusak'); setPipeStatusError(false); }}
- />
- Rusak
-
- {pipeStatusError ? Status is Required!:null}
-
-
+ {
+ route.params.coordinates.map((item:any,index:number)=>(
+ }
+ key={index}
+ id={String(index)}
+ coordinate={item}
+ draggable={false}
+ />
+ ))
+ }
+
+ {/* */}
+ navigation.navigate('PDAM Map Collect', { screen: 'PDAM Map Collect'})}>
+ Change Location
+
+
+
+
+ {/* Name* */}
+ Pipe Name
+ {
+ setPipeName(text)
+ }}
+ onChange={()=> {
+ setPipeNameError(false)
+ }}
/>
-
- Information
- {
- setInformation(text)
- }}
- onChange={()=> {
- setPipeInfoError(false)
- }}
- />
- {pipeInfoError ? Information is Required!:null}
-
- Pipe Name is Required!:null}
+
+
+
+ {/* PJU Type * */}
+ Pipe Type
+ (
+ [setPipeTypeError(false)]
+ )}
/>
-
- Installation Date
- setOpen(true)}
- value={String(momentDate)}
+ {pipeTyeError ? Pipe Type is Required!:null}
+
+
+
+ {/* Status* */}
+ Status
+
+ {setCheckedStatus('Baik'); setPipeStatusError(false)}}
/>
- {
- setOpen(false)
- setInstallDate(survey_date)
- }}
- onCancel={() => {
- setOpen(false)
- }}
+ Baik
+
+
+ {setCheckedStatus('Rusak'); setPipeStatusError(false); }}
/>
+ Rusak
- Status is Required!:null}
+
+
+
+ Information
+ {
+ setInformation(text)
+ }}
+ onChange={()=> {
+ setPipeInfoError(false)
}}
/>
-
- Attachment
- Lampirkan foto / gambar
- {
- imgUrl.length === 0 ?
- setModalAttachment(true)}>
-
-
- Klik untuk menambahkan foto / gambar
-
-
- :
-
- setModalAttachment(true)}>
-
-
-
-
- }
- contentContainerStyle={{flexDirection:'row',flexWrap:'wrap',columnGap:25,rowGap:10}}
- data={imgUrl}
- renderItem={({item,index})=>renderItem({item,index})}
- />
- }
-
- Information is Required!:null}
+
+
+
+ Installation Date
+ setOpen(true)}
+ value={String(momentDate)}
+ />
+ {
+ setOpen(false)
+ setInstallDate(survey_date)
+ }}
+ onCancel={() => {
+ setOpen(false)
}}
/>
+
+
+
+ Attachment
+ Lampirkan foto / gambar
+ {
+ imgUrl.length === 0 ?
+ setModalAttachment(true)}>
+
+
+ Klik untuk menambahkan foto / gambar
+
+
+ :
+
+ setModalAttachment(true)}>
+
+
+
+
+ }
+ contentContainerStyle={{flexDirection:'row',flexWrap:'wrap',columnGap:25,rowGap:10}}
+ data={imgUrl}
+ renderItem={({item,index})=>renderItem({item,index})}
+ />
+ }
+
+
-
+
+ SEND
+
-
{
- handleCancelAlertOnline();
- }}
- onConfirmPressed={() => {
- collectDataOnline();
- }}
- overlayStyle={{width:'100%'}}
- contentContainerStyle={{width:'70%',borderRadius:10}}
- titleStyle={{fontSize:20}}
- messageStyle={{fontSize:16}}
- />
+ show={alertOnline}
+ showProgress={false}
+ title="Collecting Data"
+ message="Are you sure for Collecting PDAM data?"
+ closeOnTouchOutside={false}
+ closeOnHardwareBackPress={false}
+ showCancelButton={true}
+ showConfirmButton={true}
+ cancelText="No, cancel"
+ confirmText="Yes, Collect it"
+ confirmButtonColor="#137997"
+ onCancelPressed={() => {
+ handleCancelAlertOnline();
+ }}
+ onConfirmPressed={() => {
+ collectDataOnline();
+ }}
+ overlayStyle={{width:'100%'}}
+ contentContainerStyle={{width:'70%',borderRadius:10}}
+ titleStyle={{fontSize:20}}
+ messageStyle={{fontSize:16}}
+ />
- {/* Offline Mode Alert */}
- {
- handleCancelAlertOffline();
- }}
- onConfirmPressed={() => {
- collectDataOffline();
- }}
- overlayStyle={{width:'100%'}}
- contentContainerStyle={{width:'70%',borderRadius:10}}
- titleStyle={{fontSize:20}}
- messageStyle={{fontSize:16}}
- />
- setModalAttachment(false)} style={{top:'18%',alignSelf:'center'}}>
-
-
-
- Select Mode
-
- setModalAttachment(false)} style={{alignSelf:'flex-end',padding:10}}>
-
-
-
-
- {openCameraLib(),setModalAttachment(false)}} style={{height:50,backgroundColor:'#FFFFFF',alignItems:'center',justifyContent:'center',borderTopLeftRadius:10,borderTopRightRadius:10,borderWidth:1,borderColor:'#A6A6A6'}}>
- Take photo
-
- {openLib(),setModalAttachment(false)}} style={{height:50,backgroundColor:'#FFFFFF',alignItems:'center',justifyContent:'center',borderBottomLeftRadius:10,borderBottomRightRadius:10,borderWidth:1,borderColor:'#A6A6A6'}}>
- Choose photo
-
+ {/* Offline Mode Alert */}
+ {
+ handleCancelAlertOffline();
+ }}
+ onConfirmPressed={() => {
+ collectDataOffline();
+ }}
+ overlayStyle={{width:'100%'}}
+ contentContainerStyle={{width:'70%',borderRadius:10}}
+ titleStyle={{fontSize:20}}
+ messageStyle={{fontSize:16}}
+ />
+ setModalAttachment(false)} style={{top:'18%',alignSelf:'center'}}>
+
+
+
+ Select Mode
+
+ setModalAttachment(false)} style={{alignSelf:'flex-end',padding:10}}>
+
+
+
+
+ {openCameraLib(),setModalAttachment(false)}} style={{height:50,backgroundColor:'#FFFFFF',alignItems:'center',justifyContent:'center',borderTopLeftRadius:10,borderTopRightRadius:10,borderWidth:1,borderColor:'#A6A6A6'}}>
+ Take photo
+
+ {openLib(),setModalAttachment(false)}} style={{height:50,backgroundColor:'#FFFFFF',alignItems:'center',justifyContent:'center',borderBottomLeftRadius:10,borderBottomRightRadius:10,borderWidth:1,borderColor:'#A6A6A6'}}>
+ Choose photo
+
+
-
-
-
+
- )
+ );
};
const styles = StyleSheet.create({
diff --git a/src/component/collectPolygonscreen.tsx b/src/component/collectPolygonscreen.tsx
index 2fea067..6438ac1 100644
--- a/src/component/collectPolygonscreen.tsx
+++ b/src/component/collectPolygonscreen.tsx
@@ -16,9 +16,10 @@ const {points,polygon,lineString} = require('@turf/helpers');
import DocumentPicker from "react-native-document-picker";
import RNFS from 'react-native-fs';
import RNFetchBlob from 'rn-fetch-blob';
+import {useIsFocused} from '@react-navigation/native';
-
+import {useAuth} from '../../src/component/authContext';
import { PERMIT_API_URL } from "../../urlConfig";
import React from 'react';
type collectPolygonScreenProps = {route: any,navigation: any};
@@ -26,24 +27,36 @@ type collectPolygonScreenProps = {route: any,navigation: any};
export default function CollectPolygonScreen({route,navigation}:collectPolygonScreenProps) {
+ // const { authState } = useAuth();
console.log("route",route.params);
-
const apiKey = "JoJs2pcDv5o0yQlQLMfI";
const [basemap, setBasemap] = useState("streets-v2");
const styleURL = `https://api.maptiler.com/maps/${basemap}/style.json?key=${apiKey}`;
const [centerCoords,setCenterCoords] = useState([]);
+ const isFocused = useIsFocused();
+ const [userID,setUserID] = useState();
useEffect(()=>{
- let centCord = turfcenter(points(route.params.coordinates));
- console.log('center');
- console.log(centCord.geometry.coordinates);
- setCenterCoords(centCord.geometry.coordinates);
- const unsubscribe = NetInfo.addEventListener((state) => {
- setConnected(state.isConnected!)
- });
- return () => {
- unsubscribe();
+ if(isFocused){
+ const getKey = async () =>{
+ const jsonValue = await AsyncStorage.getItem('USER_DATA')
+ console.log(JSON.parse(jsonValue!));
+ const data = JSON.parse(jsonValue!);
+ console.log("user_data",data.id);
+ setUserID(data.id)
+ };
+ getKey()
+ let centCord = turfcenter(points(route.params.coordinates));
+ console.log('center');
+ console.log(centCord.geometry.coordinates);
+ setCenterCoords(centCord.geometry.coordinates);
+ const unsubscribe = NetInfo.addEventListener((state) => {
+ setConnected(state.isConnected!)
+ });
+ return () => {
+ unsubscribe();
+ };
};
- },[])
+ },[isFocused])
const ref = useRef();
const [connected, setConnected] = useState(true);
@@ -183,6 +196,16 @@ export default function CollectPolygonScreen({route,navigation}:collectPolygonSc
};
const collectDataOnline = async () => {
try {
+ let date = new Date();
+ const milliseconds = Date.UTC(
+ date.getFullYear(),
+ date.getMonth(),
+ date.getDate(),
+ date.getHours(),
+ date.getMinutes(),
+ date.getSeconds(),
+ );
+ const localTime = new Date(milliseconds);
const geom = route.params.coordinates.map((item:any)=>{
return String(item).replace(',',' ')
})
@@ -194,7 +217,9 @@ export default function CollectPolygonScreen({route,navigation}:collectPolygonSc
company_name: companyName,
location: location,
permit_status: checkedStatus,
- geom: `MULTIPOLYGON (((${geom},${String(route.params.coordinates[0]).replace(","," ")})))`
+ geom: `MULTIPOLYGON (((${geom},${String(route.params.coordinates[0]).replace(","," ")})))`,
+ created_by: userID,
+ created_at: localTime
}
console.log(obj);
await RNFetchBlob.config({
@@ -296,8 +321,8 @@ export default function CollectPolygonScreen({route,navigation}:collectPolygonSc
return (
-
-
+
+
Location Detail
-
+
+ SEND
+
{
const result = await launchCamera({
@@ -153,36 +155,49 @@ function CollectScreen({route,navigation}: collectScreenProps) {
const [PJUInfoError, setPJUInfoError] = useState(false);
const [attachmentSuccess, setAttachmentSuccess] = useState(0);
const [ModalAttachment, setModalAttachment] = useState(false);
-
+ const [userID,setUserID] = useState();
+ const isFocused = useIsFocused();
useEffect(()=> {
- navigation.addListener('beforeRemove', (e:any)=> {
- console.log("Event",e);
- if (e.data.action.type !== "NAVIGATE"){
- e.preventDefault();
- Alert.alert(
- 'Unsave Case',
- 'There are unsave case. Please chose what you want.',
- [
- {
- text: 'Ok',
- onPress: () => navigation.dispatch(e.data.action)
- },
- {
- text: 'Continue',
- style: 'cancel'
- }
- ]
- )
- }
- })
- const unsubscribe = NetInfo.addEventListener((state) => {
- setConnected(state.isConnected!)
- });
- return () => {
- unsubscribe();
+ if(isFocused){
+ navigation.addListener('beforeRemove', (e:any)=> {
+ console.log("Event",e);
+ if (e.data.action.type !== "NAVIGATE"){
+ e.preventDefault();
+ Alert.alert(
+ 'Unsave Case',
+ 'There are unsave case. Please chose what you want.',
+ [
+ {
+ text: 'Ok',
+ onPress: () => navigation.dispatch(e.data.action)
+ },
+ {
+ text: 'Continue',
+ style: 'cancel'
+ }
+ ]
+ )
+ }
+ });
+ const getKey = async () =>{
+ const jsonValue = await AsyncStorage.getItem('USER_DATA')
+ console.log(JSON.parse(jsonValue!));
+ const data = JSON.parse(jsonValue!);
+ console.log("user_data",data.id);
+ setUserID(data.id)
+ };
+ getKey()
+
+ const unsubscribe = NetInfo.addEventListener((state) => {
+ setConnected(state.isConnected!)
+ });
+ return () => {
+ unsubscribe();
+ };
};
- },[]);
+
+ },[isFocused]);
const collectDataOnline = async() => {
try {
@@ -190,6 +205,36 @@ function CollectScreen({route,navigation}: collectScreenProps) {
status: 0,
body: {},
}
+ navigation.addListener('beforeRemove', (e:any)=> {
+ console.log("Event",e);
+ if (e.data.action.type !== "NAVIGATE"){
+ e.preventDefault();
+ Alert.alert(
+ 'Unsave Case',
+ 'There are unsave case. Please chose what you want.',
+ [
+ {
+ text: 'Ok',
+ onPress: () => navigation.dispatch(e.data.action)
+ },
+ {
+ text: 'Continue',
+ style: 'cancel'
+ }
+ ]
+ )
+ }
+ });
+ let date = new Date();
+ const milliseconds = Date.UTC(
+ date.getFullYear(),
+ date.getMonth(),
+ date.getDate(),
+ date.getHours(),
+ date.getMinutes(),
+ date.getSeconds(),
+ );
+ const localTime = new Date(milliseconds);
await RNFetchBlob.config({
trusty : true
}).fetch('POST', `${PJU_API_URL}/addData`,{
@@ -202,7 +247,9 @@ function CollectScreen({route,navigation}: collectScreenProps) {
tanggal_installasi: momentDate,
status: checkedStatus,
keterangan: pju_info,
- geom: `POINT(${fixCoordinate.long} ${fixCoordinate.lat})`
+ geom: `POINT(${fixCoordinate.long} ${fixCoordinate.lat})`,
+ created_by: userID,
+ created_at: localTime
})
).then(async (resp) => {
const json = resp.json()
@@ -635,7 +682,9 @@ function CollectScreen({route,navigation}: collectScreenProps) {
/> */}
-
+
+ SEND
+
@@ -713,7 +762,6 @@ function CollectScreen({route,navigation}: collectScreenProps) {
Choose photo
-
diff --git a/src/component/draftPDAM.tsx b/src/component/draftPDAM.tsx
index 5ab9c16..e52b235 100644
--- a/src/component/draftPDAM.tsx
+++ b/src/component/draftPDAM.tsx
@@ -402,15 +402,12 @@ function DraftPDAM({route,navigation}: sendListDataProps) {
{
- navigation.navigate('Edit',{ screen: 'Edit',data: {
- id:item.id,
- nama:item.pju_name,
- jenis:item.pju_type,
+ navigation.navigate('Resend PDAM',{ screen: 'Resend PDAM',data: {
+ nama:item.pipe_name,
+ jenis:item.pipe_type,
tanggal_installasi:item.installation_date,
status:item.status,
- keterangan:item.keterangan,
- long:item.long,
- lat:item.lat
+ geom:item.geom
}});
}}
children={
diff --git a/src/component/draftPJU.tsx b/src/component/draftPJU.tsx
index 63dd72f..dd72712 100644
--- a/src/component/draftPJU.tsx
+++ b/src/component/draftPJU.tsx
@@ -405,8 +405,7 @@ function DraftPJU({route,navigation}: sendListDataProps) {
{
- navigation.navigate('Edit',{ screen: 'Edit',data: {
- id:item.id,
+ navigation.navigate('Resend PJU',{ screen: 'Resend PJU',data: {
nama:item.pju_name,
jenis:item.pju_type,
tanggal_installasi:item.installation_date,
diff --git a/src/component/editLinescreen.tsx b/src/component/editLinescreen.tsx
index 44baa2d..555568c 100644
--- a/src/component/editLinescreen.tsx
+++ b/src/component/editLinescreen.tsx
@@ -1,5 +1,5 @@
import { useEffect, useRef, useState } from 'react';
-import {View,Text, StyleSheet, ScrollView, TouchableOpacity, Image, Animated, TextInput, Button, Alert} from 'react-native';
+import {View,Text, StyleSheet, ScrollView, TouchableOpacity, Image, Animated, TextInput, Button, Alert, Pressable, StatusBar, FlatList} from 'react-native';
import MapLibreGL from '@maplibre/maplibre-react-native';
import { MapView,ShapeSource,Camera,UserLocation,PointAnnotation,FillLayer,LineLayer,VectorSource } from "@maplibre/maplibre-react-native";
@@ -14,6 +14,7 @@ import {useNavigation,NavigationContainer,useIsFocused} from '@react-navigation/
import turfcenter from '@turf/center';
const {points,polygon,lineString} = require('@turf/helpers');
import RNFetchBlob from 'rn-fetch-blob';
+import Modal from "react-native-modal";
@@ -26,6 +27,9 @@ type collectLineScreenProps = {route: any,navigation: any};
export default function EditLineScreen({route,navigation}:collectLineScreenProps) {
// console.log("route",route.params);
const {data,coors} = route.params;
+ console.log("data",data);
+
+
const apiKey = "JoJs2pcDv5o0yQlQLMfI";
const [basemap, setBasemap] = useState("streets-v2");
const styleURL = `https://api.maptiler.com/maps/${basemap}/style.json?key=${apiKey}`;
@@ -58,18 +62,15 @@ export default function EditLineScreen({route,navigation}:collectLineScreenProps
const [secondPress,setSecondPress] = useState(false);
const isFocused = useIsFocused();
const [centerCoords,setCenterCoords] = useState([]);
-
+ const [ModalAttachment, setModalAttachment] = useState(false);
useEffect(()=>{
if (isFocused) {
if (coors === undefined) {
- console.log("awal");
getData()
fetchData()
}
else{
- console.log("kedua",coors);
let centCord = turfcenter(points(coors));
- console.log("center kedua",centCord);
setCenterCoords(centCord.geometry.coordinates);
setLoadGeom(false);
setCoordinates(coors)
@@ -130,8 +131,7 @@ export default function EditLineScreen({route,navigation}:collectLineScreenProps
// error reading value
}
- }
-
+ }
const fetchData = async () => {
try {
await RNFetchBlob.config({
@@ -287,16 +287,14 @@ export default function EditLineScreen({route,navigation}:collectLineScreenProps
},
JSON.stringify({pdam_id:data.id, file:file.file, mimetype:file.file_type, size:file.fileSize})
).then(async (resp) => {
- Alert.alert("Success")
- setAlertOnline(false);
- navigation.navigate('Property Survey', { screen: 'Property Survey'})
+
}
)
});
} catch (error) {
console.log(error);
}
- }
+ };
const collectDataOnline = async () => {
try {
const geom = coordinates.map((item:any)=>{
@@ -322,6 +320,9 @@ export default function EditLineScreen({route,navigation}:collectLineScreenProps
const status = resp.respInfo.status
if (status == 201) {
insertAttachment(files)
+ Alert.alert("Success")
+ setAlertOnline(false);
+ navigation.navigate('Inbox Pipa PDAM', { screen: 'Inbox Pipa PDAM'})
}
else {
Alert.alert("Internal Server Error")
@@ -369,321 +370,344 @@ export default function EditLineScreen({route,navigation}:collectLineScreenProps
const collectDataOffline = () => {
setAlertOnline(false);
};
+ const renderItem = ({item,index}:any) => {
+ return (
+
+
+
+ );
+ };
return (
+
+
+
-
- Image
-
- {imgUrl.length === 0 ? currentIndex :currentIndex+1}/{imgUrl.length}
-
-
- {
- const x = e.nativeEvent.contentOffset.x;
- setCurrentIndex(parseFloat((x/330).toFixed(0)));
- }}
- horizontal
- renderItem={({item,index}) => {
- return(
-
- )
- }}
- />
-
-
-
-
-
-
-
-
-
-
-
-
-
- {
- !loadGeom ?
-
-
-
-
-
-
- {
- coordinates.map((item:any,index:number)=>(
- }
- key={index}
- id={String(index)}
- coordinate={item}
- draggable={false}
- />
- ))
- }
-
- {!secondPress ?
- {navigation.navigate('Map View Line', { screen: 'Map View Line',data: {
- id:data.id,
- pipe_name:pipeName,
- pipe_type:selectedPipeType,
- tanggal_installasi: momentDate,
- status: checkedStatus,
- keterangan: Information,
- geom:coordinates
- }});
+ {
+ !loadGeom ?
+
+
+
+
+
+
+ {
+ coordinates.map((item:any,index:number)=>(
+ }
+ key={index}
+ id={String(index)}
+ coordinate={item}
+ draggable={false}
+ />
+ ))
}
- }>
-
- View & Change Location
-
-
- :
- {navigation.navigate('Map View Line', { screen: 'Map View Line',data: {
+
+ {!secondPress ?
+ {navigation.navigate('Map View Line', { screen: 'Map View Line',data: {
id:data.id,
pipe_name:pipeName,
pipe_type:selectedPipeType,
tanggal_installasi: momentDate,
status: checkedStatus,
keterangan: Information,
- geom:[...coordinates,coordinates[0]]
+ geom:coordinates
}});
}
- }>
-
- View & Change Location
-
-
- }
+ }>
+ Change Location
+
+ :
+ {navigation.navigate('Map View Line', { screen: 'Map View Line',data: {
+ id:data.id,
+ pipe_name:pipeName,
+ pipe_type:selectedPipeType,
+ tanggal_installasi: momentDate,
+ status: checkedStatus,
+ keterangan: Information,
+ geom:[...coordinates,coordinates[0]]
+ }});
+ }
+ }>
+ Change Location
+
+ }
- :
+ :
null
- }
-
-
+
+ {/* Name* */}
+ Pipe Name
+ {
+ setPipeName(text)
+ }}
+ onChange={()=> {
+ setPipeNameError(false)
+ }}
+ defaultValue={pipeName}
/>
-
- Pipe Name*
- {
- setPipeName(text)
- }}
- onChange={()=> {
- setPipeNameError(false)
- }}
- defaultValue={pipeName}
- />
- {pipeNameError ? Name is Required!:null}
-
- Pipe Name is Required!:null}
+
+
+
+ {/* PJU Type * */}
+ Pipe Type
+ (
+ [setPipeTypeError(false)]
+ )}
+ defaultOption={{key:selectedPipeType, value:selectedPipeType}}
/>
-
- Pipe Type *
- (
- setPipeTypeError(false)
- )}
- defaultOption={{key:selectedPipeType, value:selectedPipeType}}
- />
- {pipeTyeError ? Pipe Type is Required!:null}
+ {pipeTyeError ? Pipe Type is Required!:null}
+
+
+
+ {/* Status* */}
+ Status
+
+ {setCheckedStatus('Baik'); setPipeStatusError(false)}}
+ />
+ Baik
-
-
- Status *
-
- {
- setCheckedStatus('Baik');
- setPipeStatusError(false);
- }}
- />
- Baik
-
-
- {
- setCheckedStatus('Rusak');
- setPipeStatusError(false);
- }}
- />
- Rusak
-
+
+ {setCheckedStatus('Rusak'); setPipeStatusError(false); }}
+ />
+ Rusak
{pipeStatusError ? Status is Required!:null}
-
+
+
+ Information
+ {
+ setInformation(text)
+ }}
+ onChange={()=> {
+ setPipeInfoError(false)
+ }}
+ defaultValue={Information}
/>
-
- Information *
- {
- setInformation(text)
- }}
- onChange={()=> {
- setPipeInfoError(false)
- }}
- defaultValue={Information}
- />
- {pipeInfoError ? Information is Required!:null}
-
- Information is Required!:null}
+
+
+
+ Installation Date
+ setOpen(true)}
+ value={String(momentDate)}
/>
-
- Installation Date
- setOpen(true)}
- value={String(momentDate)}
- />
- {
- setOpen(false)
- setInstallDate(survey_date)
- }}
- onCancel={() => {
- setOpen(false)
- }}
- />
-
- {
+ setOpen(false)
+ setInstallDate(survey_date)
+ }}
+ onCancel={() => {
+ setOpen(false)
+ }}
/>
+
+
+
+ Attachment
+ Lampirkan foto / gambar
+ {
+ imgUrl.length === 0 ?
+ setModalAttachment(true)}>
+
+
+ Klik untuk menambahkan foto / gambar
+
+
+ :
+
+ setModalAttachment(true)}>
+
+
+
+
+ }
+ contentContainerStyle={{flexDirection:'row',flexWrap:'wrap',columnGap:25,rowGap:10}}
+ data={imgUrl}
+ renderItem={({item,index})=>renderItem({item,index})}
+ />
+ }
+
+
-
- {/* Online Mode Alert */}
- {
- handleCancelAlertOnline();
- }}
- onConfirmPressed={() => {
- collectDataOnline();
- }}
- overlayStyle={{width:'100%'}}
- contentContainerStyle={{width:'70%',borderRadius:10}}
- titleStyle={{fontSize:20}}
- messageStyle={{fontSize:16}}
- />
-
- {/* Offline Mode Alert */}
- {
- handleCancelAlertOffline();
- }}
- onConfirmPressed={() => {
- collectDataOffline();
- }}
- overlayStyle={{width:'100%'}}
- contentContainerStyle={{width:'70%',borderRadius:10}}
- titleStyle={{fontSize:20}}
- messageStyle={{fontSize:16}}
- />
+
+ UPDATE
+
+
+ {/* Online Mode Alert */}
+ {
+ handleCancelAlertOnline();
+ }}
+ onConfirmPressed={() => {
+ collectDataOnline();
+ }}
+ overlayStyle={{width:'100%'}}
+ contentContainerStyle={{width:'70%',borderRadius:10}}
+ titleStyle={{fontSize:20}}
+ messageStyle={{fontSize:16}}
+ />
+ {/* Offline Mode Alert */}
+ {
+ handleCancelAlertOffline();
+ }}
+ onConfirmPressed={() => {
+ collectDataOffline();
+ }}
+ overlayStyle={{width:'100%'}}
+ contentContainerStyle={{width:'70%',borderRadius:10}}
+ titleStyle={{fontSize:20}}
+ messageStyle={{fontSize:16}}
+ />
+ setModalAttachment(false)} style={{top:'18%',alignSelf:'center'}}>
+
+
+
+ Select Mode
+
+ setModalAttachment(false)} style={{alignSelf:'flex-end',padding:10}}>
+
+
+
+
+ {openCameraLib(),setModalAttachment(false)}} style={{height:50,backgroundColor:'#FFFFFF',alignItems:'center',justifyContent:'center',borderTopLeftRadius:10,borderTopRightRadius:10,borderWidth:1,borderColor:'#A6A6A6'}}>
+ Take photo
+
+ {openLib(),setModalAttachment(false)}} style={{height:50,backgroundColor:'#FFFFFF',alignItems:'center',justifyContent:'center',borderBottomLeftRadius:10,borderBottomRightRadius:10,borderWidth:1,borderColor:'#A6A6A6'}}>
+ Choose photo
+
+
+
+
- )
+ );
};
const styles = StyleSheet.create({
@@ -707,23 +731,25 @@ const styles = StyleSheet.create({
color: 'black'
},
input: {
- height: 40,
+ width:352,
+ height: 45,
borderWidth: 1,
padding: 10,
- borderRadius: 50,
- color: 'black'
+ borderRadius: 10,
+ color: '#6B5E5E',
+ borderColor:'#A6A6A6'
},
container: {
- flex: 1,
- backgroundColor: '#ecf0f1',
padding: 10,
+ flexGrow: 1
},
mainContainer: {
flex: 1,
},
label: {
- fontSize: 21,
- color: 'black',
+ fontSize: 16,
+ fontWeight:'semibold',
+ color: '#434343',
// marginBottom: 20
},
title: {
diff --git a/src/component/editPolygonscreen.tsx b/src/component/editPolygonscreen.tsx
index 88c87c9..e0e0d9e 100644
--- a/src/component/editPolygonscreen.tsx
+++ b/src/component/editPolygonscreen.tsx
@@ -1,5 +1,5 @@
import { useEffect, useRef, useState } from 'react';
-import {View,Text, StyleSheet, ScrollView, TouchableOpacity, Image, Animated, TextInput, Button, Alert} from 'react-native';
+import {View,Text, StyleSheet, ScrollView, TouchableOpacity, Image, Animated, TextInput, Button, Alert, Pressable, StatusBar, FlatList} from 'react-native';
import {useNavigation,NavigationContainer,useIsFocused} from '@react-navigation/native';
import MapLibreGL from '@maplibre/maplibre-react-native';
import { MapView,ShapeSource,Camera,UserLocation,PointAnnotation,FillLayer,LineLayer,VectorSource } from "@maplibre/maplibre-react-native";
@@ -61,8 +61,6 @@ export default function EditPolygonScreen({route,navigation}:EditPolygonScreenPr
const [delay,setDelay] = useState(false);
const [secondPress,setSecondPress] = useState(false);
const isFocused = useIsFocused();
-
- // console.log(isFocused);
useEffect(()=>{
if (isFocused) {
if (coors === undefined) {
@@ -108,8 +106,6 @@ export default function EditPolygonScreen({route,navigation}:EditPolygonScreenPr
unsubscribe();
};
},[isFocused])
-
-
const openCameraLib = async () => {
const result = await launchCamera({
mediaType: 'photo',
@@ -258,6 +254,9 @@ export default function EditPolygonScreen({route,navigation}:EditPolygonScreenPr
const status = resp.respInfo.status
if (status == 201) {
insertAttachment(files)
+ Alert.alert("Success")
+ setAlertOnline(false);
+ navigation.navigate('Inbox Land Permit', { screen: 'Inbox Land Permit'})
}
else {
Alert.alert("Internal Server Error")
@@ -283,8 +282,6 @@ export default function EditPolygonScreen({route,navigation}:EditPolygonScreenPr
};
const insertAttachment = async (files: any) => {
try {
-
-
files.forEach(async function(file:any){
const url = `${PERMIT_API_URL}/addAttachment`;
await RNFetchBlob.config({
@@ -295,14 +292,6 @@ export default function EditPolygonScreen({route,navigation}:EditPolygonScreenPr
JSON.stringify({permit_id:data.id, file:file.file, mimetype:file.file_type, size:file.fileSize})
).then(async(resp) => {
const status = resp.respInfo.status
- if(status === 201){
- Alert.alert("Success")
- navigation.navigate('Property Survey', { screen: 'Property Survey'})
- setAlertOnline(false);
- }
- else{
- Alert.alert("Internal Server Error")
- }
})
});
} catch (error) {
@@ -334,13 +323,10 @@ export default function EditPolygonScreen({route,navigation}:EditPolygonScreenPr
} catch (error) {
console.error(error)
}
- }
-
+ };
const cek = () => {
console.log(coordinates);
-
- }
-
+ };
const getData = async () => {
try {
const url = `${PERMIT_API_URL}/${route.params.data.id}`;
@@ -364,75 +350,39 @@ export default function EditPolygonScreen({route,navigation}:EditPolygonScreenPr
// error reading value
}
- }
+ };
+ const renderItem = ({item,index}:any) => {
+ return (
+
+ {item.name}
+
+ );
+ };
return (
-
-
- Document
-
-
- {fileDocument.map((data, index) =>
-
-
- {deleteByIndex(index)}}>
-
-
- {/* View */}
-
-
-
- )}
-
-
-
-
-
-
-
+
+
+
+
-
-
+
+ />
{
!loadGeom ?
@@ -486,95 +436,100 @@ export default function EditPolygonScreen({route,navigation}:EditPolygonScreenPr
))
}
-
- {!secondPress ?
- {navigation.navigate('Map View Polygon', { screen: 'Map View Polygon',data: {
- id:data.id,
- company_name:companyName,
- permit_status:checkedStatus,
- location:location,
- geom:coordinates
- }});
- }
- }>
-
- View & Change Location
-
+
+ {!secondPress ?
+ {
+ navigation.navigate('Map View Polygon', {
+ screen: 'Map View Polygon',
+ data: {
+ id:data.id,
+ company_name:companyName,
+ permit_status:checkedStatus,
+ location:location,
+ geom:coordinates
+ }
+ });
+ }}
+ >
+ Change Location
:
- {navigation.navigate('Map View Polygon', { screen: 'Map View Polygon',data: {
- id:data.id,
- company_name:companyName,
- permit_status:checkedStatus,
- location:location,
- geom:[...coordinates,coordinates[0]]
- }});
- }
- }>
-
- View & Change Location
-
+ {
+ navigation.navigate('Map View Polygon', {
+ screen: 'Map View Polygon',
+ data: {
+ id:data.id,
+ company_name:companyName,
+ permit_status:checkedStatus,
+ location:location,
+ geom:[...coordinates,coordinates[0]]
+ }
+ });
+ }}
+ >
+ Change Location
- }
+ }
+
+ {/* Name* */}
+ Company Name
+ {
+ setCompanyName(text)
+ }}
+ onChange={()=> {
+ setCompanyNameError(false)
}}
+ defaultValue={companyName}
+ />
+ {companyNameError ? Company Name is Required!:null}
+
+
-
- Company Name*
- {
- setCompanyName(text)
- }}
- onChange={()=> {
- setCompanyNameError(false)
- }}
- defaultValue={companyName}
+
+ {/* Status* */}
+ Permit Status
+
+ {setCheckedStatus('Approved'); setPermitStatusError(false)}}
/>
- {companyNameError ? Company Name is Required!:null}
+ Approved
+
+
+ {setCheckedStatus('Under Review'); setPermitStatusError(false); }}
+ />
+ Under Review
+
+ {permitStatusError ? Status is Required!:null}
-
- Permit Status *
-
- {
- setCheckedStatus('Approved');
- setPermitStatusError(false);
- }}
- />
- Approved
-
-
- {
- setCheckedStatus('Under Review');
- setPermitStatusError(false);
- }}
- />
- Under Review
-
-
- {permitStatusError ? Status is Required!:null}
{
checkedStatus === 'Approved' ?
-
-
+
Approved By*
+
:
null
}
-
+ Location Detail
+ {
+ setLocation(text)
}}
- />
-
- Location Detail *
- {
- setLocation(text)
- }}
- onChange={()=> {
- setLocationError(false)
- }}
- defaultValue={location}
- />
- {locationError ? Location is Required!:null}
+ onChange={()=> {
+ setLocationError(false)
+ }}
+ defaultValue={location}
+ />
+ {locationError ? Information is Required!:null}
+
+ Survey Date
+ setOpen(true)}
+ value={String(momentDate)}
+ />
+ {
+ setOpen(false)
+ setInstallDate(survey_date)
+ }}
+ onCancel={() => {
+ setOpen(false)
}}
+ />
+
+
-
- Survey Date
- setOpen(true)}
- value={String(momentDate)}
- />
- {
- setOpen(false)
- setInstallDate(survey_date)
- }}
- onCancel={() => {
- setOpen(false)
- }}
+
+ Attachment
+ Lampirkan dokumen
+ {
+ fileDocument.length === 0 ?
+
+
+
+ Klik untuk menambahkan dokumen
+
+
+ :
+
+
+
+
+ Klik untuk menambahkan dokumen
+
+
+ }
+ contentContainerStyle={{flexDirection:'column',columnGap:25,rowGap:10}}
+ data={fileDocument}
+ renderItem={({item,index})=>renderItem({item,index})}
/>
+ }
-
- {
- handleCancelAlertOnline();
- }}
- onConfirmPressed={() => {
- collectDataOnline();
- // cek()
- }}
- overlayStyle={{width:'100%'}}
- contentContainerStyle={{width:'70%',borderRadius:10}}
- titleStyle={{fontSize:20}}
- messageStyle={{fontSize:16}}
- />
+
+ UPDATE
+
+
+
+ {
+ handleCancelAlertOnline();
+ }}
+ onConfirmPressed={() => {
+ collectDataOnline();
+ // cek()
+ }}
+ overlayStyle={{width:'100%'}}
+ contentContainerStyle={{width:'70%',borderRadius:10}}
+ titleStyle={{fontSize:20}}
+ messageStyle={{fontSize:16}}
+ />
{/* Offline Mode Alert */}
{
if (isFocused) {
setLong(data.long);
@@ -237,7 +241,7 @@ function EditScreen({route,navigation}: editScreenProps) {
insertAttachment(files)
Alert.alert("Success")
setAlertOnline(false);
- navigation.navigate('Property Survey', { screen: 'Property Survey'})
+ navigation.navigate('Inbox Penerangan Jalan Umum', { screen: 'Inbox Penerangan Jalan Umum'})
}
else {
Alert.alert("Internal Server Error")
@@ -384,77 +388,57 @@ function EditScreen({route,navigation}: editScreenProps) {
const handleCancelAlertOffline = () => {
setAlertOffline(false);
};
+ const renderItem = ({item,index}:any) => {
+ return (
+
+
+
+ );
+ };
return(
-
- Edit Survey PJU
-
- Image
-
- {imgUrl.length === 0 ? currentIndex :currentIndex+1}/{imgUrl.length}
-
-
- {
- const x = e.nativeEvent.contentOffset.x;
- setCurrentIndex(parseFloat((x/330).toFixed(0)));
- }}
- horizontal
- renderItem={({item,index}) => {
- return(
-
- )
- }}/>
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+ {/* navigation.navigate('PJU Map Collect', { screen: 'PJU Map Collect'})} style={{alignItems:'center'}}> */}
+
+
+ {lat},
+ {long}
+
- }
- id={"pjuCoordinate"}
- coordinate={[long, lat]}
- />
-
+ style={{width:352,height:200,borderWidth:1,borderColor:'#A6A6A6',overflow:'hidden',alignSelf:'center'}}
+ mapStyle={styleURL}
+ rotateEnabled={false}
+ zoomEnabled={false}
+ attributionPosition={{bottom: 8, right: 8}}
+ scrollEnabled={false}
+ >
+ }
+ id={"pjuCoordinate"}
+ coordinate={[long, lat]}
+ />
+
- navigation.navigate('MapView', { screen: 'MapView',data: {
+ {/* */}
+ navigation.navigate('MapView', { screen: 'MapView',data: {
id:data.id,
nama:pju_name,
jenis:selectedPJUType,
@@ -464,18 +448,17 @@ function EditScreen({route,navigation}: editScreenProps) {
long:long,
lat:lat
}})}>
-
- View & Change Location
-
-
+ Change Location
+
-
- Name*
+
+ {/* Name* */}
+ Name
{
@@ -493,14 +476,15 @@ function EditScreen({route,navigation}: editScreenProps) {
marginTop: 15
}}
/>
-
- PJU Type *
+
+ {/* PJU Type * */}
+ PJU Type
(
@@ -508,39 +492,44 @@ function EditScreen({route,navigation}: editScreenProps) {
)}
defaultOption={{key:selectedPJUType, value:selectedPJUType}}
/>
- {PJUTypeError ? PJU Type is Required!:null}
+ {PJUTypeError ? PJU Type is Required!:null}
- Status *
-
-
+ {/* Status* */}
+ Status
+
+ {setCheckedStatus('Baik'); setPJUStatusError(false);}}
- />
- Baik
-
-
- {setCheckedStatus('Rusak'); setPJUStatusError(false); }}
- />
- Rusak
+ onPress={() => {setCheckedStatus('Baik'); setPJUStatusError(false)}}
+ />
+ Baik
+
+
+ {setCheckedStatus('Rusak'); setPJUStatusError(false); }}
+ />
+ Rusak
+
+ {PJUStatusError ? Status is Required!:null}
- {PJUStatusError ? Status is Required!:null}
-
- Information *
-
+ Information
+
-
+
Installation Date
setOpen(true)}
value={String(momentDate)}
/>
-
-
+
+ Attachment
+ Lampirkan foto / gambar
+ {
+ imgUrl.length === 0 ?
+ setModalAttachment(true)}>
+
+
+ Klik untuk menambahkan foto / gambar
+
+
+ :
+
+ setModalAttachment(true)}>
+
+
+
+
+ }
+ contentContainerStyle={{flexDirection:'row',flexWrap:'wrap',columnGap:25,rowGap:10}}
+ data={imgUrl}
+ renderItem={({item,index})=>renderItem({item,index})}
+ />
+ }
+
+
-
- {/*
-
- */}
-
+
+ UPDATE
+
+
{/* Online Mode Alert */}
{
- handleCancelAlertOnline();
- }}
- onConfirmPressed={() => {
- collectDataOnline();
- }}
- overlayStyle={{width:'100%'}}
- contentContainerStyle={{width:'70%',borderRadius:10}}
- titleStyle={{fontSize:20}}
- messageStyle={{fontSize:16}}
- />
-
- {/* Offline Mode Alert */}
- {
- setAlertOffline(false);
- }}
- overlayStyle={{width:'100%'}}
- contentContainerStyle={{width:'70%',borderRadius:10}}
- titleStyle={{fontSize:20}}
- messageStyle={{fontSize:16}}
- />
+ show={alertOnline}
+ showProgress={false}
+ title="Collecting Data"
+ message="Are you sure for Updating PJU data?"
+ closeOnTouchOutside={false}
+ closeOnHardwareBackPress={false}
+ showCancelButton={true}
+ showConfirmButton={true}
+ cancelText="No, cancel"
+ confirmText="Yes, Update it"
+ confirmButtonColor="#137997"
+ onCancelPressed={() => {
+ handleCancelAlertOnline();
+ }}
+ onConfirmPressed={() => {
+ collectDataOnline();
+ }}
+ overlayStyle={{width:'100%'}}
+ contentContainerStyle={{width:'70%',borderRadius:10}}
+ titleStyle={{fontSize:20}}
+ messageStyle={{fontSize:16}}
+ />
+ {/* Offline Mode Alert */}
+ {
+ setAlertOffline(false);
+ }}
+ overlayStyle={{width:'100%'}}
+ contentContainerStyle={{width:'70%',borderRadius:10}}
+ titleStyle={{fontSize:20}}
+ messageStyle={{fontSize:16}}
+ />
+ setModalAttachment(false)} style={{top:'18%',alignSelf:'center'}}>
+
+
+
+ Select Mode
+
+ setModalAttachment(false)} style={{alignSelf:'flex-end',padding:10}}>
+
+
+
+
+ {openCameraLib(),setModalAttachment(false)}} style={{height:50,backgroundColor:'#FFFFFF',alignItems:'center',justifyContent:'center',borderTopLeftRadius:10,borderTopRightRadius:10,borderWidth:1,borderColor:'#A6A6A6'}}>
+ Take photo
+
+ {openLib(),setModalAttachment(false)}} style={{height:50,backgroundColor:'#FFFFFF',alignItems:'center',justifyContent:'center',borderBottomLeftRadius:10,borderBottomRightRadius:10,borderWidth:1,borderColor:'#A6A6A6'}}>
+ Choose photo
+
+
+
+
)
}
@@ -663,23 +708,25 @@ const styles = StyleSheet.create({
color: 'black'
},
input: {
- height: 40,
+ width:352,
+ height: 45,
borderWidth: 1,
padding: 10,
- borderRadius: 50,
- color: 'black'
+ borderRadius: 10,
+ color: '#6B5E5E',
+ borderColor:'#A6A6A6'
},
container: {
- flex: 1,
- backgroundColor: '#ecf0f1',
padding: 10,
+ flexGrow: 1
},
mainContainer: {
flex: 1,
},
label: {
- fontSize: 21,
- color: 'black',
+ fontSize: 16,
+ fontWeight:'semibold',
+ color: '#434343',
// marginBottom: 20
},
title: {
diff --git a/src/component/mapCollectPolygonScreen.tsx b/src/component/mapCollectPolygonScreen.tsx
index 2b56f7e..52f50d7 100644
--- a/src/component/mapCollectPolygonScreen.tsx
+++ b/src/component/mapCollectPolygonScreen.tsx
@@ -121,9 +121,6 @@ function MapCollectPolygonScreen({route,navigation}:MapCollectPolygonProps):Reac
setZoom(currentZoomLevel);
}
// const ref = useRef();
-
-
-
return(
diff --git a/src/component/mapViewLineScreen.tsx b/src/component/mapViewLineScreen.tsx
index ce84776..72ecd64 100644
--- a/src/component/mapViewLineScreen.tsx
+++ b/src/component/mapViewLineScreen.tsx
@@ -2,6 +2,7 @@ import React, {useState, useEffect, useRef} from "react";
import { View, Text, StyleSheet, Alert, TouchableOpacity, Image } from "react-native";
import MapLibreGL from '@maplibre/maplibre-react-native';
+import { MapView,ShapeSource,Camera,UserLocation,PointAnnotation,FillLayer,LineLayer,VectorSource } from "@maplibre/maplibre-react-native";
import {useNavigation,NavigationContainer,useIsFocused} from '@react-navigation/native';
import Geolocation from "@react-native-community/geolocation";
import turfcenter from '@turf/center';
@@ -93,23 +94,22 @@ function MapViewLineScreen({route,navigation}:MapViewLineProps):React.JSX.Elemen
}
return(
-
setZoom(region.properties.zoomLevel)
}
>
-
-
-
-
+
-
{
coordinates.map((item:any,index:any)=>(
- }
key={index}
id={String(index)}
@@ -154,7 +154,7 @@ function MapViewLineScreen({route,navigation}:MapViewLineProps):React.JSX.Elemen
/>
))
}
-
+
{/* Widget Map */}
diff --git a/src/component/mapViewPolygonScreen.tsx b/src/component/mapViewPolygonScreen.tsx
index fdcfb66..5bf857d 100644
--- a/src/component/mapViewPolygonScreen.tsx
+++ b/src/component/mapViewPolygonScreen.tsx
@@ -2,6 +2,7 @@ import React, {useState, useEffect, useRef} from "react";
import { View, Text, StyleSheet, Alert, TouchableOpacity, Image } from "react-native";
import MapLibreGL from '@maplibre/maplibre-react-native';
+import { MapView,ShapeSource,Camera,UserLocation,PointAnnotation,FillLayer,LineLayer,VectorSource } from "@maplibre/maplibre-react-native";
import {useNavigation,NavigationContainer,useIsFocused} from '@react-navigation/native';
import Geolocation from "@react-native-community/geolocation";
import turfcenter from '@turf/center';
@@ -93,23 +94,22 @@ function MapViewPolygonScreen({route,navigation}:MapViewPolygonProps):React.JSX.
}
return(
-
setZoom(region.properties.zoomLevel)
}
>
-
-
-
-
-
+
-
{
coordinates.map((item:any,index:any)=>(
- }
key={index}
id={String(index)}
@@ -162,7 +162,7 @@ function MapViewPolygonScreen({route,navigation}:MapViewPolygonProps):React.JSX.
/>
))
}
-
+
{/* Widget Map */}
diff --git a/src/component/mapviewscreen.tsx b/src/component/mapviewscreen.tsx
index 68f1a01..a779d1e 100644
--- a/src/component/mapviewscreen.tsx
+++ b/src/component/mapviewscreen.tsx
@@ -1,5 +1,6 @@
import React, {useState, useEffect, useRef} from "react";
-import MapLibreGL, { PointAnnotation } from '@maplibre/maplibre-react-native';
+import MapLibreGL from '@maplibre/maplibre-react-native';
+import { MapView,ShapeSource,Camera,UserLocation,PointAnnotation,FillLayer,LineLayer,VectorSource } from "@maplibre/maplibre-react-native";
import {useNavigation,NavigationContainer,useIsFocused} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
@@ -253,21 +254,20 @@ function MapViewScreen({route,navigation}: MapViewProps): React.JSX.Element {
{/* Map View */}
-
-
- }
key={data.id}
id={data.id}
@@ -286,7 +286,7 @@ function MapViewScreen({route,navigation}: MapViewProps): React.JSX.Element {
setFixCoor({long:e.geometry.coordinates[0].toFixed(6),lat:e.geometry.coordinates[1].toFixed(6)})
}}
/>
-
+
{onDrag ?
diff --git a/src/component/resendPDAM.tsx b/src/component/resendPDAM.tsx
new file mode 100644
index 0000000..82bc0ed
--- /dev/null
+++ b/src/component/resendPDAM.tsx
@@ -0,0 +1,801 @@
+import { useEffect, useRef, useState } from 'react';
+import {View,Text, StyleSheet, ScrollView, TouchableOpacity, Image, Animated, TextInput, Button, Alert, Pressable, StatusBar, FlatList} from 'react-native';
+
+import MapLibreGL from '@maplibre/maplibre-react-native';
+import { MapView,ShapeSource,Camera,UserLocation,PointAnnotation,FillLayer,LineLayer,VectorSource } from "@maplibre/maplibre-react-native";
+import { SelectList } from 'react-native-dropdown-select-list';
+import { RadioButton } from 'react-native-paper';
+import DatePicker from 'react-native-date-picker';
+import Moment from 'moment';
+import { launchCamera, launchImageLibrary } from 'react-native-image-picker';
+import NetInfo from "@react-native-community/netinfo";
+import AwesomeAlert from 'react-native-awesome-alerts';
+import {useNavigation,NavigationContainer,useIsFocused} from '@react-navigation/native';
+import turfcenter from '@turf/center';
+const {points,polygon,lineString} = require('@turf/helpers');
+import RNFetchBlob from 'rn-fetch-blob';
+import Modal from "react-native-modal";
+
+
+
+import { PDAM_API_URL } from "../../urlConfig";
+import React from 'react';
+type collectLineScreenProps = {route: any,navigation: any};
+
+
+
+export default function ResendPDAM({route,navigation}:collectLineScreenProps) {
+ // console.log("route",route.params);
+ const {data,coors} = route.params;
+ const apiKey = "JoJs2pcDv5o0yQlQLMfI";
+ const [basemap, setBasemap] = useState("streets-v2");
+ const styleURL = `https://api.maptiler.com/maps/${basemap}/style.json?key=${apiKey}`;
+ const Pipe_Type = [
+ {key:'Pipa 24"', value:'Pipa 24"'},
+ {key:'Pipa 20"', value:'Pipa 20"'},
+ {key:'Pipa 16"', value:'Pipa 16"'},
+ {key:'Pipa 10"', value:'Pipa 10"'},
+ ]
+ const ref = useRef();
+ const [connected, setConnected] = useState(true);
+ const [currentIndex, setCurrentIndex] = useState(0);
+ const [imgUrl, setImgUrl] = useState([]);
+ const [files, setFiles] = useState([]);
+ const [pipeName, setPipeName] = useState(data.nama);
+ const [selectedPipeType, setselectedPipeType] = useState(data.jenis);
+ const [checkedStatus, setCheckedStatus] = useState(data.status);
+ const [Information, setInformation] = useState(data.keterangan);
+ const [open, setOpen] = useState(false);
+ const [install_date, setInstallDate] = useState(new Date(data.tanggal_installasi));
+ const momentDate = Moment(install_date).format('YYYY-MM-DD');
+ const [alertOnline, setAlertOnline] = useState(false);
+ const [alertOffline, setAlertOffline] = useState(false);
+ const [pipeNameError, setPipeNameError] = useState(false);
+ const [pipeTyeError, setPipeTypeError] = useState(false);
+ const [pipeStatusError, setPipeStatusError] = useState(false);
+ const [pipeInfoError, setPipeInfoError] = useState(false);
+ const [coordinates,setCoordinates] = useState([]);
+ const [loadGeom,setLoadGeom] = useState(true);
+ const [secondPress,setSecondPress] = useState(false);
+ const isFocused = useIsFocused();
+ const [centerCoords,setCenterCoords] = useState([]);
+ const [ModalAttachment, setModalAttachment] = useState(false);
+ useEffect(()=>{
+ if (isFocused) {
+ console.log(data);
+ if (coors === undefined) {
+ getData()
+ fetchData()
+ }
+ else{
+ console.log("kedua",coors);
+ let centCord = turfcenter(points(coors));
+ console.log("center kedua",centCord);
+ setCenterCoords(centCord.geometry.coordinates);
+ setLoadGeom(false);
+ setCoordinates(coors)
+ setSecondPress(true)
+ }
+ }
+ const unmount = navigation.addListener('beforeRemove', (e:any)=> {
+ console.log("Event",e);
+ if (e.data.action.type !== "NAVIGATE"){
+ e.preventDefault();
+ Alert.alert(
+ 'Unsave Case',
+ 'There are unsave case. Please chose what you want.',
+ [
+ {
+ text: 'Ok',
+ onPress: () => navigation.dispatch(e.data.action)
+ },
+ {
+ text: 'Continue',
+ style: 'cancel'
+ }
+ ]
+ )
+ }
+ })
+ const unsubscribe = NetInfo.addEventListener((state) => {
+ setConnected(state.isConnected!)
+ });
+ return () => {
+ unmount();
+ unsubscribe();
+ };
+
+ },[isFocused])
+ const getData = async () => {
+ try {
+ const url = `${PDAM_API_URL}/${route.params.data.id}`;
+ await RNFetchBlob.config({
+ trusty : true
+ }).fetch('GET', url
+ ).then(async (resp) => {
+ const json = resp.json();
+ const arr = json.map((item:any)=>{
+ // console.log(item.long);
+
+ setCoordinates(oldArray => [...oldArray,[Number(item.long),Number(item.lat)]])
+ return [Number(item.long),Number(item.lat)]
+ })
+ let centCord = turfcenter(points(arr));
+ console.log("center pertama",centCord.geometry.coordinates);
+ setCenterCoords(centCord.geometry.coordinates);
+ setLoadGeom(false);
+ }
+ )
+ } catch (e) {
+ console.log("error",e);
+
+ // error reading value
+ }
+ }
+ const fetchData = async () => {
+ try {
+ await RNFetchBlob.config({
+ trusty : true
+ }).fetch('POST', `${PDAM_API_URL}/getAttachment`,{
+ "Content-Type": "application/json",
+ },
+ JSON.stringify({
+ id:data.id
+ })
+ ).then(async (resp) => {
+ const json = resp.json()
+ json?.forEach(asset => {
+ setImgUrl(oldArray => [...oldArray,asset.file]);
+ });
+ })
+
+ } catch (error) {
+ console.error('Error fetching data:', error);
+ }
+ };
+ const openCameraLib = async () => {
+ const result = await launchCamera({
+ mediaType: 'photo',
+ quality: 1,
+ includeBase64: true,
+ saveToPhotos: true
+ });
+ const newObj = {
+ file_type: result?.assets![0]?.type,
+ file: result?.assets![0]?.base64,
+ fileSize: result?.assets![0]?.fileSize,
+ }
+ setFiles([...files,newObj]);
+ setImgUrl([...imgUrl,result?.assets![0]?.base64]);
+ };
+ const openLib = async () => {
+ const result = await launchImageLibrary({
+ quality: 1,
+ mediaType: 'photo',
+ selectionLimit: 0,
+ includeExtra: true,
+ includeBase64: true
+ });
+ result?.assets?.forEach(asset => {
+ const newObj = {
+ file_type: asset.type,
+ file: asset.base64,
+ fileSize: asset.fileSize
+ }
+ setFiles(oldArray => [...oldArray,newObj]);
+ setImgUrl(oldArray => [...oldArray,asset.base64]);
+ });
+ };
+ const PrevImg = ({isIndex}) => {
+ if(isIndex===0){
+ return (
+ {
+ setCurrentIndex(currentIndex-1)
+ ref.current.scrollToIndex({
+ animated: true,
+ index: currentIndex-1
+ });
+ }}>
+
+
+ )
+ }
+ return (
+ {
+ setCurrentIndex(currentIndex-1)
+ ref.current.scrollToIndex({
+ animated: true,
+ index: currentIndex-1
+ });
+ }}>
+
+
+ )
+ };
+ const NextImg = ({isIndex}) => {
+ if(isIndex===imgUrl.length-1){
+ return (
+ {
+ setCurrentIndex(currentIndex+1)
+ ref.current.scrollToIndex({
+ animated: true,
+ index: currentIndex+1
+ });
+ }}>
+
+
+ )
+ }
+ return (
+ {
+ setCurrentIndex(currentIndex+1)
+ ref.current.scrollToIndex({
+ animated: true,
+ index: currentIndex+1
+ });
+ }}>
+
+
+ )
+ };
+ const showDialog = () => {
+ console.log("coor",coordinates);
+ if(!pipeName){
+ setPipeNameError(true)
+ }else{
+ setPipeNameError(false)
+ }
+ if(!selectedPipeType){
+ setPipeTypeError(true)
+ }else{
+ setPipeTypeError(false)
+ }
+ if(!checkedStatus){
+ setPipeStatusError(true)
+ }else{
+ setPipeStatusError(false)
+ }
+ if(!Information){
+ setPipeInfoError(true)
+ }else{
+ setPipeInfoError(false)
+ }
+ if(!pipeName || !selectedPipeType || !checkedStatus || !Information) {
+ return false
+ }
+ if(connected){
+ setAlertOnline(true);
+ }
+ else{
+ setAlertOffline(true)
+ }
+ };
+ const handleCancelAlertOnline = () => {
+ setAlertOnline(false);
+ };
+ const handleCancelAlertOffline = () => {
+ setAlertOffline(false);
+ };
+ const insertAttachment = (files: any) => {
+ try {
+ files.forEach(async function(file:any) {
+ const url = `${PDAM_API_URL}/addAttachment`;
+ await RNFetchBlob.config({
+ trusty : true
+ }).fetch('POST', url,{
+ "Content-Type": "application/json",
+ },
+ JSON.stringify({pdam_id:data.id, file:file.file, mimetype:file.file_type, size:file.fileSize})
+ ).then(async (resp) => {
+
+ }
+ )
+ });
+ } catch (error) {
+ console.log(error);
+ }
+ };
+ const collectDataOnline = async () => {
+ try {
+ const geom = coordinates.map((item:any)=>{
+ return String(item).replace(',',' ')
+ });
+ const obj = {
+ nama: pipeName,
+ jenis: selectedPipeType,
+ tanggal_installasi: momentDate,
+ status: checkedStatus,
+ keterangan: Information,
+ geom: `MULTILINESTRING((${geom}))`,
+ id:data.id
+ };
+ const url = `${PDAM_API_URL}/updateData`;
+ await RNFetchBlob.config({
+ trusty : true
+ }).fetch('POST', url,{
+ "Content-Type": "application/json",
+ },
+ JSON.stringify(obj)
+ ).then(async (resp) => {
+ const status = resp.respInfo.status
+ if (status == 201) {
+ insertAttachment(files)
+ Alert.alert("Success")
+ setAlertOnline(false);
+ navigation.navigate('Inbox Pipa PDAM', { screen: 'Inbox Pipa PDAM'})
+ }
+ else {
+ Alert.alert("Internal Server Error")
+ }
+ }
+
+ )
+
+ } catch (error) {
+
+ }
+ // const geom = coordinates.map((item:any)=>{
+ // return String(item).replace(',',' ')
+ // })
+ // // console.log("geom",geom);
+
+ // const obj = {
+ // nama: pipeName,
+ // jenis: selectedPipeType,
+ // tanggal_installasi: momentDate,
+ // status: checkedStatus,
+ // keterangan: Information,
+ // geom: `MULTILINESTRING((${geom}))`,
+ // id:data.id
+ // }
+ // console.log(obj);
+
+ // let result = await fetch(`${PDAM_API_URL}/updateData`, {
+ // method: "POST",
+ // headers: {
+ // "Content-Type": "application/json"
+ // },
+ // body: JSON.stringify(obj)
+ // })
+
+ // // const json = await result.json();
+ // const status = result.status
+ // if (status == 201) {
+ // insertAttachment(files)
+ // }
+ // else {
+ // Alert.alert("Internal Server Error")
+ // }
+ };
+ const collectDataOffline = () => {
+ setAlertOnline(false);
+ };
+ const renderItem = ({item,index}:any) => {
+ return (
+
+
+
+ );
+ };
+ return (
+
+
+
+
+
+ {
+ !loadGeom ?
+
+
+
+
+
+
+ {
+ coordinates.map((item:any,index:number)=>(
+ }
+ key={index}
+ id={String(index)}
+ coordinate={item}
+ draggable={false}
+ />
+ ))
+ }
+
+ {!secondPress ?
+ {navigation.navigate('Map View Line', { screen: 'Map View Line',data: {
+ id:data.id,
+ pipe_name:pipeName,
+ pipe_type:selectedPipeType,
+ tanggal_installasi: momentDate,
+ status: checkedStatus,
+ keterangan: Information,
+ geom:coordinates
+ }});
+ }
+ }>
+ Change Location
+
+ :
+ {navigation.navigate('Map View Line', { screen: 'Map View Line',data: {
+ id:data.id,
+ pipe_name:pipeName,
+ pipe_type:selectedPipeType,
+ tanggal_installasi: momentDate,
+ status: checkedStatus,
+ keterangan: Information,
+ geom:[...coordinates,coordinates[0]]
+ }});
+ }
+ }>
+ Change Location
+
+ }
+
+ :
+ null
+ }
+
+
+ {/* Name* */}
+ Pipe Name
+ {
+ setPipeName(text)
+ }}
+ onChange={()=> {
+ setPipeNameError(false)
+ }}
+ defaultValue={pipeName}
+ />
+ {pipeNameError ? Pipe Name is Required!:null}
+
+
+
+ {/* PJU Type * */}
+ Pipe Type
+ (
+ [setPipeTypeError(false)]
+ )}
+ defaultOption={{key:selectedPipeType, value:selectedPipeType}}
+ />
+ {pipeTyeError ? Pipe Type is Required!:null}
+
+
+
+ {/* Status* */}
+ Status
+
+ {setCheckedStatus('Baik'); setPipeStatusError(false)}}
+ />
+ Baik
+
+
+ {setCheckedStatus('Rusak'); setPipeStatusError(false); }}
+ />
+ Rusak
+
+ {pipeStatusError ? Status is Required!:null}
+
+
+
+ Information
+ {
+ setInformation(text)
+ }}
+ onChange={()=> {
+ setPipeInfoError(false)
+ }}
+ defaultValue={Information}
+ />
+ {pipeInfoError ? Information is Required!:null}
+
+
+
+ Installation Date
+ setOpen(true)}
+ value={String(momentDate)}
+ />
+ {
+ setOpen(false)
+ setInstallDate(survey_date)
+ }}
+ onCancel={() => {
+ setOpen(false)
+ }}
+ />
+
+
+
+ Attachment
+ Lampirkan foto / gambar
+ {
+ imgUrl.length === 0 ?
+ setModalAttachment(true)}>
+
+
+ Klik untuk menambahkan foto / gambar
+
+
+ :
+
+ setModalAttachment(true)}>
+
+
+
+
+ }
+ contentContainerStyle={{flexDirection:'row',flexWrap:'wrap',columnGap:25,rowGap:10}}
+ data={imgUrl}
+ renderItem={({item,index})=>renderItem({item,index})}
+ />
+ }
+
+
+
+
+ UPDATE
+
+
+ {/* Online Mode Alert */}
+ {
+ handleCancelAlertOnline();
+ }}
+ onConfirmPressed={() => {
+ collectDataOnline();
+ }}
+ overlayStyle={{width:'100%'}}
+ contentContainerStyle={{width:'70%',borderRadius:10}}
+ titleStyle={{fontSize:20}}
+ messageStyle={{fontSize:16}}
+ />
+ {/* Offline Mode Alert */}
+ {
+ handleCancelAlertOffline();
+ }}
+ onConfirmPressed={() => {
+ collectDataOffline();
+ }}
+ overlayStyle={{width:'100%'}}
+ contentContainerStyle={{width:'70%',borderRadius:10}}
+ titleStyle={{fontSize:20}}
+ messageStyle={{fontSize:16}}
+ />
+ setModalAttachment(false)} style={{top:'18%',alignSelf:'center'}}>
+
+
+
+ Select Mode
+
+ setModalAttachment(false)} style={{alignSelf:'flex-end',padding:10}}>
+
+
+
+
+ {openCameraLib(),setModalAttachment(false)}} style={{height:50,backgroundColor:'#FFFFFF',alignItems:'center',justifyContent:'center',borderTopLeftRadius:10,borderTopRightRadius:10,borderWidth:1,borderColor:'#A6A6A6'}}>
+ Take photo
+
+ {openLib(),setModalAttachment(false)}} style={{height:50,backgroundColor:'#FFFFFF',alignItems:'center',justifyContent:'center',borderBottomLeftRadius:10,borderBottomRightRadius:10,borderWidth:1,borderColor:'#A6A6A6'}}>
+ Choose photo
+
+
+
+
+
+ );
+};
+
+const styles = StyleSheet.create({
+ errorInput: {
+ color: 'red',
+ marginLeft: 20
+ },
+ inputLong: {
+ height: 40,
+ borderWidth: 1,
+ padding: 10,
+ width: 180,
+ marginRight: 20
+ },
+ inputLat: {
+ height: 40,
+ borderWidth: 1,
+ padding: 10,
+ borderRadius: 50,
+ width: 180,
+ color: 'black'
+ },
+ input: {
+ width:352,
+ height: 45,
+ borderWidth: 1,
+ padding: 10,
+ borderRadius: 10,
+ color: '#6B5E5E',
+ borderColor:'#A6A6A6'
+ },
+ container: {
+ padding: 10,
+ flexGrow: 1
+ },
+ mainContainer: {
+ flex: 1,
+ },
+ label: {
+ fontSize: 16,
+ fontWeight:'semibold',
+ color: '#434343',
+ // marginBottom: 20
+ },
+ title: {
+ alignItems: 'center',
+ justifyContent: 'center',
+ alignSelf: 'center',
+ fontWeight: 'bold',
+ fontSize: 22,
+ color: 'black',
+ marginBottom: 10
+ },
+ borderImg: {
+ borderColor: 'black',
+ borderWidth: 1,
+ borderRadius: 20,
+ },
+ img: {
+ width: 295,
+ height: 500,
+ borderRadius: 6,
+ },
+ btnCameraContainer: {
+ flexDirection: 'row',
+ justifyContent: 'space-around',
+ top:10,
+
+ },
+ btnCamera: {
+ alignItems: 'center',
+ justifyContent: 'center',
+ alignSelf: 'center',
+ width: 100,
+ height: 40,
+ bottom:20,
+ borderRadius: 6,
+ backgroundColor: '#80CBD3'
+ },
+ textBtn: {
+ color: '#fff'
+ },
+ buttonImageIconStyle: {
+ padding: 10,
+ margin: 5,
+ height: 25,
+ width: 25,
+ resizeMode: 'stretch',
+ },
+});
+
diff --git a/src/component/resendPJU.tsx b/src/component/resendPJU.tsx
new file mode 100644
index 0000000..ab42fbe
--- /dev/null
+++ b/src/component/resendPJU.tsx
@@ -0,0 +1,799 @@
+import React, { useEffect, useRef, useState, useCallback } from 'react';
+
+import {
+ TextInput,
+ Button,
+ PermissionsAndroid,
+ StatusBar,
+ StyleSheet,
+ Text,
+ View,
+ Image,
+ TouchableOpacity,
+ ScrollView,
+ FlatList,
+ Dimensions,
+ Animated,
+ Alert,
+ Pressable
+ } from 'react-native';
+
+ import { launchCamera, launchImageLibrary } from 'react-native-image-picker';
+ import { SelectList } from 'react-native-dropdown-select-list';
+ import DatePicker from 'react-native-date-picker';
+ import AsyncStorage from '@react-native-async-storage/async-storage';
+ import DocumentPicker from "react-native-document-picker";
+ import NetInfo from "@react-native-community/netinfo";
+ import RNFS from 'react-native-fs';
+
+ import MapLibreGL from '@maplibre/maplibre-react-native';
+ import { MapView,ShapeSource,Camera,UserLocation,PointAnnotation,FillLayer,LineLayer,VectorSource } from "@maplibre/maplibre-react-native";
+ import Moment from 'moment';
+ import { RadioButton } from 'react-native-paper';
+ import AwesomeAlert from 'react-native-awesome-alerts';
+ import {useNavigation,NavigationContainer,useIsFocused} from '@react-navigation/native';
+ import RNFetchBlob from 'rn-fetch-blob';
+ import Modal from "react-native-modal";
+
+ import { PJU_API_URL } from "../../urlConfig";
+
+type editScreenProps = {route: any,navigation: any};
+
+function ResendPJU({route,navigation}: editScreenProps) {
+ const apiKey = "JoJs2pcDv5o0yQlQLMfI";
+ const [basemap, setBasemap] = useState("streets-v2");
+ const styleURL = `https://api.maptiler.com/maps/${basemap}/style.json?key=${apiKey}`;
+ const {data,fixCoordinate} = route.params;
+ const [imgUrl, setImgUrl] = useState([]);
+ const [files, setFiles] = useState([]);
+ const [fileDocument, setFileDocument] = useState([]);
+ const [currentIndex, setCurrentIndex] = useState(0);
+ const [connected, setConnected] = useState(true)
+ console.log("coor",{"long":data.long,"lat":data.lat});
+
+
+ const openCameraLib = async () => {
+ const result = await launchCamera({
+ mediaType: 'photo',
+ quality: 1,
+ includeBase64: true
+ });
+
+ const newObj = {
+ file_type: result?.assets![0]?.type,
+ file: result?.assets![0]?.base64,
+ fileSize: result?.assets![0]?.fileSize,
+ }
+ setFiles([...files,newObj]);
+ setImgUrl([...imgUrl,result?.assets[0]?.base64]);
+ };
+ const openLib = async () => {
+ const result = await launchImageLibrary({
+ quality: 1,
+ mediaType: 'photo',
+ selectionLimit: 0,
+ includeExtra: true,
+ includeBase64: true
+ });
+ result?.assets?.forEach(asset => {
+ const newObj = {
+ file_type: asset.type,
+ file: asset.base64,
+ fileSize: asset.fileSize
+ }
+ setFiles(oldArray => [...oldArray,newObj]);
+ setImgUrl(oldArray => [...oldArray,asset.base64]);
+ });
+ };
+ const PrevImg = ({isIndex}) => {
+ if(isIndex===0){
+ return (
+ {
+ setCurrentIndex(currentIndex-1)
+ ref.current.scrollToIndex({
+ animated: true,
+ index: currentIndex-1
+ });
+ }}>
+
+
+ )
+ }
+ return (
+ {
+ setCurrentIndex(currentIndex-1)
+ ref.current.scrollToIndex({
+ animated: true,
+ index: currentIndex-1
+ });
+ }}>
+
+
+ )
+ };
+ const NextImg = ({isIndex}) => {
+ if(isIndex===imgUrl.length-1){
+ return (
+ {
+ setCurrentIndex(currentIndex+1)
+ ref.current.scrollToIndex({
+ animated: true,
+ index: currentIndex+1
+ });
+ }}>
+
+
+ )
+ }
+ return (
+ {
+ setCurrentIndex(currentIndex+1)
+ ref.current.scrollToIndex({
+ animated: true,
+ index: currentIndex+1
+ });
+ }}>
+
+
+ )
+ };
+ const PJU_Type = [
+ {key:'Lampu 20 W', value:'Lampu 20 W'},
+ {key:'Lampu 15 W', value:'Lampu 15 W'},
+ {key:'Lampu 10 W', value:'Lampu 10 W'},
+ {key:'Lampu 5 W', value:'Lampu 5 W'},
+ ]
+ const ref = useRef();
+ const [open, setOpen] = useState(false)
+ const [pju_name, setPJUname] = useState(data.nama);
+ const [selectedPJUType, setselectedPJUType] = useState(data.jenis);
+ const [pju_info, setPJUinfo] = useState(data.keterangan);
+ const [checkedStatus, setCheckedStatus] = useState(data.status);
+ const [install_date, setInstallDate] = useState(new Date(data.tanggal_installasi));
+ const momentDate = Moment(install_date).format('YYYY-MM-DD')
+ const [attachmentImgError, setattachmentImgError] = useState(false);
+ const [pjuNameError, setPJUNameError] = useState(false);
+ const [PJUTypeError, setPJUTypeError] = useState(false);
+ const [PJUStatusError, setPJUStatusError] = useState(false);
+ const [PJUInfoError, setPJUInfoError] = useState(false);
+ const [long,setLong] = useState();
+ const [lat,setLat] = useState();
+ const [attach,setAttach] = useState([]);
+ const [load,setLoad] = useState(true);
+ const isFocused = useIsFocused();
+ const [ModalAttachment, setModalAttachment] = useState(false);
+ const [userID,setUserID] = useState();
+
+ useEffect(()=> {
+ if (isFocused) {
+ setLong(data.long);
+ setLat(data.lat);
+ const getKey = async () =>{
+ const jsonValue = await AsyncStorage.getItem('USER_DATA')
+ console.log(JSON.parse(jsonValue!));
+ const data = JSON.parse(jsonValue!);
+ console.log("user_data",data.id);
+ setUserID(data.id)
+ };
+ getKey();
+ fetchData();
+ const unmount = navigation.addListener('beforeRemove', (e:any)=> {
+ console.log("Event",e);
+ if (e.data.action.type !== "NAVIGATE"){
+ e.preventDefault();
+ Alert.alert(
+ 'Unsave Case',
+ 'There are unsave case. Please chose what you want.',
+ [
+ {
+ text: 'Ok',
+ onPress: () => navigation.dispatch(e.data.action)
+ },
+ {
+ text: 'Continue',
+ style: 'cancel'
+ }
+ ]
+ )
+ }
+ })
+ const unsubscribe = NetInfo.addEventListener((state) => {
+ setConnected(state.isConnected!)
+ });
+ return () => {
+ unmount()
+ unsubscribe();
+ };
+ }
+ },[isFocused]);
+
+ const fetchData = async () => {
+ try {
+ await RNFetchBlob.config({
+ trusty : true
+ }).fetch('POST', `${PJU_API_URL}/getAttachment`,{
+ "Content-Type": "application/json",
+ },
+ JSON.stringify({
+ id:data.id
+ })
+ ).then(async (resp) => {
+ const json = resp.json()
+ json?.forEach(asset => {
+ setImgUrl(oldArray => [...oldArray,asset.file]);
+ });
+ })
+
+ } catch (error) {
+ console.error('Error fetching data:', error);
+ }
+ };
+ const collectDataOnline = async() => {
+ try {
+ let date = new Date();
+ const milliseconds = Date.UTC(
+ date.getFullYear(),
+ date.getMonth(),
+ date.getDate(),
+ date.getHours(),
+ date.getMinutes(),
+ date.getSeconds(),
+ );
+ const localTime = new Date(milliseconds);
+ await RNFetchBlob.config({
+ trusty : true
+ }).fetch('POST', `${PJU_API_URL}/addData`,{
+ "Content-Type": "application/json",
+ },
+ JSON.stringify({
+ nama: pju_name,
+ jenis: selectedPJUType,
+ tanggal_installasi: momentDate,
+ status: checkedStatus,
+ keterangan: pju_info,
+ geom: `POINT(${data.long} ${data.lat})`,
+ created_by: userID,
+ created_at: localTime
+ })
+ ).then(async (resp) => {
+ const status = resp.respInfo.status
+ if (status == 201) {
+ insertAttachment(files)
+ Alert.alert("Success")
+ setAlertOnline(false);
+ navigation.navigate('Draft Penerangan Jalan Umum', { screen: 'Draft Penerangan Jalan Umum'})
+ }
+ else {
+ Alert.alert("Internal Server Error")
+ }
+ })
+ } catch (error) {
+
+ }
+ }
+ const getMyObject = async () => {
+ try {
+ const jsonValue = await AsyncStorage.getItem('draft')
+ console.log(JSON.parse(jsonValue!));
+
+ // return jsonValue != null ? JSON.parse(jsonValue) : null
+ } catch(e) {
+ // read error
+ }
+ }
+ const removeValue = async () => {
+ try {
+ await AsyncStorage.removeItem('Test by mobile / Lampu 20 W / 2024-11-14 / Baik / draftJPU')
+ } catch(e) {
+ // remove error
+ }
+ }
+ const getAllKeys = async () => {
+ // let keys = []
+ try {
+ const keys = await AsyncStorage.getAllKeys()
+ console.log(keys);
+
+ } catch(e) {
+ // read key error
+ }
+ // example console.log result:
+ // ['@MyApp_user', '@MyApp_key']
+ }
+ const insertAttachment = (files: any) => {
+ try {
+ files.forEach(async function(file:any) {
+ const url = `${PJU_API_URL}/addAttachment`;
+ await RNFetchBlob.config({
+ trusty : true
+ }).fetch('POST', url,{
+ "Content-Type": "application/json",
+ },
+ JSON.stringify({pju_id:data.id, file:file.file, mimetype:file.file_type, size:file.fileSize})
+ ).then(async (resp) => {
+ const status = resp.respInfo.status
+ }
+ )
+ });
+ } catch (error) {
+ console.log(error);
+ }
+ // files.forEach(async function(file:any){
+ // const url = `${PJU_API_URL}/addAttachment`;
+ // let result = await fetch(url, {
+ // method: "POST",
+ // headers: {
+ // "Content-Type": "application/json"
+ // },
+ // body: JSON.stringify({pju_id:data.id, file:file.file, mimetype:file.file_type, size:file.fileSize})
+ // })
+ // if (result.status == 201) {
+ // Alert.alert("Success")
+ // setAlertOnline(false);
+ // navigation.navigate('Property Survey', { screen: 'Property Survey'})
+ // }
+ // });
+ }
+ const uploadFileOnHandler = async () => {
+ try {
+ const pickedFile = await DocumentPicker.pickSingle({
+ type: [DocumentPicker.types.allFiles],
+ // allowMultiSelection:true
+ })
+ await RNFS.readFile(pickedFile.uri, 'base64').then(data => {
+ console.log('base64', data);
+ let your_bytes = btoa(data);
+ const newObj = {
+ file_type: pickedFile.type,
+ file: your_bytes
+ }
+ setFiles([...files,newObj]);
+ setFileDocument([...fileDocument,pickedFile]);
+ });
+ } catch (error) {
+ console.error(error)
+ }
+ }
+ const deleteByIndex = (index:number) => {
+ setFileDocument(oldValues => {
+ return oldValues.filter((_: any, i: number) => i !== index)
+ })
+ }
+ const [alertOnline, setAlertOnline] = useState(false);
+ const [alertOffline, setAlertOffline] = useState(false);
+ const showDialog = () => {
+ // if (imgUrl.length === 0) {
+ // setattachmentImgError(true);
+ // }
+ // else{
+ // setattachmentImgError(false);
+ // }
+ if (!pju_name) {
+ setPJUNameError(true);
+ }
+ else{
+ setPJUNameError(false);
+ }
+ if (!selectedPJUType) {
+ setPJUTypeError(true);
+ }
+ else{
+ setPJUTypeError(false);
+ }
+ if (!checkedStatus) {
+ setPJUStatusError(true);
+ }
+ else{
+ setPJUStatusError(false);
+ }
+ if (!pju_info) {
+ setPJUInfoError(true);
+ }
+ else{
+ setPJUInfoError(false);
+ }
+ if(!pju_name || !pju_info || !selectedPJUType || !checkedStatus) {
+ return false
+ }
+ if(connected){
+ setAlertOnline(true);
+ }
+ else{
+ setAlertOffline(true)
+ }
+ };
+ const handleCancelAlertOnline = () => {
+ setAlertOnline(false);
+ };
+ const handleCancelAlertOffline = () => {
+ setAlertOffline(false);
+ };
+ const renderItem = ({item,index}:any) => {
+ return (
+
+
+
+ );
+ };
+ return(
+
+
+
+
+
+
+ {/* navigation.navigate('PJU Map Collect', { screen: 'PJU Map Collect'})} style={{alignItems:'center'}}> */}
+
+
+ {lat},
+ {long}
+
+
+ }
+ id={"pjuCoordinate"}
+ coordinate={[long, lat]}
+ />
+
+
+ {/* */}
+ navigation.navigate('MapView', { screen: 'MapView',data: {
+ id:data.id,
+ nama:pju_name,
+ jenis:selectedPJUType,
+ tanggal_installasi:momentDate,
+ status:checkedStatus,
+ keterangan:pju_info,
+ long:long,
+ lat:lat
+ }})}>
+ Change Location
+
+
+
+
+ {/* Name* */}
+ Name
+ {
+ setPJUname(text)
+ }}
+ onChange={()=> {
+ setPJUNameError(false)
+ }}
+ defaultValue={pju_name}
+ />
+ {pjuNameError ? Name is Required!:null}
+
+
+
+ {/* PJU Type * */}
+ PJU Type
+ (
+ [setPJUTypeError(false)]
+ )}
+ defaultOption={{key:selectedPJUType, value:selectedPJUType}}
+ />
+
+ {PJUTypeError ? PJU Type is Required!:null}
+
+
+ {/* Status* */}
+ Status
+
+ {setCheckedStatus('Baik'); setPJUStatusError(false)}}
+ />
+ Baik
+
+
+ {setCheckedStatus('Rusak'); setPJUStatusError(false); }}
+ />
+ Rusak
+
+ {PJUStatusError ? Status is Required!:null}
+
+
+
+ Information
+ {
+ setPJUinfo(text)
+ }}
+ onChange={()=> {
+ setPJUInfoError(false)
+ }}
+ defaultValue={pju_info}
+ />
+ {PJUInfoError ? Information is Required!:null}
+
+
+
+ Installation Date
+ setOpen(true)}
+ value={String(momentDate)}
+ />
+ {
+ setOpen(false)
+ setInstallDate(survey_date)
+ }}
+ onCancel={() => {
+ setOpen(false)
+ }}
+ />
+
+
+
+ Attachment
+ Lampirkan foto / gambar
+ {
+ imgUrl.length === 0 ?
+ setModalAttachment(true)}>
+
+
+ Klik untuk menambahkan foto / gambar
+
+
+ :
+
+ setModalAttachment(true)}>
+
+
+
+
+ }
+ contentContainerStyle={{flexDirection:'row',flexWrap:'wrap',columnGap:25,rowGap:10}}
+ data={imgUrl}
+ renderItem={({item,index})=>renderItem({item,index})}
+ />
+ }
+
+
+
+
+ RESEND
+
+
+ {/* Online Mode Alert */}
+ {
+ handleCancelAlertOnline();
+ }}
+ onConfirmPressed={() => {
+ collectDataOnline();
+ }}
+ overlayStyle={{width:'100%'}}
+ contentContainerStyle={{width:'70%',borderRadius:10}}
+ titleStyle={{fontSize:20}}
+ messageStyle={{fontSize:16}}
+ />
+ {/* Offline Mode Alert */}
+ {
+ setAlertOffline(false);
+ }}
+ overlayStyle={{width:'100%'}}
+ contentContainerStyle={{width:'70%',borderRadius:10}}
+ titleStyle={{fontSize:20}}
+ messageStyle={{fontSize:16}}
+ />
+ setModalAttachment(false)} style={{top:'18%',alignSelf:'center'}}>
+
+
+
+ Select Mode
+
+ setModalAttachment(false)} style={{alignSelf:'flex-end',padding:10}}>
+
+
+
+
+ {openCameraLib(),setModalAttachment(false)}} style={{height:50,backgroundColor:'#FFFFFF',alignItems:'center',justifyContent:'center',borderTopLeftRadius:10,borderTopRightRadius:10,borderWidth:1,borderColor:'#A6A6A6'}}>
+ Take photo
+
+ {openLib(),setModalAttachment(false)}} style={{height:50,backgroundColor:'#FFFFFF',alignItems:'center',justifyContent:'center',borderBottomLeftRadius:10,borderBottomRightRadius:10,borderWidth:1,borderColor:'#A6A6A6'}}>
+ Choose photo
+
+
+
+
+
+ )
+}
+const styles = StyleSheet.create({
+ errorInput: {
+ color: 'red',
+ marginLeft: 20
+ },
+ inputLong: {
+ height: 40,
+ borderWidth: 1,
+ padding: 10,
+ width: 180,
+ marginRight: 20
+ },
+ inputLat: {
+ height: 40,
+ borderWidth: 1,
+ padding: 10,
+ borderRadius: 50,
+ width: 180,
+ color: 'black'
+ },
+ input: {
+ width:352,
+ height: 45,
+ borderWidth: 1,
+ padding: 10,
+ borderRadius: 10,
+ color: '#6B5E5E',
+ borderColor:'#A6A6A6'
+ },
+ container: {
+ padding: 10,
+ flexGrow: 1
+ },
+ mainContainer: {
+ flex: 1,
+ },
+ label: {
+ fontSize: 16,
+ fontWeight:'semibold',
+ color: '#434343',
+ // marginBottom: 20
+ },
+ title: {
+ alignItems: 'center',
+ justifyContent: 'center',
+ alignSelf: 'center',
+ fontWeight: 'bold',
+ fontSize: 22,
+ color: 'black',
+ marginBottom: 10
+ },
+ borderImg: {
+ borderColor: 'black',
+ borderWidth: 1,
+ borderRadius: 20,
+ },
+ img: {
+ width: 330,
+ height: 500,
+ borderRadius: 6,
+ },
+ btnCameraContainer: {
+ flexDirection: 'row',
+ justifyContent: 'space-around',
+ top:10,
+
+ },
+ btnCamera: {
+ alignItems: 'center',
+ justifyContent: 'center',
+ alignSelf: 'center',
+ width: 100,
+ height: 40,
+ bottom:20,
+ borderRadius: 6,
+ backgroundColor: '#80CBD3'
+ },
+ textBtn: {
+ color: '#fff'
+ },
+ buttonImageIconStyle: {
+ padding: 10,
+ margin: 5,
+ height: 25,
+ width: 25,
+ resizeMode: 'stretch',
+ },
+});
+
+export default ResendPJU;
\ No newline at end of file