diff options
Diffstat (limited to 'modules')
| -rw-r--r-- | modules/Home.js | 37 | ||||
| -rw-r--r-- | modules/Main.js | 162 | ||||
| -rw-r--r-- | modules/Map.js | 49 |
3 files changed, 248 insertions, 0 deletions
diff --git a/modules/Home.js b/modules/Home.js new file mode 100644 index 0000000..aec9bf6 --- /dev/null +++ b/modules/Home.js @@ -0,0 +1,37 @@ +import * as React from 'react'; +import { View, Text, StyleSheet, TouchableOpacity } from 'react-native'; + +export default function Home(props) { + return ( + <View style={styles.cont}> + <TouchableOpacity style={styles.btn} onPress={() => props.navigation.navigate("main")}><Text style={styles.h1}>Geo App</Text></TouchableOpacity> + <Text style={styles.span}>Find and save your position</Text> + <Text style={styles.span}>Use map</Text> + </View> + ) +} + +const styles = StyleSheet.create({ + cont: { + flexDirection: "column", + marginTop: 10, + paddingTop: 10, + backgroundColor: "#3D54BB", + justifyContent: "center", + alignItems: "center", + height: "100%", + }, + btn: { + margin: 15, + }, + h1: { + color: "white", + fontSize: 60, + fontWeight: "bold", + }, + span: { + color: "white", + fontSize: 22, + } +}) + diff --git a/modules/Main.js b/modules/Main.js new file mode 100644 index 0000000..18457b0 --- /dev/null +++ b/modules/Main.js @@ -0,0 +1,162 @@ +import * as React from 'react'; +import { useState, useEffect } from 'react'; +import { View, Text, StyleSheet, TouchableOpacity, FlatList, Switch, ActivityIndicator, Image } from 'react-native'; +import * as Location from 'expo-location'; +import { useFonts } from "expo-font"; +import AsyncStorage from "@react-native-async-storage/async-storage"; + +import Fira from "../assets/Fira.ttf"; +import LocIcon from "../assets/LocIcon.png"; + +const L_KEY = 'locs_key' + +export default function Main(props) { + const [fontLoaded] = useFonts({ + Fira, + }); + const [isLoading, setIsLoading] = useState(false); + const [locs, _setLocs] = useState([]); + const setLocs = async (nls) => { + await AsyncStorage.setItem(L_KEY, JSON.stringify(nls)) + _setLocs(nls) + } + const saveLocs = async () => { + await AsyncStorage.setItem(L_KEY, JSON.stringify(locs)) + } + useEffect(() => { + (async () => { + const x = JSON.parse(await AsyncStorage.getItem(L_KEY)) + if (x) _setLocs(x); + + const { status } = await Location.requestForegroundPermissionsAsync(); + if (status !== "granted") { + alert("Permission to access location was denied"); + } + })(); + }, []); + // useEffect(() => console.log(locs)) + const getPosition = async () => { + let loc = { c: false, l: await Location.getCurrentPositionAsync(), } + setLocs([...locs, loc]) + }; + const [switchState, setSwitchState] = useState(false); + const pins = [1, 2, 3, 4, 5, 6, 7, 8, 9]; + if (isLoading) { + return ( + <ActivityIndicator style={{ top: "50%" }} color="#00F" size="large" animating={isLoading} /> + ) + } + return ( + <View style={styles.cont}> + <View style={styles.nav}> + <View style={styles.navEl}> + <TouchableOpacity onPress={getPosition} style={[styles.navBtn, { flex: 2 }]}><Text style={[styles.navTxtSm, fontLoaded ? { fontFamily: "Fira" } : { backgroundColor: "red" }]}>LOAD{'\n'}AND SAVE{'\n'}POSITION</Text></TouchableOpacity> + <TouchableOpacity onPress={() => setLocs([])} style={styles.navBtn}><Text style={styles.navTxtSm}>REMOVE{'\n'}ALL DATA</Text></TouchableOpacity> + </View> + <View style={styles.map}> + <TouchableOpacity onPress={async () => { await saveLocs(); props.navigation.navigate("mapV") }} style={styles.navBtnB}><Text style={styles.navTxt}>GO TO THE MAP</Text></TouchableOpacity> + <Switch + style={styles.mapSwitch} + trackColor={{ true: "#AEEDF0", false: "lightgray" }} + thumbColor={switchState ? "#00BFC5" : "white"} + value={switchState} + onValueChange={(a) => { + setLocs(locs.map(l => { l.c = a; return l })) + setSwitchState(a) + }} + /> + </View> + </View> + <FlatList + data={locs} + renderItem={({ item }) => { + console.log("item", item) + return ( + <View style={{ height: 130, width: "100%", position: "relative" }}> + <Image source={LocIcon} style={{ width: 90, height: 90, top: 13 }} /> + <View style={{ top: -66, left: 100 }}> + <Text style={[styles.itemTxt, { color: "#3D54BB" }]}>- Timestamp {item.l.timestamp}</Text> + <Text style={[styles.itemTxt]}>- Latitude {item.l.coords.latitude}</Text> + <Text style={[styles.itemTxt]}>- Longitude {item.l.coords.longitude}</Text> + </View> + <Switch + style={{ top: -120 }} + trackColor={{ true: "#AEEDF0", false: "lightgray" }} + thumbColor={item.c ? "#00BFC5" : "white"} + value={item.c} + onValueChange={(a) => { + setLocs(locs.map(l => { + if (l.l.timestamp === item.l.timestamp) + l.c = a + return l + } + )) + }} + /> + </View> + ) + }} + keyExtractor={p => { + console.log('p', p); + p.l.timestamp + }} + style={styles.list} + /> + </View > + ) +} + +const styles = StyleSheet.create({ + cont: { + flex: 1, + margin: 30, + }, + nav: { + flex: 1, + flexDirection: "column", + flexWrap: "wrap", + // backgroundColor: "red", + }, + navEl: { + flex: 1, + flexDirection: "row", + // backgroundColor: "blue", + }, + navTxt: { + fontSize: 26, + textAlign: "center", + fontWeight: "bold", + }, + navTxtSm: { + fontSize: 26, + fontWeight: "bold", + }, + navBtn: { + flex: 1, + }, + map: { + // backgroundColor: "orange", + flex: 1, + flexDirection: "row", + }, + mapSwitch: { + flex: 1, + height: 65, + }, + navBtnB: { + flex: 1, + }, + list: { + // height: 414, + flex: 1, + // margin: 9, + paddingBottom: 170, + // height: "100%", + // marginBottom: -20, + }, + itemTxt: { + fontSize: 15, + fontWeight: "bold", + }, +}) + diff --git a/modules/Map.js b/modules/Map.js new file mode 100644 index 0000000..a979424 --- /dev/null +++ b/modules/Map.js @@ -0,0 +1,49 @@ +import MapView, { Marker } from 'react-native-maps' +import * as React from 'react'; +import { View, Text, StyleSheet, TouchableOpacity } from 'react-native'; +import AsyncStorage from "@react-native-async-storage/async-storage"; + +const L_KEY = 'locs_key' + +export default function Home(props) { + const [markers, setMarkers] = React.useState([]) + const startFn = async () => { + setMarkers(JSON.parse(await AsyncStorage.getItem(L_KEY))) + }; + React.useEffect(() => {startFn()}, []) + return ( + <MapView + style={{ flex: 1 }} + initialRegion={{ + latitude: 49.9741841, + longitude: 20.1000589, + latitudeDelta: 0.001, + longitudeDelta: 0.001, + }} + > + {markers.filter(m => m.c).map(m => { + return <Marker + coordinate={{ + latitude: m.l.coords.latitude, + longitude: m.l.coords.longitude, + }} + title={""} + description={""} + key={m.l.timestamp} + /> + })} + </MapView> + ) +} + +const styles = StyleSheet.create({ + cont: { + flexDirection: "column", + marginTop: 10, + paddingTop: 10, + backgroundColor: "#3D54BB", + justifyContent: "center", + alignItems: "center", + height: "100%", + }, +}) |