feat: Setting to choose coordinate display format

messages/en.json

@@ -58,6 +58,22 @@
     "description": "Title for category chooser screen",
     "message": "Choose what is happening"
   },
+  "screens.CoordinateSystem.dd": {
+    "description": "Decimal Degrees coordinate system",
+    "message": "Decimal Degrees (DD)"
+  },
+  "screens.CoordinateSystem.dms": {
+    "description": "Degrees/Minutes/Seconds coordinate system",
+    "message": "Degrees/Minutes/Seconds (DMS)"
+  },
+  "screens.CoordinateSystem.title": {
+    "description": "Title coordinate system screen",
+    "message": "Coordinate System"
+  },
+  "screens.CoordinateSystem.utm": {
+    "description": "Universal Transverse Mercator coordinate system",
+    "message": "Universal Transverse Mercator (UTM)"
+  },
   "screens.GpsModal.details": {
     "description": "Section title for details about current position",
     "message": "Details"
@@ -70,6 +86,18 @@
     "description": "Section title for time of last GPS update",
     "message": "Last update"
   },
+  "screens.GpsModal.locationDD": {
+    "description": "Section title for DD coordinates",
+    "message": "Coordinates Decimal Degrees"
+  },
+  "screens.GpsModal.locationDMS": {
+    "description": "Section title for DMS coordinates",
+    "message": "Coordinates DMS"
+  },
+  "screens.GpsModal.locationLatLon": {
+    "description": "Section title for latitude and longitude coordinates",
+    "message": "Coordinates Latitude and Longitude"
+  },
   "screens.GpsModal.locationSensors": {
     "description": "Heading for section about location sensor status",
     "message": "Sensor Status"
@@ -296,6 +324,14 @@
     "description": "Title of error dialog when there is an error importing a config file",
     "message": "Import Error"
   },
