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

Add support for other icons

Browse Source
This commit is contained in:
Nick Mowen 2023-10-04 06:20:26 -06:00
parent 181351aa18
commit fad7cecbc0
3 changed files with 39 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
web/src/components/TimelineSummary.jsx
View File

@ -8,7 +8,9 @@ import PlayIcon from '../icons/Play';
import ExitIcon from '../icons/Exit'; import ExitIcon from '../icons/Exit';
import StationaryObjectIcon from '../icons/StationaryObject'; import StationaryObjectIcon from '../icons/StationaryObject';
import FaceIcon from '../icons/Face'; import FaceIcon from '../icons/Face';
import { Zone } from '../icons/Zone'; import LicensePlateIcon from '../icons/LicensePlate';
import DeliveryTruckIcon from '../icons/DeliveryTruck';
import ZoneIcon from '../icons/Zone';
import { useMemo, useState } from 'preact/hooks'; import { useMemo, useState } from 'preact/hooks';
import Button from './Button'; import Button from './Button';
@ -125,11 +127,15 @@ function getTimelineIcon(timelineItem) {
case 'stationary': case 'stationary':
return <StationaryObjectIcon className="w-8" />; return <StationaryObjectIcon className="w-8" />;
case 'entered_zone': case 'entered_zone':
return <Zone className="w-8" />; return <ZoneIcon className="w-8" />;
case 'attribute': case 'attribute':
switch (timelineItem.data.attribute) { switch (timelineItem.data.attribute) {
case 'face': case 'face':
return <FaceIcon className="w-8" />; return <FaceIcon className="w-8" />;
case 'license_plate':
return <LicensePlateIcon className="w-8" />;
default:
return <DeliveryTruckIcon className="w-8" />;
} }
} }
} }
@ -169,7 +175,7 @@ function getTimelineItemDescription(config, timelineItem, event) {
date_style: 'short', date_style: 'short',
time_style: 'medium', time_style: 'medium',
time_format: config.ui.time_format, time_format: config.ui.time_format,
}, }
)}`; )}`;
case 'gone': case 'gone':
return `${event.label} left at ${formatUnixTimestampToDateTime(timelineItem.timestamp, { return `${event.label} left at ${formatUnixTimestampToDateTime(timelineItem.timestamp, {

15
web/src/icons/DeliveryTruck.jsx Normal file
View File

@ -0,0 +1,15 @@
import { h } from 'preact';
import { memo } from 'preact/compat';
export function StationaryObject({ className = '' }) {
return (
<svg className={`fill-current ${className}`} viewBox="0 -960 960 960">
<path
fill="currentColor"
d="M240-160q-50 0-85-35t-35-85H40v-440q0-33 23.5-56.5T120-800h560v160h120l120 160v200h-80q0 50-35 85t-85 35q-50 0-85-35t-35-85H360q0 50-35 85t-85 35Zm0-80q17 0 28.5-11.5T280-280q0-17-11.5-28.5T240-320q-17 0-28.5 11.5T200-280q0 17 11.5 28.5T240-240ZM120-360h32q17-18 39-29t49-11q27 0 49 11t39 29h272v-360H120v360Zm600 120q17 0 28.5-11.5T760-280q0-17-11.5-28.5T720-320q-17 0-28.5 11.5T680-280q0 17 11.5 28.5T720-240Zm-40-200h170l-90-120h-80v120ZM360-540Z"
/>
</svg>
);
}
export default memo(StationaryObject);

15
web/src/icons/LicensePlate.jsx Normal file
View File

@ -0,0 +1,15 @@
import { h } from 'preact';
import { memo } from 'preact/compat';
export function StationaryObject({ className = '' }) {
return (
<svg className={`fill-current ${className}`} viewBox="0 -960 960 960">
<path
fill="currentColor"
d="M400-280h360v-240H400v240ZM160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm0-80h640v-480H160v480Zm0 0v-480 480Z"
/>
</svg>
);
}
export default memo(StationaryObject);