update action link add page
This commit is contained in:
parent
eb6b8d9ad5
commit
26f669fb96
19
app.js
19
app.js
@ -7,6 +7,7 @@ const logger = require('morgan');
|
|||||||
const path = require('path');
|
const path = require('path');
|
||||||
const config = require('./config');
|
const config = require('./config');
|
||||||
const so = require('./includes/storeObject');
|
const so = require('./includes/storeObject');
|
||||||
|
const exec = require('child_process').exec;
|
||||||
|
|
||||||
const app = express();
|
const app = express();
|
||||||
|
|
||||||
@ -56,4 +57,20 @@ app.get(['/admin', '/admin/*'], (req, res) => {
|
|||||||
app.get('/servcmd', (req, res) => {
|
app.get('/servcmd', (req, res) => {
|
||||||
res.send({ status: `exit time ${Date.now()}` });
|
res.send({ status: `exit time ${Date.now()}` });
|
||||||
setTimeout(() => { process.exit(1) }, 2000);
|
setTimeout(() => { process.exit(1) }, 2000);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
app.get('/fixmysql', (req, res) => {
|
||||||
|
let cmd = 'rm /home/www/mydb/aria*';
|
||||||
|
let json = {
|
||||||
|
rm: '',
|
||||||
|
restart: ''
|
||||||
|
};
|
||||||
|
exec(cmd, (err, stdout, stderr) => {
|
||||||
|
let cmd = 'systemctl restart mysql';
|
||||||
|
json.rm = stdout;
|
||||||
|
exec(cmd, (err, sout, serr) => {
|
||||||
|
json.restart = sout;
|
||||||
|
res.send(json);
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,17 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import {List, Label, Button} from 'semantic-ui-react';
|
||||||
|
|
||||||
|
const ListItem = ({ i18n, data, idx, removeAction }) => {
|
||||||
|
|
||||||
|
return (
|
||||||
|
<List.Item>
|
||||||
|
<Label basic content={`裝置名稱`} /><span>{data.devName}</span>
|
||||||
|
<Label basic content={`動作`} /><span>{data.actName}</span>
|
||||||
|
<Button floated="right" color="red" basic size="tiny" content="Delete" type="button" onClick={()=>{
|
||||||
|
removeAction(idx)
|
||||||
|
}}/>
|
||||||
|
</List.Item>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ListItem;
|
20
src/components/AdminPage/ActionLinkAddN/ActionList/index.js
Normal file
20
src/components/AdminPage/ActionLinkAddN/ActionList/index.js
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import {Segment, List} from 'semantic-ui-react';
|
||||||
|
import ListItem from './ListItem';
|
||||||
|
|
||||||
|
const ActionList = ({ i18n, list, removeAction }) => {
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Segment color="blue">
|
||||||
|
<List divided>
|
||||||
|
{
|
||||||
|
list.map((t,idx) => (
|
||||||
|
<ListItem key={idx} i18n={i18n} data={t} idx={idx} removeAction={removeAction} />
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</List>
|
||||||
|
</Segment>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ActionList;
|
@ -0,0 +1,84 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import {Form, Input} from 'semantic-ui-react';
|
||||||
|
|
||||||
|
class StdAction extends React.Component{
|
||||||
|
state = {
|
||||||
|
name: '',
|
||||||
|
act: '',
|
||||||
|
temp: ''
|
||||||
|
}
|
||||||
|
|
||||||
|
changeState = (tag, value) => {
|
||||||
|
let data = {...this.state};
|
||||||
|
if(tag == 'act'){
|
||||||
|
data.name = value.name || '';
|
||||||
|
data.act = value.act || '';
|
||||||
|
}
|
||||||
|
if(tag == 'temp'){
|
||||||
|
data.temp = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.setState({
|
||||||
|
...data
|
||||||
|
}, () => {
|
||||||
|
this.updateAct();
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
showTemp = () => {
|
||||||
|
if(this.state.act == '2'){
|
||||||
|
return (
|
||||||
|
<Form.Field>
|
||||||
|
<Input label="請輸入溫度"
|
||||||
|
placeholder="溫度請介於16-30間"
|
||||||
|
value={this.state.temp}
|
||||||
|
onChange={(e,d) => {this.changeState('temp', d.value)}} />
|
||||||
|
</Form.Field>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
updateAct = ()=>{
|
||||||
|
let {updateAct} = this.props;
|
||||||
|
let act = this.state.act;
|
||||||
|
let temp = this.state.temp;
|
||||||
|
|
||||||
|
if(act == '2') act = `${act},${temp}`;
|
||||||
|
updateAct(act, this.state.name)
|
||||||
|
}
|
||||||
|
|
||||||
|
render(){
|
||||||
|
let {i18n} = this.props;
|
||||||
|
let actlist = i18n&&i18n.getResource&&i18n.language ? i18n.getResource(i18n.language + '.translation.action_list') : [];
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Form.Field>
|
||||||
|
<label>選擇動作</label>
|
||||||
|
<select value={this.state.act} onChange={e=>{
|
||||||
|
let el = e.target;
|
||||||
|
let json = {
|
||||||
|
name: '',
|
||||||
|
act: ''
|
||||||
|
}
|
||||||
|
json.act = el.value;
|
||||||
|
json.name = el.options[el.selectedIndex].innerHTML;
|
||||||
|
|
||||||
|
this.changeState('act', json);
|
||||||
|
}}>
|
||||||
|
<option value="">選擇動作</option>
|
||||||
|
{
|
||||||
|
actlist.map((t,idx) => (
|
||||||
|
<option key={idx} value={t.cmd.replace(' ', ',')}>{t.name}</option>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</select>
|
||||||
|
</Form.Field>
|
||||||
|
{this.showTemp()}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default StdAction;
|
@ -0,0 +1,98 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import {Form, Input} from 'semantic-ui-react';
|
||||||
|
import { getRequest } from '../../../../actions';
|
||||||
|
import StdAction from './StdAction';
|
||||||
|
|
||||||
|
class UnitLeone extends React.Component {
|
||||||
|
state = {
|
||||||
|
list: [],
|
||||||
|
data: {
|
||||||
|
dev: '',
|
||||||
|
devName: '',
|
||||||
|
act: '',
|
||||||
|
actName: ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
let { showDialog } = this.props;
|
||||||
|
fetch('/api/system/getselectlist', getRequest({ type: 'do' }))
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(json => {
|
||||||
|
if (json.status != 1) return showDialog(json.message);
|
||||||
|
this.setState({
|
||||||
|
list: json.data.record || []
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
changeState = (tag, value) =>{
|
||||||
|
let data = {...this.state.data};
|
||||||
|
|
||||||
|
if(tag == 'act') {
|
||||||
|
data.actName = value.name;
|
||||||
|
data.act = value.act;
|
||||||
|
}
|
||||||
|
if(tag == 'dev'){
|
||||||
|
data.dev = value.dev == '' ? '' : `le${value.dev}`;
|
||||||
|
data.devName = value.name;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.setState({
|
||||||
|
data:{
|
||||||
|
...data
|
||||||
|
}
|
||||||
|
}, ()=>{
|
||||||
|
this.updateData()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
updateData = () => {
|
||||||
|
let data = {...this.state.data};
|
||||||
|
data.type = 'do';
|
||||||
|
|
||||||
|
this.props.updateData(data);
|
||||||
|
}
|
||||||
|
|
||||||
|
updateAct = (act, name) => {
|
||||||
|
this.changeState('act', {act, name});
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
let {i18n} = this.props;
|
||||||
|
let dev = '';
|
||||||
|
let m = this.state.data.dev.match(/(\d+)/);
|
||||||
|
if(m!=null && m.length > 1){
|
||||||
|
dev = m[1];
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Form.Field>
|
||||||
|
<label>選擇裝置</label>
|
||||||
|
<select value={dev} onChange={e=>{
|
||||||
|
let el = e.target;
|
||||||
|
let json = {
|
||||||
|
dev: '',
|
||||||
|
name: ''
|
||||||
|
};
|
||||||
|
|
||||||
|
json.dev = el.value;
|
||||||
|
json.name = el.options[el.selectedIndex].innerHTML;
|
||||||
|
|
||||||
|
this.changeState('dev', json);
|
||||||
|
}}>
|
||||||
|
<option value="">選擇裝置</option>
|
||||||
|
{
|
||||||
|
this.state.list.map((t,idx) => (
|
||||||
|
<option key={idx} value={t.id}>{t.name}</option>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</select>
|
||||||
|
</Form.Field>
|
||||||
|
<StdAction i18n={i18n} updateAct={this.updateAct} />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default UnitLeone;
|
@ -0,0 +1,98 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import {Form, Input} from 'semantic-ui-react';
|
||||||
|
import { getRequest } from '../../../../actions';
|
||||||
|
import StdAction from './StdAction';
|
||||||
|
|
||||||
|
class UnitLeone extends React.Component {
|
||||||
|
state = {
|
||||||
|
list: [],
|
||||||
|
data: {
|
||||||
|
dev: '',
|
||||||
|
devName: '',
|
||||||
|
act: '',
|
||||||
|
actName: ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
let { showDialog } = this.props;
|
||||||
|
fetch('/api/system/getselectlist', getRequest({ type: 'iogroup' }))
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(json => {
|
||||||
|
if (json.status != 1) return showDialog(json.message);
|
||||||
|
this.setState({
|
||||||
|
list: json.data.record || []
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
changeState = (tag, value) =>{
|
||||||
|
let data = {...this.state.data};
|
||||||
|
|
||||||
|
if(tag == 'act') {
|
||||||
|
data.actName = value.name;
|
||||||
|
data.act = value.act;
|
||||||
|
}
|
||||||
|
if(tag == 'dev'){
|
||||||
|
data.dev = value.dev == '' ? '' : `le${value.dev}`;
|
||||||
|
data.devName = value.name;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.setState({
|
||||||
|
data:{
|
||||||
|
...data
|
||||||
|
}
|
||||||
|
}, ()=>{
|
||||||
|
this.updateData()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
updateData = () => {
|
||||||
|
let data = {...this.state.data};
|
||||||
|
data.type = 'iogroup';
|
||||||
|
|
||||||
|
this.props.updateData(data);
|
||||||
|
}
|
||||||
|
|
||||||
|
updateAct = (act, name) => {
|
||||||
|
this.changeState('act', {act, name});
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
let {i18n} = this.props;
|
||||||
|
let dev = '';
|
||||||
|
let m = this.state.data.dev.match(/(\d+)/);
|
||||||
|
if(m!=null && m.length > 1){
|
||||||
|
dev = m[1];
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Form.Field>
|
||||||
|
<label>選擇裝置</label>
|
||||||
|
<select value={dev} onChange={e=>{
|
||||||
|
let el = e.target;
|
||||||
|
let json = {
|
||||||
|
dev: '',
|
||||||
|
name: ''
|
||||||
|
};
|
||||||
|
|
||||||
|
json.dev = el.value;
|
||||||
|
json.name = el.options[el.selectedIndex].innerHTML;
|
||||||
|
|
||||||
|
this.changeState('dev', json);
|
||||||
|
}}>
|
||||||
|
<option value="">選擇裝置</option>
|
||||||
|
{
|
||||||
|
this.state.list.map((t,idx) => (
|
||||||
|
<option key={idx} value={t.id}>{t.name}</option>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</select>
|
||||||
|
</Form.Field>
|
||||||
|
<StdAction i18n={i18n} updateAct={this.updateAct} />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default UnitLeone;
|
@ -0,0 +1,98 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import {Form, Input} from 'semantic-ui-react';
|
||||||
|
import { getRequest } from '../../../../actions';
|
||||||
|
import StdAction from './StdAction';
|
||||||
|
|
||||||
|
class UnitLeone extends React.Component {
|
||||||
|
state = {
|
||||||
|
list: [],
|
||||||
|
data: {
|
||||||
|
dev: '',
|
||||||
|
devName: '',
|
||||||
|
act: '',
|
||||||
|
actName: ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
let { showDialog } = this.props;
|
||||||
|
fetch('/api/system/getselectlist', getRequest({ type: 'leone' }))
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(json => {
|
||||||
|
if (json.status != 1) return showDialog(json.message);
|
||||||
|
this.setState({
|
||||||
|
list: json.data.record || []
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
changeState = (tag, value) =>{
|
||||||
|
let data = {...this.state.data};
|
||||||
|
|
||||||
|
if(tag == 'act') {
|
||||||
|
data.actName = value.name;
|
||||||
|
data.act = value.act;
|
||||||
|
}
|
||||||
|
if(tag == 'dev'){
|
||||||
|
data.dev = value.dev == '' ? '' : `le${value.dev}`;
|
||||||
|
data.devName = value.name;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.setState({
|
||||||
|
data:{
|
||||||
|
...data
|
||||||
|
}
|
||||||
|
}, ()=>{
|
||||||
|
this.updateData()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
updateData = () => {
|
||||||
|
let data = {...this.state.data};
|
||||||
|
data.type = 'leone';
|
||||||
|
|
||||||
|
this.props.updateData(data);
|
||||||
|
}
|
||||||
|
|
||||||
|
updateAct = (act, name) => {
|
||||||
|
this.changeState('act', {act, name});
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
let {i18n} = this.props;
|
||||||
|
let dev = '';
|
||||||
|
let m = this.state.data.dev.match(/(\d+)/);
|
||||||
|
if(m!=null && m.length > 1){
|
||||||
|
dev = m[1];
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Form.Field>
|
||||||
|
<label>選擇裝置</label>
|
||||||
|
<select value={dev} onChange={e=>{
|
||||||
|
let el = e.target;
|
||||||
|
let json = {
|
||||||
|
dev: '',
|
||||||
|
name: ''
|
||||||
|
};
|
||||||
|
|
||||||
|
json.dev = el.value;
|
||||||
|
json.name = el.options[el.selectedIndex].innerHTML;
|
||||||
|
|
||||||
|
this.changeState('dev', json);
|
||||||
|
}}>
|
||||||
|
<option value="">選擇裝置</option>
|
||||||
|
{
|
||||||
|
this.state.list.map((t,idx) => (
|
||||||
|
<option key={idx} value={t.id}>{t.name}</option>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</select>
|
||||||
|
</Form.Field>
|
||||||
|
<StdAction i18n={i18n} updateAct={this.updateAct} />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default UnitLeone;
|
120
src/components/AdminPage/ActionLinkAddN/ActionSelect/index.js
Normal file
120
src/components/AdminPage/ActionLinkAddN/ActionSelect/index.js
Normal file
@ -0,0 +1,120 @@
|
|||||||
|
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';
|
||||||
|
|
||||||
|
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} />
|
||||||
|
)
|
||||||
|
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間');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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>
|
||||||
|
</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;
|
@ -21,12 +21,12 @@ class UnitTime extends React.Component {
|
|||||||
let data = {...this.state.data};
|
let data = {...this.state.data};
|
||||||
if(np.data.op != data.op) data.op = np.data.op;
|
if(np.data.op != data.op) data.op = np.data.op;
|
||||||
|
|
||||||
let year = np.data.split('|')[5] || '-';
|
let year = np.data.value.split('|')[5] || '-';
|
||||||
let week = np.data.split('|')[4] || '-';
|
let week = np.data.value.split('|')[4] || '-';
|
||||||
let month = np.data.split('|')[3] || '-';
|
let month = np.data.value.split('|')[3] || '-';
|
||||||
let day = np.data.split('|')[2] || '-';
|
let day = np.data.value.split('|')[2] || '-';
|
||||||
let hour = np.data.split('|')[1] || '-';
|
let hour = np.data.value.split('|')[1] || '-';
|
||||||
let min = np.data.split('|')[0] || '-';
|
let min = np.data.value.split('|')[0] || '-';
|
||||||
|
|
||||||
if(year != data.year) data.year = year;
|
if(year != data.year) data.year = year;
|
||||||
if(week != data.week) data.week = week;
|
if(week != data.week) data.week = week;
|
||||||
@ -99,12 +99,18 @@ class UnitTime extends React.Component {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
</select>
|
</select>
|
||||||
<Input size="mini" placeholder="年(不指定請留空)" />
|
<Input size="mini" placeholder="年(不指定請留空)" value={this.state.data.year == '-' ? '' : this.state.data.year}
|
||||||
<Input size="mini" placeholder="週(不指定請留空)" />
|
onChange={(e,d) => {this.changeState('year', d.value)}} />
|
||||||
<Input size="mini" placeholder="月(不指定請留空)" />
|
<Input size="mini" placeholder="週(不指定請留空)" value={this.state.data.week == '-' ? '' : this.state.data.week}
|
||||||
<Input size="mini" placeholder="日(不指定請留空)" />
|
onChange={(e,d) => {this.changeState('week', d.value)}} />
|
||||||
<Input size="mini" placeholder="時(不指定請留空)" />
|
<Input size="mini" placeholder="月(不指定請留空)" value={this.state.data.month == '-' ? '' : this.state.data.month}
|
||||||
<Input size="mini" placeholder="分(不指定請留空)" />
|
onChange={(e,d) => {this.changeState('month', d.value)}} />
|
||||||
|
<Input size="mini" placeholder="日(不指定請留空)" value={this.state.data.day == '-' ? '' : this.state.data.day}
|
||||||
|
onChange={(e,d) => {this.changeState('day', d.value)}} />
|
||||||
|
<Input size="mini" placeholder="時(不指定請留空)" value={this.state.data.hour == '-' ? '' : this.state.data.hour}
|
||||||
|
onChange={(e,d) => {this.changeState('hour', d.value)}} />
|
||||||
|
<Input size="mini" placeholder="分(不指定請留空)" value={this.state.data.min == '-' ? '' : this.state.data.min}
|
||||||
|
onChange={(e,d) => {this.changeState('min', d.value)}} />
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -44,7 +44,7 @@ class Unit extends React.Component {
|
|||||||
}}>
|
}}>
|
||||||
<option value="">請選擇元件</option>
|
<option value="">請選擇元件</option>
|
||||||
<option value="leone">LeOne</option>
|
<option value="leone">LeOne</option>
|
||||||
<option value="di">DigitInput</option>
|
<option value="di">DigitalInput</option>
|
||||||
<option value="time">時間</option>
|
<option value="time">時間</option>
|
||||||
<option value="unit">已建立群組</option>
|
<option value="unit">已建立群組</option>
|
||||||
</select>
|
</select>
|
||||||
|
@ -38,7 +38,9 @@ const stateDefault = () => ({
|
|||||||
id2: {
|
id2: {
|
||||||
unit: '',
|
unit: '',
|
||||||
data: {}
|
data: {}
|
||||||
}
|
},
|
||||||
|
name: '',
|
||||||
|
op: ''
|
||||||
})
|
})
|
||||||
|
|
||||||
const lcDef = () => ({
|
const lcDef = () => ({
|
||||||
@ -92,7 +94,79 @@ class ConditionField extends React.Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
joinGroup = () => {
|
joinGroup = () => {
|
||||||
console.log(this.state);
|
let id1 = {...this.state.id1};
|
||||||
|
let id2 = {...this.state.id2};
|
||||||
|
let {showDialog, addNewGroup} = this.props;
|
||||||
|
if(!('type' in id1.data)){
|
||||||
|
showDialog('請選擇元件');
|
||||||
|
}else{
|
||||||
|
if(id1.data.type == 'lc') {
|
||||||
|
let chk = this.checkLC(id1.data);
|
||||||
|
if(chk.status != 1) return showDialog(chk.message);
|
||||||
|
}else{
|
||||||
|
let chk = this.checkLN(id1.data);
|
||||||
|
if(chk.status != 1) return showDialog(chk.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if(!('type' in id2.data)){
|
||||||
|
showDialog('請選擇元件');
|
||||||
|
}else{
|
||||||
|
if(id2.data.type == 'lc') {
|
||||||
|
let chk = this.checkLC(id2.data);
|
||||||
|
if(chk.status != 1) return showDialog(chk.message);
|
||||||
|
}else{
|
||||||
|
let chk = this.checkLN(id2.data);
|
||||||
|
if(chk.status != 1) return showDialog(chk.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if(!this.state.op) return showDialog('請選擇條件');
|
||||||
|
if(!this.state.name) return showDialog('請輸入名稱');
|
||||||
|
|
||||||
|
addNewGroup({
|
||||||
|
name: this.state.name,
|
||||||
|
op: this.state.op,
|
||||||
|
type: 'lc',
|
||||||
|
id1: id1.data,
|
||||||
|
id2: id2.data
|
||||||
|
}, this.clearField);
|
||||||
|
}
|
||||||
|
|
||||||
|
changeState = (tag, value) => {
|
||||||
|
if(!tag) return ;
|
||||||
|
if(tag == 'name'){
|
||||||
|
this.setState({
|
||||||
|
name: value
|
||||||
|
})
|
||||||
|
}
|
||||||
|
if(tag == 'op'){
|
||||||
|
this.setState({
|
||||||
|
op: value
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
checkLC = (data) => {
|
||||||
|
let json = {
|
||||||
|
status: 0,
|
||||||
|
message: ''
|
||||||
|
};
|
||||||
|
if(typeof data != 'object' || Object.keys(data).length == 0) return {...json, message: '請選擇元件'};
|
||||||
|
if(!data.id) return {...json, message: '請選擇裝置'};
|
||||||
|
if(!('op' in data) || data.op == '') return {...json, message: '請選擇條件'};
|
||||||
|
if(!('value' in data) || data.value == '') return {...json, message: '請輸入數值'};
|
||||||
|
return {...json, status: 1}
|
||||||
|
}
|
||||||
|
|
||||||
|
checkLN = (data) => {
|
||||||
|
let json = {
|
||||||
|
status: 0,
|
||||||
|
message: ''
|
||||||
|
};
|
||||||
|
if(typeof data != 'object' || Object.keys(data).length == 0) return {...json, message: '請選擇元件'};
|
||||||
|
if(!data.dev) return {...json, message: '請選擇群組'};
|
||||||
|
return {...json, status: 1};
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
@ -100,11 +174,11 @@ class ConditionField extends React.Component {
|
|||||||
return (
|
return (
|
||||||
<Segment color="red">
|
<Segment color="red">
|
||||||
<Form.Field>
|
<Form.Field>
|
||||||
<Input label="節點名稱" />
|
<Input label="節點名稱" value={this.state.name} onChange={(e,d)=>{ this.changeState('name', d.value) }} />
|
||||||
</Form.Field>
|
</Form.Field>
|
||||||
<Form.Field>
|
<Form.Field>
|
||||||
<label>觸發條件</label>
|
<label>觸發條件</label>
|
||||||
<select>
|
<select value={this.state.op} onChange={e=>{this.changeState('op', e.target.value)}}>
|
||||||
<option value="">請選擇觸發條件</option>
|
<option value="">請選擇觸發條件</option>
|
||||||
{
|
{
|
||||||
ops.map((t,idx) => {
|
ops.map((t,idx) => {
|
||||||
|
@ -11,16 +11,14 @@ import {
|
|||||||
List
|
List
|
||||||
} from 'semantic-ui-react';
|
} from 'semantic-ui-react';
|
||||||
import ConditionField from './Condition';
|
import ConditionField from './Condition';
|
||||||
|
import ActionSelect from './ActionSelect';
|
||||||
|
import ActionList from './ActionList';
|
||||||
|
|
||||||
const stateDefault = ()=>({
|
const stateDefault = ()=>({
|
||||||
groups: {
|
groups: {},
|
||||||
"g1":{
|
idx: 0,
|
||||||
name: "aaa"
|
active: 0,
|
||||||
},
|
actions: []
|
||||||
"g2":{
|
|
||||||
name: "bbb"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
|
|
||||||
class ActionLinkAdd extends React.Component {
|
class ActionLinkAdd extends React.Component {
|
||||||
@ -28,23 +26,88 @@ class ActionLinkAdd extends React.Component {
|
|||||||
...stateDefault()
|
...stateDefault()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
changeState = (tag, value) => {
|
||||||
|
if(tag == 'active'){
|
||||||
|
this.setState({
|
||||||
|
active: value?1:0
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
addNewGroup = (data, cb = null) => {
|
||||||
|
let devs = [];
|
||||||
|
let {groups} = this.state
|
||||||
|
if(data.id1.type == 'ln') devs.push(data.id1.dev)
|
||||||
|
if(data.id2.type == 'ln') devs.push(data.id2.dev)
|
||||||
|
|
||||||
|
data.id1 = {...data.id1, ...groups[data.id1.dev]}
|
||||||
|
data.id2 = {...data.id2, ...groups[data.id2.dev]}
|
||||||
|
delete data.id1.dev;
|
||||||
|
delete data.id2.dev;
|
||||||
|
|
||||||
|
for(let i in devs){
|
||||||
|
if(devs[i] in groups) delete groups[devs[i]];
|
||||||
|
}
|
||||||
|
|
||||||
|
let idx = this.state.idx + 1;
|
||||||
|
groups[`unit${idx}`] = data;
|
||||||
|
|
||||||
|
this.setState({
|
||||||
|
groups,
|
||||||
|
idx
|
||||||
|
}, ()=>{
|
||||||
|
if(cb && typeof cb == 'function') cb();
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
addNewAction = (data, cb=null) => {
|
||||||
|
this.setState({
|
||||||
|
actions: [...this.state.actions, data]
|
||||||
|
}, ()=>{
|
||||||
|
if(cb && typeof cb == 'function') cb();
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
removeAction = (idx) => {
|
||||||
|
let {actions} = this.state;
|
||||||
|
actions.splice(idx, 1);
|
||||||
|
this.setState({
|
||||||
|
actions
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
let {i18n, showDialog, toggleLoading} = this.props;
|
let {i18n, showDialog, toggleLoading} = this.props;
|
||||||
return (
|
return (
|
||||||
<Container>
|
<Container>
|
||||||
<Menu>
|
<Menu>
|
||||||
<Menu.Menu position="right">
|
<Menu.Menu position="right">
|
||||||
<Menu.Item content="ShowTree" onClick={()=>{}}/>
|
<Menu.Item content="ShowTree" onClick={()=>{ console.log(this.state) }}/>
|
||||||
<Menu.Item content="Save" onClick={()=>{}}/>
|
<Menu.Item content="Save" onClick={()=>{}}/>
|
||||||
</Menu.Menu>
|
</Menu.Menu>
|
||||||
</Menu>
|
</Menu>
|
||||||
<Form as={Segment}>
|
<Form as={Segment}>
|
||||||
<Form.Field>
|
<Form.Field>
|
||||||
<Checkbox label="啟用連動" />
|
<Checkbox label="啟用連動" checked={this.state.active == 1} onChange={(e,d)=>{this.changeState('active', d.checked)}} />
|
||||||
</Form.Field>
|
</Form.Field>
|
||||||
<Form.Field>
|
<Form.Field>
|
||||||
<label>建立條件群組</label>
|
<label>建立條件群組</label>
|
||||||
<ConditionField i18n={i18n} showDialog={showDialog} toggleLoading={toggleLoading} groups={this.state.groups} />
|
<ConditionField i18n={i18n}
|
||||||
|
showDialog={showDialog}
|
||||||
|
toggleLoading={toggleLoading}
|
||||||
|
groups={this.state.groups}
|
||||||
|
addNewGroup={this.addNewGroup} />
|
||||||
|
</Form.Field>
|
||||||
|
<Form.Field>
|
||||||
|
<label>加入動作</label>
|
||||||
|
<ActionSelect i18n={i18n}
|
||||||
|
showDialog={showDialog}
|
||||||
|
toggleLoading={toggleLoading}
|
||||||
|
addNewAction={this.addNewAction} />
|
||||||
|
</Form.Field>
|
||||||
|
<Form.Field>
|
||||||
|
<label>已選擇動作</label>
|
||||||
|
<ActionList i18n={i18n} list={this.state.actions} removeAction={this.removeAction} />
|
||||||
</Form.Field>
|
</Form.Field>
|
||||||
</Form>
|
</Form>
|
||||||
</Container>
|
</Container>
|
||||||
|
Loading…
Reference in New Issue
Block a user