diff options
Diffstat (limited to 'modern/src/attributes')
-rw-r--r-- | modern/src/attributes/AddAttributeDialog.js | 36 | ||||
-rw-r--r-- | modern/src/attributes/EditAttributesView.js | 129 | ||||
-rw-r--r-- | modern/src/attributes/deviceAttributes.js | 4 | ||||
-rw-r--r-- | modern/src/attributes/geofenceAttributes.js | 4 | ||||
-rw-r--r-- | modern/src/attributes/positionAttributes.js | 10 | ||||
-rw-r--r-- | modern/src/attributes/userAttributes.js | 12 |
6 files changed, 100 insertions, 95 deletions
diff --git a/modern/src/attributes/AddAttributeDialog.js b/modern/src/attributes/AddAttributeDialog.js index ee4c48c..24c208a 100644 --- a/modern/src/attributes/AddAttributeDialog.js +++ b/modern/src/attributes/AddAttributeDialog.js @@ -1,12 +1,14 @@ import React, { useState } from 'react'; -import { Button, Dialog, DialogActions, DialogContent, FormControl, InputLabel, MenuItem, Select, TextField } from "@material-ui/core"; +import { + Button, Dialog, DialogActions, DialogContent, FormControl, InputLabel, MenuItem, Select, TextField, +} from '@material-ui/core'; -import t from '../common/localization'; import { Autocomplete, createFilterOptions } from '@material-ui/lab'; +import t from '../common/localization'; const AddAttributeDialog = ({ open, onResult, definitions }) => { const filter = createFilterOptions({ - stringify: option => option.name, + stringify: (option) => option.name, }); const options = Object.entries(definitions).map(([key, value]) => ({ @@ -39,10 +41,8 @@ const AddAttributeDialog = ({ open, onResult, definitions }) => { return filtered; }} options={options} - getOptionLabel={option => { - return option && typeof option === 'object' ? option.name : option; - }} - renderOption={option => option.name} + getOptionLabel={(option) => (option && typeof option === 'object' ? option.name : option)} + renderOption={(option) => option.name} freeSolo renderInput={(params) => ( <TextField {...params} label={t('sharedAttribute')} variant="filled" margin="normal" /> @@ -52,14 +52,16 @@ const AddAttributeDialog = ({ open, onResult, definitions }) => { variant="filled" margin="normal" fullWidth - disabled={key in definitions}> + disabled={key in definitions} + > <InputLabel>{t('sharedType')}</InputLabel> <Select value={type} - onChange={e => setType(e.target.value)}> - <MenuItem value={'string'}>{t('sharedTypeString')}</MenuItem> - <MenuItem value={'number'}>{t('sharedTypeNumber')}</MenuItem> - <MenuItem value={'boolean'}>{t('sharedTypeBoolean')}</MenuItem> + onChange={(e) => setType(e.target.value)} + > + <MenuItem value="string">{t('sharedTypeString')}</MenuItem> + <MenuItem value="number">{t('sharedTypeNumber')}</MenuItem> + <MenuItem value="boolean">{t('sharedTypeBoolean')}</MenuItem> </Select> </FormControl> </DialogContent> @@ -67,17 +69,19 @@ const AddAttributeDialog = ({ open, onResult, definitions }) => { <Button color="primary" disabled={!key} - onClick={() => onResult({ key, type })}> + onClick={() => onResult({ key, type })} + > {t('sharedAdd')} </Button> <Button autoFocus - onClick={() => onResult(null)}> + onClick={() => onResult(null)} + > {t('sharedCancel')} </Button> </DialogActions> </Dialog> - ) -} + ); +}; export default AddAttributeDialog; diff --git a/modern/src/attributes/EditAttributesView.js b/modern/src/attributes/EditAttributesView.js index 619d857..e38c02a 100644 --- a/modern/src/attributes/EditAttributesView.js +++ b/modern/src/attributes/EditAttributesView.js @@ -1,13 +1,14 @@ import React, { useState } from 'react'; -import t from '../common/localization'; - -import { Button, Checkbox, FilledInput, FormControl, FormControlLabel, Grid, IconButton, InputAdornment, InputLabel, makeStyles } from "@material-ui/core"; +import { + Button, Checkbox, FilledInput, FormControl, FormControlLabel, Grid, IconButton, InputAdornment, InputLabel, makeStyles, +} from '@material-ui/core'; import CloseIcon from '@material-ui/icons/Close'; import AddIcon from '@material-ui/icons/Add'; +import t from '../common/localization'; import AddAttributeDialog from './AddAttributeDialog'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ addButton: { marginTop: theme.spacing(2), marginBottom: theme.spacing(1), @@ -22,10 +23,36 @@ const EditAttributesView = ({ attributes, setAttributes, definitions }) => { const [addDialogShown, setAddDialogShown] = useState(false); + const updateAttribute = (key, value) => { + const updatedAttributes = { ...attributes }; + updatedAttributes[key] = value; + setAttributes(updatedAttributes); + }; + + const deleteAttribute = (key) => { + const updatedAttributes = { ...attributes }; + delete updatedAttributes[key]; + setAttributes(updatedAttributes); + }; + + const getAttributeName = (key) => { + const definition = definitions[key]; + return definition ? definition.name : key; + }; + + const getAttributeType = (value) => { + if (typeof value === 'number') { + return 'number'; + } if (typeof value === 'boolean') { + return 'boolean'; + } + return 'string'; + }; + const convertToList = (attributes) => { - let booleanList = []; - let otherList = []; - for (const key in attributes) { + const booleanList = []; + const otherList = []; + Object.keys(attributes).forEach((key) => { const value = attributes[key]; const type = getAttributeType(value); if (type === 'boolean') { @@ -33,14 +60,14 @@ const EditAttributesView = ({ attributes, setAttributes, definitions }) => { } else { otherList.push({ key, value, type }); } - } + }); return otherList.concat(booleanList); - } + }; const handleAddResult = (definition) => { setAddDialogShown(false); if (definition) { - switch(definition.type) { + switch (definition.type) { case 'number': updateAttribute(definition.key, 0); break; @@ -48,37 +75,10 @@ const EditAttributesView = ({ attributes, setAttributes, definitions }) => { updateAttribute(definition.key, false); break; default: - updateAttribute(definition.key, ""); + updateAttribute(definition.key, ''); break; } } - } - - const updateAttribute = (key, value) => { - let updatedAttributes = {...attributes}; - updatedAttributes[key] = value; - setAttributes(updatedAttributes); - }; - - const deleteAttribute = (key) => { - let updatedAttributes = {...attributes}; - delete updatedAttributes[key]; - setAttributes(updatedAttributes); - }; - - const getAttributeName = (key) => { - const definition = definitions[key]; - return definition ? definition.name : key; - }; - - const getAttributeType = (value) => { - if (typeof value === 'number') { - return 'number'; - } else if (typeof value === 'boolean') { - return 'boolean'; - } else { - return 'string'; - } }; return ( @@ -88,37 +88,37 @@ const EditAttributesView = ({ attributes, setAttributes, definitions }) => { return ( <Grid container direction="row" justify="space-between"> <FormControlLabel - control={ + control={( <Checkbox checked={value} - onChange={e => updateAttribute(key, e.target.checked)} - /> - } - label={getAttributeName(key)} /> + onChange={(e) => updateAttribute(key, e.target.checked)} + /> + )} + label={getAttributeName(key)} + /> <IconButton className={classes.removeButton} onClick={() => deleteAttribute(key)}> <CloseIcon /> </IconButton> </Grid> ); - } else { - return ( - <FormControl variant="filled" margin="normal" key={key}> - <InputLabel>{getAttributeName(key)}</InputLabel> - <FilledInput - type={type === 'number' ? 'number' : 'text'} - value={value || ''} - onChange={e => updateAttribute(key, e.target.value)} - endAdornment={ - <InputAdornment position="end"> - <IconButton onClick={() => deleteAttribute(key)}> - <CloseIcon /> - </IconButton> - </InputAdornment> - } - /> - </FormControl> - ); } + return ( + <FormControl variant="filled" margin="normal" key={key}> + <InputLabel>{getAttributeName(key)}</InputLabel> + <FilledInput + type={type === 'number' ? 'number' : 'text'} + value={value || ''} + onChange={(e) => updateAttribute(key, e.target.value)} + endAdornment={( + <InputAdornment position="end"> + <IconButton onClick={() => deleteAttribute(key)}> + <CloseIcon /> + </IconButton> + </InputAdornment> + )} + /> + </FormControl> + ); })} <Button size="large" @@ -126,16 +126,17 @@ const EditAttributesView = ({ attributes, setAttributes, definitions }) => { color="primary" onClick={() => setAddDialogShown(true)} startIcon={<AddIcon />} - className={classes.addButton}> + className={classes.addButton} + > {t('sharedAdd')} </Button> <AddAttributeDialog open={addDialogShown} onResult={handleAddResult} definitions={definitions} - /> + /> </> ); -} +}; export default EditAttributesView; diff --git a/modern/src/attributes/deviceAttributes.js b/modern/src/attributes/deviceAttributes.js index 891a225..26e3d92 100644 --- a/modern/src/attributes/deviceAttributes.js +++ b/modern/src/attributes/deviceAttributes.js @@ -1,7 +1,7 @@ -import t from '../common/localization' +import t from '../common/localization'; export default { - 'speedLimit': { + speedLimit: { name: t('attributeSpeedLimit'), type: 'string', }, diff --git a/modern/src/attributes/geofenceAttributes.js b/modern/src/attributes/geofenceAttributes.js index 4b9c9e6..59a8869 100644 --- a/modern/src/attributes/geofenceAttributes.js +++ b/modern/src/attributes/geofenceAttributes.js @@ -1,7 +1,7 @@ -import t from '../common/localization' +import t from '../common/localization'; export default { - 'speedLimit': { + speedLimit: { name: t('attributeSpeedLimit'), type: 'string', }, diff --git a/modern/src/attributes/positionAttributes.js b/modern/src/attributes/positionAttributes.js index b1efe3d..94f396a 100644 --- a/modern/src/attributes/positionAttributes.js +++ b/modern/src/attributes/positionAttributes.js @@ -1,19 +1,19 @@ -import t from '../common/localization' +import t from '../common/localization'; export default { - 'raw': { + raw: { name: t('positionRaw'), type: 'string', }, - 'index': { + index: { name: t('positionIndex'), type: 'number', }, - 'ignition': { + ignition: { name: t('positionIgnition'), type: 'boolean', }, - 'odometer': { + odometer: { name: t('positionOdometer'), type: 'number', dataType: 'distance', diff --git a/modern/src/attributes/userAttributes.js b/modern/src/attributes/userAttributes.js index bcec29f..6f842f9 100644 --- a/modern/src/attributes/userAttributes.js +++ b/modern/src/attributes/userAttributes.js @@ -1,7 +1,7 @@ -import t from '../common/localization' +import t from '../common/localization'; export default { - 'notificationTokens': { + notificationTokens: { name: t('attributeNotificationTokens'), type: 'string', }, @@ -49,19 +49,19 @@ export default { name: t('attributeUiHidePositionAttributes'), type: 'string', }, - 'distanceUnit': { + distanceUnit: { name: t('settingsDistanceUnit'), type: 'string', }, - 'speedUnit': { + speedUnit: { name: t('settingsSpeedUnit'), type: 'string', }, - 'volumeUnit': { + volumeUnit: { name: t('settingsVolumeUnit'), type: 'string', }, - 'timezone': { + timezone: { name: t('sharedTimezone'), type: 'string', }, |