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

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

* Fix tests to include camera name

web/config/handlers.js

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

web/src/Sidebar.jsx

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

web/src/routes/Camera.jsx

@@ -120,7 +120,7 @@ export default function Camera({ camera }) {
 
   return (
     <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} />
 
       {player}

web/src/routes/Cameras.jsx

@@ -50,6 +50,10 @@ function Camera({ name }) {
       { name: 'Recordings', href: `/recording/${name}` },
     ];
   }, [name]);
+  const cleanName = useMemo(
+    () => { return `${name.replaceAll('_', ' ')}` },
+    [name]
+  );
   const icons = useMemo(
     () => [
       {
@@ -81,6 +85,6 @@ function Camera({ name }) {
   );
 
   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 />} />
   );
 }

web/src/routes/Debug.jsx

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

web/src/routes/Events.jsx

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

web/src/routes/Recording.jsx

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