From f2a9339544b996c2a8ef996d551334a1d81946e1 Mon Sep 17 00:00:00 2001
From: Justin Johnson <justin@oxd.com>
Date: Tue, 26 Mar 2024 19:19:50 -0700
Subject: [PATCH] DBCC22-1858 Camera panel details

---
 src/frontend/src/Components/FriendlyTime.js   | 61 +++++++++++--------
 src/frontend/src/Components/map/camPopup.js   | 17 ++----
 src/frontend/src/pages/CameraDetailsPage.js   |  5 +-
 src/frontend/src/pages/CameraDetailsPage.scss |  3 +-
 4 files changed, 44 insertions(+), 42 deletions(-)

diff --git a/src/frontend/src/Components/FriendlyTime.js b/src/frontend/src/Components/FriendlyTime.js
index 7dc324512..bafbe2d4d 100644
--- a/src/frontend/src/Components/FriendlyTime.js
+++ b/src/frontend/src/Components/FriendlyTime.js
@@ -18,41 +18,48 @@ const datetimeFormat = {
   timeZoneName: 'short',
 };
 const formatter = new Intl.DateTimeFormat('en-US', datetimeFormat);
+const ONE_DAY = 1000 * 60 * 60 * 24; // 24 hours in milliseconds
 
-export default function FriendlyTime( {date} ) {
+export default function FriendlyTime({ date, asDate=false, includeFullIfHumanized=false }) {
   const [showTooltip, setShowTooltip] = useState(false);
 
-  // get time difference in seconds
+  // get time difference in milliseconds
   const timeDiff = (new Date() - new Date(date));
   const dateFormatted = formatter.format(new Date(date));
-
   // if difference is less than 24hrs
-  if (timeDiff < 86400000 ) {
-    return <div
-            className="friendly-time"
-            title={dateFormatted}
-            onClick={(event) => {
+  const humanize = timeDiff < ONE_DAY;
+
+  if (humanize && !asDate) {
+    return (
+      <React.Fragment>
+        { includeFullIfHumanized &&
+          <p className="friendly-time-text formatted-date">{dateFormatted}</p>
+        }
+
+        <div
+          className="friendly-time"
+          title={dateFormatted}
+          onClick={(event) => {
+            event.stopPropagation();
+            setShowTooltip(!showTooltip);
+          }}
+          onKeyDown={(keyEvent) => {
+            if (keyEvent.keyCode == 13) {
               event.stopPropagation();
-              setShowTooltip(!showTooltip);
-            }}
-            onKeyDown={(keyEvent) => {
-              if (keyEvent.keyCode == 13) {
-                event.stopPropagation();
-                setShowTooltip(!showTooltip)
-              }
-            }}>
-
-            <p className="friendly-time-text">
-              <ReactTimeAgo date={date} locale="en-US"/>
-            </p>
-            <span className={"friendly-time__tooltip" + (showTooltip ? " showTooltip" : "")}>{dateFormatted}</span>
-          </div>
-  }
+              setShowTooltip(!showTooltip)
+            }
+          }}>
 
-  // else return formatted date without tooltip
-  else {
-    return <p className="friendly-time-text formatted-date">
-            {dateFormatted}
+          <p className="friendly-time-text">
+            <ReactTimeAgo date={date} locale="en-US"/>
           </p>
+          <span className={"friendly-time__tooltip" + (showTooltip ? " showTooltip" : "")}>
+            {dateFormatted}
+          </span>
+        </div>
+      </React.Fragment>
+    )
   }
+
+  return <p className="friendly-time-text formatted-date">{dateFormatted}</p>;
 }
diff --git a/src/frontend/src/Components/map/camPopup.js b/src/frontend/src/Components/map/camPopup.js
index 97c4532a6..1f1d7bb28 100644
--- a/src/frontend/src/Components/map/camPopup.js
+++ b/src/frontend/src/Components/map/camPopup.js
@@ -79,7 +79,7 @@ export default function CamPopup(props) {
         </div>
         <p className="name">Camera</p>
       </div>
-      {camera &&
+      { camera &&
         <div className="popup__content">
           <div className="popup__content__title">
             <p className="name"
@@ -88,26 +88,21 @@ export default function CamPopup(props) {
                 if (keyEvent.keyCode == 13) {
                   handlePopupClick();
                 }
-              }}>
-
-              {camera.name}
-            </p>
+              }}>{camera.name}</p>
           </div>
-          {camera.is_on ?
+          { camera.is_on ?
             <div className="popup__content__image">
               <div className="clip">
                 <img src={camera.links.imageDisplay} width='300' />
               </div>
               <div className="timestamp">
                 <p className="driveBC">Drive<span>BC</span></p>
-                <FriendlyTime date={camera.last_update_modified} />
+                <FriendlyTime date={camera.last_update_modified} includeFullIfHumanized />
               </div>
             </div> :
             <div className="popup__content__image">
               <div className="camera-unavailable">
-                <div className="card-pill">
-                  <p>Unavailable</p>
-                </div>
+                <div className="card-pill"><p>Unavailable</p></div>
                 <div className="card-img-box unavailable">
                   <FontAwesomeIcon icon={faVideoSlash} />
                 </div>
@@ -115,7 +110,7 @@ export default function CamPopup(props) {
               </div>
               <div className="timestamp">
                 <p className="driveBC">Drive<span>BC</span></p>
-                <FriendlyTime date={camera.last_update_modified} />
+                <FriendlyTime date={camera.last_update_modified} asDate={true}/>
               </div>
             </div>
           }
diff --git a/src/frontend/src/pages/CameraDetailsPage.js b/src/frontend/src/pages/CameraDetailsPage.js
index 773765190..16909f2f4 100644
--- a/src/frontend/src/pages/CameraDetailsPage.js
+++ b/src/frontend/src/pages/CameraDetailsPage.js
@@ -407,7 +407,7 @@ export default function CameraDetailsPage() {
                     {!replay && (
                       <div className="timestamp">
                         <p className="driveBC">Drive<span>BC</span></p>
-                        <FriendlyTime date={lastUpdate} />
+                        <FriendlyTime date={lastUpdate} includeFullIfHumanized />
                       </div>
                     )}
                   </div>
@@ -418,8 +418,7 @@ export default function CameraDetailsPage() {
                     <FontAwesomeIcon icon={faFlag} />Nearby
                   </span>
                 }>
-                  <div className="actions-bar actions-bar--nearby">
-                  </div>
+                  <div className="actions-bar actions-bar--nearby"></div>
                   <div className="map-wrap map-context-wrap">
                     <DndProvider options={HTML5toTouch}>
                       <Map camera={camera} isPreview={true} cameraHandler={initCamera} mapViewRoute={mapViewRoute}/>
diff --git a/src/frontend/src/pages/CameraDetailsPage.scss b/src/frontend/src/pages/CameraDetailsPage.scss
index 07212bcd9..ae892e5bf 100644
--- a/src/frontend/src/pages/CameraDetailsPage.scss
+++ b/src/frontend/src/pages/CameraDetailsPage.scss
@@ -488,6 +488,7 @@
     }
 
     .credit {
+      margin-top: 0.25rem;
       font-size: 0.75rem;
       font-style: italic;
     }
@@ -522,7 +523,7 @@
     top: 0rem;
     bottom: 0;
     width: 100%;
-    height: 388px;
+    height: 370px;
 
     .map {
       width: 100%;