diff --git a/src/dashboard/dashboard.js b/src/dashboard/dashboard.js index 2f558e0..cf4e656 100644 --- a/src/dashboard/dashboard.js +++ b/src/dashboard/dashboard.js @@ -272,60 +272,9 @@ class Dashboard extends Component { 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', - data: data, - token: this.state.sessionToken, - scenarioID: this.state.dashboard.scenarioID, - }); + closeEditFiles(){ + // TODO do we need this if the dispatches happen in the dialog? } closeEdit(data){ @@ -422,7 +371,7 @@ class Dashboard extends Component { }); } }) - + AppDispatcher.dispatch({ type: 'widgets/start-load', token: this.state.sessionToken, @@ -521,7 +470,6 @@ class Dashboard extends Component { sessionToken={this.state.sessionToken} show={this.state.editModal} onClose={this.closeEdit.bind(this)} - onUpload = {this.uploadFile.bind(this)} widget={this.state.modalData} signals={this.state.signals} files={this.state.files} @@ -533,6 +481,7 @@ class Dashboard extends Component { onClose={this.closeEditFiles.bind(this)} signals={this.state.signals} files={this.state.files} + scenarioID={this.state.dashboard.scenarioID} /> diff --git a/src/file/edit-files.js b/src/file/edit-files.js index 341c5cd..4df19d5 100644 --- a/src/file/edit-files.js +++ b/src/file/edit-files.js @@ -16,10 +16,11 @@ ******************************************************************************/ import React from 'react'; -import {FormGroup, FormControl, FormLabel, Button} from 'react-bootstrap'; - - +import {FormGroup, FormControl, Button, Col, ProgressBar} from 'react-bootstrap'; import Dialog from '../common/dialogs/dialog'; +import AppDispatcher from "../common/app-dispatcher"; +import Table from "../common/table"; +import TableColumn from "../common/table-column"; class EditFilesDialog extends React.Component { @@ -30,168 +31,133 @@ class EditFilesDialog extends React.Component { super(props); this.state = { - files: [], - selectedFile: {}, - deleteData: [], - addData: [], - addFile: {} + uploadFile: null, + uploadProgress: 0 }; } - 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); + this.props.onClose(); } } 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}); + selectUploadFile(event) { + this.setState({ uploadFile: event.target.files[0] }); + }; - this.setState({addFile: {}}); + startFileUpload(){ + // upload file + const formData = new FormData(); + formData.append("file", this.state.uploadFile); + + AppDispatcher.dispatch({ + type: 'files/start-upload', + data: formData, + token: this.props.sessionToken, + progressCallback: this.updateUploadProgress, + finishedCallback: this.clearProgress, + scenarioID: this.props.scenarioID, + }); + + // TODO make sure that dialog remains open after clicking "Upload" button + }; + + updateUploadProgress = (event) => { + this.setState({ uploadProgress: parseInt(event.percent.toFixed(), 10) }); + }; + + clearProgress = (newFileID) => { + /*if (this.props.onChange != null) { + let event = {} + event["target"] = {} + event.target["value"] = newFileID + this.props.onChange(event); + } + */ + this.setState({ uploadProgress: 0 }); + + + }; + + deleteFile(index){ + + let file = this.props.files[index] + AppDispatcher.dispatch({ + type: 'files/start-remove', + data: file, + token: this.props.sessionToken + }); + + // TODO make sure that dialog remains open after clicking delete button } - 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){ + if (this.props.files.length > 0){ fileOptions.push( ) - fileOptions.push(this.state.files.map((file, index) => ( + fileOptions.push(this.props.files.map((file, index) => ( ))) } else { fileOptions = } - + + const progressBarStyle = { + marginLeft: '100px', + marginTop: '-40px' + }; + return ( - this.onClose(c)} valid={true}> +
- - Image + + + + + + this.deleteFile(index)} + /> +
+ + + this.handleChange(e)}>{fileOptions} - - - - {"File Name"} - this.handleChange(e)} /> - + disabled={this.props.disabled} + type='file' + onChange={(event) => this.selectUploadFile(event)} /> - - - - Upload - this.setState({ addFile: e.target.files })} /> + + - + + +
); diff --git a/src/widget/edit-widget/edit-widget-control-creator.js b/src/widget/edit-widget/edit-widget-control-creator.js index 78bff0c..5c12734 100644 --- a/src/widget/edit-widget/edit-widget-control-creator.js +++ b/src/widget/edit-widget/edit-widget-control-creator.js @@ -33,7 +33,7 @@ import EditWidgetMinMaxControl from './edit-widget-min-max-control'; import EditWidgetHTMLContent from './edit-widget-html-content'; import EditWidgetParametersControl from './edit-widget-parameters-control'; -export default function CreateControls(widgetType = null, widget = null, sessionToken = null, files = null, signals, handleChange, onUpload) { +export default function CreateControls(widgetType = null, widget = null, sessionToken = null, files = null, signals, handleChange) { // Use a list to concatenate the controls according to the widget type var DialogControls = []; @@ -84,7 +84,7 @@ export default function CreateControls(widgetType = null, widget = null, session // Restrict to only image file types (MIME) //let imageControlFiles = files == null? [] : files.filter(file => file.type.includes('image')); DialogControls.push( - handleChange(e)} onUpload={(f,i) => onUpload(f,i)} />, + handleChange(e)} />, handleChange(e)} /> ); break; @@ -149,7 +149,7 @@ export default function CreateControls(widgetType = null, widget = null, session // Restrict to only xml files (MIME) //let topologyControlFiles = files == null? [] : files.filter( file => file.type.includes('xml')); DialogControls.push( - handleChange(e) } onUpload={(f,i) => onUpload(f,i)} /> + handleChange(e) } /> ); break; diff --git a/src/widget/edit-widget/edit-widget-file-control.js b/src/widget/edit-widget/edit-widget-file-control.js index 298ba01..a55aa23 100644 --- a/src/widget/edit-widget/edit-widget-file-control.js +++ b/src/widget/edit-widget/edit-widget-file-control.js @@ -16,7 +16,7 @@ ******************************************************************************/ import React from 'react'; -import {FormGroup, FormControl, FormLabel, Button, ProgressBar} from 'react-bootstrap'; +import {FormGroup, FormControl, FormLabel} from 'react-bootstrap'; class EditFileWidgetControl extends React.Component { @@ -24,41 +24,16 @@ class EditFileWidgetControl extends React.Component { super(props); this.state = { - widget: { }, files: [], - fileList: null, - progress: 0 }; } static getDerivedStateFromProps(props, state){ return { - widget: props.widget, files: props.files.filter(file => file.type.includes(props.type)) }; } - startFileUpload = () => { - // get selected file - let formData = new FormData(); - - for (let key in this.state.fileList) { - if (this.state.fileList.hasOwnProperty(key) && this.state.fileList[key] instanceof File) { - formData.append("file", this.state.fileList[key]); - } - } - - this.props.onUpload(formData,this.props.widget); - } - - uploadProgress = (e) => { - this.setState({ progress: Math.round(e.percent) }); - } - - clearProgress = () => { - this.setState({ progress: 0 }); - } - handleFileChange(e){ this.props.handleChange({ target: { id: this.props.controlId, value: e.target.value } }); } @@ -88,17 +63,9 @@ class EditFileWidgetControl extends React.Component { Image this.handleFileChange(e)}>{fileOptions} - - - Upload - this.setState({ fileList: e.target.files }) } /> - - - - ; } } diff --git a/src/widget/edit-widget/edit-widget.js b/src/widget/edit-widget/edit-widget.js index 594acf0..01cffdb 100644 --- a/src/widget/edit-widget/edit-widget.js +++ b/src/widget/edit-widget/edit-widget.js @@ -177,8 +177,7 @@ class EditWidgetDialog extends React.Component { this.props.sessionToken, this.props.files, this.props.signals, - (e) => this.handleChange(e), - (f,i) => this.props.onUpload(f,i)); + (e) => this.handleChange(e)); } return (