158 lines
7.2 KiB
JavaScript
158 lines
7.2 KiB
JavaScript
import React from 'react';
|
|
import {Modal, Form, Checkbox, Input, Radio, Segment, Header, List, Grid, Button} from 'semantic-ui-react';
|
|
import DateTime from 'react-datetime';
|
|
import DeviceSelect from '../../Common/DeviceSelect';
|
|
import SelectedItem from './SelectedItem';
|
|
|
|
class ScheduleModal extends React.Component {
|
|
|
|
render(){
|
|
let {i18n, open, data, type, devs, permissions, querySelectList, onSubmit, onClose} = this.props;
|
|
let {showTemp, week, cmd, temp, dateType, selected, addSelect, removeSelected, changeDateType, checkShowTemp, changeWeek} = this.props;
|
|
let actlist = i18n&&i18n.getResource&&i18n.language ? i18n.getResource(i18n.language + '.translation.action_list') : [];
|
|
|
|
let act = data.ioschedulecmd || '';
|
|
act = act.split(',');
|
|
let defcmd = '';
|
|
let deftemp = '';
|
|
if(act.length == 2){
|
|
if(act[0] == '2') {
|
|
defcmd = act[0];
|
|
deftemp = act[1];
|
|
}else {
|
|
defcmd = act.join(' ');
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Modal open={open}>
|
|
<Modal.Header content={i18n&&i18n.t ? (type == 1 ? i18n.t('page.schedule.form.title.edut') : i18n.t('page.schedule.form.title.add')) : ''}/>
|
|
<Modal.Content>
|
|
<Form onSubmit={(e, d) => {
|
|
e.preventDefault();
|
|
onSubmit(type, d.formData);
|
|
}} serializer={e => {
|
|
let json = {
|
|
active: false,
|
|
name: '',
|
|
cmd: '',
|
|
temp: '',
|
|
time: '',
|
|
date: '',
|
|
id: data.ioscheduleuid || ''
|
|
};
|
|
|
|
let active = e.querySelector('input[name="active"]');
|
|
if(active && 'checked' in active) json.active = active.checked;
|
|
let name = e.querySelector('input[name="name"]');
|
|
if(name && 'value' in name) json.name = name.value;
|
|
let cmd = e.querySelector('select[name="act"]');
|
|
if(cmd && 'value' in cmd) json.cmd = cmd.value;
|
|
let time = e.querySelector('#timeDiv input');
|
|
if(time && 'value' in time) json.time = time.value;
|
|
let date = e.querySelector('#dateDiv input');
|
|
if(date && 'value' in date) json.date = date.value;
|
|
let temp = e.querySelector('input[name="temp"]');
|
|
if(temp && 'value' in temp) json.temp = temp.value;
|
|
|
|
return json;
|
|
}}>
|
|
<Form.Field>
|
|
{/*<label>{i18n&&i18n.t ? i18n.t('page.schedule.form.label.enable') : ''}</label>*/}
|
|
<Checkbox defaultChecked={data.ioscheduleactive == 1 ? true : false} name="active" label={i18n&&i18n.t ? i18n.t('page.schedule.form.label.enable') : ''} />
|
|
</Form.Field>
|
|
<Form.Field>
|
|
<Input label={i18n&&i18n.t ? i18n.t('page.schedule.form.label.name') : ''} name="name" defaultValue={data.ioschedulename} />
|
|
</Form.Field>
|
|
<Form.Field>
|
|
<label>{i18n&&i18n.t?i18n.t('page.schedule.form.label.action') : ''}</label>
|
|
<select name="act" value={cmd} onChange={(e) => { checkShowTemp(e.target.value); }}>
|
|
<option value="">{i18n&&i18n.t ? i18n.t('select.select_action') : ''}</option>
|
|
{
|
|
actlist.map((t, idx) => {
|
|
{/*let selected = defcmd == t.cmd ? 'selected' : 'false';*/}
|
|
return (
|
|
<option key={idx} value={t.cmd} >{t.name}</option>
|
|
)
|
|
})
|
|
}
|
|
</select>
|
|
</Form.Field>
|
|
{
|
|
showTemp ?
|
|
(<Form.Field>
|
|
<Input label={i18n&&i18n.t ? i18n.t('page.schedule.form.label.temp') : ''} name="temp" defaultValue={temp} />
|
|
</Form.Field>)
|
|
: null
|
|
}
|
|
<Form.Field id="timeDiv">
|
|
<label>{i18n&&i18n.t?i18n.t('page.schedule.form.label.time') : ''}</label>
|
|
<DateTime dateFormat={false} timeFormat="HH:mm" defaultValue={data.ioscheduleparam1&&data.ioscheduleparam2 ? `${data.ioscheduleparam2}:${data.ioscheduleparam1}` : ''} />
|
|
</Form.Field>
|
|
<Form.Field>
|
|
<label>{i18n&&i18n.t ? i18n.t('page.schedule.form.label.datetype') : ''}</label>
|
|
<Radio label={i18n&&i18n.t ? i18n.t('page.schedule.form.label.type_week') : ''} name="dtRadio" value="w" checked={dateType == 'w'} onChange={(e, {value}) => {changeDateType(value)}} />
|
|
<Radio label={i18n&&i18n.t ? i18n.t('page.schedule.form.label.type_date') : ''} name="dtRadio" value="d" checked={dateType == 'd'} onChange={(e, {value}) => {changeDateType(value)}} />
|
|
</Form.Field>
|
|
{
|
|
dateType == 'w' ?
|
|
(
|
|
<Form.Group inline>
|
|
<label>{i18n&&i18n.t ? i18n.t('page.schedule.form.label.week') : ''}</label>
|
|
<Form.Field>
|
|
<Checkbox label={i18n&&i18n.t ? i18n.t('week.mon') : ''} value="1" checked={week.find(t => t == 1) ? true : false} onChange={(e, {value, checked}) => {changeWeek(checked, value)}}/>
|
|
</Form.Field>
|
|
<Form.Field>
|
|
<Checkbox label={i18n&&i18n.t ? i18n.t('week.tue') : ''} value="2" checked={week.find(t => t == 2) ? true : false} onChange={(e, {value, checked}) => {changeWeek(checked, value)}}/>
|
|
</Form.Field>
|
|
<Form.Field>
|
|
<Checkbox label={i18n&&i18n.t ? i18n.t('week.wed') : ''} value="3" checked={week.find(t => t == 3) ? true : false} onChange={(e, {value, checked}) => {changeWeek(checked, value)}}/>
|
|
</Form.Field>
|
|
<Form.Field>
|
|
<Checkbox label={i18n&&i18n.t ? i18n.t('week.thu') : ''} value="4" checked={week.find(t => t == 4) ? true : false} onChange={(e, {value, checked}) => {changeWeek(checked, value)}}/>
|
|
</Form.Field>
|
|
<Form.Field>
|
|
<Checkbox label={i18n&&i18n.t ? i18n.t('week.fri') : ''} value="5" checked={week.find(t => t == 5) ? true : false} onChange={(e, {value, checked}) => {changeWeek(checked, value)}}/>
|
|
</Form.Field>
|
|
<Form.Field>
|
|
<Checkbox label={i18n&&i18n.t ? i18n.t('week.sat') : ''} value="6" checked={week.find(t => t == 6) ? true : false} onChange={(e, {value, checked}) => {changeWeek(checked, value)}}/>
|
|
</Form.Field>
|
|
<Form.Field>
|
|
<Checkbox label={i18n&&i18n.t ? i18n.t('week.sun') : ''} value="7" checked={week.find(t => t == 7) ? true : false} onChange={(e, {value, checked}) => {changeWeek(checked, value)}}/>
|
|
</Form.Field>
|
|
</Form.Group>
|
|
) :
|
|
(
|
|
<Form.Field id="dateDiv">
|
|
<label>{i18n&&i18n.t?i18n.t('page.schedule.form.label.date'):''}</label>
|
|
<DateTime timeFormat={false} dateFormat="MM-DD" defaultValue={`${data.ioscheduleparam4}-${data.ioscheduleparam3}`} />
|
|
</Form.Field>
|
|
)
|
|
}
|
|
<DeviceSelect i18n={i18n} devs={devs} addSelect={addSelect} showGroup={true} permissions={permissions} querySelectList={querySelectList} page="schedule" />
|
|
<Segment>
|
|
<Header as="h4" content={i18n&&i18n.t ? i18n.t('page.schedule.form.label.selected_device') : ''} />
|
|
<List verticalAlign="middle" divided>
|
|
{
|
|
selected.map((t, idx) => (
|
|
<SelectedItem key={idx} i18n={i18n} data={t} idx={idx} removeSelected={removeSelected} />
|
|
))
|
|
}
|
|
</List>
|
|
</Segment>
|
|
<Grid columns={2}>
|
|
<Grid.Column>
|
|
<Button fluid type="submit" content={i18n&&i18n.t?i18n.t('page.leone.form.button.submit'):''}/>
|
|
</Grid.Column>
|
|
<Grid.Column>
|
|
<Button fluid type="button" content={i18n&&i18n.t?i18n.t('page.leone.form.button.cancel'):''} onClick={() => {onClose()}}/>
|
|
</Grid.Column>
|
|
</Grid>
|
|
</Form>
|
|
</Modal.Content>
|
|
</Modal>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default ScheduleModal; |