Commit 6baa711c authored by Vladimir Kiryakov's avatar Vladimir Kiryakov
Browse files

added toasts

parent d35c6fce
import _ from "lodash";
import * as toast from '../modules/UIKit/utils/toast';
export const MQTT_CONNECT = 'mqtt_connect';
export const MQTT_CONNECTED = 'mqtt_connected';
......@@ -17,13 +18,19 @@ export const connect = (url, topic) => ({
}
});
export const connected = () => ({
type: MQTT_CONNECTED,
});
export const connected = () => {
toast.success('Connected to MQTT');
return {
type: MQTT_CONNECTED,
};
};
export const disconnected = () => ({
type: MQTT_DISCONNECTED,
});
export const disconnected = () => {
toast.error('MQTT connection is closed');
return {
type: MQTT_DISCONNECTED,
};
};
export const pushMessage = (topic, message) => (dispatch, getState) => {
const maxMessageCapture = _.get(getState(), 'form.mqtt.values.maxMessageCapture');
......
......@@ -2,8 +2,6 @@ import mqtt from 'mqtt';
import {MQTT_CONNECT} from '../actions/mqtt';
import {connected, disconnected, pushMessage, pushMessages} from '../actions/mqtt';
import _ from 'lodash';
// import { notifyConnected } from '../actions/device';
// import { pushData } from '../actions/data';
import config from '../config';
const mqttMiddleware = (function () {
......@@ -18,7 +16,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 = [];
}
......
import React from 'react';
import PropTypes from 'prop-types'
import styled from 'styled-components';
import _ from 'lodash';
import classNames from 'classnames'
import {Field, reduxForm} from 'redux-form'
import {Collapse} from 'reactstrap';
......
import React from 'react';
import PropTypes from 'prop-types';
import {connect} from 'react-redux';
import _ from 'lodash';
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,
......@@ -20,7 +17,6 @@ const mapStateToProps = ({mqtt, form}, ownProps) => {
})
};
const mapDispatchToProps = dispatch => ({
startListeningTopic: (url, topic) => {
dispatch(mqttConnect(url, topic));
......
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 SubscriptionView from '../../components/SubscriptionView';
const mapStateToProps = ({mqtt, form}, ownProps) => {
return ({
displayType: _.get(form, 'mqtt.values.displayType'),
......@@ -15,11 +11,4 @@ const mapStateToProps = ({mqtt, form}, ownProps) => {
};
const mapDispatchToProps = dispatch => ({
startListeningTopic: (url, topic) => {
dispatch(mqttConnect(url, topic));
}
});
export default connect(mapStateToProps, mapDispatchToProps)(SubscriptionView);
export default connect(mapStateToProps)(SubscriptionView);
......@@ -2,7 +2,6 @@ import React from 'react';
import PropTypes from 'prop-types'
import styled from 'styled-components';
const Header = ({className, children}) => (
<header className={className}>
<img src="/images/RigadoLogo.png"/>
......
......@@ -5,7 +5,7 @@ import Sidebar from '../components/Sidebar';
import Link from '../components/Sidebar/Link';
import Header from '../components/Header';
import classNames from 'classnames'
import { ToastContainer, toast } from 'react-toastify';
import styled from "styled-components";
class Main extends React.Component {
......@@ -15,7 +15,8 @@ class Main extends React.Component {
return (
<div className={classNames('Layout-Main container-fluid', this.props.className)}>
<div className={classNames('UIKit-Main container-fluid', this.props.className)}>
<ToastContainer hideProgressBar newestOnTop closeButton={false} toastClassName="UIKit-Toast" bodyClassName="UIKit-Toast-Body" position="bottom-right"/>
<div className="row">
<Header/>
</div>
......@@ -41,18 +42,18 @@ export default styled(Main)`
height: 100%;
> .row:first-child{
height: 50px;
}
> .row > ${Header} {
height: 50px;
}
> .row:nth-child(2){
> .row:last-child {
height: calc(100% - 50px);
> ${Sidebar}{
> ${Sidebar} {
width: 200px;
}
> .content{
> .content {
padding: 20px 50px 20px 50px;
width: calc(100%);
}
......
import React from 'react';
import { toast } from 'react-toastify';
export const success = (text) => {
return toast(<div className="bg-success text-white">{text}</div>)
};
export const error = (text) => {
return toast(<div className="bg-warning text-white">{text}</div>)
};
\ No newline at end of file
import { injectGlobal } from 'styled-components';
import {injectGlobal} from 'styled-components';
injectGlobal`
html {
......@@ -18,5 +18,30 @@ injectGlobal`
height: 100%;
width: 100%;
}
&&& {
.UIKit-Toast-Body{
}
.UIKit-Toast{
//box-shadow: none !important;
padding: 0 !important;
> .UIKit-Toast-Body {
margin: 0 !important;
height: 100%;
width: 100%;
> div {
padding: 5px 10px;
min-height: 64px;
text-align: center;
vertical-align: center;
display: flex;
justify-content: center;
align-items: center;
}
}
}
}
`;
\ No newline at end of file
......@@ -1247,6 +1247,10 @@ bootstrap@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.0.0.tgz#ceb03842c145fcc1b9b4e15da2a05656ba68469a"
bowser@^1.7.3:
version "1.9.3"
resolved "https://registry.yarnpkg.com/bowser/-/bowser-1.9.3.tgz#6643ae4d783f31683f6d23156976b74183862162"
boxen@^1.2.1:
version "1.3.0"
resolved "https://registry.yarnpkg.com/boxen/-/boxen-1.3.0.tgz#55c6c39a8ba58d9c61ad22cd877532deb665a20b"
......@@ -2008,6 +2012,13 @@ css-color-names@0.0.4:
version "0.0.4"
resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
css-in-js-utils@^2.0.0:
version "2.0.1"
resolved "https://registry.yarnpkg.com/css-in-js-utils/-/css-in-js-utils-2.0.1.tgz#3b472b398787291b47cfe3e44fecfdd9e914ba99"
dependencies:
hyphenate-style-name "^1.0.2"
isobject "^3.0.1"
css-loader@0.28.7:
version "0.28.7"
resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.28.7.tgz#5f2ee989dd32edd907717f953317656160999c1b"
......@@ -3015,7 +3026,7 @@ fbemitter@^2.0.0:
dependencies:
fbjs "^0.8.4"
fbjs@^0.8.0, fbjs@^0.8.16, fbjs@^0.8.4, fbjs@^0.8.5, fbjs@^0.8.9:
fbjs@^0.8.0, fbjs@^0.8.12, fbjs@^0.8.16, fbjs@^0.8.4, fbjs@^0.8.5, fbjs@^0.8.9:
version "0.8.16"
resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db"
dependencies:
......@@ -3283,6 +3294,16 @@ getpass@^0.1.1:
dependencies:
assert-plus "^1.0.0"
glamor@^2.20.40:
version "2.20.40"
resolved "https://registry.yarnpkg.com/glamor/-/glamor-2.20.40.tgz#f606660357b7cf18dface731ad1a2cfa93817f05"
dependencies:
fbjs "^0.8.12"
inline-style-prefixer "^3.0.6"
object-assign "^4.1.1"
prop-types "^15.5.10"
through "^2.3.8"
glob-base@^0.3.0:
version "0.3.0"
resolved "https://registry.yarnpkg.com/glob-base/-/glob-base-0.3.0.tgz#dbb164f6221b1c0b1ccf82aea328b497df0ea3c4"
......@@ -3768,6 +3789,10 @@ https-browserify@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
hyphenate-style-name@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.2.tgz#31160a36930adaf1fc04c6074f7eb41465d4ec4b"
iconv-lite@0.4.19, iconv-lite@^0.4.17, iconv-lite@~0.4.13:
version "0.4.19"
resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.19.tgz#f7468f60135f5e5dad3399c0a81be9a1603a082b"
......@@ -3846,6 +3871,13 @@ ini@^1.3.4, ini@~1.3.0:
version "1.3.5"
resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
inline-style-prefixer@^3.0.6:
version "3.0.8"
resolved "https://registry.yarnpkg.com/inline-style-prefixer/-/inline-style-prefixer-3.0.8.tgz#8551b8e5b4d573244e66a34b04f7d32076a2b534"
dependencies:
bowser "^1.7.3"
css-in-js-utils "^2.0.0"
inquirer@3.3.0, inquirer@^3.0.6:
version "3.3.0"
resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-3.3.0.tgz#9dd2f2ad765dcab1ff0443b491442a20ba227dc9"
......@@ -6503,6 +6535,14 @@ react-textarea-autosize@^5.1.0:
dependencies:
prop-types "^15.6.0"
react-toastify@^3.4.3:
version "3.4.3"
resolved "https://registry.yarnpkg.com/react-toastify/-/react-toastify-3.4.3.tgz#c0454834c403682729e3f616112427cfb1c723cd"
dependencies:
glamor "^2.20.40"
prop-types "^15.6.0"
react-transition-group "^2.2.1"
react-transition-group@^2.2.1:
version "2.3.0"
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.3.0.tgz#8dd1af58f6af284b19fd057f512e74f20438ad31"
......@@ -7744,7 +7784,7 @@ through2@^2.0.1, through2@^2.0.2, through2@~2.0.0:
readable-stream "^2.1.5"
xtend "~4.0.1"
through@^2.3.6:
through@^2.3.6, through@^2.3.8:
version "2.3.8"
resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
......
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