CEC-1450 Show Trex version (#169)

* CEC-1450 Show Trex version

* Code smells

* Clean up

* Fixes

* Optimize test

src/components/DigitalTwin/index.js

@@ -0,0 +1,60 @@
+import React from "react";
+
+import useStyles from "../useStyles";
+import { LocalDateTimeString } from "../../utils/dates";
+
+const keyValueTemplate = (key, value) => (
+  <p key={key}>
+    <b>{key}</b>: {value}
+  </p>
+);
+const openCloseState = (value) => (value ? "open" : "closed");
+const mapOpenCloseState = (value) =>
+  keyValueTemplate(value[0], openCloseState(value[1]));
+
+const DigitalTwin = (props) => {
+  const classes = useStyles();
+  const { battery, doors, location, trex_version, updated, windows } = props;
+
+  return (
+    <div>
+      {battery != null && keyValueTemplate("Battery", `${battery.percent}%`)}
+      {doors != null && (
+        <div className={classes.popupSection}>
+          <h3>Doors</h3>
+          {Object.entries(doors).map(mapOpenCloseState)}
+        </div>
+      )}
+      {windows != null && (
+        <div className={classes.popupSection}>
+          <h3>Windows</h3>
+          {Object.entries(windows).map(mapOpenCloseState)}
+        </div>
+      )}
+      {location != null && (
+        <div className={classes.popupSection}>
+          <h3>Location</h3>
+          {Object.entries(location).map((value) => {
+            if (value[0] === "altitude") {
+              return keyValueTemplate(value[0], value[1]);
+            } else {
+              return keyValueTemplate(value[0], `${value[1]}°`);
+            }
+          })}
+        </div>
+      )}
+      {trex_version && (
+        <div className={classes.popupSection}>
+          {keyValueTemplate("Trex Version", trex_version)}
+        </div>
+      )}
+      {updated != null && (
+        <div className={classes.popupSection}>
+          {keyValueTemplate("Updated at", LocalDateTimeString(updated))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default DigitalTwin;