135 lines
4.2 KiB
JavaScript
135 lines
4.2 KiB
JavaScript
import React from 'react';
|
|
import {Segment, Button, Form, Input} from 'semantic-ui-react';
|
|
import UnitLeone from './UnitLeone';
|
|
import UnitDigitalOutput from './UnitDigitalOutput';
|
|
import UnitIOGroup from './UnitIOGroup';
|
|
import UnitModbus from './UnitModbus';
|
|
|
|
const stateDefault = () => ({
|
|
unit: '',
|
|
act: {
|
|
type: '',
|
|
dev: '',
|
|
devName: '',
|
|
act: '',
|
|
actName: ''
|
|
}
|
|
})
|
|
|
|
class ActionSelect extends React.Component {
|
|
|
|
state = {
|
|
...stateDefault()
|
|
}
|
|
|
|
changeUnit = (unit) => {
|
|
this.setState({
|
|
unit
|
|
})
|
|
}
|
|
|
|
getUnitComponent = () => {
|
|
let {unit} = this.state;
|
|
let {i18n, showDialog, toggleLoading} = this.props;
|
|
|
|
switch(unit){
|
|
case 'leone':
|
|
return (
|
|
<UnitLeone i18n={i18n}
|
|
data={this.state.act}
|
|
showDialog={showDialog}
|
|
toggleLoading={toggleLoading}
|
|
updateData={this.updateData} />
|
|
)
|
|
case 'do':
|
|
return (
|
|
<UnitDigitalOutput i18n={i18n}
|
|
data={this.state.act}
|
|
showDialog={showDialog}
|
|
toggleLoading={toggleLoading}
|
|
updateData={this.updateData} />
|
|
)
|
|
case 'iogroup':
|
|
return (
|
|
<UnitIOGroup i18n={i18n}
|
|
data={this.state.act}
|
|
showDialog={showDialog}
|
|
toggleLoading={toggleLoading}
|
|
updateData={this.updateData} />
|
|
)
|
|
case 'modbus':
|
|
return (
|
|
<UnitModbus i18n={i18n}
|
|
data={this.state.act}
|
|
showDialog={showDialog}
|
|
toggleLoading={toggleLoading}
|
|
updateData={this.updateData} />
|
|
)
|
|
default:
|
|
return null;
|
|
}
|
|
}
|
|
|
|
updateData = (data) => {
|
|
let {act} = this.state;
|
|
for(let i in act){
|
|
act[i] = data[i] || ''
|
|
}
|
|
this.setState({
|
|
act
|
|
})
|
|
}
|
|
|
|
addAction = () => {
|
|
let {dev, devName, act, actName, type} = this.state.act;
|
|
let {showDialog} = this.props;
|
|
if(!dev || !act) return showDialog('請選擇動作資料');
|
|
if(type != 'modbus'){
|
|
let acts = act.split(',');
|
|
if(acts.length != 2 ) return showDialog('請選擇正確的動作');
|
|
if(acts[0] == '2'){
|
|
if(acts[1] < 16 || acts[1] > 30) return showDialog('冷氣溫度請介於16-30間');
|
|
}
|
|
}
|
|
if(type == 'modbus'){
|
|
let acts = act.split(',');
|
|
if(acts.length != 3) return showDialog('請把動作資料填寫完成');
|
|
if(acts[0] == '' || acts[1] == '' || acts[2] == '') return showDialog('請把動作資料填寫完成');
|
|
}
|
|
|
|
this.props.addNewAction({
|
|
dev,devName,act,actName,type
|
|
}, this.clearField);
|
|
}
|
|
|
|
clearField = () => {
|
|
this.setState({
|
|
...stateDefault()
|
|
})
|
|
}
|
|
|
|
render() {
|
|
|
|
return (
|
|
<Segment color="green">
|
|
<Form.Field>
|
|
<label>選擇裝置類型</label>
|
|
<select value={this.state.unit} onChange={e=>{this.changeUnit(e.target.value)}}>
|
|
<option value="">裝置類型</option>
|
|
<option value="leone">LeOne</option>
|
|
<option value="do">DigitalOutput</option>
|
|
<option value="iogroup">IOGroup</option>
|
|
<option value="modbus">Modbus</option>
|
|
</select>
|
|
</Form.Field>
|
|
{this.getUnitComponent()}
|
|
<div style={{textAlign:'right', marginTop: '20px'}}>
|
|
<Button content="加入" basic size="mini" color="blue" onClick={()=>{ this.addAction() }} />
|
|
<Button content="清除" basic size="mini" color="red" onClick={()=>{this.clearField()}} />
|
|
</div>
|
|
</Segment>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default ActionSelect; |