diff --git a/src/dashboard/dashboard-button-group.js b/src/dashboard/dashboard-button-group.js index 9fda299..8baeece 100644 --- a/src/dashboard/dashboard-button-group.js +++ b/src/dashboard/dashboard-button-group.js @@ -65,11 +65,18 @@ class DashboardButtonGroup extends React.Component { ); } + buttons.push( + + ); + buttons.push( ); + } return
diff --git a/src/dashboard/dashboard.js b/src/dashboard/dashboard.js index 489f366..2ced5ef 100644 --- a/src/dashboard/dashboard.js +++ b/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)} />
@@ -473,6 +534,14 @@ class Dashboard extends Component { files={this.state.files} /> + + ; diff --git a/src/file/edit-files.js b/src/file/edit-files.js new file mode 100644 index 0000000..341c5cd --- /dev/null +++ b/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 . + ******************************************************************************/ + +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( + + ) + fileOptions.push(this.state.files.map((file, index) => ( + + ))) + } else { + fileOptions = + } + + return ( + this.onClose(c)} valid={true}> +
+ + Image + this.handleChange(e)}>{fileOptions} + + + + {"File Name"} + this.handleChange(e)} /> + + + + + + + Upload + this.setState({ addFile: e.target.files })} /> + + + +
+
+ ); + } +} + +export default EditFilesDialog;