mirror of
https://git.rwth-aachen.de/acs/public/villas/web/
synced 2025-03-09 00:00:01 +01:00
Add simulator-action component
This commit is contained in:
Markus Grigull
parent
99954a7662
commit
32eea44827
5 changed files with 104 additions and 169 deletions
68
src/components/simulator-action.js
Normal file
68
src/components/simulator-action.js
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
/**
|
||||
* File: simulator-actionm.js
|
||||
* Author: Markus Grigull <mgrigull@eonerc.rwth-aachen.de>
|
||||
* Date: 12.04.2018
|
||||
*
|
||||
* This file is part of VILLASweb.
|
||||
*
|
||||
* VILLASweb is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU General Public License as published by
|
||||
* the Free Software Foundation, either version 3 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* VILLASweb is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU General Public License
|
||||
* along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
|
||||
******************************************************************************/
|
||||
|
||||
import React from 'react';
|
||||
import { Button, DropdownButton, MenuItem } from 'react-bootstrap';
|
||||
|
||||
class SimulatorAction extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
selectedAction: null
|
||||
};
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
if (this.state.selectedAction == null) {
|
||||
if (nextProps.actions != null && nextProps.actions.length > 0) {
|
||||
this.setState({ selectedAction: nextProps.actions[0] });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setAction = id => {
|
||||
// search action
|
||||
for (let action of this.props.actions) {
|
||||
if (action.id === id) {
|
||||
this.setState({ selectedAction: action });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const actionList = this.props.actions.map(action => (
|
||||
<MenuItem key={action.id} eventKey={action.id} active={this.state.selectedAction === action.id}>
|
||||
{action.title}
|
||||
</MenuItem>
|
||||
));
|
||||
|
||||
return <div>
|
||||
<DropdownButton title={this.state.selectedAction != null ? this.state.selectedAction.title : ''} id="action-dropdown" onSelect={this.setAction}>
|
||||
{actionList}
|
||||
</DropdownButton>
|
||||
|
||||
<Button style={{ marginLeft: '5px' }} disabled={this.props.runDisabled} onClick={() => this.props.runAction(this.state.selectedAction)}>Run</Button>
|
||||
</div>;
|
||||
}
|
||||
}
|
||||
|
||||
export default SimulatorAction;
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
|
||||
import React from 'react';
|
||||
import { Container } from 'flux/utils';
|
||||
import { Button, Modal, Glyphicon, DropdownButton, MenuItem } from 'react-bootstrap';
|
||||
import { Button, Modal, Glyphicon } from 'react-bootstrap';
|
||||
import FileSaver from 'file-saver';
|
||||
|
||||
import SimulationStore from '../stores/simulation-store';
|
||||
|
|
@ -34,6 +34,7 @@ import TableColumn from '../components/table-column';
|
|||
import NewSimulationModelDialog from '../components/dialog/new-simulation-model';
|
||||
import EditSimulationModelDialog from '../components/dialog/edit-simulation-model';
|
||||
import ImportSimulationModelDialog from '../components/dialog/import-simulation-model';
|
||||
import SimulatorAction from '../components/simulator-action';
|
||||
|
||||
class Simulation extends React.Component {
|
||||
static getStores() {
|
||||
|
|
@ -55,8 +56,6 @@ class Simulation extends React.Component {
|
|||
|
||||
simulation: {},
|
||||
|
||||
runAction: 0,
|
||||
runTitle: 'Start',
|
||||
selectedSimulationModels: []
|
||||
}
|
||||
}
|
||||
|
|
@ -202,57 +201,7 @@ class Simulation extends React.Component {
|
|||
this.setState({ selectedSimulationModels });
|
||||
}
|
||||
|
||||
setRunAction(index) {
|
||||
let runTitle = '';
|
||||
switch (index) {
|
||||
case '0':
|
||||
runTitle = 'Start';
|
||||
break;
|
||||
|
||||
case '1':
|
||||
runTitle = 'Stop';
|
||||
break;
|
||||
|
||||
case '2':
|
||||
runTitle = 'Pause';
|
||||
break;
|
||||
|
||||
case '3':
|
||||
runTitle = 'Resume';
|
||||
break;
|
||||
|
||||
default:
|
||||
console.log('Unknown index ' + index);
|
||||
break;
|
||||
}
|
||||
|
||||
this.setState({ runAction: index, runTitle });
|
||||
}
|
||||
|
||||
runAction() {
|
||||
let data;
|
||||
switch (this.state.runAction) {
|
||||
case '0':
|
||||
data = { action: 'start' };
|
||||
break;
|
||||
|
||||
case '1':
|
||||
data = { action: 'stop' };
|
||||
break;
|
||||
|
||||
case '2':
|
||||
data = { action: 'pause' };
|
||||
break;
|
||||
|
||||
case '3':
|
||||
data = { action: 'resume' };
|
||||
break;
|
||||
|
||||
default:
|
||||
console.warn('Unknown simulator action: ' + this.state.runAction);
|
||||
return;
|
||||
}
|
||||
|
||||
runAction = action => {
|
||||
for (let index of this.state.selectedSimulationModels) {
|
||||
// get simulator for model
|
||||
let simulator = null;
|
||||
|
|
@ -269,7 +218,7 @@ class Simulation extends React.Component {
|
|||
AppDispatcher.dispatch({
|
||||
type: 'simulators/start-action',
|
||||
simulator,
|
||||
data,
|
||||
data: action.data,
|
||||
token: this.state.sessionToken
|
||||
});
|
||||
}
|
||||
|
|
@ -298,14 +247,15 @@ class Simulation extends React.Component {
|
|||
</Table>
|
||||
|
||||
<div style={{ float: 'left' }}>
|
||||
<DropdownButton title={this.state.runTitle} id="simulation-model-action-dropdown" onSelect={index => this.setRunAction(index)}>
|
||||
<MenuItem eventKey="0" active={this.state.runAction === '0'}>Start</MenuItem>
|
||||
<MenuItem eventKey="1" active={this.state.runAction === '1'}>Stop</MenuItem>
|
||||
<MenuItem eventKey="2" active={this.state.runAction === '2'}>Pause</MenuItem>
|
||||
<MenuItem eventKey="3" active={this.state.runAction === '3'}>Resume</MenuItem>
|
||||
</DropdownButton>
|
||||
|
||||
<Button disabled={this.state.selectedSimulationModels.length <= 0} onClick={() => this.runAction()}>Run</Button>
|
||||
<SimulatorAction
|
||||
runDisabled={false}
|
||||
runAction={this.runAction}
|
||||
actions={[
|
||||
{ id: '0', title: 'Start', data: { action: 'start' } },
|
||||
{ id: '1', title: 'Stop', data: { action: 'stop' } },
|
||||
{ id: '2', title: 'Pause', data: { action: 'pause' } },
|
||||
{ id: '3', title: 'Resume', data: { action: 'resume' } }
|
||||
]}/>
|
||||
</div>
|
||||
|
||||
<div style={{ float: 'right' }}>
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
|
||||
import React, { Component } from 'react';
|
||||
import { Container } from 'flux/utils';
|
||||
import { Button, Modal, Glyphicon, DropdownButton, MenuItem } from 'react-bootstrap';
|
||||
import { Button, Modal, Glyphicon } from 'react-bootstrap';
|
||||
import FileSaver from 'file-saver';
|
||||
|
||||
import AppDispatcher from '../app-dispatcher';
|
||||
|
|
@ -34,6 +34,7 @@ import TableColumn from '../components/table-column';
|
|||
import NewSimulationDialog from '../components/dialog/new-simulation';
|
||||
import EditSimulationDialog from '../components/dialog/edit-simulation';
|
||||
import ImportSimulationDialog from '../components/dialog/import-simulation';
|
||||
import SimulatorAction from '../components/simulator-action';
|
||||
|
||||
class Simulations extends Component {
|
||||
static getStores() {
|
||||
|
|
@ -52,8 +53,6 @@ class Simulations extends Component {
|
|||
importModal: false,
|
||||
modalSimulation: {},
|
||||
|
||||
runAction: 0,
|
||||
runTitle: 'Start',
|
||||
selectedSimulations: []
|
||||
};
|
||||
}
|
||||
|
|
@ -187,57 +186,7 @@ class Simulations extends Component {
|
|||
this.setState({ selectedSimulations });
|
||||
}
|
||||
|
||||
setRunAction(index) {
|
||||
let runTitle = '';
|
||||
switch (index) {
|
||||
case '0':
|
||||
runTitle = 'Start';
|
||||
break;
|
||||
|
||||
case '1':
|
||||
runTitle = 'Stop';
|
||||
break;
|
||||
|
||||
case '2':
|
||||
runTitle = 'Pause';
|
||||
break;
|
||||
|
||||
case '3':
|
||||
runTitle = 'Resume';
|
||||
break;
|
||||
|
||||
default:
|
||||
console.log('Unknown index ' + index);
|
||||
break;
|
||||
}
|
||||
|
||||
this.setState({ runAction: index, runTitle });
|
||||
}
|
||||
|
||||
runAction() {
|
||||
let data;
|
||||
switch (this.state.runAction) {
|
||||
case '0':
|
||||
data = { action: 'start' };
|
||||
break;
|
||||
|
||||
case '1':
|
||||
data = { action: 'stop' };
|
||||
break;
|
||||
|
||||
case '2':
|
||||
data = { action: 'pause' };
|
||||
break;
|
||||
|
||||
case '3':
|
||||
data = { action: 'resume' };
|
||||
break;
|
||||
|
||||
default:
|
||||
console.warn('Unknown simulator action: ' + this.state.runAction);
|
||||
return;
|
||||
}
|
||||
|
||||
runAction = action => {
|
||||
for (let index of this.state.selectedSimulations) {
|
||||
for (let model of this.state.simulations[index].models) {
|
||||
// get simulator for model
|
||||
|
|
@ -255,7 +204,7 @@ class Simulations extends Component {
|
|||
AppDispatcher.dispatch({
|
||||
type: 'simulators/start-action',
|
||||
simulator,
|
||||
data,
|
||||
data: action.data,
|
||||
token: this.state.sessionToken
|
||||
});
|
||||
}
|
||||
|
|
@ -282,14 +231,15 @@ class Simulations extends Component {
|
|||
</Table>
|
||||
|
||||
<div style={{ float: 'left' }}>
|
||||
<DropdownButton title={this.state.runTitle} id="simulation-action-dropdown" onSelect={index => this.setRunAction(index)}>
|
||||
<MenuItem eventKey="0" active={this.state.runAction === '0'}>Start</MenuItem>
|
||||
<MenuItem eventKey="1" active={this.state.runAction === '1'}>Stop</MenuItem>
|
||||
<MenuItem eventKey="2" active={this.state.runAction === '2'}>Pause</MenuItem>
|
||||
<MenuItem eventKey="3" active={this.state.runAction === '3'}>Resume</MenuItem>
|
||||
</DropdownButton>
|
||||
|
||||
<Button disabled={this.state.selectedSimulations.length <= 0} onClick={() => this.runAction()}>Run</Button>
|
||||
<SimulatorAction
|
||||
runDisabled={false}
|
||||
runAction={this.runAction}
|
||||
actions={[
|
||||
{ id: '0', title: 'Start', data: { action: 'start' } },
|
||||
{ id: '1', title: 'Stop', data: { action: 'stop' } },
|
||||
{ id: '2', title: 'Pause', data: { action: 'pause' } },
|
||||
{ id: '3', title: 'Resume', data: { action: 'resume' } }
|
||||
]}/>
|
||||
</div>
|
||||
|
||||
<div style={{ float: 'right' }}>
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
|
||||
import React, { Component } from 'react';
|
||||
import { Container } from 'flux/utils';
|
||||
import { Button, Modal, Glyphicon, DropdownButton, MenuItem } from 'react-bootstrap';
|
||||
import { Button, Modal, Glyphicon } from 'react-bootstrap';
|
||||
import FileSaver from 'file-saver';
|
||||
import _ from 'lodash';
|
||||
|
||||
|
|
@ -34,6 +34,7 @@ import TableColumn from '../components/table-column';
|
|||
import NewSimulatorDialog from '../components/dialog/new-simulator';
|
||||
import EditSimulatorDialog from '../components/dialog/edit-simulator';
|
||||
import ImportSimulatorDialog from '../components/dialog/import-simulator';
|
||||
import SimulatorAction from '../components/simulator-action';
|
||||
|
||||
class Simulators extends Component {
|
||||
static getStores() {
|
||||
|
|
@ -48,8 +49,6 @@ class Simulators extends Component {
|
|||
modalSimulator: {},
|
||||
deleteModal: false,
|
||||
|
||||
runAction: 0,
|
||||
runTitle: 'Reset',
|
||||
selectedSimulators: []
|
||||
};
|
||||
}
|
||||
|
|
@ -146,42 +145,12 @@ class Simulators extends Component {
|
|||
this.setState({ selectedSimulators });
|
||||
}
|
||||
|
||||
setRunAction(index) {
|
||||
let runTitle = '';
|
||||
switch (index) {
|
||||
case '0':
|
||||
runTitle = 'Reset';
|
||||
break;
|
||||
|
||||
case '1':
|
||||
runTitle = 'Shutdown';
|
||||
break;
|
||||
|
||||
default:
|
||||
console.log('Unknown index ' + index);
|
||||
break;
|
||||
}
|
||||
|
||||
this.setState({ runAction: index, runTitle });
|
||||
}
|
||||
|
||||
runAction() {
|
||||
runAction = action => {
|
||||
for (let index of this.state.selectedSimulators) {
|
||||
let data;
|
||||
switch (this.state.runAction) {
|
||||
case '0':
|
||||
data = { action: 'reset' };
|
||||
break;
|
||||
|
||||
case '1':
|
||||
data = { action: 'shutdown' };
|
||||
break;
|
||||
}
|
||||
|
||||
AppDispatcher.dispatch({
|
||||
type: 'simulators/start-action',
|
||||
simulator: this.state.simulators[index],
|
||||
data,
|
||||
data: action.data,
|
||||
token: this.state.sessionToken
|
||||
});
|
||||
}
|
||||
|
|
@ -212,12 +181,10 @@ class Simulators extends Component {
|
|||
</Table>
|
||||
|
||||
<div style={{ float: 'left' }}>
|
||||
<DropdownButton title={this.state.runTitle} id="simulator-action-dropdown" onSelect={(index) => this.setRunAction(index)}>
|
||||
<MenuItem eventKey="0" active={this.state.runAction === '0'}>Reset</MenuItem>
|
||||
<MenuItem eventKey="1" active={this.state.runAction === '1'}>Shutdown</MenuItem>
|
||||
</DropdownButton>
|
||||
|
||||
<Button disabled={this.state.selectedSimulators.length <= 0} onClick={() => this.runAction()}>Run</Button>
|
||||
<SimulatorAction
|
||||
runDisabled={false}
|
||||
runAction={this.runAction}
|
||||
actions={[ { id: '0', title: 'Reset', data: { action: 'reset' } }, { id: '1', title: 'Shutdown', data: { action: 'shutdown' } } ]}/>
|
||||
</div>
|
||||
|
||||
<div style={{ float: 'right' }}>
|
||||
|
|
|
|||
|
|
@ -38,8 +38,8 @@ class SimulatorStore extends ArrayStore {
|
|||
} else if (simulator.rawProperties != null && 'endpoint' in simulator.rawProperties) {
|
||||
SimulatorDataDataManager.open(simulator.rawProperties.endpoint, simulator._id);
|
||||
} else {
|
||||
console.warn('Endpoint not found for simulator');
|
||||
console.log(simulator);
|
||||
// console.warn('Endpoint not found for simulator');
|
||||
// console.log(simulator);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue