chris/frigate
1
0
Fork 0
forked from Github/frigate
Code Pull Requests Packages Activity

feat(web): auto-paginate events page

Browse Source
This commit is contained in:
Paul Armstrong
2021-01-26 07:04:03 -08:00
committed by Blake Blackshear
parent 40d5a9f890
commit e6516235fa
17 changed files with 424 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
web/src/components/AutoUpdatingCameraImage.jsx
View File

@@ -1,6 +1,5 @@
import { h } from 'preact';
import CameraImage from './CameraImage';
import { ApiHost, Config } from '../context';
import { useCallback, useState } from 'preact/hooks';
const MIN_LOAD_TIMEOUT_MS = 200;

2
web/src/components/Box.jsx
View File

@@ -4,7 +4,7 @@ export default function Box({ children, className = '', hover = false, href, ...
const Element = href ? 'a' : 'div';
return (
<Element
className={`bg-white dark:bg-gray-700 shadow-lg rounded-lg p-4 ${
className={`bg-white dark:bg-gray-700 shadow-lg rounded-lg p-2 lg:p-4 ${
hover ? 'hover:bg-gray-300 hover:dark:bg-gray-500 dark:hover:text-gray-900 dark:hover:text-gray-900' : ''
} ${className}`}
href={href}

6
web/src/components/CameraImage.jsx
View File

@@ -1,10 +1,10 @@
import { h } from 'preact';
import { ApiHost, Config } from '../context';
import { useApiHost, useConfig } from '../api';
import { useCallback, useEffect, useContext, useMemo, useRef, useState } from 'preact/hooks';
export default function CameraImage({ camera, onload, searchParams = '' }) {
const config = useContext(Config);
const apiHost = useContext(ApiHost);
const { data: config } = useConfig();
const apiHost = useApiHost();
const [availableWidth, setAvailableWidth] = useState(0);
const [loadedSrc, setLoadedSrc] = useState(null);
const containerRef = useRef(null);

26
web/src/components/Table.jsx
View File

@@ -6,12 +6,12 @@ export function Table({ children, className = '' }) {
);
}
export function Thead({ children, className = '' }) {
return <thead className={`${className}`}>{children}</thead>;
export function Thead({ children, className }) {
return <thead className={className}>{children}</thead>;
}
export function Tbody({ children, className = '' }) {
return <tbody className={`${className}`}>{children}</tbody>;
export function Tbody({ children, className }) {
return <tbody className={className}>{children}</tbody>;
}
export function Tfoot({ children, className = '' }) {
@@ -19,13 +19,21 @@ export function Tfoot({ children, className = '' }) {
}
export function Tr({ children, className = '', index }) {
return <tr className={`${index % 2 ? 'bg-gray-200 dark:bg-gray-700' : ''} ${className}`}>{children}</tr>;
return <tr className={`${index % 2 ? 'bg-gray-200 dark:bg-gray-600' : ''} ${className}`}>{children}</tr>;
}
export function Th({ children, className = '' }) {
return <th className={`border-b-2 border-gray-400 p-4 text-left ${className}`}>{children}</th>;
export function Th({ children, className = '', colspan }) {
return (
<th className={`border-b-2 border-gray-400 p-1 md:p-2 text-left ${className}`} colspan={colspan}>
{children}
</th>
);
}
export function Td({ children, className = '' }) {
return <td className={`p-4 ${className}`}>{children}</td>;
export function Td({ children, className = '', colspan }) {
return (
<td className={`p-1 md:p-2 ${className}`} colspan={colspan}>
{children}
</td>
);
}