Ej/background maps settings flag

messages/renderer/en.json

@@ -1,4 +1,48 @@
 {
+  "renderer.components.BackgroundMaps.BackgroundMapInfo.createOfflineArea": {
+    "description": "Button to create an offline area",
+    "message": "Create Offline Area"
+  },
+  "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.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.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"
@@ -474,12 +518,40 @@
   "renderer.components.SettingsView.AboutMapeo.mapeoVersion": {
     "message": "Mapeo Version"
   },
+  "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 +708,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,152 @@
+// @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 Loading from '../Loading'
+import { useMapServerQuery } from '../../hooks/useMapServerQuery'
+import { MapboxPrevOnly } from './MapCard'
+import { convertKbToMb } from '../SettingsView/BackgroundMaps'
+import { useMapServerMutation } from '../../hooks/useMapServerMutation'
+
+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'
+})
+
+/**
+ * @typedef BackgroundMapInfoProps
+ * @prop {string} id
+ * @prop {string} url
+ * @prop {number} size
+ * @prop {()=>void} unsetMapValue
+ */
+
+/** @param {BackgroundMapInfoProps} props */
+export const BackgroundMapInfo = ({ id, unsetMapValue, url, size }) => {
+  const { formatMessage: t } = useIntl()
+
+  const { data } = useMapServerQuery(`/styles/${id}`)
+
+  return (
+    <Fade in timeout={0}>
+      <Paper
+        style={{
+          flex: 1,
+          width: '100%',
+          height: '100%',
+          padding: !data ? 40 : 0
+        }}
+      >
+        {!data ? (
+          <Loading />
+        ) : (
+          <>
+            <MapInfo
+              name={data.name}
+              id={id}
+              unsetMapValue={unsetMapValue}
+              url={url}
+            />
+            {/* Text */}
+            <div style={{ padding: 20 }}>
+              <Typography variant='subtitle2' style={{ fontSize: 18 }}>
+                {data.name}
+              </Typography>
+              {data.zoom && (
+                <Typography variant='body1'>
+                  {t(m.zoomLevel, { zoom: data.zoom })}
+                </Typography>
+              )}
+              <Typography variant='body1'>{`${Math.round(
+                convertKbToMb(size)
+              )} ${t(m.mb)}`}</Typography>
+            </div>
+          </>
+        )}
+      </Paper>
+    </Fade>
+  )
+}
+
+/**
+ * @typedef MapInfoProps
+ * @prop {string|undefined} name
+ * @prop {string} id
+ * @prop {()=>void} unsetMapValue
+ * @prop {string} url
+ */
+
+/** @param {MapInfoProps} props */
+const MapInfo = ({ name, id, unsetMapValue, url }) => {
+  const classes = useStyles()
+
+  const { formatMessage: t } = useIntl()
+
+  const mutation = useMapServerMutation('delete', `/styles/${id}`)
+
+  async function deleteMap () {
+    await mutation.mutateAsync(null) // tc complains if no arg is passed...
+  }
+
+  return (
+    <>
+      {/* Banner */}
+      <Paper className={classes.banner}>
+        <Typography variant='h5'>{name}</Typography>
+
+        <div>
+          <Button variant='outlined' onClick={() => deleteMap()}>
+            <DeleteIcon />
+            <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'
+  },
+  textBanner: {
+    display: 'flex',
+    justifyContent: 'space-evenly'
+  },
+  offlineCardContainer: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    justifyContent: 'space-evenly'
+  }
+})

src/renderer/components/BackgroundMaps/MapCard.js

@@ -0,0 +1,93 @@
+// @ts-check
+import * as React from 'react'
+import Button from '@material-ui/core/Button'
+import { makeStyles, Typography } from '@material-ui/core'
+import { useIntl, defineMessages } from 'react-intl'
+import ReactMapboxGl from 'react-mapbox-gl'
+
+import { MAPBOX_ACCESS_TOKEN } from '../../../../config'
+import { convertKbToMb } from '../SettingsView/BackgroundMaps'
+
+const m = defineMessages({
+  // Abbreviation for megabytes
+  mb: 'MB',
+  // indicates how many offline areas
+  areas: 'offline areas',
+})
+
+export const MapboxPrevOnly = ReactMapboxGl({
+  accessToken: MAPBOX_ACCESS_TOKEN,
+  dragRotate: false,
+  pitchWithRotate: false,
+  attributionControl: false,
+  injectCSS: false,
+})
+
+/**
+ * @typedef MapCardProps
+ * @prop {import('../Settings/BackgroundMaps').MapServerStyleInfo} offlineMap
+ * @prop {React.Dispatch<React.SetStateAction<import('../Settings/BackgroundMaps').MapServerStyleInfo['id'] | false>>} setMap
+ * @prop {boolean } isBeingViewed
+ */
+
+/** @param {MapCardProps} param */
+export const MapCard = ({ offlineMap, setMap, isBeingViewed }) => {
+  const classes = useStyles()
+  const { formatMessage: t } = useIntl()
+
+  return (
+    <Button variant='outlined' className={classes.root} onClick={() => setMap(offlineMap.id)}>
+      <div className={classes.inner} style={{ backgroundColor: !isBeingViewed ? '#CCCCD6' : '#0066FF' }}>
+        <div style={{ width: '30%' }}>
+          <MapboxPrevOnly
+            containerStyle={{
+              height: '100%',
+              width: '100%',
+            }}
+            style={offlineMap.url}
+            zoom={[0]}
+          />
+        </div>
+        <div className={classes.text}>
+          <Typography>{offlineMap.name}</Typography>
+          <Typography variant='subtitle1'>
+            {`${Math.round(convertKbToMb(offlineMap.bytesStored))} ${t(m.mb)}`}
+          </Typography>
+        </div>
+      </div>
+    </Button>
+  )
+}
+
+const useStyles = makeStyles({
+  root: {
+    height: 90,
+    width: '90%',
+    marginBottom: 20,
+    textTransform: 'none',
+    padding: 0,
+    '& .MuiButton-root': {
+      padding: 0,
+    },
+    '& .MuiButton-outlined': {
+      padding: 0,
+    },
+    '& .MuiButton-label': {
+      height: '100%',
+    },
+  },
+  inner: {
+    display: 'flex',
+    flex: 1,
+    height: '100%',
+  },
+  text: {
+    alignItems: 'flex-start',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    flex: 1,
+    height: '100%',
+    marginLeft: 10,
+  },
+})