CEC-3916 Fix digital twin (#294)

* CEC-3916 Fix digital twin

* Mileage

src/components/Cars/Status/__snapshots__/DigitalTwinTab.test.jsx.snap

@@ -35,13 +35,27 @@ exports[`DigitalTwinTab Render 1`] = `
             true
           </div>
           <div>
+            <div
+              class="makeStyles-popupSection-0"
+            >
+              <h3>
+                Battery
+              </h3>
               <p>
                 <b>
-                Battery
+                  Percentage
                 </b>
                 : 
                 95%
               </p>
+              <p>
+                <b>
+                  Total Mileage
+                </b>
+                : 
+                unknown
+              </p>
+            </div>
             <div
               class="makeStyles-popupSection-0"
             >
@@ -102,14 +116,14 @@ exports[`DigitalTwinTab Render 1`] = `
                   driver
                 </b>
                 : 
-                Closed
+                Unlocked
               </p>
               <p>
                 <b>
                   all
                 </b>
                 : 
-                Locked
+                Unlocked
               </p>
             </div>
             <div

src/components/DigitalTwin/index.js

@@ -4,6 +4,10 @@ import { LocalDateTimeString } from "../../utils/dates";
 import { ValidateLocationByParam } from "../../utils/locations";
 import useStyles from "../useStyles";
 
+const UNKNOWN = "unknown";
+const LOCKED = "Locked";
+const UNLOCKED = "Unlocked";
+
 const keyValueTemplate = (key, value) => (
   <p key={key}>
     <b>{key}</b>: {value}
@@ -23,33 +27,46 @@ const windowState = (value) => {
 
 const DigitalTwin = (props) => {
   const classes = useStyles();
-  const { battery, doors, location, trex_version, ip, updated, windows, misc_windows, sunroof, dbc_version, door_locks } = props;
+  const { battery, doors, location, trex_version, ip, updated, windows, misc_windows, sunroof, dbc_version, door_locks, vcu0x260, charging_metrics } = props;
 
   return (
     <div>
-      {!battery && !doors && !location && !windows && (
+      {!battery && !doors && !location && !windows && !vcu0x260 && !charging_metrics && (
         <p>No vehicle data to display.</p>
       )}
-      {battery != null && keyValueTemplate("Battery", `${battery.percent}%`)}
+      {battery && (
-      {doors != null && (
+        <div className={classes.popupSection}>
+          <h3>Battery</h3>
+          {keyValueTemplate("Percentage", `${battery.percent || 0}%`)}
+          {keyValueTemplate("Total Mileage", `${battery.total_mileage_odometer || UNKNOWN}`)}
+        </div>
+      )}
+      {(vcu0x260 || charging_metrics) && (
+        <div className={classes.popupSection}>
+          <h3>Charging</h3>
+          {keyValueTemplate("Charge Type", vcu0x260?.charge_type || UNKNOWN)}
+          {keyValueTemplate("Remaining Time", charging_metrics?.remaining_charging_time || UNKNOWN)}
+        </div>
+      )}
+      {doors && (
         <div className={classes.popupSection}>
           <h3>Doors</h3>
           {Object.entries(doors).map(mapOpenCloseState)}
         </div>
       )}
-      {door_locks != null && (
+      {door_locks && (
         <div className={classes.popupSection}>
           <h3>Door Locks</h3>
           {Object.entries(door_locks).map((value) => {
             if (value[0] === "driver") {
-              return keyValueTemplate(value[0], value[1] ? "Open" : "Closed");
+              return keyValueTemplate(value[0], value[1] ? LOCKED : UNLOCKED);
             } else {
-              return keyValueTemplate(value[0], value[1] ? "Unlocked" : "Locked");
+              return keyValueTemplate(value[0], value[1] ? LOCKED : UNLOCKED);
             }
           })}
         </div>
       )}
-      {windows != null && (
+      {windows && (
         <div className={classes.popupSection}>
           <h3>Windows</h3>
           {Object.entries(windows).map((value) => {
@@ -57,7 +74,7 @@ const DigitalTwin = (props) => {
           })}
         </div>
       )}
-      {misc_windows != null && (
+      {misc_windows && (
         <div className={classes.popupSection}>
           <h3>Misc Windows</h3>
           {Object.entries(misc_windows).map((value) => {
@@ -65,7 +82,7 @@ const DigitalTwin = (props) => {
           })}
         </div>
       )}
-      {sunroof != null && (
+      {sunroof && (
         <div className={classes.popupSection}>
           <h3>Sunroof</h3>
           {Object.entries(sunroof).map((value) => {
@@ -73,7 +90,7 @@ const DigitalTwin = (props) => {
           })}
         </div>
       )}
-      {location != null && (
+      {location && (
         <div className={classes.popupSection}>
           <h3>Location</h3>
           {Object.entries(location).map((value) => {