wip: dashboardA and widgets can be accessed but aren't rendered yet

src/app.js

@@ -146,6 +146,7 @@ class App extends React.Component {
               <div className={`app-content app-content-margin-left`}>
                 <Route exact path="/" component={Home} />
                 <Route path="/home" component={Home} />
+                <Route path="/exdashboard/:dashboard" component={Dashboard} />
                 <Route path="/dashboards/:dashboard" component={Dashboard} />
                 <Route exact path="/scenarios" component={Scenarios} />
                 <Route path="/scenarios/:scenario" component={Scenario} />

src/common/api/rest-api.js

@@ -54,6 +54,7 @@ function isNetworkError(err) {
 
 class RestAPI {
   get(url, token) {
+    console.log(url);
     return new Promise(function (resolve, reject) {
       var req = request.get(url);
 

src/common/array-store.js

@@ -68,7 +68,6 @@ class ArrayStore extends ReduceStore {
   reduce(state, action) {
     switch (action.type) {
       case this.type + '/start-load':
-
         if (Array.isArray(action.data)) {
           action.data.forEach((id) => {
             this.dataManager.load(id, action.token,action.param);
@@ -80,8 +79,14 @@ class ArrayStore extends ReduceStore {
 
       case this.type + '/loaded':
         if (Array.isArray(action.data)) {
+          console.log(" loaded Array: ");
+          console.log(action.data);
+          console.log(state);
           return this.updateElements(state, action.data);
         } else {
+          console.log("loaded single object: ");
+          console.log([action.data]);
+          console.log(state);
           return this.updateElements(state, [action.data]);
         }
 

src/common/data-managers/rest-data-manager.js

@@ -57,7 +57,8 @@ class RestDataManager {
       case 'load/add':
         if (param === null){
           if(id != null){
-            return this.url + '/' + id;
+            console.log("id != 0");
+            return this.makeURL(this.url + '/' + id);
           }
           else {
             return this.makeURL(this.url);
@@ -65,10 +66,10 @@ class RestDataManager {
         }
         else{
           if(id != null){
-            return this.url + '/' + id + '?' + param;
+            return this.makeURL(this.url + '/' + id + '?' + param);
           }
           else {
-            return this.makeURL(this.url) + '?' + param
+            return this.makeURL(this.url + '?' + param)
           }
         }
       case 'remove/update':
@@ -86,10 +87,11 @@ class RestDataManager {
 
   load(id, token = null,param = null) {
       if (id != null) {
+        console.log("rdm load was called");
         // load single object
         RestAPI.get(this.requestURL('load/add',id,param), token).then(response => {
           const data = this.filterKeys(response[this.type]);
-
+      
           AppDispatcher.dispatch({
             type: this.type + 's/loaded',
             data: data

src/dashboard/dashboard.js

@@ -27,7 +27,7 @@ import { Map } from 'immutable'
 
 //import Icon from '../common/icon';
 import Widget from '../widget/widget';
-import EditWidget from '../widget/edit-widget';
+//import EditWidget from '../widget/edit-widget';
 
 import WidgetContextMenu from './widget-context-menu';
 import WidgetToolbox from './widget-toolbox';
@@ -40,6 +40,7 @@ import ProjectStore from '../project/project-store';
 import SimulationStore from '../simulation/simulation-store';
 import SimulationModelStore from '../simulationmodel/simulation-model-store';
 import FileStore from '../file/file-store';
+import WidgetStore from '../widget/widget-store';
 import AppDispatcher from '../common/app-dispatcher';
 
 import 'react-contexify/dist/ReactContexify.min.css';
@@ -48,53 +49,100 @@ class Dashboard extends React.Component {
 
   static lastWidgetKey = 0;
   static getStores() {
-    return [ DashboardStore, ProjectStore, SimulationStore, SimulationModelStore, FileStore, UserStore ];
+    return [ DashboardStore, ProjectStore, SimulationStore, SimulationModelStore, FileStore, UserStore, WidgetStore ];
   }
 
   static calculateState(prevState, props) {
     if (prevState == null) {
       prevState = {};
     }
-
+    const sessionToken = UserStore.getState().token;
     let dashboard = Map();
-    let rawDashboard = DashboardStore.getState().find(v => v._id === props.match.params.dashboard);
-
+    console.log("dashboard calculate state was called: " + props.match.params.dashboard);
+    let dashboards = DashboardStore.getState()
+    let rawDashboard =  dashboards[props.match.params.dashboard - 1];
+    
+   
+    let str = JSON.stringify(rawDashboard, null, 4);
+    console.log(str);
     if (rawDashboard != null) {
       dashboard = Map(rawDashboard);
+      console.log("dashboard: " + dashboard);
 
-      // convert widgets list to a dictionary to be able to reference widgets
-      const widgets = {};
+      // convert widgets list to a dictionary to be able to reference widgets 
+      //let widgets = {};
 
-      for (let widget of dashboard.get('widgets')) {
-        widgets[this.getNewWidgetKey()] = widget;
+      let rawWidgets = WidgetStore.getState();
+      
+      if(rawWidgets.length === 0){
+        AppDispatcher.dispatch({
+          type: 'widgets/start-load',
+          token: sessionToken,
+          param: 'dashboardID=1'
+        });
       }
 
-      dashboard = dashboard.set('widgets', widgets);
+    
+      console.log("here are the widgets: ");
+      console.log(rawWidgets);
+        
+      dashboard = dashboard.set('widgets', rawWidgets);
 
-      // this.computeHeightWithWidgets(widgets);
+      
+     /* for(let widget of dashboard.get('widgets')){
+        console.log("load files got called")
+        console.log(widget);
+        AppDispatcher.dispatch({
+          type: 'files/start-load',
+          token: sessionToken,
+          param: 'objectID=' + widget.id + '&objectType=widget'
+        });
+      }
+     */
+      let widgets = {};
 
-      // this.setState({ dashboard: selectedDashboards, project: null });
+      for (let widget of dashboard.get('widgets')) {
+        widgets[this.lastWidgetKey] = widget;
+        this.lastWidgetKey++;
+      }
+      //ist das überhaupt nötiG??
+     /* if (this.state.dashboard.has('id') === false) {
+        AppDispatcher.dispatch({
+          type: 'dashboards/start-load',
+          data: this.props.match.params.dashboard,
+          token: this.state.sessionToken
+        });
+      }
+      
+      
+    //  this.computeHeightWithWidgets(widgets);
 
-      // AppDispatcher.dispatch({
-      //     type: 'projects/start-load',
-      //     data: selectedDashboard.get('project'),
-      //     token: this.state.sessionToken
-      // });
+      let selectedDashboards = dashboard; 
 
+    /* this.setState({ dashboard: selectedDashboards, project: null });
+
+       AppDispatcher.dispatch({
+           type: 'projects/start-load',
+           data: selectedDashboards.get('project'),
+           token: this.state.sessionToken
+       });
+*/
     }
+    
 
     let simulationModels = [];
-    if (prevState.simulation != null) {
-      simulationModels = SimulationModelStore.getState().filter(m => prevState.simulation.models.includes(m._id));
-    }
+    //if (prevState.simulation != null) {
+    //  simulationModels = SimulationModelStore.getState().filter(m => prevState.simulation.models.includes(m._id));
+    //}
 
     return {
+      rawDashboard,
       dashboard,
 
-      sessionToken: UserStore.getState().token,
-      projects: ProjectStore.getState(),
-      simulations: SimulationStore.getState(),
-      files: FileStore.getState(),
+      sessionToken: sessionToken,
+      projects: null, //ProjectStore.getState(),
+      simulations: null, //SimulationStore.getState(),
+      files: null, //FileStore.getState(),
 
       project: prevState.project || null,
       simulation: prevState.simulation || null,
@@ -102,7 +150,7 @@ class Dashboard extends React.Component {
       editing: prevState.editing || false,
       paused: prevState.paused || false,
 
-      editModal: prevState.editModal || false,
+      //editModal: prevState.editModal || false,
       modalData: prevState.modalData || null,
       modalIndex: prevState.modalIndex || null,
 
@@ -119,10 +167,10 @@ class Dashboard extends React.Component {
     return widgetKey;
   }
 
-
-  componentWillMount() {
+//!!!won't work anymore
+ /* componentDidMount() {
     //document.addEventListener('keydown', this.handleKeydown.bind(this));
-
+    console.log("problem in componentdidmount");
     if (this.state.dashboard.has('id') === false) {
       AppDispatcher.dispatch({
         type: 'dashboards/start-load',
@@ -137,7 +185,7 @@ class Dashboard extends React.Component {
       //document.removeEventListener('keydown', this.handleKeydown.bind(this));
   }
 
-  componentDidUpdate() {
+  /*componentDidUpdate() {
     if (this.state.dashboard._id !== this.props.match.params.dashboard) {
       this.reloadDashboard();
     }
@@ -167,7 +215,7 @@ class Dashboard extends React.Component {
         }
       });
     }
-  }
+  }*
 
   /*handleKeydown(e) {
     switch (e.key) {
@@ -183,8 +231,9 @@ class Dashboard extends React.Component {
         break;
       default:
     }
-  }*/
-
+  }
+  
+  }
   /*
   * Adapt the area's height with the position of the new widget.
   * Return true if the height increased, otherwise false.
@@ -210,6 +259,7 @@ class Dashboard extends React.Component {
   }
 
   reloadDashboard() {
+    console.log("Error: reloadDashboard was called");
     // select dashboard by param id
     this.state.dashboards.forEach((tempDashboard) => {
       if (tempDashboard._id === this.props.match.params.dashboard) {
@@ -287,9 +337,9 @@ class Dashboard extends React.Component {
   }
 
 
-  editWidget = (widget, index) => {
-    this.setState({ editModal: true, modalData: widget, modalIndex: index });
-  }
+  //editWidget = (widget, index) => {
+  //  this.setState({ editModal: true, modalData: widget, modalIndex: index });
+  //}
 
 
   closeEdit = data => {
@@ -378,7 +428,6 @@ class Dashboard extends React.Component {
           editing={this.state.editing}
           fullscreen={this.props.isFullscreen}
           paused={this.state.paused}
-          onEdit={this.startEditing}
           onSave={this.saveEditing}
           onCancel={this.cancelEditing}
           onFullscreen={this.props.toggleFullscreen}
@@ -413,7 +462,7 @@ class Dashboard extends React.Component {
           <WidgetContextMenu key={widgetKey} index={widgetKey} widget={widgets[widgetKey]} onEdit={this.editWidget} onDelete={this.deleteWidget} onChange={this.widgetChange} />
         ))}
 
-        <EditWidget sessionToken={this.state.sessionToken} show={this.state.editModal} onClose={this.closeEdit} widget={this.state.modalData} simulationModels={this.state.simulationModels} files={this.state.files} />
+        
       </div>
     </div>;
   }
@@ -421,3 +470,5 @@ class Dashboard extends React.Component {
 
 let fluxContainerConverter = require('../common/FluxContainerConverter');
 export default Fullscreenable()(Container.create(fluxContainerConverter.convert(Dashboard), { withProps: true }));
+//<EditWidget sessionToken={this.state.sessionToken} show={this.state.editModal} onClose={this.closeEdit} widget={this.state.modalData} simulationModels={this.state.simulationModels} files={this.state.files} />
+//onEdit={this.startEditing}

src/dashboard/exdashboard.js

@@ -4,7 +4,9 @@ import DashboardStore from './dashboard-store';
 import AppDispatcher from '../common/app-dispatcher';
 import Table from '../common/table';
 import TableColumn from '../common/table-column';
-import UserStore from '../user/user-store'
+import UserStore from '../user/user-store';
+import { Button } from 'react-bootstrap';
+import Icon from '../common/icon';
 
 
 
@@ -40,20 +42,37 @@ class ExDashboard extends Component {
     });
   }
   
+  loadDash(){
+    console.log('bis hierhin gekommen');
+    AppDispatcher.dispatch({
+      type: 'dashboards/start-load',
+      token: this.state.tokenState,
+      param: 'scenarioID=1'
+    });
+  }
 
 
 
   render() {
+    const buttonStyle = {
+      marginLeft: '10px'
+    };
 
     return (
+      
       <div className='section'>
+      
         <h1>Dashboards</h1>
 
         <Table data={this.state.dashboards}>
           <TableColumn title='Name' dataKey='name' link='/exdashboard/' linkKey='id' />
-          <TableColumn title='Grid' dataKey='grid' link='/exdashboard/' linkKey='id' />
+          <TableColumn title='Grid' dataKey='grid' link='/edashboard/' linkKey='id' />
           <TableColumn title='ScenarioID' dataKey='scenarioID' link='/exdashboard/' linkKey='id' />
         </Table>
+
+        <div style={{ float: 'right' }}>
+          <Button onClick={() => this.loadDash} style={buttonStyle}><Icon icon="plus" /> Add</Button>
+        </div>
       </div>
     );
   }

src/scenario/scenario.js

@@ -57,6 +57,7 @@ class Scenario extends React.Component {
       });
 
       scenario = {};
+      console.log(scenario);
     }
 
     // load models

src/user/user.js

@@ -53,7 +53,7 @@ class User extends Component {
 
       user = {};
     }
-
+    console.log(user);
     console.log("extracted user 2: " + user.username);
 
     return {

src/widget/widget-store.js

@@ -0,0 +1,4 @@
+import ArrayStore from '../common/array-store';
+import WidgetsDataManager from './widgets-data-manager';
+
+export default new ArrayStore('widgets', WidgetsDataManager);

src/widget/widgets-data-manager.js

@@ -0,0 +1,3 @@
+import RestDataManager from '../common/data-managers/rest-data-manager';
+
+export default new RestDataManager('widget', '/widgets');