From b84fa9a5ee0d68dd922b2fb13a62e9b453397da0 Mon Sep 17 00:00:00 2001 From: Anton Tananaev Date: Mon, 20 Jun 2022 08:52:38 -0700 Subject: Add shimmer to reports --- modern/src/common/components/TableShimmer.js | 15 ++++++----- modern/src/reports/EventReportPage.js | 35 +++++++++++++++---------- modern/src/reports/RouteReportPage.js | 33 ++++++++++++++---------- modern/src/reports/StatisticsPage.js | 23 +++++++++++------ modern/src/reports/StopReportPage.js | 33 ++++++++++++++---------- modern/src/reports/SummaryReportPage.js | 37 ++++++++++++++++----------- modern/src/reports/TripReportPage.js | 33 ++++++++++++++---------- modern/src/settings/CalendarsPage.js | 2 +- modern/src/settings/CommandsPage.js | 2 +- modern/src/settings/ComputedAttributesPage.js | 2 +- modern/src/settings/DriversPage.js | 2 +- modern/src/settings/GroupsPage.js | 2 +- modern/src/settings/MaintenancesPage.js | 2 +- modern/src/settings/NotificationsPage.js | 2 +- 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(() => ( - {[...Array(columns)].map(() => ( - - - - ))} + {[...Array(columns)].map((_, i) => { + const action = (startAction && i === 0) || (endAction && i === columns - 1); + return ( + + {!action && } + + ); + })} )); 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 = () => { - {items.map((item) => ( + {!loading ? items.map((item) => ( {columns.map((key) => ( @@ -137,7 +144,7 @@ const EventReportPage = () => { ))} - ))} + )) : ()} 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 = () => { - {items.map((item) => ( + {!loading ? items.map((item) => ( {selectedItem === item ? ( @@ -97,7 +104,7 @@ const RouteReportPage = () => { ))} - ))} + )) : ()} 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 = () => { - {items.map((item) => ( + {!loading ? items.map((item) => ( {columns.map((key) => ( @@ -65,7 +72,7 @@ const StatisticsPage = () => { ))} - ))} + )) : ()} 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 = () => { - {items.map((item) => ( + {!loading ? items.map((item) => ( {selectedItem === item ? ( @@ -130,7 +137,7 @@ const StopReportPage = () => { ))} - ))} + )) : ()} 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 = () => { - {items.map((item) => ( + {!loading ? items.map((item) => ( {columns.map((key) => ( @@ -115,7 +122,7 @@ const SummaryReportPage = () => { ))} - ))} + )) : ()} 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 = () => { - {items.map((item) => ( + {!loading ? items.map((item) => ( {selectedItem === item ? ( @@ -156,7 +163,7 @@ const TripReportPage = () => { ))} - ))} + )) : ()} 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 = () => { - )) : ()} + )) : ()} 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 = () => { - )) : ()} + )) : ()} 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 = () => { )} - )) : ()} + )) : ()} 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 = () => { - )) : ()} + )) : ()} 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 = () => { - )) : ()} + )) : ()} 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 = () => { - )) : ()} + )) : ()} 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 = () => { - )) : ()} + )) : ()} 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 = () => { - )) : ()} + )) : ()} -- cgit v1.2.3