diff options
author | Anton Tananaev <anton@traccar.org> | 2022-06-20 08:52:38 -0700 |
---|---|---|
committer | Anton Tananaev <anton@traccar.org> | 2022-06-20 08:52:38 -0700 |
commit | b84fa9a5ee0d68dd922b2fb13a62e9b453397da0 (patch) | |
tree | f8d98846b18ebe8b7af916147964551cebab6208 /modern | |
parent | d2de65460577a46dfa20f8df6870b10fa9c7d49e (diff) | |
download | trackermap-web-b84fa9a5ee0d68dd922b2fb13a62e9b453397da0.tar.gz trackermap-web-b84fa9a5ee0d68dd922b2fb13a62e9b453397da0.tar.bz2 trackermap-web-b84fa9a5ee0d68dd922b2fb13a62e9b453397da0.zip |
Add shimmer to reports
Diffstat (limited to 'modern')
-rw-r--r-- | modern/src/common/components/TableShimmer.js | 15 | ||||
-rw-r--r-- | modern/src/reports/EventReportPage.js | 35 | ||||
-rw-r--r-- | modern/src/reports/RouteReportPage.js | 33 | ||||
-rw-r--r-- | modern/src/reports/StatisticsPage.js | 23 | ||||
-rw-r--r-- | modern/src/reports/StopReportPage.js | 33 | ||||
-rw-r--r-- | modern/src/reports/SummaryReportPage.js | 37 | ||||
-rw-r--r-- | modern/src/reports/TripReportPage.js | 33 | ||||
-rw-r--r-- | modern/src/settings/CalendarsPage.js | 2 | ||||
-rw-r--r-- | modern/src/settings/CommandsPage.js | 2 | ||||
-rw-r--r-- | modern/src/settings/ComputedAttributesPage.js | 2 | ||||
-rw-r--r-- | modern/src/settings/DriversPage.js | 2 | ||||
-rw-r--r-- | modern/src/settings/GroupsPage.js | 2 | ||||
-rw-r--r-- | modern/src/settings/MaintenancesPage.js | 2 | ||||
-rw-r--r-- | modern/src/settings/NotificationsPage.js | 2 | ||||
-rw-r--r-- | modern/src/settings/UsersPage.js | 2 |
15 files changed, 135 insertions, 90 deletions
diff --git a/modern/src/common/components/TableShimmer.js b/modern/src/common/components/TableShimmer.js index 3208551f..e7d12f95 100644 --- a/modern/src/common/components/TableShimmer.js +++ b/modern/src/common/components/TableShimmer.js @@ -1,13 +1,16 @@ import React from 'react'; import { Skeleton, TableCell, TableRow } from '@mui/material'; -const TableShimmer = ({ columns }) => [...Array(3)].map(() => ( +const TableShimmer = ({ columns, startAction, endAction }) => [...Array(3)].map(() => ( <TableRow> - {[...Array(columns)].map(() => ( - <TableCell> - <Skeleton /> - </TableCell> - ))} + {[...Array(columns)].map((_, i) => { + const action = (startAction && i === 0) || (endAction && i === columns - 1); + return ( + <TableCell padding={action ? 'none' : 'normal'}> + {!action && <Skeleton />} + </TableCell> + ); + })} </TableRow> )); 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/CalendarsPage.js b/modern/src/settings/CalendarsPage.js index e46fe8f1..2602f702 100644 --- a/modern/src/settings/CalendarsPage.js +++ b/modern/src/settings/CalendarsPage.js @@ -57,7 +57,7 @@ const CalendarsPage = () => { <CollectionActions itemId={item.id} editPath="/settings/calendar" endpoint="calendars" setTimestamp={setTimestamp} /> </TableCell> </TableRow> - )) : (<TableShimmer columns={2} />)} + )) : (<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 3963952b..b6c88587 100644 --- a/modern/src/settings/CommandsPage.js +++ b/modern/src/settings/CommandsPage.js @@ -63,7 +63,7 @@ const CommandsPage = () => { <CollectionActions itemId={item.id} editPath="/settings/command" endpoint="commands" setTimestamp={setTimestamp} /> </TableCell> </TableRow> - )) : (<TableShimmer columns={4} />)} + )) : (<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 952ea677..59b3adbd 100644 --- a/modern/src/settings/ComputedAttributesPage.js +++ b/modern/src/settings/ComputedAttributesPage.js @@ -67,7 +67,7 @@ const ComputedAttributesPage = () => { </TableCell> )} </TableRow> - )) : (<TableShimmer columns={administrator ? 5 : 4} />)} + )) : (<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 7700f5cd..6ea97b31 100644 --- a/modern/src/settings/DriversPage.js +++ b/modern/src/settings/DriversPage.js @@ -59,7 +59,7 @@ const DriversPage = () => { <CollectionActions itemId={item.id} editPath="/settings/driver" endpoint="drivers" setTimestamp={setTimestamp} /> </TableCell> </TableRow> - )) : (<TableShimmer columns={3} />)} + )) : (<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 50f441eb..21785174 100644 --- a/modern/src/settings/GroupsPage.js +++ b/modern/src/settings/GroupsPage.js @@ -57,7 +57,7 @@ const GroupsPage = () => { <CollectionActions itemId={item.id} editPath="/settings/group" endpoint="groups" setTimestamp={setTimestamp} /> </TableCell> </TableRow> - )) : (<TableShimmer columns={2} />)} + )) : (<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 da77be7e..c82629e4 100644 --- a/modern/src/settings/MaintenancesPage.js +++ b/modern/src/settings/MaintenancesPage.js @@ -86,7 +86,7 @@ const MaintenacesPage = () => { <CollectionActions itemId={item.id} editPath="/settings/maintenance" endpoint="maintenance" setTimestamp={setTimestamp} /> </TableCell> </TableRow> - )) : (<TableShimmer columns={5} />)} + )) : (<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 6e268507..3c9a9192 100644 --- a/modern/src/settings/NotificationsPage.js +++ b/modern/src/settings/NotificationsPage.js @@ -76,7 +76,7 @@ const NotificationsPage = () => { <CollectionActions itemId={item.id} editPath="/settings/notification" endpoint="notifications" setTimestamp={setTimestamp} /> </TableCell> </TableRow> - )) : (<TableShimmer columns={5} />)} + )) : (<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 cffee2f6..a274d569 100644 --- a/modern/src/settings/UsersPage.js +++ b/modern/src/settings/UsersPage.js @@ -64,7 +64,7 @@ const UsersPage = () => { <CollectionActions itemId={item.id} editPath="/settings/user" endpoint="users" setTimestamp={setTimestamp} /> </TableCell> </TableRow> - )) : (<TableShimmer columns={5} />)} + )) : (<TableShimmer columns={5} endAction />)} </TableBody> </Table> <CollectionFab editPath="/settings/user" /> |