Register Device Manually

package.json

@@ -18,7 +18,7 @@
     "express-bearer-token": "2.1.0",
     "http-proxy-middleware": "0.17.4",
     "lodash": "4.17.4",
-    "material-ui": "^0.20.0",
+    "material-ui": "^0.20.1",
     "material-ui-datetimepicker": "^1.0.6",
     "react": "15.4.2",
     "react-dom": "15.4.2",
@@ -61,4 +61,4 @@
       }
     }
   }
-}
+}

src/actions/index.js

@@ -886,3 +886,13 @@ export const recordsDelete = (deviceId, componentId) => {
     })
   }
 }
+
+export const deviceTypesGet = (deviceOverview) => {
+  return agile.deviceManager.typeof(deviceOverview)
+    .then(deviceTypes => {
+      return deviceTypes
+    })
+    .catch(err => {
+      return err
+    });
+}

src/components/RegisterDeviceManual.js

@@ -0,0 +1,253 @@
+
+import React from 'react';
+
+import TextField from 'material-ui/TextField';
+import Dialog from 'material-ui/Dialog';
+import { FlatButton } from 'material-ui';
+import SelectField from 'material-ui/SelectField';
+import MenuItem from 'material-ui/MenuItem';
+
+import { connect } from 'react-redux';
+
+import { Card } from 'material-ui/Card';
+
+import {
+  devicesCreate,
+  deviceTypesFetch,
+  protocolsFetch,
+  deviceTypesGet
+} from '../actions';
+
+class RegisterDeviceManually extends React.Component {
+  constructor() {
+    super();
+
+    this.state = {
+      open: false,
+      deviceStatus: "AVAILABLE",
+      deviceProtocol: null,
+      deviceName: null,
+      deviceId: null,
+      deviceType: null,
+      deviceTypesMenuItem: []
+    };
+    this.handleDeviceValueChange = this.handleDeviceValueChange.bind(this);
+    this.submitManualDeviceForm = this.submitManualDeviceForm.bind(this);
+    this.handleChangeDeviceType = this.handleChangeDeviceType.bind(this);
+    this.handleChangeDeviceProtocol = this.handleChangeDeviceProtocol.bind(this);
+    this.renderDeviceTypeItems = this.renderDeviceTypeItems.bind(this);
+  }
+
+  componentDidMount() {
+    this.props.protocolsFetch()
+  }
+
+  handleDeviceValueChange(event) {
+    this.setState({
+      [event.target.name]: event.target.value
+    });
+  }
+
+  handleChangeDeviceProtocol(event, index, value) {
+    this.setState({
+      deviceProtocol: value
+    })
+    this.renderDeviceTypesSelectList(false)
+    this.renderDeviceTypeItems(value)
+  }
+
+  handleChangeDeviceType (event, index, value) {
+    this.setState({
+      deviceType: value
+    })
+  }
+
+  renderDeviceTypeItems(value) {
+    let device = {
+      id: this.state.deviceId,
+      name: this.state.deviceName,
+      protocol: value,
+      status: this.state.deviceStatus
+    }
+    console.log(device)
+    deviceTypesGet(device)
+    .then(deviceTypes => {
+      console.log(deviceTypes)
+
+      deviceTypes.map((type, i) => {
+        return this.state.deviceTypesMenuItem.push(<MenuItem
+          key={type}
+          value={type}
+          primaryText={type}
+        />)} )
+    })
+    .catch(err => {
+      console.log(err)
+    });
+    // this.renderDeviceTypes(device, this.props.deviceTypes[device.id])
+  }
+
+  renderDeviceTypesSelectList(disable) {
+    return(
+      <div style={{padding: '0px', margin:'0px'}}>
+        <SelectField
+          required
+          name="deviceType"
+          floatingLabelText="Device Type"
+          value={this.state.deviceType}
+          fullWidth={true}
+          onChange={this.handleChangeDeviceType}
+          // disabled={disable}
+        >
+          <MenuItem value={null} label="Device Type" primaryText="Select device type" />
+          {this.state.deviceTypesMenuItem}
+        </SelectField>
+      </div>)
+  }
+
+  renderProtocols() {
+    return(
+      <div style={{padding: '0px', margin:'0px'}}>
+        <SelectField
+          required
+          name="deviceProtocol"
+          floatingLabelText="Protocol"
+          value={this.state.deviceProtocol}
+          onChange={this.handleChangeDeviceProtocol}
+          fullWidth={true}
+        >
+          <MenuItem value={this.state.deviceProtocol} label="Protocol" primaryText="Select Protocol" />
+          {this.props.protocols.map((protocol, i) => {
+            return (<MenuItem
+              key={protocol.dbusInterface}
+              value={protocol.dbusInterface}
+              primaryText={protocol.name}
+            />)
+          })}
+        </SelectField>
+      </div>)
+  }
+
+  deviceForm() {
+    return (
+      <form>
+        <div style={modalWinStyle.form.group}>
+          <TextField
+            required
+            name="deviceId"
+            hintText="Address"
+            floatingLabelText="Device Address"
+            floatingLabelFixed={true}
+            fullWidth={true}
+            onChange={this.handleDeviceValueChange}
+            // errorText="Required"
+            value={this.state.deviceId}
+          />
+        </div>
+        <div style={modalWinStyle.form.group}>
+          <TextField
+            required
+            hintText="Name"
+            name="deviceName"
+            floatingLabelText="Name"
+            floatingLabelFixed={true}
+            fullWidth={true}
+            onChange={this.handleDeviceValueChange}
+            // errorText="Required"
+            value={this.state.deviceName}
+          />
+        </div>
+        <div style={modalWinStyle.form.group}>
+          {this.renderProtocols()}
+        </div>
+        <div style={modalWinStyle.form.group}>
+          {this.renderDeviceTypesSelectList(true)}
+        </div>
+      </form>)
+  }
+
+  handleOpen = () => {
+    this.setState({open: true});
+  };
+
+  handleClose = () => {
+    this.setState({open: false});
+  };
+
+  submitManualDeviceForm() {
+    console.log(this.state)
+    let device = {
+      id: this.state.deviceId,
+      name: this.state.deviceName,
+      protocol: this.state.deviceProtocol,
+      status: this.state.deviceStatus
+    }
+    this.props.devicesCreate(device, this.state.deviceType)
+    this.setState({open: false});
+  }
+
+  render() {
+    const actions = [
+      <FlatButton
+        label="Cancel"
+        primary={true}
+        onClick={this.handleClose}
+      />,
+      <FlatButton
+        label="Submit"
+        primary={true}
+        onClick={this.submitManualDeviceForm}
+      />,
+    ];
+    return (
+      <Card className='discover' style={modalWinStyle.card}>
+          <div style={modalWinStyle.btn} >
+            <FlatButton style={modalWinStyle.btn} onClick={this.handleOpen}>Register Device</FlatButton>
+          </div>
+          <Dialog
+            open={this.state.open}
+            onClose={this.handleClose}
+            aria-labelledby="form-dialog-title"
+            title="Register Device"
+            actions={actions}
+            modal={true}
+          >
+            {this.deviceForm()}
+          </Dialog>
+
+      </Card>
+    )
+  }
+}
+
+const modalWinStyle = {
+  form: {
+    group: {
+      width: '100%',
+      display: 'block',
+      margin: '5px'
+    }
+  },
+  label: {fontSize: '1rem', fontWeight: 'bold'},
+  btn: {width: '100%', textAligh: 'center'},
+  card: {
+    marginBottom: '10px'
+  },
+}
+
+const mapStateToProps = (state) => {
+  return {
+    deviceTypes: state.deviceTypes,
+    protocols: state.protocols
+  };
+};
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    devicesCreate: (device, type) => dispatch(devicesCreate(device, type)),
+    deviceTypesFetch: (device) => dispatch(deviceTypesFetch(device)),
+    protocolsFetch: () => dispatch(protocolsFetch())
+  };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(RegisterDeviceManually);

