import * as React from 'react';
import { Theme, createStyles, WithStyles, withStyles, Typography, FormControlLabel, Checkbox } from '@material-ui/core';
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
import Select from '@material-ui/core/Select';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import Fab from '@material-ui/core/Fab';
import AddIcon from '@material-ui/icons/Add';
import DeleteIcon from '@material-ui/icons/Delete';
import IconButton from '@material-ui/core/IconButton';
import { addMediatorConfigAsyncActionCreator, updateMediatorConfigAsyncActionCreator, removeMediatorConfigAsyncActionCreator } from '../actions/mediatorConfigActions';
import { MediatorConfig, ODLConfig } from '../models/mediatorServer';
import FormControl from '@material-ui/core/FormControl';
import InputLabel from '@material-ui/core/InputLabel';
import MenuItem from '@material-ui/core/MenuItem';
import { Panel } from '../../../../framework/src/components/material-ui/panel';
import { IDispatcher, connect, Connect } from '../../../../framework/src/flux/connect';
import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
const styles = (theme: Theme) => createStyles({
root: {
display: 'flex',
flexDirection: 'column',
flex: '1',
},
fab: {
position: 'absolute',
bottom: theme.spacing.unit,
right: theme.spacing.unit,
},
title: {
fontSize: 14,
},
center: {
flex: "1",
display: "flex",
alignItems: "center",
justifyContent: "center",
},
alignInOneLine: {
display: 'flex',
flexDirection: 'row'
},
left: {
marginRight: theme.spacing.unit,
},
right: {
marginLeft: 0,
}
});
const TabContainer: React.SFC = ({ children }) => {
return (
{children}
);
}
export enum EditMediatorConfigDialogMode {
None = "none",
AddMediatorConfig = "addMediatorConfig",
EditMediatorConfig = "editMediatorConfig",
RemoveMediatorConfig = "removeMediatorConfig",
}
const mapProps = (state: IApplicationStoreState) => ({
supportedDevices: state.mediatorApp.mediatorServerState.supportedDevices
});
const mapDispatch = (dispatcher: IDispatcher) => ({
addMediatorConfig: (config: MediatorConfig) => {
dispatcher.dispatch(addMediatorConfigAsyncActionCreator(config));
},
updateMediatorConfig: (config: MediatorConfig) => {
dispatcher.dispatch(updateMediatorConfigAsyncActionCreator(config));
},
removeMediatorConfig: (config: MediatorConfig) => {
dispatcher.dispatch(removeMediatorConfigAsyncActionCreator(config));
},
});
type DialogSettings = {
dialogTitle: string;
dialogDescription: string;
applyButtonText: string;
cancelButtonText: string;
readonly: boolean;
readonlyName: boolean;
};
const settings: { [key: string]: DialogSettings } = {
[EditMediatorConfigDialogMode.None]: {
dialogTitle: "",
dialogDescription: "",
applyButtonText: "",
cancelButtonText: "",
readonly: true,
readonlyName: true,
},
[EditMediatorConfigDialogMode.AddMediatorConfig]: {
dialogTitle: "Add Mediator Configuration",
dialogDescription: "",
applyButtonText: "Add",
cancelButtonText: "Cancel",
readonly: false,
readonlyName: false,
},
[EditMediatorConfigDialogMode.EditMediatorConfig]: {
dialogTitle: "Edit Mediator Configuration",
dialogDescription: "",
applyButtonText: "Update",
cancelButtonText: "Cancel",
readonly: false,
readonlyName: true,
},
[EditMediatorConfigDialogMode.RemoveMediatorConfig]: {
dialogTitle: "Remove Mediator Configuration",
dialogDescription: "",
applyButtonText: "Remove",
cancelButtonText: "Cancel",
readonly: true,
readonlyName: true,
},
};
type EditMediatorConfigDialogComponentProps = WithStyles & Connect & {
mode: EditMediatorConfigDialogMode;
mediatorConfig: MediatorConfig;
onClose: () => void;
};
type EditMediatorConfigDialogComponentState = MediatorConfig & { activeTab: number; activeOdlConfig: string };
class EditMediatorConfigDialogComponent extends React.Component {
constructor (props: EditMediatorConfigDialogComponentProps) {
super(props);
this.state = {
...this.props.mediatorConfig,
activeTab: 0,
activeOdlConfig: ""
};
}
private odlConfigValueChangeHandlerCreator = (index: number, property: TKey, mapValue: (event: React.ChangeEvent) => any) => (event: React.ChangeEvent) => {
event.stopPropagation();
event.preventDefault();
this.setState({
ODLConfig: [
...this.state.ODLConfig.slice(0, index),
{ ...this.state.ODLConfig[index], [property]: mapValue(event) },
...this.state.ODLConfig.slice(index + 1)
]
});
}
render(): JSX.Element {
const setting = settings[this.props.mode];
const { classes } = this.props;
return (
)
}
private onApply = (config: MediatorConfig) => {
this.props.onClose && this.props.onClose();
switch (this.props.mode) {
case EditMediatorConfigDialogMode.AddMediatorConfig:
config && this.props.addMediatorConfig(config);
break;
case EditMediatorConfigDialogMode.EditMediatorConfig:
config && this.props.updateMediatorConfig(config);
break;
case EditMediatorConfigDialogMode.RemoveMediatorConfig:
config && this.props.removeMediatorConfig(config);
break;
}
};
private onCancel = () => {
this.props.onClose && this.props.onClose();
}
static getDerivedStateFromProps(props: EditMediatorConfigDialogComponentProps, state: EditMediatorConfigDialogComponentState & { _initialMediatorConfig: MediatorConfig }): EditMediatorConfigDialogComponentState & { _initialMediatorConfig: MediatorConfig } {
if (props.mediatorConfig !== state._initialMediatorConfig) {
state = {
...state,
...props.mediatorConfig,
_initialMediatorConfig: props.mediatorConfig,
};
}
return state;
}
}
export const EditMediatorConfigDialog = withStyles(styles)(connect(mapProps, mapDispatch)(EditMediatorConfigDialogComponent));
export default EditMediatorConfigDialog;