formCollect

src/component/collectscreen.tsx

@@ -1,6 +1,6 @@
 // global.Buffer = require('buffer').Buffer;
 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 {
   TextInput,
   Button,
@@ -142,7 +142,7 @@ function CollectScreen({route,navigation}: collectScreenProps) {
   const [pju_name, setPJUname] = useState('');
   const [selectedPJUType, setselectedPJUType] = useState("");
   const [pju_info, setPJUinfo] = useState('');
-  const [checkedStatus, setCheckedStatus] = useState('');
+  const [checkedStatus, setCheckedStatus] = useState('Baik');
   const [install_date, setInstallDate] = useState(new Date());
   const momentDate = Moment(install_date).format('YYYY-MM-DD')
   const [attachmentImgError, setattachmentImgError] = useState(false);
@@ -363,69 +363,54 @@ function CollectScreen({route,navigation}: collectScreenProps) {
   const handleCancelAlertOffline = () => {
     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(
     <View style={styles.mainContainer}>
+      <StatusBar backgroundColor="#34A6F8" barStyle={'light-content'} />
+      <View key={"mainBackground"} style={{backgroundColor:'#34A6F8',width:'100%',height:'93%'}} />
+      <View key={"background"} style={{backgroundColor:'#FFFFFF',width:'100%',height:'100%',position:'absolute',borderTopRightRadius:50,borderTopLeftRadius:35,paddingTop:25}}>
         <ScrollView style={styles.container}>
-        <Text style={styles.title}>Form Survey PJU</Text>
-        <View>
-          <Text style={styles.label}>Image</Text>
-          <View style={styles.borderImg}>
-            <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}
-                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
-                    source={require('../../assets/icon/camera.png')}
-                    style={styles.buttonImageIconStyle}
-                />
-                {/* <Text>
-                  Open Camera
-                </Text> */}
-              </TouchableOpacity>
-              <TouchableOpacity style={styles.btnCamera} onPress={openLib}>
+          <View style={{flexDirection:'column'}}>
+            <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}}>
                 <Image
-                  source={require('../../assets/icon/gallery.png')}
-                  style={styles.buttonImageIconStyle}
+                    source={require('../../assets/icon/findmyloc.png')}
                 />
-              </TouchableOpacity>
-            </View>
-          </View>
+                <Text style={{fontSize:14,fontWeight:'semibold',color:'#434343'}}>{fixCoordinate.lat},</Text>
+                <Text style={{fontSize:14,fontWeight:'semibold',color:'#434343'}}>{fixCoordinate.long}</Text>
               </View>
-        <View
-          style={{
-            marginTop: 15
-          }}
-        />
-        <View style={{flexDirection:'column'}}>
               <MapView
-                style={{width:'80%',height:160,alignSelf:'center'}}
+                    style={{width:352,height:200,borderWidth:1,borderColor:'#A6A6A6',borderBottomRightRadius:10,borderBottomLeftRadius:10,overflow:'hidden'}}
                     mapStyle={styleURL}
                     rotateEnabled={false}
                     zoomEnabled={false}
                     pitchEnabled={false}
-                attributionPosition={{bottom: 8, right: 8}}
                     scrollEnabled={false}
                   >
                     <PointAnnotation 
@@ -435,25 +420,27 @@ function CollectScreen({route,navigation}: collectScreenProps) {
                     />
                     <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'})}>
+            </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>
+            </TouchableOpacity> */}
           </View>
           <View
             style={{
               marginTop: 15
             }}
           />
-        <View>
-          <Text style={styles.label}>Name<Text style={{color:'red',fontWeight:'bold'}}>*</Text></Text>
+          <View style={{alignSelf:'center'}}>
+            {/* <Text style={styles.label}>Name<Text style={{color:'red',fontWeight:'bold'}}>*</Text></Text> */}
+            <Text style={styles.label}>Name</Text>
             <TextInput
               style={styles.input}
               onChangeText={(text) => {
@@ -470,53 +457,90 @@ function CollectScreen({route,navigation}: collectScreenProps) {
               marginTop: 15
             }}
           />
-        <View>
-          <Text style={styles.label}>PJU Type <Text style={{color:'red',fontWeight:'bold'}}>*</Text></Text>
+          <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:50,borderWidth:2}}
-            inputStyles={{color:'black'}}
-            dropdownTextStyles={{color:'black'}}
+              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)]
               )}
             />
-          {PJUTypeError ? <Text style={styles.errorInput}>PJU Type is Required!</Text>:null}
           </View>
+          {PJUTypeError ? <Text style={styles.errorInput}>PJU Type is Required!</Text>:null}
           <View
             style={{
               marginTop: 15
             }}
           />
-        <Text style={styles.label}>Status <Text style={{color:'red',fontWeight:'bold'}}>*</Text></Text>
+          <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>
             <View style={{flexDirection:'row',alignItems:'center'}}>
               <RadioButton
+                color='#434343'
                 value="Baik"
                 status={ checkedStatus === 'Baik' ? 'checked' : 'unchecked' }
                 onPress={() => {setCheckedStatus('Baik'); setPJUStatusError(false)}}
               />
-          <Text style={{color:"black"}}>Baik</Text>
+              <Text style={{color:"#434343",fontWeight:'semibold',fontSize:16}}>Baik</Text>
             </View>
             <View style={{flexDirection:'row',alignItems:'center'}}>
               <RadioButton
+                color='#434343'
                 value="Rusak"
                 status={ checkedStatus === 'Rusak' ? 'checked' : 'unchecked' }
                 onPress={() => {setCheckedStatus('Rusak'); setPJUStatusError(false); }}
               />
-          <Text style={{color:"black"}}>Rusak</Text>
+              <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
+            }}
+          />
+          <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>
-          <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'}}
+          <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:'#6B5E5E',borderColor:'#A6A6A6',textAlignVertical:'top',width:352,height:135}}
               multiline
               numberOfLines={5}
               maxLength={255}
@@ -534,7 +558,7 @@ function CollectScreen({route,navigation}: collectScreenProps) {
               marginTop: 15
             }}
           />
-        <View>
+          <View style={{alignSelf:'center'}}>
             <Text style={styles.label}>Installation Date</Text>
             <TextInput
               style={styles.input}
@@ -543,8 +567,8 @@ function CollectScreen({route,navigation}: collectScreenProps) {
             />
             <DatePicker
               locale='en'
-            theme='dark'
-            mode="date"
+              theme='light'
+              mode='date'
               modal
               open={open}
               date={install_date}
@@ -562,10 +586,65 @@ function CollectScreen({route,navigation}: collectScreenProps) {
               marginTop: 15
             }}
           />
-        <View></View>
+          <View
+            style={{
+              marginTop: 30
+            }}
+          />
+          {/* <View>
+            <Text style={styles.label}>Image</Text>
+            <View style={styles.borderImg}>
+              <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}
+                  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
+                      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='Delete' onPress={removeValue} />
       <Button title='GetAll' onPress={getAllKeys} /> */}
@@ -644,23 +723,26 @@ 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',
+      // flex: 1,
+      // backgroundColor: '#ecf0f1',
       padding: 10,
     },
     mainContainer: {
       flex: 1,
     },
     label: {
-      fontSize: 21,
-      color: 'black',
+      fontSize: 16,
+      fontWeight:'semibold',
+      color: '#434343',
       // marginBottom: 20
     },
     title: {

src/component/mapCollectLineScreen.tsx

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

src/component/mapCollectPolygonScreen.tsx

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

src/component/mapCollectScreen.tsx

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