Skip to content

Commit

Permalink
resurrect mqtt event source
Browse files Browse the repository at this point in the history
  • Loading branch information
@todbot
todbot committed Nov 21, 2022
1 parent 3036fb9 commit 6ef2e30
Show file tree
Hide file tree
Showing 5 changed files with 268 additions and 71 deletions.
128 changes: 92 additions & 36 deletions app/components/gui/mqttForm.js
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,23 @@
"use strict";

var React = require('react');

var Grid = require('react-bootstrap').Grid;
var Col = require('react-bootstrap').Col;
var Row = require('react-bootstrap').Row;
var Modal = require('react-bootstrap').Modal;
var Input = require('react-bootstrap').Input;
var Button = require('react-bootstrap').Button;

var LinkedStateMixin = require('react-addons-linked-state-mixin');

var Form = require('react-bootstrap').Form;
var FormControl = require('react-bootstrap').FormControl;
var FormGroup = require('react-bootstrap').FormGroup;
var ControlLabel = require('react-bootstrap').ControlLabel;
var Radio = require('react-bootstrap').Radio;
var Switch = require('react-bootstrap-switch');

var Blink1SerialOption = require('./blink1SerialOption');

var MqttForm = React.createClass({
mixins: [LinkedStateMixin],
propTypes: {
rule: React.PropTypes.object.isRequired,
allowMultiBlink1: React.PropTypes.bool,
Expand All @@ -26,20 +28,17 @@ var MqttForm = React.createClass({
onCopy: React.PropTypes.func
},
getInitialState: function() {
return {
// name: rule.name,
// patternId: rule.patternId
};
return {};
},
// FIXME: why am I doing this?

componentWillReceiveProps: function(nextProps) {
var rule = nextProps.rule;
this.setState({
type: 'mqtt',
enabled: rule.enabled,
name: rule.name,
actionType: 'play-pattern',
patternId: rule.patternId || nextProps.patterns[0].id,
enabled: rule.enabled || false,
name: rule.name || 'new rule',
actionType: rule.actionType || 'parse-color',
//patternId: rule.patternId || nextProps.patterns[0].id,
blink1Id: rule.blink1Id || "0",
topic: rule.topic || "",
url: rule.url || "",
Expand All @@ -53,6 +52,16 @@ var MqttForm = React.createClass({
handleBlink1SerialChange: function(blink1Id) {
this.setState({blink1Id: blink1Id});
},
handleActionType: function(e) {
var actionType = e.target.value;
this.setState({actionType:actionType});
},
handleInputChange: function(event) {
var target = event.target;
var value = target.type === 'checkbox' ? target.checked : target.value;
var name = target.name;
this.setState({ [name]: value });
},

render: function() {
var self = this;
Expand All @@ -63,38 +72,85 @@ var MqttForm = React.createClass({

return (
<div>
<Modal show={this.props.show} onHide={this.close} >
<Modal show={this.props.show} onHide={this.handleClose} >
<Modal.Header>
<Modal.Title>MQTT Settings</Modal.Title>
</Modal.Header>
<Modal.Body>
<p style={{color: "#f00"}}>{this.state.errormsg}</p>
<form className="form-horizontal" >
<Input labelClassName="col-xs-3" wrapperClassName="col-xs-8"
type="text" label="Rule Name" placeholder="Name of rule on IFTTT"
valueLink={this.linkState('name')} />
<Input labelClassName="col-xs-3" wrapperClassName="col-xs-8"
type="text" label="MQTT Topic" placeholder="topic to subscribe to"
valueLink={this.linkState('topic')} />
<Input labelClassName="col-xs-3" wrapperClassName="col-xs-8"
type="text" label="MQTT URL" placeholder="e.g. mqtts://io.adafruit.com/"
valueLink={this.linkState('url')} />
<Input labelClassName="col-xs-3" wrapperClassName="col-xs-8"
type="text" label="MQTT username" placeholder="optional username"
valueLink={this.linkState('username')} />
<Input labelClassName="col-xs-3" wrapperClassName="col-xs-8"
type="text" label="MQTT password" placeholder="optional password or API key"
valueLink={this.linkState('password')} />
<Input labelClassName="col-xs-3" wrapperClassName="col-xs-5"
type="select" label="Pattern"
valueLink={this.linkState('patternId')} >
{this.props.patterns.map( createPatternOption, this )}
</Input>
<Form horizontal >
<FormGroup controlId="formName" title="Name of the rule">
<Col sm={3} componentClass={ControlLabel}> Rule Name </Col>
<Col sm={8}>
<FormControl type="text" placeholder="Name of rule"
name="name" value={this.state.name} onChange={this.handleInputChange} />
</Col>
</FormGroup>

<FormGroup controlId="formTopic">
<Col sm={3} componentClass={ControlLabel}> MQTT Topic </Col>
<Col sm={8}>
<FormControl type="text" placeholder="topic to subscribe to"
name="topic" value={this.state.topic} onChange={this.handleInputChange} />
</Col>
</FormGroup>

<FormGroup controlId="formUrl">
<Col sm={3} componentClass={ControlLabel}> MQTT URL </Col>
<Col sm={8}>
<FormControl type="text" placeholder="e.g. mqtts://io.adafruit.com/"
name="url" value={this.state.url} onChange={this.handleInputChange} />
</Col>
</FormGroup>

<FormGroup controlId="formUsername">
<Col sm={3} componentClass={ControlLabel}> MQTT username </Col>
<Col sm={8}>
<FormControl type="text" placeholder="e.g. mqtts://io.adafruit.com/"
name="username" value={this.state.username} onChange={this.handleInputChange} />
</Col>
</FormGroup>

<FormGroup controlId="formPassword">
<Col sm={3} componentClass={ControlLabel}> MQTT password </Col>
<Col sm={8}>
<FormControl type="text" placeholder=""
name="password" value={this.state.password} onChange={this.handleInputChange} />
</Col>
</FormGroup>

<Grid >
<Row><Col xs={2}>
<label> Parse output as </label>
</Col><Col xs={4} >
<FormGroup controlId="formActionType" >
<Radio title=""
value="parse-json"
checked={this.state.actionType==='parse-json'}
onChange={this.handleActionType}>
Parse output as JSON (color or pattern)
</Radio>
<Radio title=""
value="parse-pattern"
checked={this.state.actionType==='parse-pattern'}
onChange={this.handleActionType}>
Parse output as pattern name
</Radio>
<Radio title=""
value="parse-color"
checked={this.state.actionType==='parse-color'}
onChange={this.handleActionType}>
Parse output as color
</Radio>
</FormGroup>
</Col></Row>
</Grid>

{!this.props.allowMultiBlink1 ? null :
<Blink1SerialOption label="blink(1) to use" defaultText="-use default-"
labelClassName="col-xs-3" wrapperClassName="col-xs-4"
serial={this.state.blink1Id} onChange={this.handleBlink1SerialChange}/>}
</form>
</Form>
</Modal.Body>
<Modal.Footer>
<Row>
Expand Down
17 changes: 9 additions & 8 deletions app/components/gui/toolTable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ var MailForm = require('./mailForm');
var ScriptForm = require('./scriptForm');
var SkypeForm = require('./skypeForm');
var TimeForm = require('./timeForm');
// var MqttForm = require('./mqttForm');
var MqttForm = require('./mqttForm');

var ToolTableList = require('./toolTableList');

Expand Down Expand Up @@ -105,7 +105,7 @@ var ToolTable = React.createClass({
TimeService.reloadConfig();
}
else if( rule.type === 'mqtt' ) {
// MqttService.reloadConfig();
MqttService.reloadConfig();
}
},
handleSaveForm: function(data) {
Expand Down Expand Up @@ -193,12 +193,6 @@ var ToolTable = React.createClass({
}
}

// <MqttForm show={this.state.showForm==='mqtt'}
// workingIndex={this.state.workingIndex}
// rule={workingRule} patterns={patterns} allowMultiBlink1={allowMultiBlink1}
// onSave={this.handleSaveForm} onCancel={this.handleCancelForm}
// onDelete={this.handleDeleteRule} onCopy={this.handleCopyRule} />

return (
<div style={{position: "relative", height: 200, cursor:'default'}}>

Expand All @@ -220,6 +214,12 @@ var ToolTable = React.createClass({
onSave={this.handleSaveForm} onCancel={this.handleCancelForm}
onDelete={this.handleDeleteRule} onCopy={this.handleCopyRule} />

<MqttForm show={this.state.showForm==='mqtt'}
workingIndex={this.state.workingIndex}
rule={workingRule} patterns={patterns} allowMultiBlink1={allowMultiBlink1}
onSave={this.handleSaveForm} onCancel={this.handleCancelForm}
onDelete={this.handleDeleteRule} onCopy={this.handleCopyRule} />

<SkypeForm show={this.state.showForm==='skype'}
workingIndex={this.state.workingIndex}
rule={workingRule} patterns={patterns} allowMultiBlink1={allowMultiBlink1}
Expand All @@ -245,6 +245,7 @@ var ToolTable = React.createClass({
<MenuItem eventKey="script"><i className="fa fa-code"></i> Add Script</MenuItem>
<MenuItem eventKey="url"><i className="fa fa-cloud"></i> Add URL</MenuItem>
<MenuItem eventKey="file"><i className="fa fa-file"></i> Add File</MenuItem>
<MenuItem eventKey="mqtt"><i className="fa fa-share-alt"></i> Add MQTT</MenuItem>
<MenuItem eventKey="skype"><i className="fa fa-skype"></i> Add Skype</MenuItem>
<MenuItem eventKey="time"><i className="fa fa-clock-o"></i> Add Alarm</MenuItem>
</DropdownButton>
Expand Down
4 changes: 2 additions & 2 deletions app/maingui.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ var MailService = require('./server/mailService');
var SkypeService = require('./server/skypeService');
var ScriptService = require('./server/scriptService');
var TimeService = require('./server/timeService');
// var MqttService = require('./server/mqttService');
var MqttService = require('./server/mqttService');

setTimeout( function() {
log.msg("services starting...");
Expand All @@ -88,7 +88,7 @@ setTimeout( function() {
SkypeService.start();
ScriptService.start();
TimeService.start();
// MqttService.start();
MqttService.start();
log.msg("services started");
}, 2000);

Expand Down
1 change: 1 addition & 0 deletions app/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
"imap": "^0.8.19",
"is-electron-renderer": "^2.0.1",
"moment": "^2.17.1",
"mqtt": "^4.3.7",
"nconf": "^0.11.4",
"needle": "^1.5.1",
"node-blink1": "^0.5.1",
Expand Down
Loading

0 comments on commit 6ef2e30

Please sign in to comment.