From 0d6dd1ed0fa5a6d5dacd34100d6e2488eb16e432 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Thu, 25 Aug 2022 05:44:34 -0600
Subject: [PATCH] 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       |  1 +
 web/src/Sidebar.jsx          |  4 ++--
 web/src/routes/Camera.jsx    |  2 +-
 web/src/routes/Cameras.jsx   |  6 +++++-
 web/src/routes/Debug.jsx     |  2 +-
 web/src/routes/Events.jsx    | 10 +++++-----
 web/src/routes/Recording.jsx |  2 +-
 7 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/web/config/handlers.js b/web/config/handlers.js
index 59a1649d1..0166d0c3a 100644
--- a/web/config/handlers.js
+++ b/web/config/handlers.js
@@ -68,6 +68,7 @@ export const handlers = [
           top_score: Math.random(),
           zones: ['front_patio'],
           thumbnail: '/9j/4aa...',
+          camera: 'camera_name',
         }))
       )
     );
diff --git a/web/src/Sidebar.jsx b/web/src/Sidebar.jsx
index a74a8c80b..62b040379 100644
--- a/web/src/Sidebar.jsx
+++ b/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('_', ' ')}
           />
         );
       })}
diff --git a/web/src/routes/Camera.jsx b/web/src/routes/Camera.jsx
index 39f068568..97f80913e 100644
--- a/web/src/routes/Camera.jsx
+++ b/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}
diff --git a/web/src/routes/Cameras.jsx b/web/src/routes/Cameras.jsx
index 6628112b3..7e75d1da7 100644
--- a/web/src/routes/Cameras.jsx
+++ b/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 />} />
   );
 }
diff --git a/web/src/routes/Debug.jsx b/web/src/routes/Debug.jsx
index 0cc3e3e1e..b404c61a9 100644
--- a/web/src/routes/Debug.jsx
+++ b/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>
diff --git a/web/src/routes/Events.jsx b/web/src/routes/Events.jsx
index a35ca79d0..b93d661e4 100644
--- a/web/src/routes/Events.jsx
+++ b/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">
diff --git a/web/src/routes/Recording.jsx b/web/src/routes/Recording.jsx
index 23a888a8f..3c8607833 100644
--- a/web/src/routes/Recording.jsx
+++ b/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) => {