+  "screens.Settings.coordinateSystem": {
+    "description": "Settings for coordinate systems",
+    "message": "Coordinate System"
+  },
+  "screens.Settings.coordinateSystemDesc": {
+    "description": "Description of the 'Coordinate System' page",
+    "message": "DD, UTM, DMS"
+  },
   "screens.Settings.currentConfig": {
     "description": "Label for name & version of current configuration",
     "message": "Current Configuration"

src/frontend/AppStack.js

@@ -21,6 +21,7 @@ import CustomHeaderLeft from "./sharedComponents/CustomHeaderLeft";
 import ProjectConfig from "./screens/Settings/ProjectConfig";
 import AboutMapeo from "./screens/Settings/AboutMapeo";
 import LanguageSettings from "./screens/Settings/LanguageSettings";
+import CoordinateSystem from "./screens/Settings/CoordinateSystem";
 import HomeHeader from "./sharedComponents/HomeHeader";
 
 const HomeTabs = createBottomTabNavigator(
@@ -68,6 +69,8 @@ const AppStack = createStackNavigator(
     // $FlowFixMe
     LanguageSettings,
     // $FlowFixMe
+    CoordinateSystem,
+    // $FlowFixMe
     PhotosModal: PhotosModal,
     // $FlowFixMe
     CategoryChooser: CategoryChooser,

src/frontend/context/AppProvider.js

@@ -4,6 +4,7 @@ import * as React from "react";
 import { LocationProvider } from "./LocationContext";
 import { ObservationsProvider } from "./ObservationsContext";
 import { ConfigProvider } from "./ConfigContext";
+import { SettingsProvider } from "./SettingsContext";
 import { DraftObservationProvider } from "./DraftObservationContext";
 
 // This is a convenience wrapper for providing all App contexts to the tree,
@@ -12,7 +13,9 @@ const AppProvider = ({ children }: { children: React.Node }) => (
   <LocationProvider>
     <ObservationsProvider>
       <ConfigProvider>
-        <DraftObservationProvider>{children}</DraftObservationProvider>
+        <SettingsProvider>
+          <DraftObservationProvider>{children}</DraftObservationProvider>
+        </SettingsProvider>
       </ConfigProvider>
     </ObservationsProvider>
   </LocationProvider>

src/frontend/context/SettingsContext.js

@@ -0,0 +1,84 @@
+// @flow
+import * as React from "react";
+import AsyncStorage from "@react-native-community/async-storage";
+
+const STORE_KEY = "@MapeoSettings@36";
+
+export type SettingsContextType = {
+  coordinateSystem?: string,
+};
+
+const initialState = {
+  coordinateSystem: "utm",
+};
+
+const defaultContext = [initialState, () => {}];
+const SettingsContext = React.createContext(defaultContext);
+
+function reducer(state: State, action: Action): State {
+  switch (action.type) {
+    case "set": {
+      return action.value;
+    }
+    case "set_coordinate_system": {
+      try {
+        return { ...state, coordinateSystem: action.value };
+      } catch {
+        return state;
+      }
+    }
+    default:
+      return state;
+  }
+}
+
+const getData = async dispatch => {
+  try {
+    // AsyncStorage.clear()
+    const state = await AsyncStorage.getItem(STORE_KEY);
+    if (state) {
+      const parsedState = JSON.parse(state);
+      dispatch({ type: "set", value: parsedState });
+      return parsedState;
+    } else return initialState;
+  } catch (e) {
+    console.log("Failed to fetch the data from storage");
+    return initialState;
+  }
+};
+
+const saveData = async value => {
+  try {
+    const stringified = JSON.stringify(value);
+    await AsyncStorage.setItem(STORE_KEY, stringified);
+    return value;
+  } catch (e) {
+    console.log("Failed to save the data to the storage");
+  }
+};
+
+export const SettingsProvider = ({ children }: { children: React.Node }) => {
+  const didMountRef = React.useRef(false);
+  const [state, dispatch] = React.useReducer(reducer, defaultContext[0]);
+  const contextValue = React.useMemo(() => [state, dispatch], [
+    state,
+    dispatch,
+  ]);
+  React.useEffect(() => {
+    if (didMountRef.current) {
+      saveData(contextValue[0]);
+    } else {
+      didMountRef.current = true;
+      getData(dispatch);
+    }
+  }, [contextValue]);
+  return (
+    <SettingsContext.Provider
+      value={{ settings: contextValue[0], dispatch: contextValue[1] }}
+    >
+      {children}
+    </SettingsContext.Provider>
+  );
+};
+
+export default SettingsContext;

src/frontend/lib/utils.js

@@ -121,15 +121,30 @@ export function getLastPhotoAttachment(
   return filterPhotosFromAttachments(attachments).pop();
 }
 
-export function formatCoords({
-  lon,
-  lat,
-  format = "utm",
-}: {
-  lon: number,
-  lat: number,
-  format?: "utm",
-}): string {
+// Coordinates conversions
+function toDegreesMinutesAndSeconds(coordinate) {
+  const absolute = Math.abs(coordinate);
+  const degrees = Math.floor(absolute);
+  const minutesNotTruncated = (absolute - degrees) * 60;
+  const minutes = Math.floor(minutesNotTruncated);
+  const seconds = (minutesNotTruncated - minutes) * 60;
+  const decimals = 3;
+  const formattedSeconds = Number(
+    Math.round(seconds + "e" + decimals) + "e-" + decimals
+  );
+  return `${degrees}° ${minutes}' ${formattedSeconds}"`;
+}
+
+function convertToDMS({ lat, lon }) {
+  const latitude = toDegreesMinutesAndSeconds(lat);
+  const latitudeCardinal = lat >= 0 ? "N" : "S";
+
+  const longitude = toDegreesMinutesAndSeconds(lon);
+  const longitudeCardinal = lon >= 0 ? "E" : "W";
+  return `${latitude} ${latitudeCardinal} ${longitude} ${longitudeCardinal}`;
+}
+
+function convertToUTM({ lat, lon }) {
   try {
     let { easting, northing, zoneNum, zoneLetter } = fromLatLon(lat, lon);
     easting = leftPad(easting.toFixed(), 6, "0");
@@ -143,6 +158,38 @@ export function formatCoords({
   }
 }
 
+function formatDD({ lat, lon }) {
+  const decimals = 6;
+  const formattedLat = Number(
+    Math.round(lat + "e" + decimals) + "e-" + decimals
+  );
+  const formattedLon = Number(
+    Math.round(lon + "e" + decimals) + "e-" + decimals
+  );
+  return `lat ${formattedLat} lon ${formattedLon}`;
+}
+
+export function formatCoords({
+  lon,
+  lat,
+  format = "utm",
+}: {
+  lon: number,
+  lat: number,
+  format?: "utm" | "dd" | "dms",
+}): string {
+  switch (format) {
+    case "dd":
+      return formatDD({ lat, lon });
+    case "utm":
+      return convertToUTM({ lat, lon });
+    case "dms":
+      return convertToDMS({ lat, lon });
+    default:
+      return convertToUTM({ lat, lon });
+  }
+}
+
 export function getProp(tags: any, fieldKey: Key, defaultValue: any) {
   // TODO: support deeply nested tags.
   const shallowKey = Array.isArray(fieldKey) ? fieldKey[0] : fieldKey;

src/frontend/screens/GpsModal.js

@@ -5,6 +5,8 @@ import Text from "../sharedComponents/Text";
 import { defineMessages, FormattedMessage, useIntl } from "react-intl";
 
 import LocationContext from "../context/LocationContext";
+import SettingsContext from "../context/SettingsContext";
+
 import { FormattedCoords } from "../sharedComponents/FormattedData";
 import DateDistance from "../sharedComponents/DateDistance";
 import HeaderTitle from "../sharedComponents/HeaderTitle";
@@ -27,6 +29,21 @@ const m = defineMessages({
     defaultMessage: "Coordinates UTM",
     description: "Section title for UTM coordinates",
   },
+  locationLatLon: {
+    id: "screens.GpsModal.locationLatLon",
+    defaultMessage: "Coordinates Latitude and Longitude",
+    description: "Section title for latitude and longitude coordinates",
+  },
+  locationDMS: {
+    id: "screens.GpsModal.locationDMS",
+    defaultMessage: "Coordinates DMS",
+    description: "Section title for DMS coordinates",
+  },
+  locationDD: {
+    id: "screens.GpsModal.locationDD",
+    defaultMessage: "Coordinates Decimal Degrees",
+    description: "Section title for DD coordinates",
+  },
   details: {
     id: "screens.GpsModal.details",
     defaultMessage: "Details",
@@ -62,7 +79,22 @@ type Props = {
 
 const GpsModal = ({ navigation }: Props) => {
   const location = React.useContext(LocationContext);
+  const {
+    settings: { coordinateSystem },
+  } = React.useContext(SettingsContext);
   const { formatMessage: t } = useIntl();
+  const coordinateMessage = () => {
+    switch (coordinateSystem) {
+      case "dd":
+        return <FormattedMessage {...m.locationDD} />;
+      case "utm":
+        return <FormattedMessage {...m.locationUTM} />;
+      case "dms":
+        return <FormattedMessage {...m.locationDMS} />;
+      default:
+        return <FormattedMessage {...m.locationUTM} />;
+    }
+  };
 
   return (
     <ScrollView style={styles.container} testID="gpsScreenScrollView">
@@ -76,13 +108,12 @@ const GpsModal = ({ navigation }: Props) => {
         />
         {location.position && (
           <>
-            <Text style={styles.sectionTitle}>
-              <FormattedMessage {...m.locationUTM} />
-            </Text>
+            <Text style={styles.sectionTitle}>{coordinateMessage()}</Text>
             <Text style={styles.rowValue}>
               <FormattedCoords
                 lon={location.position.coords.longitude}
                 lat={location.position.coords.latitude}
+                format={coordinateSystem}
               />
             </Text>
             <Text style={styles.sectionTitle}>

src/frontend/screens/Observation/ObservationShare.js

@@ -15,6 +15,7 @@ import {
 import { getProp } from "../../lib/utils";
 import type { PresetWithFields } from "../../context/ConfigContext";
 import type { Observation } from "../../context/ObservationsContext";
+import SettingsContext from "../../context/SettingsContext";
 
 const m = defineMessages({
   alertSubject: {
@@ -52,6 +53,10 @@ export const ShareSubject = ({ observation, preset }: ShareMessageProps) => {
 
 export const ShareMessage = ({ observation, preset }: ShareMessageProps) => {
   const { formatMessage: t } = useIntl();
+  const {
+    settings: { coordinateSystem },
+  } = React.useContext(SettingsContext);
+
   const { value } = observation;
   const { lon, lat } = value;
 
@@ -81,7 +86,7 @@ export const ShareMessage = ({ observation, preset }: ShareMessageProps) => {
         <FormattedObservationDate observation={observation} variant="long" />
         <br />
         {lon != null && lat != null ? (
-          <FormattedCoords lat={lat} lon={lon} />
+          <FormattedCoords format={coordinateSystem} lat={lat} lon={lon} />
         ) : null}
       </p>
       {value.tags.notes ? <p>{value.tags.notes}</p> : null}

src/frontend/screens/Observation/ObservationView.js

@@ -30,6 +30,7 @@ import {
 } from "../../lib/styles";
 import { TouchableOpacity } from "../../sharedComponents/Touchables";
 import type { PresetWithFields } from "../../context/ConfigContext";
+import SettingsContext from "../../context/SettingsContext";
 import type { Observation } from "../../context/ObservationsContext";
 import useMapStyle from "../../hooks/useMapStyle";
 import useDeviceId from "../../hooks/useDeviceId";
@@ -125,6 +126,9 @@ const ObservationView = ({
   onPressDelete,
 }: ODVProps) => {
   const intl = useIntl();
+  const {
+    settings: { coordinateSystem },
+  } = React.useContext(SettingsContext);
   const { formatMessage: t } = intl;
   const deviceId = useDeviceId();
   const isMine = deviceId === observation.value.deviceId;
@@ -173,7 +177,11 @@ const ObservationView = ({
             <View style={styles.coords}>
               <View style={styles.coordsPointer} />
               <Text style={styles.positionText}>
-                <FormattedCoords lon={lon} lat={lat} />
+                <FormattedCoords
+                  format={coordinateSystem}
+                  lon={lon}
+                  lat={lat}
+                />
               </Text>
             </View>
             <InsetMapView lat={lat} lon={lon} />