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

update from home

master
Choirul Fajri 1 year ago
parent
62da6fe35a
commit
cbe797612b
10 changed files with 85 additions and 33 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/findmylock.png
  2. BIN
      assets/icon/layerList.png
  3. BIN
      assets/icon/mapOutline.png
  4. BIN
      assets/icon/openCamera.png
  5. 18
      src/component/editLinescreen.tsx
  6. 22
      src/component/editPolygonscreen.tsx
  7. 11
      src/component/editscreen.tsx
  8. 34
      src/component/mapCollectLineScreen.tsx
  9. 24
      src/component/mapCollectPolygonScreen.tsx
  10. 7
      src/component/myAccount.tsx

BIN
assets/icon/findmylock.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 415 B

BIN
assets/icon/layerList.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 334 B

BIN
assets/icon/mapOutline.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 276 B

BIN
assets/icon/openCamera.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

18
src/component/editLinescreen.tsx
Unescape View File

@ -2,6 +2,7 @@ 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} 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 { SelectList } from 'react-native-dropdown-select-list'; import { SelectList } from 'react-native-dropdown-select-list';
import { RadioButton } from 'react-native-paper'; import { RadioButton } from 'react-native-paper';
import DatePicker from 'react-native-date-picker'; import DatePicker from 'react-native-date-picker';
@ -421,20 +422,19 @@ export default function EditLineScreen({route,navigation}:collectLineScreenProps
{ {
!loadGeom ? !loadGeom ?
<View style={{flexDirection:'column'}}> <View style={{flexDirection:'column'}}>
<MapLibreGL.MapView <MapView
style={{width:'80%',height:160,alignSelf:'center'}} style={{width:'80%',height:160,alignSelf:'center'}}
styleURL={styleURL} mapStyle={styleURL}
zoomEnabled={false} zoomEnabled={false}
scrollEnabled={false} scrollEnabled={false}
> >
<MapLibreGL.Camera <Camera
centerCoordinate={centerCoords} centerCoordinate={centerCoords}
allowUpdates={true}
zoomLevel={17} zoomLevel={17}
minZoomLevel={5} minZoomLevel={5}
maxZoomLevel={20} maxZoomLevel={20}
/> />
<MapLibreGL.ShapeSource <ShapeSource
id="line" id="line"
shape={{ shape={{
"type": "FeatureCollection", "type": "FeatureCollection",
@ -450,14 +450,14 @@ export default function EditLineScreen({route,navigation}:collectLineScreenProps
] ]
}} }}
> >
<MapLibreGL.LineLayer <LineLayer
id="linelayer1" id="linelayer1"
style={{lineColor:'red',lineWidth:3}} style={{lineColor:'red',lineWidth:3}}
/> />
</MapLibreGL.ShapeSource> </ShapeSource>
{ {
coordinates.map((item:any,index:number)=>( coordinates.map((item:any,index:number)=>(
<MapLibreGL.PointAnnotation <PointAnnotation
children={<></>} children={<></>}
key={index} key={index}
id={String(index)} id={String(index)}
@ -466,7 +466,7 @@ export default function EditLineScreen({route,navigation}:collectLineScreenProps
/> />
)) ))
} }
</MapLibreGL.MapView> </MapView>
{!secondPress ? {!secondPress ?
<TouchableOpacity style={{alignSelf:'center',paddingTop:10}} onPress={()=>{navigation.navigate('Map View Line', { screen: 'Map View Line',data: { <TouchableOpacity style={{alignSelf:'center',paddingTop:10}} onPress={()=>{navigation.navigate('Map View Line', { screen: 'Map View Line',data: {
id:data.id, id:data.id,

22
src/component/editPolygonscreen.tsx
Unescape View File

@ -2,6 +2,7 @@ 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} from 'react-native';
import {useNavigation,NavigationContainer,useIsFocused} from '@react-navigation/native'; import {useNavigation,NavigationContainer,useIsFocused} from '@react-navigation/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 { SelectList } from 'react-native-dropdown-select-list'; import { SelectList } from 'react-native-dropdown-select-list';
import { RadioButton } from 'react-native-paper'; import { RadioButton } from 'react-native-paper';
import DatePicker from 'react-native-date-picker'; import DatePicker from 'react-native-date-picker';
@ -420,15 +421,14 @@ export default function EditPolygonScreen({route,navigation}:EditPolygonScreenPr
}} }}
/> />
<View style={{flexDirection:'column'}}> <View style={{flexDirection:'column'}}>
<MapLibreGL.MapView <MapView
style={{width:'80%',height:160,alignSelf:'center'}} style={{width:'80%',height:160,alignSelf:'center'}}
styleURL={styleURL} mapStyle={styleURL}
zoomEnabled={false} zoomEnabled={false}
scrollEnabled={false} scrollEnabled={false}
> >
<MapLibreGL.Camera <Camera
centerCoordinate={centerCoords.length === 0 ? coordinates[0] : centerCoords} centerCoordinate={centerCoords.length === 0 ? coordinates[0] : centerCoords}
allowUpdates={true}
zoomLevel={17} zoomLevel={17}
minZoomLevel={5} minZoomLevel={5}
maxZoomLevel={20} maxZoomLevel={20}
@ -437,7 +437,7 @@ export default function EditPolygonScreen({route,navigation}:EditPolygonScreenPr
{ {
!loadGeom ? !loadGeom ?
<> <>
<MapLibreGL.ShapeSource <ShapeSource
id="polygon2" id="polygon2"
shape={{ shape={{
"type": "FeatureCollection", "type": "FeatureCollection",
@ -455,18 +455,18 @@ export default function EditPolygonScreen({route,navigation}:EditPolygonScreenPr
] ]
}} }}
> >
<MapLibreGL.LineLayer <LineLayer
id="linelayer2" id="linelayer2"
style={{lineColor:'red',lineWidth:3}} style={{lineColor:'red',lineWidth:3}}
/> />
<MapLibreGL.FillLayer <FillLayer
id="some-fill-feature2" id="some-fill-feature2"
style={{ style={{
fillColor: ['interpolate', ['linear'], ['zoom'], 0, '#eeddbb', 2, '#0daa00', 3, '#bbbbee'], fillColor: ['interpolate', ['linear'], ['zoom'], 0, '#eeddbb', 2, '#0daa00', 3, '#bbbbee'],
fillOpacity:0.5 fillOpacity:0.5
}} }}
/> />
</MapLibreGL.ShapeSource> </ShapeSource>
</> </>
: :
null null
@ -474,7 +474,7 @@ export default function EditPolygonScreen({route,navigation}:EditPolygonScreenPr
{ {
coordinates.map((item:any,index:number)=>( coordinates.map((item:any,index:number)=>(
<MapLibreGL.PointAnnotation <PointAnnotation
key={index} key={index}
id={String(index)} id={String(index)}
coordinate={item} coordinate={item}
@ -483,10 +483,10 @@ export default function EditPolygonScreen({route,navigation}:EditPolygonScreenPr
<View style={{ height: 75, width: 75 }}> <View style={{ height: 75, width: 75 }}>
<View style={{width:15,height:15,backgroundColor:'red',borderColor:'black',borderRadius:50}} /> <View style={{width:15,height:15,backgroundColor:'red',borderColor:'black',borderRadius:50}} />
</View> </View>
</MapLibreGL.PointAnnotation> </PointAnnotation>
)) ))
} }
</MapLibreGL.MapView> </MapView>
{!secondPress ? {!secondPress ?
<TouchableOpacity style={{alignSelf:'center',paddingTop:10}} onPress={()=>{navigation.navigate('Map View Polygon', { screen: 'Map View Polygon',data: { <TouchableOpacity style={{alignSelf:'center',paddingTop:10}} onPress={()=>{navigation.navigate('Map View Polygon', { screen: 'Map View Polygon',data: {
id:data.id, id:data.id,

11
src/component/editscreen.tsx
Unescape View File

@ -26,6 +26,7 @@ import {
import RNFS from 'react-native-fs'; import RNFS from 'react-native-fs';
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 Moment from 'moment'; 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';
@ -432,27 +433,27 @@ function EditScreen({route,navigation}: editScreenProps) {
}} }}
/> />
<View style={{flexDirection:'column'}}> <View style={{flexDirection:'column'}}>
<MapLibreGL.MapView <MapView
style={{width:'80%',height:160,alignSelf:'center'}} style={{width:'80%',height:160,alignSelf:'center'}}
styleURL={styleURL} mapStyle={styleURL}
rotateEnabled={false} rotateEnabled={false}
zoomEnabled={false} zoomEnabled={false}
attributionPosition={{bottom: 8, right: 8}} attributionPosition={{bottom: 8, right: 8}}
scrollEnabled={false} scrollEnabled={false}
> >
<MapLibreGL.PointAnnotation <PointAnnotation
children={<></>} children={<></>}
id={"pjuCoordinate"} id={"pjuCoordinate"}
coordinate={[long, lat]} coordinate={[long, lat]}
/> />
<MapLibreGL.Camera <Camera
centerCoordinate={[long, lat]} centerCoordinate={[long, lat]}
allowUpdates={true} allowUpdates={true}
zoomLevel={15} zoomLevel={15}
minZoomLevel={5} minZoomLevel={5}
maxZoomLevel={20} maxZoomLevel={20}
/> />
</MapLibreGL.MapView> </MapView>
<TouchableOpacity style={{alignSelf:'center',paddingTop:10}} onPress={()=>navigation.navigate('MapView', { screen: 'MapView',data: { <TouchableOpacity style={{alignSelf:'center',paddingTop:10}} onPress={()=>navigation.navigate('MapView', { screen: 'MapView',data: {
id:data.id, id:data.id,
nama:pju_name, nama:pju_name,

34
src/component/mapCollectLineScreen.tsx
Unescape View File

@ -1,5 +1,5 @@
import React, {useState, useEffect} from "react"; import React, {useState, useEffect} from "react";
import { View, Text, StyleSheet, Alert, TouchableOpacity, Image } from "react-native"; import { View, Text, StyleSheet, Alert, TouchableOpacity, Image, StatusBar } 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";
@ -108,13 +108,17 @@ function MapCollectLineScreen({route,navigation}:MapCollectLineProps):React.JSX.
return( return(
<View style={{flex:1}}> <View style={{flex:1}}>
<StatusBar backgroundColor="#34A6F8" barStyle={'light-content'} />
<View key={"mainBackground"} style={{backgroundColor:'#34A6F8',width:'100%',height:'100%'}} />
<MapView <MapView
style={{alignSelf:'stretch',flex:1}} style={{width:'100%',height:'100%',position:'absolute',marginTop:10,borderTopRightRadius:50,borderTopLeftRadius:35,overflow:'hidden'}}
mapStyle={styleURL} mapStyle={styleURL}
zoomEnabled={true} zoomEnabled={true}
onRegionDidChange={(region)=> onRegionDidChange={(region)=>
setZoom(region.properties.zoomLevel) setZoom(region.properties.zoomLevel)
} }
compassEnabled={false}
> >
<Camera <Camera
key={"camera"} key={"camera"}
@ -176,8 +180,27 @@ function MapCollectLineScreen({route,navigation}:MapCollectLineProps):React.JSX.
</MapView> </MapView>
{/* Widget Map */} <TouchableOpacity style={{position:'absolute',backgroundColor:'#FFFFFF',width:50,height:50,borderRadius:25,alignItems:'center',justifyContent:'center',top:'7%',left:'4%'}}>
<View style={styles.gotoLocate}> <Image
source={require('../../assets/icon/layerList.png')}
// style={styles.buttonImageIconStyle}
/>
</TouchableOpacity>
<TouchableOpacity style={{position:'absolute',backgroundColor:'#FFFFFF',width:50,height:50,borderRadius:25,alignItems:'center',justifyContent:'center',top:'15%',left:'4%'}}>
<Image
source={require('../../assets/icon/mapOutline.png')}
// style={styles.buttonImageIconStyle}
/>
</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')}
// style={styles.buttonImageIconStyle}
/>
</TouchableOpacity>
{/* <View style={styles.gotoLocate}>
<TouchableOpacity onPress={() => handleZoom(true)}> <TouchableOpacity onPress={() => handleZoom(true)}>
<Image <Image
source={require('../../assets/icon/plus.png')} source={require('../../assets/icon/plus.png')}
@ -196,7 +219,8 @@ function MapCollectLineScreen({route,navigation}:MapCollectLineProps):React.JSX.
style={styles.buttonImageIconStyle} style={styles.buttonImageIconStyle}
/> />
</TouchableOpacity> </TouchableOpacity>
</View> </View> */}
{ {
startPoint.length === 0 ? startPoint.length === 0 ?
currentPosition.length > 0 ? currentPosition.length > 0 ?

24
src/component/mapCollectPolygonScreen.tsx
Unescape View File

@ -1,5 +1,5 @@
import React, {useState, useEffect, useRef} from "react"; import React, {useState, useEffect, useRef} from "react";
import { View, Text, StyleSheet, Alert, TouchableOpacity, Image } from "react-native"; import { View, Text, StyleSheet, Alert, TouchableOpacity, Image, StatusBar } 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";
@ -123,8 +123,10 @@ function MapCollectPolygonScreen({route,navigation}:MapCollectPolygonProps):Reac
return( return(
<View style={{flex:1}}> <View style={{flex:1}}>
<StatusBar backgroundColor="#34A6F8" barStyle={'light-content'} />
<View key={"mainBackground"} style={{backgroundColor:'#34A6F8',width:'100%',height:'100%'}} />
<MapView <MapView
style={{alignSelf:'stretch',flex:1}} style={{width:'100%',height:'100%',position:'absolute',marginTop:10,borderTopRightRadius:50,borderTopLeftRadius:35,overflow:'hidden'}}
mapStyle={styleURL} mapStyle={styleURL}
zoomEnabled={true} zoomEnabled={true}
onRegionDidChange={(region)=> onRegionDidChange={(region)=>
@ -198,6 +200,24 @@ function MapCollectPolygonScreen({route,navigation}:MapCollectPolygonProps):Reac
} }
</MapView> </MapView>
<TouchableOpacity style={{position:'absolute',backgroundColor:'#FFFFFF',width:50,height:50,borderRadius:25,alignItems:'center',justifyContent:'center',top:'7%',left:'4%'}}>
<Image
source={require('../../assets/icon/layerList.png')}
// style={styles.buttonImageIconStyle}
/>
</TouchableOpacity>
<TouchableOpacity style={{position:'absolute',backgroundColor:'#FFFFFF',width:50,height:50,borderRadius:25,alignItems:'center',justifyContent:'center',top:'15%',left:'4%'}}>
<Image
source={require('../../assets/icon/mapOutline.png')}
// style={styles.buttonImageIconStyle}
/>
</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')}
// style={styles.buttonImageIconStyle}
/>
</TouchableOpacity>
{/* Widget Map */} {/* Widget Map */}
<View style={styles.gotoLocate}> <View style={styles.gotoLocate}>
<TouchableOpacity onPress={() => handleZoom(true)}> <TouchableOpacity onPress={() => handleZoom(true)}>

7
src/component/myAccount.tsx
Unescape View File

@ -30,7 +30,14 @@ export default function MyAccount() {
source={require('../../assets/img/mcf.jpg')} source={require('../../assets/img/mcf.jpg')}
style={[{width:131,height:131,borderRadius:100}]} style={[{width:131,height:131,borderRadius:100}]}
/> />
<TouchableOpacity style={{position:'absolute',right:0,bottom:0}}>
<Image
source={require('../../assets/icon/openCamera.png')}
style={[{width:30,height:30}]}
/>
</TouchableOpacity>
</View> </View>
</View> </View>
<View key={"detail section"} style={{paddingLeft: 20,paddingRight:20,marginTop:'10%',height:'80%'}}> <View key={"detail section"} style={{paddingLeft: 20,paddingRight:20,marginTop:'10%',height:'80%'}}>
<View key={"name"} style={{marginBottom:20}}> <View key={"name"} style={{marginBottom:20}}>

Write Preview
Loading…
Cancel
Save