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

formCollect

master
Irul24 1 year ago
parent
e0aba370a6
commit
e660c5572d
6 changed files with 280 additions and 198 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. BIN
      assets/icon/camorlib.png
  2. 0
      assets/icon/findmyloc.png
  3. 472
      src/component/collectscreen.tsx
  4. 2
      src/component/mapCollectLineScreen.tsx
  5. 2
      src/component/mapCollectPolygonScreen.tsx
  6. 2
      src/component/mapCollectScreen.tsx

BIN
assets/icon/camorlib.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 679 B

0
assets/icon/findmylock.png → assets/icon/findmyloc.png
Unescape View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 415 B

After

Width:  |  Height:  |  Size: 415 B

472
src/component/collectscreen.tsx
Unescape View File

@ -1,6 +1,6 @@
// global.Buffer = require('buffer').Buffer; // global.Buffer = require('buffer').Buffer;
import React, { useEffect, useRef, useState, useCallback, useMemo } from 'react'; import React, { useEffect, useRef, useState, useCallback, useMemo } from 'react';
import { Alert, Animated, Keyboard } from 'react-native'; import { Alert, Animated, Keyboard, Pressable } from 'react-native';
import { import {
TextInput, TextInput,
Button, Button,
@ -142,7 +142,7 @@ function CollectScreen({route,navigation}: collectScreenProps) {
const [pju_name, setPJUname] = useState(''); const [pju_name, setPJUname] = useState('');
const [selectedPJUType, setselectedPJUType] = useState(""); const [selectedPJUType, setselectedPJUType] = useState("");
const [pju_info, setPJUinfo] = useState(''); const [pju_info, setPJUinfo] = useState('');
const [checkedStatus, setCheckedStatus] = useState(''); const [checkedStatus, setCheckedStatus] = useState('Baik');
const [install_date, setInstallDate] = useState(new Date()); const [install_date, setInstallDate] = useState(new Date());
const momentDate = Moment(install_date).format('YYYY-MM-DD') const momentDate = Moment(install_date).format('YYYY-MM-DD')
const [attachmentImgError, setattachmentImgError] = useState(false); const [attachmentImgError, setattachmentImgError] = useState(false);
@ -363,209 +363,288 @@ 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 [imagenotNull,setImagenotNull] = useState(false);
const Item = ({item, onPress, backgroundColor, textColor}:any) => (
<TouchableOpacity onPress={onPress} style={[styles.item, {backgroundColor}]}>
<Text style={[styles.title, {color: textColor}]}>{item.title}</Text>
</TouchableOpacity>
);
const renderItem = ({item}:any) => {
return (
<View key={item} style={{width:100,height:100,borderRadius:10,borderWidth:1,borderStyle:"dashed",flexDirection:'row'}}></View>
);
};
return( return(
<View style={styles.mainContainer}> <View style={styles.mainContainer}>
<ScrollView style={styles.container}> <StatusBar backgroundColor="#34A6F8" barStyle={'light-content'} />
<Text style={styles.title}>Form Survey PJU</Text> <View key={"mainBackground"} style={{backgroundColor:'#34A6F8',width:'100%',height:'93%'}} />
<View> <View key={"background"} style={{backgroundColor:'#FFFFFF',width:'100%',height:'100%',position:'absolute',borderTopRightRadius:50,borderTopLeftRadius:35,paddingTop:25}}>
<Text style={styles.label}>Image</Text> <ScrollView style={styles.container}>
<View style={styles.borderImg}> <View style={{flexDirection:'column'}}>
<Text style={{justifyContent: 'center', alignItems: 'center', alignSelf: 'center', color: 'black'}}>{imgUrl.length === 0 ? currentIndex :currentIndex+1}/{imgUrl.length}</Text> <Pressable onPress={()=>navigation.navigate('PJU Map Collect', { screen: 'PJU Map Collect'})} style={{alignItems:'center'}}>
<View style={{flexDirection: 'row'}}> <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}}>
<PrevImg isIndex={currentIndex}/>
<Animated.FlatList
ref={ref}
style={{width:'80%'}}
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: 295,
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 <Image
source={require('../../assets/icon/camera.png')} source={require('../../assets/icon/findmyloc.png')}
style={styles.buttonImageIconStyle}
/> />
{/* <Text> <Text style={{fontSize:14,fontWeight:'semibold',color:'#434343'}}>{fixCoordinate.lat},</Text>
Open Camera <Text style={{fontSize:14,fontWeight:'semibold',color:'#434343'}}>{fixCoordinate.long}</Text>
</Text> */} </View>
</TouchableOpacity> <MapView
<TouchableOpacity style={styles.btnCamera} onPress={openLib}> style={{width:352,height:200,borderWidth:1,borderColor:'#A6A6A6',borderBottomRightRadius:10,borderBottomLeftRadius:10,overflow:'hidden'}}
<Image mapStyle={styleURL}
source={require('../../assets/icon/gallery.png')} rotateEnabled={false}
style={styles.buttonImageIconStyle} zoomEnabled={false}
/> pitchEnabled={false}
</TouchableOpacity> scrollEnabled={false}
</View> >
<PointAnnotation
children={<></>}
id={"pjuCoordinate"}
coordinate={[fixCoordinate.long, fixCoordinate.lat]}
/>
<Camera
centerCoordinate={[fixCoordinate.long, fixCoordinate.lat]!}
zoomLevel={15}
minZoomLevel={5}
maxZoomLevel={20}
/>
</MapView>
</Pressable>
{/* <TouchableOpacity style={{alignSelf:'center',paddingTop:10}} 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:'bold',fontSize:16,color:'white'}}>Change Location</Text>
</View>
</TouchableOpacity> */}
</View> </View>
</View> <View
<View style={{
style={{ marginTop: 15
marginTop: 15
}}
/>
<View style={{flexDirection:'column'}}>
<MapView
style={{width:'80%',height:160,alignSelf:'center'}}
mapStyle={styleURL}
rotateEnabled={false}
zoomEnabled={false}
pitchEnabled={false}
attributionPosition={{bottom: 8, right: 8}}
scrollEnabled={false}
>
<PointAnnotation
children={<></>}
id={"pjuCoordinate"}
coordinate={[fixCoordinate.long, fixCoordinate.lat]}
/>
<Camera
centerCoordinate={[fixCoordinate.long, fixCoordinate.lat]!}
pitch={50}
zoomLevel={15}
minZoomLevel={5}
maxZoomLevel={20}
/>
</MapView>
<TouchableOpacity style={{alignSelf:'center',paddingTop:10}} 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:'bold',fontSize:16,color:'white'}}>Change Location</Text>
</View>
</TouchableOpacity>
</View>
<View
style={{
marginTop: 15
}}
/>
<View>
<Text style={styles.label}>Name<Text style={{color:'red',fontWeight:'bold'}}>*</Text></Text>
<TextInput
style={styles.input}
onChangeText={(text) => {
setPJUname(text)
}}
onChange={()=> {
setPJUNameError(false)
}} }}
/> />
{pjuNameError ? <Text style={styles.errorInput}>Name is Required!</Text>:null} <View style={{alignSelf:'center'}}>
</View> {/* <Text style={styles.label}>Name<Text style={{color:'red',fontWeight:'bold'}}>*</Text></Text> */}
<View <Text style={styles.label}>Name</Text>
style={{ <TextInput
marginTop: 15 style={styles.input}
}} onChangeText={(text) => {
/> setPJUname(text)
<View> }}
<Text style={styles.label}>PJU Type <Text style={{color:'red',fontWeight:'bold'}}>*</Text></Text> onChange={()=> {
<SelectList setPJUNameError(false)
search={false} }}
placeholder="Select PJU Type" />
boxStyles={{borderRadius:50,borderWidth:2}} {pjuNameError ? <Text style={styles.errorInput}>Name is Required!</Text>:null}
inputStyles={{color:'black'}} </View>
dropdownTextStyles={{color:'black'}} <View
data={PJU_Type} style={{
setSelected={setselectedPJUType} marginTop: 15
onSelect={()=> ( }}
[setPJUTypeError(false)]
)}
/> />
<View style={{alignSelf:'center'}}>
{/* <Text style={styles.label}>PJU Type <Text style={{color:'red',fontWeight:'bold'}}>*</Text></Text> */}
<Text style={styles.label}>PJU Type</Text>
<SelectList
search={false}
placeholder="Select PJU Type"
boxStyles={{borderRadius:10,borderWidth:1,borderColor:'#A6A6A6',width:352,height:45}}
inputStyles={{color:'#6B5E5E'}}
dropdownTextStyles={{color:'#6B5E5E'}}
data={PJU_Type}
setSelected={setselectedPJUType}
onSelect={()=> (
[setPJUTypeError(false)]
)}
/>
</View>
{PJUTypeError ? <Text style={styles.errorInput}>PJU Type is Required!</Text>:null} {PJUTypeError ? <Text style={styles.errorInput}>PJU Type is Required!</Text>:null}
</View> <View
<View style={{
style={{ marginTop: 15
marginTop: 15 }}
}}
/>
<Text style={styles.label}>Status <Text style={{color:'red',fontWeight:'bold'}}>*</Text></Text>
<View style={{flexDirection:'row',alignItems:'center'}}>
<RadioButton
value="Baik"
status={ checkedStatus === 'Baik' ? 'checked' : 'unchecked' }
onPress={() => {setCheckedStatus('Baik'); setPJUStatusError(false)}}
/>
<Text style={{color:"black"}}>Baik</Text>
</View>
<View style={{flexDirection:'row',alignItems:'center'}}>
<RadioButton
value="Rusak"
status={ checkedStatus === 'Rusak' ? 'checked' : 'unchecked' }
onPress={() => {setCheckedStatus('Rusak'); setPJUStatusError(false); }}
/> />
<Text style={{color:"black"}}>Rusak</Text> <View style={{alignSelf:'center',width:352,height:45}}>
</View> {/* <Text style={styles.label}>Status<Text style={{color:'red',fontWeight:'bold'}}>*</Text></Text> */}
{PJUStatusError ? <Text style={styles.errorInput}>Status is Required!</Text>:null} <Text style={styles.label}>Status</Text>
<View <View style={{flexDirection:'row',alignItems:'center'}}>
style={{ <RadioButton
marginTop: 15 color='#434343'
}} value="Baik"
/> status={ checkedStatus === 'Baik' ? 'checked' : 'unchecked' }
<View> onPress={() => {setCheckedStatus('Baik'); setPJUStatusError(false)}}
<Text style={styles.label}>Information <Text style={{color:'red',fontWeight:'bold'}}>*</Text></Text> />
<TextInput style={{borderWidth:1,borderRadius:20,padding: 10,color:'black',textAlignVertical:'top'}} <Text style={{color:"#434343",fontWeight:'semibold',fontSize:16}}>Baik</Text>
multiline </View>
numberOfLines={5} <View style={{flexDirection:'row',alignItems:'center'}}>
maxLength={255} <RadioButton
onChangeText={(text) => { color='#434343'
setPJUinfo(text) value="Rusak"
status={ checkedStatus === 'Rusak' ? 'checked' : 'unchecked' }
onPress={() => {setCheckedStatus('Rusak'); setPJUStatusError(false); }}
/>
<Text style={{color:"#434343",fontWeight:'semibold',fontSize:16}}>Rusak</Text>
</View>
{PJUStatusError ? <Text style={styles.errorInput}>Status is Required!</Text>:null}
</View>
<View
style={{
marginTop: 60
}} }}
onChange={()=> { />
setPJUInfoError(false) <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
}} }}
/> />
{PJUInfoError ? <Text style={styles.errorInput}>Information is Required!</Text>:null} <View style={{alignSelf:'center'}}>
</View> {/* <Text style={styles.label}>Information <Text style={{color:'red',fontWeight:'bold'}}>*</Text></Text> */}
<View <Text style={styles.label}>Information</Text>
style={{ <TextInput style={{borderWidth:1,borderRadius:20,padding: 10,color:'#6B5E5E',borderColor:'#A6A6A6',textAlignVertical:'top',width:352,height:135}}
marginTop: 15 multiline
}} numberOfLines={5}
/> maxLength={255}
<View> onChangeText={(text) => {
<Text style={styles.label}>Installation Date</Text> setPJUinfo(text)
<TextInput }}
style={styles.input} onChange={()=> {
onPress={() => setOpen(true)} setPJUInfoError(false)
value={String(momentDate)} }}
/>
{PJUInfoError ? <Text style={styles.errorInput}>Information is Required!</Text>:null}
</View>
<View
style={{
marginTop: 15
}}
/> />
<DatePicker <View style={{alignSelf:'center'}}>
locale='en' <Text style={styles.label}>Installation Date</Text>
theme='dark' <TextInput
mode="date" style={styles.input}
modal onPress={() => setOpen(true)}
open={open} value={String(momentDate)}
date={install_date} />
onConfirm={(survey_date) => { <DatePicker
setOpen(false) locale='en'
setInstallDate(survey_date) 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
}} }}
onCancel={() => { />
setOpen(false) <View
style={{
marginTop: 30
}} }}
/> />
</View> {/* <View>
<View <Text style={styles.label}>Image</Text>
style={{ <View style={styles.borderImg}>
marginTop: 15 <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}/>
<View></View> <Animated.FlatList
ref={ref}
</ScrollView> style={{width:'80%'}}
<Button title='Send' onPress={showDialog} /> 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: 295,
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
}}
/> */}
</ScrollView>
<Button title='Send' onPress={showDialog} />
</View>
{/* <Button title='Get Local' onPress={getMyObject} /> {/* <Button title='Get Local' onPress={getMyObject} />
<Button title='Delete' onPress={removeValue} /> <Button title='Delete' onPress={removeValue} />
<Button title='GetAll' onPress={getAllKeys} /> */} <Button title='GetAll' onPress={getAllKeys} /> */}
@ -644,23 +723,26 @@ 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, // flex: 1,
backgroundColor: '#ecf0f1', // backgroundColor: '#ecf0f1',
padding: 10, padding: 10,
}, },
mainContainer: { mainContainer: {
flex: 1, flex: 1,
}, },
label: { label: {
fontSize: 21, fontSize: 16,
color: 'black', fontWeight:'semibold',
color: '#434343',
// marginBottom: 20 // marginBottom: 20
}, },
title: { title: {

2
src/component/mapCollectLineScreen.tsx
Unescape View File

@ -198,7 +198,7 @@ function MapCollectLineScreen({route,navigation}:MapCollectLineProps):React.JSX.
</TouchableOpacity> </TouchableOpacity>
{/* <TouchableOpacity style={{position:'absolute',backgroundColor:'#FFFFFF',width:50,height:50,borderRadius:25,alignItems:'center',justifyContent:'center',top:'23%',left:'4%'}}> {/* <TouchableOpacity style={{position:'absolute',backgroundColor:'#FFFFFF',width:50,height:50,borderRadius:25,alignItems:'center',justifyContent:'center',top:'23%',left:'4%'}}>
<Image <Image
source={require('../../assets/icon/findmylock.png')} source={require('../../assets/icon/findmyloc.png')}
// style={styles.buttonImageIconStyle} // style={styles.buttonImageIconStyle}
/> />
</TouchableOpacity> */} </TouchableOpacity> */}

2
src/component/mapCollectPolygonScreen.tsx
Unescape View File

@ -218,7 +218,7 @@ function MapCollectPolygonScreen({route,navigation}:MapCollectPolygonProps):Reac
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity style={{position:'absolute',backgroundColor:'#FFFFFF',width:50,height:50,borderRadius:25,alignItems:'center',justifyContent:'center',top:'23%',left:'4%'}}> <TouchableOpacity style={{position:'absolute',backgroundColor:'#FFFFFF',width:50,height:50,borderRadius:25,alignItems:'center',justifyContent:'center',top:'23%',left:'4%'}}>
<Image <Image
source={require('../../assets/icon/findmylock.png')} source={require('../../assets/icon/findmyloc.png')}
// style={styles.buttonImageIconStyle} // style={styles.buttonImageIconStyle}
/> />
</TouchableOpacity> </TouchableOpacity>

2
src/component/mapCollectScreen.tsx
Unescape View File

@ -208,7 +208,7 @@ function MapCollectScreen({route,navigation}:MapCollectProps):React.JSX.Element{
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity onPress={()=>getLocation()} style={{position:'absolute',backgroundColor:'#FFFFFF',width:50,height:50,borderRadius:25,alignItems:'center',justifyContent:'center',top:'23%',left:'4%'}}> <TouchableOpacity onPress={()=>getLocation()} style={{position:'absolute',backgroundColor:'#FFFFFF',width:50,height:50,borderRadius:25,alignItems:'center',justifyContent:'center',top:'23%',left:'4%'}}>
<Image <Image
source={require('../../assets/icon/findmylock.png')} source={require('../../assets/icon/findmyloc.png')}
// style={styles.buttonImageIconStyle} // style={styles.buttonImageIconStyle}
/> />
</TouchableOpacity> </TouchableOpacity>

Write Preview
Loading…
Cancel
Save