From 31ad0a5ca2427494ea932a3e26eb797334e4ddeb Mon Sep 17 00:00:00 2001 From: Markus Grigull Date: Sat, 19 Aug 2017 10:42:40 +0200 Subject: [PATCH 1/2] Add pause button in visualization --- src/containers/visualization.js | 49 +++++++++++++++++++++++++-------- src/containers/widget.js | 32 +++++++++++++-------- src/styles/app.css | 4 +-- 3 files changed, 60 insertions(+), 25 deletions(-) diff --git a/src/containers/visualization.js b/src/containers/visualization.js index d8a3872..8492737 100644 --- a/src/containers/visualization.js +++ b/src/containers/visualization.js @@ -21,7 +21,7 @@ import React from 'react'; import { Container } from 'flux/utils'; -import { Button } from 'react-bootstrap'; +import { Button, Glyphicon } from 'react-bootstrap'; import { ContextMenu, MenuItem } from 'react-contextmenu'; import Slider from 'rc-slider'; @@ -66,6 +66,7 @@ class Visualization extends React.Component { project: prevState.project || null, simulation: prevState.simulation || null, editing: prevState.editing || false, + paused: prevState.paused || false, editModal: prevState.editModal || false, modalData: prevState.modalData || null, @@ -402,6 +403,14 @@ class Visualization extends React.Component { fullscreen: false }); } + + pauseData = () => { + this.setState({ paused: true }); + } + + unpauseData = () => { + this.setState({ paused: false }); + } render() { const current_widgets = this.state.visualization.widgets; @@ -418,10 +427,10 @@ class Visualization extends React.Component {
-
@@ -444,13 +453,19 @@ class Visualization extends React.Component { )} - {this.state.editing && -
- Grid: {this.state.visualization.grid > 1 ? this.state.visualization.grid : 'Disabled'} +
+ {this.state.editing ? ( +
+ Grid: {this.state.visualization.grid > 1 ? this.state.visualization.grid : 'Disabled'} - this.setGrid(value)} /> -
- } + this.setGrid(value)} /> +
+ ) : (this.state.paused ? ( + + ): ( + + ))} +
e.preventDefault() }> @@ -473,8 +488,18 @@ class Visualization extends React.Component { this.handleDrop(item, position)} editing={this.state.editing}> {current_widgets != null && - Object.keys(current_widgets).map( (widget_key) => ( - this.widgetChange(w, k)} onWidgetStatusChange={(w, k) => this.widgetStatusChange(w, k)} editing={this.state.editing} index={widget_key} grid={this.state.visualization.grid} /> + Object.keys(current_widgets).map(widget_key => ( + this.widgetChange(w, k)} + onWidgetStatusChange={(w, k) => this.widgetStatusChange(w, k)} + editing={this.state.editing} + index={widget_key} + grid={this.state.visualization.grid} + paused={this.state.paused} + /> ))} diff --git a/src/containers/widget.js b/src/containers/widget.js index 15e89b6..4667614 100644 --- a/src/containers/widget.js +++ b/src/containers/widget.js @@ -19,7 +19,7 @@ * along with VILLASweb. If not, see . ******************************************************************************/ -import React, { Component } from 'react'; +import React from 'react'; import { Container } from 'flux/utils'; import { ContextMenuTrigger } from 'react-contextmenu'; import Rnd from 'react-rnd'; @@ -45,26 +45,36 @@ import WidgetHTML from '../components/widget-html'; import '../styles/widgets.css'; -class Widget extends Component { +class Widget extends React.Component { static getStores() { return [ SimulatorDataStore, FileStore, UserStore ]; } - static calculateState(prevState) { - let tokenState = UserStore.getState().token; + static calculateState(prevState, props) { + const sessionToken = UserStore.getState().token; + + let simulatorData = {}; + + if (props.paused) { + if (prevState && prevState.simulatorData) { + simulatorData = JSON.parse(JSON.stringify(prevState.simulatorData)); + } + } else { + simulatorData = SimulatorDataStore.getState(); + } if (prevState) { return { - sessionToken: tokenState, - simulatorData: SimulatorDataStore.getState(), + sessionToken, + simulatorData, files: FileStore.getState(), sequence: prevState.sequence + 1 - } + }; } else { return { - sessionToken: tokenState, - simulatorData: SimulatorDataStore.getState(), + sessionToken, + simulatorData, files: FileStore.getState(), sequence: 0 @@ -144,7 +154,7 @@ class Widget extends Component { render() { // configure grid - let grid = [this.props.grid, this.props.grid]; + const grid = [this.props.grid, this.props.grid]; // get widget element const widget = this.props.data; @@ -223,4 +233,4 @@ class Widget extends Component { } } -export default Container.create(Widget); +export default Container.create(Widget, { withProps: true }); diff --git a/src/styles/app.css b/src/styles/app.css index b9a85a9..b069c5d 100644 --- a/src/styles/app.css +++ b/src/styles/app.css @@ -370,12 +370,12 @@ body { font-size: 0.8em; } -.section-grid-slider { +.section-buttons-group-right { height: auto !important; float: right; } -.section-grid-slider .rc-slider { +.section-buttons-group-right .rc-slider { margin-left: 12px; } From 2abadabdf365974dd1a3abf9792f4e513f8d0273 Mon Sep 17 00:00:00 2001 From: Markus Grigull Date: Mon, 18 Sep 2017 18:41:17 +0200 Subject: [PATCH 2/2] Fix fullscreen style --- src/styles/app.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/app.css b/src/styles/app.css index b069c5d..7d58d04 100644 --- a/src/styles/app.css +++ b/src/styles/app.css @@ -88,7 +88,7 @@ body { color: #333; } -.app-body { +.app-body-spacing { padding: 15px 5px 0px 5px; }