1 files changed, 162 insertions, 0 deletions
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",
+  },
+})
+