Ej/background map selection

messages/renderer/en.json

@@ -1,4 +1,60 @@
 {
+  "renderer.components.BackgroundMaps.BackgroundMapInfo.createOfflineArea": {
+    "description": "Button to create an offline area",
+    "message": "Create Offline Area"
+  },
+  "renderer.components.BackgroundMaps.BackgroundMapInfo.currentMap": {
+    "description": "Button text for 'Use Map' button when map is selected",
+    "message": "Current Map"
+  },
+  "renderer.components.BackgroundMaps.BackgroundMapInfo.deleteErrorDescription": {
+    "description": "Description for error message when deleting style,",
+    "message": "There was an error deleting the style"
+  },
+  "renderer.components.BackgroundMaps.BackgroundMapInfo.deleteErrorTitle": {
+    "description": "Title for error message when deleting style",
+    "message": "Error Deleting Style"
+  },
+  "renderer.components.BackgroundMaps.BackgroundMapInfo.deleteStyle": {
+    "description": "Button to delete style",
+    "message": "Delete Style"
+  },
+  "renderer.components.BackgroundMaps.BackgroundMapInfo.mb": {
+    "description": "abbreviation for megabyte",
+    "message": "MB"
+  },
+  "renderer.components.BackgroundMaps.BackgroundMapInfo.offlineAreas": {
+    "description": "Title for Offline Areas",
+    "message": "Offline Areas"
+  },
+  "renderer.components.BackgroundMaps.BackgroundMapInfo.useMap": {
+    "description": "Button text for 'Use Map' button",
+    "message": "Use Map"
+  },
+  "renderer.components.BackgroundMaps.BackgroundMapInfo.zoomLevel": {
+    "description": "Zoom Level Title",
+    "message": "Zoom Level: {zoom}"
+  },
+  "renderer.components.BackgroundMaps.MapCard.areas": {
+    "description": "indicates how many offline areas",
+    "message": "offline areas"
+  },
+  "renderer.components.BackgroundMaps.MapCard.currentMap": {
+    "description": "Label to indicate when map is selected",
+    "message": "Current Map"
+  },
+  "renderer.components.BackgroundMaps.MapCard.mb": {
+    "description": "Abbreviation for megabytes",
+    "message": "MB"
+  },
+  "renderer.components.BackgroundMaps.SidePanel.addMap": {
+    "description": "Button to add map background",
+    "message": "Add Map Background"
+  },
+  "renderer.components.BackgroundMaps.SidePanel.backToSettings": {
+    "description": "button to go back to settings",
+    "message": "Back to Settings"
+  },
   "renderer.components.Home.mapeditor": {
     "description": "MapEditor tab label",
     "message": "Territory"
@@ -339,6 +395,18 @@
   "renderer.components.MapFilter.MapFilter.errorTitle": {
     "message": "Oh dear! An error has occurred"
   },
+  "renderer.components.MapFilter.MapView.BackgroundMapSelector.close": {
+    "description": "Label for dismiss button",
+    "message": "Close"
+  },
+  "renderer.components.MapFilter.MapView.BackgroundMapSelector.manageMapsLink": {
+    "description": "Label for link to manage maps",
+    "message": "Manage Maps"
+  },
+  "renderer.components.MapFilter.MapView.BackgroundMapSelector.title": {
+    "description": "Title for background maps overlay",
+    "message": "Background Maps"
+  },
   "renderer.components.MapFilter.ObservationDialog.ObservationDialog.additionalHeader": {
     "description": "Header for section with additional fields that are not defined in the preset",
     "message": "Additional data"
@@ -474,12 +542,44 @@
   "renderer.components.SettingsView.AboutMapeo.mapeoVersion": {
     "message": "Mapeo Version"
   },
+  "renderer.components.SettingsView.BackgroundMaps.introText": {
+    "description": "Text introducing the Background Maps feature",
+    "message": "The Background Map in Mapeo is displayed on the observation screen and is used as a background for the observations you collect. This new pilot feature allows you to add your own custom maps and switch between multiple maps. Background Maps is currently an advanced feature - an existing map file in .mbtiles format is required for testing"
+  },
+  "renderer.components.SettingsView.BackgroundMaps.mapBackgroundTitle": {
+    "description": "Title for description of offline maps",
+    "message": "Managing Map Backgrounds and Offline Areas"
+  },
+  "renderer.components.SettingsView.ExperimentsMenu.backgroundMaps": {
+    "message": "Background Maps"
+  },
+  "renderer.components.SettingsView.SettingsItem.off": {
+    "message": "Off"
+  },
+  "renderer.components.SettingsView.SettingsItem.on": {
+    "message": "On"
+  },
+  "renderer.components.SettingsView.SettingsList.off": {
+    "message": "Off"
+  },
+  "renderer.components.SettingsView.SettingsList.on": {
+    "message": "On"
+  },
   "renderer.components.SettingsView.index.aboutMapeo": {
     "message": "About Mapeo"
   },
   "renderer.components.SettingsView.index.aboutMapeoSubtitle": {
     "message": "Version and build number"
   },
+  "renderer.components.SettingsView.index.backgroundMaps": {
+    "message": "Background maps"
+  },
+  "renderer.components.SettingsView.index.experiments": {
+    "message": "Experiments"
+  },
+  "renderer.components.SettingsView.index.experimentsSubtitle": {
+    "message": "Turn on experimental new features"
+  },
   "renderer.components.SyncView.Searching.searchingHint": {
     "description": "Hint on sync screen when searching on wifi for devices",
     "message": "Make sure devices are turned on and connected to the same wifi network"
@@ -636,6 +736,26 @@
   "renderer.components.dialogs.Error.openLog": {
     "message": "Open log..."
   },
+  "renderer.components.dialogs.ImportMapStyle.addMap": {
+    "description": "Title of screen used to add a new background map",
+    "message": "Add Map Background"
+  },
+  "renderer.components.dialogs.ImportMapStyle.cancel": {
+    "description": "button to cancel the import of a background map",
+    "message": "Cancel"
+  },
+  "renderer.components.dialogs.ImportMapStyle.importErrorDescription": {
+    "description": "Description of map import error",
+    "message": "There was an error importing the background maps. Please try again. Error message:"
+  },
+  "renderer.components.dialogs.ImportMapStyle.importErrorTitle": {
+    "description": "Title for import errot pop up dialog,",
+    "message": "Background Maps Import Error"
+  },
+  "renderer.components.dialogs.ImportMapStyle.importFile": {
+    "description": "Label of 'Import File' button",
+    "message": "Import File"
+  },
   "renderer.components.dialogs.LatLon.button-submit": {
     "message": "Submit"
   },

src/main/ipc.js

@@ -95,6 +95,19 @@ module.exports = function (ipcSend) {
     return i18n.t('closing-screen')
   })
 
+  ipcMain.handle('select-mb-tile-file', async function () {
+    const result = await dialog.showOpenDialog({
+      filters: [{ name: 'MbTiles', extensions: ['mbtiles'] }],
+      properties: ['openFile']
+    })
+
+    return result
+  })
+
+  ipcMain.on('show-error-dialog', function (event, title, content) {
+    dialog.showErrorBox(title, content)
+  })
+
   ipcMain.on('save-file', function () {
     var metadata = userConfig.getSettings('metadata')
     var ext = metadata ? metadata.dataset_id : 'mapeodata'

src/renderer/components/BackgroundMaps/BackgroundMapInfo.js

@@ -0,0 +1,206 @@
+// @ts-check
+import { Button, Fade, makeStyles, Paper, Typography } from '@material-ui/core'
+import * as React from 'react'
+import { defineMessages, useIntl } from 'react-intl'
+import DeleteIcon from '@material-ui/icons/DeleteForeverOutlined'
+import CheckIcon from '@material-ui/icons/Check'
+import ReactMapboxGl from 'react-mapbox-gl'
+
+import { MAPBOX_ACCESS_TOKEN } from '../../../../config'
+import Loading from '../Loading'
+import { convertKbToMb } from '../SettingsView/BackgroundMaps'
+import { useMapServerMutation } from '../../hooks/useMapServerMutation'
+import { useBackgroundMapStore } from '../../hooks/store'
+import { DEFAULT_MAP, useMapStylesQuery } from '../../hooks/useMapStylesQuery'
+
+const MapboxPrevOnly = ReactMapboxGl({
+  accessToken: MAPBOX_ACCESS_TOKEN,
+  dragRotate: false,
+  pitchWithRotate: false,
+  attributionControl: false,
+  injectCSS: false
+})
+
+const m = defineMessages({
+  // Title for Offline Areas
+  offlineAreas: 'Offline Areas',
+  // Button to create an offline area
+  createOfflineArea: 'Create Offline Area',
+  // Button to delete style
+  deleteStyle: 'Delete Style',
+  // Title for error message when deleting style
+  deleteErrorTitle: 'Error Deleting Style',
+  // Description for error message when deleting style,
+  deleteErrorDescription: 'There was an error deleting the style',
+  // Zoom Level Title
+  zoomLevel: 'Zoom Level: {zoom}',
+  // abbreviation for megabyte
+  mb: 'MB',
+  // Button text for 'Use Map' button
+  useMap: 'Use Map',
+  // Button text for 'Use Map' button when map is selected
+  currentMap: 'Current Map'
+})
+
+/**
+ * @typedef {import('../../hooks/store').MapStyle} BackgroundMapInfo
+ * @typedef BackgroundMapInfoProps
+ * @prop {BackgroundMapInfo} map
+ * @prop {()=>void} unsetMapValue
+ */
+
+/** @param {BackgroundMapInfoProps} props */
+export const BackgroundMapInfo = ({ map, unsetMapValue }) => {
+  const { formatMessage: t } = useIntl()
+
+  const [mapStyle, setMapStyle] = useBackgroundMapStore()
+
+  const classes = useStyles()
+
+  const isCurrentMap = mapStyle?.id === map.id
+
+  return (
+    <Fade in timeout={0}>
+      <Paper
+        style={{
+          flex: 1,
+          width: '100%',
+          height: '100%',
+          padding: !map ? 40 : 0
+        }}
+      >
+        {!map ? (
+          <Loading />
+        ) : (
+          <>
+            <MapInfo
+              name={typeof map.name === 'string' ? map.name : t(map.name)}
+              id={map.id}
+              unsetMapValue={unsetMapValue}
+              url={map.url}
+              isDefault={map.isDefault}
+              isCurrentMap={isCurrentMap}
+            />
+            {/* Text */}
+            <div className={classes.paddedContainer}>
+              <Typography variant='subtitle2' style={{ fontSize: 18 }}>
+                {typeof map.name === 'string' ? map.name : t(map.name)}
+              </Typography>
+              {!map.isDefault ? (
+                <Typography variant='body1'>{`${Math.round(
+                  convertKbToMb(map.bytesStored)
+                )} ${t(m.mb)}`}</Typography>
+              ) : null}
+              <Button
+                variant='outlined'
+                onClick={() => setMapStyle(map)}
+                className={`${classes.paddedButton} ${isCurrentMap &&
+                  classes.iconButton}`}
+                disabled={map.id === mapStyle?.id}
+              >
+                <Typography
+                  style={{ textTransform: 'none' }}
+                  variant='subtitle2'
+                >
+                  {isCurrentMap ? t(m.currentMap) : t(m.useMap)}
+                </Typography>
+                {isCurrentMap ? <CheckIcon className={classes.icon} /> : null}
+              </Button>
+            </div>
+          </>
+        )}
+      </Paper>
+    </Fade>
+  )
+}
+
+/**
+ * @typedef MapInfoProps
+ * @prop {string|null|undefined} name
+ * @prop {string} id
+ * @prop {()=>void} unsetMapValue
+ * @prop {string} url
+ * @prop {boolean | undefined} isDefault
+ * @prop {boolean} isCurrentMap
+ */
+
+/** @param {MapInfoProps} props */
+const MapInfo = ({ name, id, isDefault, unsetMapValue, url, isCurrentMap }) => {
+  const classes = useStyles()
+
+  const { formatMessage: t } = useIntl()
+
+  const { data: mapsData } = useMapStylesQuery()
+  const [, setMapStyle] = useBackgroundMapStore()
+  const mutation = useMapServerMutation('delete', `/styles/${id}`)
+
+  async function deleteMap () {
+    if (isCurrentMap && mapsData?.length) {
+      setMapStyle(DEFAULT_MAP)
+    }
+    await mutation.mutateAsync(null) // tc complains if no arg is passed...
+  }
+
+  return (
+    <>
+      {/* Banner */}
+      <Paper className={classes.banner}>
+        <Typography variant='h5'>{name}</Typography>
+
+        <div>
+          {!isDefault && (
+            <Button variant='outlined' onClick={() => deleteMap()}>
+              <DeleteIcon className={classes.icon} />
+              <Typography style={{ textTransform: 'none' }} variant='subtitle2'>
+                {t(m.deleteStyle)}
+              </Typography>
+            </Button>
+          )}
+        </div>
+      </Paper>
+
+      {/* Map */}
+      <MapboxPrevOnly
+        style={url}
+        containerStyle={{ height: '60%', width: '100%' }}
+        zoom={[0]}
+      />
+    </>
+  )
+}
+
+const useStyles = makeStyles({
+  buttonContainer: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center'
+  },
+  banner: {
+    width: '100%',
+    display: 'flex',
+    justifyContent: 'space-between',
+    padding: '10px 20px',
+    borderRadius: 0
+  },
+  textBanner: {
+    display: 'flex',
+    justifyContent: 'space-evenly'
+  },
+  offlineCardContainer: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    justifyContent: 'space-evenly'
+  },
+  paddedContainer: {
+    padding: 20
+  },
+  paddedButton: {
+    marginTop: 20
+  },
+  iconButton: {
+    padding: '5px 10px 5px 15px'
+  },
+  icon: {
+    height: 20
+  }
+})