aboutsummaryrefslogtreecommitdiff
path: root/modern/src/settings/DriversPage.jsx
diff options
context:
space:
mode:
Diffstat (limited to 'modern/src/settings/DriversPage.jsx')
-rw-r--r--modern/src/settings/DriversPage.jsx66
1 files changed, 66 insertions, 0 deletions
diff --git a/modern/src/settings/DriversPage.jsx b/modern/src/settings/DriversPage.jsx
new file mode 100644
index 00000000..72834860
--- /dev/null
+++ b/modern/src/settings/DriversPage.jsx
@@ -0,0 +1,66 @@
+import React, { useState } from 'react';
+import {
+ Table, TableRow, TableCell, TableHead, TableBody,
+} from '@mui/material';
+import { useEffectAsync } from '../reactHelper';
+import { useTranslation } from '../common/components/LocalizationProvider';
+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';
+import SearchHeader, { filterByKeyword } from './components/SearchHeader';
+import useSettingsStyles from './common/useSettingsStyles';
+
+const DriversPage = () => {
+ const classes = useSettingsStyles();
+ const t = useTranslation();
+
+ const [timestamp, setTimestamp] = useState(Date.now());
+ const [items, setItems] = useState([]);
+ const [searchKeyword, setSearchKeyword] = useState('');
+ const [loading, setLoading] = useState(false);
+
+ useEffectAsync(async () => {
+ 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]);
+
+ return (
+ <PageLayout menu={<SettingsMenu />} breadcrumbs={['settingsTitle', 'sharedDrivers']}>
+ <SearchHeader keyword={searchKeyword} setKeyword={setSearchKeyword} />
+ <Table className={classes.table}>
+ <TableHead>
+ <TableRow>
+ <TableCell>{t('sharedName')}</TableCell>
+ <TableCell>{t('deviceIdentifier')}</TableCell>
+ <TableCell className={classes.columnAction} />
+ </TableRow>
+ </TableHead>
+ <TableBody>
+ {!loading ? items.filter(filterByKeyword(searchKeyword)).map((item) => (
+ <TableRow key={item.id}>
+ <TableCell>{item.name}</TableCell>
+ <TableCell>{item.uniqueId}</TableCell>
+ <TableCell className={classes.columnAction} padding="none">
+ <CollectionActions itemId={item.id} editPath="/settings/driver" endpoint="drivers" setTimestamp={setTimestamp} />
+ </TableCell>
+ </TableRow>
+ )) : (<TableShimmer columns={3} endAction />)}
+ </TableBody>
+ </Table>
+ <CollectionFab editPath="/settings/driver" />
+ </PageLayout>
+ );
+};
+
+export default DriversPage;