added result table

src/scenario/scenario.js

@@ -36,6 +36,8 @@ import ImportDashboardDialog from "../dashboard/import-dashboard";
 import NewDashboardDialog from "../dashboard/new-dashboard";
 import EditDashboardDialog from '../dashboard/edit-dashboard';
 import EditFiles from '../file/edit-files'
+import NewResultDialog from '../result/new-result';
+import EditResultDialog from '../result/edit-result'
 
 import ICAction from '../ic/ic-action';
 import DeleteDialog from '../common/dialogs/delete-dialog';
@@ -43,13 +45,14 @@ import EditConfigDialog from "../componentconfig/edit-config";
 import EditSignalMapping from "../signal/edit-signal-mapping";
 import FileStore from "../file/file-store"
 import WidgetStore from "../widget/widget-store";
+import ResultStore from "../result/result-store"
 import { Redirect } from 'react-router-dom';
 import NotificationsDataManager from "../common/data-managers/notifications-data-manager";
 
 class Scenario extends React.Component {
 
   static getStores() {
-    return [ScenarioStore, ConfigStore, DashboardStore, ICStore, SignalStore, FileStore, WidgetStore];
+    return [ScenarioStore, ConfigStore, DashboardStore, ICStore, SignalStore, FileStore, WidgetStore, ResultStore];
   }
 
   static calculateState(prevState, props) {
@@ -68,7 +71,6 @@ class Scenario extends React.Component {
       });
     }
 
-
     // obtain all component configurations of a scenario
     let configs = ConfigStore.getState().filter(config => config.scenarioID === parseInt(props.match.params.scenario, 10));
     let editConfigModal = prevState.editConfigModal || false;
@@ -82,8 +84,11 @@ class Scenario extends React.Component {
       modalConfigIndex = index;
     }
 
