64 lines
2.0 KiB
JavaScript
64 lines
2.0 KiB
JavaScript
import React from 'react';
|
|
import {Form, Button} from 'semantic-ui-react';
|
|
|
|
const DeviceSelect = ({i18n, querySelectList, page, permissions, devs, addSelect, showGroup}) => {
|
|
let devName = null;
|
|
let devType = null;
|
|
return (
|
|
<Form.Group inline>
|
|
<Form.Field>
|
|
<label>{i18n&&i18n.t?i18n.t(`page.${page || ''}.form.label.select_device`) : ''}</label>
|
|
<select ref={node => devType = node} onChange={(e) => {
|
|
querySelectList(e.target.value);
|
|
}}>
|
|
<option value="">{i18n&&i18n.t?i18n.t('select.dev_type') : ''}</option>
|
|
{
|
|
permissions.dio ?
|
|
<option value="do">{i18n&&i18n.t ? i18n.t('select.digitoutput') : ''}</option> : null
|
|
}
|
|
{
|
|
permissions.leone ?
|
|
<option value="leone">{i18n&&i18n.t ? i18n.t('select.leone') : ''}</option> : null
|
|
}
|
|
{
|
|
permissions.iogroup && showGroup ?
|
|
<option value="iogroup">{i18n&&i18n.t ? i18n.t('select.iogroup') : ''}</option> : null
|
|
}
|
|
</select>
|
|
</Form.Field>
|
|
<Form.Field>
|
|
<select ref={node => devName = node}>
|
|
{
|
|
devs.map((t, idx) => <option key={idx} value={t.id || ''}>{t.name || ''}</option>)
|
|
}
|
|
</select>
|
|
</Form.Field>
|
|
<Form.Field>
|
|
<Button type="button" basic size="mini" content={i18n&&i18n.t?i18n.t(`page.${page || ''}.form.button.join`) : ''} onClick={()=>{
|
|
let type = '';
|
|
let devname = '';
|
|
let devid = '';
|
|
let typev = '';
|
|
if(devType != null) {
|
|
type = devType.options[devType.selectedIndex].innerHTML;
|
|
typev = devType.value == 'leone' ? 'le' : devType.value;
|
|
}
|
|
if(devName != null) {
|
|
if(devName.options.length == 0) return ;
|
|
devname = devName.options[devName.selectedIndex].innerHTML;
|
|
devid = `${typev}${devName.value}`;
|
|
}
|
|
let json = {
|
|
type,
|
|
name: devname,
|
|
id: devid
|
|
};
|
|
if(!devType.value || !type || !devname) return ;
|
|
addSelect(json);
|
|
}} />
|
|
</Form.Field>
|
|
</Form.Group>
|
|
)
|
|
}
|
|
|
|
export default DeviceSelect; |