diff options
Diffstat (limited to 'modern/src/settings')
26 files changed, 1022 insertions, 64 deletions
diff --git a/modern/src/settings/AccumulatorsPage.js b/modern/src/settings/AccumulatorsPage.js index 3e98612a..f8895bbe 100644 --- a/modern/src/settings/AccumulatorsPage.js +++ b/modern/src/settings/AccumulatorsPage.js @@ -5,8 +5,8 @@ import { Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, Container, TextField, FormControl, Button, } from '@material-ui/core'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; -import { useTranslation } from '../LocalizationProvider'; -import OptionsLayout from './OptionsLayout'; +import { useTranslation } from '../common/components/LocalizationProvider'; +import OptionsLayout from './components/OptionsLayout'; const useStyles = makeStyles((theme) => ({ container: { diff --git a/modern/src/settings/CalendarPage.js b/modern/src/settings/CalendarPage.js index 0d35d2f3..bd3aa700 100644 --- a/modern/src/settings/CalendarPage.js +++ b/modern/src/settings/CalendarPage.js @@ -5,9 +5,9 @@ import { } from '@material-ui/core'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; import { DropzoneArea } from 'material-ui-dropzone'; -import EditItemView from '../EditItemView'; -import EditAttributesView from '../attributes/EditAttributesView'; -import { useTranslation } from '../LocalizationProvider'; +import EditItemView from './components/EditItemView'; +import EditAttributesView from '../common/attributes/EditAttributesView'; +import { useTranslation } from '../common/components/LocalizationProvider'; const useStyles = makeStyles(() => ({ details: { diff --git a/modern/src/settings/CalendarsPage.js b/modern/src/settings/CalendarsPage.js index 8b7a2c1b..db4dc770 100644 --- a/modern/src/settings/CalendarsPage.js +++ b/modern/src/settings/CalendarsPage.js @@ -4,9 +4,9 @@ import { } from '@material-ui/core'; import MoreVertIcon from '@material-ui/icons/MoreVert'; import { useEffectAsync } from '../reactHelper'; -import EditCollectionView from '../EditCollectionView'; -import OptionsLayout from './OptionsLayout'; -import { useTranslation } from '../LocalizationProvider'; +import EditCollectionView from './components/EditCollectionView'; +import OptionsLayout from './components/OptionsLayout'; +import { useTranslation } from '../common/components/LocalizationProvider'; const useStyles = makeStyles((theme) => ({ columnAction: { diff --git a/modern/src/settings/CommandPage.js b/modern/src/settings/CommandPage.js index 0cd440e1..99bb21f2 100644 --- a/modern/src/settings/CommandPage.js +++ b/modern/src/settings/CommandPage.js @@ -3,9 +3,9 @@ import { Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, TextField, } from '@material-ui/core'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; -import EditItemView from '../EditItemView'; -import { useTranslation } from '../LocalizationProvider'; -import BaseCommandView from './BaseCommandView'; +import EditItemView from './components/EditItemView'; +import { useTranslation } from '../common/components/LocalizationProvider'; +import BaseCommandView from './components/BaseCommandView'; const useStyles = makeStyles(() => ({ details: { diff --git a/modern/src/settings/SendCommandPage.js b/modern/src/settings/CommandSendPage.js index 91130fa1..79de1b84 100644 --- a/modern/src/settings/SendCommandPage.js +++ b/modern/src/settings/CommandSendPage.js @@ -4,10 +4,10 @@ import { Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, Container, Button, FormControl, } from '@material-ui/core'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; -import { useTranslation } from '../LocalizationProvider'; -import OptionsLayout from './OptionsLayout'; -import BaseCommandView from './BaseCommandView'; -import SelectField from '../form/SelectField'; +import { useTranslation } from '../common/components/LocalizationProvider'; +import OptionsLayout from './components/OptionsLayout'; +import BaseCommandView from './components/BaseCommandView'; +import SelectField from '../common/components/SelectField'; const useStyles = makeStyles((theme) => ({ container: { @@ -25,7 +25,7 @@ const useStyles = makeStyles((theme) => ({ }, })); -const SendCommandPage = () => { +const CommandSendPage = () => { const history = useHistory(); const classes = useStyles(); const t = useTranslation(); @@ -112,4 +112,4 @@ const SendCommandPage = () => { ); }; -export default SendCommandPage; +export default CommandSendPage; diff --git a/modern/src/settings/CommandsPage.js b/modern/src/settings/CommandsPage.js index c9240f11..6081b48c 100644 --- a/modern/src/settings/CommandsPage.js +++ b/modern/src/settings/CommandsPage.js @@ -4,9 +4,9 @@ import { } from '@material-ui/core'; import MoreVertIcon from '@material-ui/icons/MoreVert'; import { useEffectAsync } from '../reactHelper'; -import EditCollectionView from '../EditCollectionView'; -import OptionsLayout from './OptionsLayout'; -import { useTranslation } from '../LocalizationProvider'; +import EditCollectionView from './components/EditCollectionView'; +import OptionsLayout from './components/OptionsLayout'; +import { useTranslation } from '../common/components/LocalizationProvider'; import { formatBoolean } from '../common/util/formatter'; import { prefixString } from '../common/util/stringUtils'; diff --git a/modern/src/settings/ComputedAttributePage.js b/modern/src/settings/ComputedAttributePage.js index 2aa40ef0..52a583dc 100644 --- a/modern/src/settings/ComputedAttributePage.js +++ b/modern/src/settings/ComputedAttributePage.js @@ -3,9 +3,9 @@ import { Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, FormControl, InputLabel, MenuItem, Select, TextField, } from '@material-ui/core'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; -import EditItemView from '../EditItemView'; -import { useTranslation } from '../LocalizationProvider'; -import usePositionAttributes from '../attributes/usePositionAttributes'; +import EditItemView from './components/EditItemView'; +import { useTranslation } from '../common/components/LocalizationProvider'; +import usePositionAttributes from '../common/attributes/usePositionAttributes'; const useStyles = makeStyles(() => ({ details: { diff --git a/modern/src/settings/ComputedAttributesPage.js b/modern/src/settings/ComputedAttributesPage.js index 40c7e339..3b60419d 100644 --- a/modern/src/settings/ComputedAttributesPage.js +++ b/modern/src/settings/ComputedAttributesPage.js @@ -4,9 +4,9 @@ import { } from '@material-ui/core'; import MoreVertIcon from '@material-ui/icons/MoreVert'; import { useEffectAsync } from '../reactHelper'; -import EditCollectionView from '../EditCollectionView'; -import OptionsLayout from './OptionsLayout'; -import { useTranslation } from '../LocalizationProvider'; +import EditCollectionView from './components/EditCollectionView'; +import OptionsLayout from './components/OptionsLayout'; +import { useTranslation } from '../common/components/LocalizationProvider'; import { useAdministrator } from '../common/util/permissions'; const useStyles = makeStyles((theme) => ({ diff --git a/modern/src/settings/DevicePage.js b/modern/src/settings/DevicePage.js new file mode 100644 index 00000000..93b7f638 --- /dev/null +++ b/modern/src/settings/DevicePage.js @@ -0,0 +1,202 @@ +import React, { useState } from 'react'; +import TextField from '@material-ui/core/TextField'; + +import { + Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, FormControlLabel, Checkbox, +} from '@material-ui/core'; +import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; +import EditItemView from './components/EditItemView'; +import EditAttributesView from '../common/attributes/EditAttributesView'; +import SelectField from '../common/components/SelectField'; +import deviceCategories from '../common/util/deviceCategories'; +import LinkField from '../common/components/LinkField'; +import { prefixString } from '../common/util/stringUtils'; +import { useTranslation } from '../common/components/LocalizationProvider'; +import useDeviceAttributes from '../common/attributes/useDeviceAttributes'; +import { useAdministrator } from '../common/util/permissions'; + +const useStyles = makeStyles(() => ({ + details: { + flexDirection: 'column', + }, +})); + +const DevicePage = () => { + const classes = useStyles(); + const t = useTranslation(); + + const admin = useAdministrator(); + + const deviceAttributes = useDeviceAttributes(t); + + const [item, setItem] = useState(); + + const validate = () => item && item.name && item.uniqueId; + + return ( + <EditItemView endpoint="devices" item={item} setItem={setItem} validate={validate}> + {item && ( + <> + <Accordion defaultExpanded> + <AccordionSummary expandIcon={<ExpandMoreIcon />}> + <Typography variant="subtitle1"> + {t('sharedRequired')} + </Typography> + </AccordionSummary> + <AccordionDetails className={classes.details}> + <TextField + margin="normal" + value={item.name || ''} + onChange={(event) => setItem({ ...item, name: event.target.value })} + label={t('sharedName')} + variant="filled" + /> + <TextField + margin="normal" + value={item.uniqueId || ''} + onChange={(event) => setItem({ ...item, uniqueId: event.target.value })} + label={t('deviceIdentifier')} + variant="filled" + /> + </AccordionDetails> + </Accordion> + <Accordion> + <AccordionSummary expandIcon={<ExpandMoreIcon />}> + <Typography variant="subtitle1"> + {t('sharedExtra')} + </Typography> + </AccordionSummary> + <AccordionDetails className={classes.details}> + <SelectField + margin="normal" + value={item.groupId || 0} + onChange={(event) => setItem({ ...item, groupId: Number(event.target.value) })} + endpoint="/api/groups" + label={t('groupParent')} + variant="filled" + /> + <TextField + margin="normal" + value={item.phone || ''} + onChange={(event) => setItem({ ...item, phone: event.target.value })} + label={t('sharedPhone')} + variant="filled" + /> + <TextField + margin="normal" + value={item.model || ''} + onChange={(event) => setItem({ ...item, model: event.target.value })} + label={t('deviceModel')} + variant="filled" + /> + <TextField + margin="normal" + value={item.contact || ''} + onChange={(event) => setItem({ ...item, contact: event.target.value })} + label={t('deviceContact')} + variant="filled" + /> + <SelectField + margin="normal" + value={item.category || 'default'} + emptyValue={null} + onChange={(event) => setItem({ ...item, category: event.target.value })} + data={deviceCategories.map((category) => ({ + id: category, + name: t(`category${category.replace(/^\w/, (c) => c.toUpperCase())}`), + }))} + label={t('deviceCategory')} + variant="filled" + /> + {admin && ( + <FormControlLabel + control={<Checkbox checked={item.disabled} onChange={(event) => setItem({ ...item, disabled: event.target.checked })} />} + label={t('sharedDisabled')} + /> + )} + </AccordionDetails> + </Accordion> + <Accordion> + <AccordionSummary expandIcon={<ExpandMoreIcon />}> + <Typography variant="subtitle1"> + {t('sharedAttributes')} + </Typography> + </AccordionSummary> + <AccordionDetails className={classes.details}> + <EditAttributesView + attributes={item.attributes} + setAttributes={(attributes) => setItem({ ...item, attributes })} + definitions={deviceAttributes} + /> + </AccordionDetails> + </Accordion> + {item.id && ( + <Accordion> + <AccordionSummary expandIcon={<ExpandMoreIcon />}> + <Typography variant="subtitle1"> + {t('sharedConnections')} + </Typography> + </AccordionSummary> + <AccordionDetails className={classes.details}> + <LinkField + margin="normal" + endpointAll="/api/geofences" + endpointLinked={`/api/geofences?deviceId=${item.id}`} + baseId={item.id} + keyBase="deviceId" + keyLink="geofenceId" + label={t('sharedGeofences')} + variant="filled" + /> + <LinkField + margin="normal" + endpointAll="/api/notifications" + endpointLinked={`/api/notifications?deviceId=${item.id}`} + baseId={item.id} + keyBase="deviceId" + keyLink="notificationId" + titleGetter={(it) => t(prefixString('event', it.type))} + label={t('sharedNotifications')} + variant="filled" + /> + <LinkField + margin="normal" + endpointAll="/api/drivers" + endpointLinked={`/api/drivers?deviceId=${item.id}`} + baseId={item.id} + keyBase="deviceId" + keyLink="driverId" + label={t('sharedDrivers')} + variant="filled" + /> + <LinkField + margin="normal" + endpointAll="/api/attributes/computed" + endpointLinked={`/api/attributes/computed?deviceId=${item.id}`} + baseId={item.id} + keyBase="deviceId" + keyLink="attributeId" + titleGetter={(it) => it.description} + label={t('sharedComputedAttributes')} + variant="filled" + /> + <LinkField + margin="normal" + endpointAll="/api/maintenance" + endpointLinked={`/api/maintenance?deviceId=${item.id}`} + baseId={item.id} + keyBase="deviceId" + keyLink="maintenanceId" + label={t('sharedMaintenance')} + variant="filled" + /> + </AccordionDetails> + </Accordion> + )} + </> + )} + </EditItemView> + ); +}; + +export default DevicePage; diff --git a/modern/src/settings/DriverPage.js b/modern/src/settings/DriverPage.js index ff703916..06b290fc 100644 --- a/modern/src/settings/DriverPage.js +++ b/modern/src/settings/DriverPage.js @@ -4,9 +4,9 @@ import { Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, } from '@material-ui/core'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; -import EditItemView from '../EditItemView'; -import EditAttributesView from '../attributes/EditAttributesView'; -import { useTranslation } from '../LocalizationProvider'; +import EditItemView from './components/EditItemView'; +import EditAttributesView from '../common/attributes/EditAttributesView'; +import { useTranslation } from '../common/components/LocalizationProvider'; const useStyles = makeStyles(() => ({ details: { diff --git a/modern/src/settings/DriversPage.js b/modern/src/settings/DriversPage.js index 5fb93a99..5b01bdfa 100644 --- a/modern/src/settings/DriversPage.js +++ b/modern/src/settings/DriversPage.js @@ -4,9 +4,9 @@ import { } from '@material-ui/core'; import MoreVertIcon from '@material-ui/icons/MoreVert'; import { useEffectAsync } from '../reactHelper'; -import EditCollectionView from '../EditCollectionView'; -import OptionsLayout from './OptionsLayout'; -import { useTranslation } from '../LocalizationProvider'; +import EditCollectionView from './components/EditCollectionView'; +import OptionsLayout from './components/OptionsLayout'; +import { useTranslation } from '../common/components/LocalizationProvider'; const useStyles = makeStyles((theme) => ({ columnAction: { diff --git a/modern/src/settings/GeofencePage.js b/modern/src/settings/GeofencePage.js new file mode 100644 index 00000000..27259ed2 --- /dev/null +++ b/modern/src/settings/GeofencePage.js @@ -0,0 +1,69 @@ +import React, { useState } from 'react'; +import TextField from '@material-ui/core/TextField'; + +import { + Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, +} from '@material-ui/core'; +import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; +import EditItemView from './components/EditItemView'; +import EditAttributesView from '../common/attributes/EditAttributesView'; +import { useTranslation } from '../common/components/LocalizationProvider'; +import useGeofenceAttributes from '../common/attributes/useGeofenceAttributes'; + +const useStyles = makeStyles(() => ({ + details: { + flexDirection: 'column', + }, +})); + +const GeofencePage = () => { + const classes = useStyles(); + const t = useTranslation(); + + const geofenceAttributes = useGeofenceAttributes(t); + + const [item, setItem] = useState(); + + const validate = () => item && item.name; + + return ( + <EditItemView endpoint="geofences" item={item} setItem={setItem} validate={validate}> + {item && ( + <> + <Accordion defaultExpanded> + <AccordionSummary expandIcon={<ExpandMoreIcon />}> + <Typography variant="subtitle1"> + {t('sharedRequired')} + </Typography> + </AccordionSummary> + <AccordionDetails className={classes.details}> + <TextField + margin="normal" + value={item.name || ''} + onChange={(event) => setItem({ ...item, name: event.target.value })} + label={t('sharedName')} + variant="filled" + /> + </AccordionDetails> + </Accordion> + <Accordion> + <AccordionSummary expandIcon={<ExpandMoreIcon />}> + <Typography variant="subtitle1"> + {t('sharedAttributes')} + </Typography> + </AccordionSummary> + <AccordionDetails className={classes.details}> + <EditAttributesView + attributes={item.attributes} + setAttributes={(attributes) => setItem({ ...item, attributes })} + definitions={geofenceAttributes} + /> + </AccordionDetails> + </Accordion> + </> + )} + </EditItemView> + ); +}; + +export default GeofencePage; diff --git a/modern/src/settings/GroupPage.js b/modern/src/settings/GroupPage.js index 3750fc0e..2864a961 100644 --- a/modern/src/settings/GroupPage.js +++ b/modern/src/settings/GroupPage.js @@ -5,11 +5,11 @@ import { Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, } from '@material-ui/core'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; -import EditItemView from '../EditItemView'; -import EditAttributesView from '../attributes/EditAttributesView'; -import useDeviceAttributes from '../attributes/useDeviceAttributes'; -import SelectField from '../form/SelectField'; -import { useTranslation } from '../LocalizationProvider'; +import EditItemView from './components/EditItemView'; +import EditAttributesView from '../common/attributes/EditAttributesView'; +import useDeviceAttributes from '../common/attributes/useDeviceAttributes'; +import SelectField from '../common/components/SelectField'; +import { useTranslation } from '../common/components/LocalizationProvider'; const useStyles = makeStyles(() => ({ details: { diff --git a/modern/src/settings/GroupsPage.js b/modern/src/settings/GroupsPage.js index 8ae5a33f..3642c02f 100644 --- a/modern/src/settings/GroupsPage.js +++ b/modern/src/settings/GroupsPage.js @@ -4,9 +4,9 @@ import { } from '@material-ui/core'; import MoreVertIcon from '@material-ui/icons/MoreVert'; import { useEffectAsync } from '../reactHelper'; -import EditCollectionView from '../EditCollectionView'; -import OptionsLayout from './OptionsLayout'; -import { useTranslation } from '../LocalizationProvider'; +import EditCollectionView from './components/EditCollectionView'; +import OptionsLayout from './components/OptionsLayout'; +import { useTranslation } from '../common/components/LocalizationProvider'; const useStyles = makeStyles((theme) => ({ columnAction: { diff --git a/modern/src/settings/MaintenancePage.js b/modern/src/settings/MaintenancePage.js index 7f539ddf..3d32a0b4 100644 --- a/modern/src/settings/MaintenancePage.js +++ b/modern/src/settings/MaintenancePage.js @@ -5,14 +5,14 @@ import { import InputAdornment from '@material-ui/core/InputAdornment'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; import { prefixString } from '../common/util/stringUtils'; -import EditItemView from '../EditItemView'; -import EditAttributesView from '../attributes/EditAttributesView'; +import EditItemView from './components/EditItemView'; +import EditAttributesView from '../common/attributes/EditAttributesView'; import { useAttributePreference } from '../common/util/preferences'; import { speedFromKnots, speedToKnots, distanceFromMeters, distanceToMeters, } from '../common/util/converter'; -import { useTranslation } from '../LocalizationProvider'; -import usePositionAttributes from '../attributes/usePositionAttributes'; +import { useTranslation } from '../common/components/LocalizationProvider'; +import usePositionAttributes from '../common/attributes/usePositionAttributes'; const useStyles = makeStyles(() => ({ details: { diff --git a/modern/src/settings/MaintenancesPage.js b/modern/src/settings/MaintenancesPage.js index a5ef530e..038e5dff 100644 --- a/modern/src/settings/MaintenancesPage.js +++ b/modern/src/settings/MaintenancesPage.js @@ -4,13 +4,13 @@ import { } from '@material-ui/core'; import MoreVertIcon from '@material-ui/icons/MoreVert'; import { useEffectAsync } from '../reactHelper'; -import EditCollectionView from '../EditCollectionView'; +import EditCollectionView from './components/EditCollectionView'; -import usePositionAttributes from '../attributes/usePositionAttributes'; +import usePositionAttributes from '../common/attributes/usePositionAttributes'; import { formatDistance, formatSpeed } from '../common/util/formatter'; import { useAttributePreference } from '../common/util/preferences'; -import OptionsLayout from './OptionsLayout'; -import { useTranslation } from '../LocalizationProvider'; +import OptionsLayout from './components/OptionsLayout'; +import { useTranslation } from '../common/components/LocalizationProvider'; const useStyles = makeStyles((theme) => ({ columnAction: { diff --git a/modern/src/settings/NotificationPage.js b/modern/src/settings/NotificationPage.js index 3daa4e51..ed0b3e5e 100644 --- a/modern/src/settings/NotificationPage.js +++ b/modern/src/settings/NotificationPage.js @@ -4,10 +4,10 @@ import { Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, FormControlLabel, Checkbox, } from '@material-ui/core'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; -import { useTranslation, useTranslationKeys } from '../LocalizationProvider'; -import EditItemView from '../EditItemView'; +import { useTranslation, useTranslationKeys } from '../common/components/LocalizationProvider'; +import EditItemView from './components/EditItemView'; import { prefixString, unprefixString } from '../common/util/stringUtils'; -import SelectField from '../form/SelectField'; +import SelectField from '../common/components/SelectField'; const useStyles = makeStyles(() => ({ details: { diff --git a/modern/src/settings/NotificationsPage.js b/modern/src/settings/NotificationsPage.js index 9bc553d6..d96bc3da 100644 --- a/modern/src/settings/NotificationsPage.js +++ b/modern/src/settings/NotificationsPage.js @@ -4,11 +4,11 @@ import { } from '@material-ui/core'; import MoreVertIcon from '@material-ui/icons/MoreVert'; import { useEffectAsync } from '../reactHelper'; -import EditCollectionView from '../EditCollectionView'; +import EditCollectionView from './components/EditCollectionView'; import { prefixString } from '../common/util/stringUtils'; import { formatBoolean } from '../common/util/formatter'; -import OptionsLayout from './OptionsLayout'; -import { useTranslation } from '../LocalizationProvider'; +import OptionsLayout from './components/OptionsLayout'; +import { useTranslation } from '../common/components/LocalizationProvider'; const useStyles = makeStyles((theme) => ({ columnAction: { diff --git a/modern/src/settings/PreferencesPage.js b/modern/src/settings/PreferencesPage.js index bd03f8d2..8b259bf2 100644 --- a/modern/src/settings/PreferencesPage.js +++ b/modern/src/settings/PreferencesPage.js @@ -3,8 +3,8 @@ import { Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, Container, FormControl, InputLabel, Select, MenuItem, Checkbox, FormControlLabel, } from '@material-ui/core'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; -import { useLocalization, useTranslation } from '../LocalizationProvider'; -import OptionsLayout from './OptionsLayout'; +import { useLocalization, useTranslation } from '../common/components/LocalizationProvider'; +import OptionsLayout from './components/OptionsLayout'; import usePersistedState from '../common/util/usePersistedState'; const useStyles = makeStyles((theme) => ({ diff --git a/modern/src/settings/ServerPage.js b/modern/src/settings/ServerPage.js new file mode 100644 index 00000000..e7026bb4 --- /dev/null +++ b/modern/src/settings/ServerPage.js @@ -0,0 +1,241 @@ +import React, { useState } from 'react'; +import TextField from '@material-ui/core/TextField'; + +import { + Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, Button, FormControl, Container, Checkbox, FormControlLabel, InputLabel, Select, MenuItem, +} from '@material-ui/core'; +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 useDeviceAttributes from '../common/attributes/useDeviceAttributes'; +import useUserAttributes from '../common/attributes/useUserAttributes'; +import OptionsLayout from './components/OptionsLayout'; +import { useTranslation } from '../common/components/LocalizationProvider'; +import SelectField from '../common/components/SelectField'; + +const useStyles = makeStyles((theme) => ({ + container: { + marginTop: theme.spacing(2), + }, + buttons: { + display: 'flex', + justifyContent: 'space-evenly', + '& > *': { + flexBasis: '33%', + }, + }, + details: { + flexDirection: 'column', + }, +})); + +const ServerPage = () => { + const classes = useStyles(); + const history = useHistory(); + const dispatch = useDispatch(); + const t = useTranslation(); + + const userAttributes = useUserAttributes(t); + const deviceAttributes = useDeviceAttributes(t); + + const original = useSelector((state) => state.session.server); + const [item, setItem] = useState({ ...original }); + + const handleSave = async () => { + const response = await fetch('/api/server', { + method: 'PUT', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify(item), + }); + + if (response.ok) { + dispatch(sessionActions.updateServer(await response.json())); + history.goBack(); + } + }; + + return ( + <OptionsLayout> + <Container maxWidth="xs" className={classes.container}> + {item && ( + <> + <Accordion defaultExpanded> + <AccordionSummary expandIcon={<ExpandMoreIcon />}> + <Typography variant="subtitle1"> + {t('sharedPreferences')} + </Typography> + </AccordionSummary> + <AccordionDetails className={classes.details}> + <TextField + margin="normal" + value={item.mapUrl || ''} + onChange={(event) => setItem({ ...item, mapUrl: event.target.value })} + label={t('mapCustomLabel')} + variant="filled" + /> + <TextField + margin="normal" + type="number" + value={item.latitude || 0} + onChange={(event) => setItem({ ...item, latitude: Number(event.target.value) })} + label={t('positionLatitude')} + variant="filled" + /> + <TextField + margin="normal" + type="number" + value={item.longitude || 0} + onChange={(event) => setItem({ ...item, longitude: Number(event.target.value) })} + label={t('positionLongitude')} + variant="filled" + /> + <TextField + margin="normal" + type="number" + value={item.zoom || 0} + onChange={(event) => setItem({ ...item, zoom: Number(event.target.value) })} + label={t('serverZoom')} + variant="filled" + /> + <FormControl variant="filled" margin="normal" fullWidth> + <InputLabel>{t('settingsCoordinateFormat')}</InputLabel> + <Select + value={item.coordinateFormat || 'dd'} + onChange={(event) => setItem({ ...item, coordinateFormat: event.target.value })} + > + <MenuItem value="dd">{t('sharedDecimalDegrees')}</MenuItem> + <MenuItem value="ddm">{t('sharedDegreesDecimalMinutes')}</MenuItem> + <MenuItem value="dms">{t('sharedDegreesMinutesSeconds')}</MenuItem> + </Select> + </FormControl> + <FormControl variant="filled" margin="normal" fullWidth> + <InputLabel>{t('settingsSpeedUnit')}</InputLabel> + <Select + value={item.attributes.speedUnit || 'kn'} + onChange={(e) => setItem({ ...item, attributes: { ...item.attributes, speedUnit: e.target.value } })} + > + <MenuItem value="kn">{t('sharedKn')}</MenuItem> + <MenuItem value="kmh">{t('sharedKmh')}</MenuItem> + <MenuItem value="mph">{t('sharedMph')}</MenuItem> + </Select> + </FormControl> + <FormControl variant="filled" margin="normal" fullWidth> + <InputLabel>{t('settingsDistanceUnit')}</InputLabel> + <Select + value={item.attributes.distanceUnit || 'km'} + onChange={(e) => setItem({ ...item, attributes: { ...item.attributes, distanceUnit: e.target.value } })} + > + <MenuItem value="km">{t('sharedKm')}</MenuItem> + <MenuItem value="mi">{t('sharedMi')}</MenuItem> + <MenuItem value="nmi">{t('sharedNmi')}</MenuItem> + </Select> + </FormControl> + <FormControl variant="filled" margin="normal" fullWidth> + <InputLabel>{t('settingsVolumeUnit')}</InputLabel> + <Select + value={item.attributes.volumeUnit || 'ltr'} + onChange={(e) => setItem({ ...item, attributes: { ...item.attributes, volumeUnit: e.target.value } })} + > + <MenuItem value="ltr">{t('sharedLiter')}</MenuItem> + <MenuItem value="usGal">{t('sharedUsGallon')}</MenuItem> + <MenuItem value="impGal">{t('sharedImpGallon')}</MenuItem> + </Select> + </FormControl> + <SelectField + margin="normal" + value={item.attributes.timezone || ''} + emptyValue="" + onChange={(e) => setItem({ ...item, attributes: { ...item.attributes, timezone: e.target.value } })} + endpoint="/api/server/timezones" + keyGetter={(it) => it} + titleGetter={(it) => it} + label={t('sharedTimezone')} + variant="filled" + /> + <TextField + margin="normal" + value={item.poiLayer || ''} + onChange={(event) => setItem({ ...item, poiLayer: event.target.value })} + label={t('mapPoiLayer')} + variant="filled" + /> + <TextField + margin="normal" + value={item.announcement || ''} + onChange={(event) => setItem({ ...item, announcement: event.target.value })} + label={t('serverAnnouncement')} + variant="filled" + /> + <FormControlLabel + control={<Checkbox checked={item.twelveHourFormat} onChange={(event) => setItem({ ...item, twelveHourFormat: event.target.checked })} />} + label={t('settingsTwelveHourFormat')} + /> + <FormControlLabel + control={<Checkbox checked={item.forceSettings} onChange={(event) => setItem({ ...item, forceSettings: event.target.checked })} />} + label={t('serverForceSettings')} + /> + </AccordionDetails> + </Accordion> + <Accordion> + <AccordionSummary expandIcon={<ExpandMoreIcon />}> + <Typography variant="subtitle1"> + {t('sharedPermissions')} + </Typography> + </AccordionSummary> + <AccordionDetails className={classes.details}> + <FormControlLabel + control={<Checkbox checked={item.registration} onChange={(event) => setItem({ ...item, registration: event.target.checked })} />} + label={t('serverRegistration')} + /> + <FormControlLabel + control={<Checkbox checked={item.readonly} onChange={(event) => setItem({ ...item, readonly: event.target.checked })} />} + label={t('serverReadonly')} + /> + <FormControlLabel + control={<Checkbox checked={item.deviceReadonly} onChange={(event) => setItem({ ...item, deviceReadonly: event.target.checked })} />} + label={t('userDeviceReadonly')} + /> + <FormControlLabel + control={<Checkbox checked={item.limitCommands} onChange={(event) => setItem({ ...item, limitCommands: event.target.checked })} />} + label={t('userLimitCommands')} + /> + <FormControlLabel + control={<Checkbox checked={item.disableReports} onChange={(event) => setItem({ ...item, disableReports: event.target.checked })} />} + label={t('userDisableReports')} + /> + </AccordionDetails> + </Accordion> + <Accordion> + <AccordionSummary expandIcon={<ExpandMoreIcon />}> + <Typography variant="subtitle1"> + {t('sharedAttributes')} + </Typography> + </AccordionSummary> + <AccordionDetails className={classes.details}> + <EditAttributesView + attributes={item.attributes} + setAttributes={(attributes) => setItem({ ...item, attributes })} + definitions={{ ...userAttributes, ...deviceAttributes }} + /> + </AccordionDetails> + </Accordion> + </> + )} + <FormControl fullWidth margin="normal"> + <div className={classes.buttons}> + <Button type="button" color="primary" variant="outlined" onClick={() => history.goBack()}> + {t('sharedCancel')} + </Button> + <Button type="button" color="primary" variant="contained" onClick={handleSave}> + {t('sharedSave')} + </Button> + </div> + </FormControl> + </Container> + </OptionsLayout> + ); +}; + +export default ServerPage; diff --git a/modern/src/settings/UserPage.js b/modern/src/settings/UserPage.js new file mode 100644 index 00000000..abb12edf --- /dev/null +++ b/modern/src/settings/UserPage.js @@ -0,0 +1,194 @@ +import React, { useState } from 'react'; +import TextField from '@material-ui/core/TextField'; + +import { + Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, FormControl, InputLabel, Select, MenuItem, +} from '@material-ui/core'; +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 LinkField from '../common/components/LinkField'; +import { useTranslation } from '../common/components/LocalizationProvider'; +import useUserAttributes from '../common/attributes/useUserAttributes'; +import { sessionActions } from '../store'; +import SelectField from '../common/components/SelectField'; + +const useStyles = makeStyles(() => ({ + details: { + flexDirection: 'column', + }, +})); + +const UserPage = () => { + const classes = useStyles(); + const dispatch = useDispatch(); + const t = useTranslation(); + + const currentUserId = useSelector((state) => state.session.user.id); + + const userAttributes = useUserAttributes(t); + + const [item, setItem] = useState(); + + const onItemSaved = (result) => { + if (result.id === currentUserId) { + dispatch(sessionActions.updateUser(result)); + } + }; + + const validate = () => item && item.name && item.email && (item.id || item.password); + + return ( + <EditItemView endpoint="users" item={item} setItem={setItem} validate={validate} onItemSaved={onItemSaved}> + {item && ( + <> + <Accordion defaultExpanded> + <AccordionSummary expandIcon={<ExpandMoreIcon />}> + <Typography variant="subtitle1"> + {t('sharedRequired')} + </Typography> + </AccordionSummary> + <AccordionDetails className={classes.details}> + <TextField + margin="normal" + value={item.name || ''} + onChange={(event) => setItem({ ...item, name: event.target.value })} + label={t('sharedName')} + variant="filled" + /> + <TextField + margin="normal" + value={item.email || ''} + onChange={(event) => setItem({ ...item, email: event.target.value })} + label={t('userEmail')} + variant="filled" + /> + <TextField + margin="normal" + type="password" + onChange={(event) => setItem({ ...item, password: event.target.value })} + label={t('userPassword')} + variant="filled" + /> + </AccordionDetails> + </Accordion> + <Accordion> + <AccordionSummary expandIcon={<ExpandMoreIcon />}> + <Typography variant="subtitle1"> + {t('sharedPreferences')} + </Typography> + </AccordionSummary> + <AccordionDetails className={classes.details}> + <TextField + margin="normal" + value={item.phone || ''} + onChange={(event) => setItem({ ...item, phone: event.target.value })} + label={t('sharedPhone')} + variant="filled" + /> + <FormControl variant="filled" margin="normal" fullWidth> + <InputLabel>{t('settingsSpeedUnit')}</InputLabel> + <Select + value={item.attributes.speedUnit || 'kn'} + onChange={(e) => setItem({ ...item, attributes: { ...item.attributes, speedUnit: e.target.value } })} + > + <MenuItem value="kn">{t('sharedKn')}</MenuItem> + <MenuItem value="kmh">{t('sharedKmh')}</MenuItem> + <MenuItem value="mph">{t('sharedMph')}</MenuItem> + </Select> + </FormControl> + <FormControl variant="filled" margin="normal" fullWidth> + <InputLabel>{t('settingsDistanceUnit')}</InputLabel> + <Select + value={item.attributes.distanceUnit || 'km'} + onChange={(e) => setItem({ ...item, attributes: { ...item.attributes, distanceUnit: e.target.value } })} + > + <MenuItem value="km">{t('sharedKm')}</MenuItem> + <MenuItem value="mi">{t('sharedMi')}</MenuItem> + <MenuItem value="nmi">{t('sharedNmi')}</MenuItem> + </Select> + </FormControl> + <FormControl variant="filled" margin="normal" fullWidth> + <InputLabel>{t('settingsVolumeUnit')}</InputLabel> + <Select + value={item.attributes.volumeUnit || 'ltr'} + onChange={(e) => setItem({ ...item, attributes: { ...item.attributes, volumeUnit: e.target.value } })} + > + <MenuItem value="ltr">{t('sharedLiter')}</MenuItem> + <MenuItem value="usGal">{t('sharedUsGallon')}</MenuItem> + <MenuItem value="impGal">{t('sharedImpGallon')}</MenuItem> + </Select> + </FormControl> + <SelectField + margin="normal" + value={item.attributes.timezone || ''} + emptyValue="" + onChange={(e) => setItem({ ...item, attributes: { ...item.attributes, timezone: e.target.value } })} + endpoint="/api/server/timezones" + keyGetter={(it) => it} + titleGetter={(it) => it} + label={t('sharedTimezone')} + variant="filled" + /> + <TextField + margin="normal" + value={item.poiLayer || ''} + onChange={(event) => setItem({ ...item, poiLayer: event.target.value })} + label={t('mapPoiLayer')} + variant="filled" + /> + </AccordionDetails> + </Accordion> + <Accordion> + <AccordionSummary expandIcon={<ExpandMoreIcon />}> + <Typography variant="subtitle1"> + {t('sharedAttributes')} + </Typography> + </AccordionSummary> + <AccordionDetails className={classes.details}> + <EditAttributesView + attributes={item.attributes} + setAttributes={(attributes) => setItem({ ...item, attributes })} + definitions={userAttributes} + /> + </AccordionDetails> + </Accordion> + {item.id && ( + <Accordion> + <AccordionSummary expandIcon={<ExpandMoreIcon />}> + <Typography variant="subtitle1"> + {t('sharedConnections')} + </Typography> + </AccordionSummary> + <AccordionDetails className={classes.details}> + <LinkField + margin="normal" + endpointAll="/api/devices?all=true" + endpointLinked={`/api/devices?userId=${item.id}`} + baseId={item.id} + keyBase="userId" + keyLink="deviceId" + label={t('deviceTitle')} + variant="filled" + /> + <LinkField + margin="normal" + endpointAll="/api/groups?all=true" + endpointLinked={`/api/groups?userId=${item.id}`} + baseId={item.id} + keyBase="userId" + keyLink="groupId" + label={t('settingsGroups')} + variant="filled" + /> + </AccordionDetails> + </Accordion> + )} + </> + )} + </EditItemView> + ); +}; + +export default UserPage; diff --git a/modern/src/settings/UsersPage.js b/modern/src/settings/UsersPage.js new file mode 100644 index 00000000..07c859d5 --- /dev/null +++ b/modern/src/settings/UsersPage.js @@ -0,0 +1,70 @@ +import React, { useState } from 'react'; +import { + TableContainer, Table, TableRow, TableCell, TableHead, TableBody, makeStyles, IconButton, +} from '@material-ui/core'; +import MoreVertIcon from '@material-ui/icons/MoreVert'; +import { useEffectAsync } from '../reactHelper'; +import EditCollectionView from './components/EditCollectionView'; +import { formatBoolean } from '../common/util/formatter'; +import OptionsLayout from './components/OptionsLayout'; +import { useTranslation } from '../common/components/LocalizationProvider'; + +const useStyles = makeStyles((theme) => ({ + columnAction: { + width: theme.spacing(1), + padding: theme.spacing(0, 1), + }, +})); + +const UsersView = ({ updateTimestamp, onMenuClick }) => { + const classes = useStyles(); + const t = useTranslation(); + + const [items, setItems] = useState([]); + + useEffectAsync(async () => { + const response = await fetch('/api/users'); + if (response.ok) { + setItems(await response.json()); + } + }, [updateTimestamp]); + + return ( + <TableContainer> + <Table> + <TableHead> + <TableRow> + <TableCell className={classes.columnAction} /> + <TableCell>{t('sharedName')}</TableCell> + <TableCell>{t('userEmail')}</TableCell> + <TableCell>{t('userAdmin')}</TableCell> + <TableCell>{t('sharedDisabled')}</TableCell> + </TableRow> + </TableHead> + <TableBody> + {items.map((item) => ( + <TableRow key={item.id}> + <TableCell className={classes.columnAction} padding="none"> + <IconButton size="small" onClick={(event) => onMenuClick(event.currentTarget, item.id)}> + <MoreVertIcon /> + </IconButton> + </TableCell> + <TableCell>{item.name}</TableCell> + <TableCell>{item.email}</TableCell> + <TableCell>{formatBoolean(item.administrator, t)}</TableCell> + <TableCell>{formatBoolean(item.disabled, t)}</TableCell> + </TableRow> + ))} + </TableBody> + </Table> + </TableContainer> + ); +}; + +const UsersPage = () => ( + <OptionsLayout> + <EditCollectionView content={UsersView} editPath="/user" endpoint="users" /> + </OptionsLayout> +); + +export default UsersPage; diff --git a/modern/src/settings/BaseCommandView.js b/modern/src/settings/components/BaseCommandView.js index 03605d0f..b422e153 100644 --- a/modern/src/settings/BaseCommandView.js +++ b/modern/src/settings/components/BaseCommandView.js @@ -2,10 +2,10 @@ import React, { useEffect, useState } from 'react'; import { TextField, FormControlLabel, Checkbox, } from '@material-ui/core'; -import { useTranslation } from '../LocalizationProvider'; -import SelectField from '../form/SelectField'; -import { prefixString } from '../common/util/stringUtils'; -import useCommandAttributes from '../attributes/useCommandAttributes'; +import { useTranslation } from '../../common/components/LocalizationProvider'; +import SelectField from '../../common/components/SelectField'; +import { prefixString } from '../../common/util/stringUtils'; +import useCommandAttributes from '../../common/attributes/useCommandAttributes'; const BaseCommandView = ({ item, setItem }) => { const t = useTranslation(); diff --git a/modern/src/settings/components/EditCollectionView.js b/modern/src/settings/components/EditCollectionView.js new file mode 100644 index 00000000..9107b68e --- /dev/null +++ b/modern/src/settings/components/EditCollectionView.js @@ -0,0 +1,87 @@ +import React, { useState } from 'react'; +import { makeStyles } from '@material-ui/core/styles'; +import { useHistory } from 'react-router-dom'; +import Menu from '@material-ui/core/Menu'; +import MenuItem from '@material-ui/core/MenuItem'; +import Fab from '@material-ui/core/Fab'; +import AddIcon from '@material-ui/icons/Add'; + +import RemoveDialog from '../../common/components/RemoveDialog'; +import { useTranslation } from '../../common/components/LocalizationProvider'; +import dimensions from '../../common/theme/dimensions'; +import { useEditable } from '../../common/util/permissions'; + +const useStyles = makeStyles((theme) => ({ + fab: { + position: 'fixed', + bottom: theme.spacing(2), + right: theme.spacing(2), + [theme.breakpoints.down('sm')]: { + bottom: dimensions.bottomBarHeight + theme.spacing(2), + }, + }, +})); + +const EditCollectionView = ({ + content, editPath, endpoint, disableAdd, filter, +}) => { + const classes = useStyles(); + const history = useHistory(); + const t = useTranslation(); + + const editable = useEditable(); + + const [selectedId, setSelectedId] = useState(null); + const [selectedAnchorEl, setSelectedAnchorEl] = useState(null); + const [removeDialogShown, setRemoveDialogShown] = useState(false); + const [updateTimestamp, setUpdateTimestamp] = useState(Date.now()); + + const menuShow = (anchorId, itemId) => { + setSelectedAnchorEl(anchorId); + setSelectedId(itemId); + }; + + const menuHide = () => { + setSelectedAnchorEl(null); + }; + + const handleAdd = () => { + history.push(editPath); + menuHide(); + }; + + const handleEdit = () => { + history.push(`${editPath}/${selectedId}`); + menuHide(); + }; + + const handleRemove = () => { + setRemoveDialogShown(true); + menuHide(); + }; + + const handleRemoveResult = () => { + setRemoveDialogShown(false); + setUpdateTimestamp(Date.now()); + }; + + const Content = content; + + return ( + <> + <Content updateTimestamp={updateTimestamp} onMenuClick={menuShow} filter={filter} /> + {editable && !disableAdd && ( + <Fab size="medium" color="primary" className={classes.fab} onClick={handleAdd}> + <AddIcon /> + </Fab> + )} + <Menu open={!!selectedAnchorEl} anchorEl={selectedAnchorEl} onClose={menuHide}> + <MenuItem onClick={handleEdit}>{t('sharedEdit')}</MenuItem> + <MenuItem onClick={handleRemove}>{t('sharedRemove')}</MenuItem> + </Menu> + <RemoveDialog open={removeDialogShown} endpoint={endpoint} itemId={selectedId} onResult={handleRemoveResult} /> + </> + ); +}; + +export default EditCollectionView; diff --git a/modern/src/settings/components/EditItemView.js b/modern/src/settings/components/EditItemView.js new file mode 100644 index 00000000..90e5294a --- /dev/null +++ b/modern/src/settings/components/EditItemView.js @@ -0,0 +1,95 @@ +import React from 'react'; +import { useHistory, useParams } from 'react-router-dom'; +import { makeStyles } from '@material-ui/core/styles'; +import Container from '@material-ui/core/Container'; +import Button from '@material-ui/core/Button'; +import FormControl from '@material-ui/core/FormControl'; + +import { useEffectAsync } from '../../reactHelper'; +import OptionsLayout from './OptionsLayout'; +import { useTranslation } from '../../common/components/LocalizationProvider'; + +const useStyles = makeStyles((theme) => ({ + container: { + marginTop: theme.spacing(2), + }, + buttons: { + display: 'flex', + justifyContent: 'space-evenly', + '& > *': { + flexBasis: '33%', + }, + }, +})); + +const EditItemView = ({ + children, endpoint, item, setItem, validate, onItemSaved, +}) => { + const history = useHistory(); + const classes = useStyles(); + const t = useTranslation(); + + const { id } = useParams(); + + useEffectAsync(async () => { + if (id) { + const response = await fetch(`/api/${endpoint}/${id}`); + if (response.ok) { + setItem(await response.json()); + } + } else { + setItem({}); + } + }, [id]); + + const handleSave = async () => { + let url = `/api/${endpoint}`; + if (id) { + url += `/${id}`; + } + + const response = await fetch(url, { + method: !id ? 'POST' : 'PUT', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify(item), + }); + + if (response.ok) { + if (onItemSaved) { + onItemSaved(await response.json()); + } + history.goBack(); + } + }; + + return ( + <OptionsLayout> + <Container maxWidth="xs" className={classes.container}> + {children} + <FormControl fullWidth margin="normal"> + <div className={classes.buttons}> + <Button + type="button" + color="primary" + variant="outlined" + onClick={() => history.goBack()} + > + {t('sharedCancel')} + </Button> + <Button + type="button" + color="primary" + variant="contained" + onClick={handleSave} + disabled={!validate()} + > + {t('sharedSave')} + </Button> + </div> + </FormControl> + </Container> + </OptionsLayout> + ); +}; + +export default EditItemView; diff --git a/modern/src/settings/OptionsLayout.js b/modern/src/settings/components/OptionsLayout.js index b427d0c0..9f2a1aac 100644 --- a/modern/src/settings/OptionsLayout.js +++ b/modern/src/settings/components/OptionsLayout.js @@ -23,10 +23,10 @@ import BarChartIcon from '@material-ui/icons/BarChart'; import TodayIcon from '@material-ui/icons/Today'; import ExitToAppIcon from '@material-ui/icons/ExitToApp'; -import SideNav from '../common/components/SideNav'; -import NavBar from '../common/components/NavBar'; -import { useTranslation } from '../LocalizationProvider'; -import { useAdministrator, useReadonly } from '../common/util/permissions'; +import SideNav from '../../common/components/SideNav'; +import NavBar from '../../common/components/NavBar'; +import { useTranslation } from '../../common/components/LocalizationProvider'; +import { useAdministrator, useReadonly } from '../../common/util/permissions'; const useStyles = makeStyles((theme) => ({ root: { |