Adds Thermal to EON screen.

jfrux · Sep 19, 2018 · 3782529 · 3782529
1 parent faee9b4
commit 3782529
Show file tree

Hide file tree

Showing 25 changed files with 452 additions and 76 deletions.
diff --git a/app/actions/eon_detail_actions.js b/app/actions/eon_detail_actions.js
@@ -89,14 +89,33 @@ export function RESPONSE_tmuxPipe(lines, state) {
 
   regexKeys = Object.keys(regex);
   regexKeys.forEach((key) => {
-    // console.log(key);
-    if ((m = regex[key].exec(lines)) !== null) {
-      // console.log(m);
-      if (key === 'PROCESS') {
-        payload[m[1]] = m[3];
-      } else if (key === 'VEHICLE_CONNECTION') {
-        payload.vehicleConnection = m[0];
-      }
+    switch (key) {
+      case "THERMAL":
+        // console.warn("Parsing:",key);
+        while ((m = regex[key].exec(lines)) !== null) {
+          if (m.index === regex.lastIndex) {
+            regex.lastIndex++;
+          }
+          // console.warn(m[1],m[2]);
+          payload[m[1]] = m[2].replace(/\"/g,'');
+        }
+        break;
+      case "PROCESS":
+        // console.warn("Parsing:",key);
+        while ((m = regex[key].exec(lines)) !== null) {
+          if (m.index === regex.lastIndex) {
+            regex.lastIndex++;
+          }
+          // console.warn(m[1],m[3]);
+          payload[m[1]] = m[3].replace(/\"/g,'');
+        }
+        break;
+      case "VEHICLE_CONNECTION":
+        // console.warn("Parsing:",key);
+        if ((m = regex[key].exec(lines)) !== null) {
+          payload.vehicleConnection = m[0];
+        }
+        break;
     }
   });
 

diff --git a/app/components/EonDetail/Styles.css → app/components/EonDetail/Styles.scss b/app/components/EonDetail/Styles.css → app/components/EonDetail/Styles.scss
@@ -1,5 +1,7 @@
 .eon_bar {
   position:relative;
+  margin-top:40px;
+  margin-bottom:30px;
 }
 .loading_overlay {
   position:absolute;
@@ -12,8 +14,8 @@
   position:absolute;
   top:50%;
   left:50%;
-  height:75px;
-  width:75px;
+  height:85px;
+  width:85px;
   transform:translate(-50%,-50%);
 
   /* width:100%;
@@ -24,32 +26,59 @@
 .add_field {
   border:0;
 }
+.title,.subtext,.subsubtext {
+  text-align:center;
+  margin: 0;
+}
 .title {
   font-weight:400;
-  text-align:center;
 }
 .subtext {
   font-weight:200;
-  text-align:center;
 }
 .disconnect_button {
   margin-top:10px;
   margin-bottom:10px;
+  position:absolute;
+  top:0;
+  left:0;
+  width:200px;
 }
 .subsubtext {
   font-weight:200;
-  text-align:center;
   font-weight:200;
   color:#555;
 }
+.connection {
+  background-color:rgba(#FFF,0.2);
+  padding:10px;
+  border-radius:100px;
+  width:50%;
+  margin:0 auto;
+
+  span {
+    display:block;
+    text-align:center;
+  }
+
+  .connection_message {
+    font-size:18px;
+    font-weight:200;
+    line-height:20px;
+  }
 
+  .connection_label {
+    font-size:10px;
+    line-height:15px;
+  }
+}
 .state_list {
   display:table;
   width:100%;
 }
 .state_spinner {
-  height: 20px;
-  width: 20px;
+  height: 100%;
+  width: 100%;
 }
 .state_spinner img {
   width:100%;
@@ -58,6 +87,12 @@
 .state_item {
   display:table-row;
 }
+.state_loading_icon_wrap {
+  width: 16px;
+  height: 16px;
+  position: relative;
+  display: block;
+}
 
 .state_label,.state_status {
   display:table-cell;
@@ -74,6 +109,6 @@
 .state_status {
   /* color:#28a745; */
 }
-.state_status.started {
+.state_status_started {
   color:#28a745;
 }
diff --git a/app/components/EonDetail/index.js b/app/components/EonDetail/index.js
@@ -2,12 +2,15 @@ import React, { Component } from 'react';
 import { Link } from 'react-router-dom';
 const app = require('electron').remote.app
 import routes from '../../constants/routes.json';
-import styles from './Styles.css';
+import styles from './Styles.scss';
 import PropTypes from 'prop-types';
 import processInfo from '../../constants/processes.json';
+import thermalInfo from '../../constants/thermal.json';
+import vehicleConnectionStatuses from '../../constants/vehicle_connection_statuses.json';
 import Layout from '../Layout';
 import LoadingIndicator from '../LoadingIndicator';
 import ConnectedTime from './ConnectedTime';
+import ReactResizeDetector from 'react-resize-detector';
 
 const propTypes = {
   install: PropTypes.func,
@@ -28,11 +31,35 @@ const propTypes = {
   logmessaged: PropTypes.string,
   controlsd: PropTypes.string,
   gpsd: PropTypes.string,
-  vehicleConnection: PropTypes.string
+  vehicleConnection: PropTypes.string,
+  logMonoTime: PropTypes.string,
+  thermal: PropTypes.string,
+  cpu0: PropTypes.string,
+  cpu1: PropTypes.string,
+  cpu2: PropTypes.string,
+  cpu3: PropTypes.string,
+  mem: PropTypes.string,
+  gpu: PropTypes.string,
+  bat: PropTypes.string,
+  freeSpace: PropTypes.string,
+  batteryPercent: PropTypes.string,
+  batteryStatus: PropTypes.string,
+  fanSpeed: PropTypes.string,
+  started: PropTypes.string,
+  usbOnline: PropTypes.string,
+  startedTs: PropTypes.string,
+  thermalStatus: PropTypes.string,
+  batteryCurrent: PropTypes.string,
+  batteryVoltage: PropTypes.string
 };
 
 class EonDetail extends Component {
-
+  constructor(props) {
+    super(props);
+    this.state = {
+      processesAndThermalsHeight: 0
+    }
+  }
   componentDidMount() {
     if (this.props.eon && this.props.pipeTmux) {
       this.props.pipeTmux();
@@ -41,7 +68,7 @@ class EonDetail extends Component {
     this.tmuxTimeout = setTimeout(() => {
       if (!this.props.tmuxAttached) {
         console.warn("Could not connect to tmux...");
-        this.props.history.push(routes.EON_DETAIL);
+        this.props.history.push(routes.EON_LIST);
       }
     }, 3000);
 
@@ -56,12 +83,45 @@ class EonDetail extends Component {
     // console.warn(this);
     this.props.install();
   }
+  onResize = (width,height) => {
+    console.log("width:",width);
+    console.log("height:",height);
+    let newHeight = height-400;
+    console.log("thermalsHeight:",newHeight);
+    this.setState({
+      processesAndThermalsHeight: newHeight
+    });
+  }
   render() {
-    const processKeys = Object.keys(processInfo);
+    const vehicleConnection = vehicleConnectionStatuses[this.props.vehicleConnection] || {
+      "label": "Checking vehicle status..."
+    };
+    const processKeys = Object.keys(processInfo).sort();
+    const thermalKeys = Object.keys(thermalInfo).sort();
     if (!this.props.tmuxAttached) {
       return <LoadingIndicator className={styles.loading_overlay} />;
     }
+    // THERMAL ITEMS
+    const thermals = thermalKeys.map((key) => {
+      let thermalDetails = thermalInfo[key];
+      let thermalStatus = this.props[key];
+      let thermalImg = thermalInfo['iconImg'];
+      let thermalIcon = thermalInfo['iconClassName'];
 
+      return (
+        <div key={key} className={styles.state_item}>
+          <span className={styles.state_label}><i className={thermalIcon}></i> {thermalDetails.label}</span>
+          <span className={styles.state_status}>
+            {!thermalStatus &&
+              <span className={styles.state_loading_icon_wrap}>
+                <LoadingIndicator icon="fa fa-circle-notch" className={styles.state_spinner} />
+              </span>
+            }
+            {thermalStatus}
+          </span>
+        </div>
+      )
+    });
     // PROCESS ITEMS
     const processes = processKeys.map((key) => {
       let processDetails = processInfo[key];
@@ -75,7 +135,9 @@ class EonDetail extends Component {
               <i className="fa fa-check"></i>
             }
             {(processStatus !== 'started') &&
-              <LoadingIndicator className={styles.state_spinner} />
+              <span className={styles.state_loading_icon_wrap}>
+                <LoadingIndicator icon="fa fa-circle-notch" className={styles.state_spinner} />
+              </span>
             }
           </span>
         </div>
@@ -86,32 +148,44 @@ class EonDetail extends Component {
       <Layout hideLogo={true}>
         <div className={styles.container + " container"}>
           {this.props.eon && 
-            <div className={styles.eon_bar}>
-              <ConnectedTime startedTime={this.props.tmuxStartedAt} />
-              <h3 className={styles.title + " no-select"}>
-              Connected to EON
-              </h3>
-              <h5 className={styles.subtext + " no-select"}>
-                {this.props.eon.ip}
-              </h5>
-              <div className={styles.subsubtext + " no-select"}>
-                {this.props.eon.mac}
-
+            <div className="row">
+              <div className="col-12">
+                <div className={styles.eon_bar}>
+                  <ConnectedTime startedTime={this.props.tmuxStartedAt} />
+                  <h3 className={styles.title + " no-select"}>
+                  Connected to EON
+                  </h3>
+                  <h5 className={styles.subtext + " no-select"}>
+                    {this.props.eon.ip}
+                  </h5>
+                  <div className={styles.subsubtext + " no-select"}>
+                    {this.props.eon.mac}
+                  </div>
+                  <div className={styles.connection}>
+                    <span className={styles.connection_message}>{vehicleConnection.label}</span>
+                  </div>
+                  <Link className={styles.disconnect_button + " btn btn-outline-danger"} to={routes.EON_LIST}>
+                    Disconnect
+                  </Link>
+                </div>
               </div>
-              <Link className={styles.disconnect_button + " btn btn-outline-danger btn-block"} to={routes.EON_LIST}>
-                Disconnect
-              </Link>
             </div>
           }
 
-          <div className={styles.state_list}>
-            <div className={this.props.vehicle_connection} className={styles.state_item}>
-              <span className={styles.state_label}>Vehicle Connection</span>
-              <span className={styles.state_status}>{this.props.vehicleConnection}</span>
+          <div className="row" style={{height: this.state.processesAndThermalsHeight}}>
+            <div className="col-sm-6">
+              <div className={styles.state_list}>
+                {processes}
+              </div>
+            </div>
+            <div className="col-sm-6">
+              <div className={styles.state_list}>
+                {thermals}
+              </div>
             </div>
-            {processes}
           </div>
         </div>
+        <ReactResizeDetector handleWidth handleHeight onResize={this.onResize} />
       </Layout>
     );
   }

diff --git a/app/components/Layout/Styles.css → app/components/Layout/Styles.scss b/app/components/Layout/Styles.css → app/components/Layout/Styles.scss
@@ -1,6 +1,7 @@
 .container {
   position: relative;
   width:100%;
+  height:100%;
   /* top: 0;
   left: 0;
   height:100%; */
@@ -9,8 +10,8 @@
 
 .app_wrapper {
   padding-top:0;
+
 }
-
 .header {
   display:flex;
   position:relative;
@@ -20,12 +21,13 @@
 
 .header .brand {
   flex: 0 0 50%;
-  padding: 30px 0 19px 0;
+  padding: 60px 0 19px 0;
   margin: 0 auto;
+  transform:translateX(-6px);
   text-align: center;
 }
 .header .brand svg {
-  transform: scale(1.2);
+  transform: scale(1.4);
 }
 .header .eon_status {
   flex: 0 0 50%;

diff --git a/app/components/Layout/index.js b/app/components/Layout/index.js
@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
-import Logo from "./images/logo.svg";
-import styles from './Styles.css';
+import Logo from "../../images/logo.svg";
+import styles from './Styles.scss';
 import * as eonListActions from '../../actions/eon_list_actions';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
@@ -18,11 +18,13 @@ class Layout extends React.PureComponent {
   render() {
     const { backBtn, hideLogo, selectedEon } = this.props;
     return (
-      <div className={styles.app_wrapper}>
+      <div className={styles.app_wrapper + (hideLogo ? " thin-wrapper" : "")}>
         <div className={styles.header + " no-select"}>
+        {!hideLogo && 
           <div className={styles.brand}>
-            {!hideLogo && <Logo />}
+            <Logo />
           </div>
+        }
         </div>
         <div className={styles.content}>
           {this.props.children}