cabana: only show panda ad on demo; share route link; fix tests broken due to cloudlog

2017-07-11 20:44:58 -07:00 · 2017-07-11 20:44:58 -07:00 · 1885c607e2
parent 4939892761
commit 1885c607e2
9 changed files with 79 additions and 19 deletions
--- a/package.json
+++ b/package.json
@ -6,6 +6,7 @@
  "dependencies": {
    "aphrodite": "^1.2.1",
    "classnames": "^2.2.5",
+    "clipboard": "^1.7.1",
    "core-js": "^2.4.1",
    "create-react-class": "^15.5.3",
    "cuint": "^0.2.2",
@ -83,6 +84,9 @@
    }
  },
  "jest": {
+    "globals": { 
+      "config": {"__JEST__": 1} 
+    },
    "timers": "fake",
    "collectCoverageFrom": [
      "src/**/*.{js,jsx}"
--- a/src/CanExplorer.js
+++ b/src/CanExplorer.js
@ -28,7 +28,9 @@ export default class CanExplorer extends Component {
        dbc: PropTypes.instanceOf(DBC),
        dbcFilename: PropTypes.string,
        githubAuthToken: PropTypes.string,
-        autoplay: PropTypes.bool
+        autoplay: PropTypes.bool,
+        max: PropTypes.number,
+        url: PropTypes.string,
    };

    constructor(props) {
@ -79,7 +81,7 @@ export default class CanExplorer extends Component {
    componentWillMount() {
      const {dongleId, name} = this.props;
      Routes.fetchRoutes(dongleId).then((routes) => {
-        if(routes) {
+        if(routes && routes[name]) {
          const route = routes[name];

          const newState = {route, currentParts: [0, Math.min(route.proclog - 1, 2)]};
@ -88,6 +90,10 @@ export default class CanExplorer extends Component {
            newState.dbcFilename = this.props.dbcFilename;
          }
          this.setState(newState, this.initCanData);
+        } else if(this.props.max && this.props.url) {
+          const {max, url} = this.props;
+          const route = {fullname: name, proclog: max, url: url};
+          this.setState({route, currentParts: [0, Math.min(max - 1, 2)]}, this.initCanData);
        }
      });
    }
@ -372,6 +378,7 @@ export default class CanExplorer extends Component {
                            maxByteStateChangeCount={this.state.maxByteStateChangeCount}
                            githubAuthToken={this.props.githubAuthToken}
                            loginWithGithub={this.loginWithGithub()}
+                            isDemo={this.props.isDemo}
                      />
                      <div className={css(Styles.right)}>
                          {this.state.route.url ?
--- a/src/tests/can/dbc.mutate.js
+++ b/src/tests/can/dbc.mutate.js
@ -1,3 +1,4 @@
+global.__JEST__ = 1
 import DBC from '../../models/can/dbc';
 import Signal from '../../models/can/signal';

--- a/src/tests/can/dbc.parse.test.js
+++ b/src/tests/can/dbc.parse.test.js
@ -1,3 +1,4 @@
+global.__JEST__ = 1
 import DBC, {swapOrder} from '../../models/can/dbc';
 import Signal from '../../models/can/signal';
 import Bitarray from '../../models/bitarray';
--- a/src/tests/can/dbc.write.test.js
+++ b/src/tests/can/dbc.write.test.js
@ -1,3 +1,4 @@
+global.__JEST__ = 1
 import DBC, {swapOrder} from '../../models/can/dbc';
 import {ACURA_DBC} from '../res/acura-dbc';
 import {TESLA_DBC} from '../res/tesla-dbc';
--- a/src/components/meta.js
+++ b/src/components/meta.js
@ -2,7 +2,9 @@ import React, {Component} from 'react';
 import { StyleSheet, css } from 'aphrodite/no-important';
 import PropTypes from 'prop-types';
 import Moment from 'moment';
+import Clipboard from 'clipboard';

+import {addQueryParameters} from '../utils/url';
 import PartSelector from './PartSelector';
 import LoadDbcModal from './LoadDbcModal';
 import * as GithubAuth from '../api/github-auth';
@ -28,6 +30,7 @@ export default class Meta extends Component {
        currentParts: PropTypes.array,
        seekTime: PropTypes.number,
        loginWithGithub: PropTypes.element,
+        isDemo: PropTypes.bool,
    };

    constructor(props) {
@ -285,17 +288,22 @@ export default class Meta extends Component {
        } else return '';
    }

+    shareUrl() {
+        console.log(addQueryParameters({max: this.props.route.proclog, url: this.props.route.url}))
+        return addQueryParameters({max: this.props.route.proclog, url: this.props.route.url});
+    }
    render() {
        return (
            <div className={css(Styles.root)}>
-                <div className={css(Styles.chffrPanda)}>
-                    <Images.panda styles={[Styles.panda]} />
-                    <div className={css(Styles.chffrPandaDesc)}>
-                        <p>Data collected with chffr + panda</p>
-                        <a href="http://panda.comma.ai" className={css(Styles.chffrPandaGet)}>buy panda</a>
-                        <a href="http://chffr.comma.ai" className={css(Styles.chffrPandaGet)}>get chffr</a>
-                    </div>
-                </div>
+                {this.props.isDemo ?
+                    <div className={css(Styles.chffrPanda)}>
+                        <Images.panda styles={[Styles.panda]} />
+                        <div className={css(Styles.chffrPandaDesc)}>
+                            <p>Data collected with chffr + panda</p>
+                            <a href="http://panda.comma.ai" className={css(Styles.chffrPandaGet)}>buy panda</a>
+                            <a href="http://chffr.comma.ai" className={css(Styles.chffrPandaGet)}>get chffr</a>
+                        </div>
+                    </div> : null}
                <div className={css(Styles.scrollContainer)}>
                    <div>
                        <span className={css(Styles.titleText)}>
@ -320,8 +328,14 @@ export default class Meta extends Component {
                            : null
                        }
                        {this.props.dbcFilename ? <p>Editing: {this.props.dbcFilename}</p>: null}
-                        <p></p>
+                        <p data-clipboard-text={this.shareUrl()}
+                           data-clipboard-action="copy"
+                           ref={(ref) => ref ? new Clipboard(ref) : null}>
+                           <a href={this.shareUrl()}
+                              className={css(Styles.copyShareLink)}
+                              onClick={(e) => e.preventDefault()}>Copy share link</a></p>
                    </div>
+
                    <div>
                        <p className={css(Styles.timeWindow)}>{this.timeWindow()}</p>
                    </div>
@ -455,4 +469,7 @@ const Styles = StyleSheet.create({
    messageHeader: {
        fontSize: 12
    },
+    copyShareLink: {
+        color: 'black'
+    }
 });
--- a/src/index.js
+++ b/src/index.js
@ -14,8 +14,8 @@ require('core-js/fn/object/values');
 import './index.css';

 const routeFullName = getUrlParameter('route');
-const demo = true;
-let props = {autoplay: false};
+let isDemo = !routeFullName;
+let props = {autoplay: false, isDemo};
 if(routeFullName) {
    const [dongleId, route] = routeFullName.split('|');
    props.dongleId = dongleId;
@ -27,16 +27,22 @@ if(routeFullName) {
      props.dbc = dbc;
      props.dbcFilename = dbcFilename;
    }
+
+    let max = getUrlParameter('max'), url = getUrlParameter('url');
+    if(max && url) {
+      props.max = max;
+      props.url = url;
+    }
 } else if(getUrlParameter('prius')) {
  props.autoplay = true;
  props.dongleId = 'b67ff0c1d78774da';
  props.name = '2017-06-30--17-37-49';
 } else {
-    props.autoplay = true;
-    props.dongleId = 'cb38263377b873ee';
-    props.name = '2017-06-12--18-51-47';
-    props.dbc = AcuraDbc;
-    props.dbcFilename = 'acura_ilx_2016_can.dbc';
+  props.autoplay = true;
+  props.dongleId = 'cb38263377b873ee';
+  props.name = '2017-06-12--18-51-47';
+  props.dbc = AcuraDbc;
+  props.dbcFilename = 'acura_ilx_2016_can.dbc';
 }

 const authTokenQueryParam = getUrlParameter(GITHUB_AUTH_TOKEN_KEY);
@ -47,7 +53,7 @@ if(authTokenQueryParam !== null) {
  props.githubAuthToken = fetchPersistedGithubAuthToken();
 }

-if(routeFullName || demo) {
+if(routeFullName || isDemo) {
  ReactDOM.render(
    <CanExplorer
       {...props} />,
--- a/src/logging/CloudLog.js
+++ b/src/logging/CloudLog.js
@ -14,6 +14,11 @@ class CloudLog {
    }

    emit(message, level = 'log') {
+        if(typeof global.__JEST__ !== 'undefined') {
+            // Don't log in testing environment
+            return
+        }
+
        const entry = {ctx: this.context,
                       created: new Date().getTime() / 1000,
                       msg: message,
--- a/src/utils/url.js
+++ b/src/utils/url.js
@ -10,3 +10,21 @@ export function getUrlParameter(name) {

    return results === null ? null : decodeURIComponent(results[1].replace(/\+/g, ' '));
 }
+
+export function addQueryParameters(newParams) {
+    var location = window.location;
+    var regex = new RegExp('[\\?&]([^&#]+)=([^&#]*)');
+    var results = regex.exec(location.search);
+
+    let params = {};
+    if(results != null) {
+        for(let i = 1; i < results.length - 1; i+=2) {
+            let key = results[i], value = results[i+1];
+            params[key] = value;
+        }
+        params = {...params, ...newParams};
+    } else {
+        params = newParams;
+    }
+    return location.origin + location.pathname + '?' + objToQuery(params);
+}