Commit 844554ef authored by Vladimir Kiryakov's avatar Vladimir Kiryakov
Browse files

added status

parent 7cff401c
......@@ -10,6 +10,11 @@ export const MQTT_PUSH_MESSAGES = 'mqtt_push_messages';
export const MQTT_FORM_TOGGLE = 'mqtt_form_toggle';
export const MQTT_CHANGE_CONNECTION_STATUS = 'MQTT_CHANGE_CONNECTION_STATUS';
export const GATEWAY_DISCONNECTED = 'GATEWAY_DISCONNECTED';
export const GATEWAY_CONNECTED = 'GATEWAY_CONNECTED';
export const DEVICE_CONNECTED = 'DEVICE_CONNECTED';
export const connect = (url, topic) => ({
type: MQTT_CONNECT,
......@@ -19,6 +24,32 @@ export const connect = (url, topic) => ({
}
});
export const changeConnectionStatus = (status) => (dispatch, getState) => {
const {mqtt: {connectionStatus}} = getState();
if (_.isEqual(connectionStatus, status)) return;
switch (status) {
case GATEWAY_DISCONNECTED:
return dispatch({
type: MQTT_CHANGE_CONNECTION_STATUS,
payload: {status: GATEWAY_DISCONNECTED},
});
case GATEWAY_CONNECTED:
return dispatch({
type: MQTT_CHANGE_CONNECTION_STATUS,
payload: {status: GATEWAY_CONNECTED},
});
case DEVICE_CONNECTED:
return dispatch({
type: MQTT_CHANGE_CONNECTION_STATUS,
payload: {status: DEVICE_CONNECTED},
});
default:
return;
}
};
export const disconnect = () => ({
type: MQTT_DISCONNECT,
});
......
......@@ -28,7 +28,7 @@ const middleware = [
const composedEnhancers = compose(
applyMiddleware(...middleware),
(window.__REDUX_DEVTOOLS_EXTENSION__ && config.debug) ? window.__REDUX_DEVTOOLS_EXTENSION__() : f => f,
(window.__REDUX_DEVTOOLS_EXTENSION__) ? window.__REDUX_DEVTOOLS_EXTENSION__() : f => f,
);
export default composedEnhancers;
import mqtt from 'mqtt';
import {MQTT_CONNECT, MQTT_DISCONNECT} from '../actions/mqtt';
import {connected, disconnected, pushMessage, pushMessages} from '../actions/mqtt';
import {connected, disconnected, changeConnectionStatus, pushMessages} from '../actions/mqtt';
import _ from 'lodash';
import config from '../config';
......@@ -45,7 +45,13 @@ const mqttMiddleware = (function () {
const message = msg.toString();
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()});
const json = _.attempt(() => JSON.parse(message.message), {});
messages.push({
topic,
message: _.get(json, 'payload'),
timestamp: _.get(json, 'timestamp')
});
store.dispatch(changeConnectionStatus(_.get(json, 'status')));
}
});
} catch (e) {
......@@ -63,9 +69,10 @@ const mqttMiddleware = (function () {
const isConnected = _.get(store.getState(), 'mqtt.isConnected');
const isConnectInProcess = _.get(store.getState(), 'mqtt.isConnectInProcess');
const clientIsNull = client == null;
if (isConnected && clientIsNull) {
if ((isConnected || isConnectInProcess) && clientIsNull) {
const formValues = _.get(store.getState(), 'form.mqtt.values');
subscribe(formValues.url, formValues.topic);
}
......
import React from 'react';
import PropTypes from 'prop-types'
import styled from 'styled-components';
import classNames from 'classnames';
const Step = styled.div`
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
width: 100%;
font-size: 12px;
padding: 5px;
> label {
user-select: none;
min-width: 120px;
margin: 0;
text-align: right;
padding-right: 5px;
}
> ${StepIndicator} {
width: 30px;
}
`;
const StepIndicator = styled.div`
height: 20px;
width: 20px;
border-radius: 50%;
z-index: 2;
background-color: ${props => props.active ? '#28a745' : '#f2f2f2'};
`;
StepIndicator.propTypes = {
active: PropTypes.bool
};
const Line = styled.div`
border: 1px solid ${props => props.active ? '#28a745' : '#f2f2f2'};
height: 25px;
position: absolute;
right: 14px;
bottom: 25px;
z-index: 1;
`;
Line.propTypes = {
active: PropTypes.bool
};
const Status = ({className, gatewayConnected, deviceConnected}) => {
return (
<div className={classNames('text-muted', className)}>
<Step><label>Gateway connected</label><StepIndicator active={gatewayConnected || deviceConnected}/></Step>
<Step><label>Device connected</label>
<Line active={deviceConnected}/>
<StepIndicator active={deviceConnected}/>
</Step>
</div>
);
};
Status.propTypes = {
gatewayConnected: PropTypes.bool,
deviceConnected: PropTypes.bool
};
Status.defaultProps = {
gatewayConnected: false,
deviceConnected: false
};
export default styled(Status)`
min-width: 160px;
`;
import React, {Fragment} from 'react';
import React from 'react';
import PropTypes from 'prop-types'
import styled from 'styled-components';
import classNames from 'classnames';
......@@ -22,21 +22,19 @@ const Message = styled.div`
const SubscriptionView = ({className, messages, displayType}) => {
return (
<Fragment>
<div className={classNames('text-muted', className)}>
{messages.map((message) => {
return (
<Message key={`${message.timestamp}${displayType}`}>
<MessageContent>
{_.isEqual('json', displayType) ?
<ReactJson
src={_.attempt(() => JSON.parse(message.message), {})}/> : message.message}
</MessageContent>
</Message>
)
})}
</div>
</Fragment>
<div className={classNames('text-muted', className)}>
{messages.map((message) => {
return (
<Message key={`${message.timestamp}${displayType}`}>
<MessageContent>
{_.isEqual('json', displayType) ?
<ReactJson
src={_.attempt(() => JSON.parse(message.message), {})}/> : message.message}
</MessageContent>
</Message>
)
})}
</div>
);
};
......@@ -53,6 +51,7 @@ SubscriptionView.defaultProps = {
};
export default styled(SubscriptionView)`
width: 100%;
overflow-y: auto;
max-height: 400px;
`
import {connect} from 'react-redux';
import _ from 'lodash';
import Status from '../../components/Status';
import {GATEWAY_DISCONNECTED, GATEWAY_CONNECTED, DEVICE_CONNECTED} from '../../../../actions/mqtt';
const mapStateToProps = ({mqtt: {connectionStatus}}) => {
return ({
gatewayConnected: _.isEqual(connectionStatus, GATEWAY_CONNECTED),
deviceConnected: _.isEqual(connectionStatus, DEVICE_CONNECTED)
})
};
export default connect(mapStateToProps)(Status);
import React, {Fragment} from 'react';
import React from 'react';
import Chart from './containers/Chart';
import Status from './containers/Status';
import SubscribeForm from './containers/SubscribeToTopic';
import SubscriptionView from './containers/SubscriptionView';
const CombinedView = () => {
return (
<Fragment>
<Chart/>
<SubscribeForm/>
<SubscriptionView/>
<div className="container-fluid">
<div className="row">
<div className="col-12 col-sm-9 col-md-10 p-0">
<Chart/>
</div>
<div className="col--12 col-sm-3 col-md-2 p-0">
<Status/>
</div>
</div>
<div className="row">
<SubscribeForm/>
</div>
<div className="row">
<SubscriptionView/>
</div>
<br/>
</Fragment>
</div>
)
};
export default CombinedView;
export default CombinedView;
\ No newline at end of file
......@@ -22,7 +22,7 @@ export default styled(Header)`
background-color: #fafafa;
width: 100%;
> img {
height: 35px;
margin: 6px 3px 0px 30px;
height: 26px;
margin: 12px 3px 0px 30px;
}
`
......@@ -23,5 +23,7 @@ LoaderOverlay.propTypes = {
export default styled(LoaderOverlay)`
width: 100%;
height: 100%;
position: relative;
`
......@@ -35,4 +35,6 @@ TextOverlay.propTypes = {
export default styled(TextOverlay)`
position: relative;
width: 100%;
height: 100%;
`
......@@ -4,7 +4,13 @@ import {
MQTT_PUSH_MESSAGES,
MQTT_CONNECTED,
MQTT_DISCONNECTED,
MQTT_FORM_TOGGLE, MQTT_CONNECT
MQTT_FORM_TOGGLE,
MQTT_CONNECT,
MQTT_CHANGE_CONNECTION_STATUS,
GATEWAY_DISCONNECTED,
GATEWAY_CONNECTED,
DEVICE_CONNECTED,
} from '../actions/mqtt'
......@@ -13,9 +19,15 @@ export default (state = {
isConnectInProcess: false,
messages: [],
accelXYZB: [],
displayForm: true
displayForm: true,
connectionStatus: GATEWAY_DISCONNECTED
}, action) => {
switch (action.type) {
case MQTT_CHANGE_CONNECTION_STATUS:
return {
...state,
connectionStatus: action.payload.status
};
case MQTT_PUSH_MESSAGE:
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