show CPPP-IO details for robots/devices

src/javascripts/components/command-tool.es

@@ -2,9 +2,7 @@ import React from "react";
 import {post} from "superagent";
 
 function coerceParams(params) {
-  const opts = {};
-
-  params.forEach(function(param) {
+  function coerce(opts, param) {
     if (param.key === "") {
       return;
     }
@@ -18,9 +16,9 @@ function coerceParams(params) {
     }
 
     opts[param.key] = param.value;
-  });
+  }
 
-  return opts;
+  return params.reduce(coerce, {});
 }
 
 function generateOptions(arr) {

src/javascripts/components/connection-info.es

@@ -2,8 +2,9 @@ import React from "react";
 
 export default React.createClass({
   render() {
-    let name = this.props.name,
-        port = this.props.port || "";
+    let {name, port} = this.props.connection;
+
+    port = port || "";
 
     return (
       <div className="connection">

src/javascripts/components/details.es

@@ -0,0 +1,40 @@
+import React from "react";
+
+export default React.createClass({
+  render() {
+    let root = location.origin + "/api/",
+        path = this.props.path;
+
+    function select(e) {
+      if (document.selection) {
+        var range = document.body.createTextRange();
+        range.moveToElementText(e.target);
+        range.select();
+      } else if (window.getSelection) {
+        var range = document.createRange();
+        range.selectNode(e.target);
+        window.getSelection().addRange(range);
+      }
+    }
+
+    return (
+      <div className="cppp-io-details">
+        <table>
+          <tr className="path">
+            <td className="key">CPPP-IO Path</td>
+            <td onClick={select} className="value">
+              <div> { path } </div>
+            </td>
+          </tr>
+
+          <tr className="curl">
+            <td className="key">cURL</td>
+            <td onClick={select} className="value">
+              <div> { `curl ${root + path}` } </div>
+            </td>
+          </tr>
+        </table>
+      </div>
+    );
+  }
+});

src/javascripts/components/device-info.es

@@ -1,24 +1,49 @@
 import React from "react";
 import {Link} from "react-router";
 
+import Details from "./details.es";
+
 export default React.createClass({
+  getInitialState() {
+    return { details: false };
+  },
+
+  showDetails() {
+    this.setState({ details: !this.state.details });
+  },
+
+  details() {
+    if (!this.state.details) { return null; }
+
+    let bot = encodeURIComponent(this.props.params.robot),
+        device = encodeURIComponent(this.props.params.device);
+
+    let opts = {
+      path: `robots/${bot}/devices/${device}`,
+      json: this.props.device
+    };
+
+    return <Details {...opts}/>;
+  },
+
   render() {
     let params = this.props.params;
 
-    let name = this.props.name,
-        connection = this.props.connection;
+    let {name, connection} = this.props.device;
 
     return (
       <div className="device">
         <Link className="btn btn-device" to="device" params={params}>
           device
         </Link>
 
-        <span className="name">{name}</span>
+        <span className="name" onClick={this.showDetails}>{name}</span>
 
         <div className="details">
           <span>{connection}</span>
         </div>
+
+        { this.details() }
       </div>
     );
   }

src/javascripts/components/robot-info.es

@@ -1,20 +1,41 @@
 import React from "react";
 import {Link} from "react-router";
 
+import Details from "./details.es";
+
 export default React.createClass({
+  getInitialState() {
+    return { details: false };
+  },
+
+  showDetails() {
+    this.setState({ details: !this.state.details });
+  },
+
+  details() {
+    if (!this.state.details) { return null; }
+
+    let props = this.props.robot;
+
+    let opts = {
+      path: `robots/${encodeURIComponent(props.name)}`,
+      json: props
+    };
+
+    return <Details {...opts} />;
+  },
+
   render() {
-    let name = this.props.name,
-        connections = this.props.connections,
-        devices = this.props.devices;
+    let {name, connections, devices} = this.props.robot;
 
     let link = `/robots/${encodeURIComponent(name)}`;
 
     return (
-      <section className="row">
-        <div className="robot-info" key={name}>
+      <section className="row" key={name}>
+        <div className="robot-info">
           <Link to={link} className="btn btn-robot btn-big"> robot </Link>
 
-          <span className="name">{name}</span>
+          <span className="name" onClick={this.showDetails}>{name}</span>
 
           <div className="details">
             <span className="bullet-connections">
@@ -26,6 +47,8 @@ export default React.createClass({
             </span>
           </div>
         </div>
+
+        { this.details() }
       </section>
     );
   }

src/javascripts/views/robot.es

@@ -40,13 +40,13 @@ export default React.createClass({
         device: encodeURIComponent(device.name)
       };
 
-      return <DeviceInfo key={device.name} {...device} params={params} />;
+      return <DeviceInfo key={device.name} device={device} params={params} />;
     });
   },
 
   connections(bot) {
     return bot.connections.map((conn) => {
-      return <ConnectionInfo key={conn.name} {...conn} />;
+      return <ConnectionInfo key={conn.name} connection={conn} />;
     });
   },
 
@@ -57,7 +57,7 @@ export default React.createClass({
 
     return (
       <div className="robot">
-        <RobotInfo {...bot} />
+        <RobotInfo robot={bot} />
 
         {this.commandTool(bot)}
 

src/javascripts/views/robots.es

@@ -5,7 +5,7 @@ import RobotInfo from "../components/robot-info.es";
 export default React.createClass({
   robots() {
     let bots = (this.props.data && this.props.data.robots || []);
-    return bots.map((bot) => <RobotInfo key={bot.name} {...bot} />);
+    return bots.map((bot) => <RobotInfo key={bot.name} robot={bot} />);
   },
 
   render() {

src/stylesheets/application.scss

@@ -66,5 +66,6 @@ $modal-bg-color: #fff;
 @import "objects/device";
 @import "objects/nav";
 @import "objects/robots";
+@import "objects/cppp-io-details";
 @import "objects/components";
 @import "objects/tool";

src/stylesheets/objects/_components.scss

@@ -15,6 +15,7 @@
     }
 
     .name {
+      cursor: pointer;
       display: inline-block;
       margin-left: 20px;
       font-weight: bold;

src/stylesheets/objects/_cppp-io-details.scss

@@ -0,0 +1,20 @@
+.cppp-io-details {
+  @include outer-container;
+  margin-top: 15px;
+
+  tr {
+    margin-bottom: 10px;
+    padding-bottom: 3px;
+  }
+
+  .key {
+    font-weight: bold;
+    text-align: right;
+    padding-right: 10px;
+  }
+
+  .value div {
+    display: inline-block;
+    border-bottom: 2px solid #ddd;
+  }
+}

src/stylesheets/objects/_robots.scss

@@ -31,6 +31,7 @@
 
   .name {
     margin-left: 20px;
+    cursor: pointer;
   }
 
   .commands {
@@ -54,4 +55,4 @@
       }
     }
   }
-}
+}