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
Split 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. 20
      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

20
src/component/editLinescreen.tsx
Unescape View File

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

22
src/component/editPolygonscreen.tsx
Unescape View File

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

11
src/component/editscreen.tsx
Unescape View File

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

34
src/component/mapCollectLineScreen.tsx
Unescape View File

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

24
src/component/mapCollectPolygonScreen.tsx
Unescape View File

@ -1,5 +1,5 @@ @@ -1,5 +1,5 @@
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 { MapView,ShapeSource,Camera,UserLocation,PointAnnotation,FillLayer,LineLayer,VectorSource } from "@maplibre/maplibre-react-native";
@ -123,8 +123,10 @@ function MapCollectPolygonScreen({route,navigation}:MapCollectPolygonProps):Reac @@ -123,8 +123,10 @@ function MapCollectPolygonScreen({route,navigation}:MapCollectPolygonProps):Reac
return(
<View style={{flex:1}}>
<StatusBar backgroundColor="#34A6F8" barStyle={'light-content'} />
<View key={"mainBackground"} style={{backgroundColor:'#34A6F8',width:'100%',height:'100%'}} />
<MapView
style={{alignSelf:'stretch',flex:1}}
style={{width:'100%',height:'100%',position:'absolute',marginTop:10,borderTopRightRadius:50,borderTopLeftRadius:35,overflow:'hidden'}}
mapStyle={styleURL}
zoomEnabled={true}
onRegionDidChange={(region)=>
@ -198,6 +200,24 @@ function MapCollectPolygonScreen({route,navigation}:MapCollectPolygonProps):Reac @@ -198,6 +200,24 @@ function MapCollectPolygonScreen({route,navigation}:MapCollectPolygonProps):Reac
}
</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 */}
<View style={styles.gotoLocate}>
<TouchableOpacity onPress={() => handleZoom(true)}>

7
src/component/myAccount.tsx
Unescape View File

@ -30,7 +30,14 @@ export default function MyAccount() { @@ -30,7 +30,14 @@ export default function MyAccount() {
source={require('../../assets/img/mcf.jpg')}
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 key={"detail section"} style={{paddingLeft: 20,paddingRight:20,marginTop:'10%',height:'80%'}}>
<View key={"name"} style={{marginBottom:20}}>

Write Preview
Loading…
Cancel
Save