63 lines
2.5 KiB
JavaScript
63 lines
2.5 KiB
JavaScript
import React from 'react';
|
|
import {Segment, Input, Form} from 'semantic-ui-react';
|
|
import UnitLeone from './UnitLeone';
|
|
import UnitDigitalInput from './UnitDigitalInput';
|
|
import UnitTime from './UnitTime';
|
|
import UnitGroups from './UnitGroups';
|
|
import UnitModbus from './UnitModbus';
|
|
|
|
class Unit extends React.Component {
|
|
|
|
handleChangeUnit = (val) => {
|
|
this.props.changeUnitType(this.props.id, val);
|
|
}
|
|
|
|
getUnitComponent = () => {
|
|
|
|
let {data, ops, i18n, showDialog, toggleLoading, groups} = this.props;
|
|
|
|
switch(data.unit){
|
|
case 'leone':
|
|
return <UnitLeone ops={ops} data={data.data} i18n={i18n} showDialog={showDialog} toggleLoading={toggleLoading} updateData={this.updateData} />
|
|
case 'di':
|
|
return <UnitDigitalInput ops={ops} data={data.data} i18n={i18n} showDialog={showDialog} toggleLoading={toggleLoading} updateData={this.updateData} />
|
|
case 'modbus':
|
|
return <UnitModbus ops={ops} data={data.data} i18n={i18n} showDialog={showDialog} toggleLoading={toggleLoading} updateData={this.updateData} />
|
|
case 'time':
|
|
return <UnitTime ops={ops} data={data.data} i18n={i18n} showDialog={showDialog} toggleLoading={toggleLoading} updateData={this.updateData} />
|
|
case 'unit':
|
|
return <UnitGroups i18n={i18n} data={data.data} groups={groups} updateData={this.updateData} />
|
|
default:
|
|
return null;
|
|
}
|
|
}
|
|
|
|
updateData = (data) => {
|
|
console.log(data);
|
|
this.props.updateData(this.props.id, data);
|
|
}
|
|
|
|
render() {
|
|
let {ops, id} = this.props;
|
|
return (
|
|
<Segment>
|
|
<Form.Field>
|
|
<label>選擇元件</label>
|
|
<select value={this.props.data.unit} onChange={e => {
|
|
this.handleChangeUnit(e.target.value);
|
|
}}>
|
|
<option value="">請選擇元件</option>
|
|
<option value="leone">LeOne</option>
|
|
<option value="di">DigitalInput</option>
|
|
<option value="modbus">Modbus</option>
|
|
<option value="time">時間</option>
|
|
<option value="unit">已建立群組</option>
|
|
</select>
|
|
</Form.Field>
|
|
{this.getUnitComponent()}
|
|
</Segment>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default Unit; |