ElixirForge/frigate
1
0
Fork 0
mirror of https://github.com/alexhopeoconnor/frigate.git synced 2026-10-14 15:31:32 +10:00
Code Releases Activity

refactor(web): styles and styleguide

Browse Source
This commit is contained in:
Paul Armstrong
2021-02-20 08:20:17 -06:00
committed by Blake Blackshear
parent 01c3b4fa6e
commit 5ed7a17f46
26 changed files with 833 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/Debug.jsx
+39 -44
View File
@@ -1,6 +1,5 @@
import { h } from 'preact';
import ActivityIndicator from './components/ActivityIndicator';
import Box from './components/Box';
import Button from './components/Button';
import Heading from './components/Heading';
import Link from './components/Link';
@@ -50,63 +49,59 @@ export default function Debug() {
Debug <span className="text-sm">{service.version}</span>
</Heading>
<Box>
<Table className="w-full">
<Thead>
<Tr>
<Th>detector</Th>
<Table className="w-full">
<Thead>
<Tr>
<Th>detector</Th>
{detectorDataKeys.map((name) => (
<Th>{name.replace('_', ' ')}</Th>
))}
</Tr>
</Thead>
<Tbody>
{detectorNames.map((detector, i) => (
<Tr index={i}>
<Td>{detector}</Td>
{detectorDataKeys.map((name) => (
<Th>{name.replace('_', ' ')}</Th>
<Td key={`${name}-${detector}`}>{detectors[detector][name]}</Td>
))}
</Tr>
</Thead>
<Tbody>
{detectorNames.map((detector, i) => (
<Tr index={i}>
<Td>{detector}</Td>
{detectorDataKeys.map((name) => (
<Td key={`${name}-${detector}`}>{detectors[detector][name]}</Td>
))}
</Tr>
))}
</Tbody>
</Table>
</Box>
))}
</Tbody>
</Table>
<Box>
<Table className="w-full">
<Thead>
<Tr>
<Th>camera</Th>
<Table className="w-full">
<Thead>
<Tr>
<Th>camera</Th>
{cameraDataKeys.map((name) => (
<Th>{name.replace('_', ' ')}</Th>
))}
</Tr>
</Thead>
<Tbody>
{cameraNames.map((camera, i) => (
<Tr index={i}>
<Td>
<Link href={`/cameras/${camera}`}>{camera}</Link>
</Td>
{cameraDataKeys.map((name) => (
<Th>{name.replace('_', ' ')}</Th>
<Td key={`${name}-${camera}`}>{cameras[camera][name]}</Td>
))}
</Tr>
</Thead>
<Tbody>
{cameraNames.map((camera, i) => (
<Tr index={i}>
<Td>
<Link href={`/cameras/${camera}`}>{camera}</Link>
</Td>
{cameraDataKeys.map((name) => (
<Td key={`${name}-${camera}`}>{cameras[camera][name]}</Td>
))}
</Tr>
))}
</Tbody>
</Table>
</Box>
))}
</Tbody>
</Table>
<Box className="relative">
<div className="relative">
<Heading size="sm">Config</Heading>
<Button className="absolute top-4 right-8" onClick={handleCopyConfig}>
<Button className="absolute top-8 right-4" onClick={handleCopyConfig}>
Copy to Clipboard
</Button>
<pre className="overflow-auto font-mono text-gray-900 dark:text-gray-100 rounded bg-gray-100 dark:bg-gray-800 p-2 max-h-96">
{JSON.stringify(config, null, 2)}
</pre>
</Box>
</div>
</div>
);
}