blakeblackshear.frigate/web/src/Cameras.jsx

33 lines
973 B
React
Raw Normal View History

2021-01-09 18:26:46 +01:00
import { h } from 'preact';
import ActivityIndicator from './components/ActivityIndicator';
2021-02-02 05:28:25 +01:00
import Card from './components/Card';
import CameraImage from './components/CameraImage';
2021-01-09 18:26:46 +01:00
import Events from './Events';
import Heading from './components/Heading';
import { route } from 'preact-router';
2021-01-26 16:04:03 +01:00
import { useConfig } from './api';
2021-02-02 05:28:25 +01:00
import { useMemo } from 'preact/hooks';
2021-01-09 18:26:46 +01:00
export default function Cameras() {
2021-01-26 16:04:03 +01:00
const { data: config, status } = useConfig();
2021-01-09 18:26:46 +01:00
2021-01-26 16:04:03 +01:00
if (!config) {
2021-01-09 18:26:46 +01:00
return <p>loading</p>;
}
return (
2021-02-04 00:35:28 +01:00
<div className="grid grid-cols-1 3xl:grid-cols-3 md:grid-cols-2 gap-4">
2021-01-09 18:26:46 +01:00
{Object.keys(config.cameras).map((camera) => (
<Camera name={camera} />
))}
</div>
);
}
function Camera({ name }) {
const href = `/cameras/${name}`;
2021-02-02 05:28:25 +01:00
const buttons = useMemo(() => [{ name: 'Events', href: `/events?camera=${name}` }], [name]);
2021-01-09 18:26:46 +01:00
2021-02-02 05:28:25 +01:00
return <Card buttons={buttons} href={href} header={name} media={<CameraImage camera={name} />} />;
2021-01-09 18:26:46 +01:00
}