Commit 289b3901 authored by Vladimir Kiryakov's avatar Vladimir Kiryakov
Browse files

added hide/show config form functionality

parent 9956d396
......@@ -6,6 +6,8 @@ export const MQTT_DISCONNECTED = 'mqtt_disconnected';
export const MQTT_PUSH_MESSAGE = 'mqtt_push_message';
export const MQTT_PUSH_MESSAGES = 'mqtt_push_messages';
export const MQTT_FORM_TOGGLE = 'mqtt_form_toggle';
export const connect = (url, topic) => ({
type: MQTT_CONNECT,
......@@ -33,7 +35,7 @@ export const pushMessage = (topic, message) => (dispatch, getState) => {
maxMessageCapture
}
});
}
};
export const pushMessages = (messages) => (dispatch, getState) => {
const maxMessageCapture = _.get(getState(), 'form.mqtt.values.maxMessageCapture');
......@@ -44,4 +46,9 @@ export const pushMessages = (messages) => (dispatch, getState) => {
maxMessageCapture
}
});
};
\ No newline at end of file
};
export const toggleMqttForm = () => ({
type: MQTT_FORM_TOGGLE,
});
\ No newline at end of file
......@@ -18,7 +18,7 @@ const mqttMiddleware = (function () {
if (interval) clearInterval(interval);
interval = setInterval(() => {
if (messages.length) {
if (config.debug) console.log('MQTT: dispatch batch update');
// if (config.debug) console.log('MQTT: dispatch batch update');
store.dispatch(pushMessages(messages));
messages = [];
}
......@@ -34,7 +34,7 @@ const mqttMiddleware = (function () {
reconnectPeriod = action.payload.reconnectPeriod;
client = mqtt.connect(url, {reconnectPeriod});
client.on('connect', () => {
if (config.debug) console.log('MQTT: client connected');
// if (config.debug) console.log('MQTT: client connected');
store.dispatch(connected());
client.subscribe(topic);
client.publish(topic, '{}');
......@@ -43,14 +43,14 @@ const mqttMiddleware = (function () {
}, 270000); // 4.5 minutes
});
client.on('close', () => {
if (config.debug) console.log('MQTT: client disconnected');
// if (config.debug) console.log('MQTT: client disconnected');
client.end();
store.dispatch(disconnected());
});
client.on('message', (msgTopic, msg) => {
const message = decoder.decode(msg);
if (config.debug) console.info('MQTT: Message recieved.\nTopic: %s\nPayload: %s', topic, message);
// if (config.debug) console.info('MQTT: Message recieved.\nTopic: %s\nPayload: %s', topic, message);
if (_.isEqual(topic, msgTopic)) {
messages.push({topic, message: message, timestamp: new Date().getTime()});
}
......@@ -67,7 +67,7 @@ const mqttMiddleware = (function () {
"timestamp": 2123243234434
}
`);
}, 100)
}, 1000)
});
break;
default:
......
......@@ -3,10 +3,11 @@ import PropTypes from 'prop-types'
import styled from 'styled-components';
import classNames from 'classnames'
import {Field, reduxForm} from 'redux-form'
import {Collapse} from 'reactstrap';
import config from '../../../../config'
const SubscribeToTopic = ({className, startListeningTopic, isConnected, reconnectPeriod, topic, url, maxMessageCapture, displayType}) => {
const SubscribeToTopic = ({className, startListeningTopic, isConnected, reconnectPeriod, topic, url, maxMessageCapture, displayType, displayForm, toggleMqttForm}) => {
const renderDisplayType = ({input: {value, onChange}}) => {
......@@ -14,7 +15,7 @@ const SubscribeToTopic = ({className, startListeningTopic, isConnected, reconnec
onChange(e.target.name)
};
return (
<div className="form-check">
<div>
<label className="font-weight-bold">MQTT payload display</label>
<div className="custom-control custom-radio">
<input type="radio" id="display-type-json" name="json" className="custom-control-input"
......@@ -35,46 +36,51 @@ const SubscribeToTopic = ({className, startListeningTopic, isConnected, reconnec
return (
<div className={classNames('text-muted', className)}>
<label className="font-weight-bold">Subscribe</label>
<small className="form-text">
Devices publish MQTT messages on topics. You can use this client to subscribe to a topic and receive
these messages.
</small>
<button type="button" className="btn btn-link"
onClick={toggleMqttForm}>{displayForm ? 'Hide Subscribe form' : 'Show Subscribe form'}</button>
<Collapse isOpen={displayForm}>
<small className="form-text">
Devices publish MQTT messages on topics. You can use this client to subscribe to a topic
and receive
these messages.
</small>
<form>
<div className="form-row form-group">
<div className="col-6">
<label className="font-weight-bold">Subscription url</label>
<Field name="url" component="input" type="text" className="form-control"
placeholder="protocol://host:port/"/>
<form>
<div className="form-row form-group">
<div className="col-10">
<label className="font-weight-bold">Subscription url</label>
<Field name="url" component="input" type="text" className="form-control"
placeholder="protocol://host:port/"/>
</div>
</div>
</div>
<div className="form-row">
<div className="col-4">
<label className="font-weight-bold">Subscription topic</label>
<Field name="topic" component="input" type="text" className="form-control"
placeholder="Specify a topic to subscribe to, e.g. myTopic/1"/>
</div>
<div className="form-group col-2">
<label className="font-weight-bold">Max message capture</label>
<Field name="maxMessageCapture" component="input" type="number" className="form-control"/>
<small className="form-text">
Configure how many messages are kept for each topic subscription.
</small>
</div>
<div className="col-2">
<button onClick={() => {
startListeningTopic(url, topic)
}}
type="button"
className="btn btn-outline-primary"
disabled={!(topic && url)}>
Subscribe to topic
</button>
<div className="form-row">
<div className="col-7">
<label className="font-weight-bold">Subscription topic</label>
<Field name="topic" component="input" type="text" className="form-control"
placeholder="Specify a topic to subscribe to, e.g. myTopic/1"/>
</div>
<div className="form-group col-3">
<label className="font-weight-bold">Max message capture</label>
<Field name="maxMessageCapture" component="input" type="number"
className="form-control"/>
<small className="form-text">
Configure how many messages are kept for each topic subscription.
</small>
</div>
<div className="col-2">
<button onClick={() => {
startListeningTopic(url, topic)
}}
type="button"
className="btn btn-outline-primary"
disabled={!(topic && url)}>
Subscribe to topic
</button>
</div>
</div>
</div>
<Field name="displayType" component={renderDisplayType}/>
</form>
</form>
</Collapse>
<Field name="displayType" component={renderDisplayType}/>
</div>
);
};
......@@ -87,7 +93,9 @@ SubscribeToTopic.propTypes = {
topic: PropTypes.string,
url: PropTypes.string,
maxMessageCapture: PropTypes.number,
displayType: PropTypes.string
displayType: PropTypes.string,
displayForm: PropTypes.bool,
toggleMqttForm: PropTypes.func
};
......@@ -100,7 +108,13 @@ export default styled(reduxForm({
displayType: 'string'
}
})(SubscribeToTopic))`
> form {
margin-bottom: 15px;
> button {
padding: 0;
}
form {
>.form-row {
>.col-2 {
>.btn {
......
......@@ -26,7 +26,6 @@ const Message = styled.div`
const SubscriptionView = ({className, messages, displayType}) => {
return (
<Fragment>
<Header>Messages</Header>
<div className={classNames('text-muted', className)}>
{messages.map((message) => {
return (
......
......@@ -2,13 +2,15 @@ import React from 'react';
import PropTypes from 'prop-types';
import {connect} from 'react-redux';
import _ from 'lodash';
import {connect as mqttConnect} from '../../../../actions/mqtt';
import {connect as mqttConnect, toggleMqttForm} from '../../../../actions/mqtt';
import { batchActions } from 'redux-batched-actions';
import SubscribeToTopicView from '../../components/SubscribeForm';
const mapStateToProps = ({mqtt, form}, ownProps) => {
return ({
displayForm: mqtt.displayForm,
isConnected: mqtt.isConnected,
reconnectPeriod: _.get(form, 'mqtt.values.reconnectPeriod'),
topic: _.get(form, 'mqtt.values.topic'),
......@@ -21,6 +23,13 @@ const mapStateToProps = ({mqtt, form}, ownProps) => {
const mapDispatchToProps = dispatch => ({
startListeningTopic: (url, topic) => {
dispatch(mqttConnect(url, topic));
dispatch(batchActions([
mqttConnect(url, topic),
toggleMqttForm()
]));
},
toggleMqttForm: () => {
dispatch(toggleMqttForm());
}
});
......
......@@ -14,7 +14,6 @@ const CombinedView = () => {
<Fragment>
<Chart/>
<SubscribeForm/>
<br/>
<SubscriptionView/>
<br/>
</Fragment>
......
......@@ -3,14 +3,16 @@ import {
MQTT_PUSH_MESSAGE,
MQTT_PUSH_MESSAGES,
MQTT_CONNECTED,
MQTT_DISCONNECTED
MQTT_DISCONNECTED,
MQTT_FORM_TOGGLE
} from '../actions/mqtt'
export default (state = {
isConnected: false,
messages: [],
accelXYZ: [[], [], []]
accelXYZ: [[], [], []],
displayForm: true
}, action) => {
switch (action.type) {
case MQTT_PUSH_MESSAGE:
......@@ -44,6 +46,11 @@ export default (state = {
...state,
isConnected: true,
};
case MQTT_FORM_TOGGLE:
return {
...state,
displayForm: !state.displayForm,
};
default:
return state
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment