Merge branch '103-pause-button' into 'develop'

Resolve "Pause button"

Closes #103

See merge request !23

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 {
             <div>
               <div className='section-buttons-group'>
                 <Button bsStyle="link" onClick={() => this.stopEditing()}>
-                  <span className="glyphicon glyphicon-floppy-disk"></span> Save
+                  <Glyphicon glyph="floppy-disk" /> Save
                 </Button>
-                <Button bsStyle="link" onClick={() => this.discardChanges()}>
-                  <span className="glyphicon glyphicon-remove"></span> Cancel
+                <Button bsStyle="link" onClick={() => this.discardChanges()} style={{ marginLeft: '8px' }}>
+                  <Glyphicon glyph="remove" /> Cancel
                 </Button>
               </div>
             </div>
@@ -444,13 +453,19 @@ class Visualization extends React.Component {
             </div>
           )}
 
-          {this.state.editing &&
-            <div className="section-grid-slider">
-              <span>Grid: {this.state.visualization.grid > 1 ? this.state.visualization.grid : 'Disabled'}</span>
+          <div className="section-buttons-group-right">
+            {this.state.editing ? (
+              <div>
+                <span>Grid: {this.state.visualization.grid > 1 ? this.state.visualization.grid : 'Disabled'}</span>
 
-              <Slider value={this.state.visualization.grid} style={{ width: '80px' }} step={5} onChange={value => this.setGrid(value)} />
-            </div>
-          }
+                <Slider value={this.state.visualization.grid} style={{ width: '80px' }} step={5} onChange={value => this.setGrid(value)} />
+              </div>
+            ) : (this.state.paused ? (
+              <Button bsStyle="info" onClick={this.unpauseData}><Glyphicon glyph="play" /> Live</Button>
+            ): (
+              <Button bsStyle="info" onClick={this.pauseData}><Glyphicon glyph="pause" /> Pause</Button>
+            ))}
+          </div>
         </div>
 
         <div className="box box-content" onContextMenu={ (e) => e.preventDefault() }>
@@ -473,8 +488,18 @@ class Visualization extends React.Component {
 
           <Dropzone height={this.state.dropZoneHeight} onDrop={(item, position) => this.handleDrop(item, position)} editing={this.state.editing}>
             {current_widgets != null &&
-              Object.keys(current_widgets).map( (widget_key) => (
-              <Widget key={widget_key} data={current_widgets[widget_key]} simulation={this.state.simulation} onWidgetChange={(w, k) => 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 => (
+              <Widget 
+                key={widget_key} 
+                data={current_widgets[widget_key]} 
+                simulation={this.state.simulation} 
+                onWidgetChange={(w, k) => 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}
+              />
             ))}
 
             <Grid size={this.state.visualization.grid} disabled={this.state.visualization.grid === 1 || !this.state.editing} />

src/containers/widget.js

@@ -19,7 +19,7 @@
  * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
  ******************************************************************************/
 
-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 });

src/styles/app.css

@@ -88,7 +88,7 @@ body {
   color: #333;
 }
 
-.app-body {
+.app-body-spacing {
   padding: 15px 5px 0px 5px;
 }
 
@@ -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;
 }