mirror of
https://git.rwth-aachen.de/acs/public/villas/web/
synced 2025-03-09 00:00:01 +01:00
Add timepicker to select delay for command execution, delay defaults to 0 (immediate execution), closes #173
This commit is contained in:
Sonja Happ
parent
9c3c78cbf2
commit
70d13c9948
4 changed files with 55 additions and 27 deletions
28
package-lock.json
generated
28
package-lock.json
generated
|
|
@ -8772,9 +8772,9 @@
|
|||
}
|
||||
},
|
||||
"node-forge": {
|
||||
"version": "0.9.0",
|
||||
"resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.9.0.tgz",
|
||||
"integrity": "sha512-7ASaDa3pD+lJ3WvXFsxekJQelBKRpne+GOVbLbtHYdd7pFspyeuJHnWfLplGf3SwKGbfs/aYl5V/JCIaHVUKKQ=="
|
||||
"version": "0.10.0",
|
||||
"resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.10.0.tgz",
|
||||
"integrity": "sha512-PPmu8eEeG9saEUvI97fm4OYxXVB6bFvyNTyiUOBichBpFG8A1Ljw3bY62+5oOjDEMHRnd0Y7HQ+x7uzxOzC6JA=="
|
||||
},
|
||||
"node-gyp": {
|
||||
"version": "3.8.0",
|
||||
|
|
@ -11018,6 +11018,15 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"react-bootstrap-time-picker": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/react-bootstrap-time-picker/-/react-bootstrap-time-picker-2.0.1.tgz",
|
||||
"integrity": "sha512-hbZyoLWav9P6UPTQPQRoC7rQT5UYb0a4Cs/8Wiszs1Rda/cH3Ar1B2uM78GKJjXMK0VYGR9XKyza2BCnLJ+ZSA==",
|
||||
"requires": {
|
||||
"prop-types": "^15.7.2",
|
||||
"time-number": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"react-collapse": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/react-collapse/-/react-collapse-5.0.1.tgz",
|
||||
|
|
@ -12226,11 +12235,11 @@
|
|||
"integrity": "sha1-Yl2GWPhlr0Psliv8N2o3NZpJlMo="
|
||||
},
|
||||
"selfsigned": {
|
||||
"version": "1.10.7",
|
||||
"resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.7.tgz",
|
||||
"integrity": "sha512-8M3wBCzeWIJnQfl43IKwOmC4H/RAp50S8DF60znzjW5GVqTcSe2vWclt7hmYVPkKPlHWOu5EaWOMZ2Y6W8ZXTA==",
|
||||
"version": "1.10.8",
|
||||
"resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.8.tgz",
|
||||
"integrity": "sha512-2P4PtieJeEwVgTU9QEcwIRDQ/mXJLX8/+I3ur+Pg16nS8oNbrGxEso9NyYWy8NAmXiNl4dlAp5MwoNeCWzON4w==",
|
||||
"requires": {
|
||||
"node-forge": "0.9.0"
|
||||
"node-forge": "^0.10.0"
|
||||
}
|
||||
},
|
||||
"semver": {
|
||||
|
|
@ -13409,6 +13418,11 @@
|
|||
"resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
|
||||
"integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA=="
|
||||
},
|
||||
"time-number": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/time-number/-/time-number-1.1.0.tgz",
|
||||
"integrity": "sha1-k6ABk6Lk+EG/uodROYf02+PAmk4="
|
||||
},
|
||||
"timers-browserify": {
|
||||
"version": "2.0.11",
|
||||
"resolved": "https://registry.npmjs.org/timers-browserify/-/timers-browserify-2.0.11.tgz",
|
||||
|
|
|
|||
|
|
@ -33,6 +33,7 @@
|
|||
"rc-slider": "^9.3.1",
|
||||
"react": "^16.13.1",
|
||||
"react-bootstrap": "^1.3.0",
|
||||
"react-bootstrap-time-picker": "^2.0.1",
|
||||
"react-collapse": "^5.0.1",
|
||||
"react-contexify": "^4.1.1",
|
||||
"react-d3": "^0.4.0",
|
||||
|
|
|
|||
|
|
@ -16,14 +16,16 @@
|
|||
******************************************************************************/
|
||||
|
||||
import React from 'react';
|
||||
import { Button, ButtonToolbar, DropdownButton, Dropdown, Tooltip, OverlayTrigger } from 'react-bootstrap';
|
||||
import { Button, ButtonToolbar, DropdownButton, Dropdown } from 'react-bootstrap';
|
||||
import TimePicker from 'react-bootstrap-time-picker'
|
||||
|
||||
class ICAction extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
selectedAction: null
|
||||
selectedAction: null,
|
||||
selectedDelay: 0
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -47,9 +49,15 @@ class ICAction extends React.Component {
|
|||
}
|
||||
};
|
||||
|
||||
setDelayForAction = time => {
|
||||
// time in int format: (hours * 3600 + minutes * 60 + seconds)
|
||||
this.setState({selectedDelay: time})
|
||||
}
|
||||
|
||||
render() {
|
||||
let showTooltip = this.state.selectedAction.id === '-1';
|
||||
|
||||
|
||||
let sendCommandDisabled = this.props.runDisabled || this.state.selectedAction == null || this.state.selectedAction.id === "-1"
|
||||
|
||||
const actionList = this.props.actions.map(action => (
|
||||
<Dropdown.Item key={action.id} eventKey={action.id} active={this.state.selectedAction === action.id}>
|
||||
{action.title}
|
||||
|
|
@ -57,25 +65,24 @@ class ICAction extends React.Component {
|
|||
));
|
||||
|
||||
return <div>
|
||||
{showTooltip ?
|
||||
<ButtonToolbar>
|
||||
<OverlayTrigger key={0} placement={'bottom'} overlay={<Tooltip id={`tooltip-${"select"}`}> Select command for infrastructure component </Tooltip>} >
|
||||
<DropdownButton title={this.state.selectedAction != null ? this.state.selectedAction.title : ''} id="action-dropdown" onSelect={this.setAction}>
|
||||
{actionList}
|
||||
</DropdownButton>
|
||||
</OverlayTrigger>
|
||||
<OverlayTrigger key={1} placement={'bottom'} overlay={<Tooltip id={`tooltip-${"send"}`}> Send command to infrastructure component </Tooltip>} >
|
||||
<Button style={{ marginLeft: '5px' }} disabled={this.props.runDisabled} onClick={() => this.props.runAction(this.state.selectedAction)}>Send command</Button>
|
||||
</OverlayTrigger>
|
||||
</ButtonToolbar>
|
||||
:
|
||||
{"Select delay for command execution (Format hh:mm, max 1h):"}
|
||||
<TimePicker
|
||||
format={24}
|
||||
initialValue={this.state.selectedDelay}
|
||||
value={this.state.selectedDelay}
|
||||
start={"00:00"}
|
||||
end={"01:00"}
|
||||
step={1}
|
||||
onChange={this.setDelayForAction}
|
||||
/>
|
||||
<ButtonToolbar>
|
||||
<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)}>Send command</Button>
|
||||
|
||||
<Button style={{ marginLeft: '5px' }} disabled={sendCommandDisabled} onClick={() => this.props.runAction(this.state.selectedAction, this.state.selectedDelay)}>Send command</Button>
|
||||
|
||||
</ButtonToolbar>
|
||||
}
|
||||
</div>;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -303,7 +303,8 @@ class Scenario extends React.Component {
|
|||
this.setState({ selectedConfigs: selectedConfigs });
|
||||
}
|
||||
|
||||
runAction(action) {
|
||||
runAction(action, delay) {
|
||||
// delay in seconds
|
||||
|
||||
if(action.data.action === 'none'){
|
||||
console.warn("No command selected. Nothing was sent.");
|
||||
|
|
@ -327,6 +328,11 @@ class Scenario extends React.Component {
|
|||
action.data.parameters = this.state.configs[index].startParameters;
|
||||
}
|
||||
|
||||
// Unix time stamp + delay
|
||||
action.data.when = Date.now() / 1000.0 + delay
|
||||
|
||||
console.log("Sending action: ", action.data)
|
||||
|
||||
AppDispatcher.dispatch({
|
||||
type: 'ics/start-action',
|
||||
ic: ic,
|
||||
|
|
@ -597,7 +603,7 @@ class Scenario extends React.Component {
|
|||
<div style={{ float: 'left' }}>
|
||||
<ICAction
|
||||
runDisabled={this.state.selectedConfigs.length === 0}
|
||||
runAction={(action) => this.runAction(action)}
|
||||
runAction={(action, delay) => this.runAction(action, delay)}
|
||||
actions={[
|
||||
{ id: '-1', title: 'Select command', data: { action: 'none' } },
|
||||
{ id: '0', title: 'Start', data: { action: 'start' } },
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue