Organize router

4 files changed, 4 insertions, 103 deletions

diff --git a/modern/src/main/DevicesList.js b/modern/src/main/DevicesList.js
index 57778667..4da93547 100644
--- a/modern/src/main/DevicesList.js
+++ b/modern/src/main/DevicesList.js
@@ -189,7 +189,7 @@ const DeviceView = ({ updateTimestamp, onMenuClick, filter }) => {
 };
 
 const DevicesList = ({ filter }) => (
-  <EditCollectionView content={DeviceView} editPath="/device" endpoint="devices" disableAdd filter={filter} />
+  <EditCollectionView content={DeviceView} editPath="/settings/device" endpoint="devices" disableAdd filter={filter} />
 );
 
 export default DevicesList;
diff --git a/modern/src/main/MainPage.js b/modern/src/main/MainPage.js
index 569978af..2f3ed3dc 100644
--- a/modern/src/main/MainPage.js
+++ b/modern/src/main/MainPage.js
@@ -179,7 +179,7 @@ const MainPage = () => {
               placeholder={t('sharedSearchDevices')}
               variant="filled"
             />
-            <IconButton onClick={() => history.push('/device')} disabled={deviceReadonly}>
+            <IconButton onClick={() => history.push('/settings/device')} disabled={deviceReadonly}>
               <AddIcon />
             </IconButton>
             {!isTablet && (
diff --git a/modern/src/main/PositionPage.js b/modern/src/main/PositionPage.js
deleted file mode 100644
index ecb4095d..00000000
--- a/modern/src/main/PositionPage.js
+++ /dev/null
@@ -1,99 +0,0 @@
-import React, { useState } from 'react';
-import { useSelector } from 'react-redux';
-
-import {
-  makeStyles, Typography, Container, Paper, AppBar, Toolbar, IconButton, Table, TableHead, TableRow, TableCell, TableBody,
-} from '@material-ui/core';
-import ArrowBackIcon from '@material-ui/icons/ArrowBack';
-import { useHistory, useParams } from 'react-router-dom';
-import { useEffectAsync } from '../reactHelper';
-import { prefixString } from '../common/util/stringUtils';
-import { useTranslation } from '../common/components/LocalizationProvider';
-import PositionValue from '../common/components/PositionValue';
-
-const useStyles = makeStyles((theme) => ({
-  root: {
-    paddingTop: theme.spacing(1),
-    paddingBottom: theme.spacing(1),
-  },
-}));
-
-const PositionPage = () => {
-  const classes = useStyles();
-  const history = useHistory();
-  const t = useTranslation();
-
-  const { id } = useParams();
-
-  const [item, setItem] = useState();
-
-  useEffectAsync(async () => {
-    if (id) {
-      const response = await fetch(`/api/positions?id=${id}`);
-      if (response.ok) {
-        const positions = await response.json();
-        if (positions.length > 0) {
-          setItem(positions[0]);
-        }
-      }
-    } else {
-      setItem({});
-    }
-  }, [id]);
-
-  const deviceName = useSelector((state) => {
-    if (item) {
-      const device = state.devices.items[item.deviceId];
-      if (device) {
-        return device.name;
-      }
-    }
-    return null;
-  });
-
-  return (
-    <>
-      <AppBar position="sticky" color="inherit">
-        <Toolbar>
-          <IconButton color="inherit" edge="start" onClick={() => history.push('/')}>
-            <ArrowBackIcon />
-          </IconButton>
-          <Typography variant="h6">
-            {deviceName}
-          </Typography>
-        </Toolbar>
-      </AppBar>
-      <Container maxWidth="sm" className={classes.root}>
-        <Paper>
-          <Table>
-            <TableHead>
-              <TableRow>
-                <TableCell>{t('stateName')}</TableCell>
-                <TableCell>{t('sharedName')}</TableCell>
-                <TableCell>{t('stateValue')}</TableCell>
-              </TableRow>
-            </TableHead>
-            <TableBody>
-              {item && Object.getOwnPropertyNames(item).filter((it) => it !== 'attributes').map((property) => (
-                <TableRow key={property}>
-                  <TableCell>{property}</TableCell>
-                  <TableCell><strong>{t(prefixString('position', property))}</strong></TableCell>
-                  <TableCell><PositionValue position={item} property={property} /></TableCell>
-                </TableRow>
-              ))}
-              {item && Object.getOwnPropertyNames(item.attributes).map((attribute) => (
-                <TableRow key={attribute}>
-                  <TableCell>{attribute}</TableCell>
-                  <TableCell><strong>{t(prefixString('position', attribute)) || t(prefixString('device', attribute))}</strong></TableCell>
-                  <TableCell><PositionValue position={item} attribute={attribute} /></TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        </Paper>
-      </Container>
-    </>
-  );
-};
-
-export default PositionPage;
diff --git a/modern/src/main/StatusCard.js b/modern/src/main/StatusCard.js
index 46d288c6..f49799b5 100644
--- a/modern/src/main/StatusCard.js
+++ b/modern/src/main/StatusCard.js
@@ -109,10 +109,10 @@ const StatusCard = ({ deviceId, onClose }) => {
             <IconButton onClick={() => history.push('/replay')} disabled={!position}>
               <ReplayIcon />
             </IconButton>
-            <IconButton onClick={() => history.push(`/command/${deviceId}`)} disabled={readonly}>
+            <IconButton onClick={() => history.push(`/settings/command-send/${deviceId}`)} disabled={readonly}>
               <PublishIcon />
             </IconButton>
-            <IconButton onClick={() => history.push(`/device/${deviceId}`)} disabled={deviceReadonly}>
+            <IconButton onClick={() => history.push(`/settings/device/${deviceId}`)} disabled={deviceReadonly}>
               <EditIcon />
             </IconButton>
             <IconButton onClick={() => setRemoveDialogShown(true)} disabled={deviceReadonly} className={classes.negative}>