aboutsummaryrefslogtreecommitdiff
path: root/modern
diff options
context:
space:
mode:
Diffstat (limited to 'modern')
-rw-r--r--modern/src/DevicePage.js54
-rw-r--r--modern/src/form/SelectField.js33
-rw-r--r--modern/src/settings/NotificationPage.js85
3 files changed, 73 insertions, 99 deletions
diff --git a/modern/src/DevicePage.js b/modern/src/DevicePage.js
index 45eba3fa..d4b83e6e 100644
--- a/modern/src/DevicePage.js
+++ b/modern/src/DevicePage.js
@@ -3,11 +3,11 @@ import TextField from '@material-ui/core/TextField';
import t from './common/localization';
import EditItemView from './EditItemView';
-import { Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, FormControl, InputLabel, Select, FormControlLabel, Checkbox } from '@material-ui/core';
+import { Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, FormControlLabel, Checkbox } from '@material-ui/core';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import { useEffectAsync } from './reactHelper';
import EditAttributesView from './attributes/EditAttributesView';
import deviceAttributes from './attributes/deviceAttributes';
+import SelectField from './form/SelectField';
const useStyles = makeStyles(() => ({
details: {
@@ -43,14 +43,6 @@ const DevicePage = () => {
const classes = useStyles();
const [item, setItem] = useState();
- const [groups, setGroups] = useState();
-
- useEffectAsync(async () => {
- const response = await fetch('/api/groups');
- if (response.ok) {
- setGroups(await response.json());
- }
- }, []);
return (
<EditItemView endpoint="devices" item={item} setItem={setItem}>
@@ -84,20 +76,13 @@ const DevicePage = () => {
</Typography>
</AccordionSummary>
<AccordionDetails className={classes.details}>
- {groups &&
- <FormControl margin="normal" variant="filled">
- <InputLabel>{t('groupParent')}</InputLabel>
- <Select
- native
- defaultValue={item.groupId}
- onChange={event => setItem({...item, groupId: Number(event.target.value)})}>
- <option value={0}></option>
- {groups.map(group => (
- <option key={group.id} value={group.id}>{group.name}</option>
- ))}
- </Select>
- </FormControl>
- }
+ <SelectField
+ margin="normal"
+ defaultValue={item.groupId}
+ onChange={event => setItem({...item, groupId: Number(event.target.value)})}
+ endpoint="/api/groups"
+ label={t('groupParent')}
+ variant="filled" />
<TextField
margin="normal"
defaultValue={item.phone}
@@ -116,17 +101,16 @@ const DevicePage = () => {
onChange={event => setItem({...item, contact: event.target.value})}
label={t('deviceContact')}
variant="filled" />
- <FormControl margin="normal" variant="filled">
- <InputLabel>{t('deviceCategory')}</InputLabel>
- <Select
- native
- defaultValue={item.category}
- onChange={event => setItem({...item, category: event.target.value})}>
- {deviceCategories.map(category => (
- <option key={category} value={category}>{t(`category${category.replace(/^\w/, c => c.toUpperCase())}`)}</option>
- ))}
- </Select>
- </FormControl>
+ <SelectField
+ margin="normal"
+ defaultValue={item.category}
+ 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" />
<FormControlLabel
control={<Checkbox checked={item.disabled} onChange={event => setItem({...item, disabled: event.target.checked})} />}
label={t('sharedDisabled')} />
diff --git a/modern/src/form/SelectField.js b/modern/src/form/SelectField.js
index 78a16887..fa51a366 100644
--- a/modern/src/form/SelectField.js
+++ b/modern/src/form/SelectField.js
@@ -1,14 +1,27 @@
-import { FormControl, InputLabel, Select } from '@material-ui/core';
+import { FormControl, InputLabel, MenuItem, Select } from '@material-ui/core';
import React, { useState } from 'react';
import { useEffectAsync } from '../reactHelper';
-const SelectField = ({ margin, variant, label, defaultValue, onChange, endpoint }) => {
- const [items, setItems] = useState();
+const SelectField = ({
+ margin,
+ variant,
+ label,
+ multiple,
+ defaultValue,
+ onChange,
+ endpoint,
+ data,
+ keyGetter = item => item.id,
+ titleGetter = item => item.name,
+}) => {
+ const [items, setItems] = useState(data);
useEffectAsync(async () => {
- const response = await fetch(endpoint);
- if (response.ok) {
- setItems(await response.json());
+ if (endpoint) {
+ const response = await fetch(endpoint);
+ if (response.ok) {
+ setItems(await response.json());
+ }
}
}, []);
@@ -17,12 +30,14 @@ const SelectField = ({ margin, variant, label, defaultValue, onChange, endpoint
<FormControl margin={margin} variant={variant}>
<InputLabel>{label}</InputLabel>
<Select
- native
+ multiple={multiple}
defaultValue={defaultValue}
onChange={onChange}>
- <option value={0}></option>
+ {!multiple &&
+ <MenuItem value={0}>&nbsp;</MenuItem>
+ }
{items.map(item => (
- <option key={item.id} value={item.id}>{item.name}</option>
+ <MenuItem key={keyGetter(item)} value={keyGetter(item)}>{titleGetter(item)}</MenuItem>
))}
</Select>
</FormControl>
diff --git a/modern/src/settings/NotificationPage.js b/modern/src/settings/NotificationPage.js
index 5a772d0c..2cf8a62f 100644
--- a/modern/src/settings/NotificationPage.js
+++ b/modern/src/settings/NotificationPage.js
@@ -2,10 +2,10 @@ import React, { useState } from 'react';
import t, { findStringKeys } from '../common/localization';
import EditItemView from '../EditItemView';
-import { Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, FormControlLabel, Checkbox, FormControl, InputLabel, Select, MenuItem } from '@material-ui/core';
+import { Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, FormControlLabel, Checkbox } from '@material-ui/core';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import { useEffectAsync } from '../reactHelper';
import { prefixString, unprefixString } from '../common/stringUtils';
+import SelectField from '../form/SelectField';
const useStyles = makeStyles(() => ({
details: {
@@ -17,28 +17,12 @@ const NotificationPage = () => {
const classes = useStyles();
const [item, setItem] = useState();
- const [types, setTypes] = useState();
- const [notificators, setNotificators] = useState();
const alarms = findStringKeys(it => it.startsWith('alarm')).map(it => ({
key: unprefixString('alarm', it),
name: t(it),
}));
- useEffectAsync(async () => {
- const response = await fetch('/api/notifications/types');
- if (response.ok) {
- setTypes(await response.json());
- }
- }, []);
-
- useEffectAsync(async () => {
- const response = await fetch('/api/notifications/notificators');
- if (response.ok) {
- setNotificators(await response.json());
- }
- }, []);
-
return (
<EditItemView endpoint="notifications" item={item} setItem={setItem}>
{item &&
@@ -50,44 +34,35 @@ const NotificationPage = () => {
</Typography>
</AccordionSummary>
<AccordionDetails className={classes.details}>
- {types &&
- <FormControl margin="normal" variant="filled">
- <InputLabel>{t('sharedType')}</InputLabel>
- <Select
- native
- defaultValue={item.type}
- onChange={e => setItem({...item, type: e.target.value})}>
- {types.map(it => (
- <option key={it.type} value={it.type}>{t(prefixString('event', it.type))}</option>
- ))}
- </Select>
- </FormControl>
- }
- {notificators &&
- <FormControl margin="normal" variant="filled">
- <InputLabel>{t('notificationNotificators')}</InputLabel>
- <Select
- multiple
- defaultValue={item.notificators ? item.notificators.split(/[, ]+/) : []}
- onChange={e => setItem({...item, notificators: e.target.value.join()})}>
- {notificators.map(it => (
- <MenuItem key={it.type} value={it.type}>{t(prefixString('notificator', it.type))}</MenuItem>
- ))}
- </Select>
- </FormControl>
- }
+ <SelectField
+ margin="normal"
+ defaultValue={item.type}
+ onChange={e => setItem({...item, type: e.target.value})}
+ endpoint="/api/notifications/types"
+ keyGetter={it => it.type}
+ titleGetter={it => t(prefixString('event', it.type))}
+ label={t('sharedType')}
+ variant="filled" />
+ <SelectField
+ multiple
+ margin="normal"
+ defaultValue={item.notificators ? item.notificators.split(/[, ]+/) : []}
+ onChange={e => setItem({...item, notificators: e.target.value.join()})}
+ endpoint="/api/notifications/notificators"
+ keyGetter={it => it.type}
+ titleGetter={it => t(prefixString('notificator', it.type))}
+ label={t('notificationNotificators')}
+ variant="filled" />
{item.type === 'alarm' &&
- <FormControl margin="normal" variant="filled">
- <InputLabel>{t('sharedAlarms')}</InputLabel>
- <Select
- multiple
- defaultValue={item.attributes && item.attributes.alarms ? item.attributes.alarms.split(/[, ]+/) : []}
- onChange={e => setItem({...item, attributes: {...item.attributes, alarms: e.target.value.join()}})}>
- {alarms.map(it => (
- <MenuItem key={it.key} value={it.key}>{it.name}</MenuItem>
- ))}
- </Select>
- </FormControl>
+ <SelectField
+ multiple
+ margin="normal"
+ defaultValue={item.attributes && item.attributes.alarms ? item.attributes.alarms.split(/[, ]+/) : []}
+ onChange={e => setItem({...item, attributes: {...item.attributes, alarms: e.target.value.join()}})}
+ data={alarms}
+ keyGetter={it => it.key}
+ label={t('sharedAlarms')}
+ variant="filled" />
}
<FormControlLabel
control={
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-27 06:34:28 +0000