113 lines
3.1 KiB
TypeScript
113 lines
3.1 KiB
TypeScript
import * as React from 'react'
|
|
import ConnectionSettings from './ConnectionSettings'
|
|
import ProfileList from './ProfileList'
|
|
import { AppState } from '../../reducers'
|
|
import { bindActionCreators } from 'redux'
|
|
import { connect } from 'react-redux'
|
|
import { connectionManagerActions } from '../../actions'
|
|
import { ConnectionOptions } from '../../model/ConnectionOptions'
|
|
import { Theme, withStyles } from '@material-ui/core/styles'
|
|
import {
|
|
Modal,
|
|
Paper,
|
|
Toolbar,
|
|
Typography,
|
|
Collapse,
|
|
} from '@material-ui/core'
|
|
import AdvancedConnectionSettings from './AdvancedConnectionSettings'
|
|
|
|
interface Props {
|
|
actions: any
|
|
classes: any
|
|
connection?: ConnectionOptions
|
|
visible: boolean
|
|
showAdvancedSettings: boolean
|
|
}
|
|
|
|
class ConnectionSetup extends React.Component<Props, {}> {
|
|
constructor(props: Props) {
|
|
super(props)
|
|
}
|
|
|
|
public componentDidMount() {
|
|
this.props.actions.loadConnectionSettings()
|
|
}
|
|
|
|
public render() {
|
|
const { classes, visible } = this.props
|
|
return (
|
|
<div>
|
|
<Modal open={visible} disableAutoFocus={true}>
|
|
<Paper className={classes.root}>
|
|
<div className={classes.left}><ProfileList /></div>
|
|
<div className={classes.right}>
|
|
<Toolbar>
|
|
<Typography className={classes.title} variant="h6" color="inherit">MQTT Connection</Typography>
|
|
</Toolbar>
|
|
{this.renderSettings()}
|
|
</div>
|
|
</Paper>
|
|
</Modal>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
private renderSettings() {
|
|
const { connection, showAdvancedSettings } = this.props
|
|
if (!connection) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<Collapse in={!showAdvancedSettings}><ConnectionSettings connection={connection} /></Collapse>
|
|
<Collapse in={showAdvancedSettings}><AdvancedConnectionSettings connection={connection} /></Collapse>
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|
|
const styles = (theme: Theme) => ({
|
|
title: {
|
|
color: theme.palette.text.primary,
|
|
},
|
|
root: {
|
|
margin: '13vw 10vw 0 10vw',
|
|
minWidth: '550px',
|
|
height: '440px',
|
|
outline: 'none' as 'none',
|
|
display: 'flex' as 'flex',
|
|
},
|
|
left: {
|
|
borderRightStyle: 'dotted' as 'dotted',
|
|
borderRadius: `${theme.shape.borderRadius}px 0 0 ${theme.shape.borderRadius}px`,
|
|
paddingTop: `${2 * theme.spacing.unit}px`,
|
|
flex: 3,
|
|
overflow: 'hidden',
|
|
backgroundColor: theme.palette.background.default,
|
|
color: theme.palette.text.primary,
|
|
},
|
|
right: {
|
|
borderRadius: `0 ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px 0`,
|
|
backgroundColor: theme.palette.background.paper,
|
|
padding: `${2 * theme.spacing.unit}px`,
|
|
flex: 10,
|
|
},
|
|
})
|
|
|
|
const mapStateToProps = (state: AppState) => {
|
|
return {
|
|
visible: !state.connection.connected,
|
|
showAdvancedSettings: state.connectionManager.showAdvancedSettings,
|
|
connection: state.connectionManager.selected ? state.connectionManager.connections[state.connectionManager.selected] : undefined,
|
|
}
|
|
}
|
|
|
|
const mapDispatchToProps = (dispatch: any) => {
|
|
return {
|
|
actions: bindActionCreators(connectionManagerActions, dispatch),
|
|
}
|
|
}
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ConnectionSetup))
|