Merge branch 'image-widget-fix' into 'develop'

Image widget fix

See merge request !11

src/components/dialog/edit-widget-image-control.js

@@ -49,11 +49,12 @@ class EditImageWidgetControl extends Component {
         formData.append(key, this.state.fileList[key]);
       }
     }
-
+    
     // upload files
     AppDispatcher.dispatch({
       type: 'files/start-upload',
-      data: formData
+      data: formData,
+      token: this.props.sessionToken
     });
   }
 
@@ -63,9 +64,18 @@ class EditImageWidgetControl extends Component {
         <FormGroup controlId="file">
           <ControlLabel>Image</ControlLabel>
           <FormControl componentClass="select" value={this.state.widget.file} onChange={(e) => this.props.handleChange(e)}>
-            {this.props.files.map((file, index) => (
-              <option key={index} value={file._id}>{file.name}</option>
-            ))}
+            {
+              this.props.files.length === 0? (
+                <option disabled value style={{ display: 'none' }}>No images found, please upload one first.</option>
+              ) : (
+                this.props.files.reduce( (entries, file, index) => {
+                    entries.push(<option key={++index} value={file._id}>{file.name}</option>);
+                    return entries;
+                  }, [
+                    <option key={0} value=''>Please select one image</option>
+                  ])
+              )
+            }
           </FormControl>
         </FormGroup>
 

src/components/dialog/edit-widget.js

@@ -35,6 +35,7 @@ import EditWidgetOrientation from './edit-widget-orientation';
 
 class EditWidgetDialog extends Component {
   static propTypes = {
+    sessionToken: PropTypes.string.isRequired,
     show: PropTypes.bool.isRequired,
     onClose: PropTypes.func.isRequired
   };
@@ -109,7 +110,7 @@ class EditWidgetDialog extends Component {
         )
       } else if (this.props.widget.type === 'Image') {
         dialogControls.push(
-          <EditImageWidgetControl key={1} widget={this.state.temporal} files={this.props.files} validate={(id) => this.validateForm(id)} simulation={this.props.simulation} handleChange={(e, index) => this.handleChange(e, index)} />
+          <EditImageWidgetControl key={1} sessionToken={this.props.sessionToken} widget={this.state.temporal} files={this.props.files} validate={(id) => this.validateForm(id)} simulation={this.props.simulation} handleChange={(e, index) => this.handleChange(e, index)} />
         )
       } else if (this.props.widget.type === 'Gauge') {
         dialogControls.push(

src/components/widget-image.js

@@ -21,37 +21,33 @@
 
 import React, { Component } from 'react';
 
-const API_URL = 'http://localhost:4000/';
+import AppDispatcher from '../app-dispatcher';
+import config from '../config';
 
 class WidgetImage extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      file: null
-    };
-  }
 
   componentWillReceiveProps(nextProps) {
-    // check if file is set
-    if (nextProps.widget.file == null) {
-      this.setState({ file: null });
-      return;
-    }
 
-    // get file by id
-    nextProps.files.forEach(file => {
-      if (file._id === nextProps.widget.file) {
-        this.setState({ file: file });
-      }
-    });
+    // Query the image referenced by the widget (public request, no token required)
+    let widgetFile = nextProps.widget.file;
+    if (widgetFile && !nextProps.files.find( file => file._id === widgetFile ) ) {
+      
+      AppDispatcher.dispatch({
+        type: 'files/start-load',
+        data: widgetFile
+      });
+
+    }
   }
 
   render() {
+    
+    let file = this.props.files.find( (file) => file._id === this.props.widget.file );
+
     return (
-      <div>
-        {this.state.file &&
-          <img alt={this.state.file.name} style={{ width: this.props.widget.width - 20, height: this.props.widget.height - 20 }} src={API_URL + this.state.file.path} />
+      <div className="full">
+        {file &&
+          <img className="full" alt={file.name} src={config.publicPathBase + file.path} onDragStart={ (e) => e.preventDefault() } />
         }
       </div>
     );

src/config.js

@@ -0,0 +1,6 @@
+
+const config = {
+    publicPathBase: 'public/'
+}
+
+export default config

src/containers/visualization.js

@@ -30,6 +30,7 @@ import Dropzone from '../components/dropzone';
 import Widget from './widget';
 import EditWidget from '../components/dialog/edit-widget';
 
+import UserStore from '../stores/user-store';
 import VisualizationStore from '../stores/visualization-store';
 import ProjectStore from '../stores/project-store';
 import SimulationStore from '../stores/simulation-store';
@@ -40,7 +41,7 @@ import NotificationsFactory from '../data-managers/notifications-factory';
 
 class Visualization extends Component {
   static getStores() {
-    return [ VisualizationStore, ProjectStore, SimulationStore, FileStore ];
+    return [ VisualizationStore, ProjectStore, SimulationStore, FileStore, UserStore ];
   }
 
   static calculateState(prevState) {
@@ -49,6 +50,7 @@ class Visualization extends Component {
     }
 
     return {
+      sessionToken: UserStore.getState().token,
       visualizations: VisualizationStore.getState(),
       projects: ProjectStore.getState(),
       simulations: SimulationStore.getState(),
@@ -384,7 +386,7 @@ class Visualization extends Component {
               </ContextMenu>
           ))}
 
-          <EditWidget show={this.state.editModal} onClose={(data) => this.closeEdit(data)} widget={this.state.modalData} simulation={this.state.simulation} files={this.state.files} />
+          <EditWidget sessionToken={this.state.sessionToken} show={this.state.editModal} onClose={(data) => this.closeEdit(data)} widget={this.state.modalData} simulation={this.state.simulation} files={this.state.files} />
         </div>
       </div>
     );

src/containers/widget.js

@@ -26,6 +26,7 @@ import Rnd from 'react-rnd';
 import classNames from 'classnames';
 
 import AppDispatcher from '../app-dispatcher';
+import UserStore from '../stores/user-store';
 import SimulatorDataStore from '../stores/simulator-data-store';
 import FileStore from '../stores/file-store';
 
@@ -45,12 +46,16 @@ import '../styles/widgets.css';
 
 class Widget extends Component {
   static getStores() {
-    return [ SimulatorDataStore, FileStore ];
+    return [ SimulatorDataStore, FileStore, UserStore ];
   }
 
   static calculateState(prevState) {
+
+    let tokenState = UserStore.getState().token;
+
     if (prevState) {
       return {
+        sessionToken: tokenState,
         simulatorData: SimulatorDataStore.getState(),
         files: FileStore.getState(),
 
@@ -58,6 +63,7 @@ class Widget extends Component {
       }
     } else {
       return {
+        sessionToken: tokenState,
         simulatorData: SimulatorDataStore.getState(),
         files: FileStore.getState(),
 
@@ -72,11 +78,15 @@ class Widget extends Component {
     // Reference to the context menu element
     this.contextMenuTriggerViaDraggable = null;
   }
-
+  
   componentWillMount() {
-    AppDispatcher.dispatch({
-      type: 'files/start-load'
-    });
+    // If loading for the first time
+    if (this.state.sessionToken) {
+      AppDispatcher.dispatch({
+        type: 'files/start-load',
+        token: this.state.sessionToken
+      });
+    }
   }
 
   dragStop(event, ui) {
@@ -150,7 +160,6 @@ class Widget extends Component {
       borderedWidget = true;
     } else if (widget.type === 'Image') {
       element = <WidgetImage widget={widget} files={this.state.files} />
-      borderedWidget = true;
     } else if (widget.type === 'Button') {
       element = <WidgetButton widget={widget} editing={this.props.editing} />
     } else if (widget.type === 'NumberInput') {

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

@@ -28,13 +28,16 @@ class FilesDataManager extends RestDataManager {
     super('file', '/files');
   }
 
-  upload(file) {
-    RestAPI.upload(this.makeURL('/upload'), file).then(response => {
+  upload(file, token = null) {
+    RestAPI.upload(this.makeURL('/upload'), file, token).then(response => {
       AppDispatcher.dispatch({
         type: 'files/uploaded'
       });
-
-      console.log(response);
+      // Trigger a files reload
+      AppDispatcher.dispatch({
+        type: 'files/start-load',
+        token: token
+      });
     }).catch(error => {
       AppDispatcher.dispatch({
         type: 'files/upload-error',

src/stores/file-store.js

@@ -30,7 +30,7 @@ class FileStore extends ArrayStore {
   reduce(state, action) {
     switch (action.type) {
       case 'files/start-upload':
-        FilesDataManager.upload(action.data);
+        FilesDataManager.upload(action.data, action.token);
         return state;
 
       case 'files/uploaded':