mfajri
/
SurveyApp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Update UI Collect Data

master
Irul24 1 year ago
parent
e660c5572d
commit
cfd52734da
6 changed files with 569 additions and 506 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      App.tsx
  2. 424
      src/component/collectLinescreen.tsx
  3. 458
      src/component/collectPolygonscreen.tsx
  4. 173
      src/component/collectscreen.tsx
  5. 2
      src/component/mapCollectLineScreen.tsx
  6. 10
      src/component/mapCollectScreen.tsx

6
App.tsx
Unescape View File

@ -302,7 +302,7 @@ export const Nav = () => {
headerStyle: { headerStyle: {
backgroundColor: '#34A6F8', backgroundColor: '#34A6F8',
}, },
headerRight: geonetLogo, headerRight: geonetLogo2,
headerTintColor: '#FFFFFF', headerTintColor: '#FFFFFF',
headerShadowVisible: false, headerShadowVisible: false,
}} }}
@ -383,7 +383,7 @@ export const Nav = () => {
fontSize:20 fontSize:20
} }
}}/> }}/>
<Stack.Screen name="PJU Collecting" component={CollectScreen} <Stack.Screen name="Add Data PJU" component={CollectScreen}
options={{ options={{
headerStyle: { headerStyle: {
backgroundColor: '#34A6F8', backgroundColor: '#34A6F8',
@ -604,7 +604,7 @@ export const Nav = () => {
fontSize:20 fontSize:20
} }
}}/> }}/>
<Stack.Screen name="PDAM Collecting" component={CollectLineScreen} <Stack.Screen name="Add Data PDAM" component={CollectLineScreen}
options={{ options={{
headerStyle: { headerStyle: {
backgroundColor: '#34A6F8', backgroundColor: '#34A6F8',

424
src/component/collectLinescreen.tsx
Unescape View File

@ -1,5 +1,5 @@
import { useEffect, useRef, useState } from 'react'; 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, StatusBar, Pressable, FlatList} from 'react-native';
import MapLibreGL 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 { MapView,ShapeSource,Camera,UserLocation,PointAnnotation,FillLayer,LineLayer,VectorSource } from "@maplibre/maplibre-react-native";
@ -14,6 +14,7 @@ import AsyncStorage from '@react-native-async-storage/async-storage';
import turfcenter from '@turf/center'; import turfcenter from '@turf/center';
const {points,polygon,lineString} = require('@turf/helpers'); const {points,polygon,lineString} = require('@turf/helpers');
import RNFetchBlob from 'rn-fetch-blob'; import RNFetchBlob from 'rn-fetch-blob';
import Modal from "react-native-modal";
@ -56,7 +57,7 @@ export default function CollectLineScreen({route,navigation}:collectLineScreenPr
const [files, setFiles] = useState([]); const [files, setFiles] = useState([]);
const [pipeName, setPipeName] = useState(''); const [pipeName, setPipeName] = useState('');
const [selectedPipeType, setselectedPipeType] = useState(""); const [selectedPipeType, setselectedPipeType] = useState("");
const [checkedStatus, setCheckedStatus] = useState(''); const [checkedStatus, setCheckedStatus] = useState('Baik');
const [Information, setInformation] = useState(''); const [Information, setInformation] = useState('');
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const [install_date, setInstallDate] = useState(new Date()); const [install_date, setInstallDate] = useState(new Date());
@ -67,6 +68,7 @@ export default function CollectLineScreen({route,navigation}:collectLineScreenPr
const [pipeTyeError, setPipeTypeError] = useState(false); const [pipeTyeError, setPipeTypeError] = useState(false);
const [pipeStatusError, setPipeStatusError] = useState(false); const [pipeStatusError, setPipeStatusError] = useState(false);
const [pipeInfoError, setPipeInfoError] = useState(false); const [pipeInfoError, setPipeInfoError] = useState(false);
const [ModalAttachment, setModalAttachment] = useState(false);
const openCameraLib = async () => { const openCameraLib = async () => {
const result = await launchCamera({ const result = await launchCamera({
@ -268,235 +270,240 @@ export default function CollectLineScreen({route,navigation}:collectLineScreenPr
} catch (error) { } catch (error) {
console.log(error); console.log(error);
} }
} };
const renderItem = ({item,index}:any) => {
return (
<View key={index} style={{width:100,height:100,borderRadius:10,borderWidth:1,borderStyle:"dashed",flexDirection:'row'}}>
<Image style={{width: '100%',height: '100%',borderRadius:10}}
source={{uri: `data:image/jpeg;base64,${imgUrl[index]}`}}
/>
</View>
);
};
return ( return (
<View style={styles.mainContainer}> <View style={styles.mainContainer}>
<ScrollView style={styles.container}> <StatusBar backgroundColor="#34A6F8" barStyle={'light-content'} />
<View> <View key={"mainBackground"} style={{backgroundColor:'#34A6F8',width:'100%',height:'93%'}} />
<Text style={styles.label}>Image</Text> <View key={"background"} style={{backgroundColor:'#FFFFFF',width:'100%',height:'100%',position:'absolute',borderTopRightRadius:50,borderTopLeftRadius:35,paddingTop:25}}>
<View style={styles.borderImg}> <ScrollView style={styles.container}>
<Text style={{justifyContent: 'center', alignItems: 'center', alignSelf: 'center', color: 'black'}}>{imgUrl.length === 0 ? currentIndex :currentIndex+1}/{imgUrl.length}</Text>
<View style={{flexDirection: 'row'}}>
<PrevImg isIndex={currentIndex}/>
<Animated.FlatList
ref={ref}
data={imgUrl}
showsHorizontalScrollIndicator={false}
pagingEnabled
onScroll={e=>{
const x = e.nativeEvent.contentOffset.x;
setCurrentIndex(parseFloat((x/330).toFixed(0)));
}}
horizontal
renderItem={({item,index}) => {
return(
<Animated.Image resizeMode='center' style={{width: 350,
height: 500,
borderRadius: 6,}} source={{uri: `data:image/jpeg;base64,${imgUrl[index]}`}} />
)
}}
/>
<NextImg isIndex={currentIndex}/>
</View>
<View style={styles.btnCameraContainer}>
<TouchableOpacity style={styles.btnCamera} onPress={openCameraLib}>
<Image
source={require('../../assets/icon/camera.png')}
style={styles.buttonImageIconStyle}
/>
</TouchableOpacity>
<TouchableOpacity style={styles.btnCamera} onPress={openLib}>
<Image
source={require('../../assets/icon/gallery.png')}
style={styles.buttonImageIconStyle}
/>
</TouchableOpacity>
</View>
</View>
</View>
<View
style={{
marginTop: 15
}}
/>
<View style={{flexDirection:'column'}}> <View style={{flexDirection:'column'}}>
<MapView <MapView
style={{width:'80%',height:160,alignSelf:'center'}} style={{width:352,height:200,borderWidth:1,borderColor:'#A6A6A6',overflow:'hidden',alignSelf:'center',borderTopRightRadius:10,borderTopLeftRadius:10}}
mapStyle={styleURL} mapStyle={styleURL}
zoomEnabled={false} rotateEnabled={false}
scrollEnabled={false} zoomEnabled={false}
pitchEnabled={false}
scrollEnabled={false}
> >
<Camera <Camera
centerCoordinate={centerCoords} centerCoordinate={centerCoords}
zoomLevel={15} zoomLevel={15}
minZoomLevel={5} minZoomLevel={5}
maxZoomLevel={20} maxZoomLevel={20}
/>
<ShapeSource
id="line"
shape={{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "LineString",
"coordinates": route.params.coordinates
}
}
]
}}
>
<LineLayer
id="linelayer1"
style={{lineColor:'red',lineWidth:3}}
/> />
<ShapeSource </ShapeSource>
id="line"
shape={{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "LineString",
"coordinates": route.params.coordinates
}
}
]
}}
>
<LineLayer
id="linelayer1"
style={{lineColor:'red',lineWidth:3}}
/>
</ShapeSource>
{ {
route.params.coordinates.map((item:any,index:number)=>( route.params.coordinates.map((item:any,index:number)=>(
<PointAnnotation <PointAnnotation
children={<></>} children={<></>}
key={index} key={index}
id={String(index)} id={String(index)}
coordinate={item} coordinate={item}
draggable={false} draggable={false}
/> />
)) ))
} }
</MapView> </MapView>
<TouchableOpacity style={{alignSelf:'center',paddingTop:10}} onPress={()=>navigation.navigate('PDAM Map Collect', { screen: 'PDAM Map Collect'})}> {/* </Pressable> */}
<View style={{backgroundColor:'#217dd3',flexDirection:'row',width:150,height:30,borderRadius:20,justifyContent:'center'}}> <TouchableOpacity style={{alignSelf:'center',backgroundColor:'#F9F9F9',width:352,height:50,borderBottomLeftRadius:10,borderBottomRightRadius:10,justifyContent:'center',borderWidth:1,borderColor:'#A6A6A6'}} onPress={()=>navigation.navigate('PDAM Map Collect', { screen: 'PDAM Map Collect'})}>
<Text style={{alignSelf:'center',fontWeight:'bold',fontSize:16,color:'white'}}>View</Text> <Text style={{alignSelf:'center',fontWeight:'semibold',fontSize:16,color:'#434343'}}>Change Location</Text>
</View> </TouchableOpacity>
</TouchableOpacity>
</View> </View>
<View <View
style={{ style={{
marginTop: 15 marginTop: 15
}} }}
/> />
<View> <View style={{alignSelf:'center'}}>
<Text style={styles.label}>Pipe Name<Text style={{color:'red',fontWeight:'bold'}}>*</Text></Text> {/* <Text style={styles.label}>Name<Text style={{color:'red',fontWeight:'bold'}}>*</Text></Text> */}
<TextInput <Text style={styles.label}>Pipe Name</Text>
style={styles.input} <TextInput
onChangeText={(text)=>{ style={styles.input}
setPipeName(text) onChangeText={(text) => {
}} setPipeName(text)
onChange={()=> { }}
setPipeNameError(false) onChange={()=> {
}} setPipeNameError(false)
/> }}
{pipeNameError ? <Text style={styles.errorInput}>Name is Required!</Text>:null} />
{pipeNameError ? <Text style={styles.errorInput}>Pipe Name is Required!</Text>:null}
</View> </View>
<View <View
style={{ style={{
marginTop: 15 marginTop: 15
}} }}
/> />
<View> <View style={{alignSelf:'center'}}>
<Text style={styles.label}>Pipe Type <Text style={{color:'red',fontWeight:'bold'}}>*</Text></Text> {/* <Text style={styles.label}>PJU Type <Text style={{color:'red',fontWeight:'bold'}}>*</Text></Text> */}
<SelectList <Text style={styles.label}>PJU Type</Text>
search={false} <SelectList
placeholder="Select Pipe Type" search={false}
boxStyles={{borderRadius:50,borderWidth:2}} placeholder="Select Pipe Type"
inputStyles={{color:'black'}} boxStyles={{borderRadius:10,borderWidth:1,borderColor:'#A6A6A6',width:352,height:45}}
dropdownTextStyles={{color:'black'}} inputStyles={{color:'#6B5E5E'}}
data={Pipe_Type} dropdownTextStyles={{color:'#6B5E5E'}}
setSelected={setselectedPipeType} data={Pipe_Type}
onSelect={()=> ( setSelected={setselectedPipeType}
setPipeTypeError(false) onSelect={()=> (
)} [setPipeTypeError(false)]
/> )}
{pipeTyeError ? <Text style={styles.errorInput}>Pipe Type is Required!</Text>:null} />
{pipeTyeError ? <Text style={styles.errorInput}>Pipe Type is Required!</Text>:null}
</View> </View>
<View <View
style={{ style={{
marginTop: 15 marginTop: 15
}} }}
/> />
<View> <View style={{alignSelf:'center',width:352,height:45}}>
<Text style={styles.label}>Status <Text style={{color:'red',fontWeight:'bold'}}>*</Text></Text> {/* <Text style={styles.label}>Status<Text style={{color:'red',fontWeight:'bold'}}>*</Text></Text> */}
<View style={{flexDirection:'row',alignItems:'center'}}> <Text style={styles.label}>Status</Text>
<RadioButton <View style={{flexDirection:'row',alignItems:'center'}}>
value="Baik" <RadioButton
status={ checkedStatus === 'Baik' ? 'checked' : 'unchecked' } color='#434343'
onPress={()=>{ value="Baik"
setCheckedStatus('Baik'); status={ checkedStatus === 'Baik' ? 'checked' : 'unchecked' }
setPipeStatusError(false); onPress={() => {setCheckedStatus('Baik'); setPipeStatusError(false)}}
}} />
/> <Text style={{color:"#434343",fontWeight:'semibold',fontSize:16}}>Baik</Text>
<Text style={{color:'black'}}>Baik</Text> </View>
</View> <View style={{flexDirection:'row',alignItems:'center'}}>
<View style={{flexDirection:'row',alignItems:'center'}}> <RadioButton
<RadioButton color='#434343'
value="Rusak" value="Rusak"
status={ checkedStatus === 'Rusak' ? 'checked' : 'unchecked' } status={ checkedStatus === 'Rusak' ? 'checked' : 'unchecked' }
onPress={()=>{ onPress={() => {setCheckedStatus('Rusak'); setPipeStatusError(false); }}
setCheckedStatus('Rusak'); />
setPipeStatusError(false); <Text style={{color:"#434343",fontWeight:'semibold',fontSize:16}}>Rusak</Text>
}} </View>
/> {pipeStatusError ? <Text style={styles.errorInput}>Status is Required!</Text>:null}
<Text style={{color:'black'}}>Rusak</Text>
</View>
</View> </View>
{pipeStatusError ? <Text style={styles.errorInput}>Status is Required!</Text>:null}
<View <View
style={{ style={{
marginTop: 15 marginTop: 60
}} }}
/> />
<View> <View style={{alignSelf:'center'}}>
<Text style={styles.label}>Information <Text style={{color:'red',fontWeight:'bold'}}>*</Text></Text> <Text style={styles.label}>Information</Text>
<TextInput style={{borderWidth:1,borderRadius:20,padding: 10,color:'black',textAlignVertical:'top'}} <TextInput style={{borderWidth:1,borderRadius:20,padding: 10,color:'#6B5E5E',borderColor:'#A6A6A6',textAlignVertical:'top',width:352,height:135}}
multiline multiline
numberOfLines={5} numberOfLines={5}
maxLength={255} maxLength={255}
onChangeText={(text)=>{ onChangeText={(text) => {
setInformation(text) setInformation(text)
}} }}
onChange={()=> { onChange={()=> {
setPipeInfoError(false) setPipeInfoError(false)
}} }}
/> />
{pipeInfoError ? <Text style={styles.errorInput}>Information is Required!</Text>:null} {pipeInfoError ? <Text style={styles.errorInput}>Information is Required!</Text>:null}
</View> </View>
<View <View
style={{ style={{
marginTop: 15 marginTop: 15
}}
/>
<View style={{alignSelf:'center'}}>
<Text style={styles.label}>Installation Date</Text>
<TextInput
style={styles.input}
onPress={() => setOpen(true)}
value={String(momentDate)}
/>
<DatePicker
locale='en'
theme='light'
mode='date'
modal
open={open}
date={install_date}
onConfirm={(survey_date) => {
setOpen(false)
setInstallDate(survey_date)
}}
onCancel={() => {
setOpen(false)
}} }}
/>
</View>
<View
style={{
marginTop: 15
}}
/> />
<View> <View style={{alignSelf:'center',width:352}}>
<Text style={styles.label}>Installation Date</Text> <Text style={styles.label}>Attachment</Text>
<TextInput <Text style={{fontStyle:'italic',color:'#434343',fontSize:14}}>Lampirkan foto / gambar</Text>
style={styles.input} {
onPress={() => setOpen(true)} imgUrl.length === 0 ?
value={String(momentDate)} <Pressable onPress={()=>setModalAttachment(true)}>
/> <View style={{width:352,height:70,borderRadius:10,borderStyle:'dashed',borderWidth:2,borderCurve:'continuous',borderColor:'#434343',alignItems:'center',justifyContent:'center',flexDirection:'row',columnGap:5}}>
<DatePicker <Image
locale='en' source={require('../../assets/icon/camorlib.png')}
theme='dark' />
mode="date" <Text style={{fontStyle:'italic',color:'#434343'}}>Klik untuk menambahkan foto / gambar</Text>
modal </View>
open={open} </Pressable>
date={install_date} :
onConfirm={(survey_date) => { <FlatList
setOpen(false) horizontal={false}
setInstallDate(survey_date) showsHorizontalScrollIndicator={false}
}} scrollEnabled={false}
onCancel={() => { ListFooterComponent={()=>
setOpen(false) <Pressable onPress={()=>setModalAttachment(true)}>
}} <View style={{width:100,height:100,borderRadius:10,borderWidth:1,borderStyle:"dashed",flexDirection:'row',alignItems:'center',justifyContent:'center'}}>
<Image
source={require('../../assets/icon/camorlib.png')}
/>
</View>
</Pressable>
}
contentContainerStyle={{flexDirection:'row',flexWrap:'wrap',columnGap:25,rowGap:10}}
data={imgUrl}
renderItem={({item,index})=>renderItem({item,index})}
/> />
}
</View> </View>
<View <View
style={{ style={{
marginTop: 15 marginTop: 30
}} }}
/> />
</ScrollView> </ScrollView>
<Button title='Send' onPress={showDialog} /> <Button title='Send' onPress={showDialog} />
<AwesomeAlert </View>
<AwesomeAlert
show={alertOnline} show={alertOnline}
showProgress={false} showProgress={false}
title="Collecting Data" title="Collecting Data"
@ -544,6 +551,29 @@ export default function CollectLineScreen({route,navigation}:collectLineScreenPr
titleStyle={{fontSize:20}} titleStyle={{fontSize:20}}
messageStyle={{fontSize:16}} messageStyle={{fontSize:16}}
/> />
<Modal isVisible={ModalAttachment} animationIn={'fadeInUp'} animationOut={'fadeOutDown'} backdropOpacity={0} onBackdropPress={()=>setModalAttachment(false)} style={{top:'18%',alignSelf:'center'}}>
<View key={"modal container"} style={{width:330,height:220,backgroundColor:'#F9F9F9',borderRadius:25,borderWidth:1,borderColor:'#A6A6A6'}}>
<View style={{flexDirection:'row',alignItems:'center',justifyContent:'space-between',paddingLeft:30,paddingTop:20,paddingRight:10}}>
<Text style={{fontSize:20,fontWeight:'semibold',color: '#434343',}}>
Select Mode
</Text>
<Pressable onPress={()=>setModalAttachment(false)} style={{alignSelf:'flex-end',padding:10}}>
<Image style={{tintColor:'#434343'}}
source={require('../../assets/icon/x.png')}
/>
</Pressable>
</View>
<View style={{padding:30}}>
<TouchableOpacity onPress={()=>{openCameraLib(),setModalAttachment(false)}} style={{height:50,backgroundColor:'#FFFFFF',alignItems:'center',justifyContent:'center',borderTopLeftRadius:10,borderTopRightRadius:10,borderWidth:1,borderColor:'#A6A6A6'}}>
<Text style={{fontSize:20,fontWeight:'light',color:'#434343'}}>Take photo</Text>
</TouchableOpacity>
<TouchableOpacity onPress={()=>{openLib(),setModalAttachment(false)}} style={{height:50,backgroundColor:'#FFFFFF',alignItems:'center',justifyContent:'center',borderBottomLeftRadius:10,borderBottomRightRadius:10,borderWidth:1,borderColor:'#A6A6A6'}}>
<Text style={{fontSize:20,fontWeight:'light',color:'#434343'}}>Choose photo</Text>
</TouchableOpacity>
</View>
</View>
</Modal>
</View> </View>
) )
}; };
@ -569,23 +599,25 @@ const styles = StyleSheet.create({
color: 'black' color: 'black'
}, },
input: { input: {
height: 40, width:352,
height: 45,
borderWidth: 1, borderWidth: 1,
padding: 10, padding: 10,
borderRadius: 50, borderRadius: 10,
color: 'black' color: '#6B5E5E',
borderColor:'#A6A6A6'
}, },
container: { container: {
flex: 1,
backgroundColor: '#ecf0f1',
padding: 10, padding: 10,
flexGrow: 1
}, },
mainContainer: { mainContainer: {
flex: 1, flex: 1,
}, },
label: { label: {
fontSize: 21, fontSize: 16,
color: 'black', fontWeight:'semibold',
color: '#434343',
// marginBottom: 20 // marginBottom: 20
}, },
title: { title: {

458
src/component/collectPolygonscreen.tsx
Unescape View File

@ -1,5 +1,5 @@
import { useEffect, useRef, useState } from 'react'; 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, StatusBar, Pressable, FlatList} from 'react-native';
import MapLibreGL 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 { MapView,ShapeSource,Camera,UserLocation,PointAnnotation,FillLayer,LineLayer,VectorSource } from "@maplibre/maplibre-react-native";
@ -52,7 +52,7 @@ export default function CollectPolygonScreen({route,navigation}:collectPolygonSc
const [files, setFiles] = useState([]); const [files, setFiles] = useState([]);
const [fileDocument, setFileDocument] = useState([]); const [fileDocument, setFileDocument] = useState([]);
const [companyName, setCompanyName] = useState(''); const [companyName, setCompanyName] = useState('');
const [checkedStatus, setCheckedStatus] = useState(''); const [checkedStatus, setCheckedStatus] = useState('Under Review');
const [approvedBy,setApprovedBy] = useState(''); const [approvedBy,setApprovedBy] = useState('');
const [location, setLocation] = useState(''); const [location, setLocation] = useState('');
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
@ -282,250 +282,260 @@ export default function CollectPolygonScreen({route,navigation}:collectPolygonSc
} catch (error) { } catch (error) {
console.error(error) console.error(error)
} }
} };
const renderItem = ({item,index}:any) => {
return (
<Pressable onPress={uploadFileOnHandler}>
<View style={{width:352,height:70,borderRadius:10,borderStyle:'dashed',borderWidth:2,borderCurve:'continuous',borderColor:'#434343',alignItems:'center',justifyContent:'center',flexDirection:'row',columnGap:5}}>
<Text style={{fontSize:20,color:'blue',fontWeight:'bold'}}>{item.name}</Text>
</View>
</Pressable>
);
};
return ( return (
<View style={styles.mainContainer}> <View style={styles.mainContainer}>
<ScrollView style={styles.container}> <StatusBar backgroundColor="#34A6F8" barStyle={'light-content'} />
<View> <View key={"mainBackground"} style={{backgroundColor:'#34A6F8',width:'100%',height:'93%'}} />
<Text style={styles.label}>Document</Text> <View key={"background"} style={{backgroundColor:'#FFFFFF',width:'100%',height:'100%',position:'absolute',borderTopRightRadius:50,borderTopLeftRadius:35,paddingTop:25}}>
<View style={styles.borderImg}> <ScrollView
<View style={{flexDirection: 'column',padding:20}}> horizontal={false}
{fileDocument.map((data, index) => showsHorizontalScrollIndicator={false}
<View key={index} style={{flexDirection:'row'}}> nestedScrollEnabled={true}
<TextInput style={styles.container}>
style={{
width: '90%',
height: 40,
borderWidth: 1,
padding: 10,
borderRadius: 50,
color: 'black'
}}
value={data.name}
/>
<TouchableOpacity style={{alignSelf:'flex-end'}} onPress={() => {deleteByIndex(index)}}>
<View style={{flexDirection:'row',alignItems:'center',justifyContent:'center',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>
<TouchableOpacity style={{
marginTop:20,
alignItems: 'center',
justifyContent: 'center',
alignSelf: 'center',
width: 100,
height: 40,
bottom:20,
borderRadius: 6,
backgroundColor: '#80CBD3'
}} onPress={uploadFileOnHandler}>
<Image
source={require('../../assets/icon/folder.png')}
style={styles.buttonImageIconStyle}
/>
</TouchableOpacity>
</View>
</View>
<View
style={{
marginTop: 15
}}
/>
<View style={{flexDirection:'column'}}> <View style={{flexDirection:'column'}}>
<MapView <MapView
style={{width:'80%',height:160,alignSelf:'center'}} style={{width:352,height:200,borderWidth:1,borderColor:'#A6A6A6',overflow:'hidden',alignSelf:'center',borderTopRightRadius:10,borderTopLeftRadius:10}}
mapStyle={styleURL} mapStyle={styleURL}
zoomEnabled={false} rotateEnabled={false}
scrollEnabled={false} zoomEnabled={false}
pitchEnabled={false}
scrollEnabled={false}
> >
<Camera <Camera
centerCoordinate={centerCoords} centerCoordinate={centerCoords}
zoomLevel={16} zoomLevel={16}
minZoomLevel={5} minZoomLevel={5}
maxZoomLevel={20} maxZoomLevel={20}
/>
<ShapeSource
id="polygon"
shape={{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
route.params.coordinates
]
}
}
]
}}
>
<LineLayer
id="linelayer1"
style={{lineColor:'red',lineWidth:3}}
/> />
<FillLayer <ShapeSource
id="some-fill-feature" id="polygon"
style={{ shape={{
fillColor: ['interpolate', ['linear'], ['zoom'], 0, '#eeddbb', 2, '#0daa00', 3, '#bbbbee'], "type": "FeatureCollection",
fillOpacity:0.5 "features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
route.params.coordinates
]
}
}
]
}} }}
/> >
</ShapeSource> <LineLayer
{ id="linelayer1"
route.params.coordinates.map((item:any,index:number)=>( style={{lineColor:'red',lineWidth:3}}
<PointAnnotation />
key={index} <FillLayer
id={String(index)} id="some-fill-feature"
coordinate={item} style={{
draggable={false} fillColor: ['interpolate', ['linear'], ['zoom'], 0, '#eeddbb', 2, '#0daa00', 3, '#bbbbee'],
> fillOpacity:0.5
<View style={{ height: 75, width: 75 }}> }}
<View style={{width:15,height:15,backgroundColor:'red',borderColor:'black',borderRadius:50}} /> />
</View> </ShapeSource>
</PointAnnotation> {
)) route.params.coordinates.map((item:any,index:number)=>(
} <PointAnnotation
key={index}
id={String(index)}
coordinate={item}
draggable={false}
>
<View style={{ height: 75, width: 75 }}>
<View style={{width:15,height:15,backgroundColor:'red',borderColor:'black',borderRadius:50}} />
</View>
</PointAnnotation>
))
}
</MapView> </MapView>
<TouchableOpacity style={{alignSelf:'center',paddingTop:10}} onPress={()=>navigation.navigate('Permit Map', { screen: 'Permit Map'})}> {/* </Pressable> */}
<View style={{backgroundColor:'#217dd3',flexDirection:'row',width:150,height:30,borderRadius:20,justifyContent:'center'}}> <TouchableOpacity style={{alignSelf:'center',backgroundColor:'#F9F9F9',width:352,height:50,borderBottomLeftRadius:10,borderBottomRightRadius:10,justifyContent:'center',borderWidth:1,borderColor:'#A6A6A6'}} onPress={()=>navigation.navigate('Permit Map', { screen: 'Permit Map'})}>
<Text style={{alignSelf:'center',fontWeight:'bold',fontSize:16,color:'white'}}>View</Text> <Text style={{alignSelf:'center',fontWeight:'semibold',fontSize:16,color:'#434343'}}>Change Location</Text>
</View> </TouchableOpacity>
</TouchableOpacity>
</View> </View>
<View <View
style={{ style={{
marginTop: 15 marginTop: 15
}} }}
/> />
<View> <View style={{alignSelf:'center'}}>
<Text style={styles.label}>Company Name<Text style={{color:'red',fontWeight:'bold'}}>*</Text></Text> {/* <Text style={styles.label}>Name<Text style={{color:'red',fontWeight:'bold'}}>*</Text></Text> */}
<Text style={styles.label}>Company Name</Text>
<TextInput <TextInput
style={styles.input} style={styles.input}
onChangeText={(text)=>{ onChangeText={(text) => {
setCompanyName(text) setCompanyName(text)
}} }}
onChange={()=> { onChange={()=> {
setCompanyNameError(false) setCompanyNameError(false)
}} }}
/> />
{companyNameError ? <Text style={styles.errorInput}>Company Name is Required!</Text>:null} {companyNameError ? <Text style={styles.errorInput}>Company Name is Required!</Text>:null}
</View> </View>
<View <View
style={{ style={{
marginTop: 15 marginTop: 15
}} }}
/> />
<View> <View style={{alignSelf:'center',width:352,height:45}}>
<Text style={styles.label}>Permit Status <Text style={{color:'red',fontWeight:'bold'}}>*</Text></Text> {/* <Text style={styles.label}>Status<Text style={{color:'red',fontWeight:'bold'}}>*</Text></Text> */}
<Text style={styles.label}>Permit Status</Text>
<View style={{flexDirection:'row',alignItems:'center'}}> <View style={{flexDirection:'row',alignItems:'center'}}>
<RadioButton <RadioButton
value="Approved" color='#434343'
status={ checkedStatus === 'Approved' ? 'checked' : 'unchecked' } value="Approved"
onPress={()=>{ status={ checkedStatus === 'Approved' ? 'checked' : 'unchecked' }
setCheckedStatus('Approved'); onPress={() => {setCheckedStatus('Approved'); setPermitStatusError(false)}}
setPermitStatusError(false); />
}} <Text style={{color:"#434343",fontWeight:'semibold',fontSize:16}}>Approved</Text>
/>
<Text style={{color:'black'}}>Approved</Text>
</View> </View>
<View style={{flexDirection:'row',alignItems:'center'}}> <View style={{flexDirection:'row',alignItems:'center'}}>
<RadioButton <RadioButton
value="Under Review" color='#434343'
status={ checkedStatus === 'Under Review' ? 'checked' : 'unchecked' } value="Under Review"
onPress={()=>{ status={ checkedStatus === 'Under Review' ? 'checked' : 'unchecked' }
setCheckedStatus('Under Review'); onPress={() => {setCheckedStatus('Under Review'); setPermitStatusError(false); }}
setPermitStatusError(false); />
}} <Text style={{color:"#434343",fontWeight:'semibold',fontSize:16}}>Under Review</Text>
/>
<Text style={{color:'black'}}>Under Review</Text>
</View>
</View>
{permitStatusError ? <Text style={styles.errorInput}>Status is Required!</Text>:null}
{
checkedStatus === 'Approved' ?
<Animated.View>
<View
style={{
marginTop: 15
}} />
<View>
<Text style={styles.label}>Approved By<Text style={{ color: 'red', fontWeight: 'bold' }}>*</Text></Text>
<TextInput
style={styles.input}
onChangeText={(text) => {
setApprovedBy(text);
} }
/>
</View> </View>
</Animated.View> {permitStatusError ? <Text style={styles.errorInput}>Status is Required!</Text>:null}
: </View>
null <View
}
<View
style={{ style={{
marginTop: 15 marginTop: 60
}} }}
/> />
<View> {
<Text style={styles.label}>Location Detail <Text style={{color:'red',fontWeight:'bold'}}>*</Text></Text> checkedStatus === 'Approved' ?
<TextInput style={{borderWidth:1,borderRadius:20,padding: 10,color:'black',textAlignVertical:'top'}} <Animated.View>
multiline <View style={{alignSelf:'center'}}>
numberOfLines={5} <Text style={styles.label}>Approved By<Text style={{ color: 'red', fontWeight: 'bold' }}>*</Text></Text>
maxLength={255} <TextInput
onChangeText={(text)=>{ style={styles.input}
setLocation(text) onChangeText={(text) => {
}} setApprovedBy(text);
onChange={()=> { } }
setLocationError(false) />
}} </View>
<View
style={{
marginTop: 15
}} />
</Animated.View>
:
null
}
<View
style={{
marginTop: 15
}}
/>
<View style={{alignSelf:'center'}}>
<Text style={styles.label}>Location Detail</Text>
<TextInput style={{borderWidth:1,borderRadius:20,padding: 10,color:'#6B5E5E',borderColor:'#A6A6A6',textAlignVertical:'top',width:352,height:135}}
multiline
numberOfLines={5}
maxLength={255}
onChangeText={(text) => {
setLocation(text)
}}
onChange={()=> {
setLocationError(false)
}}
/> />
{locationError ? <Text style={styles.errorInput}>Location is Required!</Text>:null} {locationError ? <Text style={styles.errorInput}>Information is Required!</Text>:null}
</View> </View>
<View <View
style={{ style={{
marginTop: 15 marginTop: 15
}} }}
/> />
<View> <View style={{alignSelf:'center'}}>
<Text style={styles.label}>Survey Date</Text> <Text style={styles.label}>Survey Date</Text>
<TextInput <TextInput
style={styles.input} style={styles.input}
onPress={() => setOpen(true)} onPress={() => setOpen(true)}
value={String(momentDate)} value={String(momentDate)}
/> />
<DatePicker <DatePicker
locale='en' locale='en'
theme='dark' theme='light'
mode="date" mode='date'
modal modal
open={open} open={open}
date={install_date} date={install_date}
onConfirm={(survey_date) => { onConfirm={(survey_date) => {
setOpen(false) setOpen(false)
setInstallDate(survey_date) setInstallDate(survey_date)
}} }}
onCancel={() => { onCancel={() => {
setOpen(false) setOpen(false)
}} }}
/> />
</View> </View>
<View <View
style={{ style={{
marginTop: 15 marginTop: 15
}} }}
/> />
</ScrollView> <View style={{alignSelf:'center',width:352}}>
<Button title='Send' onPress={showDialog} /> <Text style={styles.label}>Attachment</Text>
<Text style={{fontStyle:'italic',color:'#434343',fontSize:14}}>Lampirkan dokumen</Text>
{
fileDocument.length === 0 ?
<Pressable onPress={uploadFileOnHandler}>
<View style={{width:352,height:70,borderRadius:10,borderStyle:'dashed',borderWidth:2,borderCurve:'continuous',borderColor:'#434343',alignItems:'center',justifyContent:'center',flexDirection:'row',columnGap:5}}>
<Image
source={require('../../assets/icon/folder.png')}
/>
<Text style={{fontStyle:'italic',color:'#434343'}}>Klik untuk menambahkan dokumen</Text>
</View>
</Pressable>
:
<FlatList
horizontal={true}
showsHorizontalScrollIndicator={false}
scrollEnabled={false}
ListFooterComponent={()=>
<Pressable onPress={uploadFileOnHandler}>
<View style={{width:352,height:70,borderRadius:10,borderStyle:'dashed',borderWidth:2,borderCurve:'continuous',borderColor:'#434343',alignItems:'center',justifyContent:'center'}}>
<Image
source={require('../../assets/icon/folder.png')}
/>
<Text style={{fontStyle:'italic',color:'#434343'}}>Klik untuk menambahkan dokumen</Text>
</View>
</Pressable>
}
contentContainerStyle={{flexDirection:'column',columnGap:25,rowGap:10}}
data={fileDocument}
renderItem={({item,index})=>renderItem({item,index})}
/>
}
</View>
<View
style={{
marginTop: 30
}}
/>
</ScrollView>
<Button title='Send' onPress={showDialog} />
</View>
<AwesomeAlert <AwesomeAlert
show={alertOnline} show={alertOnline}
showProgress={false} showProgress={false}
@ -599,23 +609,25 @@ const styles = StyleSheet.create({
color: 'black' color: 'black'
}, },
input: { input: {
height: 40, width:352,
height: 45,
borderWidth: 1, borderWidth: 1,
padding: 10, padding: 10,
borderRadius: 50, borderRadius: 10,
color: 'black' color: '#6B5E5E',
borderColor:'#A6A6A6'
}, },
container: { container: {
flex: 1,
backgroundColor: '#ecf0f1',
padding: 10, padding: 10,
flexGrow: 1
}, },
mainContainer: { mainContainer: {
flex: 1, flex: 1,
}, },
label: { label: {
fontSize: 21, fontSize: 16,
color: 'black', fontWeight:'semibold',
color: '#434343',
// marginBottom: 20 // marginBottom: 20
}, },
title: { title: {

173
src/component/collectscreen.tsx
Unescape View File

@ -31,6 +31,7 @@ import Moment from 'moment';
import { RadioButton } from 'react-native-paper'; import { RadioButton } from 'react-native-paper';
import AwesomeAlert from 'react-native-awesome-alerts'; import AwesomeAlert from 'react-native-awesome-alerts';
import RNFetchBlob from 'rn-fetch-blob'; import RNFetchBlob from 'rn-fetch-blob';
import Modal from "react-native-modal";
import { PJU_API_URL } from "../../urlConfig"; import { PJU_API_URL } from "../../urlConfig";
@ -150,7 +151,8 @@ function CollectScreen({route,navigation}: collectScreenProps) {
const [PJUTypeError, setPJUTypeError] = useState(false); const [PJUTypeError, setPJUTypeError] = useState(false);
const [PJUStatusError, setPJUStatusError] = useState(false); const [PJUStatusError, setPJUStatusError] = useState(false);
const [PJUInfoError, setPJUInfoError] = useState(false); const [PJUInfoError, setPJUInfoError] = useState(false);
const [attachmentSuccess, setAttachmentSuccess] = useState(0) const [attachmentSuccess, setAttachmentSuccess] = useState(0);
const [ModalAttachment, setModalAttachment] = useState(false);
useEffect(()=> { useEffect(()=> {
navigation.addListener('beforeRemove', (e:any)=> { navigation.addListener('beforeRemove', (e:any)=> {
@ -363,21 +365,6 @@ function CollectScreen({route,navigation}: collectScreenProps) {
const handleCancelAlertOffline = () => { const handleCancelAlertOffline = () => {
setAlertOffline(false); setAlertOffline(false);
}; };
const DATA = [
{
id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
title: 'First Item',
},
{
id: 'bd7acbea-c1b1-46c2-aed5-3ad53abbsss28ba',
title: 'First Item',
},
{
id: 'bd7acbea-c1b1-46c2-aed5-3ad53abbssssss28ba',
title: 'First Item',
}
];
const [selectedId, setSelectedId] = useState(); const [selectedId, setSelectedId] = useState();
const [imagenotNull,setImagenotNull] = useState(false); const [imagenotNull,setImagenotNull] = useState(false);
const Item = ({item, onPress, backgroundColor, textColor}:any) => ( const Item = ({item, onPress, backgroundColor, textColor}:any) => (
@ -385,9 +372,13 @@ function CollectScreen({route,navigation}: collectScreenProps) {
<Text style={[styles.title, {color: textColor}]}>{item.title}</Text> <Text style={[styles.title, {color: textColor}]}>{item.title}</Text>
</TouchableOpacity> </TouchableOpacity>
); );
const renderItem = ({item}:any) => { const renderItem = ({item,index}:any) => {
return ( return (
<View key={item} style={{width:100,height:100,borderRadius:10,borderWidth:1,borderStyle:"dashed",flexDirection:'row'}}></View> <View key={index} style={{width:100,height:100,borderRadius:10,borderWidth:1,borderStyle:"dashed",flexDirection:'row'}}>
<Image style={{width: '100%',height: '100%',borderRadius:10}}
source={{uri: `data:image/jpeg;base64,${imgUrl[index]}`}}
/>
</View>
); );
}; };
return( return(
@ -395,10 +386,14 @@ function CollectScreen({route,navigation}: collectScreenProps) {
<StatusBar backgroundColor="#34A6F8" barStyle={'light-content'} /> <StatusBar backgroundColor="#34A6F8" barStyle={'light-content'} />
<View key={"mainBackground"} style={{backgroundColor:'#34A6F8',width:'100%',height:'93%'}} /> <View key={"mainBackground"} style={{backgroundColor:'#34A6F8',width:'100%',height:'93%'}} />
<View key={"background"} style={{backgroundColor:'#FFFFFF',width:'100%',height:'100%',position:'absolute',borderTopRightRadius:50,borderTopLeftRadius:35,paddingTop:25}}> <View key={"background"} style={{backgroundColor:'#FFFFFF',width:'100%',height:'100%',position:'absolute',borderTopRightRadius:50,borderTopLeftRadius:35,paddingTop:25}}>
<ScrollView style={styles.container}> <ScrollView
horizontal={false}
showsHorizontalScrollIndicator={false}
nestedScrollEnabled={true}
style={styles.container}>
<View style={{flexDirection:'column'}}> <View style={{flexDirection:'column'}}>
<Pressable onPress={()=>navigation.navigate('PJU Map Collect', { screen: 'PJU Map Collect'})} style={{alignItems:'center'}}> {/* <Pressable onPress={()=>navigation.navigate('PJU Map Collect', { screen: 'PJU Map Collect'})} style={{alignItems:'center'}}> */}
<View style={{height:40,width:352,borderTopRightRadius:10,borderTopLeftRadius:10,borderWidth:1,borderColor:'#A6A6A6',backgroundColor:'#F9F9F9',justifyContent:'flex-start',flexDirection:'row',alignItems:'center',columnGap:5}}> <View style={{height:40,width:352,borderTopRightRadius:10,borderTopLeftRadius:10,borderWidth:1,borderColor:'#A6A6A6',backgroundColor:'#F9F9F9',justifyContent:'flex-start',flexDirection:'row',alignItems:'center',columnGap:5,alignSelf:'center'}}>
<Image <Image
source={require('../../assets/icon/findmyloc.png')} source={require('../../assets/icon/findmyloc.png')}
/> />
@ -406,32 +401,29 @@ function CollectScreen({route,navigation}: collectScreenProps) {
<Text style={{fontSize:14,fontWeight:'semibold',color:'#434343'}}>{fixCoordinate.long}</Text> <Text style={{fontSize:14,fontWeight:'semibold',color:'#434343'}}>{fixCoordinate.long}</Text>
</View> </View>
<MapView <MapView
style={{width:352,height:200,borderWidth:1,borderColor:'#A6A6A6',borderBottomRightRadius:10,borderBottomLeftRadius:10,overflow:'hidden'}} style={{width:352,height:200,borderWidth:1,borderColor:'#A6A6A6',overflow:'hidden',alignSelf:'center'}}
mapStyle={styleURL} mapStyle={styleURL}
rotateEnabled={false} rotateEnabled={false}
zoomEnabled={false} zoomEnabled={false}
pitchEnabled={false} pitchEnabled={false}
scrollEnabled={false} scrollEnabled={false}
> >
<PointAnnotation <PointAnnotation
children={<></>} children={<></>}
id={"pjuCoordinate"} id={"pjuCoordinate"}
coordinate={[fixCoordinate.long, fixCoordinate.lat]} coordinate={[fixCoordinate.long, fixCoordinate.lat]}
/> />
<Camera <Camera
centerCoordinate={[fixCoordinate.long, fixCoordinate.lat]!} centerCoordinate={[fixCoordinate.long, fixCoordinate.lat]!}
zoomLevel={15} zoomLevel={15}
minZoomLevel={5} minZoomLevel={5}
maxZoomLevel={20} maxZoomLevel={20}
/> />
</MapView> </MapView>
</Pressable> {/* </Pressable> */}
{/* <TouchableOpacity style={{alignSelf:'center',paddingTop:10}} onPress={()=>navigation.navigate('PJU Map Collect', { screen: 'PJU Map Collect'})}> <TouchableOpacity style={{alignSelf:'center',backgroundColor:'#F9F9F9',width:352,height:50,borderBottomLeftRadius:10,borderBottomRightRadius:10,justifyContent:'center',borderWidth:1,borderColor:'#A6A6A6'}} onPress={()=>navigation.navigate('PJU Map Collect', { screen: 'PJU Map Collect'})}>
<View style={{backgroundColor:'#217dd3',flexDirection:'row',width:150,height:30,borderRadius:20,justifyContent:'center'}}> <Text style={{alignSelf:'center',fontWeight:'semibold',fontSize:16,color:'#434343'}}>Change Location</Text>
<Text style={{alignSelf:'center',fontWeight:'bold',fontSize:16,color:'white'}}>Change Location</Text> </TouchableOpacity>
</View>
</TouchableOpacity> */}
</View> </View>
<View <View
style={{ style={{
@ -507,38 +499,7 @@ function CollectScreen({route,navigation}: collectScreenProps) {
marginTop: 60 marginTop: 60
}} }}
/> />
<View style={{alignSelf:'center',width:352}}>
<Text style={styles.label}>Attachment</Text>
<Text style={{fontStyle:'italic',color:'#434343',fontSize:14}}>Lampirkan foto / gambar</Text>
{
!imagenotNull ?
<Pressable onPress={()=>setImagenotNull(true)}>
<View style={{width:352,height:70,borderRadius:10,borderStyle:'dashed',borderWidth:2,borderCurve:'continuous',borderColor:'#434343',alignItems:'center',justifyContent:'center',flexDirection:'row',columnGap:5}}>
<Image
source={require('../../assets/icon/camorlib.png')}
/>
<Text style={{fontStyle:'italic',color:'#434343'}}>Klik untuk menambahkan foto / gambar</Text>
</View>
</Pressable>
:
<FlatList
// pagingEnabled
contentContainerStyle={{flexDirection:'row',flexWrap: 'wrap',columnGap:25,rowGap:10}}
data={DATA}
renderItem={(item)=>renderItem(item.index)}
keyExtractor={item => item.id}
extraData={selectedId}
/>
}
</View>
<View
style={{
marginTop: 15
}}
/>
<View style={{alignSelf:'center'}}> <View style={{alignSelf:'center'}}>
{/* <Text style={styles.label}>Information <Text style={{color:'red',fontWeight:'bold'}}>*</Text></Text> */}
<Text style={styles.label}>Information</Text> <Text style={styles.label}>Information</Text>
<TextInput style={{borderWidth:1,borderRadius:20,padding: 10,color:'#6B5E5E',borderColor:'#A6A6A6',textAlignVertical:'top',width:352,height:135}} <TextInput style={{borderWidth:1,borderRadius:20,padding: 10,color:'#6B5E5E',borderColor:'#A6A6A6',textAlignVertical:'top',width:352,height:135}}
multiline multiline
@ -586,6 +547,39 @@ function CollectScreen({route,navigation}: collectScreenProps) {
marginTop: 15 marginTop: 15
}} }}
/> />
<View style={{alignSelf:'center',width:352}}>
<Text style={styles.label}>Attachment</Text>
<Text style={{fontStyle:'italic',color:'#434343',fontSize:14}}>Lampirkan foto / gambar</Text>
{
imgUrl.length === 0 ?
<Pressable onPress={()=>setModalAttachment(true)}>
<View style={{width:352,height:70,borderRadius:10,borderStyle:'dashed',borderWidth:2,borderCurve:'continuous',borderColor:'#434343',alignItems:'center',justifyContent:'center',flexDirection:'row',columnGap:5}}>
<Image
source={require('../../assets/icon/camorlib.png')}
/>
<Text style={{fontStyle:'italic',color:'#434343'}}>Klik untuk menambahkan foto / gambar</Text>
</View>
</Pressable>
:
<FlatList
horizontal={false}
showsHorizontalScrollIndicator={false}
scrollEnabled={false}
ListFooterComponent={()=>
<Pressable onPress={()=>setModalAttachment(true)}>
<View style={{width:100,height:100,borderRadius:10,borderWidth:1,borderStyle:"dashed",flexDirection:'row',alignItems:'center',justifyContent:'center'}}>
<Image
source={require('../../assets/icon/camorlib.png')}
/>
</View>
</Pressable>
}
contentContainerStyle={{flexDirection:'row',flexWrap:'wrap',columnGap:25,rowGap:10}}
data={imgUrl}
renderItem={({item,index})=>renderItem({item,index})}
/>
}
</View>
<View <View
style={{ style={{
marginTop: 30 marginTop: 30
@ -698,6 +692,30 @@ function CollectScreen({route,navigation}: collectScreenProps) {
titleStyle={{fontSize:20}} titleStyle={{fontSize:20}}
messageStyle={{fontSize:16}} messageStyle={{fontSize:16}}
/> />
<Modal isVisible={ModalAttachment} animationIn={'fadeInUp'} animationOut={'fadeOutDown'} backdropOpacity={0} onBackdropPress={()=>setModalAttachment(false)} style={{top:'18%',alignSelf:'center'}}>
<View key={"modal container"} style={{width:330,height:220,backgroundColor:'#F9F9F9',borderRadius:25,borderWidth:1,borderColor:'#A6A6A6'}}>
<View style={{flexDirection:'row',alignItems:'center',justifyContent:'space-between',paddingLeft:30,paddingTop:20,paddingRight:10}}>
<Text style={{fontSize:20,fontWeight:'semibold',color: '#434343',}}>
Select Mode
</Text>
<Pressable onPress={()=>setModalAttachment(false)} style={{alignSelf:'flex-end',padding:10}}>
<Image style={{tintColor:'#434343'}}
source={require('../../assets/icon/x.png')}
/>
</Pressable>
</View>
<View style={{padding:30}}>
<TouchableOpacity onPress={()=>{openCameraLib(),setModalAttachment(false)}} style={{height:50,backgroundColor:'#FFFFFF',alignItems:'center',justifyContent:'center',borderTopLeftRadius:10,borderTopRightRadius:10,borderWidth:1,borderColor:'#A6A6A6'}}>
<Text style={{fontSize:20,fontWeight:'light',color:'#434343'}}>Take photo</Text>
</TouchableOpacity>
<TouchableOpacity onPress={()=>{openLib(),setModalAttachment(false)}} style={{height:50,backgroundColor:'#FFFFFF',alignItems:'center',justifyContent:'center',borderBottomLeftRadius:10,borderBottomRightRadius:10,borderWidth:1,borderColor:'#A6A6A6'}}>
<Text style={{fontSize:20,fontWeight:'light',color:'#434343'}}>Choose photo</Text>
</TouchableOpacity>
</View>
</View>
</Modal>
</View> </View>
) )
} }
@ -735,6 +753,7 @@ const styles = StyleSheet.create({
// flex: 1, // flex: 1,
// backgroundColor: '#ecf0f1', // backgroundColor: '#ecf0f1',
padding: 10, padding: 10,
flexGrow: 1
}, },
mainContainer: { mainContainer: {
flex: 1, flex: 1,

2
src/component/mapCollectLineScreen.tsx
Unescape View File

@ -282,7 +282,7 @@ function MapCollectLineScreen({route,navigation}:MapCollectLineProps):React.JSX.
{ {
startPoint.length > 1 ? startPoint.length > 1 ?
<TouchableOpacity style={{margin:10}} onPress={()=> { <TouchableOpacity style={{margin:10}} onPress={()=> {
navigation.navigate('PDAM Collecting', { screen: 'PDAM Collecting',coordinates: coordinates}) navigation.navigate('Add Data PDAM', { screen: 'Add Data PDAM',coordinates: coordinates})
}}> }}>
<View style={{backgroundColor:'#43eb34',flexDirection:'row',width:60,height:60,borderRadius:100,justifyContent:'center'}}> <View style={{backgroundColor:'#43eb34',flexDirection:'row',width:60,height:60,borderRadius:100,justifyContent:'center'}}>
<Image <Image

10
src/component/mapCollectScreen.tsx
Unescape View File

@ -54,7 +54,7 @@ function MapCollectScreen({route,navigation}:MapCollectProps):React.JSX.Element{
},[]); },[]);
const SelectPosition = () => { const SelectPosition = () => {
navigation.navigate('PJU Collecting', { screen: 'PJU Collecting', fixCoordinate: FixCoor}) navigation.navigate('Add Data PJU', { screen: 'Add Data PJU', fixCoordinate: FixCoor})
}; };
const [zoom, setZoom] = useState(15); const [zoom, setZoom] = useState(15);
@ -194,13 +194,13 @@ function MapCollectScreen({route,navigation}:MapCollectProps):React.JSX.Element{
} }
</MapView> </MapView>
<TouchableOpacity onPress={()=>setmodalBasemap(true)} style={{position:'absolute',backgroundColor:'#FFFFFF',width:50,height:50,borderRadius:25,alignItems:'center',justifyContent:'center',top:'7%',left:'4%'}}> <TouchableOpacity onPress={()=>setmodalLayerList(true)} style={{position:'absolute',backgroundColor:'#FFFFFF',width:50,height:50,borderRadius:25,alignItems:'center',justifyContent:'center',top:'7%',left:'4%'}}>
<Image <Image
source={require('../../assets/icon/layerList.png')} source={require('../../assets/icon/layerList.png')}
// style={styles.buttonImageIconStyle} // style={styles.buttonImageIconStyle}
/> />
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity onPress={()=>setmodalLayerList(true)} style={{position:'absolute',backgroundColor:'#FFFFFF',width:50,height:50,borderRadius:25,alignItems:'center',justifyContent:'center',top:'15%',left:'4%'}}> <TouchableOpacity onPress={()=>setmodalBasemap(true)} style={{position:'absolute',backgroundColor:'#FFFFFF',width:50,height:50,borderRadius:25,alignItems:'center',justifyContent:'center',top:'15%',left:'4%'}}>
<Image <Image
source={require('../../assets/icon/mapOutline.png')} source={require('../../assets/icon/mapOutline.png')}
// style={styles.buttonImageIconStyle} // style={styles.buttonImageIconStyle}
@ -225,13 +225,13 @@ function MapCollectScreen({route,navigation}:MapCollectProps):React.JSX.Element{
{!delayRender ? {!delayRender ?
<TouchableOpacity style={{position:'absolute',alignSelf:'center',bottom:20}} onPress={SelectPosition}> <TouchableOpacity style={{position:'absolute',alignSelf:'center',bottom:20}} onPress={SelectPosition}>
<View style={{backgroundColor:'#0386D0',flexDirection:'row',width:350,height:50,borderRadius:10,justifyContent:'center'}}> <View style={{backgroundColor:'#0386D0',flexDirection:'row',width:350,height:50,borderRadius:10,justifyContent:'center'}}>
<Text style={{alignSelf:'center',fontWeight:'bold',fontSize:20,color:'white'}}>Select Position</Text> <Text style={{alignSelf:'center',fontWeight:'bold',fontSize:20,color:'white'}}>Select Location</Text>
</View> </View>
</TouchableOpacity> </TouchableOpacity>
: :
<TouchableOpacity disabled={true} style={{position:'absolute',alignSelf:'center',bottom:20}}> <TouchableOpacity disabled={true} style={{position:'absolute',alignSelf:'center',bottom:20}}>
<View style={{backgroundColor:'#0386D0',flexDirection:'row',width:350,height:50,borderRadius:10,justifyContent:'center',opacity:0.5}}> <View style={{backgroundColor:'#0386D0',flexDirection:'row',width:350,height:50,borderRadius:10,justifyContent:'center',opacity:0.5}}>
<Text style={{alignSelf:'center',fontWeight:'bold',fontSize:20,color:'white'}}>Waiting Get Position</Text> <Text style={{alignSelf:'center',fontWeight:'bold',fontSize:20,color:'white'}}>Waiting Get Location</Text>
</View> </View>
</TouchableOpacity> </TouchableOpacity>
} }

Write Preview
Loading…
Cancel
Save