diff options
author | Anton Tananaev <anton@traccar.org> | 2022-05-06 14:15:23 -0700 |
---|---|---|
committer | Anton Tananaev <anton@traccar.org> | 2022-05-06 14:15:23 -0700 |
commit | 3812292cc4413efff1358eb34cc5bccab9d1cbae (patch) | |
tree | 8aa26184ec58a7f231869d427a28f8e999fa2093 /modern/src/attributes/EditAttributesView.js | |
parent | 1b513d2cbf4dde335f9a2822beaaeeb171816c8d (diff) | |
download | trackermap-web-3812292cc4413efff1358eb34cc5bccab9d1cbae.tar.gz trackermap-web-3812292cc4413efff1358eb34cc5bccab9d1cbae.tar.bz2 trackermap-web-3812292cc4413efff1358eb34cc5bccab9d1cbae.zip |
Handle unit attributes
Diffstat (limited to 'modern/src/attributes/EditAttributesView.js')
-rw-r--r-- | modern/src/attributes/EditAttributesView.js | 77 |
1 files changed, 64 insertions, 13 deletions
diff --git a/modern/src/attributes/EditAttributesView.js b/modern/src/attributes/EditAttributesView.js index 3a18a9a3..56fdff5a 100644 --- a/modern/src/attributes/EditAttributesView.js +++ b/modern/src/attributes/EditAttributesView.js @@ -7,6 +7,8 @@ import CloseIcon from '@material-ui/icons/Close'; import AddIcon from '@material-ui/icons/Add'; import AddAttributeDialog from './AddAttributeDialog'; import { useTranslation } from '../LocalizationProvider'; +import { useAttributePreference } from '../common/preferences'; +import { distanceFromMeters, distanceToMeters, distanceUnitString, speedFromKnots, speedToKnots, speedUnitString, volumeFromLiters, volumeToLiters, volumeUnitString } from '../common/converter'; const useStyles = makeStyles((theme) => ({ addButton: { @@ -22,11 +24,28 @@ const EditAttributesView = ({ attributes, setAttributes, definitions }) => { const classes = useStyles(); const t = useTranslation(); + const speedUnit = useAttributePreference('speedUnit'); + const distanceUnit = useAttributePreference('distanceUnit'); + const volumeUnit = useAttributePreference('volumeUnit'); + const [addDialogShown, setAddDialogShown] = useState(false); - const updateAttribute = (key, value) => { + const updateAttribute = (key, value, type, subtype) => { const updatedAttributes = { ...attributes }; - updatedAttributes[key] = value; + switch (subtype) { + case 'speed': + updatedAttributes[key] = speedToKnots(Number(value), speedUnit); + break; + case 'distance': + updatedAttributes[key] = distanceToMeters(Number(value), distanceUnit); + break; + case 'volume': + updatedAttributes[key] = volumeToLiters(Number(value), volumeUnit); + break; + default: + updatedAttributes[key] = type === 'number' ? Number(value) : value; + break; + } setAttributes(updatedAttributes); }; @@ -36,9 +55,19 @@ const EditAttributesView = ({ attributes, setAttributes, definitions }) => { setAttributes(updatedAttributes); }; - const getAttributeName = (key) => { + const getAttributeName = (key, subtype) => { const definition = definitions[key]; - return definition ? definition.name : key; + const name = definition ? definition.name : key; + switch (subtype) { + case 'speed': + return `${name} (${speedUnitString(speedUnit, t)})`; + case 'distance': + return `${name} (${distanceUnitString(distanceUnit, t)})`; + case 'volume': + return `${name} (${volumeUnitString(volumeUnit, t)})`; + default: + return name; + } }; const getAttributeType = (value) => { @@ -50,19 +79,41 @@ const EditAttributesView = ({ attributes, setAttributes, definitions }) => { return 'string'; }; + const getAttributeSubtype = (key) => { + const definition = definitions[key]; + return definition && definition.subtype; + }; + + const getDisplayValue = (value, subtype) => { + if (value) { + switch (subtype) { + case 'speed': + return speedFromKnots(value, speedUnit); + case 'distance': + return distanceFromMeters(value, distanceUnit); + case 'volume': + return volumeFromLiters(value, volumeUnit); + default: + return value; + } + } + return ''; + } + const convertToList = (attributes) => { const booleanList = []; const otherList = []; Object.keys(attributes || []).forEach((key) => { const value = attributes[key]; const type = getAttributeType(value); + const subtype = getAttributeSubtype(key); if (type === 'boolean') { - booleanList.push({ key, value, type }); + booleanList.push({ key, value, type, subtype }); } else { - otherList.push({ key, value, type }); + otherList.push({ key, value, type, subtype }); } }); - return otherList.concat(booleanList); + return [...otherList, ...booleanList]; }; const handleAddResult = (definition) => { @@ -84,10 +135,10 @@ const EditAttributesView = ({ attributes, setAttributes, definitions }) => { return ( <> - {convertToList(attributes).map(({ key, value, type }) => { + {convertToList(attributes).map(({ key, value, type, subtype }) => { if (type === 'boolean') { return ( - <Grid container direction="row" justify="space-between"> + <Grid container direction="row" justify="space-between" key={key}> <FormControlLabel control={( <Checkbox @@ -95,7 +146,7 @@ const EditAttributesView = ({ attributes, setAttributes, definitions }) => { onChange={(e) => updateAttribute(key, e.target.checked)} /> )} - label={getAttributeName(key)} + label={getAttributeName(key, subtype)} /> <IconButton className={classes.removeButton} onClick={() => deleteAttribute(key)}> <CloseIcon /> @@ -105,11 +156,11 @@ const EditAttributesView = ({ attributes, setAttributes, definitions }) => { } return ( <FormControl variant="filled" margin="normal" key={key}> - <InputLabel>{getAttributeName(key)}</InputLabel> + <InputLabel>{getAttributeName(key, subtype)}</InputLabel> <FilledInput type={type === 'number' ? 'number' : 'text'} - value={value || ''} - onChange={(e) => updateAttribute(key, e.target.value)} + value={getDisplayValue(value, subtype)} + onChange={(e) => updateAttribute(key, e.target.value, type, subtype)} endAdornment={( <InputAdornment position="end"> <IconButton onClick={() => deleteAttribute(key)}> |