chore: list styles, BG Map Management

messages/renderer/en.json

@@ -1,4 +1,52 @@
 {
+  "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.BackgroundMaps.SidePanel.createOfflineMap": {
+    "description": "Button to create an offline area for a map backgroun",
+    "message": "Create Offline Map"
+  },
   "renderer.components.Home.mapeditor": {
     "description": "MapEditor tab label",
     "message": "Territory"
@@ -464,6 +512,22 @@
     "description": "Name to show for an observation when it does not match any preset",
     "message": "Observation"
   },
+  "renderer.components.Settings.AboutMapeo.version": {
+    "description": "Used to indicate the version of mapeo the user is using",
+    "message": "Version"
+  },
+  "renderer.components.Settings.BackgroundMaps.mapBackgroundTitle": {
+    "description": "Title for description of offline maps",
+    "message": "Managing Map Backgrounds and Offline Areas"
+  },
+  "renderer.components.Settings.index.aboutMapeo": {
+    "description": "Setting Tab title to open information about mapeo",
+    "message": "About Mapeo"
+  },
+  "renderer.components.Settings.index.backgroundMap": {
+    "description": "Setting Tab title to open background maps",
+    "message": "Background Map"
+  },
   "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"
@@ -620,6 +684,22 @@
   "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."
+  },
+  "renderer.components.dialogs.ImportMapStyle.importErrorTitle": {
+    "description": "Title for import errot pop up dialog,",
+    "message": "Background Maps Import Error"
+  },
   "renderer.components.dialogs.LatLon.button-submit": {
     "message": "Submit"
   },

src/renderer/components/BackgroundMaps/BackgroundMapInfo.js

@@ -0,0 +1,163 @@
+// @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'
+
+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} idBeingViewed
+ * @prop {string} url
+ * @prop {number} size
+ * @prop {()=>void} unsetMapValue
+ */
+
+/** @param {BackgroundMapInfoProps} props */
+export const BackgroundMapInfo = ({
+  id,
+  idBeingViewed,
+  unsetMapValue,
+  url,
+  size
+}) => {
+  const shouldLoad = React.useMemo(() => id === idBeingViewed, [
+    id,
+    idBeingViewed
+  ])
+
+  const { formatMessage: t } = useIntl()
+
+  const { data } = useMapServerQuery(`/styles/${id}`, shouldLoad)
+
+  // Lazy loading each one here: aka will only load when clicked
+  return shouldLoad ? (
+    <Fade in={shouldLoad} timeout={600}>
+      <Paper
+        style={{
+          flex: 1,
+          width: '100%',
+          height: '100%',
+          padding: !data ? 40 : 0
+        }}
+      >
+        {!data ? (
+          <Loading />
+        ) : (
+          <React.Fragment>
+            <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'>{`${size} ${t(m.mb)}`}</Typography>
+            </div>
+          </React.Fragment>
+        )}
+      </Paper>
+    </Fade>
+  ) : null
+}
+
+/**
+ * @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()
+
+  /**
+   *
+   * @param {string} mapId
+   */
+
+  // To Do, useMapServerMutation.mutate()
+  function deleteMap (mapId) {}
+
+  return (
+    <React.Fragment>
+      {/* Banner */}
+      <Paper className={classes.banner}>
+        <Typography variant='h5'>{name}</Typography>
+
+        <div>
+          <Button variant='outlined' onClick={() => deleteMap(id)}>
+            <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]}
+      />
+    </React.Fragment>
+  )
+}
+
+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,100 @@
+// @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 '../Settings/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
+  }
+})