aboutsummaryrefslogtreecommitdiff
path: root/modern/src/settings
diff options
context:
space:
mode:
Diffstat (limited to 'modern/src/settings')
-rw-r--r--modern/src/settings/AccumulatorsPage.js14
-rw-r--r--modern/src/settings/CalendarsPage.js21
-rw-r--r--modern/src/settings/CommandsPage.js21
-rw-r--r--modern/src/settings/ComputedAttributesPage.js21
-rw-r--r--modern/src/settings/DriversPage.js21
-rw-r--r--modern/src/settings/GroupsPage.js21
-rw-r--r--modern/src/settings/MaintenancesPage.js21
-rw-r--r--modern/src/settings/NotificationsPage.js21
-rw-r--r--modern/src/settings/UsersPage.js21
-rw-r--r--modern/src/settings/components/EditItemView.js30
10 files changed, 146 insertions, 66 deletions
diff --git a/modern/src/settings/AccumulatorsPage.js b/modern/src/settings/AccumulatorsPage.js
index 37c77d5a..500c4e4a 100644
--- a/modern/src/settings/AccumulatorsPage.js
+++ b/modern/src/settings/AccumulatorsPage.js
@@ -16,6 +16,8 @@ import { useTranslation } from '../common/components/LocalizationProvider';
import PageLayout from '../common/components/PageLayout';
import SettingsMenu from './components/SettingsMenu';
import { useCatch } from '../reactHelper';
+import { useAttributePreference } from '../common/util/preferences';
+import { distanceFromMeters, distanceToMeters, distanceUnitString } from '../common/util/converter';
const useStyles = makeStyles((theme) => ({
container: {
@@ -43,6 +45,8 @@ const AccumulatorsPage = () => {
const classes = useStyles();
const t = useTranslation();
+ const distanceUnit = useAttributePreference('distanceUnit');
+
const { deviceId } = useParams();
const position = useSelector((state) => state.positions.items[deviceId]);
@@ -85,15 +89,15 @@ const AccumulatorsPage = () => {
<AccordionDetails className={classes.details}>
<TextField
type="number"
- value={item.hours}
- onChange={(event) => setItem({ ...item, hours: Number(event.target.value) })}
+ value={item.hours / 1000}
+ onChange={(event) => setItem({ ...item, hours: Number(event.target.value) * 1000 })}
label={t('positionHours')}
/>
<TextField
type="number"
- value={item.totalDistance}
- onChange={(event) => setItem({ ...item, totalDistance: Number(event.target.value) })}
- label={t('deviceTotalDistance')}
+ value={distanceFromMeters(item.totalDistance, distanceUnit)}
+ onChange={(event) => setItem({ ...item, totalDistance: distanceToMeters(Number(event.target.value), distanceUnit) })}
+ label={`${t('deviceTotalDistance')} (${distanceUnitString(distanceUnit, t)})`}
/>
</AccordionDetails>
</Accordion>
diff --git a/modern/src/settings/CalendarsPage.js b/modern/src/settings/CalendarsPage.js
index ea28967c..2602f702 100644
--- a/modern/src/settings/CalendarsPage.js
+++ b/modern/src/settings/CalendarsPage.js
@@ -9,6 +9,7 @@ import PageLayout from '../common/components/PageLayout';
import SettingsMenu from './components/SettingsMenu';
import CollectionFab from './components/CollectionFab';
import CollectionActions from './components/CollectionActions';
+import TableShimmer from '../common/components/TableShimmer';
const useStyles = makeStyles((theme) => ({
columnAction: {
@@ -23,13 +24,19 @@ const CalendarsPage = () => {
const [timestamp, setTimestamp] = useState(Date.now());
const [items, setItems] = useState([]);
+ const [loading, setLoading] = useState(false);
useEffectAsync(async () => {
- const response = await fetch('/api/calendars');
- if (response.ok) {
- setItems(await response.json());
- } else {
- throw Error(await response.text());
+ setLoading(true);
+ try {
+ const response = await fetch('/api/calendars');
+ if (response.ok) {
+ setItems(await response.json());
+ } else {
+ throw Error(await response.text());
+ }
+ } finally {
+ setLoading(false);
}
}, [timestamp]);
@@ -43,14 +50,14 @@ const CalendarsPage = () => {
</TableRow>
</TableHead>
<TableBody>
- {items.map((item) => (
+ {!loading ? items.map((item) => (
<TableRow key={item.id}>
<TableCell>{item.name}</TableCell>
<TableCell className={classes.columnAction} padding="none">
<CollectionActions itemId={item.id} editPath="/settings/calendar" endpoint="calendars" setTimestamp={setTimestamp} />
</TableCell>
</TableRow>
- ))}
+ )) : (<TableShimmer columns={2} endAction />)}
</TableBody>
</Table>
<CollectionFab editPath="/settings/calendar" />
diff --git a/modern/src/settings/CommandsPage.js b/modern/src/settings/CommandsPage.js
index 5ff194d5..b6c88587 100644
--- a/modern/src/settings/CommandsPage.js
+++ b/modern/src/settings/CommandsPage.js
@@ -11,6 +11,7 @@ import PageLayout from '../common/components/PageLayout';
import SettingsMenu from './components/SettingsMenu';
import CollectionFab from './components/CollectionFab';
import CollectionActions from './components/CollectionActions';
+import TableShimmer from '../common/components/TableShimmer';
const useStyles = makeStyles((theme) => ({
columnAction: {
@@ -25,13 +26,19 @@ const CommandsPage = () => {
const [timestamp, setTimestamp] = useState(Date.now());
const [items, setItems] = useState([]);
+ const [loading, setLoading] = useState(false);
useEffectAsync(async () => {
- const response = await fetch('/api/commands');
- if (response.ok) {
- setItems(await response.json());
- } else {
- throw Error(await response.text());
+ setLoading(true);
+ try {
+ const response = await fetch('/api/commands');
+ if (response.ok) {
+ setItems(await response.json());
+ } else {
+ throw Error(await response.text());
+ }
+ } finally {
+ setLoading(false);
}
}, [timestamp]);
@@ -47,7 +54,7 @@ const CommandsPage = () => {
</TableRow>
</TableHead>
<TableBody>
- {items.map((item) => (
+ {!loading ? items.map((item) => (
<TableRow key={item.id}>
<TableCell>{item.description}</TableCell>
<TableCell>{t(prefixString('command', item.type))}</TableCell>
@@ -56,7 +63,7 @@ const CommandsPage = () => {
<CollectionActions itemId={item.id} editPath="/settings/command" endpoint="commands" setTimestamp={setTimestamp} />
</TableCell>
</TableRow>
- ))}
+ )) : (<TableShimmer columns={4} endAction />)}
</TableBody>
</Table>
<CollectionFab editPath="/settings/command" />
diff --git a/modern/src/settings/ComputedAttributesPage.js b/modern/src/settings/ComputedAttributesPage.js
index 5de79dc0..59b3adbd 100644
--- a/modern/src/settings/ComputedAttributesPage.js
+++ b/modern/src/settings/ComputedAttributesPage.js
@@ -10,6 +10,7 @@ import PageLayout from '../common/components/PageLayout';
import SettingsMenu from './components/SettingsMenu';
import CollectionFab from './components/CollectionFab';
import CollectionActions from './components/CollectionActions';
+import TableShimmer from '../common/components/TableShimmer';
const useStyles = makeStyles((theme) => ({
columnAction: {
@@ -24,14 +25,20 @@ const ComputedAttributesPage = () => {
const [timestamp, setTimestamp] = useState(Date.now());
const [items, setItems] = useState([]);
+ const [loading, setLoading] = useState(false);
const administrator = useAdministrator();
useEffectAsync(async () => {
- const response = await fetch('/api/attributes/computed');
- if (response.ok) {
- setItems(await response.json());
- } else {
- throw Error(await response.text());
+ setLoading(true);
+ try {
+ const response = await fetch('/api/attributes/computed');
+ if (response.ok) {
+ setItems(await response.json());
+ } else {
+ throw Error(await response.text());
+ }
+ } finally {
+ setLoading(false);
}
}, [timestamp]);
@@ -48,7 +55,7 @@ const ComputedAttributesPage = () => {
</TableRow>
</TableHead>
<TableBody>
- {items.map((item) => (
+ {!loading ? items.map((item) => (
<TableRow key={item.id}>
<TableCell>{item.description}</TableCell>
<TableCell>{item.attribute}</TableCell>
@@ -60,7 +67,7 @@ const ComputedAttributesPage = () => {
</TableCell>
)}
</TableRow>
- ))}
+ )) : (<TableShimmer columns={administrator ? 5 : 4} endAction={administrator} />)}
</TableBody>
</Table>
<CollectionFab editPath="/settings/attribute" />
diff --git a/modern/src/settings/DriversPage.js b/modern/src/settings/DriversPage.js
index cdff5488..6ea97b31 100644
--- a/modern/src/settings/DriversPage.js
+++ b/modern/src/settings/DriversPage.js
@@ -9,6 +9,7 @@ import PageLayout from '../common/components/PageLayout';
import SettingsMenu from './components/SettingsMenu';
import CollectionFab from './components/CollectionFab';
import CollectionActions from './components/CollectionActions';
+import TableShimmer from '../common/components/TableShimmer';
const useStyles = makeStyles((theme) => ({
columnAction: {
@@ -23,13 +24,19 @@ const DriversPage = () => {
const [timestamp, setTimestamp] = useState(Date.now());
const [items, setItems] = useState([]);
+ const [loading, setLoading] = useState(false);
useEffectAsync(async () => {
- const response = await fetch('/api/drivers');
- if (response.ok) {
- setItems(await response.json());
- } else {
- throw Error(await response.text());
+ setLoading(true);
+ try {
+ const response = await fetch('/api/drivers');
+ if (response.ok) {
+ setItems(await response.json());
+ } else {
+ throw Error(await response.text());
+ }
+ } finally {
+ setLoading(false);
}
}, [timestamp]);
@@ -44,7 +51,7 @@ const DriversPage = () => {
</TableRow>
</TableHead>
<TableBody>
- {items.map((item) => (
+ {!loading ? items.map((item) => (
<TableRow key={item.id}>
<TableCell>{item.name}</TableCell>
<TableCell>{item.uniqueId}</TableCell>
@@ -52,7 +59,7 @@ const DriversPage = () => {
<CollectionActions itemId={item.id} editPath="/settings/driver" endpoint="drivers" setTimestamp={setTimestamp} />
</TableCell>
</TableRow>
- ))}
+ )) : (<TableShimmer columns={3} endAction />)}
</TableBody>
</Table>
<CollectionFab editPath="/settings/driver" />
diff --git a/modern/src/settings/GroupsPage.js b/modern/src/settings/GroupsPage.js
index 16a907c2..21785174 100644
--- a/modern/src/settings/GroupsPage.js
+++ b/modern/src/settings/GroupsPage.js
@@ -9,6 +9,7 @@ import PageLayout from '../common/components/PageLayout';
import SettingsMenu from './components/SettingsMenu';
import CollectionFab from './components/CollectionFab';
import CollectionActions from './components/CollectionActions';
+import TableShimmer from '../common/components/TableShimmer';
const useStyles = makeStyles((theme) => ({
columnAction: {
@@ -23,13 +24,19 @@ const GroupsPage = () => {
const [timestamp, setTimestamp] = useState(Date.now());
const [items, setItems] = useState([]);
+ const [loading, setLoading] = useState(false);
useEffectAsync(async () => {
- const response = await fetch('/api/groups');
- if (response.ok) {
- setItems(await response.json());
- } else {
- throw Error(await response.text());
+ setLoading(true);
+ try {
+ const response = await fetch('/api/groups');
+ if (response.ok) {
+ setItems(await response.json());
+ } else {
+ throw Error(await response.text());
+ }
+ } finally {
+ setLoading(false);
}
}, [timestamp]);
@@ -43,14 +50,14 @@ const GroupsPage = () => {
</TableRow>
</TableHead>
<TableBody>
- {items.map((item) => (
+ {!loading ? items.map((item) => (
<TableRow key={item.id}>
<TableCell>{item.name}</TableCell>
<TableCell className={classes.columnAction} padding="none">
<CollectionActions itemId={item.id} editPath="/settings/group" endpoint="groups" setTimestamp={setTimestamp} />
</TableCell>
</TableRow>
- ))}
+ )) : (<TableShimmer columns={2} endAction />)}
</TableBody>
</Table>
<CollectionFab editPath="/settings/group" />
diff --git a/modern/src/settings/MaintenancesPage.js b/modern/src/settings/MaintenancesPage.js
index 7569e7bf..c82629e4 100644
--- a/modern/src/settings/MaintenancesPage.js
+++ b/modern/src/settings/MaintenancesPage.js
@@ -12,6 +12,7 @@ import PageLayout from '../common/components/PageLayout';
import SettingsMenu from './components/SettingsMenu';
import CollectionFab from './components/CollectionFab';
import CollectionActions from './components/CollectionActions';
+import TableShimmer from '../common/components/TableShimmer';
const useStyles = makeStyles((theme) => ({
columnAction: {
@@ -28,15 +29,21 @@ const MaintenacesPage = () => {
const [timestamp, setTimestamp] = useState(Date.now());
const [items, setItems] = useState([]);
+ const [loading, setLoading] = useState(false);
const speedUnit = useAttributePreference('speedUnit');
const distanceUnit = useAttributePreference('distanceUnit');
useEffectAsync(async () => {
- const response = await fetch('/api/maintenance');
- if (response.ok) {
- setItems(await response.json());
- } else {
- throw Error(await response.text());
+ setLoading(true);
+ try {
+ const response = await fetch('/api/maintenance');
+ if (response.ok) {
+ setItems(await response.json());
+ } else {
+ throw Error(await response.text());
+ }
+ } finally {
+ setLoading(false);
}
}, [timestamp]);
@@ -69,7 +76,7 @@ const MaintenacesPage = () => {
</TableRow>
</TableHead>
<TableBody>
- {items.map((item) => (
+ {!loading ? items.map((item) => (
<TableRow key={item.id}>
<TableCell>{item.name}</TableCell>
<TableCell>{item.type}</TableCell>
@@ -79,7 +86,7 @@ const MaintenacesPage = () => {
<CollectionActions itemId={item.id} editPath="/settings/maintenance" endpoint="maintenance" setTimestamp={setTimestamp} />
</TableCell>
</TableRow>
- ))}
+ )) : (<TableShimmer columns={5} endAction />)}
</TableBody>
</Table>
<CollectionFab editPath="/settings/maintenance" />
diff --git a/modern/src/settings/NotificationsPage.js b/modern/src/settings/NotificationsPage.js
index bdc9857f..3c9a9192 100644
--- a/modern/src/settings/NotificationsPage.js
+++ b/modern/src/settings/NotificationsPage.js
@@ -11,6 +11,7 @@ import PageLayout from '../common/components/PageLayout';
import SettingsMenu from './components/SettingsMenu';
import CollectionFab from './components/CollectionFab';
import CollectionActions from './components/CollectionActions';
+import TableShimmer from '../common/components/TableShimmer';
const useStyles = makeStyles((theme) => ({
columnAction: {
@@ -25,13 +26,19 @@ const NotificationsPage = () => {
const [timestamp, setTimestamp] = useState(Date.now());
const [items, setItems] = useState([]);
+ const [loading, setLoading] = useState(false);
useEffectAsync(async () => {
- const response = await fetch('/api/notifications');
- if (response.ok) {
- setItems(await response.json());
- } else {
- throw Error(await response.text());
+ setLoading(true);
+ try {
+ const response = await fetch('/api/notifications');
+ if (response.ok) {
+ setItems(await response.json());
+ } else {
+ throw Error(await response.text());
+ }
+ } finally {
+ setLoading(false);
}
}, [timestamp]);
@@ -59,7 +66,7 @@ const NotificationsPage = () => {
</TableRow>
</TableHead>
<TableBody>
- {items.map((item) => (
+ {!loading ? items.map((item) => (
<TableRow key={item.id}>
<TableCell>{t(prefixString('event', item.type))}</TableCell>
<TableCell>{formatBoolean(item.always, t)}</TableCell>
@@ -69,7 +76,7 @@ const NotificationsPage = () => {
<CollectionActions itemId={item.id} editPath="/settings/notification" endpoint="notifications" setTimestamp={setTimestamp} />
</TableCell>
</TableRow>
- ))}
+ )) : (<TableShimmer columns={5} endAction />)}
</TableBody>
</Table>
<CollectionFab editPath="/settings/notification" />
diff --git a/modern/src/settings/UsersPage.js b/modern/src/settings/UsersPage.js
index ad755936..a274d569 100644
--- a/modern/src/settings/UsersPage.js
+++ b/modern/src/settings/UsersPage.js
@@ -10,6 +10,7 @@ import PageLayout from '../common/components/PageLayout';
import SettingsMenu from './components/SettingsMenu';
import CollectionFab from './components/CollectionFab';
import CollectionActions from './components/CollectionActions';
+import TableShimmer from '../common/components/TableShimmer';
const useStyles = makeStyles((theme) => ({
columnAction: {
@@ -24,13 +25,19 @@ const UsersPage = () => {
const [timestamp, setTimestamp] = useState(Date.now());
const [items, setItems] = useState([]);
+ const [loading, setLoading] = useState(false);
useEffectAsync(async () => {
- const response = await fetch('/api/users');
- if (response.ok) {
- setItems(await response.json());
- } else {
- throw Error(await response.text());
+ setLoading(true);
+ try {
+ const response = await fetch('/api/users');
+ if (response.ok) {
+ setItems(await response.json());
+ } else {
+ throw Error(await response.text());
+ }
+ } finally {
+ setLoading(false);
}
}, [timestamp]);
@@ -47,7 +54,7 @@ const UsersPage = () => {
</TableRow>
</TableHead>
<TableBody>
- {items.map((item) => (
+ {!loading ? items.map((item) => (
<TableRow key={item.id}>
<TableCell>{item.name}</TableCell>
<TableCell>{item.email}</TableCell>
@@ -57,7 +64,7 @@ const UsersPage = () => {
<CollectionActions itemId={item.id} editPath="/settings/user" endpoint="users" setTimestamp={setTimestamp} />
</TableCell>
</TableRow>
- ))}
+ )) : (<TableShimmer columns={5} endAction />)}
</TableBody>
</Table>
<CollectionFab editPath="/settings/user" />
diff --git a/modern/src/settings/components/EditItemView.js b/modern/src/settings/components/EditItemView.js
index 8dca1e66..8c3df663 100644
--- a/modern/src/settings/components/EditItemView.js
+++ b/modern/src/settings/components/EditItemView.js
@@ -1,9 +1,9 @@
import React from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import makeStyles from '@mui/styles/makeStyles';
-import Container from '@mui/material/Container';
-import Button from '@mui/material/Button';
-
+import {
+ Container, Button, Accordion, AccordionDetails, AccordionSummary, Skeleton, Typography, TextField,
+} from '@mui/material';
import { useCatch, useEffectAsync } from '../../reactHelper';
import { useTranslation } from '../../common/components/LocalizationProvider';
import PageLayout from '../../common/components/PageLayout';
@@ -21,6 +21,10 @@ const useStyles = makeStyles((theme) => ({
flexBasis: '33%',
},
},
+ details: {
+ display: 'flex',
+ flexDirection: 'column',
+ },
}));
const EditItemView = ({
@@ -70,13 +74,29 @@ const EditItemView = ({
return (
<PageLayout menu={menu} breadcrumbs={breadcrumbs}>
<Container maxWidth="xs" className={classes.container}>
- {children}
+ {item ? children : (
+ <Accordion defaultExpanded>
+ <AccordionSummary>
+ <Typography variant="subtitle1">
+ <Skeleton width="10em" />
+ </Typography>
+ </AccordionSummary>
+ <AccordionDetails>
+ {[...Array(3)].map(() => (
+ <Skeleton width="100%">
+ <TextField />
+ </Skeleton>
+ ))}
+ </AccordionDetails>
+ </Accordion>
+ )}
<div className={classes.buttons}>
<Button
type="button"
color="primary"
variant="outlined"
onClick={() => navigate(-1)}
+ disabled={!item}
>
{t('sharedCancel')}
</Button>
@@ -85,7 +105,7 @@ const EditItemView = ({
color="primary"
variant="contained"
onClick={handleSave}
- disabled={!validate()}
+ disabled={!item || !validate()}
>
{t('sharedSave')}
</Button>
generated by cgit v1.2.3 (git 2.39.1) at 2024-09-17 03:16:31 +0000