CEC-1711-fix-digital-twin (#257)

* first commit

* remove comments

* resolve comments:

* update snapshot

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

@@ -91,6 +91,41 @@ exports[`DigitalTwinTab Render 1`] = `
                 closed
               </p>
             </div>
+            <div
+              class="makeStyles-popupSection-0"
+            >
+              <h3>
+                Door Locks
+              </h3>
+              <p>
+                <b>
+                  driver
+                </b>
+                : 
+                Closed
+              </p>
+              <p>
+                <b>
+                  all
+                </b>
+                : 
+                Locked
+              </p>
+            </div>
+            <div
+              class="makeStyles-popupSection-0"
+            >
+              <h3>
+                Sunroof
+              </h3>
+              <p>
+                <b>
+                  sunroof
+                </b>
+                : 
+                closed
+              </p>
+            </div>
             <div
               class="makeStyles-popupSection-0"
             >

src/components/DigitalTwin/index.js

@@ -14,7 +14,7 @@ const mapOpenCloseState = (value) =>
 
 const DigitalTwin = (props) => {
   const classes = useStyles();
-  const { battery, doors, location, trex_version, ip, updated, windows } = props;
+  const { battery, doors, location, trex_version, ip, updated, windows, sunroof, dbc, door_locks } = props;
 
   return (
     <div>
@@ -28,10 +28,41 @@ const DigitalTwin = (props) => {
           {Object.entries(doors).map(mapOpenCloseState)}
         </div>
       )}
+      {door_locks != null && (
+        <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");
+            } else {
+              return keyValueTemplate(value[0], value[1] ?"Unlocked" : "Locked" );
+            }
+          })}
+        </div>
+      )}
       {windows != null && (
         <div className={classes.popupSection}>
           <h3>Windows</h3>
-          {Object.entries(windows).map(mapOpenCloseState)}
+          {Object.entries(windows).map((value) => {
+            if (value[1] === 0) {
+              return keyValueTemplate(value[0], "closed");
+            } else {
+              return keyValueTemplate(value[0], `${value[1]}% open`);
+            }
+          })}
+        </div>
+      )}
+      {sunroof != null && (
+        <div className={classes.popupSection}>
+          <h3>Sunroof</h3>
+          {/* {Object.entries(sunroof).map(mapOpenCloseState)} */}
+          {Object.entries(sunroof).map((value) => {
+            if (value[1] === 0) {
+              return keyValueTemplate(value[0], "closed");
+            } else {
+              return keyValueTemplate(value[0], `${value[1]}% open`);
+            }
+          })}
         </div>
       )}
       {location != null && (
@@ -61,6 +92,11 @@ const DigitalTwin = (props) => {
           {keyValueTemplate("Updated at", LocalDateTimeString(updated))}
         </div>
       )}
+      {dbc != null && (
+        <div className={classes.popupSection}>
+          {keyValueTemplate("DBC version", dbc)}
+        </div>
+      )}
     </div>
   );
 };