Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ej/background map selection #744

Open
wants to merge 60 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
60 commits
Select commit Hold shift + click to select a range
108cf02
Revert "add SettingsMenu tabs component (WIP)"
lightlii Jun 28, 2023
8fbdd3f
Revert "add settings menu tab"
lightlii Jun 28, 2023
5f7d37d
Merge branch 'master' of github.com:digidem/mapeo-desktop
lightlii Jul 3, 2023
7fed094
Merge branch 'master' of github.com:digidem/mapeo-desktop
lightlii Jul 27, 2023
91b89ec
add settingsmenu component
lightlii Jun 29, 2023
e51c12d
better menu styling
lightlii Jun 29, 2023
b35e0ef
Revert "Revert "add SettingsMenu tabs component (WIP)""
lightlii Jul 3, 2023
9342e17
fix breaks from bad merge (/revert order)
lightlii Jul 4, 2023
467263f
chore: better jsdoc typing
lightlii Jul 13, 2023
e44e678
chore: add better typing
lightlii Jul 14, 2023
3ea703b
chore: more improved typing
lightlii Jul 14, 2023
6ebab38
add experiments menu
lightlii Jul 12, 2023
f39b76b
chore: usability improvements to settings list items
lightlii Jul 14, 2023
9bfeb19
autogenerated translations file
lightlii Jul 14, 2023
bab7bcc
add experiments menu
lightlii Jul 12, 2023
2e1d547
chore: add ExperimentsMenu types
lightlii Jul 14, 2023
80ff041
chore: styling fixes
lightlii Jul 14, 2023
9f9e086
chore: integrate background maps settings menu
lightlii Jul 17, 2023
398178d
autogenerated translations file
lightlii Jul 17, 2023
1e283fe
add experiments menu
lightlii Jul 12, 2023
47c9d61
chore: usability improvements to settings list items
lightlii Jul 14, 2023
b3ee3dd
add experiments menu
lightlii Jul 12, 2023
290569e
remove redundant translation
lightlii Jul 26, 2023
f46cd69
chore: add mapstyle deletion
lightlii Jul 26, 2023
22c5935
fix: restore `selectMbTileFile` functionality
lightlii Jul 26, 2023
bd00458
chore: internationalise 'Import File' label
lightlii Jul 26, 2023
16257b2
chore: disable continuous querying and call refresh when new style is…
lightlii Jul 26, 2023
ffb723a
chore: add error handling when importing map style
lightlii Jul 27, 2023
2ea6977
chore: auto-gen translation file
lightlii Jul 27, 2023
5c1ac88
fix: remove merge-duplication
lightlii Jul 27, 2023
9fd494e
chore: auto-gen translation file
lightlii Jul 27, 2023
7753f87
Merge branch 'master' of github.com:digidem/mapeo-desktop
lightlii Aug 8, 2023
a27c04b
Merge branch 'master' into ej/background-map-selection
lightlii Aug 8, 2023
4fd671f
feat: add button to select current map
lightlii Aug 10, 2023
35472d3
wip: add backgroundMap selector component to Observations view
lightlii Aug 10, 2023
8494d0e
chore: add background maps selector component. Currently with hardcod…
lightlii Aug 14, 2023
be8a4d0
chore: remove hardcoded value (still WIP)
lightlii Aug 14, 2023
99e3c16
Merge branch 'master' of github.com:digidem/mapeo-desktop
lightlii Aug 17, 2023
96b4ef3
Merge branch 'master' into ej/background-map-selection
lightlii Aug 17, 2023
b434580
fix: restore setting persisted storage async
lightlii Aug 17, 2023
06c68b8
fix: make saved types in config consistent
lightlii Aug 17, 2023
c8c0848
fix: revert async await again (??) problem appears to be the format t…
lightlii Aug 17, 2023
6aa6578
fix: revert zustand serialisation stuf... persisted store working cor…
lightlii Aug 18, 2023
cc800ef
Merge branch 'ej/fix-persisted-store' into ej/background-map-selection
lightlii Aug 18, 2023
879bfb3
feat: implement map selection
lightlii Aug 18, 2023
70e3726
fix: add key to Fragment in map
lightlii Aug 22, 2023
e6fea7f
Merge branch 'master' of github.com:digidem/mapeo-desktop
lightlii Aug 22, 2023
0666a81
Merge branch 'master' into ej/background-map-selection
lightlii Aug 22, 2023
610e745
fix: remove unused inports
lightlii Aug 22, 2023
99d7450
fix: use fuill screen dialog for BackgroundMapSelector and fix overflow
lightlii Aug 29, 2023
0cc0147
fix: make style list in background maps screen scrollable
lightlii Aug 29, 2023
d07b385
fix: refactor hooks to simplify where styles data is coming from
lightlii Aug 29, 2023
472cfa1
fix: clean up unused variables
lightlii Aug 29, 2023
0f15556
fix: save full map style in store and get rid of lookp hook + more ti…
lightlii Aug 30, 2023
9b19b39
fix: map use default style when backgroundmaps flagdisabled
lightlii Aug 30, 2023
c6b63ff
Es/example of persisted state (#747)
ErikSin Sep 12, 2023
fbd5e4a
chore: make background maps description text translatable
lightlii Sep 14, 2023
8a00112
chore: set default map when current map is deleted
lightlii Sep 14, 2023
6012b8a
chore: make map preview card non-interactive
lightlii Sep 14, 2023
eb8e950
chore: remove log
lightlii Sep 20, 2023
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
120 changes: 120 additions & 0 deletions messages/renderer/en.json
Original file line number Diff line number Diff line change
@@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
},
Expand Down
13 changes: 13 additions & 0 deletions src/main/ipc.js
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down
206 changes: 206 additions & 0 deletions src/renderer/components/BackgroundMaps/BackgroundMapInfo.js
Original file line number Diff line number Diff line change
@@ -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>
Comment on lines +150 to +159
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is currently not working, but I believe this is a map server thing, so just remove it for now (and the user will not be able to delete a map)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is working fine for me, lets check together later whats going on

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(I added a little check so it will set the the default map if you delete the current selected one)

</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
}
})
Loading
Loading