Adds new colors, fingerprints, labels.

jfrux · Sep 27, 2018 · eeb42a4 · eeb42a4
1 parent 8950ede
commit eeb42a4
Show file tree

Hide file tree

Showing 15 changed files with 230 additions and 50 deletions.
diff --git a/app/actions/eon_detail_actions.js b/app/actions/eon_detail_actions.js
@@ -56,11 +56,6 @@ export function FAIL_uninstall(err) {
   };
 }
 
-export function OPEN_REQUEST_EON_STATE() {
-  return {
-    type: types.EON_STATE
-  };
-}
 
 const limitedLogArray = function(length) {
   var array = new Array();
@@ -84,13 +79,18 @@ function testJSON(text){
       return false;
   }
 }
+
+export function OPEN_REQUEST_EON_STATE() {
+  return {
+    type: types.EON_STATE
+  };
+}
 export function RESPONSE_REQUEST_EON_STATE(eonState, state) {
   return {
     type: types.EON_STATE_RESPONSE,
     payload: eonState
   };
 }
-
 export function FAIL_REQUEST_EON_STATE(error) {
   return {
     type: types.EON_STATE_FAIL,
@@ -99,13 +99,37 @@ export function FAIL_REQUEST_EON_STATE(error) {
     }
   };
 }
-
 export function CLOSE_REQUEST_EON_STATE() {
   return {
     type: types.EON_STATE_CLOSE
   };
 }
 
+export function GET_FINGERPRINT() {
+  return {
+    type: types.GET_FINGERPRINT
+  };
+}
+export function RESPONSE_GET_FINGERPRINT(eonState, state) {
+  return {
+    type: types.GET_FINGERPRINT_RESPONSE,
+    payload: eonState
+  };
+}
+export function FAIL_GET_FINGERPRINT(error) {
+  return {
+    type: types.GET_FINGERPRINT_FAIL,
+    payload: {
+      error
+    }
+  };
+}
+export function CLOSE_GET_FINGERPRINT() {
+  return {
+    type: types.GET_FINGERPRINT_CLOSE
+  };
+}
+
 // export function pipeTmux() {
 //   return (dispatch, getState) => {
 //     const { selectedEon, scanResults } = getState().eonList;
