wip: create edit files option

src/dashboard/dashboard-button-group.js

@@ -65,11 +65,18 @@ class DashboardButtonGroup extends React.Component {
         );
       }
 
+      buttons.push(
+        <Button key={key++} onClick={this.props.onEditFiles} style={buttonStyle}>
+          <Icon icon="file" /> Edit Files
+        </Button>
+      );
+
       buttons.push(
         <Button key={key++} onClick={this.props.onEdit} style={buttonStyle}>
           <Icon icon="pen" /> Edit Layout
         </Button>
       );
+
     }
 
     return <div className='section-buttons-group-right'>

src/dashboard/dashboard.js

@@ -22,6 +22,7 @@ import classNames from 'classnames';
 
 import Widget from '../widget/widget';
 import EditWidget from '../widget/edit-widget/edit-widget';
+import EditFiles from '../file/edit-files'
 import WidgetContextMenu from '../widget/widget-context-menu';
 import WidgetToolbox from '../widget/widget-toolbox';
 import WidgetArea from '../widget/widget-area';
@@ -121,6 +122,8 @@ class Dashboard extends Component {
       paused: prevState.paused || false,
 
       editModal:  false,
+      filesEditModal: false,
+      filesEditSaveState: prevState.filesEditSaveState || [],
       modalData:  null,
       modalIndex:  null,
       widgetChangeData: [],
@@ -262,6 +265,63 @@ class Dashboard extends Component {
     this.setState({ editModal: true, modalData: widget, modalIndex: index });
   };
 
+  startEditFiles(){
+    let tempFiles = [];
+    this.state.files.forEach( file => {
+      tempFiles.push({
+        id: file.id,
+        name: file.name
+      });
+    })
+    this.setState({filesEditModal: true, filesEditSaveState: tempFiles});
+  }
+
+  closeEditFiles(files,deleteData,addData){
+
+    if(files || deleteData || addData){
+
+      if(addData.length > 0){
+        let formData = new FormData();
+        addData.forEach( file => {
+          delete file.id;
+          formData.append("file", file);
+        });
+        AppDispatcher.dispatch({
+          type: 'files/start-upload',
+          data: formData,
+          token: this.state.sessionToken,
+          scenarioID: this.state.dashboard.scenarioID,
+        });
+      }
+
+      if(deleteData.length > 0){
+        deleteData.forEach( file => {
+          AppDispatcher.dispatch({
+            type: 'files/start-remove',
+            data: file,
+            token: this.state.sessionToken
+          });
+        });
+      }
+    }
+    let formData = new FormData();
+    files.forEach( file => {
+      if(file.type === "application/octet-stream"){
+        let originalFile = this.state.filesEditSaveState.find(element => parseInt(element.id,10) === parseInt(file.id,10));
+        if(originalFile.name !== file.name){
+          formData.append("file", file);
+          AppDispatcher.dispatch({
+            type: 'files/start-edit',
+            token: this.state.sessionToken,
+            data: formData
+          });
+        }
+      }
+    })
+
+    this.setState({ filesEditModal: false, filesEditSaveState: [] });
+  }
+
   uploadFile(data,widget){
     AppDispatcher.dispatch({
       type: 'files/start-upload',
@@ -416,6 +476,7 @@ class Dashboard extends Component {
           onFullscreen={this.props.toggleFullscreen}
           onPause={this.pauseData.bind(this)}
           onUnpause={this.unpauseData.bind(this)}
+          onEditFiles = {this.startEditFiles.bind(this)}
         />
       </div>
 
@@ -473,6 +534,14 @@ class Dashboard extends Component {
           files={this.state.files}
         />
 
+        <EditFiles
+          sessionToken={this.state.sessionToken}
+          show={this.state.filesEditModal}
+          onClose={this.closeEditFiles.bind(this)}
+          signals={this.state.signals}
+          files={this.state.files}
+        />
+
 
       </div>
     </div>;

src/file/edit-files.js

@@ -0,0 +1,201 @@
+/**
+ * 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 from 'react';
+import {FormGroup, FormControl, FormLabel, Button} from 'react-bootstrap';
+
+
+import Dialog from '../common/dialogs/dialog';
+
+
+class EditFilesDialog extends React.Component {
+  valid = true;
+
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      files: [],  
+      selectedFile: {},
+      deleteData: [],
+      addData: [],
+      addFile: {}
+    };
+  }
+
+  static getDerivedStateFromProps(props, state){
+    return {
+      files: props.files
+    };
+  }
+
+
+
+  onClose(canceled) {
+    if (canceled === false) {
+      if (this.validChanges()) {
+        this.props.onClose(this.state.files,this.state.deleteData,this.state.addData);
+      }
+    } else {
+      this.props.onClose();
+    }
+  }
+//can you add file to state array?
+  addFile(){
+  let addFile = this.state.addFile[0];
+  addFile.id = this.state.files[this.state.files.length -1 ].id +1;
+   let tempFiles = this.state.files;
+   tempFiles.push(addFile);
+   this.setState({files: tempFiles});
+
+   let tempAddFiles = this.state.addData;
+   tempAddFiles.push(addFile);
+   this.setState({addData: tempAddFiles});
+
+   this.setState({addFile: {}});
+
+  }
+
+  deleteFile(){
+    let tempFiles = this.state.files;
+    let changeId = false;
+    for (let i = 0; i < tempFiles.length; i++) { 
+      if(changeId){
+        tempFiles[i-1] = tempFiles[i];
+      }
+      else if(tempFiles[i].id === this.state.selectedFile.id){
+        changeId = true;
+      }
+    } 
+    tempFiles.pop();
+    this.setState({files: tempFiles});
+
+    if(this.state.selectedFile.type !== "application/octet-stream"){
+      let tempAddFiles = this.state.addData;
+      let changePosition = false;
+      for (let i = 0; i < tempAddFiles.length; i++) {
+        if(changePosition){
+          tempAddFiles[i-1] = tempAddFiles[i];
+        } 
+        else if(tempAddFiles[i].id === this.state.selectedFile.id){
+          changePosition = true;
+        }
+      } 
+      tempAddFiles.pop();
+      this.setState({addData: tempAddFiles});
+    }
+    else{
+    let tempDeleteFiles = this.state.deleteData;
+    tempDeleteFiles.push(this.state.selectedFile);
+    this.setState({deleteData: tempDeleteFiles});
+    }
+
+
+  }
+
+  
+  handleChange(e) {
+    
+    if(e.target.id === "selectedFile"){
+    let tempFile = this.state.files.find(element => element.id === parseInt(e.target.value, 10));
+
+    this.setState({ [e.target.id]: tempFile });
+    }
+    else if(e.target.id === "name"){
+      if(this.state.selectedFile.type === "application/octet-stream"){
+    
+    let tempFile = this.state.selectedFile;
+    tempFile.name = e.target.value;
+    this.setState({selectedFile: tempFile});
+    let tempFileList = this.state.files;
+    tempFileList[tempFile.id - 1] = tempFile;
+    this.setState({files: tempFileList});
+      }
+      else {
+        const newFile = new File([this.state.selectedFile], e.target.value , {type: this.state.selectedFile.type});
+        this.setState({selectedFile: newFile});
+        let tempFileList = this.state.files;
+        newFile.id = this.state.selectedFile.id;
+        tempFileList[newFile.id - 1] = newFile;
+        this.setState({files: tempFileList});
+
+        let tempAddFiles = this.state.addData;
+        for (let i = 0; i < tempAddFiles.length; i++) { 
+          if(tempAddFiles[i].id === newFile.id){
+            tempAddFiles[i] = newFile;
+          }
+        } 
+        this.setState({addData: tempAddFiles});
+
+      }
+    
+    }
+
+
+  }
+
+  validChanges() {
+    return true;
+  }
+
+  render() {
+
+    let fileOptions = [];
+    if (this.state.files.length > 0){
+      fileOptions.push(
+        <option key = {0} default>Select image file</option>
+        )
+      fileOptions.push(this.state.files.map((file, index) => (
+        <option key={index+1} value={file.id}>{file.name}</option>
+      )))
+    } else {
+      fileOptions = <option disabled value style={{ display: 'none' }}>No files found, please upload one first.</option>
+    }
+    
+    return (
+      <Dialog show={this.props.show} title="Edit File" buttonTitle="Save" onClose={(c) => this.onClose(c)} valid={true}>
+        <div>
+          <FormGroup controlId="selectedFile">
+            <FormLabel>Image</FormLabel>
+            <FormControl
+              as="select"
+              value={this.state.selectedFile.id}
+              onChange={(e) => this.handleChange(e)}>{fileOptions} </FormControl>
+          </FormGroup>
+      
+          <FormGroup controlId={"name"}>
+            <FormLabel>{"File Name"}</FormLabel>
+            <FormControl type="text" placeholder={"Enter name"} value={this.state.selectedFile.name} onChange={e => this.handleChange(e)} />
+            <FormControl.Feedback />
+          </FormGroup>
+
+          <Button onClick={this.deleteFile.bind(this)}>Delete File</Button>
+
+          <FormGroup controlId="upload">
+            <FormLabel>Upload</FormLabel>
+            <FormControl type="file" onChange={(e) => this.setState({ addFile: e.target.files })} />
+          </FormGroup>
+
+          <Button size='sm' onClick={this.addFile.bind(this)}>Add File</Button>
+        </div>
+      </Dialog>
+    );
+  }
+}
+
+export default EditFilesDialog;