aboutsummaryrefslogtreecommitdiff
path: root/modern/src/common/attributes
diff options
context:
space:
mode:
authorAnton Tananaev <anton@traccar.org>2022-05-08 13:22:20 -0700
committerAnton Tananaev <anton@traccar.org>2022-05-08 13:22:20 -0700
commit2fe63fde05b4a3a2a6ac3a50ef28bfbc073b00ae (patch)
treec49f2621fb725d20a6f952e69551e17ec243b8d4 /modern/src/common/attributes
parent5173647c7bff3404902d4f227717c3265c72cf6c (diff)
downloadtrackermap-web-2fe63fde05b4a3a2a6ac3a50ef28bfbc073b00ae.tar.gz
trackermap-web-2fe63fde05b4a3a2a6ac3a50ef28bfbc073b00ae.tar.bz2
trackermap-web-2fe63fde05b4a3a2a6ac3a50ef28bfbc073b00ae.zip
Move components folder
Diffstat (limited to 'modern/src/common/attributes')
-rw-r--r--modern/src/common/attributes/AddAttributeDialog.js89
-rw-r--r--modern/src/common/attributes/EditAttributesView.js203
2 files changed, 0 insertions, 292 deletions
diff --git a/modern/src/common/attributes/AddAttributeDialog.js b/modern/src/common/attributes/AddAttributeDialog.js
deleted file mode 100644
index 37b36c76..00000000
--- a/modern/src/common/attributes/AddAttributeDialog.js
+++ /dev/null
@@ -1,89 +0,0 @@
-import React, { useState } from 'react';
-import {
- Button, Dialog, DialogActions, DialogContent, FormControl, InputLabel, MenuItem, Select, TextField,
-} from '@material-ui/core';
-
-import { Autocomplete, createFilterOptions } from '@material-ui/lab';
-import { useTranslation } from '../components/LocalizationProvider';
-
-const AddAttributeDialog = ({ open, onResult, definitions }) => {
- const t = useTranslation();
-
- const filter = createFilterOptions({
- stringify: (option) => option.name,
- });
-
- const options = Object.entries(definitions).map(([key, value]) => ({
- key,
- name: value.name,
- type: value.type,
- }));
-
- const [key, setKey] = useState();
- const [type, setType] = useState('string');
-
- return (
- <Dialog open={open} fullWidth maxWidth="xs">
- <DialogContent>
- <Autocomplete
- onChange={(_, option) => {
- setKey(option && typeof option === 'object' ? option.key : option);
- if (option && option.type) {
- setType(option.type);
- }
- }}
- filterOptions={(options, params) => {
- const filtered = filter(options, params);
- if (params.inputValue) {
- filtered.push({
- key: params.inputValue,
- name: params.inputValue,
- });
- }
- return filtered;
- }}
- options={options}
- 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" />
- )}
- />
- <FormControl
- variant="filled"
- margin="normal"
- fullWidth
- 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>
- </Select>
- </FormControl>
- </DialogContent>
- <DialogActions>
- <Button
- color="primary"
- disabled={!key}
- onClick={() => onResult({ key, type })}
- >
- {t('sharedAdd')}
- </Button>
- <Button
- autoFocus
- onClick={() => onResult(null)}
- >
- {t('sharedCancel')}
- </Button>
- </DialogActions>
- </Dialog>
- );
-};
-
-export default AddAttributeDialog;
diff --git a/modern/src/common/attributes/EditAttributesView.js b/modern/src/common/attributes/EditAttributesView.js
deleted file mode 100644
index 4bc34b19..00000000
--- a/modern/src/common/attributes/EditAttributesView.js
+++ /dev/null
@@ -1,203 +0,0 @@
-import React, { useState } from 'react';
-
-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 AddAttributeDialog from './AddAttributeDialog';
-import { useTranslation } from '../components/LocalizationProvider';
-import { useAttributePreference } from '../util/preferences';
-import {
- distanceFromMeters, distanceToMeters, distanceUnitString, speedFromKnots, speedToKnots, speedUnitString, volumeFromLiters, volumeToLiters, volumeUnitString,
-} from '../util/converter';
-
-const useStyles = makeStyles((theme) => ({
- addButton: {
- marginTop: theme.spacing(2),
- marginBottom: theme.spacing(1),
- },
- removeButton: {
- marginRight: theme.spacing(1.5),
- },
-}));
-
-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, type, subtype) => {
- const updatedAttributes = { ...attributes };
- 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);
- };
-
- const deleteAttribute = (key) => {
- const updatedAttributes = { ...attributes };
- delete updatedAttributes[key];
- setAttributes(updatedAttributes);
- };
-
- const getAttributeName = (key, subtype) => {
- const definition = definitions[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) => {
- if (typeof value === 'number') {
- return 'number';
- } if (typeof value === 'boolean') {
- return 'boolean';
- }
- 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 = [];
- const excludeAttributes = ['speedUnit', 'distanceUnit', 'volumeUnit', 'timezone'];
- Object.keys(attributes || []).filter((key) => !excludeAttributes.includes(key)).forEach((key) => {
- const value = attributes[key];
- const type = getAttributeType(value);
- const subtype = getAttributeSubtype(key);
- if (type === 'boolean') {
- booleanList.push({
- key, value, type, subtype,
- });
- } else {
- otherList.push({
- key, value, type, subtype,
- });
- }
- });
- return [...otherList, ...booleanList];
- };
-
- const handleAddResult = (definition) => {
- setAddDialogShown(false);
- if (definition) {
- switch (definition.type) {
- case 'number':
- updateAttribute(definition.key, 0);
- break;
- case 'boolean':
- updateAttribute(definition.key, false);
- break;
- default:
- updateAttribute(definition.key, '');
- break;
- }
- }
- };
-
- return (
- <>
- {convertToList(attributes).map(({
- key, value, type, subtype,
- }) => {
- if (type === 'boolean') {
- return (
- <Grid container direction="row" justifyContent="space-between" key={key}>
- <FormControlLabel
- control={(
- <Checkbox
- checked={value}
- onChange={(e) => updateAttribute(key, e.target.checked)}
- />
- )}
- label={getAttributeName(key, subtype)}
- />
- <IconButton className={classes.removeButton} onClick={() => deleteAttribute(key)}>
- <CloseIcon />
- </IconButton>
- </Grid>
- );
- }
- return (
- <FormControl variant="filled" margin="normal" key={key}>
- <InputLabel>{getAttributeName(key, subtype)}</InputLabel>
- <FilledInput
- type={type === 'number' ? 'number' : 'text'}
- value={getDisplayValue(value, subtype)}
- onChange={(e) => updateAttribute(key, e.target.value, type, subtype)}
- endAdornment={(
- <InputAdornment position="end">
- <IconButton onClick={() => deleteAttribute(key)}>
- <CloseIcon />
- </IconButton>
- </InputAdornment>
- )}
- />
- </FormControl>
- );
- })}
- <Button
- size="large"
- variant="outlined"
- color="primary"
- onClick={() => setAddDialogShown(true)}
- startIcon={<AddIcon />}
- className={classes.addButton}
- >
- {t('sharedAdd')}
- </Button>
- <AddAttributeDialog
- open={addDialogShown}
- onResult={handleAddResult}
- definitions={definitions}
- />
- </>
- );
-};
-
-export default EditAttributesView;