administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-02 09:15:22 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

feat: added color mapping by label

Browse Source
This commit is contained in:
JohnMark Sill 2022-02-11 18:25:25 -06:00
parent 36fd261394
commit 21f9e9831b
2 changed files with 13 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/components/Timeline/Timeline.tsx
View File

@ -9,7 +9,7 @@ export interface TimelineEvent {
startTime: Date;
endTime: Date;
id: string;
label: string;
label: 'car' | 'person' | 'dog';
}
export interface TimelineEventBlock extends TimelineEvent {

13
web/src/components/Timeline/TimelineBlockView.tsx
View File

@ -9,11 +9,22 @@ interface TimelineBlockViewProps {
export const TimelineBlockView = ({ block, onClick }: TimelineBlockViewProps) => {
const onClickHandler = () => onClick(block);
const getColor = (eventBlock: TimelineEventBlock) => {
if (eventBlock.label === 'car') {
return 'red';
} else if (eventBlock.label === 'person') {
return 'blue';
} else if (eventBlock.label === 'dog') {
return 'green';
}
return 'gray';
};
return (
<div
key={block.id}
onClick={onClickHandler}
className='absolute z-10 rounded-full bg-blue-300 h-2'
className={`absolute z-10 rounded-full bg-${getColor(block)}-400 h-2`}
style={{
top: `${block.yOffset}px`,
left: `${block.positionX}px`,