@@ -166,6 +190,31 @@ export function CLOSE_REQUEST_EON_STATE() {
 //   }
 // }
 
+export function fetchFingerprint() {
+  return (dispatch, getState) => {
+    const { selectedEon, scanResults } = getState().eonList;
+    const eon = scanResults[selectedEon];
+    const { polling } = getState().eonDetail
+    setTimeout(() => {
+      fetch(`http://${eon.ip}:8080/fingerprint.json`)
+        .then(res => {
+          return res.json()
+        })
+        .then(json => {
+          dispatch(RESPONSE_GET_FINGERPRINT(json, getState()));
+          if (polling) {
+            dispatch(fetchFingerprint());
+          }
+        }).catch((err) => {
+          dispatch(FAIL_GET_FINGERPRINT(err))
+          if (polling) {
+            dispatch(fetchFingerprint());
+          }
+        });
+    },2000)
+  }
+}
+
 export function fetchEonState() {
   return (dispatch, getState) => {
     const { selectedEon, scanResults } = getState().eonList;
@@ -202,9 +251,8 @@ export function install() {
 
       app.sshClient.dispose();
       dispatch(SUCCESS_install());
-      setTimeout(() => {
-        dispatch(fetchEonState(eon));
-      },2500)
+      dispatch(fetchEonState());
+      dispatch(fetchFingerprint());
 
       console.warn("API Now Running on EON");
     }, (err) => {

diff --git a/app/app.global.css b/app/app.global.css
@@ -161,8 +161,7 @@ body {
   position: relative;
   color: white;
   height: 100vh;
-  background-color: #232c39;
-  background-image: linear-gradient(45deg, rgba(0,0,0, 0.5) 10%, rgba(0,0,0, 1));
+  background-color:#000;
   /* font-family: Arial, Helvetica, Helvetica Neue, serif; */
   overflow-y: hidden;
 

diff --git a/app/components/EonDetail/StateList/index.js b/app/components/EonDetail/StateList/index.js
@@ -29,8 +29,12 @@ class StateList extends Component {
         stateImg = stateDetails['iconImg'];
         stateIcon = stateDetails['iconClassName'];
         stateStatus = items[key];
+        console.log(key + ":", stateStatus);
+
+      }
+      if (typeof stateStatus === 'boolean') {
+        stateStatus = <i className="fas fa-check"></i>
       }
-
       if (!items) {
         return;
       }

diff --git a/app/components/EonDetail/Styles.scss b/app/components/EonDetail/Styles.scss
@@ -52,7 +52,7 @@
 }
 .state_card_header {
   border-radius:0!important;
-  background-color:#1d1d1d!important;
+  background-color:darken(#03111C,1)!important;
 }
 .state_card_list_group {
   border:0!important;
@@ -63,7 +63,7 @@
   padding:3!important;
   margin-bottom:initial!important;
   border:0!important;
-  background-color: rgba(#313131,1)!important;
+  background-color: darken(#03111C,3)!important;
   font-size:12px!important;
   position:relative;
   &:after {
@@ -79,7 +79,7 @@
 }
 .state_card_body {
   padding:0!important;
-  background-color:rgba(#212121,1);
+  background-color:darken(#03111C,5);
 }
 .subtext {
   font-weight:200;
@@ -171,12 +171,12 @@
   text-align:right;
   padding:0;
   color:#888;
-  flex:0 0 25%;
+  flex:0 0 30%;
 }
 .state_status {
   /* color:#28a745; */
 
-  flex:0 0 75%;
+  flex:0 0 70%;
 }
 .state_status_started {
   color:#28a745;

diff --git a/app/components/EonDetail/index.js b/app/components/EonDetail/index.js
@@ -29,6 +29,7 @@ const propTypes = {
   thermal: PropTypes.object,
   gpsLocation: PropTypes.object,
   network: PropTypes.string,
+  fingerprint: PropTypes.any,
   currentStateKeys: PropTypes.array
 };
 
@@ -88,13 +89,16 @@ class EonDetail extends Component {
   // }
 
   render() {
-    const { network, currentStateKeys, tmuxStartedAt, thermal, serviceState, eon, selectedEon, healthState, sshConnectionError, sshConnectionStatus, gpsState, vehicleConnection, tmuxAttached } = this.props;
+    const { network, fingerprint, currentStateKeys, tmuxStartedAt, thermal, serviceState, eon, selectedEon, healthState, sshConnectionError, sshConnectionStatus, gpsState, vehicleConnection, tmuxAttached } = this.props;
     const vehicleConnectionInfo = vehicleConnectionStatuses[vehicleConnection];
     // const { usbOnline } = thermal;
     if (network === 'disconnected' || eon == null) {
       // console.warn("SSH CONNECTION ERROR!",sshConnectionError);
       return (<Redirect to={routes.EON_LIST} />)
     }
+    if (fingerprint) {
+      currentStateKeys.push('fingerprint');
+    }
     // if (!tmuxAttached) {
     //   return <LoadingIndicator className={styles.loading_overlay} />;
     // }

diff --git a/app/components/Layout/Styles.scss b/app/components/Layout/Styles.scss
@@ -1,20 +1,35 @@
-.container {
+.container-fluid {
   position: relative;
   width:100%;
   height:100%;
   /* top: 0;
   left: 0;
   height:100%; */
   text-align: center;
+
+
 }
 .title {
   line-height:36px;
   color:rgba(#FFF,0.7);
   font-size:15px;
 }
+.nav_link {
+  color:#FFF!important;
+  opacity:0.5;
+  cursor: pointer;
+  &:hover {
+    opacity:1;
+  }
+}
+.nav_item {
+  display:block;
+  width:100%;
+  font-size:20px;
+}
 .top_bar {
   height:36px;
-  background-color:#212121;
+  background-color:rgba(#000,0.6);
   position:fixed;
   top:0;
   left:0;
@@ -29,15 +44,18 @@
   top:0;
   width:50px;
   height:100%;
-  background-color:darken(#212121,5);
+  background-color:rgba(#000,0.3335);
   z-index:1;
 }
 .app_wrapper {
+  $darker_col: 6;
   padding-top:0;
   overflow:auto;
   height:100%;
   width:100%;
   position:fixed;
+  background-color: darken(#232c39,$darker_col)!important;
+  background: radial-gradient(619.87px at 50% 6.62%, darken(#072339,$darker_col) 0%, darken(#051B2C,$darker_col) 100%)!important;
 
 }
 .content {

diff --git a/app/components/Layout/index.js b/app/components/Layout/index.js
@@ -53,19 +53,19 @@ class Layout extends React.PureComponent {
 
         <div className={styles.left_bar}>
           <Nav className={"mt-5"}>
-            <NavItem>
-              <NavLink className={"text-light"} onClick={this.handleScanNetwork}><i className={"fa fa-sync" + (scanning ? " fa-spin" : "")}></i></NavLink>
+            <NavItem className={styles.nav_item}>
+              <NavLink className={styles.nav_link} onClick={this.handleScanNetwork}><i className={"fa fa-sync" + (scanning ? " fa-spin" : "")}></i></NavLink>
             </NavItem>
-            <NavItem>
-              <NavLink tag={Link} to={routes.EON_LIST} className={"text-light"}><i className="fas fa-list"></i></NavLink>
+            <NavItem className={styles.nav_item}>
+              <NavLink tag={Link} to={routes.EON_LIST} className={styles.nav_link}><i className="fas fa-list"></i></NavLink>
             </NavItem>
           </Nav>
           <Nav className={styles.bottom_nav}>
-            <NavItem>
-              <NavLink className={"text-light"} onClick={() => this.handleOpenUrl("https://comma.ai/")}><Comma style={{height: 18, width: 18 }} /></NavLink>
+            <NavItem className={styles.nav_item}>
+              <NavLink className={styles.nav_link} onClick={() => this.handleOpenUrl("https://comma.ai/")}><Comma style={{height: 18, width: 18 }} /></NavLink>
             </NavItem>
-            <NavItem>
-              <NavLink className={"text-light"} onClick={() => this.handleOpenUrl("https://github.com/openpilot-community/workbench")}><i className="fab fa-github"></i></NavLink>
+            <NavItem className={styles.nav_item}>
+              <NavLink className={styles.nav_link} onClick={() => this.handleOpenUrl("https://github.com/openpilot-community/workbench")}><i className="fab fa-github"></i></NavLink>
             </NavItem>
           </Nav>
         </div>

diff --git a/app/constants/eon_detail_action_types.js b/app/constants/eon_detail_action_types.js
@@ -1,17 +1,18 @@
-export const INSTALL = 'openpilot/INSTALL'
-export const INSTALL_SUCCESS = 'openpilot/INSTALL_SUCCESS'
-export const INSTALL_FAIL = 'openpilot/INSTALL_FAIL'
-export const UNINSTALL = 'openpilot/UNINSTALL'
-export const UNINSTALL_SUCCESS = 'openpilot/UNINSTALL_SUCCESS'
-export const UNINSTALL_FAIL = 'openpilot/UNINSTALL_FAIL'
+export const INSTALL = 'eon/INSTALL'
+export const INSTALL_SUCCESS = 'eon/INSTALL_SUCCESS'
+export const INSTALL_FAIL = 'eon/INSTALL_FAIL'
+export const UNINSTALL = 'eon/UNINSTALL'
+export const UNINSTALL_SUCCESS = 'eon/UNINSTALL_SUCCESS'
+export const UNINSTALL_FAIL = 'eon/UNINSTALL_FAIL'
 
+export const EON_STATE = 'eon/EON_STATE'
+export const EON_STATE_OPEN = 'eon/EON_STATE_OPEN'
+export const EON_STATE_CLOSE = 'eon/EON_STATE_CLOSE'
+export const EON_STATE_RESPONSE = 'eon/EON_STATE_RESPONSE'
+export const EON_STATE_FAIL = 'eon/EON_STATE_FAIL'
 
-export const EON_STATE = 'openpilot/EON_STATE'
-export const EON_STATE_OPEN = 'openpilot/EON_STATE_OPEN'
-export const EON_STATE_CLOSE = 'openpilot/EON_STATE_CLOSE'
-export const EON_STATE_RESPONSE = 'openpilot/EON_STATE_RESPONSE'
-export const EON_STATE_FAIL = 'openpilot/EON_STATE_FAIL'
-
-export const FETCH_PID = 'openpilot/FETCH_PID'
-export const FETCH_PID_SUCCESS = 'openpilot/FETCH_PID_SUCCESS'
-export const FETCH_PID_FAIL = 'openpilot/FETCH_PID_FAIL'
+export const GET_FINGERPRINT = 'eon/GET_FINGERPRINT'
+export const GET_FINGERPRINT_OPEN = 'eon/GET_FINGERPRINT_OPEN'
+export const GET_FINGERPRINT_CLOSE = 'eon/GET_FINGERPRINT_CLOSE'
+export const GET_FINGERPRINT_RESPONSE = 'eon/GET_FINGERPRINT_RESPONSE'
+export const GET_FINGERPRINT_FAIL = 'eon/GET_FINGERPRINT_FAIL'