jcnet/webio-node
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update action link add page

Browse Source
This commit is contained in:
Jay 2017-04-18 09:24:41 +08:00
parent eb6b8d9ad5
commit 26f669fb96
14 changed files with 3400 additions and 1608 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
app.js
View File

@ -7,6 +7,7 @@ const logger = require('morgan');
const path = require('path');
const config = require('./config');
const so = require('./includes/storeObject');
const exec = require('child_process').exec;
const app = express();
@ -56,4 +57,20 @@ app.get(['/admin', '/admin/*'], (req, res) => {
app.get('/servcmd', (req, res) => {
res.send({ status: `exit time ${Date.now()}` });
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);
})
})
})

3737
public/js/admin_bundle.js
View File

File diff suppressed because it is too large Load Diff

518
public/js/index_bundle.js
View File

File diff suppressed because it is too large Load Diff

17
src/components/AdminPage/ActionLinkAddN/ActionList/ListItem.js Normal file
View File

@ -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
View 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;

84
src/components/AdminPage/ActionLinkAddN/ActionSelect/StdAction.js Normal file
View File

@ -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;

98
src/components/AdminPage/ActionLinkAddN/ActionSelect/UnitDigitalOutput.js Normal file
View File

@ -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;

98
src/components/AdminPage/ActionLinkAddN/ActionSelect/UnitIOGroup.js Normal file
View File

@ -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;

98
src/components/AdminPage/ActionLinkAddN/ActionSelect/UnitLeone.js Normal file
View File

@ -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
View 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;

30
src/components/AdminPage/ActionLinkAddN/Condition/Unit/UnitTime.js
View File

@ -21,12 +21,12 @@ class UnitTime extends React.Component {
let data = {...this.state.data};
if(np.data.op != data.op) data.op = np.data.op;
let year = np.data.split('|')[5] || '-';
let week = np.data.split('|')[4] || '-';
let month = np.data.split('|')[3] || '-';
let day = np.data.split('|')[2] || '-';
let hour = np.data.split('|')[1] || '-';
let min = np.data.split('|')[0] || '-';
let year = np.data.value.split('|')[5] || '-';
let week = np.data.value.split('|')[4] || '-';
let month = np.data.value.split('|')[3] || '-';
let day = np.data.value.split('|')[2] || '-';
let hour = np.data.value.split('|')[1] || '-';
let min = np.data.value.split('|')[0] || '-';
if(year != data.year) data.year = year;
if(week != data.week) data.week = week;
@ -99,12 +99,18 @@ class UnitTime extends React.Component {
})
}
</select>
<Input size="mini" placeholder="年(不指定請留空)" />
<Input size="mini" placeholder="週(不指定請留空)" />
<Input size="mini" placeholder="月(不指定請留空)" />
<Input size="mini" placeholder="日(不指定請留空)" />
<Input size="mini" placeholder="時(不指定請留空)" />
<Input size="mini" placeholder="分(不指定請留空)" />
<Input size="mini" placeholder="年(不指定請留空)" value={this.state.data.year == '-' ? '' : this.state.data.year}
onChange={(e,d) => {this.changeState('year', d.value)}} />
<Input size="mini" placeholder="週(不指定請留空)" value={this.state.data.week == '-' ? '' : this.state.data.week}
onChange={(e,d) => {this.changeState('week', d.value)}} />
<Input size="mini" placeholder="月(不指定請留空)" value={this.state.data.month == '-' ? '' : this.state.data.month}
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>
)
}

2
src/components/AdminPage/ActionLinkAddN/Condition/Unit/index.js
View File

@ -44,7 +44,7 @@ class Unit extends React.Component {
}}>
<option value="">請選擇元件</option>
<option value="leone">LeOne</option>
<option value="di">DigitInput</option>
<option value="di">DigitalInput</option>
<option value="time">時間</option>
<option value="unit">已建立群組</option>
</select>

82
src/components/AdminPage/ActionLinkAddN/Condition/index.js
View File

@ -38,7 +38,9 @@ const stateDefault = () => ({
id2: {
unit: '',
data: {}
}
},
name: '',
op: ''
})
const lcDef = () => ({
@ -92,7 +94,79 @@ class ConditionField extends React.Component {
}
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() {
@ -100,11 +174,11 @@ class ConditionField extends React.Component {
return (
<Segment color="red">
<Form.Field>
<Input label="節點名稱" />
<Input label="節點名稱" value={this.state.name} onChange={(e,d)=>{ this.changeState('name', d.value) }} />
</Form.Field>
<Form.Field>
<label>觸發條件</label>
<select>
<select value={this.state.op} onChange={e=>{this.changeState('op', e.target.value)}}>
<option value="">請選擇觸發條件</option>
{
ops.map((t,idx) => {

85
src/components/AdminPage/ActionLinkAddN/index.js
View File

@ -11,16 +11,14 @@ import {
List
} from 'semantic-ui-react';
import ConditionField from './Condition';
import ActionSelect from './ActionSelect';
import ActionList from './ActionList';
const stateDefault = ()=>({
groups: {
"g1":{
name: "aaa"
},
"g2":{
name: "bbb"
}
}
groups: {},
idx: 0,
active: 0,
actions: []
})
class ActionLinkAdd extends React.Component {
@ -28,23 +26,88 @@ class ActionLinkAdd extends React.Component {
...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() {
let {i18n, showDialog, toggleLoading} = this.props;
return (
<Container>
<Menu>
<Menu.Menu position="right">
<Menu.Item content="ShowTree" onClick={()=>{}}/>
<Menu.Item content="ShowTree" onClick={()=>{ console.log(this.state) }}/>
<Menu.Item content="Save" onClick={()=>{}}/>
</Menu.Menu>
</Menu>
<Form as={Segment}>
<Form.Field>
<Checkbox label="啟用連動" />
<Checkbox label="啟用連動" checked={this.state.active == 1} onChange={(e,d)=>{this.changeState('active', d.checked)}} />
</Form.Field>
<Form.Field>
<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>
</Container>