+    let results = ResultStore.getState().filter(result => result.scenarioID === parseInt(props.match.params.scenario, 10)); 
+
     return {
       scenario,
+      results,
       sessionToken,
       configs,
       editConfigModal,
@@ -103,6 +108,11 @@ class Scenario extends React.Component {
       filesEditModal: prevState.filesEditModal || false,
       filesEditSaveState: prevState.filesEditSaveState || [],
 
+      editResultsModal: false,
+      modalResultsData: {},
+      modalResultsIndex: 0,
+      newResultModal: false,
+
       editOutputSignalsModal: prevState.editOutputSignalsModal || false,
       editInputSignalsModal: prevState.editInputSignalsModal || false,
 
@@ -375,6 +385,7 @@ class Scenario extends React.Component {
   closeNewDashboardModal(data) {
     this.setState({ newDashboardModal: false });
     if (data) {
+      // TODO: 'newDashboard' not used, check this
       let newDashboard = data;
       // add default grid value and scenarioID
       newDashboard["grid"] = 15;
@@ -495,11 +506,11 @@ class Scenario extends React.Component {
     // TODO do we need this if the dispatches happen in the dialog?
   }
 
-  signalsAutoConf(index){
+  signalsAutoConf(index) {
     let componentConfig = this.state.configs[index];
     // determine apiurl of infrastructure component
     let ic = this.state.ics.find(ic => ic.id === componentConfig.icID)
-    if(!ic.type.includes("villas-node")){
+    if (!ic.type.includes("villas-node")) {
       let message = "Cannot autoconfigure signals for IC type " + ic.type + " of category " + ic.category + ". This is only possible for gateway ICs of type 'VILLASnode'."
       console.warn(message);
 
@@ -516,8 +527,8 @@ class Scenario extends React.Component {
 
     AppDispatcher.dispatch({
       type: 'signals/start-autoconfig',
-      url: ic.apiurl+"/nodes",
-      socketname: splitWebsocketURL[splitWebsocketURL.length -1],
+      url: ic.apiurl + "/nodes",
+      socketname: splitWebsocketURL[splitWebsocketURL.length - 1],
       token: this.state.sessionToken,
       configID: componentConfig.id
     });
@@ -525,7 +536,7 @@ class Scenario extends React.Component {
   }
 
   uuidv4() {
-    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
       // eslint-disable-next-line
       var r = Math.random() * 16 | 0, v = c === 'x' ? r : (r & 0x3 | 0x8);
       return v.toString(16);
@@ -554,6 +565,41 @@ class Scenario extends React.Component {
     return fileList;
   }
 
+  /* ##############################################
+  * Result modification methods
+  ############################################## */
+
+  closeNewResultModal(data) {
+    console.log(this.state.results);
+    console.log(data);
+    this.setState({ newResultModal: false });
+    if (data) {
+      data["scenarioID"] = this.state.scenario.id;
+      AppDispatcher.dispatch({
+        type: 'results/start-add',
+        data,
+        token: this.state.sessionToken,
+      });
+    }
+  }
+
+  closeEditResultsModal(data) {
+    console.log(data);
+    this.setState({ editResultsModal: false });
+
+    if (data) {
+
+    }
+  }
+
+  downloadData(index) {
+    console.log(index);
+  }
+
+  closeDeleteResultsModal(e) {
+
+  }
+
   startPintura(configIndex) {
     let config = this.state.configs[configIndex];
 
@@ -585,6 +631,7 @@ class Scenario extends React.Component {
     }
   }
 
+  
   /* ##############################################
   * Render method
   ############################################## */
@@ -613,6 +660,40 @@ class Scenario extends React.Component {
       return <h1>Loading Scenario...</h1>;
     }
 
+    let resulttable;
+    if (this.state.results && this.state.results.length > 0) {
+      resulttable = <div>
+        <h2 style={tableHeadingStyle}>Results</h2>
+        <div>
+          <Table data={this.state.results}>
+            <TableColumn title='Result No.' dataKey='id' />
+            <TableColumn title='Description' dataKey='description' />
+            <TableColumn title='Created at' dataKey='createdAt' />
+            <TableColumn title='Last update' dataKey='updatedAt' />
+            <TableColumn
+              title='Files/Data'
+              dataKey='resultFileIDs'
+              linkKey='filebuttons'
+              width='300'
+              onDownload={(index) => this.downloadData(index)}
+            />
+            <TableColumn
+              title='Options'
+              width='200'
+              editButton
+              downloadAllButton
+              deleteButton
+              onEdit={index => this.setState({ editResultsModal: true, modalResultsData: this.state.results[index], modalResultsIndex: index })}
+              onDownloadAll={(index) => this.downloadData(this.state.results[index])}
+              onDelete={(index) => this.setState({ deleteResultsModal: true, modalResultsData: this.state.results[index], modalResultsIndex: index })}
+            />
+          </Table>
+
+          <EditResultDialog show={this.state.editResultsModal} result={this.state.modalResultsData} onClose={data => this.closeEditResultsModal(data)} />
+          <DeleteDialog title="results" name={this.state.modalDashboardData.name} show={this.state.deleteResultsModal} onClose={(e) => this.closeDeleteResultsModal(e)} />
+        </div></div>
+    }
+
     return <div className='section'>
       <div className='section-buttons-group-right'>
         <OverlayTrigger key={0} placement={'bottom'} overlay={<Tooltip id={`tooltip-${"file"}`}> Add, edit or delete files of scenario </Tooltip>} >
@@ -760,6 +841,12 @@ class Scenario extends React.Component {
 
       <DeleteDialog title="dashboard" name={this.state.modalDashboardData.name} show={this.state.deleteDashboardModal} onClose={(e) => this.closeDeleteDashboardModal(e)} />
 
+      {/*Result table*/}
+      {resulttable}
+      <div style={{ float: 'right' }}>
+        <Button onClick={() => this.setState({ newResultModal: true })} style={buttonStyle}><Icon icon="plus" /> Result</Button>
+      </div>
+      <NewResultDialog show={this.state.newResultModal} onClose={data => this.closeNewResultModal(data)} />
 
       {/*Scenario Users table*/}
       <h2 style={tableHeadingStyle}>Users sharing this scenario</h2>