diff options
Diffstat (limited to 'modern')
20 files changed, 315 insertions, 143 deletions
diff --git a/modern/src/common/components/PositionValue.js b/modern/src/common/components/PositionValue.js index 5810ae5e..83fc0ef2 100644 --- a/modern/src/common/components/PositionValue.js +++ b/modern/src/common/components/PositionValue.js @@ -43,6 +43,8 @@ const PositionValue = ({ position, property, attribute }) => { case 'distance': case 'totalDistance': return formatDistance(value, distanceUnit, t); + case 'hours': + return formatNumber(value / 1000); default: if (typeof value === 'number') { return formatNumber(value); diff --git a/modern/src/common/components/TableShimmer.js b/modern/src/common/components/TableShimmer.js new file mode 100644 index 00000000..e7d12f95 --- /dev/null +++ b/modern/src/common/components/TableShimmer.js @@ -0,0 +1,17 @@ +import React from 'react'; +import { Skeleton, TableCell, TableRow } from '@mui/material'; + +const TableShimmer = ({ columns, startAction, endAction }) => [...Array(3)].map(() => ( + <TableRow> + {[...Array(columns)].map((_, i) => { + const action = (startAction && i === 0) || (endAction && i === columns - 1); + return ( + <TableCell padding={action ? 'none' : 'normal'}> + {!action && <Skeleton />} + </TableCell> + ); + })} + </TableRow> +)); + +export default TableShimmer; diff --git a/modern/src/map/core/useMapStyles.js b/modern/src/map/core/useMapStyles.js index bbdf0ea9..72f18ebc 100644 --- a/modern/src/map/core/useMapStyles.js +++ b/modern/src/map/core/useMapStyles.js @@ -28,6 +28,7 @@ export default () => { const bingMapsKey = useAttributePreference('bingMapsKey'); const tomTomKey = useAttributePreference('tomTomKey'); const hereKey = useAttributePreference('hereKey'); + const mapboxAccessToken = useAttributePreference('mapboxAccessToken'); const customMapUrl = useSelector((state) => state.session.server?.mapUrl); return [ @@ -151,9 +152,36 @@ export default () => { available: true, }, { + id: 'mapboxStreets', + title: t('mapMapboxStreets'), + style: styleCustom( + [`https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/{z}/{x}/{y}?access_token=${mapboxAccessToken}`], + ), + available: !!mapboxAccessToken, + attribute: 'mapboxAccessToken', + }, + { + id: 'mapboxOutdoors', + title: t('mapMapboxOutdoors'), + style: styleCustom( + [`https://api.mapbox.com/styles/v1/mapbox/outdoors-v11/tiles/{z}/{x}/{y}?access_token=${mapboxAccessToken}`], + ), + available: !!mapboxAccessToken, + attribute: 'mapboxAccessToken', + }, + { + id: 'mapboxSatelliteStreet', + title: t('mapMapboxSatellite'), + style: styleCustom( + [`https://api.mapbox.com/styles/v1/mapbox/satellite-streets-v11/tiles/{z}/{x}/{y}?access_token=${mapboxAccessToken}`], + ), + available: !!mapboxAccessToken, + attribute: 'mapboxAccessToken', + }, + { id: 'custom', title: t('mapCustom'), - style: styleCustom(customMapUrl), + style: styleCustom([customMapUrl]), available: !!customMapUrl, }, ]; diff --git a/modern/src/reports/ChartReportPage.js b/modern/src/reports/ChartReportPage.js index 3a2dfbf2..977c5158 100644 --- a/modern/src/reports/ChartReportPage.js +++ b/modern/src/reports/ChartReportPage.js @@ -57,6 +57,9 @@ const ChartReportPage = () => { case 'volume': formatted[key] = volumeFromLiters(value, volumeUnit).toFixed(2); break; + case 'hours': + formatted[key] = (value / 1000).toFixed(2); + break; default: formatted[key] = value; break; diff --git a/modern/src/reports/EventReportPage.js b/modern/src/reports/EventReportPage.js index 87ea1ee8..8416af71 100644 --- a/modern/src/reports/EventReportPage.js +++ b/modern/src/reports/EventReportPage.js @@ -13,6 +13,7 @@ import usePersistedState from '../common/util/usePersistedState'; import ColumnSelect from './components/ColumnSelect'; import { useCatch } from '../reactHelper'; import useReportStyles from './common/useReportStyles'; +import TableShimmer from '../common/components/TableShimmer'; const typesArray = [ ['allEvents', 'eventAll'], @@ -53,22 +54,28 @@ const EventReportPage = () => { const [columns, setColumns] = usePersistedState('eventColumns', ['eventTime', 'type', 'alarm']); const [eventTypes, setEventTypes] = useState(['allEvents']); const [items, setItems] = useState([]); + const [loading, setLoading] = useState(false); const handleSubmit = useCatch(async ({ deviceId, from, to, mail, headers }) => { - const query = new URLSearchParams({ deviceId, from, to, mail }); - eventTypes.forEach((it) => query.append('type', it)); - const response = await fetch(`/api/reports/events?${query.toString()}`, { headers }); - if (response.ok) { - const contentType = response.headers.get('content-type'); - if (contentType) { - if (contentType === 'application/json') { - setItems(await response.json()); - } else { - window.location.assign(window.URL.createObjectURL(await response.blob())); + setLoading(true); + try { + const query = new URLSearchParams({ deviceId, from, to, mail }); + eventTypes.forEach((it) => query.append('type', it)); + const response = await fetch(`/api/reports/events?${query.toString()}`, { headers }); + if (response.ok) { + const contentType = response.headers.get('content-type'); + if (contentType) { + if (contentType === 'application/json') { + setItems(await response.json()); + } else { + window.location.assign(window.URL.createObjectURL(await response.blob())); + } } + } else { + throw Error(await response.text()); } - } else { - throw Error(await response.text()); + } finally { + setLoading(false); } }); @@ -129,7 +136,7 @@ const EventReportPage = () => { </TableRow> </TableHead> <TableBody> - {items.map((item) => ( + {!loading ? items.map((item) => ( <TableRow key={item.id}> {columns.map((key) => ( <TableCell key={key}> @@ -137,7 +144,7 @@ const EventReportPage = () => { </TableCell> ))} </TableRow> - ))} + )) : (<TableShimmer columns={columns.length} />)} </TableBody> </Table> </PageLayout> diff --git a/modern/src/reports/RouteReportPage.js b/modern/src/reports/RouteReportPage.js index 5796e80c..1c24a15b 100644 --- a/modern/src/reports/RouteReportPage.js +++ b/modern/src/reports/RouteReportPage.js @@ -17,6 +17,7 @@ import MapView from '../map/core/MapView'; import MapRoutePath from '../map/MapRoutePath'; import MapPositions from '../map/MapPositions'; import useReportStyles from './common/useReportStyles'; +import TableShimmer from '../common/components/TableShimmer'; const RouteReportPage = () => { const classes = useReportStyles(); @@ -26,22 +27,28 @@ const RouteReportPage = () => { const [columns, setColumns] = usePersistedState('routeColumns', ['fixTime', 'latitude', 'longitude', 'speed', 'address']); const [items, setItems] = useState([]); + const [loading, setLoading] = useState(false); const [selectedItem, setSelectedItem] = useState(null); const handleSubmit = useCatch(async ({ deviceId, from, to, mail, headers }) => { - const query = new URLSearchParams({ deviceId, from, to, mail }); - const response = await fetch(`/api/reports/route?${query.toString()}`, { headers }); - if (response.ok) { - const contentType = response.headers.get('content-type'); - if (contentType) { - if (contentType === 'application/json') { - setItems(await response.json()); - } else { - window.location.assign(window.URL.createObjectURL(await response.blob())); + setLoading(true); + try { + const query = new URLSearchParams({ deviceId, from, to, mail }); + const response = await fetch(`/api/reports/route?${query.toString()}`, { headers }); + if (response.ok) { + const contentType = response.headers.get('content-type'); + if (contentType) { + if (contentType === 'application/json') { + setItems(await response.json()); + } else { + window.location.assign(window.URL.createObjectURL(await response.blob())); + } } + } else { + throw Error(await response.text()); } - } else { - throw Error(await response.text()); + } finally { + setLoading(false); } }); @@ -74,7 +81,7 @@ const RouteReportPage = () => { </TableRow> </TableHead> <TableBody> - {items.map((item) => ( + {!loading ? items.map((item) => ( <TableRow key={item.id}> <TableCell className={classes.columnAction} padding="none"> {selectedItem === item ? ( @@ -97,7 +104,7 @@ const RouteReportPage = () => { </TableCell> ))} </TableRow> - ))} + )) : (<TableShimmer columns={columns.length + 1} startAction />)} </TableBody> </Table> </div> diff --git a/modern/src/reports/StatisticsPage.js b/modern/src/reports/StatisticsPage.js index 2f839043..eb6130c7 100644 --- a/modern/src/reports/StatisticsPage.js +++ b/modern/src/reports/StatisticsPage.js @@ -11,6 +11,7 @@ import usePersistedState from '../common/util/usePersistedState'; import ColumnSelect from './components/ColumnSelect'; import { useCatch } from '../reactHelper'; import useReportStyles from './common/useReportStyles'; +import TableShimmer from '../common/components/TableShimmer'; const columnsArray = [ ['captureTime', 'statisticsCaptureTime'], @@ -32,14 +33,20 @@ const StatisticsPage = () => { const [columns, setColumns] = usePersistedState('statisticsColumns', ['captureTime', 'activeUsers', 'activeDevices', 'messagesStored']); const [items, setItems] = useState([]); + const [loading, setLoading] = useState(false); const handleSubmit = useCatch(async ({ from, to }) => { - const query = new URLSearchParams({ from, to }); - const response = await fetch(`/api/statistics?${query.toString()}`, { Accept: 'application/json' }); - if (response.ok) { - setItems(await response.json()); - } else { - throw Error(await response.text()); + setLoading(true); + try { + const query = new URLSearchParams({ from, to }); + const response = await fetch(`/api/statistics?${query.toString()}`, { Accept: 'application/json' }); + if (response.ok) { + setItems(await response.json()); + } else { + throw Error(await response.text()); + } + } finally { + setLoading(false); } }); @@ -57,7 +64,7 @@ const StatisticsPage = () => { </TableRow> </TableHead> <TableBody> - {items.map((item) => ( + {!loading ? items.map((item) => ( <TableRow key={item.id}> {columns.map((key) => ( <TableCell key={key}> @@ -65,7 +72,7 @@ const StatisticsPage = () => { </TableCell> ))} </TableRow> - ))} + )) : (<TableShimmer columns={columns.length} />)} </TableBody> </Table> </PageLayout> diff --git a/modern/src/reports/StopReportPage.js b/modern/src/reports/StopReportPage.js index 9e42cb33..bacbe928 100644 --- a/modern/src/reports/StopReportPage.js +++ b/modern/src/reports/StopReportPage.js @@ -21,6 +21,7 @@ import MapPositions from '../map/MapPositions'; import MapView from '../map/core/MapView'; import MapCamera from '../map/MapCamera'; import AddressValue from '../common/components/AddressValue'; +import TableShimmer from '../common/components/TableShimmer'; const columnsArray = [ ['startTime', 'reportStartTime'], @@ -42,22 +43,28 @@ const StopReportPage = () => { const [columns, setColumns] = usePersistedState('stopColumns', ['startTime', 'endTime', 'startOdometer', 'address']); const [items, setItems] = useState([]); + const [loading, setLoading] = useState(false); const [selectedItem, setSelectedItem] = useState(null); const handleSubmit = useCatch(async ({ deviceId, from, to, mail, headers }) => { - const query = new URLSearchParams({ deviceId, from, to, mail }); - const response = await fetch(`/api/reports/stops?${query.toString()}`, { headers }); - if (response.ok) { - const contentType = response.headers.get('content-type'); - if (contentType) { - if (contentType === 'application/json') { - setItems(await response.json()); - } else { - window.location.assign(window.URL.createObjectURL(await response.blob())); + setLoading(true); + try { + const query = new URLSearchParams({ deviceId, from, to, mail }); + const response = await fetch(`/api/reports/stops?${query.toString()}`, { headers }); + if (response.ok) { + const contentType = response.headers.get('content-type'); + if (contentType) { + if (contentType === 'application/json') { + setItems(await response.json()); + } else { + window.location.assign(window.URL.createObjectURL(await response.blob())); + } } + } else { + throw Error(await response.text()); } - } else { - throw Error(await response.text()); + } finally { + setLoading(false); } }); @@ -111,7 +118,7 @@ const StopReportPage = () => { </TableRow> </TableHead> <TableBody> - {items.map((item) => ( + {!loading ? items.map((item) => ( <TableRow key={item.positionId}> <TableCell className={classes.columnAction} padding="none"> {selectedItem === item ? ( @@ -130,7 +137,7 @@ const StopReportPage = () => { </TableCell> ))} </TableRow> - ))} + )) : (<TableShimmer columns={columns.length + 1} startAction />)} </TableBody> </Table> </div> diff --git a/modern/src/reports/SummaryReportPage.js b/modern/src/reports/SummaryReportPage.js index 233bfe98..f6ec0691 100644 --- a/modern/src/reports/SummaryReportPage.js +++ b/modern/src/reports/SummaryReportPage.js @@ -15,6 +15,7 @@ import usePersistedState from '../common/util/usePersistedState'; import ColumnSelect from './components/ColumnSelect'; import { useCatch } from '../reactHelper'; import useReportStyles from './common/useReportStyles'; +import TableShimmer from '../common/components/TableShimmer'; const columnsArray = [ ['deviceId', 'sharedDevice'], @@ -42,23 +43,29 @@ const SummaryReportPage = () => { const [columns, setColumns] = usePersistedState('summaryColumns', ['deviceId', 'startTime', 'distance', 'averageSpeed']); const [daily, setDaily] = useState(false); const [items, setItems] = useState([]); + const [loading, setLoading] = useState(false); const handleSubmit = useCatch(async ({ deviceIds, groupIds, from, to, mail, headers }) => { - const query = new URLSearchParams({ from, to, daily, mail }); - deviceIds.forEach((deviceId) => query.append('deviceId', deviceId)); - groupIds.forEach((groupId) => query.append('groupId', groupId)); - const response = await fetch(`/api/reports/summary?${query.toString()}`, { headers }); - if (response.ok) { - const contentType = response.headers.get('content-type'); - if (contentType) { - if (contentType === 'application/json') { - setItems(await response.json()); - } else { - window.location.assign(window.URL.createObjectURL(await response.blob())); + setLoading(true); + try { + const query = new URLSearchParams({ from, to, daily, mail }); + deviceIds.forEach((deviceId) => query.append('deviceId', deviceId)); + groupIds.forEach((groupId) => query.append('groupId', groupId)); + const response = await fetch(`/api/reports/summary?${query.toString()}`, { headers }); + if (response.ok) { + const contentType = response.headers.get('content-type'); + if (contentType) { + if (contentType === 'application/json') { + setItems(await response.json()); + } else { + window.location.assign(window.URL.createObjectURL(await response.blob())); + } } + } else { + throw Error(await response.text()); } - } else { - throw Error(await response.text()); + } finally { + setLoading(false); } }); @@ -107,7 +114,7 @@ const SummaryReportPage = () => { </TableRow> </TableHead> <TableBody> - {items.map((item) => ( + {!loading ? items.map((item) => ( <TableRow key={(`${item.deviceId}_${Date.parse(item.startTime)}`)}> {columns.map((key) => ( <TableCell key={key}> @@ -115,7 +122,7 @@ const SummaryReportPage = () => { </TableCell> ))} </TableRow> - ))} + )) : (<TableShimmer columns={columns.length} />)} </TableBody> </Table> </PageLayout> diff --git a/modern/src/reports/TripReportPage.js b/modern/src/reports/TripReportPage.js index d2b4d9ef..5ad51f00 100644 --- a/modern/src/reports/TripReportPage.js +++ b/modern/src/reports/TripReportPage.js @@ -19,6 +19,7 @@ import useReportStyles from './common/useReportStyles'; import MapView from '../map/core/MapView'; import MapRoutePath from '../map/MapRoutePath'; import AddressValue from '../common/components/AddressValue'; +import TableShimmer from '../common/components/TableShimmer'; const columnsArray = [ ['startTime', 'reportStartTime'], @@ -46,6 +47,7 @@ const TripReportPage = () => { const [columns, setColumns] = usePersistedState('tripColumns', ['startTime', 'endTime', 'distance', 'averageSpeed']); const [items, setItems] = useState([]); + const [loading, setLoading] = useState(false); const [selectedItem, setSelectedItem] = useState(null); const [route, setRoute] = useState(null); @@ -72,19 +74,24 @@ const TripReportPage = () => { }, [selectedItem]); const handleSubmit = useCatch(async ({ deviceId, from, to, mail, headers }) => { - const query = new URLSearchParams({ deviceId, from, to, mail }); - const response = await fetch(`/api/reports/trips?${query.toString()}`, { headers }); - if (response.ok) { - const contentType = response.headers.get('content-type'); - if (contentType) { - if (contentType === 'application/json') { - setItems(await response.json()); - } else { - window.location.assign(window.URL.createObjectURL(await response.blob())); + setLoading(true); + try { + const query = new URLSearchParams({ deviceId, from, to, mail }); + const response = await fetch(`/api/reports/trips?${query.toString()}`, { headers }); + if (response.ok) { + const contentType = response.headers.get('content-type'); + if (contentType) { + if (contentType === 'application/json') { + setItems(await response.json()); + } else { + window.location.assign(window.URL.createObjectURL(await response.blob())); + } } + } else { + throw Error(await response.text()); } - } else { - throw Error(await response.text()); + } finally { + setLoading(false); } }); @@ -137,7 +144,7 @@ const TripReportPage = () => { </TableRow> </TableHead> <TableBody> - {items.map((item) => ( + {!loading ? items.map((item) => ( <TableRow key={item.startPositionId}> <TableCell className={classes.columnAction} padding="none"> {selectedItem === item ? ( @@ -156,7 +163,7 @@ const TripReportPage = () => { </TableCell> ))} </TableRow> - ))} + )) : (<TableShimmer columns={columns.length + 1} startAction />)} </TableBody> </Table> </div> 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> |