diff options
| -rw-r--r-- | modern/src/App.js | 4 | ||||
| -rw-r--r-- | modern/src/settings/CalendarPage.js | 64 | ||||
| -rw-r--r-- | modern/src/settings/CalendarsPage.js | 63 | ||||
| -rw-r--r-- | modern/src/settings/OptionsLayout/useRoutes.js | 7 |
4 files changed, 138 insertions, 0 deletions
diff --git a/modern/src/App.js b/modern/src/App.js index eb1a8818..a53ffc6c 100644 --- a/modern/src/App.js +++ b/modern/src/App.js @@ -24,6 +24,8 @@ import SummaryReportPage from './reports/SummaryReportPage'; import ChartReportPage from './reports/ChartReportPage'; import DriversPage from './settings/DriversPage'; import DriverPage from './settings/DriverPage'; +import CalendarsPage from './settings/CalendarsPage'; +import CalendarPage from './settings/CalendarPage'; import ComputedAttributesPage from './settings/ComputedAttributesPage'; import ComputedAttributePage from './settings/ComputedAttributePage'; import MaintenancesPage from './settings/MaintenancesPage'; @@ -69,6 +71,8 @@ const App = () => { <Route exact path="/settings/group/:id?" component={GroupPage} /> <Route exact path="/settings/drivers" component={DriversPage} /> <Route exact path="/settings/driver/:id?" component={DriverPage} /> + <Route exact path="/settings/calendars" component={CalendarsPage} /> + <Route exact path="/settings/calendar/:id?" component={CalendarPage} /> <Route exact path="/settings/attributes" component={ComputedAttributesPage} /> <Route exact path="/settings/attribute/:id?" component={ComputedAttributePage} /> <Route exact path="/settings/maintenances" component={MaintenancesPage} /> diff --git a/modern/src/settings/CalendarPage.js b/modern/src/settings/CalendarPage.js new file mode 100644 index 00000000..de714c36 --- /dev/null +++ b/modern/src/settings/CalendarPage.js @@ -0,0 +1,64 @@ +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 '../EditItemView'; +import EditAttributesView from '../attributes/EditAttributesView'; +import { useTranslation } from '../LocalizationProvider'; + +const useStyles = makeStyles(() => ({ + details: { + flexDirection: 'column', + }, +})); + +const CalendarPage = () => { + const classes = useStyles(); + const t = useTranslation(); + + const [item, setItem] = useState(); + + return ( + <EditItemView endpoint="calendars" item={item} setItem={setItem}> + {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={{}} + /> + </AccordionDetails> + </Accordion> + </> + )} + </EditItemView> + ); +}; + +export default CalendarPage; diff --git a/modern/src/settings/CalendarsPage.js b/modern/src/settings/CalendarsPage.js new file mode 100644 index 00000000..076f30ca --- /dev/null +++ b/modern/src/settings/CalendarsPage.js @@ -0,0 +1,63 @@ +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 '../EditCollectionView'; +import OptionsLayout from './OptionsLayout'; +import { useTranslation } from '../LocalizationProvider'; + +const useStyles = makeStyles((theme) => ({ + columnAction: { + width: theme.spacing(1), + padding: theme.spacing(0, 1), + }, +})); + +const CalendarsView = ({ updateTimestamp, onMenuClick }) => { + const classes = useStyles(); + const t = useTranslation(); + + const [items, setItems] = useState([]); + + useEffectAsync(async () => { + const response = await fetch('/api/calendars'); + if (response.ok) { + setItems(await response.json()); + } + }, [updateTimestamp]); + + return ( + <TableContainer> + <Table> + <TableHead> + <TableRow> + <TableCell className={classes.columnAction} /> + <TableCell>{t('sharedName')}</TableCell> + </TableRow> + </TableHead> + <TableBody> + {items.map((item) => ( + <TableRow key={item.id}> + <TableCell className={classes.columnAction} padding="none"> + <IconButton onClick={(event) => onMenuClick(event.currentTarget, item.id)}> + <MoreVertIcon /> + </IconButton> + </TableCell> + <TableCell>{item.name}</TableCell> + </TableRow> + ))} + </TableBody> + </Table> + </TableContainer> + ); +}; + +const CalendarsPage = () => ( + <OptionsLayout> + <EditCollectionView content={CalendarsView} editPath="/settings/calendar" endpoint="calendars" /> + </OptionsLayout> +); + +export default CalendarsPage; diff --git a/modern/src/settings/OptionsLayout/useRoutes.js b/modern/src/settings/OptionsLayout/useRoutes.js index 8be4ec30..efbd9eb2 100644 --- a/modern/src/settings/OptionsLayout/useRoutes.js +++ b/modern/src/settings/OptionsLayout/useRoutes.js @@ -8,6 +8,7 @@ import StorageIcon from '@material-ui/icons/Storage'; import BuildIcon from '@material-ui/icons/Build'; import PeopleIcon from '@material-ui/icons/People'; import BarChartIcon from '@material-ui/icons/BarChart'; +import TodayIcon from '@material-ui/icons/Today'; import { getIsAdmin, getUserId } from '../../common/selectors'; import { useTranslation } from '../../LocalizationProvider'; @@ -61,6 +62,12 @@ const useMainRoutes = (t, userId) => useMemo(() => [ icon: <PersonIcon />, }, { + match: 'calendar', + name: t('sharedCalendars'), + href: '/settings/calendars', + icon: <TodayIcon />, + }, + { match: 'attribute', name: t('sharedComputedAttributes'), href: '/settings/attributes', |