Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2025-10-27 10:52:11 +01:00
Code Issues Projects Releases Wiki Activity

Cleanup names of cameras, zones, & labels in the UI (#3708)

Browse Source 
* Cleanup names of cameras, zones, & labels in the UI

* Fix tests to include camera name
This commit is contained in:
Nicolas Mowen 2022-08-25 05:44:34 -06:00 committed by GitHub
parent 911d6fdfa7
commit 0d6dd1ed0f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 16 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
web/config/handlers.js
View File

@ -68,6 +68,7 @@ export const handlers = [
top_score: Math.random(), top_score: Math.random(),
zones: ['front_patio'], zones: ['front_patio'],
thumbnail: '/9j/4aa...', thumbnail: '/9j/4aa...',
camera: 'camera_name',
})) }))
) )
); );

4
web/src/Sidebar.jsx
View File

@ -65,7 +65,7 @@ function CameraSection({ sortedCameras }) {
<Fragment> <Fragment>
<Separator /> <Separator />
{sortedCameras.map(([camera]) => ( {sortedCameras.map(([camera]) => (
<Destination key={camera} href={`/cameras/${camera}`} text={camera} /> <Destination key={camera} href={`/cameras/${camera}`} text={camera.replaceAll('_', ' ')} />
))} ))}
<Separator /> <Separator />
</Fragment> </Fragment>
@ -83,7 +83,7 @@ function RecordingSection({ sortedCameras }) {
key={camera} key={camera}
path={`/recording/${camera}/:date?/:hour?/:seconds?`} path={`/recording/${camera}/:date?/:hour?/:seconds?`}
href={`/recording/${camera}`} href={`/recording/${camera}`}
text={camera} text={camera.replaceAll('_', ' ')}
/> />
); );
})} })}

2
web/src/routes/Camera.jsx
View File

@ -120,7 +120,7 @@ export default function Camera({ camera }) {
return ( return (
<div className="space-y-4 p-2 px-4"> <div className="space-y-4 p-2 px-4">
<Heading size="2xl">{camera}</Heading> <Heading size="2xl">{camera.replaceAll('_', ' ')}</Heading>
<ButtonsTabbed viewModes={['live', 'debug']} setViewMode={setViewMode} /> <ButtonsTabbed viewModes={['live', 'debug']} setViewMode={setViewMode} />
{player} {player}

6
web/src/routes/Cameras.jsx
View File

@ -50,6 +50,10 @@ function Camera({ name }) {
{ name: 'Recordings', href: `/recording/${name}` }, { name: 'Recordings', href: `/recording/${name}` },
]; ];
}, [name]); }, [name]);
const cleanName = useMemo(
() => { return `${name.replaceAll('_', ' ')}` },
[name]
);
const icons = useMemo( const icons = useMemo(
() => [ () => [
{ {
@ -81,6 +85,6 @@ function Camera({ name }) {
); );
return ( return (
<Card buttons={buttons} href={href} header={name} icons={icons} media={<CameraImage camera={name} stretch />} /> <Card buttons={buttons} href={href} header={cleanName} icons={icons} media={<CameraImage camera={name} stretch />} />
); );
} }

2
web/src/routes/Debug.jsx
View File

@ -81,7 +81,7 @@ export default function Debug() {
{cameraNames.map((camera, i) => ( {cameraNames.map((camera, i) => (
<Tr key={i} index={i}> <Tr key={i} index={i}>
<Td> <Td>
<Link href={`/cameras/${camera}`}>{camera}</Link> <Link href={`/cameras/${camera}`}>{camera.replaceAll('_', ' ')}</Link>
</Td> </Td>
{cameraDataKeys.map((name) => ( {cameraDataKeys.map((name) => (
<Td key={`${name}-${camera}`}>{cameras[camera][name]}</Td> <Td key={`${name}-${camera}`}>{cameras[camera][name]}</Td>

10
web/src/routes/Events.jsx
View File

@ -251,7 +251,7 @@ export default function Events({ path, ...props }) {
<option value="all">all cameras</option> <option value="all">all cameras</option>
{filterValues.cameras.map((item) => ( {filterValues.cameras.map((item) => (
<option key={item} value={item}> <option key={item} value={item}>
{item} {item.replaceAll('_', ' ')}
</option> </option>
))} ))}
</select> </select>
@ -262,7 +262,7 @@ export default function Events({ path, ...props }) {
> >
<option value="all">all labels</option> <option value="all">all labels</option>
{filterValues.labels.map((item) => ( {filterValues.labels.map((item) => (
<option key={item} value={item}> <option key={item.replaceAll('_', ' ')} value={item}>
{item} {item}
</option> </option>
))} ))}
@ -275,7 +275,7 @@ export default function Events({ path, ...props }) {
<option value="all">all zones</option> <option value="all">all zones</option>
{filterValues.zones.map((item) => ( {filterValues.zones.map((item) => (
<option key={item} value={item}> <option key={item} value={item}>
{item} {item.replaceAll('_', ' ')}
</option> </option>
))} ))}
</select> </select>
@ -457,11 +457,11 @@ export default function Events({ path, ...props }) {
</div> </div>
<div className="capitalize text-sm flex align-center mt-1"> <div className="capitalize text-sm flex align-center mt-1">
<Camera className="h-5 w-5 mr-2 inline" /> <Camera className="h-5 w-5 mr-2 inline" />
{event.camera} {event.camera.replaceAll('_', ' ')}
</div> </div>
<div className="capitalize text-sm flex align-center"> <div className="capitalize text-sm flex align-center">
<Zone className="w-5 h-5 mr-2 inline" /> <Zone className="w-5 h-5 mr-2 inline" />
{event.zones.join(',')} {event.zones.join(', ').replaceAll('_', ' ')}
</div> </div>
</div> </div>
<div class="hidden sm:flex flex-col justify-end mr-2"> <div class="hidden sm:flex flex-col justify-end mr-2">

2
web/src/routes/Recording.jsx
View File

@ -121,7 +121,7 @@ export default function Recording({ camera, date, hour = '00', minute = '00', se
return ( return (
<div className="space-y-4 p-2 px-4"> <div className="space-y-4 p-2 px-4">
<Heading>{camera} Recordings</Heading> <Heading>{camera.replaceAll('_', ' ')} Recordings</Heading>
<VideoPlayer <VideoPlayer
onReady={(player) => { onReady={(player) => {