Update

Author: hudovisk

cloud/index.js

@@ -87,37 +87,31 @@ io.use(function(socket, next) {
 io.on('connection', function(socket){
   console.log('a gateway connected');
   //TODO(Hudo): Use Socket .join instead of array
+  if(!socket.user) {
+    socket.disconnect();
+    return
+  }
+
   socket.join(String(socket.user._id));
 
   io.to(String(socket.user._id)).emit("discovery");
 
   socket.on("discovery response", function(resource) {
     console.log("New device " + resource.id);
-    var host = resource.host;
-    delete resource.host;
-    var discoveryResponse = {
-      addr: host,
-      resource: resource
-    }
-    io.to(String(socket.user._id)).emit("discovery response", discoveryResponse);
+
+    io.to(String(socket.user._id)).emit("discovery response", resource);
     socket.emit("get", {identifier: resource.id});
   });
 
-  socket.on("get response", function(getResponse) {
+  socket.on("get response", function(resource) {
     console.log("Get response");
-    var hostAddr = getResponse.host;
-    delete getResponse.host;
-    var host = {
-      addr: hostAddr,
-      resource: getResponse
-    }
-    io.to(String(socket.user._id)).emit("get response", host);
+    io.to(String(socket.user._id)).emit("get response", resource);
 
-    ResourceController.registerResource(socket.user._id, getResponse)
+    ResourceController.registerResource(socket.user._id, resource)
       .then(() => {
-        console.log(getResponse.identifier + " registered successfuly");
+        console.log(resource.identifier + " registered successfuly");
       }, (reason) => {
-        console.log("Failed to register resource: " + getResponse.identifier);
+        console.log("Failed to register resource: " + resource.identifier);
         console.log(reason);
       });
   });
@@ -140,6 +134,9 @@ io.on('connection', function(socket){
     console.log("Action received");
     console.log(action);
     switch(action.type) {
+    case 'DISCOVER_RESOURCE':
+      io.to(String(socket.user._id)).emit("discovery");
+      return;
     case 'GET_RESOURCE':
       io.to(String(socket.user._id)).emit("get", {identifier: action.resourceId});
       return;
@@ -149,6 +146,13 @@ io.on('connection', function(socket){
     case 'DEOBSERVE_RESOURCE':
       io.to(String(socket.user._id)).emit("deobserve", {identifier: action.resourceId});
       return;
+    case 'PUT_RESOURCE':
+      io.to(String(socket.user._id))
+        .emit("put", {
+          identifier: action.resourceId,
+          attrs: [action.attr]
+        });
+      return;
     default:
       console.log("Unknown Action Type: " + action.type);
       return;

webapp/src/actions/resourceActions.js

@@ -1,29 +1,36 @@
 
-export function rcvdDiscoverResource(host) {
+export function rcvdDiscoverResource(resource) {
   return {
     type: 'RCVD_DISCOVER_RESOURCE',
-    host
+    resource
   };
 }
 
-export function rcvdDiscoverDevice(host) {
+export function rcvdDiscoverDevice(resource) {
   return {
     type: 'RCVD_DISCOVER_DEVICE',
-    host
+    resource
   };
 }
 
-export function rcvdDiscoverPlatform(host) {
+export function rcvdDiscoverPlatform(resource) {
   return {
     type: 'RCVD_DISCOVER_PLATFORM',
-    host
+    resource
   };
 }
 
-export function rcvdGetResource(host) {
+export function rcvdGetResource(resource) {
   return {
     type: 'RCVD_GET_RESOURCE',
-    host
+    resource
+  };
+}
+
+export function discoverResources() {
+  return {
+    type: 'DISCOVER_RESOURCE',
+    remote: true
   };
 }
 
@@ -56,4 +63,15 @@ export function deobserveResource(resourceId) {
     resourceId,
     remote: true
   };
+}
+
+export function onAttrChangeAction(data) {
+  console.log("onAttrChangeAction");
+  console.log(data);
+  return {
+    type: 'PUT_RESOURCE',
+    resourceId: data.resourceId,
+    attr: data.attr,
+    remote: true
+  };
 }

webapp/src/components/HostList.jsx

@@ -2,17 +2,26 @@ import classNames from 'classnames';
 import React from 'react';
 
 import {Card, CardActions, CardHeader, CardMedia, CardTitle, CardText} from 'material-ui/Card';
+import Divider from 'material-ui/Divider';
+
 import FlatButton from 'material-ui/FlatButton';
 
 import ResourceAttr from './ResourceAttr';
 
 export default React.createClass({
+  onAttrChange: function(attr) {
+    this.props.onAttrChangeAction({
+      resourceId: this.props.resource.id,
+      attr
+    });
+  },
+
   renderAttrs: function(attrs) {
     if(attrs) {
       return (
         <div>
-          {attrs.map((attr, key) =>
-            <ResourceAttr attr={attr} />
+          {attrs.map((attr, key) => 
+            <ResourceAttr attr={attr} onAttrChange={this.onAttrChange} />
           )}
         </div>
       );
@@ -23,12 +32,14 @@ export default React.createClass({
 
   render: function() {
     const { resource } = this.props;
+    console.log("Resource======");
+    console.log(resource);
     const buttonStyle = {
       marginLeft: '10px'
     };
     return (
-      <div className='col-md-4 col-sm-8'>
-      <Card>
+      <div className='col-md-4 col-sm-6'>
+      <Card style={{marginBottom: '10px'}}>
         <CardTitle title={resource.uri} subtitle={resource.id} />
         <CardText>
           <div>

webapp/src/components/Resource.jsx

@@ -1,6 +1,9 @@
 import React from 'react';
+
+import TextField from 'material-ui/TextField';
 import Toggle from 'material-ui/Toggle';
 
+
 const styles = {
   block: {
     maxWidth: 250,
@@ -17,8 +20,10 @@ export default React.createClass({
       case "Integer":
         return (
           <div>
-            <span>{attr.name}</span>
-            <input type="number" value={attr.value}></input>
+            <TextField 
+              value={attr.value}
+              floatingLabelText={attr.name}>    
+            </TextField>
           </div>
         );
       case "Boolean":
@@ -27,17 +32,22 @@ export default React.createClass({
             toggled={attr.value}
             label={attr.name}
             style={styles.toggle}
+            onClick={() => {
+              attr.value = !attr.value;
+              this.props.onAttrChange(attr);
+            }}
           />
         );
       default:
         return (
-          <input type="text" value={attr.value}></input>
+          <TextField value={attr.value}></TextField>
         );
     }
   },
 
   render: function() {
     const { attr } = this.props;
+
     return (
       <div>
         {this.renderAttrByType(attr)}

webapp/src/components/ResourceAttr.jsx

@@ -15,7 +15,7 @@ export const ResourceGraph = React.createClass({
         name: 'series1',
         values: [ { x: 0, y: 20 }, { x: 1, y: 30 }, { x: 2, y: 10 }, { x: 3, y: 5 }, { x: 4, y: 8 }, { x: 5, y: 15 }, { x: 6, y: 10 } ],
         strokeWidth: 3,
-        strokeDashArray: "5,5",
+        strokeDashArray: "2,2",
       }
     ];
 
@@ -33,9 +33,9 @@ export const ResourceGraph = React.createClass({
             height: 400
           }}
           title="Line Chart"
-          yAxisLabel="Altitude"
+          yAxisLabel="Value"
           xAxisLabel="Elapsed Time (sec)"
-          domain={{x: [,], y: [-10,]}}
+          domain={{x: [resource.lineData[0].values.length - 10,resource.lineData[0].values.length], y: [,]}}
           gridHorizontal={true}
         />
       </div>

webapp/src/components/ResourceGraph.jsx

@@ -4,17 +4,52 @@ import { connect } from 'react-redux';
 
 import Resource from './Resource';
 
+import * as actionsCreator from '../actions/resourceActions';
+
 export const ResourceList = React.createClass({
+  renderResources: function(resources) {
+    if(resources) {
+      return (
+        <div>
+          {resources.map(res => 
+            <Resource key={res.id} {...this.props} resource={res} />
+          )}
+        </div>
+      )
+    } else {
+      return (
+        <div>
+          <h2><small>None resources available!</small></h2>
+        </div>
+      )
+    }
+  },
+
   render: function() {
     const { resources } = this.props;
     return (
       <div>
-          {resources.map(res => 
-            <Resource key={res.id} {...this.props} resource={res} />
-          )}
+        <h1>Resources</h1>
+        <button 
+          className="btn btn-info"
+          onClick={() => this.props.discoverResources()}>
+            Discover all
+        </button>
+        <div style={{marginTop: '10px'}} className="container">
+          { this.renderResources(resources) }
+        </div>
       </div>
     );
   }
 });
 
-export const ResourceListContainer = connect()(ResourceList);
+function mapStateToProps(state) {
+  return {
+    resources: state.get('resources').toJS()
+  }
+}
+
+export const ResourceListContainer = connect(
+  mapStateToProps,
+  actionsCreator
+)(ResourceList);