src/components/index.js

@@ -15,6 +15,7 @@ import SettingsMenu from './SettingsMenu';
 import DeviceItem from './DeviceItem';
 import EntityItem from './EntityItem';
 import SecurityItem from './SecurityItem';
+import RegisterDeviceManual from './RegisterDeviceManual';
 import LockItem from './LockItem';
 import Form from './Form';
 import Stream from './Stream';
@@ -39,5 +40,6 @@ export {
   SecurityItem,
   LockItem,
   Form,
-  LocalDataOverview
+  LocalDataOverview,
+  RegisterDeviceManual
 }

src/containers/Discover.js

@@ -11,7 +11,7 @@
  *    Resin.io, FBK, Jolocom - initial API and implementation
  ******************************************************************************/
 import React, { Component } from 'react';
-import { DeviceItem } from '../components';
+import { DeviceItem, RegisterDeviceManual } from '../components';
 import SelectField from 'material-ui/SelectField';
 import MenuItem from 'material-ui/MenuItem';
 import { connect } from 'react-redux';
@@ -118,15 +118,21 @@ class Discover extends Component {
     const {discovery, devices} = this.props
     if (devices.length === 0 && discovery) {
       return (
-        <div className='loadingScreen'>
-          <CircularProgress size={250} thickness={10}/>
+        <div className="root">
+          <RegisterDeviceManual />
+          <div className='loadingScreen'>
+            <CircularProgress size={250} thickness={10}/>
+          </div>
         </div>
       )
     }
 
     return (
-      <div className='discover'>
-        {this.renderItems(this.props.devices)}
+      <div className="root">
+        <RegisterDeviceManual />
+        <div className='discover'>
+          {this.renderItems(this.props.devices)}
+        </div>
       </div>
     );
   }