From 55ea381b3b1543fef5276acdc37a48f5217360cc Mon Sep 17 00:00:00 2001 From: Thomas Nordquist Date: Mon, 18 Feb 2019 16:02:21 +0100 Subject: [PATCH] WiP --- Readme.tpl.md | 1 + app/src/PersistantStorage.ts | 3 -- app/src/actions/Sidebar.ts | 30 ++++++++++-- app/src/components/Copy.tsx | 9 +++- app/src/components/CustomIconButton.tsx | 34 ++++++++++++++ app/src/components/Settings.tsx | 2 +- app/src/components/Sidebar/Sidebar.tsx | 61 ++++++++++++++++++------- events/EventBus.ts | 4 ++ 8 files changed, 117 insertions(+), 27 deletions(-) create mode 100644 app/src/components/CustomIconButton.tsx diff --git a/Readme.tpl.md b/Readme.tpl.md index 4eb04dc..615781e 100644 --- a/Readme.tpl.md +++ b/Readme.tpl.md @@ -2,6 +2,7 @@ [![Downloads](https://img.shields.io/github/release/thomasnordquist/mqtt-explorer.svg)](https://travis-ci.org/thomasnordquist/MQTT-Explorer/releases) [![Downloads](https://img.shields.io/github/downloads/thomasnordquist/mqtt-explorer/total.svg)](https://travis-ci.org/thomasnordquist/MQTT-Explorer/releases) [![Build_Status](https://travis-ci.org/thomasnordquist/MQTT-Explorer.svg)](https://travis-ci.org/thomasnordquist/MQTT-Explorer) +![](https://img.shields.io/github/commits-since/thomasnordquist/mqtt-explorer/latest.svg?style=flat) ### Version {{ version }} diff --git a/app/src/PersistantStorage.ts b/app/src/PersistantStorage.ts index e6f7e4c..0365986 100644 --- a/app/src/PersistantStorage.ts +++ b/app/src/PersistantStorage.ts @@ -31,7 +31,6 @@ class RemoteStorage implements PersistantStorage { const ack = makeStorageAcknoledgementEvent(transactionId) return new Promise((resolve, reject) => { const callback = (msg: any) => { - console.log(msg) if (msg && msg.error) { reject(msg.error) } else { @@ -57,8 +56,6 @@ class RemoteStorage implements PersistantStorage { const promise = new Promise((resolve, reject) => { const callback = (msg: any) => { - console.log(msg) - if (msg.error) { reject(msg.error) } else { diff --git a/app/src/actions/Sidebar.ts b/app/src/actions/Sidebar.ts index dce8a32..8a7dac1 100644 --- a/app/src/actions/Sidebar.ts +++ b/app/src/actions/Sidebar.ts @@ -1,21 +1,43 @@ import { Dispatch, Action } from 'redux' import { AppState } from '../reducers' import { makePublishEvent, rendererEvents } from '../../../events' +import * as q from '../../../backend/src/Model' -export const clearRetainedTopic = () => (dispatch: Dispatch, getState: () => AppState) => { +export const clearRetainedTopic = () => (dispatch: Dispatch, getState: () => AppState) => { const { selectedTopic } = getState().tree - const { connectionId } = getState().connection + if (!selectedTopic) { + return + } - if (!selectedTopic || !connectionId) { + dispatch(clearTopic(selectedTopic, false)) +} + +export const clearTopic = (topic: q.TreeNode, recursive: boolean) => (dispatch: Dispatch, getState: () => AppState) => { + const { connectionId } = getState().connection + if (!connectionId) { return } const publishEvent = makePublishEvent(connectionId) const mqttMessage = { - topic: selectedTopic.path(), + topic: topic.path(), payload: null, retain: true, qos: 0 as 0, } + console.log('deleting', topic.path()) rendererEvents.emit(publishEvent, mqttMessage) + + if (recursive) { + topic.childTopics().forEach((topic) => { + console.log('deleting', topic.path()) + const mqttMessage = { + topic: topic.path(), + payload: null, + retain: true, + qos: 0 as 0, + } + rendererEvents.emit(publishEvent, mqttMessage) + }) + } } diff --git a/app/src/components/Copy.tsx b/app/src/components/Copy.tsx index 0597a27..2c0cc5d 100644 --- a/app/src/components/Copy.tsx +++ b/app/src/components/Copy.tsx @@ -4,6 +4,7 @@ import FileCopy from '@material-ui/icons/FileCopy' import Check from '@material-ui/icons/Check' import green from '@material-ui/core/colors/green' import { withStyles, Theme } from '@material-ui/core/styles' +import CustomIconButton from './CustomIconButton'; const copy = require('copy-text-to-clipboard') @@ -32,13 +33,17 @@ class Copy extends React.Component { public render() { const icon = !this.state.didCopy - ? + ? : return ( - {icon} + + + {icon} + + ({ + button: { + padding: '6px', + fontSize: '1.2em', + }, +}) + +class CustomIconButton extends React.Component { + constructor(props: Props) { + super(props) + } + + public render() { + return ( + {this.props.children} + ) + } + + private onClick = (event: React.MouseEvent) => { + event.stopPropagation() + this.props.onClick(event) + } +} + +export default withStyles(styles)(CustomIconButton) diff --git a/app/src/components/Settings.tsx b/app/src/components/Settings.tsx index 7c1b92e..310ca15 100644 --- a/app/src/components/Settings.tsx +++ b/app/src/components/Settings.tsx @@ -18,7 +18,7 @@ import { StyleRulesCallback, withStyles } from '@material-ui/core/styles' import ChevronRight from '@material-ui/icons/ChevronRight' import { bindActionCreators } from 'redux' import { connect } from 'react-redux' -import { settingsActions, treeActions } from '../actions' +import { settingsActions } from '../actions' import { TopicOrder } from '../reducers/Settings' import BrokerStatistics from './BrokerStatistics' import { shell } from 'electron'; diff --git a/app/src/components/Sidebar/Sidebar.tsx b/app/src/components/Sidebar/Sidebar.tsx index 68bffa8..9efc085 100644 --- a/app/src/components/Sidebar/Sidebar.tsx +++ b/app/src/components/Sidebar/Sidebar.tsx @@ -1,5 +1,20 @@ -import * as React from 'react' import * as q from '../../../../backend/src/Model' +import * as React from 'react' +import Clear from '@material-ui/icons/Clear' +import Copy from '../Copy' +import DateFormatter from '../helper/DateFormatter' +import Delete from '@material-ui/icons/Delete' +import ExpandMore from '@material-ui/icons/ExpandMore' +import MessageHistory from './MessageHistory' +import NodeStats from './NodeStats' +import Topic from './Topic' +import { AppState } from '../../reducers' +import { bindActionCreators } from 'redux' +import { connect } from 'react-redux' +import { default as ReactResizeDetector } from 'react-resize-detector' +import { sidebarActons } from '../../actions' +import { StyleRulesCallback, Theme, withStyles } from '@material-ui/core/styles' +import { TopicViewModel } from '../../TopicViewModel' import { Button, @@ -12,22 +27,8 @@ import { Typography, Tooltip, } from '@material-ui/core' -import { StyleRulesCallback, Theme, withStyles } from '@material-ui/core/styles' +import CustomIconButton from '../CustomIconButton'; -import { sidebarActons } from '../../actions' - -import { AppState } from '../../reducers' -import Copy from '../Copy' -import DateFormatter from '../helper/DateFormatter' -import ExpandMore from '@material-ui/icons/ExpandMore' -import Clear from '@material-ui/icons/Clear' -import MessageHistory from './MessageHistory' -import NodeStats from './NodeStats' -import Topic from './Topic' -import { connect } from 'react-redux' -import { bindActionCreators } from 'redux' -import { TopicViewModel } from '../../TopicViewModel' -import { default as ReactResizeDetector } from 'react-resize-detector' const throttle = require('lodash.throttle') const Publish = React.lazy(() => import('./Publish/Publish')) @@ -92,17 +93,43 @@ class Sidebar extends React.Component { private detailsStyle = { padding: '0px 16px 8px 8px', display: 'block' } + private renderTopicDeleteButton() { + if (!this.props.node) { + return null + } + + return this.deleteTopic(this.props.node)}> + } + + private renderRecursiveTopicDeleteButton() { + if (!this.props.node) { + return null + } + + return this.deleteTopic(this.props.node, true)}> + } + + private deleteTopic = (topic?: q.TreeNode, recursive: boolean = false) => { + if (!topic) { + return + } + + this.props.actions.clearTopic(topic, recursive) + } + private renderNode() { const { classes, node } = this.props const copyTopic = node ? : null + const deleteTopic = this.renderTopicDeleteButton() + const deleteRecursiveTopic = this.renderRecursiveTopicDeleteButton() const copyValue = node && node.message ? : null const summeryStyle = { minHeight: '0' } return (
} style={summeryStyle}> - Topic {copyTopic} + Topic {copyTopic} {deleteTopic} {deleteRecursiveTopic} diff --git a/events/EventBus.ts b/events/EventBus.ts index b808cac..a86d3ff 100644 --- a/events/EventBus.ts +++ b/events/EventBus.ts @@ -24,6 +24,7 @@ class IpcMainEventBus implements EventBusInterface { public subscribe(subscribeEvent: Event, callback:(msg: MessageType) => void) { console.log('subscribing', subscribeEvent.topic) this.ipc.on(subscribeEvent.topic, (event: any, arg: any) => { + console.log(subscribeEvent.topic, arg) this.client = event.sender callback(arg) }) @@ -39,6 +40,8 @@ class IpcMainEventBus implements EventBusInterface { public emit(event: Event, msg: MessageType) { if (!this.client.isDestroyed()) { + console.log(event.topic, msg) + this.client.send(event.topic, msg) } } @@ -80,6 +83,7 @@ class IpcRendererEventBus implements EventBusInterface { } public emit(event: Event, msg: MessageType) { + console.log(event.topic, msg) this.ipc.send(event.topic, msg) } }