Merge branch 'develop' of git.rwth-aachen.de:acs/public/villas/web into develop

 Conflicts:

	src/widget/edit-widget/edit-widget.js

src/dashboard/dashboard.js

@@ -114,7 +114,7 @@ class Dashboard extends Component {
 
   }
 
-
+  
   static getNewWidgetKey() {
     const widgetKey = this.lastWidgetKey;
     this.lastWidgetKey++;
@@ -282,7 +282,11 @@ class Dashboard extends Component {
   saveEditing() {
     // Provide the callback so it can be called when state change is applied
     // TODO: Check if callback is needed
-
+    AppDispatcher.dispatch({
+      type: 'dashboards/start-edit',
+      data: this.state.dashboard,
+      token: this.state.sessionToken
+    });
 
     this.state.widgetChangeData.forEach( widget => {
       AppDispatcher.dispatch({
@@ -317,7 +321,11 @@ class Dashboard extends Component {
         token: this.state.sessionToken
       });
     }); */
-
+    AppDispatcher.dispatch({
+      type: 'dashboards/start-load',
+      data: this.props.match.params.dashboard,
+      token: this.state.sessionToken
+    });
 
     AppDispatcher.dispatch({
       type: 'widgets/start-load',
@@ -329,9 +337,11 @@ class Dashboard extends Component {
   };
 
   setGrid(value) {
-    const dashboard = this.state.dashboard.set('grid', value);
-
+    
+    let dashboard = this.state.dashboard;
+    dashboard.grid = value;
     this.setState({ dashboard });
+    this.forceUpdate();
   };
 
   pauseData(){

src/widget/edit-widget/edit-widget-text-size-control.js

@@ -29,7 +29,7 @@ class EditWidgetTextSizeControl extends React.Component {
     return (
       <FormGroup controlId="textSize">
         <FormLabel>Text size</FormLabel>
-        <FormControl as="select" value={this.props.widget.textSize} onChange={e => this.props.handleChange(e)}>
+        <FormControl as="select" value={this.props.widget.customProperties.textSize} onChange={e => this.props.handleChange(e)}>
           {sizes.map((size, index) => (
             <option key={index} value={size}>{size}</option>
           ))}

src/widget/edit-widget/edit-widget.js

@@ -80,10 +80,9 @@ class EditWidgetDialog extends React.Component {
 
       // correct image aspect if turned on
       if (e.target.checked) {
-        changeObject = this.assignAspectRatio(changeObject, this.state.temporal.file);
+        changeObject = this.assignAspectRatio(changeObject, this.state.temporal.customProperties.file);
       }
-    } else if (e.target.id === 'file') {
-      //not a customProperty
+    } else if (e.target.id.includes('file')) {
 
       customProperty ? changeObject[parts[0]][parts[1]] = e.target.value : changeObject[e.target.id] = e.target.value;
 

src/widget/widget-plot/plot.js

@@ -65,7 +65,8 @@ class Plot extends React.Component {
       xAxis,
       yAxis,
       labelMargin,
-      identifier: uniqueIdentifier++
+      identifier: uniqueIdentifier++,
+      stopTime: null,
     };
   }
 
@@ -86,20 +87,30 @@ class Plot extends React.Component {
     // check if data is invalid
     if (props.data == null || props.data.length === 0 || props.data[0].length === 0) {
       // create empty plot axes
-      const xScale = scaleTime().domain([Date.now() -  props.time * 1000, Date.now()]).range([0, props.width - leftMargin - labelMargin - rightMargin]);
+      let xScale;
       let yScale;
+      let stopTime;
+
+      if(!props.paused){
+        xScale = scaleTime().domain([Date.now() -  props.time * 1000, Date.now()]).range([0, props.width - leftMargin - labelMargin - rightMargin]);
+        stopTime = Date.now();
+      }else{
+        stopTime = state.stopTime;
+        xScale = scaleLinear().domain([state.stopTime -  props.time * 1000, state.stopTime]).range([0, props.width - leftMargin - labelMargin - rightMargin]);
+      }
 
       if (props.yUseMinMax) {
         yScale = scaleLinear().domain([props.yMin, props.yMax]).range([props.height + topMargin - bottomMargin, topMargin]);
       } else {
         yScale = scaleLinear().domain([0, 10]).range([props.height + topMargin - bottomMargin, topMargin]);
       }
-
+      
       const xAxis = axisBottom().scale(xScale).ticks(5).tickFormat(timeFormat("%M:%S"));
       const yAxis = axisLeft().scale(yScale).ticks(5).tickFormat(format(".3s"));
 
 
       return{
+        stopTime: stopTime,
         data: null,
         xAxis,
         yAxis,