Commit d35c6fce authored by Vladimir Kiryakov's avatar Vladimir Kiryakov
Browse files

added spinner

parent 9134d48f
......@@ -3,7 +3,7 @@ import {render} from 'react-dom';
import {Provider} from 'react-redux';
import {Router as ReactRouter, Route, IndexRedirect, browserHistory} from 'react-router';
import {syncHistoryWithStore} from 'react-router-redux'
import Main from './modules/Layout/containers/Main';
import Main from './modules/UIKit/containers/Main';
import SubscribeToTopic from './modules/MQTT/containers/SubscribeToTopic';
import MQTTCombinedView from './modules/MQTT';
......
......@@ -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 = [];
}
......@@ -32,14 +32,12 @@ const mqttMiddleware = (function () {
url = action.payload.url;
topic = action.payload.topic;
reconnectPeriod = action.payload.reconnectPeriod;
client = mqtt.connect(url, {reconnectPeriod});
client.on('connect', () => {
if (config.debug) console.log('MQTT: client connected');
store.dispatch(connected());
client.subscribe(topic);
setTimeout(() => {
client.end();
}, 270000); // 4.5 minutes
});
client.on('close', () => {
if (config.debug) console.log('MQTT: client disconnected');
......@@ -54,6 +52,7 @@ const mqttMiddleware = (function () {
messages.push({topic, message: message, timestamp: new Date().getTime()});
}
});
return next(action);
break;
default:
return next(action);
......
......@@ -5,10 +5,14 @@ import classNames from 'classnames'
import {Field, reduxForm} from 'redux-form'
import {Collapse} from 'reactstrap';
import config from '../../../../config'
import LoadOverlay from '../../../UIKit/components/LoadOverlay';
const SubscribeToTopic = ({className, startListeningTopic, isConnected, reconnectPeriod, topic, url, maxMessageCapture, displayType, displayForm, toggleMqttForm}) => {
const SubscribeToTopic = ({
className, startListeningTopic, isConnected, reconnectPeriod,
topic, url, maxMessageCapture, displayType,
displayForm, toggleMqttForm, isConnectInProcess
}) => {
const renderDisplayType = ({input: {value, onChange}}) => {
const _onChange = (e) => {
......@@ -35,53 +39,55 @@ const SubscribeToTopic = ({className, startListeningTopic, isConnected, reconnec
return (
<div className={classNames('text-muted', className)}>
<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>
<LoadOverlay showLoader={isConnectInProcess}>
<div className={classNames('text-muted', className)}>
<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-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 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>
<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 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>
</form>
</Collapse>
<Field name="displayType" component={renderDisplayType}/>
</div>
</form>
</Collapse>
<Field name="displayType" component={renderDisplayType}/>
</div>
</LoadOverlay>
);
};
......@@ -108,9 +114,10 @@ export default styled(reduxForm({
displayType: 'string'
}
})(SubscribeToTopic))`
margin-bottom: 15px;
> button {
padding: 0;
}
......@@ -123,4 +130,5 @@ export default styled(reduxForm({
}
}
}
`
......@@ -12,6 +12,7 @@ const mapStateToProps = ({mqtt, form}, ownProps) => {
return ({
displayForm: mqtt.displayForm,
isConnected: mqtt.isConnected,
isConnectInProcess: mqtt.isConnectInProcess,
reconnectPeriod: _.get(form, 'mqtt.values.reconnectPeriod'),
topic: _.get(form, 'mqtt.values.topic'),
url: _.get(form, 'mqtt.values.url'),
......@@ -23,10 +24,6 @@ const mapStateToProps = ({mqtt, form}, ownProps) => {
const mapDispatchToProps = dispatch => ({
startListeningTopic: (url, topic) => {
dispatch(mqttConnect(url, topic));
dispatch(batchActions([
mqttConnect(url, topic),
toggleMqttForm()
]));
},
toggleMqttForm: () => {
dispatch(toggleMqttForm());
......
import React, {Fragment} from 'react';
import PropTypes from 'prop-types'
import styled from 'styled-components';
import Spinner from '../Spinner';
const Overlay = styled.div`
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.5);
z-index: 2;
cursor: not-allowed;
`;
const LoadOverlay = ({className, showLoader, children}) => (
<div className={className}>
{showLoader ? <Overlay><Spinner/></Overlay> : null}
{children}
</div>
);
LoadOverlay.propTypes = {
showLoader: PropTypes.bool,
className: PropTypes.string,
children: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.node),
PropTypes.node
])
};
export default styled(LoadOverlay)`
position: relative;
`
import React from 'react';
import styled from 'styled-components';
const Spinner = styled.div`
position: absolute;
top: 50%;
left: 50%;
z-index: 99;
border: 2px solid #f3f3f39c;
border-top: 2px solid #007bffc7;
border-radius: 50%;
width: 50px;
height: 50px;
animation: spin 1.5s linear infinite;
cursor: not-allowed;
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
`;
export default Spinner
......@@ -4,12 +4,13 @@ import {
MQTT_PUSH_MESSAGES,
MQTT_CONNECTED,
MQTT_DISCONNECTED,
MQTT_FORM_TOGGLE
MQTT_FORM_TOGGLE, MQTT_CONNECT
} from '../actions/mqtt'
export default (state = {
isConnected: false,
isConnectInProcess: false,
messages: [],
accelXYZ: [],
displayForm: true
......@@ -43,15 +44,22 @@ export default (state = {
messages: [...action.payload.messages, ...state.messages].slice(0, action.payload.maxMessageCapture),
accelXYZ: newAccelXYZ,
};
case MQTT_CONNECT:
return {
...state,
isConnectInProcess: true
};
case MQTT_CONNECTED:
return {
...state,
isConnected: false
isConnected: true,
isConnectInProcess: false
};
case MQTT_DISCONNECTED:
return {
...state,
isConnected: true,
isConnected: false,
isConnectInProcess: false
};
case MQTT_FORM_TOGGLE:
return {
......
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