From 2fe63fde05b4a3a2a6ac3a50ef28bfbc073b00ae Mon Sep 17 00:00:00 2001 From: Anton Tananaev Date: Sun, 8 May 2022 13:22:20 -0700 Subject: Move components folder --- modern/src/common/attributes/AddAttributeDialog.js | 89 --------- modern/src/common/attributes/EditAttributesView.js | 203 --------------------- modern/src/settings/CalendarPage.js | 2 +- modern/src/settings/DevicePage.js | 2 +- modern/src/settings/DriverPage.js | 2 +- modern/src/settings/GeofencePage.js | 2 +- modern/src/settings/GroupPage.js | 2 +- modern/src/settings/MaintenancePage.js | 2 +- modern/src/settings/ServerPage.js | 2 +- modern/src/settings/UserPage.js | 2 +- .../src/settings/components/AddAttributeDialog.js | 89 +++++++++ .../src/settings/components/EditAttributesView.js | 203 +++++++++++++++++++++ 12 files changed, 300 insertions(+), 300 deletions(-) delete mode 100644 modern/src/common/attributes/AddAttributeDialog.js delete mode 100644 modern/src/common/attributes/EditAttributesView.js create mode 100644 modern/src/settings/components/AddAttributeDialog.js create mode 100644 modern/src/settings/components/EditAttributesView.js 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 ( - - - { - 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) => ( - - )} - /> - - {t('sharedType')} - - - - - - - - - ); -}; - -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 ( - - updateAttribute(key, e.target.checked)} - /> - )} - label={getAttributeName(key, subtype)} - /> - deleteAttribute(key)}> - - - - ); - } - return ( - - {getAttributeName(key, subtype)} - updateAttribute(key, e.target.value, type, subtype)} - endAdornment={( - - deleteAttribute(key)}> - - - - )} - /> - - ); - })} - - - - ); -}; - -export default EditAttributesView; diff --git a/modern/src/settings/CalendarPage.js b/modern/src/settings/CalendarPage.js index bd3aa700..ec793196 100644 --- a/modern/src/settings/CalendarPage.js +++ b/modern/src/settings/CalendarPage.js @@ -6,7 +6,7 @@ import { import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; import { DropzoneArea } from 'material-ui-dropzone'; import EditItemView from './components/EditItemView'; -import EditAttributesView from '../common/attributes/EditAttributesView'; +import EditAttributesView from './components/EditAttributesView'; import { useTranslation } from '../common/components/LocalizationProvider'; const useStyles = makeStyles(() => ({ diff --git a/modern/src/settings/DevicePage.js b/modern/src/settings/DevicePage.js index 93b7f638..e40649a5 100644 --- a/modern/src/settings/DevicePage.js +++ b/modern/src/settings/DevicePage.js @@ -6,7 +6,7 @@ import { } from '@material-ui/core'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; import EditItemView from './components/EditItemView'; -import EditAttributesView from '../common/attributes/EditAttributesView'; +import EditAttributesView from './components/EditAttributesView'; import SelectField from '../common/components/SelectField'; import deviceCategories from '../common/util/deviceCategories'; import LinkField from '../common/components/LinkField'; diff --git a/modern/src/settings/DriverPage.js b/modern/src/settings/DriverPage.js index 06b290fc..dee11d37 100644 --- a/modern/src/settings/DriverPage.js +++ b/modern/src/settings/DriverPage.js @@ -5,7 +5,7 @@ import { } from '@material-ui/core'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; import EditItemView from './components/EditItemView'; -import EditAttributesView from '../common/attributes/EditAttributesView'; +import EditAttributesView from './components/EditAttributesView'; import { useTranslation } from '../common/components/LocalizationProvider'; const useStyles = makeStyles(() => ({ diff --git a/modern/src/settings/GeofencePage.js b/modern/src/settings/GeofencePage.js index 27259ed2..0fa986d2 100644 --- a/modern/src/settings/GeofencePage.js +++ b/modern/src/settings/GeofencePage.js @@ -6,7 +6,7 @@ import { } from '@material-ui/core'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; import EditItemView from './components/EditItemView'; -import EditAttributesView from '../common/attributes/EditAttributesView'; +import EditAttributesView from './components/EditAttributesView'; import { useTranslation } from '../common/components/LocalizationProvider'; import useGeofenceAttributes from '../common/attributes/useGeofenceAttributes'; diff --git a/modern/src/settings/GroupPage.js b/modern/src/settings/GroupPage.js index 2864a961..750d6ebc 100644 --- a/modern/src/settings/GroupPage.js +++ b/modern/src/settings/GroupPage.js @@ -6,7 +6,7 @@ import { } from '@material-ui/core'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; import EditItemView from './components/EditItemView'; -import EditAttributesView from '../common/attributes/EditAttributesView'; +import EditAttributesView from './components/EditAttributesView'; import useDeviceAttributes from '../common/attributes/useDeviceAttributes'; import SelectField from '../common/components/SelectField'; import { useTranslation } from '../common/components/LocalizationProvider'; diff --git a/modern/src/settings/MaintenancePage.js b/modern/src/settings/MaintenancePage.js index 3d32a0b4..b55ce35b 100644 --- a/modern/src/settings/MaintenancePage.js +++ b/modern/src/settings/MaintenancePage.js @@ -6,7 +6,7 @@ import InputAdornment from '@material-ui/core/InputAdornment'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; import { prefixString } from '../common/util/stringUtils'; import EditItemView from './components/EditItemView'; -import EditAttributesView from '../common/attributes/EditAttributesView'; +import EditAttributesView from './components/EditAttributesView'; import { useAttributePreference } from '../common/util/preferences'; import { speedFromKnots, speedToKnots, distanceFromMeters, distanceToMeters, diff --git a/modern/src/settings/ServerPage.js b/modern/src/settings/ServerPage.js index e7026bb4..f98bc691 100644 --- a/modern/src/settings/ServerPage.js +++ b/modern/src/settings/ServerPage.js @@ -8,7 +8,7 @@ import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; import { useHistory } from 'react-router-dom'; import { useDispatch, useSelector } from 'react-redux'; import { sessionActions } from '../store'; -import EditAttributesView from '../common/attributes/EditAttributesView'; +import EditAttributesView from './components/EditAttributesView'; import useDeviceAttributes from '../common/attributes/useDeviceAttributes'; import useUserAttributes from '../common/attributes/useUserAttributes'; import OptionsLayout from './components/OptionsLayout'; diff --git a/modern/src/settings/UserPage.js b/modern/src/settings/UserPage.js index abb12edf..2b5adcca 100644 --- a/modern/src/settings/UserPage.js +++ b/modern/src/settings/UserPage.js @@ -7,7 +7,7 @@ import { import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; import { useDispatch, useSelector } from 'react-redux'; import EditItemView from './components/EditItemView'; -import EditAttributesView from '../common/attributes/EditAttributesView'; +import EditAttributesView from './components/EditAttributesView'; import LinkField from '../common/components/LinkField'; import { useTranslation } from '../common/components/LocalizationProvider'; import useUserAttributes from '../common/attributes/useUserAttributes'; diff --git a/modern/src/settings/components/AddAttributeDialog.js b/modern/src/settings/components/AddAttributeDialog.js new file mode 100644 index 00000000..e7965360 --- /dev/null +++ b/modern/src/settings/components/AddAttributeDialog.js @@ -0,0 +1,89 @@ +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 '../../common/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 ( + + + { + 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) => ( + + )} + /> + + {t('sharedType')} + + + + + + + + + ); +}; + +export default AddAttributeDialog; diff --git a/modern/src/settings/components/EditAttributesView.js b/modern/src/settings/components/EditAttributesView.js new file mode 100644 index 00000000..e28909e9 --- /dev/null +++ b/modern/src/settings/components/EditAttributesView.js @@ -0,0 +1,203 @@ +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 '../../common/components/LocalizationProvider'; +import { useAttributePreference } from '../../common/util/preferences'; +import { + distanceFromMeters, distanceToMeters, distanceUnitString, speedFromKnots, speedToKnots, speedUnitString, volumeFromLiters, volumeToLiters, volumeUnitString, +} from '../../common/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 ( + + updateAttribute(key, e.target.checked)} + /> + )} + label={getAttributeName(key, subtype)} + /> + deleteAttribute(key)}> + + + + ); + } + return ( + + {getAttributeName(key, subtype)} + updateAttribute(key, e.target.value, type, subtype)} + endAdornment={( + + deleteAttribute(key)}> + + + + )} + /> + + ); + })} + + + + ); +}; + +export default EditAttributesView; -- cgit v1.2.3