From 31ad0a5ca2427494ea932a3e26eb797334e4ddeb Mon Sep 17 00:00:00 2001
From: Markus Grigull <web@grigull.me>
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 {
             <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} />
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 <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 });
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 <web@grigull.me>
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;
 }