Merge commit '972416992d82f0a4c727808a7941cf53a74d69a6'

.dockerignore

@@ -0,0 +1,4 @@
+node_modules/
+nginx/
+doc/
+build/

Dockerfile

@@ -0,0 +1,10 @@
+FROM node:latest
+
+RUN mkdir /react
+RUN mkdir /result
+
+VOLUME /result
+
+WORKDIR /react
+
+CMD npm install && npm run build && cp -R /react/build/* /result/

README.md

@@ -22,6 +22,8 @@ Additional libraries are used, for a complete list see package.json.
 
 To start the website locally run `npm start`. This will open a local webserver serving the _frontend_. To make the website work, you still need to start at least the VILLASweb-backend (See repository for information).
 
+The default user and password are configured in the `config.js` file of the _backend_. By default they are: __admin__ / __admin__.
+
 ## Copyright
 
 2017, Institute for Automation of Complex Power Systems, EONERC  
@@ -55,4 +57,4 @@ For other licensing options please consult [Prof. Antonello Monti](mailto:amonti
 
 [Institute for Automation of Complex Power Systems (ACS)](http://www.acs.eonerc.rwth-aachen.de)  
 [EON Energy Research Center (EONERC)](http://www.eonerc.rwth-aachen.de)  
-[RWTH University Aachen, Germany](http://www.rwth-aachen.de)  
+[RWTH University Aachen, Germany](http://www.rwth-aachen.de)  

docker-compose.yml

@@ -1,24 +1,39 @@
 version: "2"
 
 services:
-  frontend:
+  webserver:
     image: nginx:stable
     volumes:
       - ./nginx:/etc/nginx/conf.d/
-      - ./build:/www
+      - website-volume:/www
     links:
       - backend
     ports:
       - "80:80"
       - "443:443"
+    restart: always
+
+  frontend:
+    build: .
+    volumes:
+      - ./:/react
+      - website-volume:/result
 
   backend:
     image: villasweb-backend
     links:
       - database
+    environment:
+      - NODE_ENV=production
+    restart: always
 
   database:
     image: mongo:latest
     volumes:
-      - /opt/database:/data/db
+      - data-volume:/data/db
+    restart: always
+    user: mongodb
 
+volumes:
+  data-volume:
+  website-volume:

nginx/villas.conf

@@ -7,10 +7,10 @@ server {
     proxy_redirect off;
     proxy_set_header Host $http_host;
     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-    
+
     # rewrite url to exclude /api on context broker side
-    rewrite ^/api/?(.*) /api/v1/$1 break;
-    
+    rewrite ^/api/?(.*) /api/$1 break;
+
     proxy_pass http://backend:4000/;
   }
 

package.json

@@ -2,6 +2,7 @@
   "name": "villasweb-frontend",
   "version": "0.1.0",
   "private": true,
+  "proxy": "http://localhost:4000",
   "dependencies": {
     "bootstrap": "^3.3.7",
     "classnames": "^2.2.5",

src/api/rest-api.js

@@ -21,6 +21,36 @@
 
 import request from 'superagent/lib/client';
 import Promise from 'es6-promise';
+import NotificationsDataManager from '../data-managers/notifications-data-manager';
+
+
+// TODO: Add this to a central pool of notifications
+const SERVER_NOT_REACHABLE_NOTIFICATION = {
+          title: 'Server not reachable',
+          message: 'The server could not be reached. Please try again later.',
+          level: 'error'
+        };
+
+const REQUEST_TIMEOUT_NOTIFICATION = {
+          title: 'Request timeout',
+          message: 'Request timed out. Please try again later.',
+          level: 'error'
+        };
+
+// Check if the error was due to network failure, timeouts, etc. 
+// Can be used for the rest of requests
+function isNetworkError(err) {
+  let result = false;
+
+  // If not status nor response fields, it is a network error. TODO: Handle timeouts
+  if (err.status == null || err.response == null) {
+    result = true;
+    
+    let notification = err.timeout? REQUEST_TIMEOUT_NOTIFICATION : SERVER_NOT_REACHABLE_NOTIFICATION;
+    NotificationsDataManager.addNotification(notification);
+  }
+  return result;
+}
 
 class RestAPI {
   get(url, token) {
@@ -43,14 +73,17 @@ class RestAPI {
 
   post(url, body, token) {
     return new Promise(function (resolve, reject) {
-      var req = request.post(url).send(body);
+      var req = request.post(url).send(body).timeout({ response: 5000 }); // Simple response start timeout (3s)
 
       if (token != null) {
         req.set('x-access-token', token);
       }
-
+      
       req.end(function (error, res) {
         if (res == null || res.status !== 200) {
+
+          error.handled = isNetworkError(error);
+
           reject(error);
         } else {
           resolve(JSON.parse(res.text));

src/components/dialog/edit-user.js

@@ -0,0 +1,111 @@
+/**
+ * File: edit-user.js
+ * Author: Ricardo Hernandez-Montoya <rhernandez@gridhound.de>
+ * Date: 02.05.2017
+ *
+ * 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 React, { Component, PropTypes } from 'react';
+import { FormGroup, FormControl, ControlLabel } from 'react-bootstrap';
+
+import Dialog from './dialog';
+
+class EditUserDialog extends Component {
+  static propTypes = {
+    show: PropTypes.bool.isRequired,
+    onClose: PropTypes.func.isRequired,
+    user: PropTypes.object.isRequired
+  };
+
+  valid: true;
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      username: '',
+      mail: '',
+      role: '',
+      _id: ''
+    }
+  }
+
+  onClose(canceled) {
+    if (canceled === false) {
+      this.props.onClose(this.state);
+    } else {
+      this.props.onClose();
+    }
+  }
+
+  handleChange(e) {
+    this.setState({ [e.target.id]: e.target.value });
+  }
+
+  resetState() {
+    this.setState({
+      username: this.props.user.username,
+      mail: this.props.user.mail,
+      role: this.props.user.role,
+      _id: this.props.user._id
+    });
+  }
+
+  validateForm(target) {
+    // check all controls
+    var username = true;
+
+    if (this.state.username === '') {
+      username = false;
+    }
+
+    this.valid = username;
+
+    // return state to control
+    if (target === 'username') return username ? "success" : "error";
+
+    return "success";
+  }
+
+  render() {
+    return (
+      <Dialog show={this.props.show} title="Edit user" buttonTitle="save" onClose={(c) => this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}>
+        <form>
+          <FormGroup controlId="username" validationState={this.validateForm('username')}>
+            <ControlLabel>Username</ControlLabel>
+            <FormControl type="text" placeholder="Enter username" value={this.state.username} onChange={(e) => this.handleChange(e)} />
+            <FormControl.Feedback />
+          </FormGroup>
+          <FormGroup controlId="mail">
+            <ControlLabel>E-mail</ControlLabel>
+            <FormControl type="text" placeholder="Enter e-mail" value={this.state.mail} onChange={(e) => this.handleChange(e)} />
+          </FormGroup>
+          <FormGroup controlId="role" validationState={this.validateForm('role')}>
+            <ControlLabel>Role</ControlLabel>
+            <FormControl componentClass="select" placeholder="Select role" value={this.state.role} onChange={(e) => this.handleChange(e)}>
+              <option key='1' value='admin'>Administrator</option>
+              <option key='2' value='user'>User</option>
+              <option key='3' value='guest'>Guest</option>
+            </FormControl>
+          </FormGroup>
+        </form>
+      </Dialog>
+    );
+  }
+}
+
+export default EditUserDialog;

src/components/dialog/new-user.js

@@ -0,0 +1,119 @@
+/**
+ * File: new-user.js
+ * Author: Ricardo Hernandez-Montoya <rhernandez@gridhound.de>
+ * Date: 02.05.2017
+ *
+ * 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 React, { Component, PropTypes } from 'react';
+import { FormGroup, FormControl, ControlLabel, HelpBlock } from 'react-bootstrap';
+
+import Dialog from './dialog';
+
+class NewUserDialog extends Component {
+  static propTypes = {
+    show: PropTypes.bool.isRequired,
+    onClose: PropTypes.func.isRequired
+  };
+
+  valid: false;
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      username: '',
+      mail: '',
+      role: 'admin',
+      password: ''
+    };
+  }
+
+  onClose(canceled) {
+    if (canceled === false) {
+      this.props.onClose(this.state);
+    } else {
+      this.props.onClose();
+    }
+  }
+
+  handleChange(e) {
+    this.setState({ [e.target.id]: e.target.value });
+  }
+
+  resetState() {
+    this.setState({
+      username: '',
+      mail: '',
+      role: 'admin',
+      password: ''
+    });
+  }
+
+  validateForm(target) {
+    // check all controls
+    let username = this.state.username !== '' && this.state.username.length >= 3;
+    let password = this.state.password !== '';
+
+    this.valid =  username && password;
+
+    // return state to control
+    switch(target) {
+      case 'username':
+        return username ? "success" : "error";
+      case 'password':
+        return password ? "success" : "error";
+      default:
+        return "success";
+    }
+  }
+
+  render() {
+    return (
+      <Dialog show={this.props.show} title="New user" buttonTitle="Add" onClose={(c) => this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}>
+        <form>
+          <FormGroup controlId="username" validationState={this.validateForm('username')}>
+            <ControlLabel>Username</ControlLabel>
+            <FormControl type="text" placeholder="Enter username" value={this.state.name} onChange={(e) => this.handleChange(e)} />
+            <FormControl.Feedback />
+            <HelpBlock>Min 3 characters.</HelpBlock>
+          </FormGroup>
+          <FormGroup controlId="mail">
+            <ControlLabel>E-mail</ControlLabel>
+            <FormControl type="text" placeholder="Enter e-mail" value={this.state.mail} onChange={(e) => this.handleChange(e)} />
+            <FormControl.Feedback />
+          </FormGroup>
+          <FormGroup controlId="password" validationState={this.validateForm('password')}>
+            <ControlLabel>Password</ControlLabel>
+            <FormControl type="text" placeholder="Enter password" value={this.state.password} onChange={(e) => this.handleChange(e)} />
+            <FormControl.Feedback />
+          </FormGroup>
+          <FormGroup controlId="role" validationState={this.validateForm('role')}>
+            <ControlLabel>Role</ControlLabel>
+            <FormControl componentClass="select" placeholder="Select role" value={this.state.role} onChange={(e) => this.handleChange(e)}>
+              <option key='1' value='admin'>Administrator</option>
+              <option key='2' value='user'>User</option>
+              <option key='3' value='guest'>Guest</option>
+            </FormControl>
+          </FormGroup>
+        </form>
+      </Dialog>
+    );
+  }
+}
+
+export default NewUserDialog;

src/components/menu-sidebar.js

@@ -29,11 +29,14 @@ class SidebarMenu extends Component {
         <h2>Menu</h2>
 
         <ul>
-          <li><Link to="/home" activeClassName="active">Home</Link></li>
-          <li><Link to="/projects" activeClassName="active">Projects</Link></li>
-          <li><Link to="/simulations" activeClassName="active">Simulations</Link></li>
-          <li><Link to="/simulators" activeClassName="active">Simulators</Link></li>
-          <li><Link to="/logout">Logout</Link></li>
+          <li><Link to="/home" activeClassName="active" title="Home">Home</Link></li>
+          <li><Link to="/projects" activeClassName="active" title="Projects">Projects</Link></li>
+          <li><Link to="/simulations" activeClassName="active" title="Simulations">Simulations</Link></li>
+          <li><Link to="/simulators" activeClassName="active" title="Simulators">Simulators</Link></li>
+          { this.props.currentRole === 'admin' ? 
+              <li><Link to="/users" activeClassName="active" title="User Management">User Management</Link></li> : ''
+          }
+          <li><Link to="/logout" title="Logout">Logout</Link></li>
         </ul>
       </div>
     );

src/components/table.js

@@ -29,6 +29,7 @@ class CustomTable extends Component {
   constructor(props) {
     super(props);
 
+    this.activeInput = null;
     this.state = {
       rows: [],
       editCell: [ -1, -1 ]
@@ -125,6 +126,23 @@ class CustomTable extends Component {
     this.setState({ rows: rows });
   }
 
+  componentDidUpdate() {
+    // A cell will not be selected at initial render, hence no need to call this in 'componentDidMount'
+    if (this.activeInput) {
+      this.activeInput.focus();
+    }
+  }
+
+  onCellFocus(index) {
+    // When a cell focus is detected, update the current state in order to uncover the input element
+    this.setState({ editCell: [ index.cell, index.row ]});
+  }
+
+  cellLostFocus() {
+    // Reset cell selection state
+    this.setState({ editCell: [ -1, -1 ] });
+  }
+
   render() {
     // get children
     var children = this.props.children;
@@ -140,23 +158,41 @@ class CustomTable extends Component {
           </tr>
         </thead>
         <tbody>
-          {this.state.rows.map((row, rowIndex) => (
-            <tr key={rowIndex}>
-              {row.map((cell, cellIndex) => (
-                <td key={cellIndex} onClick={children[cellIndex].props.inlineEditable === true ? (event) => this.onClick(event, rowIndex, cellIndex) : () => {}}>
-                  {(this.state.editCell[0] === cellIndex && this.state.editCell[1] === rowIndex ) ? (
-                    <FormControl type="text" value={cell} onChange={(event) => children[cellIndex].props.onInlineChange(event, rowIndex, cellIndex)} />
-                  ) : (
-                    <span>
-                      {cell.map((element, elementIndex) => (
-                        <span key={elementIndex}>{element}</span>
-                      ))}
-                    </span>
-                  )}
-                </td>
-              ))}
-            </tr>
-          ))}
+          {
+            this.state.rows.map((row, rowIndex) => (
+              <tr key={rowIndex}>
+                {
+                  row.map((cell, cellIndex) => {
+
+                    let isCellInlineEditable = children[cellIndex].props.inlineEditable === true;
+
+                    let tabIndex = isCellInlineEditable? 0 : -1;
+
+                    let evtHdls = isCellInlineEditable ? {
+                      onCellClick: (event) => this.onClick(event, rowIndex, cellIndex),
+                      onCellFocus: () => this.onCellFocus({cell: cellIndex, row: rowIndex}),
+                      onCellBlur: () => this.cellLostFocus()
+                    } : {
+                      onCellClick: () => {},
+                      onCellFocus: () => {},
+                      onCellBlur: () => {}
+                    };
+
+                    return (<td key={cellIndex} tabIndex={tabIndex} onClick={ evtHdls.onCellClick } onFocus={ evtHdls.onCellFocus } onBlur={ evtHdls.onCellBlur }>
+                      {(this.state.editCell[0] === cellIndex && this.state.editCell[1] === rowIndex ) ? (
+                        <FormControl type="text" value={cell} onChange={(event) => children[cellIndex].props.onInlineChange(event, rowIndex, cellIndex)} inputRef={ref => { this.activeInput = ref; }} />
+                      ) : (
+                        <span>
+                          {cell.map((element, elementIndex) => (
+                            <span key={elementIndex}>{element}</span>
+                          ))}
+                        </span>
+                      )}
+                    </td>)
+                  })
+                }
+              </tr>))
+          }
         </tbody>
       </Table>
     );

src/containers/app.js

@@ -76,9 +76,11 @@ class App extends Component {
       }
     }
 
+    let currentUser = UserStore.getState().currentUser;
+
     return {
       simulations: SimulationStore.getState(),
-      currentUser: UserStore.getState().currentUser,
+      currentRole: currentUser? currentUser.role : '',
       token: UserStore.getState().token,
 
       runningSimulators: simulators
@@ -183,10 +185,12 @@ class App extends Component {
         <NotificationSystem ref="notificationSystem" />
 
         <Header />
-        <SidebarMenu />
 
-        <div className="app-content">
-          {children}
+        <div className="app-body">
+          <SidebarMenu currentRole={ this.state.currentRole }/>
+          <div className="app-content">
+            {children}
+          </div>
         </div>
 
         <Footer />

src/containers/users.js

@@ -0,0 +1,141 @@
+/**
+ * File: users.js
+ * Author: Ricardo Hernandez-Montoya <rhernandez@gridhound.de>
+ * Date: 02.05.2017
+ *
+ * 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 React, { Component } from 'react';
+import { Container } from 'flux/utils';
+import { Button, Modal, Glyphicon } from 'react-bootstrap';
+
+import AppDispatcher from '../app-dispatcher';
+import UserStore from '../stores/user-store';
+import UsersStore from '../stores/users-store';
+
+import Table from '../components/table';
+import TableColumn from '../components/table-column';
+import NewUserDialog from '../components/dialog/new-user';
+import EditUserDialog from '../components/dialog/edit-user';
+
+class Users extends Component {
+  static getStores() {
+    return [ UserStore, UsersStore ];
+  }
+
+  static calculateState(prevState, props) {
+
+    let tokenState = UserStore.getState().token;
+
+    // If there is a token available and this method was called as a result of loading users
+    if (!prevState && tokenState) {
+      AppDispatcher.dispatch({
+        type: 'users/start-load',
+        token: tokenState
+      });
+    }
+
+    return {
+      token: tokenState,
+      users: UsersStore.getState(),
+
+      newModal: false,
+      editModal: false,
+      deleteModal: false,
+      modalData: {}
+    };
+  }
+
+  closeNewModal(data) {
+    this.setState({ newModal: false });
+
+    if (data) {
+      AppDispatcher.dispatch({
+        type: 'users/start-add',
+        data: data,
+        token: this.state.token
+      });
+    }
+  }
+
+  confirmDeleteModal() {
+    this.setState({ deleteModal: false });
+
+    AppDispatcher.dispatch({
+      type: 'users/start-remove',
+      data: this.state.modalData,
+      token: this.state.token
+    });
+  }
+
+  closeEditModal(data) {
+    this.setState({ editModal: false });
+
+    if (data) {
+      AppDispatcher.dispatch({
+        type: 'users/start-edit',
+        data: data,
+        token: this.state.token
+      });
+    }
+  }
+
+  getHumanRoleName(role_key) {
+    const HUMAN_ROLE_NAMES = {admin: 'Administrator', user: 'User', guest: 'Guest'};
+    
+    return HUMAN_ROLE_NAMES.hasOwnProperty(role_key)? HUMAN_ROLE_NAMES[role_key] : '';
+  }
+
+  render() {
+
+    return (
+      <div>
+        <h1>Users</h1>
+
+        <Table data={this.state.users}>
+          <TableColumn title='Username' width='150' dataKey='username' />
+          <TableColumn title='E-mail' dataKey='mail'  />
+          <TableColumn title='Role' dataKey='role'   modifier={(role) => this.getHumanRoleName(role)} />
+          <TableColumn width='70' editButton deleteButton onEdit={index => this.setState({ editModal: true, modalData: this.state.users[index] })} onDelete={index => this.setState({ deleteModal: true, modalData: this.state.users[index] })} />
+        </Table>
+
+        <Button onClick={() => this.setState({ newModal: true })}><Glyphicon glyph='plus' /> User</Button>
+
+        <NewUserDialog show={this.state.newModal} onClose={(data) => this.closeNewModal(data)} />
+
+        <EditUserDialog show={this.state.editModal} onClose={(data) => this.closeEditModal(data)} user={this.state.modalData} />
+
+        <Modal show={this.state.deleteModal}>
+          <Modal.Header>
+            <Modal.Title>Delete user</Modal.Title>
+          </Modal.Header>
+
+          <Modal.Body>
+            Are you sure you want to delete the user <strong>'{this.state.modalData.username}'</strong>?
+          </Modal.Body>
+
+          <Modal.Footer>
+            <Button onClick={() => this.setState({ deleteModal: false})}>Cancel</Button>
+            <Button bsStyle='danger' onClick={() => this.confirmDeleteModal()}>Delete</Button>
+          </Modal.Footer>
+        </Modal>
+      </div>
+    );
+  }
+}
+
+export default Container.create(Users);

src/containers/visualization.js

@@ -170,18 +170,12 @@ class Visualization extends Component {
     this.setState({ visualization: visualization });
   }
 
-<<<<<<< HEAD
   widgetStatusChange(updated_widget, key) {
     // Widget changed internally, make changes effective then save them
     this.widgetChange(updated_widget, key, this.saveChanges);
   }
 
   widgetChange(updated_widget, key, callback = null) {
-    
-=======
-  widgetChange(updated_widget, key) {
-
->>>>>>> e0b7ddca551162e21d7f667c9ae2d6516493575f
     var widgets_update = {};
     widgets_update[key] =  updated_widget;
     var new_widgets = Object.assign({}, this.state.visualization.widgets, widgets_update);

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

@@ -22,7 +22,7 @@
 import RestAPI from '../api/rest-api';
 import AppDispatcher from '../app-dispatcher';
 
-const API_URL = 'http://localhost:4000/api/v1';
+const API_URL = '/api/v1';
 
 class RestDataManager {
   constructor(type, url, keyFilter) {
@@ -51,10 +51,10 @@ class RestDataManager {
     return object;
   }
 
-  load(id) {
+  load(id, token = null) {
     if (id != null) {
       // load single object
-      RestAPI.get(this.makeURL(this.url + '/' + id)).then(response => {
+      RestAPI.get(this.makeURL(this.url + '/' + id), token).then(response => {
         const data = this.filterKeys(response[this.type]);
 
         AppDispatcher.dispatch({
@@ -69,7 +69,7 @@ class RestDataManager {
       });
     } else {
       // load all objects
-      RestAPI.get(this.makeURL(this.url)).then(response => {
+      RestAPI.get(this.makeURL(this.url), token).then(response => {
         const data = response[this.type + 's'].map(element => {
           return this.filterKeys(element);
         });
@@ -87,11 +87,11 @@ class RestDataManager {
     }
   }
 
-  add(object) {
+  add(object, token = null) {
     var obj = {};
     obj[this.type] = this.filterKeys(object);
 
-    RestAPI.post(this.makeURL(this.url), obj).then(response => {
+    RestAPI.post(this.makeURL(this.url), obj, token).then(response => {
       AppDispatcher.dispatch({
         type: this.type + 's/added',
         data: response[this.type]
@@ -104,8 +104,8 @@ class RestDataManager {
     });
   }
 
-  remove(object) {
-    RestAPI.delete(this.makeURL(this.url + '/' + object._id)).then(response => {
+  remove(object, token = null) {
+    RestAPI.delete(this.makeURL(this.url + '/' + object._id), token).then(response => {
       AppDispatcher.dispatch({
         type: this.type + 's/removed',
         data: response[this.type],
@@ -119,11 +119,11 @@ class RestDataManager {
     });
   }
 
-  update(object) {
+  update(object, token = null) {
     var obj = {};
     obj[this.type] = this.filterKeys(object);
 
-    RestAPI.put(this.makeURL(this.url + '/' + object._id), obj).then(response => {
+    RestAPI.put(this.makeURL(this.url + '/' + object._id), obj, token).then(response => {
       AppDispatcher.dispatch({
         type: this.type + 's/edited',
         data: response[this.type]

src/data-managers/simulator-data-data-manager.js

@@ -90,23 +90,20 @@ class SimulatorDataDataManager {
     // parse incoming message into usable data
     var data = new DataView(blob);
 
-    let OFFSET_ENDIAN = 1;
     let OFFSET_TYPE = 2;
     let OFFSET_VERSION = 4;
 
     var bits = data.getUint8(0);
-    var endian = (bits >> OFFSET_ENDIAN) & 0x1 ? 0 : 1;
-    var length = data.getUint16(0x02, endian);
+    var length = data.getUint16(0x02, 1);
 
     var values = new Float32Array(data.buffer, data.byteOffset + 0x10, length);
 
     return {
-      endian: endian,
       version: (bits >> OFFSET_VERSION) & 0xF,
       type: (bits >> OFFSET_TYPE) & 0x3,
       length: length,
-      sequence: data.getUint32(0x04, endian),
-      timestamp: data.getUint32(0x08, endian) * 1e3 + data.getUint32(0x0C, endian) * 1e-6,
+      sequence: data.getUint32(0x04, 1),
+      timestamp: data.getUint32(0x08, 1) * 1e3 + data.getUint32(0x0C, 1) * 1e-6,
       values: values
     };
   }

src/data-managers/simulators-data-manager.js

@@ -26,20 +26,26 @@ import AppDispatcher from '../app-dispatcher';
 function isRunning(simulator) {
   // get path to nodes.json and simulator name
   var path = simulator.endpoint.substring(0, simulator.endpoint.lastIndexOf('/'));
-  path += '/nodes.json';
-
   var name = simulator.endpoint.substring(simulator.endpoint.lastIndexOf('/') + 1);
 
+  var url = 'http://' + path + '/api/v1';
+  var body = {
+    action: 'nodes',
+    id: '1234' /// @todo use random generated id
+  };
+
   // send request
-  RestAPI.get('http://' + path).then(response => {
+  RestAPI.post(url, body).then(response => {
     // check if simulator is running
     simulator.running = false;
 
-    response.forEach(sim => {
-      if (sim.name === name) {
-        simulator.running = true;
-      }
-    });
+    if (response.id === body.id) {
+      response.response.forEach(sim => {
+        if (sim.name === name) {
+          simulator.running = true;
+        }
+      });
+    }
 
     AppDispatcher.dispatch({
       type: 'simulators/running',

src/data-managers/users-data-manager.js

@@ -46,7 +46,7 @@ class UsersDataManager extends RestDataManager {
     RestAPI.get(this.makeURL('/users/me'), token).then(response => {
       AppDispatcher.dispatch({
         type: 'users/current-user',
-        user: response
+        user: response.user
       });
     }).catch(error => {
       AppDispatcher.dispatch({
@@ -55,6 +55,7 @@ class UsersDataManager extends RestDataManager {
       });
     });
   }
+  
 }
 
 export default new UsersDataManager();

src/router.js

@@ -30,6 +30,7 @@ import Simulators from './containers/simulators';
 import Visualization from './containers/visualization';
 import Simulations from './containers/simulations';
 import Simulation from './containers/simulation';
+import Users from './containers/users';
 import Login from './containers/login';
 import Logout from './containers/logout';
 
@@ -50,6 +51,8 @@ class Root extends Component {
           <Route path='/simulations' component={Simulations} />
           <Route path='/simulations/:simulation' component={Simulation} />
 
+          <Route path='/users' component={Users} />
+
           <Route path='/logout' component={Logout} />
         </Route>
 

src/stores/array-store.js

@@ -69,10 +69,10 @@ class ArrayStore extends ReduceStore {
       case this.type + '/start-load':
         if (Array.isArray(action.data)) {
           action.data.forEach((id) => {
-            this.dataManager.load(id);
+            this.dataManager.load(id, action.token);
           });
         } else {
-          this.dataManager.load(action.data);
+          this.dataManager.load(action.data, action.token);
         }
         return state;
 
@@ -88,7 +88,7 @@ class ArrayStore extends ReduceStore {
         return state;
 
       case this.type + '/start-add':
-        this.dataManager.add(action.data);
+        this.dataManager.add(action.data, action.token);
         return state;
 
       case this.type + '/added':
@@ -99,7 +99,7 @@ class ArrayStore extends ReduceStore {
         return state;
 
       case this.type + '/start-remove':
-        this.dataManager.remove(action.data);
+        this.dataManager.remove(action.data, action.token);
         return state;
 
       case this.type + '/removed':
@@ -112,7 +112,7 @@ class ArrayStore extends ReduceStore {
         return state;
 
       case this.type + '/start-edit':
-        this.dataManager.update(action.data);
+        this.dataManager.update(action.data, action.token);
         return state;
 
       case this.type + '/edited':

src/stores/user-store.js

@@ -67,13 +67,19 @@ class UserStore extends ReduceStore {
         return Object.assign({}, state, { currentUser: null, token: null });
 
       case 'users/login-error':
-        // server offline
-        NotificationsDataManager.addNotification({
-          title: 'Server offline',
-          message: 'The server is offline. Please try again later.',
-          level: 'error'
-        });
-        return state;
+
+        if (action.error && !action.error.handled) {
+          // If it was an error and hasn't been handled, the credentials must have been wrong.
+          const WRONG_CREDENTIALS_NOTIFICATION = {
+            title: 'Incorrect credentials',
+            message: 'Please modify and try again.',
+            level: 'error'
+          }
+          NotificationsDataManager.addNotification(WRONG_CREDENTIALS_NOTIFICATION);
+
+        }
+
+        return state;    
 
       default:
         return state;

src/stores/users-store.js

@@ -0,0 +1,67 @@
+/**
+ * File: users-store.js
+ * Author: Markus Grigull <mgrigull@eonerc.rwth-aachen.de>
+ * Date: 15.03.2017
+ *
+ * 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 UsersDataManager from '../data-managers/users-data-manager';
+import NotificationsDataManager from '../data-managers/notifications-data-manager';
+
+class UsersStore extends ArrayStore {
+  constructor() {
+    super('users', UsersDataManager);
+  }
+
+  reduce(state, action) {
+    switch (action.type) {
+
+      case this.type + '/add-error':
+        if (action.error && !action.error.handled && action.error.response) {
+          // If it was an error and hasn't been handled, user could not be added
+          const USER_ADD_ERROR_NOTIFICATION = {
+            title: 'Failed to add new user',
+            message: action.error.response.body.message,
+            level: 'error'
+          }
+          NotificationsDataManager.addNotification(USER_ADD_ERROR_NOTIFICATION);
+
+        }
+        return super.reduce(state, action);
+
+      case this.type + '/edit-error':
+        if (action.error && !action.error.handled && action.error.response) {
+          // If it was an error and hasn't been handled, user couldn't not be updated
+          const USER_EDIT_ERROR_NOTIFICATION = {
+            title: 'Failed to edit user',
+            message: action.error.response.body.message,
+            level: 'error'
+          }
+          NotificationsDataManager.addNotification(USER_EDIT_ERROR_NOTIFICATION);
+
+        }
+        return super.reduce(state, action);
+
+      default:
+        return super.reduce(state, action);
+    }
+  }
+
+}
+
+export default new UsersStore();

src/styles/app.css

@@ -41,7 +41,6 @@ body {
 .app-header {
   width: 100%;
   height: 60px;
-
   padding: 10px 0 0 0;
 
   color: #527984;
@@ -50,7 +49,6 @@ body {
 
 .app-header h1 {
   width: 100%;
-
   margin: 0;
 
   text-align: center;
@@ -67,13 +65,27 @@ body {
   clear: both;
 }
 
-.app-content {
+.app-body {
+  /* Let sidebar grow and content occupy rest of the space */
   display: flex;
