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

add event card to overlay

Browse Source
This commit is contained in:
Jason Hunter
2021-06-02 04:27:07 -04:00
committed by Blake Blackshear
parent d3dc018260
commit ca20c735f7
5 changed files with 65 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
web/src/components/RecordingPlaylist.jsx
View File

@@ -2,6 +2,7 @@ import { h } from 'preact';
import { useState } from 'preact/hooks';
import { format, parseISO } from 'date-fns';
import Accordion from '../components/Accordion';
import EventCard from '../components/EventCard';
import Link from '../components/Link';
import Menu from '../icons/Menu';
import MenuOpen from '../icons/MenuOpen';
@@ -16,11 +17,16 @@ export default function RecordingPlaylist({ camera, recordings, selectedDate })
result.push(
<Accordion title={format(date, 'MMM d, yyyy')} selected={recording.date === selectedDate}>
{recording.recordings.map((item) => (
<div className="text-white bg-black bg-opacity-50 border-b border-gray-500 py-2 px-4 mb-1">
<Link href={`/recordings/${camera}/${recording.date}/${item.hour}`} type="text">
{item.hour}:00
</Link>
<span className="float-right">{item.events} Events</span>
<div className="mb-2">
<div className="text-white bg-black bg-opacity-50 border-b border-gray-500 py-2 px-4 mb-1">
<Link href={`/recordings/${camera}/${recording.date}/${item.hour}`} type="text">
{item.hour}:00
</Link>
<span className="float-right">{item.events.length} Events</span>
</div>
{item.events.map((event) => (
<EventCard camera={camera} event={event} />
))}
</div>
))}
</Accordion>
@@ -30,7 +36,7 @@ export default function RecordingPlaylist({ camera, recordings, selectedDate })
const openClass = active ? '-left-6' : 'right-0';
return (
<div className="flex absolute inset-y-0 right-0 w-1/2 md:w-1/3 max-w-xl min-w-lg text-base text-white font-sans">
<div className="flex absolute inset-y-0 right-0 w-9/12 md:w-1/3 max-w-xl min-w-lg text-base text-white font-sans">
<div
onClick={toggle}
className={`absolute ${openClass} cursor-pointer items-center self-center rounded-tl-lg rounded-bl-lg border border-r-0 w-6 h-20 py-7 bg-gray-800 bg-opacity-70`}