129 lines
3.5 KiB
JavaScript
129 lines
3.5 KiB
JavaScript
import React from 'react';
|
|
import {Container, Segment, Form, Button, List, Input} from 'semantic-ui-react';
|
|
import DeviceSelect from '../../Common/DeviceSelect';
|
|
import SelectedItem from './SelectedItem';
|
|
|
|
class IOCmdPage extends React.Component {
|
|
state = {
|
|
showTemp: false,
|
|
selectItem: []
|
|
}
|
|
|
|
querySelectList = (type) => {
|
|
this.props.clearSelectList();
|
|
if(!type) return ;
|
|
this.props.getSelectList({type});
|
|
}
|
|
|
|
checkShowTemp = (cmd) => {
|
|
this.setState({
|
|
showTemp: cmd == 2 ? true : false
|
|
})
|
|
}
|
|
|
|
addSelect = (data) => {
|
|
let tmp = this.state.selectItem.filter(t => t.id == data.id);
|
|
if(tmp.length > 0) return ;
|
|
this.setState({
|
|
selectItem: [...this.state.selectItem, data]
|
|
});
|
|
}
|
|
|
|
removeSelect = (idx) => {
|
|
this.state.selectItem.splice(idx, 1);
|
|
this.setState({
|
|
selectItem: this.state.selectItem
|
|
})
|
|
}
|
|
|
|
runCmd = (data) => {
|
|
let {i18n} = this.props;
|
|
if(!data.cmd) return this.props.showDialog(i18n&&i18n.t ? i18n.t('tip.select_action') : '');
|
|
if(data.cmd == 2){
|
|
if(!data.temp) return this.props.showDialog(i18n&&i18n.t ? i18n.t('tip.input_empty_temp') : '');
|
|
if(!(data.temp > 16 && data.temp < 30)) return this.props.showDialog(i18n&&i18n.t ? i18n.t('tip.temp_format') : '');
|
|
|
|
data.cmd = `${data.cmd} ${data.temp}`;
|
|
}
|
|
|
|
let ids = this.state.selectItem.map(t => t.id);
|
|
|
|
let json = {
|
|
...data,
|
|
devs: ids.join(',')
|
|
}
|
|
|
|
this.props.runCmd(json);
|
|
|
|
this.setState({
|
|
showTemp: false,
|
|
selectItem: []
|
|
}, ()=>{
|
|
this.props.clearSelectList();
|
|
})
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.props.clearSelectList();
|
|
}
|
|
|
|
render() {
|
|
let {i18n,permissions,devs} = this.props;
|
|
let actlist = i18n&&i18n.getResource&&i18n.language ? i18n.getResource(i18n.language + '.translation.action_list') : [];
|
|
return (
|
|
<Container>
|
|
<Segment>
|
|
<Form onSubmit={(e,d) => {
|
|
e.preventDefault();
|
|
this.runCmd(d.formData);
|
|
}} serializer={e => {
|
|
let json = {
|
|
cmd: '',
|
|
temp: ''
|
|
};
|
|
let sel = e.querySelector('select[name="cmd"]');
|
|
if(sel && 'value' in sel) json.cmd = sel.value;
|
|
let temp = e.querySelector('input[name="temp"]');
|
|
if(temp && 'value' in temp) json.temp = temp.value;
|
|
|
|
if(e.reset) e.reset();
|
|
|
|
return json;
|
|
}}>
|
|
<Form.Field>
|
|
<label>{i18n&&i18n.t ? i18n.t('page.iocmd.form.label.action') : ''}</label>
|
|
<select name="cmd" onChange={e => {
|
|
this.checkShowTemp(e.target.value);
|
|
}}>
|
|
<option value="">{i18n&&i18n.t ? i18n.t('select.action') : ''}</option>
|
|
{
|
|
actlist.map((t,idx) => <option key={idx} value={t.cmd}>{t.name}</option>)
|
|
}
|
|
</select>
|
|
</Form.Field>
|
|
{
|
|
this.state.showTemp ?
|
|
(<Form.Field>
|
|
<Input name="temp" label={i18n&&i18n.t ? i18n.t('page.iocmd.form.label.temp') : ''} />
|
|
</Form.Field>) : null
|
|
}
|
|
<DeviceSelect i18n={i18n} devs={devs} page="iocmd" showGroup={true} permissions={permissions} querySelectList={this.querySelectList} addSelect={this.addSelect} />
|
|
<Form.Field>
|
|
<label>{i18n&&i18n.t ? i18n.t('page.iocmd.form.label.selected_device') : ''}</label>
|
|
<Segment>
|
|
<List divided relaxed={true}>
|
|
{
|
|
this.state.selectItem.map((t,idx) => <SelectedItem key={idx} i18n={i18n} data={t} idx={idx} removeSelect={this.removeSelect} />)
|
|
}
|
|
</List>
|
|
</Segment>
|
|
</Form.Field>
|
|
<Button type="submit" fluid content={i18n&&i18n.t ? i18n.t('page.iocmd.form.button.submit') : ''} />
|
|
</Form>
|
|
</Segment>
|
|
</Container>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default IOCmdPage; |