Add simulation model store and data manager

src/components/dialog/edit-simulation-model.js

@@ -34,8 +34,10 @@ class EditSimulationModelDialog extends React.Component {
     super(props);
 
     this.state = {
+      _id: '',
       name: '',
       simulator: '',
+      simulation: '',
       outputLength: 1,
       inputLength: 1,
       outputMapping: [{ name: 'Signal', type: 'Type' }],
@@ -92,6 +94,8 @@ class EditSimulationModelDialog extends React.Component {
 
   resetState() {
     this.setState({
+      _id: this.props.data._id,
+      simulation: this.props.data.simulation,
       name: this.props.data.name,
       simulator: this.props.data.simulator,
       outputLength: this.props.data.outputLength,

src/containers/simulation.js

@@ -27,6 +27,7 @@ import _ from 'lodash';
 
 import SimulationStore from '../stores/simulation-store';
 import SimulatorStore from '../stores/simulator-store';
+import SimulationModelStore from '../stores/simulation-model-store';
 import UserStore from '../stores/user-store';
 import AppDispatcher from '../app-dispatcher';
 
@@ -41,14 +42,36 @@ import DeleteDialog from '../components/dialog/delete-dialog';
 
 class Simulation extends React.Component {
   static getStores() {
-    return [ SimulationStore, SimulatorStore, UserStore ];
+    return [ SimulationStore, SimulatorStore, SimulationModelStore, UserStore ];
   }
 
-  static calculateState() {
+  static calculateState(prevState, props) {
+    // get selected simulation
+    const sessionToken = UserStore.getState().token;
+
+    let simulation = SimulationStore.getState().find(s => s._id === props.match.params.simulation);
+    if (simulation == null) {
+      AppDispatcher.dispatch({
+        type: 'simulations/start-load',
+        data: props.match.params.simulation,
+        token: sessionToken
+      });
+
+      simulation = {};
+    }
+
+    // load models
+    let simulationModels = [];
+    if (simulation.models != null) {
+      simulationModels = SimulationModelStore.getState().filter(m => simulation.models.includes(m._id));
+    }
+
     return {
-      simulations: SimulationStore.getState(),
+      simulationModels,
+      simulation,
+
       simulators: SimulatorStore.getState(),
-      sessionToken: UserStore.getState().token,
+      sessionToken,
 
       newModal: false,
       deleteModal: false,
@@ -57,8 +80,6 @@ class Simulation extends React.Component {
       modalData: {},
       modalIndex: null,
 
-      simulation: {},
-
       selectedSimulationModels: []
     }
   }
@@ -70,24 +91,13 @@ class Simulation extends React.Component {
     });
 
     AppDispatcher.dispatch({
-      type: 'simulators/start-load',
+      type: 'simulationModels/start-load',
       token: this.state.sessionToken
     });
-  }
 
-  componentDidUpdate() {
-    if (this.state.simulation._id !== this.props.match.params.simulation) {
-      this.reloadSimulation();
-    }
-  }
-
-  reloadSimulation() {
-    // select simulation by param id
-    this.state.simulations.forEach((simulation) => {
-      if (simulation._id === this.props.match.params.simulation) {
-        // JSON.parse(JSON.stringify(obj)) = deep clone to make also copy of widget objects inside
-        this.setState({ simulation: JSON.parse(JSON.stringify(simulation)) });
-      }
+    AppDispatcher.dispatch({
+      type: 'simulators/start-load',
+      token: this.state.sessionToken
     });
   }
 
@@ -95,33 +105,34 @@ class Simulation extends React.Component {
     this.setState({ newModal : false });
 
     if (data) {
-      this.state.simulation.models.push(data);
+      data.simulation = this.state.simulation._id;
 
       AppDispatcher.dispatch({
-        type: 'simulations/start-edit',
-        data: this.state.simulation,
+        type: 'simulationModels/start-add',
+        data,
         token: this.state.sessionToken
       });
+
+      this.setState({ simulation: {} }, () => {
+        AppDispatcher.dispatch({
+          type: 'simulations/start-load',
+          data: this.props.match.params.simulation,
+          token: this.state.sessionToken
+        });
+      });
     }
   }
 
   closeDeleteModal = confirmDelete => {
-    console.log('closeDeleteModal called');
+    this.setState({ deleteModal: false });
 
     if (confirmDelete === false) {
-      this.setState({ deleteModal: false });
       return;
     }
 
-    // remove model from simulation
-    const simulation = this.state.simulation;
-    simulation.models.splice(this.state.modalIndex, 1);
-
-    this.setState({ deleteModal: false, simulation });
-
     AppDispatcher.dispatch({
-      type: 'simulations/start-edit',
-      data: simulation,
+      type: 'simulationModels/start-remove',
+      data: this.state.modalData,
       token: this.state.sessionToken
     });
   }
@@ -130,13 +141,9 @@ class Simulation extends React.Component {
     this.setState({ editModal : false });
 
     if (data) {
-      var simulation = this.state.simulation;
-      simulation.models[this.state.modalIndex] = data;
-      this.setState({ simulation: simulation });
-
       AppDispatcher.dispatch({
-        type: 'simulations/start-edit',
-        data: simulation,
+        type: 'simulationModels/start-edit',
+        data,
         token: this.state.sessionToken
       });
     }
@@ -146,13 +153,21 @@ class Simulation extends React.Component {
     this.setState({ importModal: false });
 
     if (data) {
-      this.state.simulation.models.push(data);
+      data.simulation = this.state.simulation._id;
       
       AppDispatcher.dispatch({
-        type: 'simulations/start-edit',
-        data: this.state.simulation,
+        type: 'simulationModels/start-add',
+        data,
         token: this.state.sessionToken
       });
+
+      this.setState({ simulation: {} }, () => {
+        AppDispatcher.dispatch({
+          type: 'simulations/start-load',
+          data: this.props.match.params.simulation,
+          token: this.state.sessionToken
+        });
+      });
     }
   }
 
@@ -231,19 +246,20 @@ class Simulation extends React.Component {
       <div className='section'>
         <h1>{this.state.simulation.name}</h1>
 
-        <Table data={this.state.simulation.models}>
+        <Table data={this.state.simulationModels}>
           <TableColumn checkbox onChecked={(index, event) => this.onSimulationModelChecked(index, event)} width='30' />
           <TableColumn title='Name' dataKey='name' />
           <TableColumn title='Simulator' dataKey='simulator' width='180' modifier={(simulator) => this.getSimulatorName(simulator)} />
-          <TableColumn title='Length' dataKey='length' width='100' />
+          <TableColumn title='Output' dataKey='outputLength' width='100' />
+          <TableColumn title='Input' dataKey='inputLength' width='100' />
           <TableColumn 
             title='' 
             width='100' 
             editButton 
             deleteButton 
             exportButton
-            onEdit={(index) => this.setState({ editModal: true, modalData: this.state.simulation.models[index], modalIndex: index })} 
-            onDelete={(index) => this.setState({ deleteModal: true, modalData: this.state.simulation.models[index], modalIndex: index })} 
+            onEdit={(index) => this.setState({ editModal: true, modalData: this.state.simulationModels[index], modalIndex: index })} 
+            onDelete={(index) => this.setState({ deleteModal: true, modalData: this.state.simulationModels[index], modalIndex: index })} 
             onExport={index => this.exportModel(index)}
           />
         </Table>
@@ -275,4 +291,4 @@ class Simulation extends React.Component {
   }
 }
 
-export default Container.create(Simulation);
+export default Container.create(Simulation, { withProps: true });

src/data-managers/simulation-models-data-manager.js

@@ -0,0 +1,24 @@
+/**
+ * File: simulation-models-data-manager.js
+ * Author: Markus Grigull <mgrigull@eonerc.rwth-aachen.de>
+ * Date: 20.04.2018
+ *
+ * This file is part of VILLASweb.
+ *
+ * VILLASweb is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * VILLASweb is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
+ ******************************************************************************/
+
+import RestDataManager from './rest-data-manager';
+
+export default new RestDataManager('simulationModel', '/models');

src/stores/simulation-model-store.js

@@ -0,0 +1,25 @@
+/**
+ * File: simulation-model-store.js
+ * Author: Markus Grigull <mgrigull@eonerc.rwth-aachen.de>
+ * Date: 20.04.2018
+ *
+ * This file is part of VILLASweb.
+ *
+ * VILLASweb is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * VILLASweb is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
+ ******************************************************************************/
+
+import ArrayStore from './array-store';
+import SimulationModelsDataManager from '../data-managers/simulation-models-data-manager';
+
+export default new ArrayStore('simulationModels', SimulationModelsDataManager);

src/stores/simulator-store.js

@@ -40,7 +40,7 @@ class SimulatorStore extends ArrayStore {
           if (endpoint != null && endpoint !== '') {
             SimulatorDataDataManager.open(endpoint, simulator._id);
           } else {
-            console.warn('Endpoint not found for simulator at ' + endpoint);
+            // console.warn('Endpoint not found for simulator at ' + endpoint);
             // console.log(simulator);
           }
         }