-  float: right;
-  min-height: calc(100vh - 140px);
-  width: calc(100% - 220px);
+  position: absolute;
+  top: 60px;
+  bottom: 60px;
+  right: 0px;
+  left: 0px;
 
-  margin: 20px 20px 0px 20px;
+  padding: 15px 5px 0px 5px;
+}
+
+.app-body div {
+  margin-left: 7px;
+  margin-right: 7px;
+}
+
+.app-content {
+  flex: 1 1 auto;
+  min-height: 400px;
+  height: 100%;
   padding: 15px 20px;
 
   background-color: #fff;
@@ -85,11 +97,7 @@ body {
  * Menus
  */
 .menu-sidebar {
-  float: left;
-
-  width: 160px;
-
-  margin: 20px 0 0 20px;
+  display: inline-table;
   padding: 20px 25px 20px 25px;
 
   background-color: #fff;
@@ -99,18 +107,35 @@ body {
 
 .menu-sidebar a {
   color: #4d4d4d;
+  text-decoration:none;
+}
+
+.menu-sidebar a:hover, .menu-sidebar a:focus {
+  text-decoration:none;
 }
 
 .active {
   font-weight: bold;
+  /*text-decoration:none;*/
 }
 
 .menu-sidebar ul {
   padding-top: 10px;
-
   list-style: none;
+  white-space: nowrap;  
 }
 
+.menu-sidebar a::after {
+  /* Trick to make menu items to be as wide as in bold */
+  display:block;
+  content:attr(title);
+  font-weight:bold;
+  height:1px;
+  color:transparent;
+  overflow:hidden;
+  visibility:hidden;
+  margin-bottom:-1px;
+}
 /**
  * Login form
  */