aboutsummaryrefslogtreecommitdiff
path: root/modern
diff options
context:
space:
mode:
Diffstat (limited to 'modern')
-rw-r--r--modern/src/App.js2
-rw-r--r--modern/src/DevicePage.js67
2 files changed, 62 insertions, 7 deletions
diff --git a/modern/src/App.js b/modern/src/App.js
index cc15ca5..7921a2c 100644
--- a/modern/src/App.js
+++ b/modern/src/App.js
@@ -13,7 +13,7 @@ const App = () => {
<Switch>
<Route exact path='/' component={MainPage} />
<Route exact path='/login' component={LoginPage} />
- <Route exact path='/device' component={DevicePage} />
+ <Route exact path='/device/:id?' component={DevicePage} />
<Route exact path='/reports/route' component={RouteReportPage} />
</Switch>
</>
diff --git a/modern/src/DevicePage.js b/modern/src/DevicePage.js
index 24a06d1..c9362de 100644
--- a/modern/src/DevicePage.js
+++ b/modern/src/DevicePage.js
@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
import MainToobar from './MainToolbar';
-import { useHistory } from 'react-router-dom';
+import { useHistory, useParams } from 'react-router-dom';
import { makeStyles } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';
import Container from '@material-ui/core/Container';
@@ -25,20 +25,75 @@ const useStyles = makeStyles(theme => ({
const DevicePage = () => {
const history = useHistory();
const classes = useStyles();
+ const { id } = useParams();
+ const [device, setDevice] = useState();
+ const [name, setName] = useState('');
+ const [uniqueId, setUniqueId] = useState('');
+
+ useEffect(() => {
+ fetch(`/api/devices/${id}`).then(response => {
+ if (response.ok) {
+ response.json().then(setDevice);
+ }
+ });
+ }, [id]);
+
+ const handleSave = () => {
+ const updatedDevice = id ? device : {};
+ updatedDevice.name = name || updatedDevice.name;
+ updatedDevice.uniqueId = uniqueId || updatedDevice.uniqueId;
+
+ let request;
+ if (id) {
+ request = fetch(`/api/devices/${id}`, {
+ method: 'PUT',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify(updatedDevice),
+ });
+ } else {
+ request = fetch('/api/devices', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify(updatedDevice),
+ });
+ }
+
+ request.then(response => {
+ if (response.ok) {
+ history.goBack();
+ }
+ });
+ }
return (
<>
<MainToobar history={history} />
<Container maxWidth='xs' className={classes.container}>
<form>
- <TextField margin="normal" fullWidth label={t('sharedName')} variant="filled" />
- <TextField margin="normal" fullWidth label={t('deviceIdentifier')} variant="filled" />
+ {(!id || device) &&
+ <TextField
+ margin="normal"
+ fullWidth
+ defaultValue={device && device.name}
+ onChange={(event) => setName(event.target.value)}
+ label={t('sharedName')}
+ variant="filled" />
+ }
+ {(!id || device) &&
+ <TextField
+ margin="normal"
+ fullWidth
+ defaultValue={device && device.uniqueId}
+ onChange={(event) => setUniqueId(event.target.value)}
+ label={t('deviceIdentifier')}
+ variant="filled" />
+ }
<FormControl fullWidth margin="normal">
<div className={classes.buttons}>
- <Button type="button" color="primary" variant="outlined">
+ <Button type="button" color="primary" variant="outlined" onClick={() => history.goBack()}>
{t('sharedCancel')}
</Button>
- <Button type="button" color="primary" variant="contained">
+ <Button type="button" color="primary" variant="contained" onClick={handleSave}>
{t('sharedSave')}
</Button>
</div>